@extends('layouts.dashboard')

@section('title', $title)

@section('content')
<div class="grid gap-4 md:grid-cols-4">
    <div class="rounded-lg bg-white p-5 shadow-sm"><p class="text-sm font-bold text-slate-500">Pengunjung Aktif</p><p class="mt-2 text-3xl font-black">{{ $activeVisitors }}</p></div>
    <div class="rounded-lg bg-white p-5 shadow-sm"><p class="text-sm font-bold text-slate-500">Pengunjung Hari Ini</p><p class="mt-2 text-3xl font-black">{{ $visitorsToday }}</p></div>
    <div class="rounded-lg bg-white p-5 shadow-sm"><p class="text-sm font-bold text-slate-500">Pendapatan Hari Ini</p><p class="mt-2 text-2xl font-black">{{ \App\Support\LocaleFormat::money($revenueToday) }}</p></div>
    <div class="rounded-lg bg-white p-5 shadow-sm"><p class="text-sm font-bold text-slate-500">Tiket Bulan Ini</p><p class="mt-2 text-3xl font-black">{{ $ticketSalesMonth }}</p></div>
</div>
<div class="mt-6 grid gap-6 lg:grid-cols-2">
    <div class="rounded-lg bg-white p-5 shadow-sm"><h2 class="font-black">Pengunjung</h2><canvas id="visitorChart" class="mt-4"></canvas></div>
    <div class="rounded-lg bg-white p-5 shadow-sm"><h2 class="font-black">Pendapatan</h2><canvas id="revenueChart" class="mt-4"></canvas></div>
</div>
<script>
new Chart(document.getElementById('visitorChart'), {type:'line', data:{labels:@json($visitorChart->pluck('label')), datasets:[{label:'Pengunjung', data:@json($visitorChart->pluck('value')), borderColor:'#0284c7', backgroundColor:'rgba(2,132,199,.15)', tension:.35, fill:true}]}});
new Chart(document.getElementById('revenueChart'), {type:'bar', data:{labels:@json($revenueChart->pluck('label')), datasets:[{label:'Pendapatan', data:@json($revenueChart->pluck('value')), backgroundColor:'#10b981'}]}});
</script>
@endsection