<x-app-layout>
    <x-slot name="header">
        <h2 class="h4 mb-0">Statistik Desa</h2>
    </x-slot>

    <div class="row g-3">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Pengunjung Harian (14 hari)</div>
                <div class="card-body">
                    <canvas id="dailyChart" height="150"></canvas>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Pengunjung Bulanan (6 bulan)</div>
                <div class="card-body">
                    <canvas id="monthlyChart" height="150"></canvas>
                </div>
            </div>
        </div>
    </div>

    <div class="row g-3 mt-1">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header">Top Kota Asal Pengunjung</div>
                <div class="card-body">
                    @if ($topKota->isEmpty())
                        <p class="text-muted small mb-0">Belum ada data kota pengunjung.</p>
                    @else
                        <canvas id="topKotaChart" height="150"></canvas>
                    @endif
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            new Chart(document.getElementById('dailyChart'), {
                type: 'line',
                data: {
                    labels: @json($dailyVisitors->pluck('date')),
                    datasets: [{ label: 'Pengunjung', data: @json($dailyVisitors->pluck('total')), borderColor: '#B71C1C', tension: 0.3 }],
                },
            });
            new Chart(document.getElementById('monthlyChart'), {
                type: 'bar',
                data: {
                    labels: @json($monthlyVisitors->pluck('month')),
                    datasets: [{ label: 'Pengunjung', data: @json($monthlyVisitors->pluck('total')), backgroundColor: '#B71C1C' }],
                },
            });

            @if ($topKota->isNotEmpty())
            new Chart(document.getElementById('topKotaChart'), {
                type: 'bar',
                data: {
                    labels: @json($topKota->pluck('kota')),
                    datasets: [{ label: 'Pengunjung', data: @json($topKota->pluck('total')), backgroundColor: '#7f1414' }],
                },
                options: { indexAxis: 'y' },
            });
            @endif
        });
    </script>
    @endpush
</x-app-layout>
