<div>
    <!-- ============================================================ -->
    <!-- ROW 1: DONUT + BAR (2 Kolom) -->
    <!-- ============================================================ -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Donut Chart: Status Kontrak -->
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center justify-between mb-4">
                <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <i class="fas fa-file-signature text-[#c9a84c]"></i>
                    Status Kontrak
                </h4>
                <span class="text-xs text-gray-400">Total: {{ array_sum($contractData) }}</span>
            </div>
            <div class="relative" style="height: 220px;">
                <canvas id="contractChart"></canvas>
            </div>
            @if(count($contractData) == 0)
                <p class="text-center text-gray-400 text-sm mt-4">Belum ada data kontrak</p>
            @endif
        </div>

        <!-- Bar Chart: User by Role -->
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center justify-between mb-4">
                <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <i class="fas fa-users text-[#c9a84c]"></i>
                    User by Role
                </h4>
                <span class="text-xs text-gray-400">Total: {{ array_sum($userData) }}</span>
            </div>
            <div class="relative" style="height: 220px;">
                <canvas id="userChart"></canvas>
            </div>
            @if(count($userData) == 0)
                <p class="text-center text-gray-400 text-sm mt-4">Belum ada data user</p>
            @endif
        </div>
    </div>

    <!-- ============================================================ -->
    <!-- ROW 2: BAR (Status Paket) + LINE (Tren Kontrak) -->
    <!-- ============================================================ -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
        <!-- Bar Chart: Status Paket -->
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center justify-between mb-4">
                <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <i class="fas fa-box text-[#c9a84c]"></i>
                    Status Paket
                </h4>
                <span class="text-xs text-gray-400">Total: {{ array_sum($packageData) }}</span>
            </div>
            <div class="relative" style="height: 200px;">
                <canvas id="packageChart"></canvas>
            </div>
            @if(count($packageData) == 0)
                <p class="text-center text-gray-400 text-sm mt-4">Belum ada data paket</p>
            @endif
        </div>

        <!-- LINE CHART: Tren Kontrak per Bulan -->
        <div class="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 hover:shadow-md transition">
            <div class="flex items-center justify-between mb-4">
                <h4 class="text-sm font-semibold text-gray-700 flex items-center gap-2">
                    <i class="fas fa-chart-line text-[#c9a84c]"></i>
                    Tren Kontrak per Bulan
                </h4>
                <span class="text-xs text-gray-400">Total: {{ array_sum($monthlyContractData ?? []) }}</span>
            </div>
            <div class="relative" style="height: 200px;">
                <canvas id="trendChart"></canvas>
            </div>
            @if(empty($monthlyContractData) || count($monthlyContractData) == 0)
                <p class="text-center text-gray-400 text-sm mt-4">Belum ada data tren</p>
            @endif
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    document.addEventListener('livewire:init', function () {

        // ============================================================
        // 1. DONUT CHART: Status Kontrak
        // ============================================================
        const ctx1 = document.getElementById('contractChart');
        if (ctx1) {
            new Chart(ctx1, {
                type: 'doughnut',
                data: {
                    labels: {!! json_encode($contractLabels) !!},
                    datasets: [{
                        data: {!! json_encode($contractData) !!},
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.75)',   // blue
                            'rgba(251, 191, 36, 0.75)',   // yellow
                            'rgba(52, 211, 153, 0.75)',   // green
                            'rgba(248, 113, 113, 0.75)',  // red
                            'rgba(139, 92, 246, 0.75)'    // purple
                        ],
                        borderWidth: 0,
                        hoverOffset: 8
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    cutout: '65%',
                    plugins: {
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 16,
                                usePointStyle: true,
                                pointStyle: 'circle',
                                font: { size: 11, family: "'Inter', sans-serif" },
                                color: '#4a5568'
                            }
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255,255,255,0.95)',
                            titleColor: '#1a202c',
                            bodyColor: '#4a5568',
                            borderColor: 'rgba(0,0,0,0.05)',
                            borderWidth: 1,
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    animation: { animateRotate: true, duration: 1000 }
                }
            });
        }

        // ============================================================
        // 2. BAR CHART: User by Role
        // ============================================================
        const ctx2 = document.getElementById('userChart');
        if (ctx2) {
            new Chart(ctx2, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($userLabels) !!},
                    datasets: [{
                        label: 'Jumlah User',
                        data: {!! json_encode($userData) !!},
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.7)',
                            'rgba(16, 185, 129, 0.7)',
                            'rgba(251, 191, 36, 0.7)',
                            'rgba(139, 92, 246, 0.7)',
                            'rgba(248, 113, 113, 0.7)',
                            'rgba(6, 182, 212, 0.7)'
                        ],
                        borderWidth: 0,
                        borderRadius: 8,
                        borderSkipped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(255,255,255,0.95)',
                            titleColor: '#1a202c',
                            bodyColor: '#4a5568',
                            borderColor: 'rgba(0,0,0,0.05)',
                            borderWidth: 1,
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { stepSize: 1, font: { size: 11 }, color: '#a0aec0' },
                            grid: { color: 'rgba(0,0,0,0.03)', drawBorder: false }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 11 }, color: '#a0aec0' }
                        }
                    },
                    animation: { duration: 800 }
                }
            });
        }

        // ============================================================
        // 3. BAR CHART: Status Paket
        // ============================================================
        const ctx3 = document.getElementById('packageChart');
        if (ctx3) {
            new Chart(ctx3, {
                type: 'bar',
                data: {
                    labels: {!! json_encode($packageLabels) !!},
                    datasets: [{
                        label: 'Jumlah Paket',
                        data: {!! json_encode($packageData) !!},
                        backgroundColor: [
                            'rgba(59, 130, 246, 0.6)',
                            'rgba(16, 185, 129, 0.6)',
                            'rgba(251, 191, 36, 0.6)',
                            'rgba(139, 92, 246, 0.6)',
                            'rgba(248, 113, 113, 0.6)'
                        ],
                        borderWidth: 0,
                        borderRadius: 8,
                        borderSkipped: false
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: { display: false },
                        tooltip: {
                            backgroundColor: 'rgba(255,255,255,0.95)',
                            titleColor: '#1a202c',
                            bodyColor: '#4a5568',
                            borderColor: 'rgba(0,0,0,0.05)',
                            borderWidth: 1,
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: { stepSize: 1, font: { size: 11 }, color: '#a0aec0' },
                            grid: { color: 'rgba(0,0,0,0.03)', drawBorder: false }
                        },
                        x: {
                            grid: { display: false },
                            ticks: { font: { size: 11 }, color: '#a0aec0' }
                        }
                    },
                    animation: { duration: 800 }
                }
            });
        }

        // ============================================================
        // 4. LINE CHART: Tren Kontrak per Bulan
        // ============================================================
        const ctx4 = document.getElementById('trendChart');
        if (ctx4) {
            new Chart(ctx4, {
                type: 'line',
                data: {
                    labels: {!! json_encode($monthlyLabels ?? []) !!},
                    datasets: [{
                        label: 'Jumlah Kontrak',
                        data: {!! json_encode($monthlyContractData ?? []) !!},
                        borderColor: '#c9a84c',
                        backgroundColor: 'rgba(201, 168, 76, 0.1)',
                        borderWidth: 3,
                        pointBackgroundColor: '#c9a84c',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 4,
                        pointHoverRadius: 6,
                        fill: true,
                        tension: 0.4,
                        spanGaps: true
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        },
                        tooltip: {
                            backgroundColor: 'rgba(255,255,255,0.95)',
                            titleColor: '#1a202c',
                            bodyColor: '#4a5568',
                            borderColor: 'rgba(0,0,0,0.05)',
                            borderWidth: 1,
                            padding: 12,
                            cornerRadius: 8
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {
                                stepSize: 1,
                                font: { size: 11, family: "'Inter', sans-serif" },
                                color: '#a0aec0'
                            },
                            grid: {
                                color: 'rgba(0,0,0,0.03)',
                                drawBorder: false
                            }
                        },
                        x: {
                            grid: { display: false },
                            ticks: {
                                font: { size: 11, family: "'Inter', sans-serif" },
                                color: '#a0aec0'
                            }
                        }
                    },
                    interaction: {
                        intersect: false,
                        mode: 'index'
                    },
                    animation: {
                        duration: 1000
                    }
                }
            });
        }

    });
</script>
@endpush