<?= $this->extend('layouts/admin_layout') ?>

<?= $this->section('content') ?>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script src="https://cdn.tailwindcss.com"></script>

<script>
    tailwind.config = {
        theme: {
            extend: {
                colors: {
                    brand: {
                        50: '#eef2ff',
                        100: '#e0e7ff',
                        500: '#6366f1',
                        600: '#4f46e5',
                        700: '#4338ca',
                        900: '#312e81',
                    }
                }
            }
        }
    }
</script>

<style>
    /* Custom God-Tier Styling */
    .god-glass {
        background: rgba(255, 255, 255, 0.75);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: 1px solid rgba(226, 232, 240, 0.8);
        border-radius: 1.25rem;
        box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.04);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .god-glass:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08);
        border-color: rgba(203, 213, 225, 0.9);
    }

    .dark-glass {
        background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 15px 35px -5px rgba(15, 23, 42, 0.3);
    }

    /* Gauge Animation */
    .gauge-circle-val {
        stroke-dasharray: 283;
        stroke-dashoffset: 283;
        transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Calendar Grid */
    .cal-box {
        aspect-ratio: 1;
        border-radius: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.85rem;
        cursor: pointer;
        position: relative;
        background: rgba(255, 255, 255, 0.6);
        border: 1px solid transparent;
        transition: all 0.2s ease;
    }

    .cal-box:hover:not(.empty) {
        background: #eef2ff;
        color: #4f46e5;
        border-color: #c7d2fe;
        transform: scale(1.05);
    }

    .cal-box.active {
        background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
        color: white;
        box-shadow: 0 8px 16px rgba(79, 70, 229, 0.3);
    }

    .cal-box.has-event::after {
        content: '';
        position: absolute;
        bottom: 5px;
        width: 6px;
        height: 6px;
        background-color: #ef4444;
        border-radius: 50%;
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.8);
    }

    .cal-box.active.has-event::after {
        background-color: #ffffff;
        box-shadow: 0 0 8px rgba(255, 255, 255, 0.9);
    }

    /* Scrollbar */
    .custom-scroll::-webkit-scrollbar {
        width: 5px;
    }
    .custom-scroll::-webkit-scrollbar-track {
        background: transparent;
    }
    .custom-scroll::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }
</style>

<div class="space-y-6 p-2 md:p-4">

    <!-- SECTION 1: HEADER COMMAND CENTER & CAPACITY GAUGE -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        
        <!-- Welcome & Realtime Clock Card -->
        <div class="god-glass dark-glass text-white p-6 relative overflow-hidden col-span-1 lg:col-span-2 flex flex-col justify-between min-h-[200px]">
            <div class="absolute -right-12 -top-12 w-64 h-64 bg-brand-500 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-pulse"></div>
            
            <div class="relative z-10">
                <div class="flex justify-between items-start gap-4">
                    <div>
                        <p class="text-brand-100 text-xs font-bold tracking-widest uppercase mb-1 flex items-center gap-2">
                            <span class="inline-block w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>
                            Command Center
                        </p>
                        <h2 class="text-2xl md:text-3xl font-extrabold tracking-tight">Admin Dashboard</h2>
                    </div>

                    <!-- PO Capacity Indicator -->
                    <div class="flex items-center gap-3 bg-white/10 backdrop-blur-md px-4 py-2.5 rounded-2xl border border-white/10">
                        <div class="relative w-14 h-14 flex items-center justify-center">
                            <svg class="w-14 h-14 transform -rotate-90" viewBox="0 0 100 100">
                                <circle cx="50" cy="50" r="45" fill="none" stroke="rgba(255,255,255,0.15)" stroke-width="10"></circle>
                                <circle id="gauge-progress" cx="50" cy="50" r="45" fill="none" stroke="#34d399" stroke-width="10" stroke-linecap="round" class="gauge-circle-val"></circle>
                            </svg>
                            <span id="gauge-text" class="absolute inset-0 flex items-center justify-center text-xs font-extrabold">0%</span>
                        </div>
                        <div class="text-left">
                            <span class="block text-[10px] text-white/70 font-bold uppercase tracking-wider">Kapasitas PO</span>
                            <span class="text-xs font-bold text-emerald-300"><?= number_format($poUsed) ?> / <?= number_format($poLimit) ?> Pcs</span>
                        </div>
                    </div>
                </div>

                <div class="mt-6">
                    <div id="digital-clock" class="text-3xl md:text-5xl font-black font-mono tracking-tight text-white drop-shadow-md">00:00:00</div>
                    <div id="digital-date" class="text-brand-100 text-xs md:text-sm font-semibold mt-1">Memuat tanggal...</div>
                </div>
            </div>
            <i class="bi bi-shield-check absolute -right-4 -bottom-4 text-9xl opacity-5 rotate-12 pointer-events-none"></i>
        </div>

        <!-- Today Sales Card -->
        <div class="god-glass p-6 flex flex-col justify-between relative overflow-hidden bg-gradient-to-br from-white/90 via-white/70 to-slate-50/50">
            <div>
                <div class="flex justify-between items-center mb-4">
                    <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-2xl shadow-sm">
                        <i class="bi bi-wallet2"></i>
                    </div>
                    <span class="text-xs font-bold text-emerald-600 bg-emerald-100 px-2.5 py-1 rounded-full flex items-center gap-1">
                        <i class="bi bi-graph-up-arrow"></i> Realtime
                    </span>
                </div>
                <p class="text-slate-500 text-xs font-extrabold uppercase tracking-wider">Omzet Hari Ini</p>
                <h3 class="text-3xl font-black text-slate-800 mt-1 tracking-tight">Rp <?= number_format($todaySales, 0, ',', '.') ?></h3>
            </div>
            
            <div class="mt-4 pt-3 border-t border-slate-200/60 flex items-center justify-between text-xs text-slate-500">
                <span>Total transaksi tercatat hari ini</span>
                <i class="bi bi-arrow-right-short text-lg"></i>
            </div>
        </div>
    </div>

    <!-- SECTION 2: FINANCIAL KPI CARDS -->
    <div class="grid grid-cols-2 lg:grid-cols-3 gap-4">
        <!-- Dana Sudah Diterima -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-cash-coin"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Dana Sudah Diterima</p>
                <h4 class="text-base sm:text-lg font-black text-emerald-600 tracking-tight">Rp <?= number_format($receivedAmount ?? 0, 0, ',', '.') ?></h4>
                <p class="text-[10px] font-semibold text-slate-500 mb-0"><?= number_format($totalPaid) ?> lunas, <?= number_format($totalPartial) ?> cicilan</p>
            </div>
        </div>

        <!-- Lunas -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-emerald-500/10 text-emerald-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-check2-circle"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Sudah Dibayar (Lunas)</p>
                <h4 class="text-base sm:text-lg font-black text-slate-800 tracking-tight">Rp <?= number_format($settledAmount ?? 0, 0, ',', '.') ?></h4>
                <p class="text-[10px] font-semibold text-emerald-600 mb-0"><?= number_format($totalPaid) ?> faktur</p>
            </div>
        </div>

        <!-- Belum Dibayar -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-rose-500/10 text-rose-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-exclamation-octagon"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Belum Dibayar</p>
                <h4 class="text-base sm:text-lg font-black text-rose-600 tracking-tight">Rp <?= number_format($unpaidAmount ?? 0, 0, ',', '.') ?></h4>
                <p class="text-[10px] font-semibold text-rose-600 mb-0"><?= number_format($totalUnpaid) ?> faktur</p>
            </div>
        </div>

        <!-- Total Piutang -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-rose-500/10 text-rose-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-receipt-cutoff"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Total Piutang</p>
                <h4 class="text-base sm:text-lg font-black text-slate-800 tracking-tight">Rp <?= number_format($receivable, 0, ',', '.') ?></h4>
            </div>
        </div>
        
        <!-- Pesanan Aktif -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-amber-500/10 text-amber-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-box-seam"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Pesanan Aktif</p>
                <h4 class="text-base sm:text-lg font-black text-slate-800 tracking-tight"><?= number_format($activeOrders) ?> Order</h4>
            </div>
        </div>

        <!-- Cicilan / Belum Lunas -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-brand-500/10 text-brand-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-hourglass-split"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Cicilan / Belum Lunas</p>
                <h4 class="text-base sm:text-lg font-black text-slate-800 tracking-tight">Rp <?= number_format($partialOutstandingAmount ?? 0, 0, ',', '.') ?></h4>
                <p class="text-[10px] font-semibold text-brand-600 mb-0"><?= number_format($totalPartial) ?> faktur</p>
            </div>
        </div>

        <!-- Target / Kapasitas -->
        <div class="god-glass p-5 flex items-center gap-4 group">
            <div class="w-12 h-12 rounded-2xl bg-brand-500/10 text-brand-600 flex items-center justify-center text-xl group-hover:scale-110 transition-transform">
                <i class="bi bi-bullseye"></i>
            </div>
            <div class="overflow-hidden">
                <p class="text-slate-400 text-[10px] font-extrabold uppercase tracking-wider mb-0 text-truncate">Penggunaan PO</p>
                <h4 class="text-base sm:text-lg font-black text-slate-800 tracking-tight"><?= $poPercent ?>%</h4>
            </div>
        </div>
    </div>

    <!-- SECTION 3: CALENDAR MATRIX & PAYMENT CHART -->
    <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
        
        <!-- Dynamic Calendar Engine -->
        <div class="god-glass col-span-1 xl:col-span-2 flex flex-col overflow-hidden bg-white/70">
            <!-- Header Nav -->
            <div class="p-5 border-b border-slate-200/60 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 bg-white/40">
                <div>
                    <h3 class="text-base font-bold text-slate-800 flex items-center gap-2">
                        <span class="p-2 bg-brand-100 text-brand-600 rounded-lg"><i class="bi bi-calendar3"></i></span>
                        Jadwal Batch Produksi
                    </h3>
                    <p class="text-xs text-slate-500 mt-0.5">Volume PO berdasarkan alokasi batch per bulan</p>
                </div>
                
                <div class="flex items-center bg-white rounded-full shadow-sm p-1 border border-slate-200/80">
                    <button onclick="moveMonth(-1)" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-600 transition-colors">
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <span id="calMonthLabel" class="font-extrabold text-xs text-brand-900 px-4 text-center select-none min-w-[120px]">Memuat...</span>
                    <button onclick="moveMonth(1)" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-slate-100 text-slate-600 transition-colors">
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
            </div>

            <!-- Calendar Grid + Side List -->
            <div class="grid grid-cols-1 md:grid-cols-12 flex-grow">
                <!-- Grid Area -->
                <div class="md:col-span-7 p-5 bg-white/30">
                    <div class="grid grid-cols-7 gap-1 text-center mb-3">
                        <div class="text-[11px] font-extrabold text-rose-500 uppercase">Min</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Sen</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Sel</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Rab</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Kam</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Jum</div>
                        <div class="text-[11px] font-extrabold text-slate-400 uppercase">Sab</div>
                    </div>
                    <div id="calendarGrid" class="grid grid-cols-7 gap-1.5">
                        <!-- JS Dynamic Grid Render -->
                    </div>
                </div>

                <!-- Monthly Deadlines List Panel -->
                <div class="md:col-span-5 p-5 bg-slate-50/70 border-t md:border-t-0 md:border-l border-slate-200/60 flex flex-col h-full">
                    <div class="flex justify-between items-center mb-3">
                        <h4 class="font-bold text-slate-800 text-xs flex items-center gap-1.5">
                            <i class="bi bi-clock-history text-rose-500"></i> Target Deadline Bulan Ini
                        </h4>
                        <span id="deadlineCount" class="text-[10px] font-bold bg-brand-100 text-brand-600 px-2 py-0.5 rounded-full">0 Order</span>
                    </div>

                    <div id="deadlineList" class="flex-grow custom-scroll space-y-2.5 overflow-y-auto pr-1" style="max-height: 340px;">
                        <!-- JS Dynamic Deadline Render -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Payment Lifecycle Chart -->
        <div class="god-glass p-6 flex flex-col justify-between bg-white/70">
            <div>
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-base font-bold text-slate-800">Distribusi Pembayaran</h3>
                    <span class="text-xs text-slate-400 font-medium">Status Faktur</span>
                </div>

                <div class="relative min-h-[220px] flex items-center justify-center my-2">
                    <canvas id="cashflowChart"></canvas>
                    <div class="absolute inset-0 flex flex-col items-center justify-center pointer-events-none">
                        <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Total Faktur</span>
                        <span class="text-2xl font-black text-slate-800"><?= $totalPaid + $totalPartial + $totalUnpaid ?></span>
                    </div>
                </div>
            </div>

            <div class="space-y-2 pt-3 border-t border-slate-200/60">
                <div class="flex justify-between items-center p-2.5 bg-white/60 rounded-xl hover:bg-white transition-all">
                    <span class="text-xs font-semibold text-slate-600 flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 shadow-sm"></span> Lunas (Paid)
                    </span>
                    <span class="font-extrabold text-xs text-slate-800"><?= number_format($totalPaid) ?></span>
                </div>
                
                <div class="flex justify-between items-center p-2.5 bg-white/60 rounded-xl hover:bg-white transition-all">
                    <span class="text-xs font-semibold text-slate-600 flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-brand-500 shadow-sm"></span> Cicilan (Partial)
                    </span>
                    <span class="font-extrabold text-xs text-slate-800"><?= number_format($totalPartial) ?></span>
                </div>

                <div class="flex justify-between items-center p-2.5 bg-white/60 rounded-xl hover:bg-white transition-all">
                    <span class="text-xs font-semibold text-rose-600 flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-rose-500 shadow-sm"></span> Belum Bayar (Unpaid)
                    </span>
                    <span class="font-extrabold text-xs text-rose-600"><?= number_format($totalUnpaid) ?></span>
                </div>
            </div>
        </div>

    </div>
</div>

<script>
    // System Data Bridge
    const dashData = {
        capacity: <?= (int)($poPercent ?? 0) ?>,
        paid: <?= (int)($totalPaid ?? 0) ?>,
        partial: <?= (int)($totalPartial ?? 0) ?>,
        unpaid: <?= (int)($totalUnpaid ?? 0) ?>,
        baseUrl: '<?= rtrim(site_url(), '/') ?>'
    };

    // 1. Digital Realtime Clock Engine
    function initDigitalClock() {
        const update = () => {
            const now = new Date();
            const clockEl = document.getElementById('digital-clock');
            const dateEl = document.getElementById('digital-date');

            if (clockEl) {
                clockEl.innerText = now.toLocaleTimeString('id-ID', { 
                    hour: '2-digit', 
                    minute: '2-digit', 
                    second: '2-digit',
                    hour12: false 
                });
            }

            if (dateEl) {
                dateEl.innerText = now.toLocaleDateString('id-ID', { 
                    weekday: 'long', 
                    day: 'numeric', 
                    month: 'long', 
                    year: 'numeric' 
                });
            }
        };
        setInterval(update, 1000);
        update();
    }

    // 2. Animated Circular Gauge Engine
    function animateGauge() {
        const ring = document.getElementById('gauge-progress');
        const text = document.getElementById('gauge-text');
        if (!ring || !text) return;

        const circumference = 283;
        let target = dashData.capacity;
        if (target > 100) target = 100;

        const offset = circumference - (target / 100 * circumference);
        ring.style.strokeDashoffset = offset;
        text.innerText = dashData.capacity + '%';

        if (dashData.capacity > 90) ring.style.stroke = '#ef4444';
        else if (dashData.capacity > 75) ring.style.stroke = '#f59e0b';
        else ring.style.stroke = '#34d399';
    }

    // 3. Dynamic Calendar Engine & Event Fetcher
    let navDate = new Date();

    async function fetchCalendarEvents(year, month) {
        try {
            const response = await fetch(`${dashData.baseUrl}/admin/dashboard/getEvents/${year}/${month}`);
            if (!response.ok) return [];
            const data = await response.json();
            return Array.isArray(data) ? data : [];
        } catch (e) {
            console.error("AJAX Calendar Error:", e);
            return [];
        }
    }

    async function renderCalendar() {
        const y = navDate.getFullYear();
        const m = navDate.getMonth(); // 0-indexed
        
        const monthNames = ["Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember"];
        
        const labelEl = document.getElementById('calMonthLabel');
        if (labelEl) labelEl.innerText = `${monthNames[m]} ${y}`;

        const grid = document.getElementById('calendarGrid');
        const deadlineContainer = document.getElementById('deadlineList');
        const deadlineCountEl = document.getElementById('deadlineCount');

        if (!grid) return;

        const firstDay = new Date(y, m, 1).getDay();
        const daysInMonth = new Date(y, m + 1, 0).getDate();
        const today = new Date();

        // Step A: Immediate Calendar Shell Rendering
        let gridHtml = '';
        for (let i = 0; i < firstDay; i++) {
            gridHtml += `<div class="cal-box empty opacity-0 pointer-events-none"></div>`;
        }

        for (let d = 1; d <= daysInMonth; d++) {
            const isToday = today.getDate() === d && today.getMonth() === m && today.getFullYear() === y;
            gridHtml += `
                <div class="cal-box ${isToday ? 'active' : ''}" id="cal-day-${d}">
                    ${d}
                </div>
            `;
        }
        grid.innerHTML = gridHtml;

        // Step B: Async Event Data Loading
        const events = await fetchCalendarEvents(y, m + 1);

        if (events && events.length > 0) {
            if (deadlineCountEl) deadlineCountEl.innerText = `${events.length} Order`;
            
            events.forEach(e => {
                if (e.target_date) {
                    const dayNum = parseInt(e.target_date.split('-')[2], 10);
                    const dayEl = document.getElementById(`cal-day-${dayNum}`);
                    if (dayEl) dayEl.classList.add('has-event');
                }
            });

            if (deadlineContainer) {
                deadlineContainer.innerHTML = events.map(e => `
                    <div class="p-3 bg-white rounded-xl border border-slate-200/80 shadow-sm hover:border-brand-300 transition-all">
                        <div class="flex justify-between items-center mb-1">
                            <span class="text-[10px] font-black bg-slate-900 text-white px-2 py-0.5 rounded-md">#${e.order_number || ''}</span>
                            <span class="text-[10px] font-bold text-rose-500 flex items-center gap-1">
                                <i class="bi bi-clock"></i> ${e.target_date ? e.target_date.split('-')[2] : ''} ${monthNames[m].substring(0,3)}
                            </span>
                        </div>
                        <div class="font-bold text-xs text-slate-800 truncate my-1">${e.customer_name || 'Customer'}</div>
                        <div class="flex justify-between items-center mt-2 pt-2 border-t border-slate-100">
                            <span class="text-[10px] text-slate-400 font-semibold">Total Volume</span>
                            <span class="text-[11px] font-extrabold text-brand-600">${Number(e.total_qty || 0).toLocaleString('id-ID')} Pcs</span>
                        </div>
                    </div>
                `).join('');
            }
        } else {
            if (deadlineCountEl) deadlineCountEl.innerText = `0 Order`;
            if (deadlineContainer) {
                deadlineContainer.innerHTML = `
                    <div class="flex flex-col items-center justify-center h-48 text-slate-400 text-center">
                        <i class="bi bi-calendar-check text-3xl mb-1 text-slate-300"></i>
                                <p class="text-xs font-medium">Tidak ada batch produksi pada bulan ini.</p>
                    </div>
                `;
            }
        }
    }

    function moveMonth(dir) {
        navDate.setMonth(navDate.getMonth() + dir);
        renderCalendar();
    }

    // 4. Payment Chart Integration
    function initPaymentChart() {
        const canvas = document.getElementById('cashflowChart');
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Lunas', 'Cicilan', 'Belum Bayar'],
                datasets: [{
                    data: [dashData.paid, dashData.partial, dashData.unpaid],
                    backgroundColor: ['#10b981', '#6366f1', '#f43f5e'],
                    hoverOffset: 8,
                    borderWidth: 0,
                    borderRadius: 8
                }]
            },
            options: {
                maintainAspectRatio: false,
                cutout: '80%',
                plugins: {
                    legend: { display: false },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                return ` ${context.label}: ${context.raw} Faktur`;
                            }
                        }
                    }
                }
            }
        });
    }

    // Bootstrap Initialization
    document.addEventListener('DOMContentLoaded', () => {
        initDigitalClock();
        animateGauge();
        renderCalendar();
        initPaymentChart();
    });
</script>
<?= $this->endSection() ?>
