@extends('layouts.dashboard')

@section('title', 'Dashboard Owner')
@section('eyebrow', 'Pemilik')

@section('content')
@php
    $metrics = [
        ['waves', 'Pengunjung Aktif', $activeVisitors, 'Masih berada di area kolam', 'bg-cyan-100 text-cyan-700'],
        ['users-round', 'Pengunjung Hari Ini', $visitorsToday, 'Total kunjungan hari ini', 'bg-emerald-100 text-emerald-700'],
        ['wallet', 'Pendapatan Hari Ini', \App\Support\LocaleFormat::money($revenueToday), 'Pembayaran terverifikasi hari ini', 'bg-sky-100 text-sky-700'],
        ['ticket', 'Tiket Bulan Ini', $ticketSalesMonth, 'Akumulasi tiket bulan berjalan', 'bg-amber-100 text-amber-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 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">Pengunjung Bulanan</h2>
            <a href="{{ route('owner.statistics.visitors') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Detail</a>
        </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">Pendapatan Bulanan</h2>
            <a href="{{ route('owner.statistics.revenue') }}" class="text-sm font-black text-sky-700 hover:text-slate-950">Detail</a>
        </div>
        <canvas id="revenueChart" class="mt-4"></canvas>
    </article>
</section>

<section class="mt-6 rounded-lg border border-slate-200 bg-white p-5 shadow-sm">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="font-black text-slate-950">Kapasitas Hari Ini</h2>
            <p class="mt-1 text-sm font-semibold text-slate-500">Ringkasan kuota dan pemakaian harian.</p>
        </div>
        <a href="{{ route('owner.capacity') }}" class="inline-flex items-center gap-2 rounded-md bg-slate-950 px-4 py-2.5 text-sm font-black text-white hover:bg-sky-700">
            <i data-lucide="gauge" class="h-4 w-4"></i>
            Kelola kapasitas
        </a>
    </div>
    @if($quotaToday)
        <div class="mt-5 grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-sm font-black text-slate-500">Kuota</p>
                <p class="mt-2 text-2xl font-black text-slate-950">{{ $quotaToday->quota_total }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-sm font-black text-slate-500">Terpakai</p>
                <p class="mt-2 text-2xl font-black text-slate-950">{{ $quotaToday->quota_used }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-sm font-black text-slate-500">Sisa</p>
                <p class="mt-2 text-2xl font-black text-slate-950">{{ $quotaToday->remaining_quota }}</p>
            </div>
            <div class="rounded-lg bg-slate-50 p-4">
                <p class="text-sm font-black text-slate-500">Status</p>
                <div class="mt-3"><x-status-badge :status="$quotaToday->computed_status" /></div>
            </div>
        </div>
        <div class="mt-5 h-3 overflow-hidden rounded-full bg-slate-100">
            <div class="h-full rounded-full bg-sky-600" style="width: {{ min(100, $quotaToday->usage_percent) }}%"></div>
        </div>
    @else
        <p class="mt-5 rounded-lg bg-slate-50 p-4 text-sm font-semibold text-slate-500">Kuota hari ini belum dibuat.</p>
    @endif
</section>

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

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