@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-1 text-danger">Corbeille Médiathèque</h1>
            <p class="text-muted small mb-0">Éléments supprimés temporairement. Vous pouvez les restaurer ou les effacer définitivement.</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.mediatheque.index') }}" class="btn btn-outline-dark rounded-pill px-3 shadow-sm bg-white">
                <i class="fa-solid fa-arrow-left me-2"></i>Retour à la liste
            </a>
        </div>
    </div>

    @if (session('success'))
        <div class="alert alert-success border-0 shadow-sm rounded-4 mb-4">
            <i class="fas fa-check-circle me-2"></i>{{ session('success') }}
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger border-0 shadow-sm rounded-4 mb-4">
            <i class="fas fa-exclamation-triangle me-2"></i>{{ session('error') }}
        </div>
    @endif

    {{-- Grille des médias supprimés --}}
    <div class="row g-4">
        @forelse($medias as $media)
            @php
                // Utilisation directe de l'accesseur uniforme défini dans le modèle Mediatheque
                $coverUrl = $media->image_url;

                // Vérification simplifiée de l'existence de la vidéo liée
                $premierFichier = $media->fichiers ? $media->fichiers->first() : null;
                // Si le chemin commence par http, c'est une vidéo YouTube
                $isYoutubeVideo = ($media->type == 'video' && $premierFichier && str_starts_with($premierFichier->getRawOriginal('chemin'), 'http'));
            @endphp
            <div class="col-sm-6 col-md-4 col-xl-3">
                <div class="card border-0 shadow-sm rounded-4 overflow-hidden h-100 position-relative trashed-card opacity-75">
                    
                    {{-- Badge Type stylisé --}}
                    @if($isYoutubeVideo)
                        <span class="badge position-absolute top-0 end-0 m-3 z-1 bg-secondary shadow-sm">
                            <i class="fab fa-youtube me-1"></i> YouTube (Supprimé)
                        </span>
                    @else
                        <span class="badge position-absolute top-0 end-0 m-3 z-1 bg-secondary shadow-sm">
                            <i class="fa-solid {{ $media->type == 'photo' ? 'fa-image' : 'fa-video' }} me-1"></i>
                            {{ $media->type == 'photo' ? 'Photo' : 'Vidéo Locale' }}
                        </span>
                    @endif

                    {{-- Prévisualisation avec filtre Grayscale uniforme --}}
                    <div class="ratio ratio-16x9 bg-light grayscale position-relative overflow-hidden">
                        <img src="{{ $coverUrl }}" 
                             class="object-fit-cover w-100 h-100" 
                             alt="{{ $media->titre }}" 
                             onerror="this.onerror=null; this.src='https://placehold.co/600x400?text=Fichier+Introuvable';">
                        
                        {{-- Indicateur de flux vidéo (barré pour signifier la corbeille) --}}
                        @if($media->type == 'video')
                            <div class="position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center bg-black bg-opacity-50 rounded-circle text-white" style="width: 45px; height: 45px;">
                                <i class="fa-solid fa-video-slash text-white small"></i>
                            </div>
                        @endif
                    </div>

                    {{-- Corps de la carte --}}
                    <div class="card-body p-3 d-flex flex-column">
                        <h6 class="fw-bold text-muted text-truncate mb-1" title="{{ $media->titre }}">
                            {{ $media->titre }}
                        </h6>
                        <p class="small text-danger mb-3 mt-1">
                            <i class="fa-solid fa-calendar-xmark me-1"></i> Supprimé le {{ $media->deleted_at->format('d/m/Y') }}
                        </p>
                        
                        <div class="d-flex gap-2 mt-auto">
                            {{-- Bouton Restaurer --}}
                            <form action="{{ route('admin.mediatheque.restore', $media->id) }}" method="POST" class="flex-grow-1">
                                @csrf
                                <button type="submit" class="btn btn-sm btn-outline-success w-100 rounded-pill py-2 fw-bold">
                                    <i class="fa-solid fa-rotate-left me-1"></i>Restaurer
                                </button>
                            </form>

                            {{-- Bouton Suppression Définitive --}}
                            <form action="{{ route('admin.mediatheque.forceDelete', $media->id) }}" method="POST" class="flex-grow-1" onsubmit="return confirm('Attention ! Cette action est définitive et détruira les fichiers physiques sur le serveur. Purger définitivement ce média ?')">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-sm btn-danger w-100 rounded-pill py-2 fw-bold">
                                    <i class="fa-solid fa-fire-alt me-1"></i>Purger
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <div class="py-5 bg-white rounded-4 shadow-sm border border-dashed">
                    <i class="fa-solid fa-trash-arrow-up fa-4x mb-3 text-muted opacity-25"></i>
                    <p class="text-muted fw-bold mb-3">La corbeille est vide</p>
                    <a href="{{ route('admin.mediatheque.index') }}" class="btn btn-outline-dark rounded-pill px-4">
                        Retourner à la médiathèque
                    </a>
                </div>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    @if($medias->hasPages())
        <div class="d-flex justify-content-center mt-5">
            {{ $medias->links() }}
        </div>
    @endif
</div>

<style>
    .trashed-card { transition: all 0.3s ease; }
    .trashed-card:hover {
        opacity: 1 !important;
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }
    .grayscale { filter: grayscale(100%); opacity: 0.8; }
    .object-fit-cover { object-fit: cover; width: 100%; height: 100%; }
    .border-dashed { border-style: dashed !important; border-width: 2px !important; }
</style>
@endsection