@extends('layouts.app')

@section('title', 'Mes réservations - CinemaTwisty')

@section('content')
<div class="container mx-auto px-4 py-8 max-w-6xl">
    <h1 class="text-3xl font-bold text-white mb-6">
        <i class="fas fa-ticket-alt mr-2"></i>Mes réservations
    </h1>

    @if($upcomingReservations->isEmpty() && $pastReservations->isEmpty())
        <div class="bg-white/10 backdrop-blur-lg rounded-lg border border-white/20 p-8 text-center text-gray-200">
            Vous n’avez encore aucune réservation.
        </div>
    @else
        @if($upcomingReservations->isNotEmpty())
        <h2 class="text-2xl font-semibold text-white mb-4 mt-6">Réservations à venir</h2>
        <div class="space-y-4 mb-8">
            @foreach($upcomingReservations as $reservation)
                <div class="bg-white/10 backdrop-blur-lg rounded-lg border border-white/20 p-5">
                    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-5">
                        <div class="flex items-start gap-4">
                            <div class="shrink-0">
                                @if($reservation->seance?->poster_path)
                                    <img
                                        src="{{ asset('storage/' . $reservation->seance->poster_path) }}"
                                        alt="{{ $reservation->seance->title }}"
                                        class="w-24 aspect-[2/3] object-cover rounded-md border border-white/20"
                                    >
                                @else
                                    <div class="w-24 aspect-[2/3] bg-gray-700 rounded-md border border-white/20 flex items-center justify-center">
                                        <i class="fas fa-film text-gray-400"></i>
                                    </div>
                                @endif
                            </div>

                            <div>
                            <h2 class="text-xl font-semibold text-white">{{ $reservation->seance?->title ?? 'Séance supprimée' }}</h2>
                            @if($reservation->seance)
                                <p class="text-gray-200 mt-1">
                                    <i class="fas fa-calendar-alt mr-2"></i>{{ $reservation->seance->seance_at->format('d/m/Y à H:i') }}
                                </p>
                                <p class="text-gray-300">
                                    <i class="fas fa-location-dot mr-2"></i>{{ $reservation->seance->lieu }}
                                </p>
                            @endif
                            @if($reservation->pack)
                                <p class="text-gray-100 mt-2"><strong>Pack :</strong> {{ $reservation->pack->name }}</p>
                            @endif
                            <p class="text-gray-300 text-sm mt-1">
                                Snacks : {{ $reservation->snacks->pluck('name')->join(', ') ?: 'Aucun' }}
                            </p>
                            <p class="text-gray-300 text-sm">
                                Boissons : {{ $reservation->boissons->pluck('name')->join(', ') ?: 'Aucune' }}
                            </p>
                            <p class="text-gray-300 text-sm">
                                Prestations : {{ $reservation->prestations->pluck('name')->join(', ') ?: 'Aucune' }}
                            </p>
                            @if(filled($reservation->special_requests))
                                <p class="text-gray-300 text-sm mt-2">
                                    <strong>Demandes particulières :</strong> {{ $reservation->special_requests }}
                                </p>
                            @endif
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            @if($reservation->seance && $reservation->seance->seance_at->isFuture())
                                <a href="{{ route('reservations.edit', $reservation) }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm transition">
                                    <i class="fas fa-pen mr-1"></i>Modifier
                                </a>
                                <form method="POST" action="{{ route('reservations.destroy', $reservation) }}" onsubmit="return confirm('Annuler cette réservation ?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg text-sm transition">
                                        <i class="fas fa-trash mr-1"></i>Annuler
                                    </button>
                                </form>
                            @else
                                <span class="text-xs px-3 py-2 rounded bg-gray-700 text-gray-200">Séance passée</span>
                            @endif
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @endif

        @if($pastReservations->isNotEmpty())
        <h2 class="text-2xl font-semibold text-white mb-4 mt-10">Réservations passées</h2>
        <div class="space-y-4">
            @foreach($pastReservations as $reservation)
                <div class="bg-white/10 backdrop-blur-lg rounded-lg border border-white/20 p-5">
                    <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-5">
                        <div class="flex items-start gap-4">
                            <div class="shrink-0">
                                @if($reservation->seance?->poster_path)
                                    <img
                                        src="{{ asset('storage/' . $reservation->seance->poster_path) }}"
                                        alt="{{ $reservation->seance->title }}"
                                        class="w-24 aspect-[2/3] object-cover rounded-md border border-white/20"
                                    >
                                @else
                                    <div class="w-24 aspect-[2/3] bg-gray-700 rounded-md border border-white/20 flex items-center justify-center">
                                        <i class="fas fa-film text-gray-400"></i>
                                    </div>
                                @endif
                            </div>

                            <div>
                            <h2 class="text-xl font-semibold text-white">{{ $reservation->seance?->title ?? 'Séance supprimée' }}</h2>
                            @if($reservation->seance)
                                <p class="text-gray-200 mt-1">
                                    <i class="fas fa-calendar-alt mr-2"></i>{{ $reservation->seance->seance_at->format('d/m/Y à H:i') }}
                                </p>
                                <p class="text-gray-300">
                                    <i class="fas fa-location-dot mr-2"></i>{{ $reservation->seance->lieu }}
                                </p>
                            @endif
                            @if($reservation->pack)
                                <p class="text-gray-100 mt-2"><strong>Pack :</strong> {{ $reservation->pack->name }}</p>
                            @endif
                            <p class="text-gray-300 text-sm mt-1">
                                Snacks : {{ $reservation->snacks->pluck('name')->join(', ') ?: 'Aucun' }}
                            </p>
                            <p class="text-gray-300 text-sm">
                                Boissons : {{ $reservation->boissons->pluck('name')->join(', ') ?: 'Aucune' }}
                            </p>
                            <p class="text-gray-300 text-sm">
                                Prestations : {{ $reservation->prestations->pluck('name')->join(', ') ?: 'Aucune' }}
                            </p>
                            @if(filled($reservation->special_requests))
                                <p class="text-gray-300 text-sm mt-2">
                                    <strong>Demandes particulières :</strong> {{ $reservation->special_requests }}
                                </p>
                            @endif
                            </div>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <span class="text-xs px-3 py-2 rounded bg-gray-700 text-gray-200">Séance passée</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        @endif
    @endif
</div>
@endsection