@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2 class="mb-4">Dashboard</h2>
            </div>
        </div>
        <div class="row">
            {{-- Box Info --}}
            <div class="col-md-3 mb-4">
                <div class="card bg-primary text-white h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="fas fa-file-alt"></i>
                        </div>
                        <div class="h5 mb-0 font-weight-bold">{{ $totalPengajuan }}</div>
                        <div class="text-xs font-weight-bold">Total Pengajuan</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card bg-success text-white h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="fas fa-check-circle"></i>
                        </div>
                        <div class="h5 mb-0 font-weight-bold">{{ $pengajuanSelesai }}</div>
                        <div class="text-xs font-weight-bold">Pengajuan Selesai</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card bg-warning text-white h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="fas fa-hourglass-half"></i>
                        </div>
                        <div class="h5 mb-0 font-weight-bold">{{ $pengajuanMenunggu }}</div>
                        <div class="text-xs font-weight-bold">Pengajuan Menunggu</div>
                    </div>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="card bg-info text-white h-100">
                    <div class="card-body">
                        <div class="card-body-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <div class="h5 mb-0 font-weight-bold">{{ $totalUsers }}</div>
                        <div class="text-xs font-weight-bold">Jumlah Pengguna</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div class="card mb-4">
                    <div class="card-header">
                        <h6 class="mb-0">Statistik Pengajuan Surat</h6>
                    </div>
                    <div class="card-body">
                        <canvas id="statusChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    {{-- Pastikan Anda sudah menyertakan library Chart.js di layout utama --}}
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Ambil data dari Blade view
            const chartData = @json($chartData);

            const labels = chartData.labels;
            const data = chartData.data;

            const ctx = document.getElementById('statusChart').getContext('2d');
            const statusChart = new Chart(ctx, {
                type: 'bar', // Anda bisa ganti menjadi 'pie', 'doughnut', dll.
                data: {
                    labels: labels,
                    datasets: [{
                        label: 'Jumlah Pengajuan',
                        data: data,
                        backgroundColor: [
                            'rgba(54, 162, 235, 0.6)', // Biru
                            'rgba(255, 206, 86, 0.6)', // Kuning
                            'rgba(75, 192, 192, 0.6)', // Hijau
                            'rgba(255, 99, 132, 0.6)', // Merah
                            'rgba(153, 102, 255, 0.6)', // Ungu
                        ],
                        borderColor: [
                            'rgba(54, 162, 235, 1)',
                            'rgba(255, 206, 86, 1)',
                            'rgba(75, 192, 192, 1)',
                            'rgba(255, 99, 132, 1)',
                            'rgba(153, 102, 255, 1)',
                        ],
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        });
    </script>
@endpush