@extends('layouts.admin')

@section('content')
<div class="container-fluid py-4">
    {{-- En-tête --}}
    <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 : HeroSlides</h1>
            <p class="text-muted small mb-0">Liste des slides supprimés temporairement.</p>
        </div>
        <a href="{{ route('admin.hero-slides.index') }}" class="btn btn-outline-secondary rounded-pill px-4 shadow-sm">
            <i class="fa fa-arrow-left me-2"></i>Retour à la liste
        </a>
    </div>

    {{-- Messages de succès --}}
    @if(session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4">
            <i class="fa fa-check-circle me-2"></i> {{ session('success') }}
        </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">
                <thead class="bg-light">
                    <tr>
                        <th class="ps-4" style="width: 120px;">Image</th>
                        <th>Titre</th>
                        <th>Date de suppression</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($heroSlides as $slide)
                    <tr>
                        <td class="ps-4">
                            @if($slide->image)
                                <img src="{{ asset('storage/' . $slide->image) }}" 
                                     class="rounded grayscale border" 
                                     style="width: 100px; height: 50px; object-fit: cover; opacity: 0.6;"
                                     alt="Slide supprimé">
                            @else
                                <div class="rounded bg-light d-flex align-items-center justify-content-center border" style="width: 100px; height: 50px;">
                                    <i class="fa fa-image text-muted opacity-25"></i>
                                </div>
                            @endif
                        </td>
                        <td>
                            <div class="fw-bold text-muted">{{ $slide->titre }}</div>
                            <small class="text-danger">ID: #{{ $slide->id }}</small>
                        </td>
                        <td>
                            <span class="text-muted small">
                                <i class="fa fa-calendar-alt me-1"></i>
                                {{ $slide->deleted_at ? $slide->deleted_at->format('d/m/Y à H:i') : 'Date inconnue' }}
                            </span>
                        </td>
                        <td class="text-end pe-4">
                            <div class="d-flex justify-content-end gap-2">
                                {{-- Bouton Restaurer --}}
                                <form action="{{ route('admin.hero-slides.restore', ['id' => $slide->id]) }}" method="POST">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-sm btn-outline-success rounded-pill px-3 shadow-sm">
                                        <i class="fa fa-undo me-1"></i> Restaurer
                                    </button>
                                </form>

                                {{-- Bouton Suppression Définitive --}}
                                <form action="{{ route('admin.hero-slides.force-delete', ['id' => $slide->id]) }}" method="POST" 
                                      onsubmit="return confirm('Attention ! Cette action est irréversible. L\'image sera supprimée du serveur. Continuer ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-danger rounded-pill px-3 text-white shadow-sm">
                                        <i class="fa fa-trash-alt me-1"></i> Définitivement
                                    </button>
                                </form>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="4" class="text-center py-5">
                            <div class="py-4">
                                <i class="fa fa-trash-arrow-up d-block mb-3 fs-1 text-muted opacity-25"></i>
                                <p class="text-muted mb-0">La corbeille est vide.</p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
    .grayscale { filter: grayscale(100%); transition: 0.3s; }
    .grayscale:hover { filter: grayscale(0%); opacity: 1 !important; }
    .bg-light { background-color: #f8f9fa !important; }
</style>
@endsection