@extends('layouts.app')

@section('title', (($isEdit ?? false) ? 'Modifier ma réservation' : 'Réserver une séance') . ' - CinemaTwisty')

@section('content')
@php
    $selectedPackId = (int) old('seance_pack_id', isset($reservation) ? $reservation->seance_pack_id : 0);
@endphp

<div class="container mx-auto px-4 py-8 max-w-4xl">
    <div class="mb-6">
        <a href="{{ route('home') }}" class="text-gray-300 hover:text-white transition">
            <i class="fas fa-arrow-left mr-2"></i>Retour
        </a>
    </div>

    <div class="bg-white/10 backdrop-blur-lg rounded-lg border border-white/20 p-6 mb-6">
        <div class="flex flex-col md:flex-row gap-6">
            @if($seance->poster_path)
                <img src="{{ asset('storage/' . $seance->poster_path) }}" alt="{{ $seance->title }}" class="w-40 h-56 object-cover rounded-lg">
            @endif
            <div>
                <h1 class="text-3xl font-bold text-white mb-2">{{ $seance->title }}</h1>
                <p class="text-gray-300 mb-2">
                    <i class="fas fa-calendar-alt mr-2"></i>{{ $seance->seance_at->format('d/m/Y à H:i') }}
                </p>
                <p class="text-gray-300 mb-4">
                    <i class="fas fa-location-dot mr-2"></i>{{ $seance->lieu }}
                </p>
                @if($seance->description)
                    <p class="text-gray-200">{{ $seance->description }}</p>
                @endif
            </div>
        </div>
    </div>

    <form method="POST" action="{{ $action }}" class="bg-white/10 backdrop-blur-lg rounded-lg border border-white/20 p-6 space-y-6">
        @csrf
        @if(($isEdit ?? false) === true)
            @method('PUT')
        @endif

        <div>
            <label class="block text-white font-semibold mb-2">Choisir un pack</label>
            <input type="hidden" id="seance_pack_id" name="seance_pack_id" value="{{ $selectedPackId ?: '' }}" required>

            <div id="pack-cards" class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @foreach($seance->packs as $pack)
                    <button
                        type="button"
                        data-pack-id="{{ $pack->id }}"
                        class="pack-card text-left rounded-lg border p-4 transition {{ $selectedPackId === $pack->id ? 'border-blue-400 bg-blue-500/20 ring-2 ring-blue-400' : 'border-white/30 bg-white/10 hover:bg-white/20' }}"
                    >
                        <div class="flex items-start justify-between gap-3">
                            <h3 class="text-white font-semibold text-lg">{{ $pack->name }}</h3>
                            @if($pack->price)
                                <span class="text-xs px-2 py-1 rounded bg-white/20 text-white whitespace-nowrap">
                                    {{ number_format((float) $pack->price, 2, ',', ' ') }} €
                                </span>
                            @endif
                        </div>

                        <div class="mt-3">
                            <p class="text-xs uppercase tracking-wide text-gray-300 mb-1">Vous pouvez choisir :</p>
                            <div class="flex flex-wrap gap-2 text-sm">
                                @if((int) $pack->snack_limit > 0)
                                    <span class="inline-flex items-center rounded-full bg-green-500/80 text-white border border-green-400/40 px-3 py-1 font-medium">
                                        {{ (int) $pack->snack_limit }} snack{{ (int) $pack->snack_limit > 1 ? 's' : '' }}
                                    </span>
                                @endif
                                @if((int) $pack->boisson_limit > 0)
                                    <span class="inline-flex items-center rounded-full bg-orange-500/80 text-white border border-orange-400/40 px-3 py-1 font-medium">
                                        {{ (int) $pack->boisson_limit }} boisson{{ (int) $pack->boisson_limit > 1 ? 's' : '' }}
                                    </span>
                                @endif
                                @if((int) $pack->prestation_limit > 0)
                                    <span class="inline-flex items-center rounded-full bg-red-500/80 text-white border border-red-400/40 px-3 py-1 font-medium">
                                        {{ (int) $pack->prestation_limit }} prestation{{ (int) $pack->prestation_limit > 1 ? 's' : '' }}
                                    </span>
                                @endif
                                @if($pack->allow_special_request)
                                    <span class="inline-flex items-center rounded-full bg-purple-500/80 text-white border border-purple-400/40 px-3 py-1 font-medium">
                                        Demandes particulières
                                    </span>
                                @endif
                                @if((int) $pack->snack_limit === 0 && (int) $pack->boisson_limit === 0 && (int) $pack->prestation_limit === 0)
                                    <span class="text-sm text-gray-100">Rien</span>
                                @endif
                            </div>
                        </div>
                    </button>
                @endforeach
            </div>

            @error('seance_pack_id')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div id="snacks-section">
            <label class="block text-white font-semibold mb-2">Snacks</label>
            <p id="snacks-hint" class="text-xs text-gray-300 mb-2"></p>
            <div id="snacks" class="grid grid-cols-1 md:grid-cols-2 gap-2 rounded-lg border border-white/30 bg-white/10 p-3 min-h-14">
                @foreach($snacks as $snack)
                    <label class="inline-flex items-center gap-2 text-white text-sm @unless($snack->en_stock) opacity-50 cursor-not-allowed @endunless">
                        <input
                            type="checkbox"
                            name="snacks[]"
                            value="{{ $snack->id }}"
                            @unless($snack->en_stock) disabled onclick="return false;" tabindex="-1" @endunless
                            class="h-5 w-5 rounded border-white/40 bg-white/10 text-blue-600 focus:ring-blue-500 @unless($snack->en_stock) opacity-50 cursor-not-allowed @endunless"
                            @if(
                                $snack->en_stock &&
                                in_array(
                                    $snack->id,
                                    array_map(
                                        'intval',
                                        old('snacks', isset($reservation) ? $reservation->snacks->pluck('id')->all() : [])
                                    ),
                                    true
                                )
                            )
                                checked
                            @endif
                        >
                        <span>{{ $snack->name }}</span>
                        @if(! $snack->en_stock)
                            <span class="text-xs text-red-300">❌ Rupture de stock</span>
                        @endif
                    </label>
                @endforeach
            </div>
            @error('snacks')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
            @error('snacks.*')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div id="boissons-section">
            <label class="block text-white font-semibold mb-2">Boissons</label>
            <p id="boissons-hint" class="text-xs text-gray-300 mb-2"></p>
            <div id="boissons" class="grid grid-cols-1 md:grid-cols-2 gap-2 rounded-lg border border-white/30 bg-white/10 p-3 min-h-14">
                @foreach($boissons as $boisson)
                    <label class="inline-flex items-center gap-2 text-white text-sm @unless($boisson->en_stock) opacity-50 cursor-not-allowed @endunless">
                        <input
                            type="checkbox"
                            name="boissons[]"
                            value="{{ $boisson->id }}"
                            @unless($boisson->en_stock) disabled onclick="return false;" tabindex="-1" @endunless
                            class="h-5 w-5 rounded border-white/40 bg-white/10 text-blue-600 focus:ring-blue-500 @unless($boisson->en_stock) opacity-50 cursor-not-allowed @endunless"
                            @if(
                                $boisson->en_stock &&
                                in_array(
                                    $boisson->id,
                                    array_map(
                                        'intval',
                                        old('boissons', isset($reservation) ? $reservation->boissons->pluck('id')->all() : [])
                                    ),
                                    true
                                )
                            )
                                checked
                            @endif
                        >
                        <span>{{ $boisson->name }}</span>
                        @if(! $boisson->en_stock)
                            <span class="text-xs text-red-300">❌ Rupture de stock</span>
                        @endif
                    </label>
                @endforeach
            </div>
            @error('boissons')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
            @error('boissons.*')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div id="prestations-section">
            <label class="block text-white font-semibold mb-2">Prestations</label>
            <p id="prestations-hint" class="text-xs text-gray-300 mb-2"></p>
            <div id="prestations" class="grid grid-cols-1 md:grid-cols-2 gap-2 rounded-lg border border-white/30 bg-white/10 p-3 min-h-14">
                @foreach($prestations as $prestation)
                    <label class="inline-flex items-center gap-2 text-white text-sm">
                        <input
                            type="checkbox"
                            name="prestations[]"
                            value="{{ $prestation->id }}"
                            class="h-5 w-5 rounded border-white/40 bg-white/10 text-blue-600 focus:ring-blue-500"
                            {{ in_array($prestation->id, array_map('intval', old('prestations', isset($reservation) ? $reservation->prestations->pluck('id')->all() : [])), true) ? 'checked' : '' }}
                        >
                        <span>{{ $prestation->name }}</span>
                    </label>
                @endforeach
            </div>
            @error('prestations')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
            @error('prestations.*')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div id="special-requests-section">
            <label for="special_requests" class="block text-white font-semibold mb-2">Demandes particulières</label>
            <p id="special-requests-hint" class="text-xs text-gray-300 mb-2"></p>
            <textarea
                id="special_requests"
                name="special_requests"
                rows="4"
                maxlength="2000"
                placeholder="Ex: température de la salle, ambiance lumineuse..."
                class="w-full rounded-lg border border-white/30 bg-white/10 text-white placeholder:text-gray-300 p-3 focus:outline-none focus:ring-2 focus:ring-blue-500"
            >{{ old('special_requests', isset($reservation) ? $reservation->special_requests : '') }}</textarea>
            @error('special_requests')
                <p class="text-red-300 text-sm mt-2">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex items-center gap-3 pt-2">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
                <i class="fas fa-check mr-2"></i>{{ $submitLabel ?? 'Confirmer la réservation' }}
            </button>
            <a href="{{ route('reservations.index') }}" class="text-gray-300 hover:text-white transition">Retour</a>
        </div>
    </form>
</div>

@php
    $packsData = $seance->packs->mapWithKeys(fn ($pack) => [
        $pack->id => [
            'snack_limit' => (int) $pack->snack_limit,
            'boisson_limit' => (int) $pack->boisson_limit,
            'prestation_limit' => (int) $pack->prestation_limit,
            'allow_special_request' => (bool) $pack->allow_special_request,
        ],
    ]);
@endphp

<script>
    const packsData = @json($packsData);
    const selectedPack = document.getElementById('seance_pack_id');
    const packCards = Array.from(document.querySelectorAll('.pack-card'));
    const specialRequests = document.getElementById('special_requests');
    const specialRequestsSection = document.getElementById('special-requests-section');
    const snacksSection = document.getElementById('snacks-section');
    const boissonsSection = document.getElementById('boissons-section');
    const prestationsSection = document.getElementById('prestations-section');
    const snacksHint = document.getElementById('snacks-hint');
    const boissonsHint = document.getElementById('boissons-hint');
    const prestationsHint = document.getElementById('prestations-hint');
    const specialRequestsHint = document.getElementById('special-requests-hint');

    function getCategoryInputs(name) {
        return Array.from(document.querySelectorAll(`input[name="${name}[]"]`));
    }

    function applyLimit(name, limit) {
        const inputs = getCategoryInputs(name);

        if (limit <= 0) {
            for (const input of inputs) {
                input.checked = false;
                input.disabled = true;
            }
            return;
        }

        for (const input of inputs) {
            input.disabled = false;
        }

        const checked = inputs.filter((input) => input.checked);
        if (checked.length > limit) {
            checked.slice(limit).forEach((input) => {
                input.checked = false;
            });
        }
    }

    function bindLimitWatcher(name, limitSelector) {
        const inputs = getCategoryInputs(name);
        for (const input of inputs) {
            input.addEventListener('change', () => {
                const limit = limitSelector();
                if (limit <= 0) {
                    input.checked = false;
                    return;
                }

                const checked = inputs.filter((i) => i.checked);
                if (checked.length > limit) {
                    input.checked = false;
                }
            });
        }
    }

    function toggleCategorySection(section, limit) {
        section.classList.toggle('hidden', limit <= 0);
    }

    function setActiveCard(selectedPackId) {
        for (const card of packCards) {
            const isActive = String(card.dataset.packId) === String(selectedPackId);
            card.classList.toggle('border-blue-400', isActive);
            card.classList.toggle('bg-blue-500/20', isActive);
            card.classList.toggle('ring-2', isActive);
            card.classList.toggle('ring-blue-400', isActive);
            card.classList.toggle('border-white/30', !isActive);
            card.classList.toggle('bg-white/10', !isActive);
        }
    }

    function updateHintsAndRules() {
        const packId = selectedPack.value;
        const pack = packsData[packId] ?? { snack_limit: 0, boisson_limit: 0, prestation_limit: 0, allow_special_request: false };

        toggleCategorySection(snacksSection, pack.snack_limit);
        toggleCategorySection(boissonsSection, pack.boisson_limit);
        toggleCategorySection(prestationsSection, pack.prestation_limit);

        snacksHint.textContent = `Max: ${pack.snack_limit}`;
        boissonsHint.textContent = `Max: ${pack.boisson_limit}`;
        prestationsHint.textContent = `Max: ${pack.prestation_limit}`;

        applyLimit('snacks', pack.snack_limit);
        applyLimit('boissons', pack.boisson_limit);
        applyLimit('prestations', pack.prestation_limit);

        specialRequestsSection.classList.toggle('hidden', !pack.allow_special_request);

        if (pack.allow_special_request) {
            specialRequests.disabled = false;
            specialRequestsHint.textContent = 'Ce pack autorise une demande particulière.';
            specialRequests.classList.remove('opacity-60', 'cursor-not-allowed');
        } else {
            specialRequests.value = '';
            specialRequests.disabled = true;
            specialRequestsHint.textContent = 'Ce pack ne permet pas de demande particulière.';
            specialRequests.classList.add('opacity-60', 'cursor-not-allowed');
        }
    }

    for (const card of packCards) {
        card.addEventListener('click', () => {
            selectedPack.value = card.dataset.packId;
            setActiveCard(selectedPack.value);
            updateHintsAndRules();
        });
    }

    bindLimitWatcher('snacks', () => (packsData[selectedPack.value]?.snack_limit ?? 0));
    bindLimitWatcher('boissons', () => (packsData[selectedPack.value]?.boisson_limit ?? 0));
    bindLimitWatcher('prestations', () => (packsData[selectedPack.value]?.prestation_limit ?? 0));

    if (selectedPack.value) {
        setActiveCard(selectedPack.value);
        updateHintsAndRules();
    } else if (packCards.length) {
        selectedPack.value = packCards[0].dataset.packId;
        setActiveCard(selectedPack.value);
        updateHintsAndRules();
    } else {
        updateHintsAndRules();
    }

    selectedPack.addEventListener('change', () => {
        setActiveCard(selectedPack.value);
        updateHintsAndRules();
    });
</script>
@endsection