@extends('layouts.app')

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

@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 commandes</h1>
            <p class="text-sm text-gray-500 mt-1">L'historique complet de tes achats, quel que soit leur statut.</p>
        </div>
        <a href="{{ route('tickets.index') }}"
           class="hidden sm:inline-flex items-center gap-1.5 text-sm font-bold text-fuchsia-600 hover:text-fuchsia-700">
            Voir mes billets
            <x-icon name="arrow-right" class="w-4 h-4" />
        </a>
    </div>

    @if($orders->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="currency" class="w-7 h-7" />
            </div>
            <h2 class="font-display text-xl font-black text-gray-900 mb-2">Aucune commande pour l'instant</h2>
            <p class="text-sm text-gray-500 mb-6">Tes commandes apparaîtront ici dès ton premier achat.</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="bg-white rounded-[2rem] border border-gray-100 shadow-card overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-xs uppercase tracking-wide text-gray-400 border-b border-gray-100">
                            <th class="px-5 py-3 font-bold">Commande</th>
                            <th class="px-5 py-3 font-bold">Événement</th>
                            <th class="px-5 py-3 font-bold">Billets</th>
                            <th class="px-5 py-3 font-bold">Montant</th>
                            <th class="px-5 py-3 font-bold">Statut</th>
                            <th class="px-5 py-3 font-bold">Date</th>
                            <th class="px-5 py-3 font-bold"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($orders as $order)
                            @php
                                $statusMap = [
                                    'pending' => ['En attente', 'bg-amber-50 text-amber-600'],
                                    'paid' => ['Payée', 'bg-emerald-50 text-emerald-600'],
                                    'failed' => ['Échouée', 'bg-rose-50 text-rose-600'],
                                    'refunded' => ['Remboursée', 'bg-rose-50 text-rose-600'],
                                    'cancelled' => ['Annulée', 'bg-gray-100 text-gray-500'],
                                ];
                                [$statusLabel, $statusClasses] = $statusMap[$order->status] ?? ['Inconnu', 'bg-gray-100 text-gray-500'];
                            @endphp
                            <tr class="hover:bg-fuchsia-50/30 transition-colors">
                                <td class="px-5 py-4 font-bold text-gray-700">#{{ $order->id }}</td>
                                <td class="px-5 py-4 text-gray-600 max-w-[220px] truncate">
                                    {{ $order->event->title ?? '—' }}
                                </td>
                                <td class="px-5 py-4 text-gray-500">
                                    {{ $order->items->sum('quantity') }} billet(s)
                                </td>
                                <td class="px-5 py-4 font-semibold text-gray-700">
                                    {{ number_format($order->total_amount, 0, ',', ' ') }} FCFA
                                </td>
                                <td class="px-5 py-4">
                                    <span class="inline-flex items-center px-2.5 py-1 rounded-full {{ $statusClasses }} text-xs font-bold">
                                        {{ $statusLabel }}
                                    </span>
                                </td>
                                <td class="px-5 py-4 text-gray-400 text-xs">
                                    {{ $order->created_at->translatedFormat('d M Y à H:i') }}
                                </td>
                                <td class="px-5 py-4 text-right">
                                    <a href="{{ route('orders.confirmation', $order) }}"
                                       class="inline-flex items-center gap-1 text-xs font-bold text-fuchsia-600 hover:text-fuchsia-700">
                                        Détails
                                        <x-icon name="chevron-right" class="w-3.5 h-3.5" />
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

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

    @endif

@endsection