@extends('layouts.app')

@section('title', $event->title)

@section('content')

<div class="max-w-6xl mx-auto px-4 sm:px-6 py-6 pb-32 sm:pb-10">

    {{-- ========================================================= --}}
    {{-- RETOUR --}}
    {{-- ========================================================= --}}

    <a
        href="{{ route('events.index') }}"
        class="inline-flex items-center gap-2 text-sm font-semibold text-gray-500 hover:text-fuchsia-600 transition-colors mb-5"
    >
        <span class="w-9 h-9 rounded-xl bg-white border border-gray-100 flex items-center justify-center shadow-sm">
            <x-icon name="arrow-left" class="w-4 h-4" />
        </span>

        Retour aux événements
    </a>


    {{-- ========================================================= --}}
    {{-- BANNIÈRE --}}
    {{-- ========================================================= --}}

    <div class="bg-white rounded-[2rem] overflow-hidden border border-gray-100 shadow-[0_15px_50px_rgba(30,15,45,0.08)] mb-7">

        @if($event->cover_image)

            <div class="relative w-full h-[250px] sm:h-[350px] lg:h-[430px] bg-gray-100 overflow-hidden">

                <img
                    src="{{ asset('storage/' . $event->cover_image) }}"
                    alt="{{ $event->title }}"
                    class="absolute inset-0 w-full h-full object-cover object-center"
                    loading="eager"
                >

                {{-- Dégradé pour rendre le texte lisible --}}
                <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/25 to-transparent"></div>


                {{-- Catégorie --}}
                @if($event->category)

                    <div class="absolute top-5 left-5">

                        <span class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-black/35 backdrop-blur-md border border-white/20 text-white text-xs font-bold uppercase tracking-wider">

                            <span class="w-2 h-2 rounded-full bg-fuchsia-400"></span>

                            {{ $event->category }}

                        </span>

                    </div>

                @endif


                {{-- Contenu bannière --}}
                <div class="absolute left-0 right-0 bottom-0 p-6 sm:p-8">

                    <div class="max-w-4xl">

                        {{-- Date --}}
                        <div class="inline-flex items-center gap-2 text-white/90 text-sm sm:text-base font-semibold mb-3">

                            <span class="w-9 h-9 rounded-xl bg-white/15 backdrop-blur-md flex items-center justify-center">

                                <x-icon
                                    name="calendar"
                                    class="w-4 h-4"
                                />

                            </span>

                            <span>
                                {{ $event->starts_at->locale('fr')->translatedFormat('l d F Y') }}

                                à

                                {{ $event->starts_at->format('H\hi') }}
                            </span>

                        </div>


                        {{-- Titre --}}
                        <h1 class="font-display text-3xl sm:text-4xl lg:text-5xl font-black text-white leading-tight drop-shadow-lg">
                            {{ $event->title }}
                        </h1>


                        {{-- Lieu --}}
                        <div class="flex items-center gap-2 text-white/85 text-sm sm:text-base mt-3">

                            <x-icon
                                name="map-pin"
                                class="w-5 h-5"
                            />

                            <span>
                                {{ $event->location }}
                            </span>

                        </div>

                    </div>

                </div>

            </div>

        @else

            {{-- ================================================= --}}
            {{-- BANNIÈRE PAR DÉFAUT --}}
            {{-- ================================================= --}}

            <div class="relative h-[250px] sm:h-[350px] bg-gradient-to-br from-fuchsia-600 via-purple-600 to-orange-400 flex items-center justify-center overflow-hidden">

                <div class="absolute -top-20 -left-20 w-80 h-80 rounded-full bg-white/10"></div>

                <div class="absolute -bottom-32 -right-20 w-[420px] h-[420px] rounded-full bg-white/10"></div>

                <div
                    class="absolute inset-0 opacity-20"
                    style="background-image: radial-gradient(circle at 1px 1px, white 1px, transparent 0); background-size: 25px 25px;"
                ></div>


                <div class="relative text-center px-6">

                    <div class="w-20 h-20 mx-auto rounded-3xl bg-white/15 backdrop-blur-md flex items-center justify-center mb-4">

                        <x-icon
                            name="ticket"
                            class="w-10 h-10 text-white"
                        />

                    </div>

                    <p class="text-white/80 text-sm font-semibold uppercase tracking-widest">
                        Événement
                    </p>

                    <h1 class="font-display text-3xl sm:text-4xl font-black text-white mt-2">
                        {{ $event->title }}
                    </h1>

                </div>


                @if($event->category)

                    <span class="absolute top-5 left-5 px-4 py-2 rounded-full bg-white/15 backdrop-blur-md border border-white/20 text-white text-xs font-bold uppercase tracking-wider">

                        {{ $event->category }}

                    </span>

                @endif

            </div>


            {{-- Informations sous la bannière --}}

            <div class="p-6 sm:p-8">

                <div class="flex flex-wrap items-center gap-4">

                    <div class="flex items-center gap-2 text-fuchsia-600 font-bold text-sm">

                        <x-icon
                            name="calendar"
                            class="w-5 h-5"
                        />

                        {{ $event->starts_at->locale('fr')->translatedFormat('l d F Y') }}

                    </div>


                    <span class="text-gray-300">
                        •
                    </span>


                    <div class="flex items-center gap-2 text-gray-500 text-sm">

                        <x-icon
                            name="clock"
                            class="w-5 h-5"
                        />

                        {{ $event->starts_at->format('H\hi') }}

                    </div>


                    <span class="text-gray-300">
                        •
                    </span>


                    <div class="flex items-center gap-2 text-gray-500 text-sm">

                        <x-icon
                            name="map-pin"
                            class="w-5 h-5"
                        />

                        {{ $event->location }}

                    </div>

                </div>

            </div>

        @endif


        {{-- ========================================================= --}}
        {{-- DESCRIPTION --}}
        {{-- ========================================================= --}}

        @if($event->description)

            <div class="px-6 sm:px-8 py-6 border-t border-gray-100">

                <div class="flex items-start gap-4">

                    <div class="w-11 h-11 rounded-2xl bg-fuchsia-50 flex items-center justify-center shrink-0">

                        <x-icon
                            name="information-circle"
                            class="w-5 h-5 text-fuchsia-600"
                        />

                    </div>


                    <div class="min-w-0">

                        <h2 class="font-display font-black text-gray-900 text-lg">
                            À propos de cet événement
                        </h2>

                        <p class="text-gray-600 text-sm sm:text-base leading-relaxed mt-2 whitespace-pre-line">
                            {{ $event->description }}
                        </p>

                    </div>

                </div>

            </div>

        @endif

    </div>


    {{-- ========================================================= --}}
    {{-- BILLETS --}}
    {{-- ========================================================= --}}

    <div class="grid lg:grid-cols-[1fr_350px] gap-7 items-start">

        <div class="bg-white border border-gray-100 rounded-[2rem] p-5 sm:p-7 shadow-[0_10px_40px_rgba(30,15,45,0.06)]">

            <div class="mb-6">

                <p class="text-xs uppercase tracking-[0.18em] font-bold text-fuchsia-500">
                    Billetterie
                </p>

                <h2 class="font-display text-2xl sm:text-3xl font-black text-gray-900 mt-1">
                    Choisissez vos billets
                </h2>

                <p class="text-sm text-gray-500 mt-2">
                    Sélectionnez le nombre de billets que vous souhaitez acheter.
                </p>

            </div>


            @auth

                <form
                    method="POST"
                    action="{{ route('orders.store', $event) }}"
                    id="ticket-form"
                >

                    @csrf


                    <div class="space-y-3">

                        @foreach($event->ticketTypes as $type)

                            <div class="ticket-row group border border-gray-100 bg-gray-50/50 rounded-2xl p-4 sm:p-5 hover:bg-white hover:border-fuchsia-200 hover:shadow-md transition-all">

                                <div class="flex items-center justify-between gap-4">

                                    <div class="flex items-center gap-3 min-w-0">

                                        <div class="w-11 h-11 rounded-xl bg-white border border-gray-100 flex items-center justify-center shrink-0">

                                            <x-icon
                                                name="ticket"
                                                class="w-5 h-5 text-fuchsia-600"
                                            />

                                        </div>


                                        <div class="min-w-0">

                                            <p class="font-bold text-gray-900 truncate">
                                                {{ $type->name }}
                                            </p>

                                            <div class="flex flex-wrap items-center gap-2 mt-1">

                                                <span class="font-extrabold text-fuchsia-600">
                                                    {{ number_format($type->price, 0, ',', ' ') }} FCFA
                                                </span>

                                                <span class="text-gray-300">
                                                    •
                                                </span>


                                                @if($type->remaining() > 0)

                                                    <span class="text-xs font-semibold text-emerald-600">

                                                        {{ $type->remaining() }}

                                                        billet(s) disponible(s)

                                                    </span>

                                                @else

                                                    <span class="text-xs font-semibold text-rose-500">
                                                        Billets épuisés
                                                    </span>

                                                @endif

                                            </div>

                                        </div>

                                    </div>


                                    {{-- Quantité --}}

                                    <div class="flex items-center gap-1 bg-white border border-gray-200 rounded-2xl p-1 shrink-0">

                                        <button
                                            type="button"
                                            onclick="stepQty(this, -1, {{ $type->remaining() }})"
                                            class="w-10 h-10 rounded-xl text-gray-500 font-bold text-xl hover:bg-gray-100 transition"
                                        >
                                            −
                                        </button>


                                        <input
                                            type="number"
                                            name="items[{{ $loop->index }}][quantity]"
                                            min="0"
                                            max="{{ $type->remaining() }}"
                                            value="0"
                                            data-price="{{ $type->price }}"
                                            class="qty-input w-10 text-center border-0 bg-transparent font-black text-gray-900 text-lg focus:ring-0 focus:outline-none"
                                            readonly
                                        >


                                        <button
                                            type="button"
                                            onclick="stepQty(this, 1, {{ $type->remaining() }})"
                                            class="w-10 h-10 rounded-xl bg-gray-900 text-white font-bold text-xl hover:bg-fuchsia-600 transition"
                                            {{ $type->remaining() <= 0 ? 'disabled' : '' }}
                                        >
                                            +
                                        </button>

                                    </div>

                                </div>


                                <input
                                    type="hidden"
                                    name="items[{{ $loop->index }}][ticket_type_id]"
                                    value="{{ $type->id }}"
                                >

                            </div>

                        @endforeach

                    </div>


                    {{-- TOTAL --}}

                    <div class="hidden sm:flex items-center justify-between border-t border-dashed border-gray-200 mt-6 pt-6">

                        <div>

                            <p class="text-xs uppercase tracking-wider text-gray-400 font-bold">
                                Total de la commande
                            </p>

                            <p class="text-sm text-gray-500 mt-1">
                                Montant à payer
                            </p>

                        </div>


                        <span
                            id="total-desktop"
                            class="font-display text-2xl font-black text-fuchsia-600"
                        >
                            0 FCFA
                        </span>

                    </div>


                    <button
                        type="submit"
                        id="desktop-submit"
                        disabled
                        class="hidden sm:flex w-full btn-gradient text-white rounded-2xl py-4 font-bold shadow-glow mt-5 items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
                    >

                        <x-icon name="lock-closed" class="w-4 h-4" />

                        Continuer vers le paiement

                        <x-icon name="arrow-right" class="w-4 h-4" />

                    </button>

                </form>


            @else

                <div class="rounded-3xl bg-gradient-to-br from-fuchsia-50 to-purple-50 border border-fuchsia-100 p-7 text-center">

                    <div class="mx-auto w-16 h-16 rounded-2xl bg-white shadow-sm flex items-center justify-center">

                        <x-icon
                            name="lock-closed"
                            class="w-7 h-7 text-fuchsia-600"
                        />

                    </div>


                    <h3 class="font-display text-xl font-black text-gray-900 mt-4">
                        Connectez-vous pour acheter
                    </h3>


                    <p class="text-sm text-gray-500 mt-2">
                        Connectez-vous à votre compte pour acheter vos billets.
                    </p>


                    <a
                        href="{{ route('login') }}"
                        class="inline-flex items-center justify-center gap-2 mt-5 btn-gradient text-white rounded-2xl px-7 py-3.5 font-bold shadow-glow"
                    >

                        <x-icon name="log-in" class="w-4 h-4" />

                        Se connecter

                    </a>


                    <p class="text-xs text-gray-400 mt-4">

                        Vous n'avez pas encore de compte ?

                        <a
                            href="{{ route('register') }}"
                            class="font-bold text-fuchsia-600 hover:underline"
                        >
                            Créer un compte
                        </a>

                    </p>

                </div>

            @endauth

        </div>


        {{-- ========================================================= --}}
        {{-- RÉSUMÉ --}}
        {{-- ========================================================= --}}

        @auth

            <div class="hidden lg:block sticky top-6">

                <div class="bg-white border border-gray-100 rounded-[2rem] p-6 shadow-[0_10px_40px_rgba(30,15,45,0.06)]">

                    <div class="flex items-center gap-3 mb-5">

                        <div class="w-11 h-11 rounded-2xl bg-fuchsia-50 flex items-center justify-center">

                            <x-icon
                                name="shopping-bag"
                                class="w-5 h-5 text-fuchsia-600"
                            />

                        </div>


                        <div>

                            <p class="text-xs uppercase tracking-wider text-gray-400 font-bold">
                                Votre commande
                            </p>

                            <h3 class="font-display font-black text-gray-900">
                                Résumé
                            </h3>

                        </div>

                    </div>


                    <div class="border-t border-dashed border-gray-200 pt-5">

                        <div class="flex justify-between text-sm mb-3">

                            <span class="text-gray-500">
                                Nombre de billets
                            </span>

                            <span
                                id="summary-count"
                                class="font-bold text-gray-900"
                            >
                                0
                            </span>

                        </div>


                        <div class="flex justify-between items-center">

                            <span class="font-bold text-gray-900">
                                Total
                            </span>

                            <span
                                id="summary-total"
                                class="font-display text-xl font-black text-fuchsia-600"
                            >
                                0 FCFA
                            </span>

                        </div>

                    </div>


                    <div class="mt-5 rounded-2xl bg-emerald-50 p-4">

                        <div class="flex items-start gap-3">

                            <x-icon
                                name="shield-check"
                                class="w-5 h-5 text-emerald-600 shrink-0"
                            />

                            <div>

                                <p class="text-sm font-bold text-emerald-800">
                                    Paiement sécurisé
                                </p>

                                <p class="text-xs text-emerald-700/70 mt-1">
                                    Vos informations sont protégées.
                                </p>

                            </div>

                        </div>

                    </div>

                </div>

            </div>

        @endauth

    </div>

</div>


{{-- ============================================================= --}}
{{-- BARRE MOBILE --}}
{{-- ============================================================= --}}

@auth

<div class="sm:hidden fixed bottom-0 inset-x-0 z-50 bg-white/95 backdrop-blur-xl border-t border-gray-100 shadow-[0_-10px_30px_rgba(30,15,45,0.10)]">

    <div class="px-4 py-3">

        <div class="flex items-center gap-3">

            <div>

                <p class="text-[10px] uppercase tracking-wider text-gray-400 font-bold">
                    Total
                </p>

                <p
                    id="total-mobile"
                    class="font-display text-lg font-black text-fuchsia-600"
                >
                    0 FCFA
                </p>

            </div>


            <button
                type="submit"
                form="ticket-form"
                id="mobile-submit"
                disabled
                class="flex-1 btn-gradient text-white rounded-2xl py-3.5 font-bold shadow-glow flex items-center justify-center gap-2 disabled:opacity-50"
            >

                Continuer

                <x-icon
                    name="arrow-right"
                    class="w-4 h-4"
                />

            </button>

        </div>

    </div>

</div>

@endauth


{{-- ============================================================= --}}
{{-- JAVASCRIPT --}}
{{-- ============================================================= --}}

@auth

<script>

function stepQty(button, delta, max)
{
    const row = button.closest('.ticket-row');

    if (!row) {
        return;
    }

    const input = row.querySelector('.qty-input');

    if (!input) {
        return;
    }

    let value = parseInt(input.value || 0);

    value += delta;

    value = Math.max(0, value);

    if (typeof max === 'number') {
        value = Math.min(max, value);
    }

    input.value = value;

    if (value > 0) {

        row.classList.add(
            'border-fuchsia-300',
            'bg-fuchsia-50/40',
            'shadow-sm'
        );

    } else {

        row.classList.remove(
            'border-fuchsia-300',
            'bg-fuchsia-50/40',
            'shadow-sm'
        );

    }

    recalcTotal();
}


function recalcTotal()
{
    const inputs = document.querySelectorAll('.qty-input');

    let total = 0;

    let count = 0;


    inputs.forEach(function(input)
    {
        const quantity = parseInt(input.value || 0);

        const price = parseFloat(
            input.dataset.price || 0
        );

        total += quantity * price;

        count += quantity;
    });


    const formatted =
        new Intl.NumberFormat('fr-FR').format(total)
        + ' FCFA';


    const desktop =
        document.getElementById('total-desktop');

    const mobile =
        document.getElementById('total-mobile');

    const summary =
        document.getElementById('summary-total');

    const summaryCount =
        document.getElementById('summary-count');

    const desktopButton =
        document.getElementById('desktop-submit');

    const mobileButton =
        document.getElementById('mobile-submit');


    if (desktop) {
        desktop.textContent = formatted;
    }


    if (mobile) {
        mobile.textContent = formatted;
    }


    if (summary) {
        summary.textContent = formatted;
    }


    if (summaryCount) {
        summaryCount.textContent = count;
    }


    const disabled = count === 0;


    if (desktopButton) {
        desktopButton.disabled = disabled;
    }


    if (mobileButton) {
        mobileButton.disabled = disabled;
    }
}


document.addEventListener(
    'DOMContentLoaded',
    function()
    {
        recalcTotal();
    }
);

</script>

@endauth

@endsection
```