@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 Flash Infos</h1>
            <p class="text-muted small mb-0">Retrouvez ici les messages supprimés. Vous pouvez les restaurer ou les supprimer définitivement.</p>
        </div>
        <a href="{{ route('admin.flash-infos.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" style="width: 80px;">Ordre</th>
                        <th>Contenu du message</th>
                        <th>Supprimé le</th>
                        <th class="text-end pe-4">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($flashes as $flash)
                    <tr>
                        <td class="ps-4">
                            <span class="badge bg-light text-muted border px-3 py-2 rounded-3">
                                {{ $flash->ordre }}
                            </span>
                        </td>
                        <td>
                            <div class="fw-bold text-muted text-decoration-line-through">{{ Str::limit($flash->contenu, 80) }}</div>
                            <small class="text-danger">Statut : En attente de restauration</small>
                        </td>
                        <td>
                            <div class="small fw-medium text-muted">
                                <i class="fa fa-calendar-xmark me-1 opacity-50"></i>
                                {{ $flash->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">
                                {{-- Bouton Restaurer --}}
                                <form action="{{ route('admin.flash-infos.restore', $flash->id) }}" method="POST" class="d-inline">
                                    @csrf
                                    @method('PATCH')
                                    <button type="submit" class="btn btn-sm btn-light rounded-circle border-0 me-1" title="Restaurer ce flash">
                                        <i class="fa fa-trash-arrow-up text-success"></i>
                                    </button>
                                </form>

                                {{-- Bouton Suppression Définitive --}}
                                <form action="{{ route('admin.flash-infos.force-delete', $flash->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 est irréversible. Supprimer définitivement ce flash ?')" 
                                            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>
        {{-- Pagination si nécessaire --}}
        @if(method_exists($flashes, 'hasPages') && $flashes->hasPages())
        <div class="card-footer bg-white py-3 border-top-0">
            {{ $flashes->links() }}
        </div>
        @endif
    </div>
</div>

<script>
    // Auto-fermeture des alertes
    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