@extends('layouts.app')

@section('content')
@include('partials.unified-management-style')
<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
 integrity="sha256-XQoYMqMTK8LvdxXYG3nZ0f+1p+0h0Yv2aWv+G7k0/5Q=" crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
 integrity="sha256-o9N1j8kT1fQtaTgGqXb6Gq94hQ5kHf4zv+f0s+8H2zI=" crossorigin=""></script>

<link rel="stylesheet" href="{{ asset('css/pages/dashboard.css') }}">
<style>
  .dashboard-theme { font-family: 'Tajawal', sans-serif !important; direction: rtl !important; }

  .dashboard-theme .page-header {
    position: relative;
    border-radius: var(--no-radius-lg);
    padding: 24px;
    margin-bottom: 18px;
    background: var(--no-primary);
    color: var(--no-white);
    border: 1px solid rgba(var(--no-primary-rgb), 0.08);
    box-shadow: var(--no-shadow-soft);
  }

  .dashboard-theme .page-header > * { position: relative; z-index: 2; }

  .dashboard-theme .page-header h1 {
    font-size: 1.65rem !important;
    font-weight: 800 !important;
    margin: 0 0 6px !important;
    color: var(--no-white) !important;
    display:flex; align-items:center; gap:10px;
  }

  .dashboard-theme .page-header p { color: rgba(255,255,255,0.9); margin: 0 0 10px; font-weight:600; }

  .dashboard-theme .header-badges { display:flex; gap:10px; flex-wrap:wrap; }
  .dashboard-theme .header-badges .badge { background: rgba(255,255,255,0.06); color: var(--no-white); border: 1px solid rgba(255,255,255,0.08); font-weight:700; }

  .dashboard-theme .filters-card { border-radius: var(--no-radius-md); background: var(--no-white); border:1px solid rgba(var(--no-primary-rgb),0.06); box-shadow: var(--no-shadow-soft); }
  .dashboard-theme .filters-card .form-label { color: var(--no-primary); font-weight:700; }
  .dashboard-theme .filters-card .form-control, .dashboard-theme .filters-card .form-select { border-radius:10px; border:1px solid rgba(var(--no-primary-rgb),0.06); background:#fff; }
  .dashboard-theme .filters-card .form-control:focus, .dashboard-theme .filters-card .form-select:focus { border-color: var(--no-primary); box-shadow: 0 0 0 0.12rem rgba(var(--no-primary-rgb),0.06); }
  .dashboard-theme .filters-card .btn-filter-apply { background: var(--no-secondary); color:#fff; border:none; }
  .dashboard-theme .filters-card .btn-filter-reset { background: transparent; color: var(--no-primary); border:1px solid rgba(var(--no-primary-rgb),0.06); }

  .dashboard-theme .chart-card .card-title { padding:.35rem .65rem; border-radius:8px; background: rgba(var(--no-primary-rgb),0.06); color:var(--no-primary); font-weight:700; display:inline-block; }
</style>

<div class="dashboard-theme">
<div class="index-page-header" dir="rtl" lang="ar">
  <h1><i class="bi bi-speedometer2 ms-2"></i>لوحة التحكم</h1>
   <p>نظام رصد حالات العنف · مؤشرات الأداء الرئيسية</p>
  <div class="header-badges">
    <span class="badge">المسار: القيادة</span>
    <span class="badge">نمط: مؤشرات</span>
  </div>
</div>

  <!-- ===== filters card ===== -->
  <div class="card filters-card shadow-sm mb-3 w-100" dir="rtl">
    <div class="card-header d-flex align-items-center justify-content-between py-2 px-3">
      <div><i class="bi bi-funnel-fill ms-1"></i> فلترة لوحة التحكم</div>
      {{-- <small class="text-muted">تحسين عرض المؤشرات حسب النطاق</small> --}}
    </div>

    <div class="card-body py-3">
    <!-- Use a responsive row; controls become full-width on xs -->
    <div class="row g-2 align-items-end">
      <!-- Gouvernorat -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <label class="form-label small mb-1">الولاية</label>
        <select id="filter-gouvernorat" class="form-select form-select-sm w-100">
          <option value="">--- كل الولايات ---</option>
        </select>
      </div>

      <!-- Delegation -->
      <div class="col-12 col-sm-6 col-md-4 col-lg-3">
        <label class="form-label small mb-1">العمادة / المعتمدية</label>
        <select id="filter-delegation" class="form-select form-select-sm w-100">
          <option value="">--- كل المعتمديات ---</option>
        </select>
      </div>

      <!-- Date from -->
        <div class="col-12 col-sm-8 col-md-4 col-lg-3">
          <div class="date-pair d-flex gap-2" dir="rtl">
               <div class="date-field flex-fill">
                <label class="form-label  mb-1">من تاريخ</label>
                <input id="filter-date-from" type="date" class="form-control form-control-sm w-100" />
               </div>
               <div class="date-field flex-fill">
               <label class="form-label  mb-1">إلى تاريخ</label>
               <input id="filter-date-to" type="date" class="form-control form-control-sm w-100" />
               </div>
          </div>
       </div>

      <!-- Buttons: on xs they take full width and stack, on sm+ they sit inline -->
      <div class="col-12 col-sm-auto d-flex gap-2 justify-content-sm-end">
        <button id="btn-reset-filters" class="btn btn-filter-reset btn-sm w-100 w-sm-auto">إعادة تعيين</button>
        <button id="btn-apply-filters" class="btn btn-filter-apply btn-sm d-flex align-items-center w-100 w-sm-auto">تطبيق</button>
      </div>
    </div>
    </div>
  </div>


    <div class="row g-3" id="kpi-cards" role="region" aria-live="polite" aria-label="KPI cards">

    </div>


<div class="row mt-4 g-3">



  <!-- HORAIRE / نِسَب الفترات -->
  <div class="col-md-6">
    <div class="card chart-card p-3">
      <h5 class="card-title">نسب حالات العنف حسب الفترات الزمنية</h5>
      <div class="card-chart">
        <canvas id="chart-horaire"></canvas>
      </div>
      <div id="legend-horaire" class="chart-legend mt-2"></div>
    </div>
  </div>
  <!-- MAP -->

  <div class="col-md-6">
    <div class="card chart-card p-3">
      <h5 class="card-title">الضحايا حسب الولاية</h5>

      <!-- Simplified list-based visualization (no search / no top-N / no refresh, no footer) -->
      <div class="card-chart">
        <div id="gouv-list-container" dir="rtl">
          <div id="gouv-list" class="gouv-list" aria-live="polite"></div>
        </div>
      </div>

      <div id="legend-gouvernorat" class="chart-legend mt-2"></div>
    </div>
  </div>

  <!-- AGRESSEUR AGE -->
  <div class="col-md-6">
    <div class="card chart-card p-3">
      <h5 class="card-title">الضحايا حسب نوع اليوم</h5>

      <div class="card-chart">
        <canvas id="chart-agresseur-age"></canvas>
      </div>
      <div id="legend-agresseur-age" class="chart-legend mt-2"></div>
    </div>
  </div>

  <!-- VICTIMES NIVEAU EDU -->
  <div class="col-md-6">
    <div class="card chart-card p-3">
      <h5 class="card-title">الضحايا حسب مستوى التعليم</h5>
      <div class="card-chart">
        <canvas id="chart-victimes-niveau-edu"></canvas>
      </div>
      <div id="legend-victimes-niveau-edu" class="chart-legend mt-2"></div>
    </div>
  </div>

  <!-- TOP TYPES (odd item) — centered on md+ -->
  <div class="col-md-6">
    <div class="card chart-card p-3">
    <h5 class="card-title">توزيع العنف حسب الموقع</h5>


      <div class="card-chart">
        <canvas id="chart-types-violence"></canvas>
      </div>
      <div id="legend-types-violence" class="chart-legend mt-2"></div>
    </div>
  </div>
  <div class="col-md-6">
  <div class="card chart-card p-3">
    <h5 class="card-title">الضحايا حسب الوضعية المهنية</h5>
    <div class="card-chart">
      <canvas id="chart-situation-pro"></canvas>
    </div>
    <div id="legend-situation-pro" class="chart-legend mt-2"></div>
  </div>
</div>
</div>
<!-- ===== end charts grid ===== -->

<!-- ===== END replacement ===== -->

<!-- ===== END replacement ===== -->





{{-- تحسينات CSS بصرية + ثبات أحجام البطاقات --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.min.js"></script>


{{-- مكتبات --}}
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>

(async function(){


const KPI_PALETTE = [
  '#1A237E', '#64B5F6', '#FF7043', '#1A237E', '#64B5F6', '#FF7043', '#1A237E'
];

const KPI_ICON_MAP = {
  total_signalements: 'bi-file-earmark-text',
  total_victimes: 'bi-person-fill',
  signalements_par_source: 'bi-telephone',
  signalements_par_sujet: 'bi-tag',
  signalements_par_orientation: 'bi-arrow-right',
  taux_interventions_immediates: 'bi-lightning-charge',
  taux_suivi_terrain: 'bi-geo-alt',
  signalements_errones: 'bi-exclamation-circle',
  messages: 'bi-envelope',
  incidents: 'bi-bug-fill',
  gouvernorat: 'bi-geo-alt',
  default: 'bi-bar-chart-fill'
};

const DELEGATIONS_JSON_URL = '/data/tunisia_delegations.json';

function normKey(k){ return String(k || '').toLowerCase().trim(); }
function safeNumber(v){ return (v === null || v === undefined || v === '') ? 0 : Number(v); }

function hexToRgb(hex){
  hex = (hex || '').replace('#','');
  if(hex.length === 3) hex = hex.split('').map(c=>c+c).join('');
  const num = parseInt(hex || '000000',16) || 0;
  return { r: (num>>16)&255, g: (num>>8)&255, b: num&255 };
}
function hexToRgba(hex, alpha = 0.6){
  const rgb = hexToRgb(hex);
  return `rgba(${rgb.r},${rgb.g},${rgb.b},${alpha})`;
}
function darkenRgbObj(rgb, amount = 0.15){
  const clamp = v => Math.max(0, Math.min(255, Math.round(v)));
  return { r: clamp(rgb.r * (1 - amount)), g: clamp(rgb.g * (1 - amount)), b: clamp(rgb.b * (1 - amount)) };
}
function darkenHexToRgba(hex, amount = 0.15, alpha = 0.95){
  const base = hexToRgb(hex);
  const d = darkenRgbObj(base, amount);
  return `rgba(${d.r},${d.g},${d.b},${alpha})`;
}
function hashCode(str){ let h=0; for(let i=0;i<str.length;i++){ h=((h<<5)-h)+str.charCodeAt(i); h|=0; } return Math.abs(h); }

function iconForKey(key){
  const n = normKey(key);
  if(KPI_ICON_MAP[n]) return KPI_ICON_MAP[n];
  for(const k in KPI_ICON_MAP){
    if(k === 'default') continue;
    if(n.includes(k)) return KPI_ICON_MAP[k];
  }
  return KPI_ICON_MAP.default;
}

/* debounce helper to avoid spamming the server when controls change rapidly */
function debounce(fn, wait = 250){
  let t = null;
  return function(...args){
    clearTimeout(t);
    t = setTimeout(() => fn.apply(this, args), wait);
  };
}

/* normalize various server shapes into array-of-objects */
  function normalizeArray(x){
    if(!x) return [];
    if(Array.isArray(x)) return x;
    if(typeof x === 'object'){
      const vals = Object.values(x);
      if(vals.length && vals.every(v=>typeof v === 'object')) return vals;
      // primitive map -> convert
      if(vals.length && vals.every(v=>['string','number','boolean'].includes(typeof v))) {
        return Object.keys(x).map(k=>({ label: k, value: x[k] }));
      }
    }
    return [];
  }

  function mapLabelValue(arr){
    const list = normalizeArray(arr);
    if(!list.length) return { labels: [], values: [] };
    const normalized = list.map(it => {
      if(it === null || it === undefined) return { label: '', value: 0 };
      if(typeof it === 'object') {
        const label = (it.label ?? it.name ?? it.libelle ?? it.heure_ar ?? it.age ?? it.id ?? '');
        const value = Number(it.value ?? it.count ?? it.total ?? it.nb ?? 0);
        return { label: String(label), value };
      }
      return { label: String(it), value: 0 };
    });
    return { labels: normalized.map(x=>x.label), values: normalized.map(x=>x.value) };
  }


/* tiny legend renderer used for Chart.js charts */
function renderLegend(chart, containerId){
    try {
        const container = document.getElementById(containerId);
        if(!container) return;
        container.innerHTML = '';
        const labels = chart.data.labels || [];
        const ds = chart.data.datasets && chart.data.datasets[0] ? chart.data.datasets[0] : null;
        const bg = ds ? ds.backgroundColor : null;
        if (Array.isArray(bg)){
            labels.forEach((lab, i) => {
                const color = bg[i] || '#ccc';
                const item = document.createElement('div'); item.className = 'legend-item';
                item.innerHTML = `<span class="legend-swatch" style="background:${color}"></span><span>${lab}</span>`;
                container.appendChild(item);
            });
        } else {
            const color = bg || (chart.options && chart.options.borderColor) || '#ccc';
            const item = document.createElement('div'); item.className = 'legend-item';
            item.innerHTML = `<span class="legend-swatch" style="background:${color}"></span><span>${ds?.label ?? 'Series'}</span>`;
            container.appendChild(item);
        }
    } catch(e){ console.warn('legend render failed', e); }
}

/* Sparkline + chart helpers */
const chartStore = {};
function createSparkline(key, values){
  const id = `spark-${key}`;
  const canvas = document.getElementById(id);
  if(!canvas) return;
  const ctx = canvas.getContext('2d');
  const stroke = KPI_PALETTE[hashCode(key) % KPI_PALETTE.length];

  try{ if(chartStore[id]) chartStore[id].destroy(); }catch(e){}
  chartStore[id] = new Chart(ctx, {
    type: 'line',
    data: { labels: values.map((_,i)=>i+1), datasets:[{ data: values, fill:false, tension:0.3, borderWidth:2, borderColor: stroke, pointRadius:0 }]},
    options:{ responsive:true, maintainAspectRatio:false, scales:{x:{display:false}, y:{display:false}}, plugins:{legend:{display:false}, tooltip:{enabled:false}} }
  });
}
function createChart(key, cfg){
    if(chartStore[key]){ try{ chartStore[key].destroy(); }catch(e){} }
    chartStore[key] = new Chart(cfg.ctx, cfg.config);
    return chartStore[key];
}

/* ---------- KPI cards rendering (kept logic as-is) ---------- */
function makeCardHTML(key, title, main, sub = '', abs = '', index = 0){
  const icon = iconForKey(key);
  const leftClass = 'kpi-left colorful';

  // Theme is now managed by global CSS tokens (no per-card color class)
  const colorClass = '';

  return `
<div class="col-12 col-md-6 col-lg-4">
      <div class="card kpi-card ${colorClass} shadow-sm h-100">
        <div class="card-body">
          <div class="${leftClass}">
            <i class="bi ${icon}" aria-hidden="true"></i>
          </div>
          <div class="kpi-content">
            <div class="kpi-title">${title}</div>
            <div class="d-flex align-items-center justify-content-between" style="gap:12px;">
              <div class="kpi-info-wrapper">
                <div class="kpi-value">${main}</div>
                <div class="kpi-sub">${sub}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  `;
}

/* renderCardsFromData preserved (unchanged logic, small defensive checks) */
function renderCardsFromData(data){
    const container = document.getElementById('kpi-cards');
    if(!container) return;
    container.innerHTML = '';

    let baseTotal = 0;
    if (data && (typeof data.total_signalements === 'number')) {
        baseTotal = Number(data.total_signalements);
    } else {
        const possibleArrays = ['signalements_par_source','signalements_par_sujet','signalements_par_orientation','top_types_violence','victimes_par_niveau_edu','agresseurs_par_age'];
        for (const k of possibleArrays) {
            const v = data[k];
            if (!v) continue;
            if (Array.isArray(v) && v.length) {
                baseTotal += v.reduce((acc, it) => acc + (Number(it.value ?? 0)), 0);
            } else if (typeof v === 'object' && (v.total || v.nb || v.count)) {
                baseTotal += Number(v.total ?? v.nb ?? v.count);
            }
        }
    }
    baseTotal = baseTotal || 0;

    const cards = [
      { k: 'total_signalements', title: 'إجمالي البلاغات' },
      { k: 'signalements_par_source', title: 'حسب مصدر البلاغ', fallbackCount: true },
      { k: 'signalements_par_sujet', title: 'حسب موضوع المكالمة', fallbackCount: true },
      { k: 'signalements_par_orientation', title: 'التوجيهات للمؤسسات', fallbackCount: true },
      { k: 'taux_interventions_immediates', title: 'نسبة التدخلات العاجلة', isPct: true },
      { k: 'taux_suivi_terrain', title: 'نسبة المتابعة الميدانية', isPct: true },
    ];

  cards.forEach((c, index) => {
        const key = c.k;
        const val = data[key];
        const arr = normalizeArray(val);
        let main = '';
        let sub = '';
        let absStr = '';

        if (c.isPct && val && typeof val === 'object') {
            const realised = Number(val.realises ?? val.immediates ?? val.immediate ?? val.ok ?? val.within_48h ?? val.immediates_count ?? 0);
            const total = Number(val.total ?? val.total_signalements ?? baseTotal ?? 0);
            let pct = (typeof val.pct === 'number') ? Number(val.pct) : (total ? (realised / total * 100) : 0);
            main = `${(+pct.toFixed(2))}%`;
            sub = `${realised} / ${total}`;
            absStr = `${realised}-${total}`;
        } else if (c.fallbackCount) {
            if (Array.isArray(val) && val.length) {
                const mapped = mapLabelValue(val);
                const topVal = mapped.values[0] ?? 0;
                const topLabel = mapped.labels[0] ?? '';
                const sumVals = mapped.values.reduce((s,x) => s + Number(x || 0), 0) || 0;
                const pct = sumVals ? +(topVal / sumVals * 100).toFixed(1) : 0;
                main = `${pct}%`;
                sub = `${topLabel}`;
                absStr = `${topVal}-${sumVals}`;
            } else {
                const num = (typeof val === 'number') ? val : (arr && arr.length ? arr.length : (val ?? 0));
                const pct = baseTotal ? +(Number(num) / baseTotal * 100).toFixed(1) : 0;
                main = `${pct}%`;
                sub = `${num} عناصر`;
                absStr = baseTotal ? `${num}-${baseTotal}` : `${num}-0`;
            }
        } else {
            if (typeof val === 'number') {
                if (key === 'total_signalements') {
                    main = baseTotal ? `${((Number(val)/baseTotal)*100).toFixed(1)}%` : '100%';
                    sub = `${val} إجمالي`;
                    absStr = `${val}-${baseTotal || val}`;
                } else if (baseTotal) {
                    main = `${((Number(val)/baseTotal)*100).toFixed(1)}%`;
                    sub = `${val} عناصر`;
                    absStr = `${val}-${baseTotal}`;
                } else {
                    main = `${Number(val)}`;
                    sub = `عناصر`;
                    absStr = `${val}-0`;
                }
            } else if (typeof val === 'object' && val !== null && ('total' in val || 'realises' in val || 'within_48h' in val || 'immediates' in val)) {
                const realised = Number(val.realises ?? val.immediates ?? val.immediate ?? val.ok ?? val.within_48h ?? 0);
                const total = Number(val.total ?? baseTotal ?? 0);
                const pct = (typeof val.pct === 'number') ? Number(val.pct) : (total ? (realised / total * 100) : 0);
                main = `${(+pct.toFixed(2))}%`;
                sub = `${realised} / ${total}`;
                absStr = `${realised}-${total}`;
            } else {
                main = (typeof val === 'string' || typeof val === 'number') ? String(val) : '-';
                sub = '';
                absStr = `0-${baseTotal || 0}`;
            }
        }

        if (key === 'victimes_par_gouvernorat' || key === 'gouvernorat') {
            const fallbackCount = Array.isArray(val) ? (val.length || 0) : (typeof val === 'number' ? val : 0);
            main = `${fallbackCount}`;
            sub = 'مواقع';
            absStr = `${fallbackCount}-${fallbackCount}`;
        }

  container.insertAdjacentHTML(
  'beforeend',
  makeCardHTML(key, c.title, main, sub, absStr, index)
);
        const trend = getTrendFromVal(key, val, data);
        createSparkline(key, trend);
    });
}

/* trend heuristic preserved */
function getTrendFromVal(key, val, dataRoot){
    const candidates = [
        dataRoot?.[`${key}_trend`],
        val?.trend,
        val?.series,
        Array.isArray(val) ? val.map(i => (typeof i === 'number' ? i : (i.value ?? i.count ?? 0))) : (Array.isArray(normalizeArray(val)) ? normalizeArray(val).map(i => safeNumber(i.value ?? i.count ?? 0)) : null)
    ];
    for (const c of candidates){ if (Array.isArray(c) && c.length) return c.map(x => safeNumber(x)); }
    const mainNum = (typeof val === 'number') ? val : (val?.value ?? val?.count ?? null);
    if (mainNum !== null && !isNaN(Number(mainNum))){
        const n = Number(mainNum);
        return [Math.round(n*0.85), Math.round(n*0.95), n, Math.round(n*1.05), Math.round(n*1.12)];
    }
    return [0,1,0,1,0];
}

/* ---------- Charts rendering (kept core logic) ---------- */
function renderCharts(data){
  function paletteFor(n, alpha = 0.6){
    const out = [];
    for(let i = 0; i < n; i++) out.push(hexToRgba(KPI_PALETTE[i % KPI_PALETTE.length], alpha));
    return out;
  }
  function borderPaletteFor(n, darkAmount = 0.15, alpha = 0.95){
    const out = [];
    for(let i = 0; i < n; i++) out.push(darkenHexToRgba(KPI_PALETTE[i % KPI_PALETTE.length], darkAmount, alpha));
    return out;
  }

  // debug
  console.debug('renderCharts received data keys:', Object.keys(data || {}));

  // types violence bar (horizontal)
  // violences by lieu (respect filters)
const t = mapLabelValue(data.violences_par_lieu ?? []);

  const elTypes = document.getElementById('chart-types-violence');
  if (elTypes) {
    const ctxT = elTypes.getContext('2d');
    if (chartStore['types_violence']) try { chartStore['types_violence'].destroy(); } catch(e){}
    chartStore['types_violence'] = new Chart(ctxT, {
      type: 'bar',
      data: {
        labels: t.labels,
        datasets: [{
          label: 'حالات',
          data: t.values,
          backgroundColor: paletteFor(t.values.length, 0.75),
          borderColor: borderPaletteFor(t.values.length, 0.18, 0.95),
          borderWidth: 1,
          borderRadius: 6,
          barPercentage: 0.9,
          categoryPercentage: 0.9
        }]
      },
      options: {
        indexAxis: 'y',
        responsive: true,
        maintainAspectRatio: false,
        scales: { x: { beginAtZero: true, ticks: { precision: 0 } }, y: { ticks: { autoSkip: false } } },
        plugins: {
          legend: { display: false },
          tooltip: { callbacks: { label: function(ctx){ const val = ctx.raw ?? ctx.parsed.x ?? 0; return `${val} حالات`; } } }
        },
        layout: { padding: 8 }
      }
    });
    renderLegend(chartStore['types_violence'], 'legend-types-violence');
  }

  // map
  // replace map call:
  renderGouvList(data.victimes_par_gouvernorat ?? []);
/* ---------- Gouvernorat ranked list visualization (non-Chart) - simplified (no footer, no % displayed) ---------- */
async function renderGouvList(rawGovData){
  try {
    const container = document.getElementById('gouv-list');
    if(!container) return;

    // normalize incoming data into labels/values
    const mv = mapLabelValue(rawGovData || []);
    const items = (mv.labels || []).map((lab, i) => ({ label: String(lab || '').trim(), value: Number(mv.values?.[i] ?? 0) }));

    // fallback: if nothing from mapLabelValue, try normalizeArray
    if(!items.length){
      const normalized = normalizeArray(rawGovData || []);
      normalized.forEach(it => {
        const lab = (it.label ?? it.name ?? it.nom ?? it.libelle ?? '');
        const val = Number(it.value ?? it.count ?? it.total ?? 0);
        items.push({ label: String(lab).trim(), value: val });
      });
    }

    // remove empty labels
    const cleaned = items.filter(it => (it.label || '') !== '');

    if(!cleaned.length){
      container.innerHTML = '<div class="p-3 text-center text-muted">لا توجد بيانات للولايات لعرضها.</div>';
      return;
    }

    // sort desc
    cleaned.sort((a,b) => Number(b.value) - Number(a.value));

    // fetch delegations JSON once (cache on window to avoid refetch)
    let delegJson = window._delegationsCache || null;
    if(!delegJson){
      try {
        const r = await fetch(DELEGATIONS_JSON_URL);
        if(r.ok) delegJson = await r.json();
        else delegJson = [];
      } catch(e) { delegJson = []; }
      window._delegationsCache = delegJson;
    }

    // build lookup map: possible normalized keys -> { nameAr, id }
    const norm = s => (String(s||'').trim().toUpperCase().replace(/\s+/g,' '));
    const govLookup = {};
    if(Array.isArray(delegJson)){
      delegJson.forEach(g => {
        const id = (g.id ?? g.ID ?? g.id_gouver ?? g.id_gouvernorat ?? g.id_gouv ?? g.Value ?? g.value ?? g.code ?? '') || '';
        const nameAr = String(g.NameAr ?? g.nom_ar ?? '').trim();
        const keys = [g.Name, g.NameAr, g.Value, g.nom, g.nom_ar, g.label, g.libelle].map(x => norm(x)).filter(Boolean);
        keys.forEach(k => {
          if(!govLookup[k]) govLookup[k] = { nameAr, id, raw: g };
        });
        if(id) govLookup[String(id).trim().toUpperCase()] = govLookup[String(id).trim().toUpperCase()] || { nameAr, id, raw: g };
      });
    }

    // orange shades generator based on KPI_PALETTE[0]
    function orangeShades(n, alpha = 0.95){
      const base = KPI_PALETTE[0] || '#FF8A00';
      const out = [];
      if(n <= 0) return out;
      for(let i = 0; i < n; i++){
        // amount ranges from 0.03 to 0.38 (lighter -> darker)
        const amount = 0.03 + (i / Math.max(1, n - 1)) * 0.35;
        out.push(darkenHexToRgba(base, amount, alpha));
      }
      return out;
    }

    const shades = orangeShades(cleaned.length, 0.95);

    // build HTML: simple static rows (no percent, no footer, no search/top-N)
    const rows = cleaned.map((it, idx) => {
      const normalizedLabel = norm(it.label);
      const found = govLookup[normalizedLabel] || null;
      const displayName = (found && found.nameAr) ? (found.nameAr || it.label) : it.label;
      const bgColor = shades[idx] || 'rgba(255,138,0,0.9)';

      return `<div class="gouv-item d-flex align-items-center justify-content-between" role="button" tabindex="0" title="">
                <div class="gouv-left d-flex align-items-center" style="min-width:35%;">
                  <div class="gouv-rank">${idx+1}</div>
                  <div class="gouv-name">${escapeHtml(displayName)}</div>
                </div>
                <div class="gouv-mid flex-grow-1 mx-2">
                  <div class="gouv-bar-outer">
                    <div class="gouv-bar-inner" style="width:${(maxWidthPercentage(it.value, cleaned) || 0)}%; background:${bgColor};"></div>
                  </div>
                </div>
                <div class="gouv-right text-end small" style="min-width:100px;">
                  <div><strong>${Number(it.value)}</strong> ضحية</div>
                </div>
              </div>`;
    }).join('');

    container.innerHTML = rows || '<div class="p-2 text-muted small">لا توجد نتائج مطابقة.</div>';

    // clear legend area (keep map legend separate)
    const legendContainer = document.getElementById('legend-gouvernorat');
    if(legendContainer) legendContainer.innerHTML = '';

  } catch (err){
    console.error('renderGouvList error', err);
    const container = document.getElementById('gouv-list');
    if(container) container.innerHTML = `<div class="p-3 text-danger">خطأ في عرض القايمة: ${escapeHtml(err.message || String(err))}</div>`;
  }

  // helper: small html escape to avoid injections
  function escapeHtml(str){
    return String(str || '').replace(/[&<>"'`]/g, function(m){ return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;',"`":'&#96;'})[m]; });
  }

  // compute width percentage relative to the max value in the list (safe)
  function maxWidthPercentage(value, list){
    try {
      const maxVal = Math.max(...(list.map(x => Number(x.value || 0))));
      if(!maxVal || maxVal === 0) return 0;
      return Math.round((Number(value || 0) / maxVal) * 100);
    } catch(e) { return 0; }
  }
}
// victimes by professional situation (new)
// victimes by professional situation (polar area — simple & distinct)
(function(){
  const spRaw = data.victimes_par_situation_pro ?? [];
  const sp = mapLabelValue(spRaw);
  const elSp = document.getElementById('chart-situation-pro');
  if (!elSp) return;
  const ctxSp = elSp.getContext('2d');
  if (chartStore['situation_pro']) try { chartStore['situation_pro'].destroy(); } catch(e){}

  // use polarArea for a different, simple visual
  chartStore['situation_pro'] = new Chart(ctxSp, {
    type: 'polarArea',
    data: {
      labels: sp.labels,
      datasets: [{
        label: 'ضحايا',
        data: sp.values,
        backgroundColor: paletteFor(sp.values.length, 0.75),
        borderColor: borderPaletteFor(sp.values.length, 0.18, 0.95),
        borderWidth: 1
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        r: {
          beginAtZero: true,
          ticks: { precision: 0 }
        }
      },
      plugins: {
        legend: { display: false },
        tooltip: {
          callbacks: {
            label: function(ctx){
              const v = ctx.raw ?? 0;
              const lbl = ctx.label ?? '';
              return `${lbl} — ${v} ضحية`;
            }
          }
        }
      },
      layout: { padding: 6 }
    }
  });

  // reuse your legend helper — it understands dataset backgroundColor arrays
  renderLegend(chartStore['situation_pro'], 'legend-situation-pro');
})();




  // agresseur age donut
// --- REMPLACER l'ancien "agresseur age donut" par ceci ---
const tj = mapLabelValue(data.victimes_par_type_jour ?? []);
const elTj = document.getElementById('chart-agresseur-age'); // conserve id existant pour éviter changements markup
if (elTj) {
  const chartTj = createChart('victimes_type_jour', {
    ctx: elTj.getContext('2d'),
    config: {
      type: 'doughnut',
      data: {
        labels: tj.labels,
        datasets: [{
          data: tj.values,
          backgroundColor: paletteFor(tj.values.length, 0.6),
          borderColor: borderPaletteFor(tj.values.length, 0.18, 0.95),
          borderWidth: 1
        }]
      },
      options: {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
          legend: { display: false },
          tooltip: {
            callbacks: {
              label: function(ctx) {
                const v = ctx.raw ?? 0;
                const label = ctx.label ?? '';
                return `${label} — ${v} حالات`;
              }
            }
          }
        }
      }
    }
  });
  renderLegend(chartTj, 'legend-agresseur-age');
}

  // victimes niveau edu line
  (function(){
    const eduDataRaw = data.victimes_par_niveau_edu ?? [];
    const edu = mapLabelValue(eduDataRaw);
    const elEdu = document.getElementById('chart-victimes-niveau-edu');
    if (!elEdu) return;
    const ctxEdu = elEdu.getContext('2d');
    const baseColor = hexToRgba(KPI_PALETTE[2], 0.85);
    const borderColor = darkenHexToRgba(KPI_PALETTE[2], 0.20, 0.95);
    if (chartStore['victimes_edu']) try { chartStore['victimes_edu'].destroy(); } catch(e){}
    chartStore['victimes_edu'] = new Chart(ctxEdu, {
        type: 'line',
        data: {
            labels: edu.labels,
            datasets: [{
                label: 'عدد الضحايا',
                data: edu.values,
                borderColor: borderColor,
                backgroundColor: baseColor,
                pointBackgroundColor: borderColor,
                pointRadius: 4,
                pointHoverRadius: 6,
                fill: false,
                tension: 0.35,
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            animation: { duration: 1200, easing: 'easeOutQuart' },
            scales: { y: { beginAtZero: true }, x: { ticks: { autoSkip: false } } },
            plugins: { legend: { display: false }, tooltip: { callbacks: { label: ctx => `${ctx.raw} ضحية` } } }
        }
    });
    renderLegend(chartStore['victimes_edu'], 'legend-victimes-niveau-edu');
  })();

  // horaire (time slices) robust replacement
  (function(){
    const items = normalizeArray(data.victimes_par_tranche_horaire ?? []);
    const tpHeures = Array.isArray(data.tp_heure_violence) ? data.tp_heure_violence : [];

    const heureMap = {};
    const labelToHeure = {};
    tpHeures.forEach(h => {
        const idKey = String(h.id ?? h.ID ?? h.id_heure ?? '');
        const text = String(h.heure_ar ?? h.label ?? h.libelle ?? h.heure_fr ?? '').trim();
        if (idKey) heureMap[idKey] = text;
        if (text) labelToHeure[text] = text;
        if (h.label) labelToHeure[String(h.label)] = text;
        if (h.heure_fr) labelToHeure[String(h.heure_fr)] = text;
    });

    const ids = items.map(it => String(it.id ?? it.id_heure ?? it.value?.id ?? '').trim());
    const fallbackLabels = items.map(it => String(it.label ?? it.libelle ?? it.name ?? it.heure_ar ?? it.heure_fr ?? '').trim());
    const rawCounts = items.map(it => Number(it.value ?? it.count ?? it.total ?? 0));
    const totalCounts = rawCounts.reduce((a,b)=>a+b,0);
    const percentages = rawCounts.map(v => totalCounts ? +(v/totalCounts*100).toFixed(1) : 0);

    const mappedLabels = ids.map((id, i) => {
        if (id && heureMap[id]) return heureMap[id];
        if (fallbackLabels[i]) return fallbackLabels[i];
        const maybeLabel = String(items[i]?.label ?? '').trim();
        if (maybeLabel && labelToHeure[maybeLabel]) return labelToHeure[maybeLabel];
        return id || `#${i+1}`;
    });

    const elHoraire = document.getElementById('chart-horaire');
    if (!elHoraire) return;
    const ctxH = elHoraire.getContext('2d');
    if (chartStore['horaire']) try { chartStore['horaire'].destroy(); } catch(e){}
    chartStore['horaire'] = new Chart(ctxH, {
        type: 'bar',
        data: {
            labels: mappedLabels,
            datasets: [{
                label: 'النسبة %',
                data: percentages,
                backgroundColor: (function(){ const out=[]; for(let i=0;i<percentages.length;i++) out.push(hexToRgba(KPI_PALETTE[i % KPI_PALETTE.length], 0.6)); return out; })(),
                borderColor: (function(){ const out=[]; for(let i=0;i<percentages.length;i++) out.push(hexToRgba(KPI_PALETTE[i % KPI_PALETTE.length], 0.95)); return out; })(),
                borderWidth: 1,
                borderRadius: 6,
                barPercentage: 0.7,
                categoryPercentage: 0.8
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: { beginAtZero: true, max: 100, ticks: { callback: v => v + '%' }, title: { display:true, text:'النسبة (%)' } },
                x: { ticks: { autoSkip:false } }
            },
            plugins: {
                legend: { display:false },
                tooltip: {
                    callbacks: {
                        label: function(ctx){
                            const idx = ctx.dataIndex;
                            const pct = ctx.dataset.data[idx];
                            const count = rawCounts[idx] ?? 0;
                            return `${pct}% (${count} حالات)`;
                        }
                    }
                }
            }
        }
    });

    // render horaire legend
    (function renderHoraireLegend(){
        const container = document.getElementById('legend-horaire');
        if(!container) return;
        container.innerHTML = '';
        const chart = chartStore['horaire'];
        if(!chart) return;
        const colors = chart.data.datasets[0].backgroundColor || [];
        for (let i = 0; i < chart.data.labels.length; i++) {
            const color = Array.isArray(colors) ? (colors[i] || '#ccc') : (colors || '#ccc');
            const id = ids[i] || '';
            const chartLabel = String(chart.data.labels[i] ?? '').trim();
            const fallback = fallbackLabels[i] || '';
            let displayLabel = '';
            if (id && heureMap[id]) displayLabel = heureMap[id];
            else if (chartLabel && labelToHeure[chartLabel]) displayLabel = labelToHeure[chartLabel];
            else if (fallback && labelToHeure[fallback]) displayLabel = labelToHeure[fallback];
            else {
                const found = tpHeures.find(h => {
                    const hid = String(h.id ?? '').trim();
                    const har = String(h.heure_ar ?? '').trim();
                    const hfr = String(h.heure_fr ?? '').trim();
                    const hl = String(h.label ?? h.libelle ?? '').trim();
                    return (hid && (hid === id || hid === chartLabel || hid === fallback))
                        || (har && (har === chartLabel || har === fallback))
                        || (hfr && (hfr === chartLabel || hfr === fallback))
                        || (hl && (hl === chartLabel || hl === fallback));
                });
                displayLabel = found ? (String(found.heure_ar ?? found.label ?? found.heure_fr)) : (fallback || chartLabel || id || `#${i+1}`);
            }
            const item = document.createElement('div');
            item.className = 'legend-item';
            item.innerHTML = `<span class="legend-swatch" style="background:${color}"></span>
                              <span style="direction:rtl;display:inline-block;margin-right:6px;">${displayLabel}</span>`;
            container.appendChild(item);
        }
    })();

  })();

  // other indicators (small badges)
  (function(){
    const otherContainer = document.getElementById('other-indicators');
    if(!otherContainer) return;
    otherContainer.innerHTML = '';
    const otherKeys = [
        {k:'total_signalements', label:'إجمالي البلاغات'},
        {k:'total_victimes', label:'إجمالي الضحايا'},
        {k:'total_orientations', label:'إجمالي التوجيهات'},
        {k:'orientations_hebergement', label:'توجيهات لإيواء'},
        {k:'orientations_police', label:'توجيهات للشرطة'},
        {k:'signalements_errones', label:'بلاغات خاطئة'}
    ];
    otherKeys.forEach(item => {
        const v = (window.__lastKpiData || {})[item.k];
        let display = (typeof v === 'object') ? (v.pct ?? v.total ?? JSON.stringify(v)) : v;
        const pill = `<div class="badge badge-kpi me-2 mb-2"> <strong style="display:block">${item.label}</strong><div style="font-size:.95rem;">${display}</div></div>`;
        otherContainer.insertAdjacentHTML('beforeend', pill);
    });
  })();

} /* end renderCharts */ /* note: renderCharts function declared above; closure ended */

/* -------------------------
   Map rendering (fixes + robust)
   ------------------------- */
function normText(s){ return (s || '').toString().trim().toUpperCase().replace(/\s+/g,' '); }

function centroidFromDelegs(delegs){
    const coords = (delegs || []).filter(d => d && (d.Latitude || d.latitude || d.lat) && (d.Longitude || d.longitude || d.lng));
    if(!coords.length) return null;
    const sum = coords.reduce((acc, d) => {
        const lat = Number(d.Latitude ?? d.latitude ?? d.lat ?? 0);
        const lng = Number(d.Longitude ?? d.longitude ?? d.lng ?? 0);
        acc.lat += lat; acc.lng += lng; return acc;
    }, {lat:0, lng:0});
    return { lat: sum.lat/coords.length, lng: sum.lng/coords.length };
}

function colorForValue(v, max){
    if(max === 0) return '#10b981';
    const p = v / max;
    if(p > 0.66) return '#b91c1c';
    if(p > 0.33) return '#f59e0b';
    return '#10b981';
}

async function renderMapVictimes(rawGovData){
    // Wait for Leaflet to be available
    if (typeof L === 'undefined') {
      await new Promise(r => setTimeout(r, 200));
      if (typeof L === 'undefined') {
        console.warn('Leaflet (L) not available. Map will not render.');
        const container = document.getElementById('map-gouvernorat');
        if (container) container.innerHTML = '<div class="p-3 text-center text-muted">خريطة غير متوفرة (Leaflet غير محمّل).</div>';
        return;
      }
    }

    try {
        const MAP_ID = 'map-gouvernorat';
        const mapEl = document.getElementById(MAP_ID);
        if(!mapEl){
            console.warn('Map container not found:', MAP_ID);
            return;
        }
        if (!mapEl.style.height || mapEl.style.height.trim() === '') {
            mapEl.style.height = '360px';
        }
        mapEl.style.width = '100%';

        let delegJson = [];
        try {
            const r = await fetch(DELEGATIONS_JSON_URL);
            if (r.ok) delegJson = await r.json();
            else console.warn('Delegations JSON fetch failed', r.status);
        } catch (err) {
            console.warn('Could not fetch delegations JSON', err);
        }

        const govIndex = {};
        for(const g of (delegJson || [])){
            const keys = [g.Name, g.NameAr, g.Value, g.nom, g.nom_ar].map(normText).filter(Boolean);
            const c = centroidFromDelegs(g.Delegations || g.delegations || []);
            for(const k of keys) if(k && c) govIndex[k] = { lat: c.lat, lng: c.lng, raw: g };
        }

        function normalizeIncoming(x){
            if(!x) return [];
            if(Array.isArray(x)) return x.map(it => {
                if(typeof it === 'number') return {label: String(it), value: it};
                if(typeof it === 'object') return { label: (it.label ?? it.name ?? it.nom ?? it.libelle ?? ''), value: Number(it.value ?? it.count ?? it.total ?? 0) };
                return { label: String(it), value: 0 };
            });
            const vals = Object.values(x);
            if(vals.length) return normalizeIncoming(vals);
            return [];
        }

        const payload = normalizeIncoming(rawGovData);
        if(!payload.length){
            mapEl.innerHTML = '<div class="p-3 text-center text-muted">لا توجد بيانات للولايات لعرضها على الخريطة.</div>';
            return;
        }

        const maxVal = Math.max(...payload.map(p => Number(p.value || 0)));

        try {
            if (window._gouvMap && typeof window._gouvMap.remove === 'function') {
                window._gouvMap.remove();
            }
        } catch(e){ console.warn('error removing previous map', e); }
        if (mapEl._leaflet_id) {
            try { delete mapEl._leaflet_id; } catch(e){ mapEl._leaflet_id = null; }
        }
        mapEl.innerHTML = '';

        const map = L.map(MAP_ID, { preferCanvas: true }).setView([34.0, 9.0], 6);
        window._gouvMap = map;
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 18,
            attribution: '&copy; OpenStreetMap contributors'
        }).addTo(map);

        const grp = L.featureGroup().addTo(map);
        const fallback = { lat: 34.0, lng: 9.0 };

        payload.forEach(item => {
            const label = (item.label ?? item.name ?? item.nom ?? '').toString();
            const value = Number(item.value ?? item.count ?? item.total ?? 0);
            const k = normText(label);

            let coord = govIndex[k] ?? null;
            if(!coord){
                for(const key in govIndex){
                    if(!key) continue;
                    if(key.includes(k) || k.includes(key) || key.startsWith(k) || k.startsWith(key)){
                        coord = govIndex[key]; break;
                    }
                }
            }
            if(!coord && Object.keys(govIndex).length){
                for(const key in govIndex){
                    if(key.indexOf(k) !== -1 || k.indexOf(key) !== -1){ coord = govIndex[key]; break; }
                }
            }

            const center = coord ? { lat: coord.lat, lng: coord.lng } : fallback;
            let jitterLat = 0, jitterLng = 0;
            if(!coord){
                const h = Math.abs(Array.from(label).reduce((a,c)=>a + c.charCodeAt(0), 0));
                jitterLat = ((h % 10) - 5) * 0.03;
                jitterLng = ((h % 7) - 3) * 0.03;
            }
            const finalLat = Number(center.lat) + jitterLat;
            const finalLng = Number(center.lng) + jitterLng;
            const radius = Math.max(6, Math.sqrt(value || 0) * 6);
            const color = colorForValue(value, maxVal);

            const circle = L.circleMarker([finalLat, finalLng], {
                radius,
                color,
                fillColor: color,
                fillOpacity: 0.65,
                weight: 1,
                pane: 'markerPane'
            }).addTo(grp);

            const tooltipHtml = `<div style="direction:rtl; text-align:right; min-width:80px;">
              <strong style="font-size:1rem;">${value}</strong> <span style="font-size:0.9rem;">ضحية</span>
            </div>`;

            circle.bindTooltip(tooltipHtml, {
              direction: 'top',
              offset: [0, -radius - 6],
              opacity: 0.95,
              sticky: true,
              permanent: false,
              className: 'gov-tooltip'
            });

            circle.on('mouseover', function (e) {
              this.openTooltip(e.latlng);
              try { this.setStyle({ weight: 2 }); } catch (err) {}
            });
            circle.on('mouseout', function () {
              try { this.closeTooltip(); this.setStyle({ weight: 1 }); } catch (err) {}
            });
            circle.on('click', () => { map.setView(circle.getLatLng(), Math.max(map.getZoom(), 9), { animate: true }); });
        });

        try {
            const groupBounds = grp.getBounds();
            if(groupBounds.isValid() && groupBounds.getNorthEast().lat !== groupBounds.getSouthWest().lat){
                map.fitBounds(groupBounds.pad(0.45));
            } else {
                map.setView([34.0, 9.0], 6);
            }
        } catch(e){ map.setView([34.0, 9.0], 6); }

        const legendHtml = (function(){
            const grades = [Math.ceil(maxVal*0.1), Math.ceil(maxVal*0.33), Math.ceil(maxVal*0.66), maxVal];
            const sw = (v) => `<span style="display:inline-block;width:14px;height:12px;margin-left:6px;vertical-align:middle;background:${colorForValue(v,maxVal)};border-radius:2px;"></span>`;
            return `<div style="direction:rtl;text-align:right;font-size:0.9rem;">
                <div><strong>مفتاح الألوان</strong></div>
                <div style="margin-top:6px;">
                    ${sw(grades[0])} ≤ ${grades[0]} &nbsp;&nbsp;
                    ${sw(grades[1])} ≤ ${grades[1]} &nbsp;&nbsp;
                    ${sw(grades[2])} ≤ ${grades[2]} &nbsp;&nbsp;
                    ${sw(grades[3])} = ${grades[3]}
                </div>
            </div>`;
        })();

        const legendContainer = document.getElementById('legend-gouvernorat');
        if(legendContainer) legendContainer.innerHTML = legendHtml;

    } catch (err) {
        console.error('renderMapVictimes error', err);
        const container = document.getElementById('map-gouvernorat');
        if(container) container.innerHTML = `<div class="p-3 text-danger">خطأ في عرض الخريطة: ${err.message}</div>`;
    }
}

/* -------------------------
   Data fetch + top-level loader
   ------------------------- */
async function fetchData(period = 'month') {
  try {
    const params = { period };

    const g = document.getElementById('filter-gouvernorat')?.value;
    const d = document.getElementById('filter-delegation')?.value;
    const from = document.getElementById('filter-date-from')?.value;
    const to = document.getElementById('filter-date-to')?.value;

    // prefer numeric id when available, otherwise send textual param (controller accepts both)
    if (g && g !== '') {
      if (/^\d+$/.test(String(g))) params.gouvernorat_id = g;
      else params.gouvernorat = g; // controller checks text aliases too
    }
    if (d && d !== '') {
      if (/^\d+$/.test(String(d))) params.delegation_id = d;
      else params.delegation = d;
    }
    if (from && from !== '') params.date_from = from;
    if (to && to !== '') params.date_to = to;

    console.debug('fetchData params:', params);

    const res = await axios.get("{{ route('dashboard.data') }}", { params });
    return res.data || {};
  } catch (e) {
    console.error('خطأ في /dashboard/data', e);
    return {};
  }
}


/* top-level render orchestration */
let currentPeriod = document.getElementById('kpi-period')?.value || 'month';
async function loadAndRender(period = currentPeriod){
    const topAlert = document.querySelector('.container .alert'); if(topAlert) topAlert.remove();
    const data = await fetchData(period);
    window.__lastKpiData = data || {};
    if(!data || Object.keys(data).length === 0){
        const root = document.querySelector('.container');
        if(root) root.insertAdjacentHTML('afterbegin', '<div class="alert alert-warning">لا توجد بيانات مؤشرات الأداء — تحقّق من <code>/dashboard/data</code> أو خدمة KPIs.</div>');
        return;
    }
    try { renderCardsFromData(data); } catch(e){ console.warn('renderCardsFromData failed', e); }
    try { renderCharts(data); } catch(e){ console.warn('renderCharts failed', e); }
}

/* bind controls */
document.getElementById('btn-refresh-kpis')?.addEventListener('click', function(){ currentPeriod = document.getElementById('kpi-period')?.value || currentPeriod; loadAndRender(currentPeriod); });
document.getElementById('kpi-period')?.addEventListener('change', function(){ currentPeriod = this.value; loadAndRender(currentPeriod); });

/* export CSV button handler (if exists) */
document.getElementById('btn-export-kpis')?.addEventListener('click', function(){
    const cols = Array.from(document.querySelectorAll('#kpi-cards .kpi-card')).map(card => {
        const title = card.querySelector('.kpi-title')?.textContent?.trim() || '';
        const value = card.querySelector('.kpi-value')?.textContent?.trim() || '';
        const sub = card.querySelector('.kpi-sub')?.textContent?.trim() || '';
        return { title, value, sub };
    });
    if(!cols.length){ alert('لا توجد بيانات للتصدير'); return; }
    const rows = [['مؤشر','قيمة','ملاحظة'], ...cols.map(c=>[c.title, c.value, c.sub])];
    const csv = rows.map(r => r.map(cell => `"${String(cell).replace(/"/g,'""')}"`).join(',')).join('\n');
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = `kpis_${new Date().toISOString().slice(0,10)}.csv`; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url);
});

/* ---------- gouvernorat/delegation selects init (kept) ---------- */
(async function initGouvDelegationFilters(){
  const gSelect = document.getElementById('filter-gouvernorat');
  const dSelect = document.getElementById('filter-delegation');
  const btnApply = document.getElementById('btn-apply-filters');
  const btnReset = document.getElementById('btn-reset-filters');

  if(!gSelect || !dSelect) return;

  let delegJson = [];
  try {
    const res = await fetch(DELEGATIONS_JSON_URL);
    if(!res.ok) throw new Error('fetch failed ' + res.status);
    delegJson = await res.json();
  } catch (err) {
    console.warn('Could not load delegations JSON:', err);
    delegJson = [];
  }

  function pickIdFromRaw(raw) {
    if (!raw || typeof raw !== 'object') return '';
    const idCandidates = ['id', 'ID', 'id_gouver', 'id_gouvernorat', 'id_gouv', 'id_delegation', 'id_deleg', 'id_municipalite', 'code'];
    for (const c of idCandidates) {
      if (raw[c] !== undefined && raw[c] !== null && raw[c] !== '') return String(raw[c]);
    }
    const fallback = (raw.Value ?? raw.value ?? raw.Name ?? raw.NameAr ?? raw.nom ?? raw.nom_fr ?? '');
    return fallback === null ? '' : String(fallback).trim();
  }

  const gouvernorats = (delegJson || []).map(g => {
    return {
      raw: g,
      id: pickIdFromRaw(g),
      label: String(g.NameAr ?? g.nom_ar ?? g.Name ?? g.nom_fr ?? g.Value ?? '').trim(),
      legacyValue: String(g.Value ?? g.Name ?? g.NameAr ?? '').trim()
    };
  });

  function buildDelegations(govValue = '') {
    const out = [];
    const _norm = s => (s||'').toString().trim().toUpperCase();

    if (!govValue) {
      for (const g of (delegJson || [])) {
        const list = Array.isArray(g.Delegations) ? g.Delegations : (Array.isArray(g.delegations) ? g.delegations : []);
        for (const d of list) {
          out.push({
            label: (d.NameAr || d.Name || d.Value || '').toString().trim(),
            value: (d.Value ?? d.Name ?? d.NameAr).toString().trim(),
            raw: d,
            parent: (g.Value ?? g.Name ?? g.NameAr).toString().trim()
          });
        }
      }
      return dedupeDelegs(out);
    }

    let found = null;
    const idCandidates = ['id','id_gouver','id_gouvernorat','id_gouv','gouver_id','Value','value'];
    for (const g of (delegJson || [])) {
      for (const idc of idCandidates) {
        if (g[idc] !== undefined && g[idc] !== null && String(g[idc]).toString().trim() === String(govValue)) { found = g; break; }
      }
      if (found) break;
      const keys = [g.Value, g.Name, g.NameAr].map(_norm);
      if (keys.includes(_norm(govValue))) { found = g; break; }
    }

    const list = found && Array.isArray(found.Delegations) ? found.Delegations : (found && Array.isArray(found.delegations) ? found.delegations : []);
    for (const d of list) {
      out.push({
        label: (d.NameAr || d.Name || d.Value || '').toString().trim(),
        value: (d.Value ?? d.Name ?? d.NameAr).toString().trim(),
        raw: d,
        parent: (found.Value ?? found.Name ?? found.NameAr).toString().trim()
      });
    }

    return dedupeDelegs(out);

    function dedupeDelegs(arr) {
      const seen = new Set();
      return arr.filter(it => {
        if (!it.value) return false;
        if (seen.has(it.value)) return false;
        seen.add(it.value);
        return true;
      });
    }
  }

  function populateGouvernoratSelect() {
    Array.from(gSelect.querySelectorAll('option')).forEach(opt => { if(opt.value !== '') opt.remove(); });
    gouvernorats.forEach(g => {
      const o = document.createElement('option');
      o.value = g.id || g.legacyValue || g.label || '';
      o.textContent = g.label || g.legacyValue || g.id || '';
      gSelect.appendChild(o);
    });
  }

  function populateDelegationSelect(govKey = '') {
    Array.from(dSelect.querySelectorAll('option')).forEach(opt => { if(opt.value !== '') opt.remove(); });
    const list = buildDelegations(govKey);
    list.forEach(d => {
      const o = document.createElement('option');
      o.value = d.value || d.label || '';
      o.textContent = d.label || d.value || '';
      if (d.parentId) o.setAttribute('data-parent-id', String(d.parentId));
      dSelect.appendChild(o);
    });
  }

  populateGouvernoratSelect();
  populateDelegationSelect();

  gSelect.addEventListener('change', function(){ populateDelegationSelect(this.value || ''); });

  btnApply?.addEventListener('click', function(){ loadAndRender(); });

  btnReset?.addEventListener('click', function(){
    try {
      gSelect.value = '';
      dSelect.value = '';
      const ffrom = document.getElementById('filter-date-from'); if(ffrom) ffrom.value = '';
      const fto = document.getElementById('filter-date-to'); if(fto) fto.value = '';
      populateDelegationSelect('');
      loadAndRender();
    } catch(e){ console.warn('reset filters error', e); }
  });

})();

/* -------------------------
   Make charts respond live to filter changes:
   - apply debounce to avoid spamming requests
   - listen to select/date change events and call loadAndRender
   ------------------------- */
(function wireFiltersToCharts(){
  const ids = ['filter-gouvernorat','filter-delegation','filter-date-from','filter-date-to'];
  const debounced = debounce(() => {
    // keep UX: preserve currentPeriod if selector exists
    currentPeriod = document.getElementById('kpi-period')?.value || currentPeriod;
    loadAndRender(currentPeriod);
  }, 300);

  ids.forEach(id => {
    const el = document.getElementById(id);
    if (!el) return;
    el.addEventListener('change', debounced);
    // for date inputs also listen to input events
    if (el.type === 'date') el.addEventListener('input', debounced);
  });

  // Also keep Apply/Reset wiring (they exist in your markup)
  document.getElementById('btn-apply-filters')?.addEventListener('click', async function(e){
    e?.preventDefault?.();
    const btn = this;
    btn.disabled = true;
    await loadAndRender();
    btn.disabled = false;
  });

  document.getElementById('btn-reset-filters')?.addEventListener('click', async function(e){
    e?.preventDefault?.();
    const g = document.getElementById('filter-gouvernorat');
    const d = document.getElementById('filter-delegation');
    const from = document.getElementById('filter-date-from');
    const to = document.getElementById('filter-date-to');
    if (g) g.value = '';
    if (d) d.value = '';
    if (from) from.value = '';
    if (to) to.value = '';
    await loadAndRender();
  });

})();

/* initial load on DOM ready */
document.addEventListener('DOMContentLoaded', function(){ loadAndRender(); });
if (document.readyState === 'complete' || document.readyState === 'interactive') loadAndRender();

})(); // end main IIFE
</script>

<script>
/* Accessibility + animation helper: animate new KPI cards with a small stagger
   - Respects prefers-reduced-motion
   - Uses MutationObserver to detect injected .kpi-card elements
*/
document.addEventListener('DOMContentLoaded', function () {
  try {
    const container = document.getElementById('kpi-cards');
    if (!container) return;
    const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

    const animateCards = (nodes) => {
      if (prefersReduced) return; // don't animate
      nodes.forEach((n, i) => {
        if (!(n instanceof HTMLElement)) return;
        if (n.classList.contains('kpi-appear')) return;
        n.style.opacity = 0;
        const delay = Math.min(110 * i, 600);
        setTimeout(() => {
          n.classList.add('kpi-appear');
          n.style.opacity = '';
        }, delay);
      });
    };

    const mo = new MutationObserver(function (mutations) {
      for (const m of mutations) {
        if (m.type === 'childList' && m.addedNodes.length) {
          const added = Array.from(m.addedNodes).filter(n => n.nodeType === 1 && n.matches && n.matches('.kpi-card'));
          if (added.length) animateCards(added);
        }
      }
    });
    mo.observe(container, { childList: true, subtree: false });

    // animate existing
    const existing = Array.from(container.querySelectorAll('.kpi-card'));
    if (existing.length) animateCards(existing);
  } catch (e) { console.error('kpi animation init error', e); }
});
</script>



@endsection