{% extends "layouts/base.twig" %}
{% block title %}{{ translations.evaluation_title ?? 'Targety vs Realizacja' }}{% endblock %}
{% block head %}
<style>
    :root {
        --ev-green:    #1C3B2E;
        --ev-ok:       #16a34a; --ev-ok-bg: #f0fdf4; --ev-ok-bd: #bbf7d0;
        --ev-wn:       #b45309; --ev-wn-bg: #fffbeb; --ev-wn-bd: #fde68a;
        --ev-dg:       #dc2626; --ev-dg-bg: #fef2f2; --ev-dg-bd: #fecaca;
        --ev-mn:       #d97706; --ev-mn-bg: #fff7ed; --ev-mn-bd: #fed7aa;
        --ev-na:       #6b7280; --ev-na-bg: #f9fafb; --ev-na-bd: #e5e7eb;
        --ev-t1:       #0E0E0E; --ev-t2: #5A5A5A; --ev-t3: #9A9A9A;
        --ev-bd:       rgba(0,0,0,0.07);
        --ev-sf:       #ffffff; --ev-sf2: #F0EDE9; --ev-sf3: #E5E1DC;
    }
    .ev-card {
        border-radius: 14px; border: 0.5px solid var(--ev-bd);
        background: var(--ev-sf); padding: 18px 20px; height: 100%;
    }
    .ev-metric-label {
        font-size: 0.72rem; font-weight: 700; letter-spacing: .06em;
        text-transform: uppercase; color: var(--ev-t2); margin-bottom: 4px;
    }
    .ev-realized {
        font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
    }
    .ev-badge {
        display: inline-flex; align-items: center; gap: 4px;
        padding: 3px 9px; border-radius: 5px;
        font-size: 0.72rem; font-weight: 700; border: 1px solid transparent;
    }
    .ev-badge-good    { background: var(--ev-ok-bg);  color: var(--ev-ok);  border-color: var(--ev-ok-bd); }
    .ev-badge-medium  { background: var(--ev-wn-bg);  color: var(--ev-wn);  border-color: var(--ev-wn-bd); }
    .ev-badge-medium_bad { background: var(--ev-mn-bg); color: var(--ev-mn); border-color: var(--ev-mn-bd); }
    .ev-badge-bad     { background: var(--ev-dg-bg);  color: var(--ev-dg);  border-color: var(--ev-dg-bd); }
    .ev-badge-no_target, .ev-badge-no_data { background: var(--ev-na-bg); color: var(--ev-na); border-color: var(--ev-na-bd); }
    /* Pasek progów */
    .ev-thr-bar { position: relative; height: 6px; border-radius: 3px; background: var(--ev-sf3); margin: 8px 0 4px; }
    .ev-thr-zone { position: absolute; top: 0; height: 100%; }
    .ev-thr-needle {
        position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%;
        background: #fff; border: 2px solid; transform: translate(-50%, -50%);
        box-shadow: 0 0 0 2px #fff; z-index: 2;
    }
    .ev-thr-ticks { position: relative; font-size: 0.6rem; color: var(--ev-t3); height: 14px; }
    .ev-thr-ticks span { position: absolute; white-space: nowrap; }
    /* Trend */
    .ev-trend-better { color: var(--ev-ok); font-size: 0.75rem; }
    .ev-trend-worse  { color: var(--ev-dg); font-size: 0.75rem; }
    .ev-trend-flat   { color: var(--ev-t3); font-size: 0.75rem; }
    /* Source badge */
    .ev-source {
        display: inline-block; font-size: 0.6rem; color: var(--ev-t3);
        background: var(--ev-sf2); border: 0.5px solid var(--ev-bd);
        border-radius: 3px; padding: 1px 5px; margin-left: 4px;
    }
    /* Filter */
    .ev-filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
    /* No target overlay */
    .ev-no-target { opacity: .55; }
    /* Skeleton */
    .ev-skeleton {
        background: linear-gradient(90deg, var(--ev-sf2) 25%, var(--ev-sf3) 50%, var(--ev-sf2) 75%);
        background-size: 200% 100%; animation: ev-shimmer 1.4s infinite; border-radius: 6px;
    }
    @keyframes ev-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    /* Section headers */
    .ev-section-header {
        padding: 10px 0 6px;
        border-bottom: 1.5px solid var(--ev-sf3);
        margin-bottom: 4px;
    }
    .ev-section-title {
        font-size: 0.78rem; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ev-t1); margin-bottom: 2px;
    }
    .ev-section-desc {
        font-size: 0.72rem; color: var(--ev-t3); font-weight: 400;
    }
    .ev-section-divider {
        margin-top: 10px; margin-bottom: 2px;
    }
    /* CSV button */
    .ev-btn-csv {
        padding: 5px 12px; border-radius: 6px;
        border: 0.5px solid var(--ev-bd); background: var(--ev-sf2);
        color: var(--ev-t2); font-size: 0.8rem; font-weight: 500; cursor: pointer;
    }
    .ev-btn-csv:hover { background: var(--ev-sf3); }
</style>
{% endblock %}
{% block page_heading %}
<div class="page-heading">
    <h3>{{ translations.evaluation_title ?? 'Targety vs Realizacja' }}</h3>
    <p class="text-subtitle text-muted">{{ translations.evaluation_subtitle ?? 'Porównanie zdefiniowanych progów z wartościami zrealizowanymi per metryka' }}</p>
</div>
{% endblock %}
{% block content %}

{# ── Pasek filtrów ──────────────────────────────────────────────────── #}
<div class="card mb-3">
    <div class="card-body py-3">
        <div class="ev-filter-bar">
            <label class="small fw-semibold mb-0">{{ translations.month_label ?? 'Miesiąc' }}:</label>
            <select class="form-select form-select-sm" id="ev-month" style="width:140px">
                {% set months = (translations.months_long_csv ?? 'Styczeń,Luty,Marzec,Kwiecień,Maj,Czerwiec,Lipiec,Sierpień,Wrzesień,Październik,Listopad,Grudzień')|split(',') %}
                {% for m in 1..12 %}
                <option value="{{ m }}" {% if m == current_month %}selected{% endif %}>
                    {{ months[m-1] }}
                </option>
                {% endfor %}
            </select>
            <label class="small fw-semibold mb-0">{{ translations.year_label ?? 'Rok' }}:</label>
            <select class="form-select form-select-sm" id="ev-year" style="width:100px">
                {% for y in (current_year - 2)..(current_year) %}
                <option value="{{ y }}" {% if y == current_year %}selected{% endif %}>{{ y }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-sm btn-primary" id="ev-apply">{{ translations.apply ?? 'Zastosuj' }}</button>
            <div class="ms-auto d-flex align-items-center gap-2">
                <div class="spinner-border spinner-border-sm text-secondary d-none" id="ev-spinner"></div>
                <button class="ev-btn-csv" id="ev-export-csv" title="{{ translations.download_csv ?? 'Pobierz CSV' }}">⬇ CSV</button>
            </div>
        </div>
    </div>
</div>

{# ── Siatka metryk ──────────────────────────────────────────────────── #}
<div id="ev-grid">
    {# Skeleton placeholders #}
    <div class="ev-section-header mb-3">
        <div class="ev-section-title">{{ translations.eval_section_direct ?? 'Targety zależne od sklepu' }}</div>
        <div class="ev-section-desc">{{ translations.eval_section_direct_desc ?? 'Metryki, na które sklep ma bezpośredni wpływ bieżącą pracą operacyjną i sprzedażową.' }}</div>
    </div>
    <div class="row g-3" id="ev-grid-direct">
        {% for i in 1..3 %}
        <div class="col-12 col-md-6 col-xl-4">
            <div class="ev-card">
                <div class="ev-skeleton" style="height:12px;width:60%;margin-bottom:10px"></div>
                <div class="ev-skeleton" style="height:28px;width:40%;margin-bottom:8px"></div>
                <div class="ev-skeleton" style="height:8px;margin-bottom:12px"></div>
                <div class="ev-skeleton" style="height:10px;width:50%"></div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="ev-section-header ev-section-divider mt-4 mb-3">
        <div class="ev-section-title">{{ translations.eval_section_indirect ?? 'Targety niezależne bezpośrednio od sklepu' }}</div>
        <div class="ev-section-desc">{{ translations.eval_section_indirect_desc ?? 'Metryki wynikające z narzuconych kosztów, konfiguracji systemu lub uwarunkowań zewnętrznych.' }}</div>
    </div>
    <div class="row g-3" id="ev-grid-indirect">
        {% for i in 1..5 %}
        <div class="col-12 col-md-6 col-xl-4">
            <div class="ev-card">
                <div class="ev-skeleton" style="height:12px;width:60%;margin-bottom:10px"></div>
                <div class="ev-skeleton" style="height:28px;width:40%;margin-bottom:8px"></div>
                <div class="ev-skeleton" style="height:8px;margin-bottom:12px"></div>
                <div class="ev-skeleton" style="height:10px;width:50%"></div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}
{% block scripts %}
<script src="{{ root }}/assets/vendors/chartjs/Chart.bundle.min.js"></script>
<script>
/* ── Tłumaczenia ──────────────────────────────────────────────── */
const evTrans = {
    level_good:               '{{ translations.level_good ?? "Dobry" }}',
    level_medium:             '{{ translations.level_medium ?? "Średni" }}',
    level_medium_bad:         '{{ translations.level_medium_bad ?? "Średnio zły" }}',
    level_bad:                '{{ translations.level_bad ?? "Zły" }}',
    level_no_target:          '{{ translations.level_no_target ?? "Brak targetu" }}',
    level_no_data:            '{{ translations.level_no_data ?? "Brak danych" }}',
    trend_better:             '{{ translations.trend_better ?? "Poprawa vs poprzedni miesiąc" }}',
    trend_worse:              '{{ translations.trend_worse ?? "Pogorszenie vs poprzedni miesiąc" }}',
    trend_flat:               '{{ translations.trend_flat ?? "Bez zmian vs poprzedni miesiąc" }}',
    no_thresholds:            '{{ translations.no_thresholds ?? "Brak zdefiniowanych progów" }}',
    no_data_for_period:       '{{ translations.no_data_for_period ?? "Brak danych dla wybranego okresu." }}',
    thresholds_label:         '{{ translations.thresholds_label ?? "Progi" }}',
    source_admin:             '{{ translations.eval_source_admin ?? "Admin" }}',
    source_consultant:        '{{ translations.eval_source_consultant ?? "Konsultant" }}',
    source_default:           '⚙ {{ translations.eval_source_default ?? "domyślne" }}',
    csv_metric:               '{{ translations.csv_metric ?? "Metryka" }}',
    csv_label:                '{{ translations.csv_label ?? "Etykieta" }}',
    csv_realized:             '{{ translations.csv_realized ?? "Realizacja" }}',
    csv_level:                '{{ translations.csv_level ?? "Ocena" }}',
    csv_threshold_good:       '{{ translations.csv_threshold_good ?? "Próg Dobry (t1)" }}',
    csv_threshold_medium:     '{{ translations.csv_threshold_medium ?? "Próg Średni (t2)" }}',
    csv_threshold_medium_bad: '{{ translations.csv_threshold_medium_bad ?? "Próg Śr.Zły (t3)" }}',
    csv_source:               '{{ translations.csv_source ?? "Źródło" }}',
    csv_trend:                '{{ translations.csv_trend ?? "Trend" }}',
    csv_prev_month:           '{{ translations.csv_prev_month ?? "Poprzedni miesiąc" }}',
    // Etykiety metryk (tłumaczenie po stronie panelu — API zwraca klucz metric)
    metric_employee_cost_pct:  '{{ translations.metric_employee_cost_pct ?? "Koszt pracownika" }}',
    metric_shop_cost_pct:      '{{ translations.metric_shop_cost_pct ?? "Koszt sklepu" }}',
    metric_material_cost_pct:  '{{ translations.metric_material_cost_pct ?? "Koszt surowca" }}',
    metric_revenue:            '{{ translations.metric_revenue ?? "Przychód" }}',
    metric_transactions_count: '{{ translations.metric_transactions_count ?? "Liczba klientów" }}',
    metric_avg_ticket:         '{{ translations.metric_avg_ticket ?? "Średni koszyk" }}',
    metric_b2b_clients_count:  '{{ translations.metric_b2b_clients_count ?? "Liczba klientów B2B" }}',
    metric_net_margin_pct:     '{{ translations.metric_net_margin_pct ?? "Ogólna marża netto" }}',
};

/* ── Konfiguracja ─────────────────────────────────────────────── */
const EV = {
    root:      '{{ root }}',
    currency:  '{{ currency_symbol }}',
    year:      {{ current_year }},
    month:     {{ current_month }},
    data:      {{ evaluation_json | raw }},
};

/* ── Kolory i etykiety ─────────────────────────────────────────── */
const LEVEL_CFG = {
    good:       { cls: 'ev-badge-good',       label: evTrans.level_good,       color: '#16a34a', zone: '#dcfce7' },
    medium:     { cls: 'ev-badge-medium',      label: evTrans.level_medium,     color: '#b45309', zone: '#fef9c3' },
    medium_bad: { cls: 'ev-badge-medium_bad',  label: evTrans.level_medium_bad, color: '#d97706', zone: '#ffedd5' },
    bad:        { cls: 'ev-badge-bad',         label: evTrans.level_bad,        color: '#dc2626', zone: '#fee2e2' },
    no_target:  { cls: 'ev-badge-no_target',   label: evTrans.level_no_target,  color: '#6b7280', zone: '#f3f4f6' },
    no_data:    { cls: 'ev-badge-no_data',     label: evTrans.level_no_data,    color: '#6b7280', zone: '#f3f4f6' },
};
const TREND_CFG = {
    better: { cls: 'ev-trend-better', icon: '↑', label: evTrans.trend_better },
    worse:  { cls: 'ev-trend-worse',  icon: '↓', label: evTrans.trend_worse },
    flat:   { cls: 'ev-trend-flat',   icon: '→', label: evTrans.trend_flat },
};
const SOURCE_LABEL = { admin: evTrans.source_admin, consultant: evTrans.source_consultant, 'default': evTrans.source_default };

/* ── Mapa etykiet metryk (klucz API → przetłumaczona etykieta) ── */
const METRIC_LABELS = {
    employee_cost_pct:  evTrans.metric_employee_cost_pct,
    shop_cost_pct:      evTrans.metric_shop_cost_pct,
    material_cost_pct:  evTrans.metric_material_cost_pct,
    revenue:            evTrans.metric_revenue,
    transactions_count: evTrans.metric_transactions_count,
    avg_ticket:         evTrans.metric_avg_ticket,
    b2b_clients_count:  evTrans.metric_b2b_clients_count,
    net_margin_pct:     evTrans.metric_net_margin_pct,
};

/* ── Formatowanie ─────────────────────────────────────────────── */
function fmtValue(value, unit) {
    if (value === null || value === undefined) return '—';
    const v = Number(value);
    if (unit === 'pct')    return v.toFixed(1) + '%';
    if (unit === 'amount') return v.toLocaleString('pl-PL', {minimumFractionDigits: 0, maximumFractionDigits: 0}) + ' ' + EV.currency;
    if (unit === 'count')  return Math.round(v).toLocaleString('pl-PL');
    return String(v);
}

/* ── Pasek progów ──────────────────────────────────────────────── */
function buildThresholdBar(metric) {
    const thr = metric.target;
    if (!thr) return `<div class="text-muted" style="font-size:.7rem">${evTrans.no_thresholds}</div>`;

    const lower = metric.lower_is_better;
    const vals  = [thr.t1, thr.t2, thr.t3, metric.realized ?? 0].filter(x => x != null);
    const minV  = Math.min(...vals) * (lower ? 0.85 : 0.7);
    const maxV  = Math.max(...vals) * (lower ? 1.15 : 1.3);
    const range = maxV - minV || 1;
    const pct   = v => Math.max(0, Math.min(100, (v - minV) / range * 100)).toFixed(1);

    const p1 = pct(thr.t1), p2 = pct(thr.t2), p3 = pct(thr.t3);
    let zones = '';
    if (lower) {
        zones = `
            <div class="ev-thr-zone" style="left:0%;width:${p1}%;background:#dcfce7;border-radius:3px 0 0 3px"></div>
            <div class="ev-thr-zone" style="left:${p1}%;width:${(p2-p1).toFixed(1)}%;background:#fef9c3"></div>
            <div class="ev-thr-zone" style="left:${p2}%;width:${(p3-p2).toFixed(1)}%;background:#ffedd5"></div>
            <div class="ev-thr-zone" style="left:${p3}%;right:0%;background:#fee2e2;border-radius:0 3px 3px 0"></div>`;
    } else {
        zones = `
            <div class="ev-thr-zone" style="left:0%;width:${p3}%;background:#fee2e2;border-radius:3px 0 0 3px"></div>
            <div class="ev-thr-zone" style="left:${p3}%;width:${(p2-p3).toFixed(1)}%;background:#ffedd5"></div>
            <div class="ev-thr-zone" style="left:${p2}%;width:${(p1-p2).toFixed(1)}%;background:#fef9c3"></div>
            <div class="ev-thr-zone" style="left:${p1}%;right:0%;background:#dcfce7;border-radius:0 3px 3px 0"></div>`;
    }

    let needle = '';
    if (metric.realized !== null && metric.realized !== undefined) {
        const np = pct(metric.realized);
        const lvl = metric.level;
        const nc  = (LEVEL_CFG[lvl] ?? LEVEL_CFG.no_data).color;
        needle = `<div class="ev-thr-needle" style="left:${np}%;border-color:${nc}"></div>`;
    }

    const tickT1 = `<span style="left:${p1}%;transform:translateX(-50%)">${fmtValue(thr.t1, metric.unit)}</span>`;
    const tickT3 = `<span style="left:${p3}%;transform:translateX(-50%)">${fmtValue(thr.t3, metric.unit)}</span>`;

    return `<div class="ev-thr-bar">${zones}${needle}</div>
            <div class="ev-thr-ticks">${tickT1}${tickT3}</div>`;
}

/* ── Karta metryki ──────────────────────────────────────────────── */
function buildCard(metric) {
    const lvlCfg   = LEVEL_CFG[metric.level] ?? LEVEL_CFG.no_data;
    const srcLabel = metric.source ? (SOURCE_LABEL[metric.source] ?? metric.source) : null;
    const noTarget = !metric.target;
    const label    = METRIC_LABELS[metric.metric] ?? metric.label;

    const badge   = `<span class="ev-badge ${lvlCfg.cls}">${lvlCfg.label}</span>`;
    const srcChip = srcLabel ? `<span class="ev-source">${srcLabel}</span>` : '';

    let trendHtml = '';
    if (metric.trend && TREND_CFG[metric.trend]) {
        const t = TREND_CFG[metric.trend];
        const prevStr = fmtValue(metric.prev_realized, metric.unit);
        trendHtml = `<span class="${t.cls}" title="${t.label} (${prevStr})">${t.icon} ${prevStr}</span>`;
    }

    const realizedStr   = fmtValue(metric.realized, metric.unit);
    const realizedColor = lvlCfg.color;

    return `<div class="col-12 col-md-6 col-xl-4">
        <div class="ev-card${noTarget ? ' ev-no-target' : ''}">
            <div class="ev-metric-label">${label}</div>
            <div class="ev-realized" style="color:${realizedColor}">${realizedStr}</div>
            <div class="d-flex align-items-center gap-2 mt-1 mb-2">
                ${badge}${srcChip}
                <span class="ms-auto">${trendHtml}</span>
            </div>
            ${buildThresholdBar(metric)}
            ${metric.target ? `<div style="font-size:0.62rem;color:var(--ev-t3);margin-top:4px">${evTrans.thresholds_label}: ${fmtValue(metric.target.t1, metric.unit)} / ${fmtValue(metric.target.t2, metric.unit)} / ${fmtValue(metric.target.t3, metric.unit)}</div>` : ''}
        </div>
    </div>`;
}

/* ── Podział metryk na sekcje ──────────────────────────────────── */
// Kolejność w sekcji 1 jest wymuszona
const DIRECT_METRIC_ORDER = ['b2b_clients_count', 'avg_ticket', 'transactions_count'];
// Kolejność w sekcji 2
const INDIRECT_METRIC_ORDER = ['employee_cost_pct', 'material_cost_pct', 'shop_cost_pct', 'revenue', 'net_margin_pct'];

/* ── Renderowanie siatki ────────────────────────────────────────── */
function renderGrid(data) {
    const gridDirect   = document.getElementById('ev-grid-direct');
    const gridIndirect = document.getElementById('ev-grid-indirect');

    if (!data || !data.length) {
        gridDirect.innerHTML   = `<div class="col-12 text-center text-muted py-4">${evTrans.no_data_for_period}</div>`;
        gridIndirect.innerHTML = '';
        return;
    }

    // Indeks po kluczu metryki
    const byKey = {};
    for (const m of data) byKey[m.metric] = m;

    // Sekcja 1 — zależne od sklepu (wg zdefiniowanej kolejności)
    const directCards = DIRECT_METRIC_ORDER
        .filter(k => byKey[k])
        .map(k => buildCard(byKey[k]));
    // Metryki z API, których nie ma na żadnej liście → doklejamy do sekcji 1
    const knownKeys = [...DIRECT_METRIC_ORDER, ...INDIRECT_METRIC_ORDER];
    const unknownDirect = data
        .filter(m => !knownKeys.includes(m.metric))
        .map(m => buildCard(m));

    gridDirect.innerHTML = [...directCards, ...unknownDirect].join('') ||
        `<div class="col-12 text-muted" style="font-size:.8rem">${evTrans.no_data_for_period}</div>`;

    // Sekcja 2 — niezależne od sklepu (wg zdefiniowanej kolejności)
    const indirectCards = INDIRECT_METRIC_ORDER
        .filter(k => byKey[k])
        .map(k => buildCard(byKey[k]));

    gridIndirect.innerHTML = indirectCards.join('') ||
        `<div class="col-12 text-muted" style="font-size:.8rem">${evTrans.no_data_for_period}</div>`;
}

/* ── Ładowanie danych (AJAX) ────────────────────────────────────── */
async function loadData(year, month) {
    const spinner = document.getElementById('ev-spinner');
    spinner.classList.remove('d-none');
    try {
        const resp = await fetch(`${EV.root}/ajax/analysis/targets/evaluation?year=${year}&month=${month}`);
        if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
        return await resp.json();
    } catch (e) {
        console.error('Błąd ładowania ewaluacji:', e);
        return [];
    } finally {
        spinner.classList.add('d-none');
    }
}

/* ── CSV export ──────────────────────────────────────────────────── */
function exportCsv(data, year, month) {
    const pad = n => String(n).padStart(2, '0');
    const filename = `targety-${year}-${pad(month)}.csv`;
    const rows = [
        [evTrans.csv_metric, evTrans.csv_label, evTrans.csv_realized, evTrans.csv_level, evTrans.csv_threshold_good, evTrans.csv_threshold_medium, evTrans.csv_threshold_medium_bad, evTrans.csv_source, evTrans.csv_trend, evTrans.csv_prev_month],
    ];
    for (const m of data) {
        rows.push([
            m.metric,
            m.label,
            m.realized ?? '',
            m.level,
            m.target?.t1 ?? '',
            m.target?.t2 ?? '',
            m.target?.t3 ?? '',
            m.source ?? '',
            m.trend ?? '',
            m.prev_realized ?? '',
        ]);
    }
    const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
    const blob = new Blob(['\uFEFF' + csv], { type: 'text/csv;charset=utf-8;' });
    const url  = URL.createObjectURL(blob);
    const a    = document.createElement('a');
    a.href = url; a.download = filename; a.click();
    URL.revokeObjectURL(url);
}

/* ── Inicjalizacja ─────────────────────────────────────────────── */
let currentData = EV.data;

document.getElementById('ev-apply').addEventListener('click', async () => {
    const year  = parseInt(document.getElementById('ev-year').value);
    const month = parseInt(document.getElementById('ev-month').value);
    const skeletonCol = `<div class="col-12 col-md-6 col-xl-4"><div class="ev-card"><div class="ev-skeleton" style="height:100px"></div></div></div>`;
    document.getElementById('ev-grid-direct').innerHTML   = Array(3).fill(skeletonCol).join('');
    document.getElementById('ev-grid-indirect').innerHTML = Array(5).fill(skeletonCol).join('');
    currentData = await loadData(year, month);
    renderGrid(currentData);
});

document.getElementById('ev-export-csv').addEventListener('click', () => {
    const year  = parseInt(document.getElementById('ev-year').value);
    const month = parseInt(document.getElementById('ev-month').value);
    exportCsv(currentData, year, month);
});

document.addEventListener('DOMContentLoaded', () => {
    renderGrid(currentData);
});
</script>
{% endblock %}