@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-dark">Médiathèque</h1>
            <p class="text-muted small mb-0">Gérez vos photos, vidéos et documents de l'institution</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.mediatheque.trashed') }}" class="btn btn-outline-secondary rounded-pill px-3 shadow-sm border-0 bg-white">
                <i class="fa-solid fa-trash-can me-2"></i>Corbeille
            </a>
            <a href="{{ route('admin.mediatheque.create') }}" class="btn btn-success rounded-pill px-4 shadow-sm">
                <i class="fa-solid fa-plus-circle me-2"></i>Ajouter un Média
            </a>
        </div>
    </div>

    {{-- Filtres par type --}}
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="d-flex gap-2 flex-wrap">
                <a href="{{ route('admin.mediatheque.index') }}" 
                   class="btn btn-sm {{ !request('type') ? 'btn-dark' : 'btn-outline-dark' }} rounded-pill px-3">
                    Tous
                </a>
                <a href="{{ route('admin.mediatheque.index', ['type' => 'photo']) }}" 
                   class="btn btn-sm {{ request('type') == 'photo' ? 'btn-dark' : 'btn-outline-dark' }} rounded-pill px-3">
                    Photos
                </a>
                <a href="{{ route('admin.mediatheque.index', ['type' => 'video']) }}" 
                   class="btn btn-sm {{ request('type') == 'video' ? 'btn-dark' : 'btn-outline-dark' }} rounded-pill px-3">
                    Vidéos
                </a>
            </div>
        </div>
    </div>

    {{-- Grille des médias --}}
    <div class="row g-4">
        @forelse($medias as $media)
            @php
                // Nettoyage robuste du chemin de la couverture/miniature
                $cleanPath = str_replace('\\', '/', $media->image_path);
                $cleanPath = str_replace('public/', '', $cleanPath);
                $coverUrl = asset('storage/' . ltrim($cleanPath, '/'));

                // Vérification si la vidéo rattachée est un lien YouTube
                $premierFichier = $media->fichiers->first();
                $isYoutubeVideo = ($media->type == 'video' && $premierFichier && $premierFichier->is_youtube);
            @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 media-card">
                    
                    {{-- Badge Type --}}
                    @if($isYoutubeVideo)
                        <span class="badge position-absolute top-0 end-0 m-3 z-1 bg-danger shadow-sm">
                            <i class="fab fa-youtube me-1"></i> YouTube
                        </span>
                    @else
                        <span class="badge position-absolute top-0 end-0 m-3 z-1 {{ $media->type == 'photo' ? 'bg-primary' : 'bg-warning text-dark' }} 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

                    {{-- Badge Statut Invisible --}}
                    @if(!$media->is_active)
                        <span class="badge position-absolute top-0 start-0 m-3 z-1 bg-secondary shadow-sm">
                            <i class="fa-solid fa-eye-slash me-1"></i> Masqué
                        </span>
                    @endif

                    {{-- Prévisualisation (Couverture/Miniature pour tous les types) --}}
                    <div class="ratio ratio-16x9 bg-light 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=Miniature+Introuvable';">
                        
                        {{-- Superposition d'un bouton Play si c'est une vidéo --}}
                        @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-40 rounded-circle text-white shadow" style="width: 45px; height: 45px; pointer-events: none;">
                                <i class="fa-solid fa-play {{ $isYoutubeVideo ? 'text-danger' : '' }} ms-1"></i>
                            </div>
                        @endif
                    </div>

                    {{-- Corps de la carte --}}
                    <div class="card-body p-3 d-flex flex-column">
                        <h6 class="fw-bold text-dark text-truncate mb-1" title="{{ $media->titre }}">
                            {{ $media->titre }}
                        </h6>
                        <p class="text-muted small mb-2 text-truncate">
                            <i class="fa-solid fa-location-dot me-1"></i> {{ $media->evenement ?? 'Aucun événement' }}
                        </p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-auto pt-2 border-top">
                            <small class="text-muted" style="font-size: 0.75rem;">
                                {{ $media->created_at->format('d/m/Y') }}
                            </small>
                            <div class="btn-group shadow-sm rounded-pill bg-light p-1">
                                <a href="{{ route('admin.mediatheque.edit', $media->id) }}" class="btn btn-sm btn-white border-0 rounded-circle mx-1" title="Modifier">
                                    <i class="fa-solid fa-pen text-primary"></i>
                                </a>
                                <form action="{{ route('admin.mediatheque.destroy', $media->id) }}" method="POST" class="d-inline" onsubmit="return confirm('Déplacer ce média vers la corbeille ?')">
                                    @csrf 
                                    @method('DELETE')
                                    <button type="submit" class="btn btn-sm btn-white border-0 rounded-circle mx-1" title="Supprimer">
                                        <i class="fa-solid fa-trash text-danger"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center py-5">
                <div class="py-5 bg-white rounded-4 shadow-sm border">
                    <i class="fa-solid fa-photo-video fa-4x mb-3 text-muted opacity-25"></i>
                    <p class="text-muted fw-bold">Aucun média trouvé pour cette sélection</p>
                    <a href="{{ route('admin.mediatheque.create') }}" class="btn btn-success rounded-pill px-4">
                        Ajouter votre premier média
                    </a>
                </div>
            </div>
        @endforelse
    </div>

    {{-- Pagination --}}
    <div class="d-flex justify-content-center mt-5">
        {{ $medias->appends(request()->query())->links() }}
    </div>
</div>

<style>
    .media-card { transition: all 0.3s ease; border: 1px solid rgba(0,0,0,0.05); }
    .media-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0,0,0,0.12) !important;
    }
    .object-fit-cover { object-fit: cover; width: 100%; height: 100%; }
    .btn-white { background: white; transition: background 0.2s; border: 1px solid #eee !important; }
    .btn-white:hover { background: #f8f9fa; }
    .ratio img { transition: transform 0.5s ease; }
    .media-card:hover .ratio img { transform: scale(1.05); }
</style>
@endsection