@extends('layouts.app')

@section('title', 'Tableau de bord')

@push('head')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush

@section('content')

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

    {{-- ========================================================= --}}
    {{-- HEADER --}}
    {{-- ========================================================= --}}

    <div class="relative overflow-hidden rounded-[2rem] bg-gradient-to-br from-fuchsia-600 via-purple-600 to-orange-400 p-6 sm:p-8 mb-7 shadow-[0_15px_50px_rgba(192,38,211,0.20)]">

        <div class="absolute -top-20 -right-20 w-64 h-64 rounded-full bg-white/10"></div>
        <div class="absolute -bottom-24 -left-16 w-72 h-72 rounded-full bg-white/10"></div>

        <div class="relative text-white">
            <div class="flex items-center gap-2 text-white/75 text-xs font-bold uppercase tracking-[0.18em] mb-2">
                <x-icon name="chart-bar" class="w-4 h-4" />
                Espace organisateur
            </div>
            <h1 class="font-display text-3xl sm:text-4xl font-black tracking-tight">Tableau de bord</h1>
            <p class="text-white/80 text-sm sm:text-base mt-2 max-w-xl">
                Vue d'ensemble de tes ventes, tes billets et tes événements.
            </p>
        </div>

    </div>

    {{-- ========================================================= --}}
    {{-- KPIs --}}
    {{-- ========================================================= --}}

    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-7">

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Chiffre d'affaires</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ number_format($revenue, 0, ',', ' ') }} <span class="text-sm font-bold text-gray-400">FCFA</span></p>
            <p class="text-[11px] text-gray-400 mt-1">dont {{ number_format($platformFees, 0, ',', ' ') }} FCFA de frais plateforme</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Commandes payées</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $ordersCount }}</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Billets vendus</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $ticketsSold }}</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Billets disponibles</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $ticketsAvailable }}</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Billets utilisés (entrées)</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $ticketsUsed }}</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Événements actifs</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $activeEvents }}</p>
        </div>

        <div class="bg-white rounded-2xl border border-gray-100 shadow-card p-5 col-span-2 lg:col-span-1">
            <p class="text-[11px] uppercase tracking-widest font-bold text-gray-400 mb-1">Événements terminés</p>
            <p class="font-display text-2xl font-black text-gray-900">{{ $endedEvents }}</p>
        </div>

    </div>

    {{-- ========================================================= --}}
    {{-- GRAPHIQUE : CA par événement --}}
    {{-- ========================================================= --}}

    @if($chartData->isNotEmpty())
        <div class="bg-white rounded-[1.75rem] border border-gray-100 shadow-card p-5 sm:p-6 mb-7">
            <h2 class="font-display text-lg font-black text-gray-900 mb-4">Chiffre d'affaires par événement</h2>
            <div class="relative" style="height: 280px;">
                <canvas id="revenueChart"></canvas>
            </div>
        </div>

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const ctx = document.getElementById('revenueChart');
                if (!ctx) return;

                new Chart(ctx, {
                    type: 'bar',
                    data: {
                        labels: @json($chartData->pluck('label')),
                        datasets: [{
                            label: 'Chiffre d\'affaires (FCFA)',
                            data: @json($chartData->pluck('revenue')),
                            backgroundColor: 'rgba(214, 58, 160, 0.75)',
                            borderRadius: 8,
                            maxBarThickness: 56,
                        }],
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        plugins: { legend: { display: false } },
                        scales: {
                            y: { beginAtZero: true, ticks: { callback: (v) => new Intl.NumberFormat('fr-FR').format(v) } },
                        },
                    },
                });
            });
        </script>
    @endif

    {{-- ========================================================= --}}
    {{-- STATISTIQUES PAR ÉVÉNEMENT --}}
    {{-- ========================================================= --}}

    <div class="bg-white rounded-[1.75rem] border border-gray-100 shadow-card overflow-hidden mb-7">
        <div class="px-5 sm:px-6 py-4 border-b border-gray-100">
            <h2 class="font-display text-lg font-black text-gray-900">Statistiques par événement</h2>
        </div>

        @if($perEventStats->isEmpty())
            <div class="p-8 text-center text-sm text-gray-400">
                Tu n'as pas encore créé d'événement.
                <a href="{{ route('organizer.events.create') }}" class="text-fuchsia-600 font-bold hover:underline">Créer mon premier événement</a>
            </div>
        @else
            <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">Événement</th>
                            <th class="px-5 py-3 font-bold">Vendus / Quota</th>
                            <th class="px-5 py-3 font-bold">Restants</th>
                            <th class="px-5 py-3 font-bold">Entrées scannées</th>
                            <th class="px-5 py-3 font-bold">Commandes</th>
                            <th class="px-5 py-3 font-bold">Recettes</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($perEventStats as $stat)
                            <tr class="hover:bg-fuchsia-50/30 transition-colors">
                                <td class="px-5 py-4 font-bold text-gray-700 max-w-[220px] truncate">
                                    {{ $stat->event->title }}
                                </td>
                                <td class="px-5 py-4 text-gray-600">{{ $stat->sold }} / {{ $stat->quota }}</td>
                                <td class="px-5 py-4 text-gray-600">{{ $stat->remaining }}</td>
                                <td class="px-5 py-4 text-gray-600">{{ $stat->used }}</td>
                                <td class="px-5 py-4 text-gray-600">{{ $stat->orders_count }}</td>
                                <td class="px-5 py-4 font-semibold text-gray-700">{{ number_format($stat->revenue, 0, ',', ' ') }} FCFA</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    {{-- ========================================================= --}}
    {{-- VENTES RÉCENTES --}}
    {{-- ========================================================= --}}

    <div class="bg-white rounded-[1.75rem] border border-gray-100 shadow-card overflow-hidden">
        <div class="px-5 sm:px-6 py-4 border-b border-gray-100">
            <h2 class="font-display text-lg font-black text-gray-900">Ventes récentes</h2>
        </div>

        @if($recentSales->isEmpty())
            <div class="p-8 text-center text-sm text-gray-400">Aucune vente pour le moment.</div>
        @else
            <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">Client</th>
                            <th class="px-5 py-3 font-bold">Événement</th>
                            <th class="px-5 py-3 font-bold">Montant</th>
                            <th class="px-5 py-3 font-bold">Date</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-50">
                        @foreach($recentSales as $sale)
                            <tr class="hover:bg-fuchsia-50/30 transition-colors">
                                <td class="px-5 py-4 text-gray-700 font-semibold">{{ $sale->user->name ?? '—' }}</td>
                                <td class="px-5 py-4 text-gray-600 max-w-[200px] truncate">{{ $sale->event->title ?? '—' }}</td>
                                <td class="px-5 py-4 font-semibold text-gray-700">{{ number_format($sale->total_amount, 0, ',', ' ') }} FCFA</td>
                                <td class="px-5 py-4 text-gray-400 text-xs">{{ $sale->created_at->translatedFormat('d M Y à H:i') }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

</div>

@endsection