@extends('layouts.base')

@section('content')
<div class="container my-5">
    
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('home') }}" class="text-decoration-none text-muted">Accueil</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Vidéos</li>
                </ol>
            </nav>
            <h1 class="serif-title mb-2">Vidéos & Audiences</h1>
            <div style="width: 60px; height: 3px; background-color: var(--accent-orange, #f39c12); mb-4"></div>
        </div>
    </div>

    <div class="row g-4">
        @forelse($videos as $video)
            <div class="col-md-6">
                <div class="card h-100 shadow-sm border-0">
                    <div class="position-relative overflow-hidden" style="height: 300px; background-color: #000;">
                        <img src="{{('storage/' . $video->image_path) }}" 
                             class="w-100 h-100 object-fit-cover opacity-75" 
                             alt="{{ $video->titre }}">
                        
                        {{-- Extraction de l'URL du fichier lié --}}
                        @php 
                            $fichier = $video->fichiers->first();
                            $urlVideo = $fichier ? $fichier->chemin : '#';
                        @endphp

                        <a href="{{ $urlVideo }}" target="_blank" class="position-absolute top-50 start-50 translate-middle d-flex align-items-center justify-content-center bg-danger text-white rounded-circle shadow" style="width: 70px; height: 70px; transition: transform 0.2s;">
                            <i class="fa fa-play fa-2x ms-1"></i>
                        </a>
                    </div>
                    <div class="card-body">
                        <h5 class="fw-bold text-dark">{{ $video->titre }}</h5>
                        @if($video->evenement)
                            <p class="text-muted small mb-0">{{ $video->evenement }}</p>
                        @endif
                    </div>
                </div>
            </div>
        @empty
            <div class="col-12 text-center my-5 py-5 text-muted">
                <i class="fa fa-video-slash fa-3x mb-3 text-secondary"></i>
                <p class="fs-5">Aucune vidéo disponible pour le moment.</p>
            </div>
        @endforelse
    </div>

    <div class="row mt-5">
        <div class="col-12 d-flex justify-content-center">
            {{ $videos->links() }}
        </div>
    </div>
</div>
@endsection