@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
            <h1 class="h3 fw-bold mb-0 text-danger">Corbeille des Articles</h1>
            <p class="text-muted small mb-0">Retrouvez ici les articles supprimés. Vous pouvez les restaurer ou les supprimer définitivement.</p>
        </div>
        <a href="{{ route('admin.articles.index') }}" class="btn btn-outline-secondary rounded-pill px-4">
            <i class="fa fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>

    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4 alert-dismissible fade show" role="alert">
            <i class="fa fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    @endif

    <div class="card border-0 shadow-sm rounded-4 overflow-hidden">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0 table-ci">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4">Image</th>
                        <th>Titre</th>
                        <th>Supprimé le</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($articles as $article)
                    <tr>
                        <td class="ps-4">
                            @if($article->image_url)
                                <img src="{{ asset('storage/' . $article->image_url) }}" class="rounded grayscale" style="width: 60px; height: 40px; object-fit: cover; filter: grayscale(100%); opacity: 0.6;">
                            @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center" style="width: 60px; height: 40px;">
                                    <i class="fa fa-image text-muted opacity-50"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-bold text-muted">{{ Str::limit($article->titre, 60) }}</div>
                            <small class="text-danger">Motif : Suppression temporaire</small>
                        </td>
                        <td>
                            <div class="small fw-medium text-muted">
                                {{ $article->deleted_at->format('d/m/Y à H:i') }}
                            </div>
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group shadow-sm rounded-pill bg-white border p-1">
                                <form action="{{ route('admin.articles.restore', $article->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('PUT')
                                    <button type="submit" class="btn btn-sm btn-light rounded-circle border-0 me-1" title="Restaurer l'article">
                                        <i class="fa fa-trash-arrow-up text-success"></i>
                                    </button>
                                </form>

                                <form action="{{ route('admin.articles.force-delete', $article->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" 
                                            class="btn btn-sm btn-light rounded-circle border-0" 
                                            onclick="return confirm('ATTENTION : Cette action supprimera définitivement l\'article et TOUTES ses images du serveur. Confirmer ?')" 
                                            title="Supprimer définitivement">
                                        <i class="fa fa-circle-xmark text-danger"></i>
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-5 text-muted">
                            <i class="fa-solid fa-trash-can d-block mb-3 fs-1 opacity-25"></i>
                            La corbeille est vide.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($articles->hasPages())
        <div class="card-footer bg-white py-3 border-top-0">
            {{ $articles->links() }}
        </div>
        @endif
    </div>
</div>

<script>
    // Script pour l'auto-fermeture des alertes après 5s
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            const alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                const bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 5000);
    });
</script>
@endsection