@extends('layouts.dashboard')

@section('title', 'Dashboard Admin')
@section('eyebrow', 'Operasional')

@section('content')
@php
    $metrics = [
        ['ticket', 'Tiket Hari Ini', $totalTicketsToday, 'Total tiket untuk tanggal kunjungan hari ini', 'bg-sky-100 text-sky-700'],
        ['users-round', 'Pengunjung Hari Ini', $visitorsToday, 'Pengunjung yang dijadwalkan hadir hari ini', 'bg-emerald-100 text-emerald-700'],
        ['waves', 'Sedang di Kolam', $activeVisitors, 'Pengunjung yang belum check-out', 'bg-cyan-100 text-cyan-700'],
        ['receipt-text', 'Pembayaran Pending', $pendingPayments, 'Menunggu verifikasi admin', 'bg-amber-100 text-amber-700'],
        ['wallet', 'Pendapatan Hari Ini', \App\Support\LocaleFormat::money($revenueToday), 'Pembayaran diterima hari ini', 'bg-slate-100 text-slate-700'],
        ['school', 'Pendaftaran Sekolah', $schoolRegistrations, 'Total pendaftaran sekolah renang', 'bg-indigo-100 text-indigo-700'],
        ['user-round-check', 'Les Privat', $privateRegistrations, 'Total pendaftaran les privat', 'bg-rose-100 text-rose-700'],
        ['calendar-clock', 'Sesi Hari Ini', $sessionsToday, 'Jadwal latihan pada hari ini', 'bg-teal-100 text-teal-700'],
    ];
@endphp

<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    @foreach($metrics as [$icon, $label, $value, $desc, $tone])
        <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
            <div class="flex items-start justify-between gap-3">
                <div>
                    <p class="text-sm font-black text-slate-500">{{ $label }}</p>
                    <p class="mt-2 text-2xl font-black text-slate-950">{{ $value }}</p>
                </div>
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-md {{ $tone }}">
                    <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                </span>
            </div>
            <p class="mt-3 text-xs font-semibold leading-5 text-slate-500">{{ $desc }}</p>
        </article>
    @endforeach
</section>

<section class="mt-6 grid gap-5 lg:grid-cols-2">
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Grafik Pengunjung</h2>
            <span class="rounded-md bg-sky-50 px-3 py-1.5 text-xs font-black text-sky-700">7 hari</span>
        </div>
        <canvas id="visitorChart" class="mt-4"></canvas>
    </article>
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Grafik Pendapatan</h2>
            <span class="rounded-md bg-emerald-50 px-3 py-1.5 text-xs font-black text-emerald-700">7 hari</span>
        </div>
        <canvas id="revenueChart" class="mt-4"></canvas>
    </article>
</section>

<section class="mt-6 grid gap-5 lg:grid-cols-2">
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Pembayaran Terbaru</h2>
            <a href="{{ route('admin.payments.index') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Kelola</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($latestPayments as $payment)
                <div class="grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                    <div class="min-w-0">
                        <p class="truncate text-sm font-black text-slate-950">{{ $payment->payment_code }}</p>
                        <p class="mt-1 truncate text-xs font-semibold text-slate-500">{{ $payment->user?->name ?? 'Pengunjung' }}</p>
                    </div>
                    <x-status-badge :status="$payment->status" />
                </div>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Belum ada pembayaran.</p>
            @endforelse
        </div>
    </article>

    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Order Terbaru</h2>
            <a href="{{ route('admin.ticket-orders.index') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Lihat order</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($latestOrders as $order)
                <div class="grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-3 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                    <div class="min-w-0">
                        <p class="truncate text-sm font-black text-slate-950">{{ $order->order_code }}</p>
                        <p class="mt-1 truncate text-xs font-semibold text-slate-500">{{ $order->user?->name ?? 'Pengunjung' }} &middot; {{ $order->total_ticket }} tiket</p>
                    </div>
                    <x-status-badge :status="$order->status" />
                </div>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Belum ada order.</p>
            @endforelse
        </div>
    </article>
</section>

<script>
    const visitorChart = document.getElementById('visitorChart');
    const revenueChart = document.getElementById('revenueChart');

    if (visitorChart) {
        new Chart(visitorChart, {
            type: 'line',
            data: {
                labels: @json($visitorChart->pluck('date')),
                datasets: [{
                    label: 'Pengunjung',
                    data: @json($visitorChart->pluck('value')),
                    borderColor: '#0284c7',
                    backgroundColor: 'rgba(2,132,199,.14)',
                    tension: .35,
                    fill: true,
                    pointRadius: 3,
                }],
            },
            options: { responsive: true, plugins: { legend: { display: false } } },
        });
    }

    if (revenueChart) {
        new Chart(revenueChart, {
            type: 'bar',
            data: {
                labels: @json($revenueChart->pluck('date')),
                datasets: [{
                    label: 'Pendapatan',
                    data: @json($revenueChart->pluck('value')),
                    backgroundColor: '#10b981',
                    borderRadius: 8,
                }],
            },
            options: { responsive: true, plugins: { legend: { display: false } } },
        });
    }
</script>
@endsection