{% extends "base.twig" %}

{% block title %}{{ title }}{% endblock %}

{% block styles %}
<style>
    .state-rep-container { padding: 24px; background: #f9fafb; min-height: calc(100vh - 70px); }

    /* State header */
    .state-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 32px;
        border-radius: 16px;
        margin-bottom: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
    }
    .state-header::before {
        content: ''; position: absolute; right: -40px; top: -40px;
        width: 240px; height: 240px;
        background: rgba(255,255,255,0.08); border-radius: 50%;
    }
    .state-header h1 { font-size: 32px; font-weight: 800; margin: 0 0 6px; position: relative; z-index: 1; }
    .state-header p { opacity: 0.9; font-size: 15px; margin: 0; position: relative; z-index: 1; }

    .header-actions {
        display: flex; gap: 8px; margin-top: 16px; position: relative; z-index: 1; flex-wrap: wrap;
    }
    .header-actions .btn {
        background: rgba(255,255,255,0.95); color: #4f46e5;
        border: none; padding: 8px 16px; border-radius: 8px;
        font-size: 13px; font-weight: 600; text-decoration: none;
        display: inline-flex; align-items: center; gap: 6px;
    }
    .header-actions .btn:hover { background: white; }

    /* Summary table */
    .summary-card {
        background: white; border-radius: 14px; padding: 22px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 24px;
    }
    .summary-card h3 {
        font-size: 18px; font-weight: 700; color: #1f2937;
        margin: 0 0 16px; display: flex; align-items: center; gap: 8px;
    }

    .summary-table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .summary-table th {
        background: #f1f5f9; color: #1e293b; padding: 12px;
        text-align: left; font-weight: 700; font-size: 12px;
        text-transform: uppercase; letter-spacing: 0.5px;
        border-bottom: 2px solid #e2e8f0;
    }
    .summary-table td { padding: 12px; border-bottom: 1px solid #f1f5f9; }
    .summary-table tr:hover { background: #f8fafc; }
    .summary-table .stars-cell { font-size: 16px; color: #f59e0b; letter-spacing: 1px; }
    .summary-table .star-empty { color: #e2e8f0; }
    .summary-table .row-num {
        width: 40px; text-align: center;
        font-weight: 700; color: #94a3b8;
    }

    /* Participant report cards (same look as individual-reports) */
    .report-card {
        background: white; border-radius: 16px; box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        border: 1px solid #e2e8f0; margin-bottom: 20px; overflow: hidden;
    }
    .report-card-header {
        padding: 20px 24px; display: flex; align-items: center;
        justify-content: space-between; gap: 16px; flex-wrap: wrap;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;
    }
    .participant-info { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 250px; }
    .participant-avatar {
        width: 48px; height: 48px; border-radius: 12px;
        background: rgba(255,255,255,0.25); color: white;
        display: flex; align-items: center; justify-content: center;
        font-size: 1.1rem; font-weight: 700; flex-shrink: 0;
    }
    .participant-name { font-size: 16px; font-weight: 700; margin-bottom: 2px; }
    .participant-meta { font-size: 12px; opacity: 0.85; }
    .participant-meta span { margin-right: 12px; }

    .report-metrics { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
    .metric { text-align: center; min-width: 80px; }
    .metric-value { font-size: 16px; font-weight: 700; }
    .metric-label { font-size: 10px; opacity: 0.8; text-transform: uppercase; font-weight: 600; letter-spacing: 0.5px; margin-top: 2px; }

    .stars-container { display: flex; gap: 2px; justify-content: center; }
    .star { font-size: 16px; color: rgba(255,255,255,0.3); }
    .star.filled { color: #fcd34d; }

    .report-card-body { padding: 24px; }

    .detail-grid {
        display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px; margin-bottom: 20px;
    }
    .detail-item {
        padding: 14px; background: #f8fafc; border-radius: 10px; border: 1px solid #e2e8f0;
    }
    .detail-label {
        font-size: 11px; color: #64748b; font-weight: 600;
        text-transform: uppercase; letter-spacing: 0.5px;
        margin-bottom: 6px; display: flex; align-items: center; gap: 6px;
    }
    .detail-label i { color: #667eea; }
    .detail-star { color: #f59e0b !important; margin-left: auto; font-size: 14px; }
    .detail-item.star-achieved {
        background: rgba(245, 158, 11, 0.06);
        border-color: rgba(245, 158, 11, 0.25);
    }
    .detail-value { font-size: 15px; font-weight: 700; color: #1e293b; }
    .detail-value.success { color: #059669; }
    .detail-value.danger { color: #dc2626; }

    .tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .tag { padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600; background: rgba(102,126,234,0.1); color: #667eea; }

    .savings-badge {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 6px 12px; border-radius: 8px;
        font-size: 12px; font-weight: 600;
    }
    .savings-badge.yes { background: rgba(16,185,129,0.1); color: #059669; }
    .savings-badge.no { background: rgba(239,68,68,0.1); color: #dc2626; }

    .progress-bar-mini {
        height: 6px; border-radius: 3px; background: #e2e8f0;
        overflow: hidden; width: 60px; display: inline-block;
        vertical-align: middle; margin-left: 6px;
    }
    .progress-bar-mini .fill { height: 100%; border-radius: 3px; }
    .progress-bar-mini .fill.green { background: #10b981; }
    .progress-bar-mini .fill.yellow { background: #f59e0b; }
    .progress-bar-mini .fill.red { background: #ef4444; }

    .chart-container {
        display: grid; grid-template-columns: 1fr 1fr;
        gap: 20px; margin-top: 16px;
    }
    .chart-box {
        background: #f8fafc; border-radius: 12px;
        padding: 16px; border: 1px solid #e2e8f0;
    }
    .chart-box h6 { font-size: 13px; font-weight: 700; color: #475569; margin-bottom: 12px; }
    .chart-box canvas { max-height: 200px; }

    .empty-state {
        background: white; padding: 60px 20px; border-radius: 14px; text-align: center; color: #94a3b8;
    }
    .empty-state i { font-size: 48px; display: block; margin-bottom: 12px; opacity: 0.5; }

    /* ── Print / PDF Export ─────────────────────────────────── */
    @page {
        size: A4 portrait;
        margin: 12mm 10mm;
    }

    @media print {
        /* Force exact colors (gradients, backgrounds, badges) */
        *, *::before, *::after {
            -webkit-print-color-adjust: exact !important;
            print-color-adjust: exact !important;
            color-adjust: exact !important;
        }

        html, body {
            background: white !important;
            margin: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            font-size: 11px;
        }

        /* Hide all app chrome */
        .sidebar, .navbar-top, .footer, .mobile-overlay,
        .header-actions, .sidebar-overlay,
        nav.sidebar, .layout-wrapper > .sidebar { display: none !important; }

        /* Reset main content layout (no left sidebar offset) */
        .main-content {
            margin-left: 0 !important;
            padding: 0 !important;
            width: 100% !important;
            max-width: 100% !important;
        }

        .state-rep-container {
            padding: 0 !important;
            background: white !important;
            min-height: 0 !important;
        }

        /* State header — keep gradient on first page */
        .state-header {
            box-shadow: none !important;
            margin-bottom: 14px !important;
            padding: 18px 22px !important;
            border-radius: 10px !important;
        }
        .state-header h1 { font-size: 22px !important; }
        .state-header p  { font-size: 12px !important; }

        /* Summary table on its own page */
        .summary-card {
            box-shadow: none !important;
            border: 1px solid #cbd5e1 !important;
            margin-bottom: 14px !important;
            page-break-after: always;
            break-after: page;
        }
        .summary-card h3 { font-size: 15px !important; }
        .summary-table th, .summary-table td { padding: 8px !important; font-size: 11px !important; }

        /* Pack participant reports — no forced page break per card */
        .report-card {
            box-shadow: none !important;
            border: 1px solid #cbd5e1 !important;
            page-break-inside: avoid;
            break-inside: avoid;
            margin-bottom: 8px !important;
        }

        .report-card-header {
            padding: 14px 18px !important;
        }
        .participant-avatar { width: 42px !important; height: 42px !important; }
        .participant-name   { font-size: 14px !important; }
        .participant-meta   { font-size: 11px !important; }
        .metric-value       { font-size: 13px !important; }

        .report-card-body { padding: 16px !important; }

        .detail-grid {
            grid-template-columns: repeat(3, 1fr) !important;
            gap: 8px !important;
            margin-bottom: 12px !important;
        }
        .detail-item { padding: 8px 10px !important; }
        .detail-label { font-size: 10px !important; margin-bottom: 4px !important; }
        .detail-value { font-size: 12px !important; }
        .savings-badge { font-size: 10px !important; padding: 4px 8px !important; }
        .tag { font-size: 10px !important; padding: 2px 7px !important; }

        /* Charts side-by-side, smaller */
        .chart-container { gap: 10px !important; margin-top: 10px !important; }
        .chart-box { padding: 10px !important; }
        .chart-box h6 { font-size: 11px !important; margin-bottom: 6px !important; }
        .chart-box canvas { max-height: 140px !important; }

        /* Avoid page breaks inside critical components */
        .summary-table tr, .detail-item, .chart-box { page-break-inside: avoid; }

        /* Headings between sections */
        h3 { font-size: 14px !important; margin: 12px 0 8px !important; }
    }

    @media (max-width: 768px) {
        .report-metrics { display: none; }
        .chart-container { grid-template-columns: 1fr; }
        .detail-grid { grid-template-columns: 1fr; }
    }
</style>
{% endblock %}

{% block contents %}
<div class="state-rep-container">

    {# === STATE HEADER === #}
    <div class="state-header">
        <h1><i class="bi bi-pin-map-fill"></i> {{ state.state_name }}</h1>
        <p>Laporan Individu Peserta &mdash; {{ totalParticipants }} peserta aktif</p>
        <div class="header-actions">
            <a href="/admin/individual-reports/by-state" class="btn"><i class="bi bi-arrow-left"></i> Kembali ke Senarai Negeri</a>
            <a href="/admin/individual-reports/state/{{ state.id }}/export" target="_blank" class="btn"><i class="bi bi-file-earmark-pdf"></i> Eksport / Cetak PDF</a>
        </div>
    </div>

    {% if participants|length == 0 %}
    <div class="empty-state">
        <i class="bi bi-inbox"></i>
        Tiada peserta aktif untuk negeri ini.
    </div>
    {% else %}

    {# === SUMMARY TABLE === #}
    <div class="summary-card">
        <h3><i class="bi bi-list-ul"></i> Senarai Peserta - {{ state.state_name }}</h3>
        <div class="table-responsive">
            <table class="summary-table">
                <thead>
                    <tr>
                        <th class="row-num">#</th>
                        <th>Nama Peserta</th>
                        <th>Coach</th>
                        <th class="text-center">Bintang (Rating)</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p in participants %}
                    <tr>
                        <td class="row-num">{{ loop.index }}</td>
                        <td><strong>{{ p.name }}</strong></td>
                        <td>{{ p.coach_name|default('-') }}</td>
                        <td class="text-center">
                            <span class="stars-cell">
                                {% for i in 1..5 %}
                                    <i class="bi bi-star-fill {% if i > p.stars %}star-empty{% endif %}"></i>
                                {% endfor %}
                            </span>
                            <span style="color:#64748b; font-size:11px; margin-left:4px;">{{ p.stars }}/5</span>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>

    {# === INDIVIDUAL REPORTS === #}
    <h3 style="font-size: 18px; font-weight: 700; color: #1f2937; margin: 24px 0 16px;">
        <i class="bi bi-files"></i> Laporan Penuh Setiap Peserta
    </h3>

    {% for p in participants %}
    <div class="report-card">
        <div class="report-card-header">
            <div class="participant-info">
                <div class="participant-avatar">{{ p.name|slice(0, 2)|upper }}</div>
                <div>
                    <div class="participant-name">{{ p.name }}</div>
                    <div class="participant-meta">
                        <span><i class="bi bi-person-badge"></i> {{ p.coach_name|default('-') }}</span>
                        <span><i class="bi bi-geo-alt"></i> {{ p.state_name|default('-') }}</span>
                    </div>
                </div>
            </div>

            <div class="report-metrics">
                <div class="metric">
                    <div class="metric-value">{{ p.kehadiran_pct }}%</div>
                    <div class="metric-label">Kehadiran</div>
                </div>
                <div class="metric">
                    <div class="metric-value">{{ p.lk_pct }}%</div>
                    <div class="metric-label">LK</div>
                </div>
                <div class="metric">
                    <div class="metric-value">RM{{ p.dana_diterima|number_format(0, '.', ',') }}</div>
                    <div class="metric-label">Dana</div>
                </div>
                <div class="metric">
                    <div class="stars-container">
                        {% for i in 1..5 %}
                            <span class="star {% if i <= p.stars %}filled{% endif %}"><i class="bi bi-star-fill"></i></span>
                        {% endfor %}
                    </div>
                    <div class="metric-label">Rating</div>
                </div>
            </div>
        </div>

        <div class="report-card-body">
            <div class="detail-grid">
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-person"></i> Nama</div>
                    <div class="detail-value">{{ p.name }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-person-badge"></i> Coach</div>
                    <div class="detail-value">{{ p.coach_name|default('-') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-building"></i> Jenis Perniagaan</div>
                    <div class="tag-list">
                        {% for type in p.business_types %}
                            <span class="tag">{{ type }}</span>
                        {% endfor %}
                        {% if p.business_type_other %}
                            <span class="tag">{{ p.business_type_other }}</span>
                        {% endif %}
                        {% if p.business_types|length == 0 and not p.business_type_other %}
                            <span class="text-muted">-</span>
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-cash-stack"></i> Dana Diterima</div>
                    <div class="detail-value success">RM {{ p.dana_diterima|number_format(2, '.', ',') }}</div>
                </div>
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-cash-coin"></i> Dana Digunakan</div>
                    <div class="detail-value danger">RM {{ p.dana_digunakan|number_format(2, '.', ',') }}</div>
                </div>
                <div class="detail-item {% if p.kehadiran_pct >= 80 %}star-achieved{% endif %}">
                    <div class="detail-label">
                        <i class="bi bi-calendar-check"></i> Kehadiran
                        {% if p.kehadiran_pct >= 80 %}<i class="bi bi-star-fill detail-star"></i>{% endif %}
                    </div>
                    <div class="detail-value">
                        {{ p.kehadiran_count }}/6 ({{ p.kehadiran_pct }}%)
                        <div class="progress-bar-mini">
                            <div class="fill {% if p.kehadiran_pct >= 80 %}green{% elseif p.kehadiran_pct >= 50 %}yellow{% else %}red{% endif %}" style="width: {{ p.kehadiran_pct }}%"></div>
                        </div>
                    </div>
                </div>
                <div class="detail-item {% if p.lk_pct >= 50 %}star-achieved{% endif %}">
                    <div class="detail-label">
                        <i class="bi bi-pencil-square"></i> Kemahiran Keusahawanan (LK)
                        {% if p.lk_pct >= 50 %}<i class="bi bi-star-fill detail-star"></i>{% endif %}
                    </div>
                    <div class="detail-value">
                        {{ p.lk_completed }}/6 ({{ p.lk_pct }}%)
                        <div class="progress-bar-mini">
                            <div class="fill {% if p.lk_pct >= 80 %}green{% elseif p.lk_pct >= 50 %}yellow{% else %}red{% endif %}" style="width: {{ p.lk_pct }}%"></div>
                        </div>
                    </div>
                </div>
                <div class="detail-item {% if p.has_savings %}star-achieved{% endif %}">
                    <div class="detail-label">
                        <i class="bi bi-piggy-bank"></i> Tabiat Menyimpan
                        {% if p.has_savings %}<i class="bi bi-star-fill detail-star"></i>{% endif %}
                    </div>
                    <div>
                        {% if p.has_savings %}
                            <span class="savings-badge yes"><i class="bi bi-check-circle-fill"></i> {{ p.tabiat_menyimpan }}</span>
                        {% else %}
                            <span class="savings-badge no"><i class="bi bi-x-circle-fill"></i> {{ p.tabiat_menyimpan }}</span>
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item {% if p.revenue_increased %}star-achieved{% endif %}">
                    <div class="detail-label">
                        <i class="bi bi-graph-up"></i> Prestasi Jualan
                        {% if p.revenue_increased %}<i class="bi bi-star-fill detail-star"></i>{% endif %}
                    </div>
                    <div>
                        {% if (p.sales_increase_count + p.sales_decrease_count) > 0 %}
                            {% if p.revenue_increased %}
                                <span class="savings-badge yes"><i class="bi bi-arrow-up-circle-fill"></i> Meningkat</span>
                            {% else %}
                                <span class="savings-badge no"><i class="bi bi-dash-circle-fill"></i> Menurun</span>
                            {% endif %}
                            <div style="font-size:11px; color:#64748b; margin-top:4px;">RM {{ p.sales_min|number_format(0,'.', ',') }} - RM {{ p.sales_max|number_format(0,'.', ',') }}</div>
                        {% elseif p.sales_min is not null %}
                            <span class="savings-badge no"><i class="bi bi-dash-circle"></i> Tiada Perbandingan</span>
                            <div style="font-size:11px; color:#64748b; margin-top:4px;">Hanya 1 bulan ada data (RM {{ p.sales_max|number_format(0,'.', ',') }})</div>
                        {% else %}
                            <span class="savings-badge no"><i class="bi bi-dash-circle-fill"></i> Tiada Data</span>
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item {% if p.has_employees %}star-achieved{% endif %}">
                    <div class="detail-label">
                        <i class="bi bi-person-plus"></i> Menggajikan Pekerja
                        {% if p.has_employees %}<i class="bi bi-star-fill detail-star"></i>{% endif %}
                    </div>
                    <div>
                        {% if p.employees_max %}
                            <span class="savings-badge yes"><i class="bi bi-people-fill"></i> {{ p.employees_max }} pekerja</span>
                        {% else %}
                            <span class="savings-badge no"><i class="bi bi-dash-circle-fill"></i> Tiada Pekerja</span>
                        {% endif %}
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-label"><i class="bi bi-star-fill" style="color: #f59e0b;"></i> Bintang (Rating)</div>
                    <div>
                        <div class="stars-container" style="font-size: 22px; justify-content: flex-start;">
                            {% for i in 1..5 %}
                                <span class="star {% if i <= p.stars %}filled{% endif %}" style="color: {% if i <= p.stars %}#f59e0b{% else %}#e2e8f0{% endif %};">
                                    <i class="bi bi-star-fill"></i>
                                </span>
                            {% endfor %}
                        </div>
                        <small class="text-muted">{{ p.stars }}/5 bintang</small>
                    </div>
                </div>
            </div>

            {% if p.chart.labels|length > 0 %}
            <div class="chart-container">
                <div class="chart-box">
                    <h6><i class="bi bi-graph-up"></i> Jualan (Revenue)</h6>
                    <canvas id="chart-revenue-{{ p.id }}"
                            data-labels="{{ p.chart.labels|json_encode }}"
                            data-revenue="{{ p.chart.revenue|json_encode }}"></canvas>
                </div>
                <div class="chart-box">
                    <h6><i class="bi bi-people"></i> Bilangan Pekerja</h6>
                    <canvas id="chart-employees-{{ p.id }}"
                            data-labels="{{ p.chart.labels|json_encode }}"
                            data-employees="{{ p.chart.employees|json_encode }}"></canvas>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}

    {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>
<script>
let allCharts = [];

document.addEventListener('DOMContentLoaded', function() {
    // Datalabels is auto-registered globally — unregister so only the employees bar uses it
    if (typeof ChartDataLabels !== 'undefined') {
        Chart.unregister(ChartDataLabels);
    }
    // Render all revenue line charts
    document.querySelectorAll('canvas[id^="chart-revenue-"]').forEach(function(canvas) {
        const labels = JSON.parse(canvas.dataset.labels);
        const revenue = JSON.parse(canvas.dataset.revenue);
        const maxRev = Math.max(...revenue, 1);
        const chart = new Chart(canvas.getContext('2d'), {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Revenue (RM)',
                    data: revenue,
                    borderColor: '#10b981',
                    backgroundColor: 'rgba(16,185,129,0.1)',
                    tension: 0.3, fill: true, pointRadius: 4,
                    pointBackgroundColor: '#10b981',
                    pointBorderColor: '#fff',
                    pointBorderWidth: 2
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                animation: false,
                layout: { padding: { top: 28, right: 12, left: 4 } },
                plugins: {
                    legend: { display: false },
                    datalabels: {
                        anchor: 'end',
                        align: 'top',
                        offset: 6,
                        color: '#065f46',
                        font: { weight: 'bold', size: 10 },
                        formatter: (v) => v > 0 ? 'RM ' + v.toLocaleString('en-MY', {maximumFractionDigits: 0}) : ''
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        suggestedMax: Math.ceil(maxRev * 1.2),
                        ticks: { callback: (v) => 'RM ' + v.toLocaleString() }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
        allCharts.push(chart);
    });

    document.querySelectorAll('canvas[id^="chart-employees-"]').forEach(function(canvas) {
        const labels = JSON.parse(canvas.dataset.labels);
        const employees = JSON.parse(canvas.dataset.employees);
        const maxVal = Math.max(...employees, 1);
        const chart = new Chart(canvas.getContext('2d'), {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [{
                    label: 'Pekerja',
                    data: employees,
                    backgroundColor: 'rgba(102,126,234,0.7)',
                    borderColor: '#667eea',
                    borderWidth: 2,
                    borderRadius: 6
                }]
            },
            options: {
                responsive: true, maintainAspectRatio: false,
                animation: false,
                layout: { padding: { top: 24 } },
                plugins: {
                    legend: { display: false },
                    datalabels: {
                        anchor: 'end',
                        align: 'top',
                        offset: 4,
                        color: '#1e293b',
                        font: { weight: 'bold', size: 11 },
                        formatter: (v) => v > 0 ? v : ''
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        suggestedMax: Math.ceil(maxVal * 1.25),
                        ticks: { stepSize: 1, precision: 0 }
                    }
                }
            },
            plugins: [ChartDataLabels]
        });
        allCharts.push(chart);
    });

    // Re-flow charts before printing so canvases match the page-print width
    window.addEventListener('beforeprint', function () {
        allCharts.forEach(c => c.resize());
    });
    window.addEventListener('afterprint', function () {
        allCharts.forEach(c => c.resize());
    });
});

function exportToPDF(btn) {
    const original = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<i class="bi bi-hourglass-split"></i> Menyiapkan...';

    // Force one resize so all charts are ready, then print
    setTimeout(function() {
        allCharts.forEach(c => c.resize());
        window.print();
        btn.innerHTML = original;
        btn.disabled = false;
    }, 250);
}
</script>
{% endblock %}
