@extends('layouts.dashboard')

@section('title', 'Dashboard User')
@section('eyebrow', 'Pengunjung / Peserta')

@section('content')
@php
    $metrics = [
        ['ticket-check', 'Tiket Aktif', $activeTickets->count(), 'Tiket siap dipakai'],
        ['calendar-check', 'Booking Sesi', $bookings->count(), 'Jadwal latihan terbaru'],
        ['waves', 'Kelas Aktif', $activeClassCount, 'Kelas LMS yang bisa dibuka'],
        ['trending-up', 'Catatan Progress', $progressCount, 'Evaluasi dari pelatih'],
    ];
@endphp

<section class="rounded-lg bg-slate-950 p-5 text-white shadow-sm">
    <div class="grid gap-5 lg:grid-cols-[1fr_auto] lg:items-center">
        <div>
            <p class="text-sm font-black text-cyan-200">Selamat datang</p>
            <h2 class="mt-2 text-2xl font-black">Semua tiket, pembayaran, kelas, dan sesi ada di satu dashboard.</h2>
            <p class="mt-3 max-w-2xl text-sm leading-7 text-slate-300">Mulai dari pesan tiket, daftar program, upload bukti pembayaran, sampai membuka LMS dan booking sesi latihan.</p>
        </div>
        <div class="grid gap-2 sm:flex">
            <a href="{{ route('user.tickets.create') }}" class="inline-flex items-center justify-center gap-2 rounded-md bg-white px-4 py-3 text-sm font-black text-slate-950 hover:bg-sky-100">
                <i data-lucide="ticket" class="h-4 w-4"></i>
                Pesan Tiket
            </a>
            <a href="{{ route('user.lms.classes') }}" class="inline-flex items-center justify-center gap-2 rounded-md border border-white/30 px-4 py-3 text-sm font-black text-white hover:bg-white hover:text-slate-950">
                <i data-lucide="school" class="h-4 w-4"></i>
                Kelas Saya
            </a>
        </div>
    </div>
</section>

<section class="mt-5 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    @foreach($metrics as [$icon, $label, $value, $desc])
        <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-3xl font-black text-slate-950">{{ $value }}</p>
                </div>
                <span class="grid h-11 w-11 shrink-0 place-items-center rounded-md bg-sky-100 text-sky-700">
                    <i data-lucide="{{ $icon }}" class="h-5 w-5"></i>
                </span>
            </div>
            <p class="mt-3 text-xs font-semibold text-slate-500">{{ $desc }}</p>
        </article>
    @endforeach
</section>

<section class="mt-6 grid gap-5 lg:grid-cols-[1.05fr_.95fr]">
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Aksi Cepat</h2>
        </div>
        <div class="mt-4 grid gap-3 sm:grid-cols-2">
            @foreach([
                ['ticket', 'Pesan Tiket', 'Pilih tanggal, cek kuota, bayar, lalu dapatkan QR.', route('user.tickets.create')],
                ['waves', 'Sekolah Renang', 'Daftar program dan pantau pembayaran pendaftaran.', route('user.school-registration.index')],
                ['user-round-check', 'Les Privat', 'Pilih jadwal pelatih dan paket les privat.', route('user.private-lesson.index')],
                ['calendar-clock', 'Booking Sesi', 'Booking sesi latihan untuk kelas aktif.', route('user.lms.sessions')],
            ] as [$icon, $title, $text, $url])
                <a href="{{ $url }}" class="rounded-lg border border-slate-200 bg-slate-50 p-4 hover:border-sky-300 hover:bg-sky-50">
                    <i data-lucide="{{ $icon }}" class="h-5 w-5 text-sky-700"></i>
                    <p class="mt-3 font-black text-slate-950">{{ $title }}</p>
                    <p class="mt-1 text-sm leading-6 text-slate-600">{{ $text }}</p>
                </a>
            @endforeach
        </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">Pembayaran Perlu Dicek</h2>
            <a href="{{ route('user.my-tickets') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Tiket</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($pendingPayments as $payment)
                @php($paymentUrl = $payment->payable instanceof \App\Models\TicketOrder ? route('user.tickets.payment', $payment->payable) : route('user.payments.show', $payment))
                <a href="{{ $paymentUrl }}" class="grid gap-2 rounded-lg border border-slate-200 bg-slate-50 p-4 hover:border-sky-300 hover:bg-sky-50">
                    <div class="flex flex-wrap items-center justify-between gap-2">
                        <p class="font-black text-slate-950">{{ $payment->payment_code }}</p>
                        <x-status-badge :status="$payment->status" />
                    </div>
                    <p class="text-sm font-semibold text-slate-600">{{ $payment->service_label }} · {{ \App\Support\LocaleFormat::money($payment->amount) }}</p>
                </a>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Tidak ada pembayaran tertunda.</p>
            @endforelse
        </div>
    </article>
</section>

<section class="mt-6 grid gap-5 lg:grid-cols-[1.15fr_.85fr]">
    <article class="rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
        <div class="flex flex-wrap items-center justify-between gap-3">
            <h2 class="font-black text-slate-950">Riwayat Tiket</h2>
            <a href="{{ route('user.tickets.index') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Lihat semua</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($latestTickets as $order)
                <div class="grid gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4 sm:grid-cols-[minmax(0,1fr)_auto] sm:items-center">
                    <div class="min-w-0">
                        <p class="truncate font-black text-slate-950">{{ $order->order_code }}</p>
                        <p class="mt-1 text-sm font-semibold text-slate-600">{{ $order->visit_date->format('d/m/Y') }} · {{ \App\Support\LocaleFormat::money($order->total_price) }}</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 tiket.</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">Notifikasi</h2>
            <a href="{{ route('user.notifications') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Buka</a>
        </div>
        <div class="mt-4 grid gap-3">
            @forelse($notifications as $notification)
                <div class="rounded-lg border border-slate-200 bg-slate-50 p-4">
                    <p class="font-black text-slate-950">{{ $notification->title }}</p>
                    <p class="mt-1 text-sm leading-6 text-slate-600">{{ $notification->message }}</p>
                </div>
            @empty
                <p class="rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Belum ada notifikasi.</p>
            @endforelse
        </div>
    </article>
</section>
@endsection