@extends("layouts.admin")
    @section("title","Dashboard")
    @section("content")
    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-8">
        @php
        $cards = [
    ["label"=>"Pemesanan Hari Ini", "val"=>$totalPemesananHariIni, "icon"=>"Tiket", "clr"=>"blue"],
    ["label"=>"Pendapatan Hari Ini", "val"=>"Rp ".number_format($pendapatanHariIni,0,",","."), "icon"=>"Uang", "clr"=>"green"],
    ["label"=>"Indeks Kepuasan Pengguna", "val"=>$indeksKepuasan." ", "icon"=>"Smile", "clr"=>"indigo"],
    ["label"=>"Menunggu Konfirmasi", "val"=>$menungguVerifikasi, "icon"=>"Tunggu", "clr"=>"yellow"],
    ["label"=>"Keluhan Baru", "val"=>$keluhanBaru, "icon"=>"Pesan", "clr"=>"red"],
    ["label"=>"Total Responden", "val"=>$totalResponden, "icon"=>"Users", "clr"=>"emerald"],
];
        @endphp
        @foreach($cards as $c)
        <div class="bg-white rounded-xl shadow p-4">
            <div class="text-xs text-gray-400 mb-1">{{ $c["label"] }}</div>
            <div class="text-2xl font-bold text-{{ $c["clr"] }}-700">{{ $c["val"] }}</div>
        </div>
        @endforeach
    </div>
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <a href="{{ route("admin.transaksi.index",["status"=>"menunggu"]) }}"
            class="bg-yellow-50 border border-yellow-200 rounded-xl p-5 hover:bg-yellow-100">
            <div class="font-semibold text-yellow-800">Verifikasi Pembayaran</div>
            <div class="text-xs text-yellow-600 mt-1">{{ $menungguVerifikasi }} menunggu</div>
        </a>
        <a href="{{ route("admin.keluhan.index",["status"=>"baru"]) }}"
            class="bg-red-50 border border-red-200 rounded-xl p-5 hover:bg-red-100">
            <div class="font-semibold text-red-800">Keluhan Baru</div>
            <div class="text-xs text-red-600 mt-1">{{ $keluhanBaru }} keluhan</div>
        </a>
        <a href="{{ route("admin.rute.create") }}"
            class="bg-blue-50 border border-blue-200 rounded-xl p-5 hover:bg-blue-100">
            <div class="font-semibold text-blue-800">Buat Rute Baru</div>
        </a>
    </div>
    <div class="grid md:grid-cols-2 gap-6 mt-8">

        {{-- Grafik Kepuasan --}}
        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="text-lg font-semibold mb-4">
                Rata-rata Kepuasan Tiap Aspek
            </h2>

            <div class="h-72">
                <canvas id="chartAspek"></canvas>
            </div>
        </div>

        {{-- Grafik Pendapatan --}}
        <div class="bg-white rounded-xl shadow p-6">
            <h2 class="text-lg font-semibold mb-4">
                Pendapatan Bulanan
            </h2>

            <div class="h-72">
                <canvas id="chartPendapatan"></canvas>
            </div>
        </div>
    </div>
    @endsection
    <script>

    document.addEventListener("DOMContentLoaded", function () {

        const aspek = @json($nilaiPerAspek);

        // ==========================
        // Diagram Batang Kepuasan
        // ==========================
        new Chart(document.getElementById('chartAspek'), {

            type: 'bar',

            data: {

                labels: Object.keys(aspek),

                datasets: [{

                    label: 'Rata-rata',

                    data: Object.values(aspek),

                    backgroundColor: [
                        '#3B82F6',
                        '#10B981',
                        '#F59E0B',
                        '#8B5CF6'
                    ],

                    borderRadius: 8

                }]

            },

            options: {

                responsive: true,

                maintainAspectRatio: false,

                plugins: {

                    legend: {

                        display: false

                    }

                },

                scales: {

                    y: {

                        beginAtZero: true,

                        max: 5

                    }

                }

            }

        });



        // ==========================
        // Diagram Garis Pendapatan
        // ==========================
        new Chart(document.getElementById('chartPendapatan'), {

            type: 'line',

            data: {

                labels: [

                    'Jan','Feb','Mar','Apr','Mei','Jun',

                    'Jul','Agu','Sep','Okt','Nov','Des'

                ],

                datasets: [{

                    label: 'Pendapatan',

                    data: @json($pendapatanBulanan),

                    borderColor: '#10B981',

                    backgroundColor: '#10B981',

                    fill: false,

                    tension: 0.35,

                    pointRadius: 5,

                    pointHoverRadius: 7

                }]

            },

            options: {

                responsive: true,

                maintainAspectRatio: false,

                plugins: {

                    legend: {

                        display: false

                    }

                },

                scales: {

                    y: {

                        beginAtZero: true

                    }

                }

            }

        });

    });
    </script>