@extends('layouts.app')

@section('title', $title . ' - CinemaTwisty')

@section('content')
<div class="container mx-auto px-4 py-8">
    <div class="mb-8 flex items-center justify-between gap-4">
        <h1 class="text-3xl font-bold text-white">
            <i class="fas fa-film mr-2"></i>{{ $title }}
        </h1>
        <a href="{{ route('home') }}" class="text-gray-300 hover:text-white transition">
            <i class="fas fa-arrow-left mr-2"></i>Retour accueil
        </a>
    </div>

    @php
        $reservedSeanceIds = collect();
        if (auth('site_users')->check()) {
            $reservedSeanceIds = \App\Models\Reservation::where('site_user_id', auth('site_users')->id())
                ->pluck('seance_id');
        }
    @endphp

    @if($seances->isEmpty())
        <div class="text-center py-16 bg-white/10 backdrop-blur-lg rounded-lg border border-white/20">
            <i class="fas fa-calendar-times text-5xl text-gray-400 mb-4"></i>
            <p class="text-gray-200">{{ $emptyMessage }}</p>
        </div>
    @else
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            @foreach($seances as $seance)
                @php $isReserved = $reservedSeanceIds->contains($seance->id); @endphp
                <div class="relative bg-white/10 backdrop-blur-lg rounded-lg shadow-xl border border-white/20 overflow-hidden hover:bg-white/20 transition duration-300">
                    @if($isReserved)
                        <div class="absolute top-8 -left-12 z-10 w-48 text-center bg-green-600 text-white text-xs font-bold py-1 transform -rotate-45 shadow-lg">
                            DÉJÀ RÉSERVÉE
                        </div>
                    @endif

                    @if($seance->poster_path)
                        <img src="{{ asset('storage/' . $seance->poster_path) }}"
                             alt="{{ $seance->title }}"
                             class="w-full aspect-[2/3] object-cover {{ $isReserved ? 'opacity-20' : '' }}">
                    @else
                        <div class="w-full aspect-[2/3] bg-gray-700 flex items-center justify-center {{ $isReserved ? 'opacity-20' : '' }}">
                            <i class="fas fa-film text-4xl text-gray-400"></i>
                        </div>
                    @endif

                    <div class="p-6">
                        <h3 class="text-xl font-bold text-white mb-2">{{ $seance->title }}</h3>
                        <div class="flex items-center text-gray-300 mb-3">
                            <i class="fas fa-clock mr-2"></i>
                            <span>{{ $seance->seance_at->format('d/m/Y à H:i') }}</span>
                        </div>
                        <p class="text-gray-300 text-sm mb-4">
                            <i class="fas fa-location-dot mr-2"></i>{{ $seance->lieu }}
                        </p>

                        @auth('site_users')
                            @if($isReserved)
                                <span class="block w-full bg-gray-600 text-white py-2 px-4 rounded-lg text-center cursor-not-allowed opacity-80">
                                    <i class="fas fa-check mr-2"></i>Réservation déjà faite
                                </span>
                            @elseif($seance->seance_at->isFuture())
                                <a href="{{ route('reservations.create', $seance) }}" class="block w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg text-center transition duration-200">
                                    <i class="fas fa-ticket-alt mr-2"></i>Réserver
                                </a>
                            @else
                                <span class="block w-full bg-gray-700 text-white py-2 px-4 rounded-lg text-center opacity-80">
                                    <i class="fas fa-clock-rotate-left mr-2"></i>Séance passée
                                </span>
                            @endif
                        @else
                            <a href="{{ route('login') }}" class="block w-full bg-gray-600 hover:bg-gray-700 text-white py-2 px-4 rounded-lg text-center transition duration-200">
                                <i class="fas fa-sign-in-alt mr-2"></i>Se connecter pour réserver
                            </a>
                        @endauth
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection