@extends('layouts.app')

@section('title', 'Mes billets')

@section('content')

    <div class="flex items-end justify-between gap-4 mb-8">
        <div>
            <p class="text-xs uppercase tracking-[0.18em] font-bold text-fuchsia-500">Espace acheteur</p>
            <h1 class="font-display text-3xl font-black text-gray-900 mt-1">Mes billets</h1>
            <p class="text-sm text-gray-500 mt-1">Tous tes billets, liés durablement à ton compte — retrouvables à tout moment.</p>
        </div>
        <a href="{{ route('orders.my-orders') }}"
           class="hidden sm:inline-flex items-center gap-1.5 text-sm font-bold text-fuchsia-600 hover:text-fuchsia-700">
            Voir mes commandes
            <x-icon name="arrow-right" class="w-4 h-4" />
        </a>
    </div>

    @if($tickets->isEmpty())

        <div class="bg-white rounded-[2rem] border border-gray-100 shadow-card p-10 text-center">
            <div class="w-14 h-14 rounded-2xl bg-fuchsia-50 text-fuchsia-500 flex items-center justify-center mx-auto mb-4">
                <x-icon name="ticket" class="w-7 h-7" />
            </div>
            <h2 class="font-display text-xl font-black text-gray-900 mb-2">Tu n'as pas encore de billet</h2>
            <p class="text-sm text-gray-500 mb-6">Dès que tu achètes un billet, il apparaîtra ici et y restera — même après déconnexion.</p>
            <a href="{{ route('events.index') }}"
               class="inline-flex items-center gap-2 btn-gradient text-white px-5 py-3 rounded-xl font-bold shadow-glow hover:brightness-105 transition-all">
                Découvrir les événements
            </a>
        </div>

    @else

        <div class="grid gap-5 sm:grid-cols-2">
            @foreach($tickets as $ticket)

                @php
                    $statusMap = [
                        'valid' => ['Valide', 'bg-emerald-50 text-emerald-600', 'check-circle'],
                        'used' => ['Déjà utilisé', 'bg-gray-100 text-gray-500', 'x-circle'],
                        'cancelled' => ['Annulé', 'bg-rose-50 text-rose-600', 'x-circle'],
                        'refunded' => ['Remboursé', 'bg-rose-50 text-rose-600', 'x-circle'],
                        'expired' => ['Expiré', 'bg-rose-50 text-rose-600', 'x-circle'],
                    ];
                    [$statusLabel, $statusClasses, $statusIcon] = $statusMap[$ticket->status] ?? ['Inconnu', 'bg-gray-100 text-gray-500', 'x-circle'];
                @endphp

                <div x-data="{ showQr: false }"
                     class="group relative bg-white rounded-[2rem] border border-gray-100 shadow-card overflow-hidden hover:shadow-xl transition-all duration-300">

                    <div class="absolute left-0 top-0 bottom-0 w-1.5 bg-gradient-to-b from-fuchsia-500 via-purple-500 to-orange-400"></div>

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

                        <div class="flex items-start justify-between gap-3 mb-3">
                            <div class="min-w-0">
                                <h3 class="font-display text-lg font-black text-gray-900 truncate">
                                    {{ $ticket->event->title ?? 'Événement supprimé' }}
                                </h3>
                                <p class="text-xs text-gray-400 mt-0.5">
                                    {{ $ticket->ticketType->name ?? '—' }}
                                    @if($ticket->ticketType)
                                        · {{ number_format($ticket->ticketType->price, 0, ',', ' ') }} FCFA
                                    @endif
                                </p>
                            </div>

                            <span class="inline-flex shrink-0 items-center gap-1.5 px-2.5 py-1 rounded-full {{ $statusClasses }} text-xs font-bold">
                                <x-icon :name="$statusIcon" class="w-3.5 h-3.5" />
                                {{ $statusLabel }}
                            </span>
                        </div>

                        <div class="flex flex-wrap gap-4 text-xs text-gray-400 mb-4">
                            @if($ticket->event)
                                <span class="inline-flex items-center gap-1.5">
                                    <x-icon name="calendar" class="w-3.5 h-3.5" />
                                    {{ $ticket->event->starts_at->translatedFormat('d M Y') }}
                                </span>
                                <span class="inline-flex items-center gap-1.5">
                                    <x-icon name="clock" class="w-3.5 h-3.5" />
                                    {{ $ticket->event->starts_at->format('H:i') }}
                                </span>
                                <span class="inline-flex items-center gap-1.5">
                                    <x-icon name="map-pin" class="w-3.5 h-3.5" />
                                    {{ $ticket->event->location }}
                                </span>
                            @endif
                        </div>

                        <div class="bg-gray-50 rounded-2xl p-3 mb-4">
                            <p class="text-[10px] uppercase tracking-widest font-bold text-gray-400 mb-1">Numéro du billet</p>
                            <p class="font-mono text-xs font-bold text-gray-700 break-all">{{ $ticket->code }}</p>
                        </div>

                        <div x-show="showQr" x-cloak x-transition class="flex justify-center bg-gray-50 rounded-2xl p-4 mb-4">
                            {!! QrCode::size(140)->margin(1)->generate($ticket->code) !!}
                        </div>

                        <p class="text-[11px] text-gray-400 mb-1">
                            Acheté le {{ $ticket->created_at->translatedFormat('d M Y à H:i') }}
                        </p>

                    </div>

                    <div class="border-t border-dashed border-gray-200 bg-gray-50/70 px-5 sm:px-6 py-3 flex flex-wrap items-center gap-x-4 gap-y-2">

                        <button type="button" @click="showQr = !showQr"
                                class="inline-flex items-center gap-1.5 text-xs font-bold text-fuchsia-600 hover:text-fuchsia-700">
                            <x-icon name="qr-code" class="w-3.5 h-3.5" />
                            <span x-text="showQr ? 'Masquer le QR Code' : 'Afficher le QR Code'"></span>
                        </button>

                        @if($ticket->order)
                            <a href="{{ route('orders.confirmation', $ticket->order) }}"
                               class="inline-flex items-center gap-1.5 text-xs font-bold text-gray-500 hover:text-gray-700">
                                <x-icon name="check-badge" class="w-3.5 h-3.5" />
                                Voir le billet
                            </a>

                            <a href="{{ route('orders.print', $ticket->order) }}" target="_blank"
                               class="inline-flex items-center gap-1.5 text-xs font-bold text-gray-500 hover:text-gray-700">
                                <x-icon name="arrow-down-tray" class="w-3.5 h-3.5" />
                                Imprimer
                            </a>
                        @endif

                        <a href="{{ route('tickets.png', $ticket) }}"
                           class="inline-flex items-center gap-1.5 text-xs font-bold text-gray-500 hover:text-gray-700">
                            <x-icon name="arrow-down-tray" class="w-3.5 h-3.5" />
                            Télécharger
                        </a>

                    </div>

                </div>

            @endforeach
        </div>

        <div class="mt-8">
            {{ $tickets->links() }}
        </div>

    @endif

@endsection