@extends('layouts.admin')

@section('title','Dashboard')

@section('content')

<div class="p-6">

<h1 class="text-2xl font-bold mb-6">Dashboard Admin</h1>

{{-- ================= CARD ================= --}}
<div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4 mb-6">

<div class="bg-blue-500 text-white p-4 rounded shadow">
    <p>Total Alat</p>
    <h2 class="text-xl font-bold">{{ $totalAlat }}</h2>
</div>

<div class="bg-purple-500 text-white p-4 rounded shadow">
    <p>Total Paket</p>
    <h2 class="text-xl font-bold">{{ $totalPaket }}</h2>
</div>

<div class="bg-green-500 text-white p-4 rounded shadow">
    <p>Total Pelanggan</p>
    <h2 class="text-xl font-bold">{{ $totalPelanggan }}</h2>
</div>

<div class="bg-yellow-500 text-white p-4 rounded shadow">
    <p>Sewa Aktif</p>
    <h2 class="text-xl font-bold">{{ $totalSewa }}</h2>
</div>

<div class="bg-indigo-500 text-white p-4 rounded shadow">
    <p>Selesai</p>
    <h2 class="text-xl font-bold">{{ $totalSelesai }}</h2>
</div>

<div class="bg-red-500 text-white p-4 rounded shadow">
    <p>Pendapatan</p>
    <h2 class="text-xl font-bold">
        Rp {{ number_format($totalPendapatan,0,',','.') }}
    </h2>
</div>

</div>

{{-- ================= GRAFIK ================= --}}
<div class="bg-white p-6 rounded shadow">
    <h2 class="font-bold mb-4">Grafik Pendapatan Bulanan</h2>
    <canvas id="chart"></canvas>
</div>

</div>

{{-- ================= CHART JS ================= --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
const labels = @json(array_keys($grafik->toArray()));
const data = @json(array_values($grafik->toArray()));

new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
        labels: labels,
        datasets: [{
            label: 'Pendapatan',
            data: data,
            borderWidth: 2,
            tension: 0.3
        }]
    },
    options: {
        responsive: true
    }
});
</script>

@endsection