@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('css/pages/users_index.css') }}">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

<div class="mb-4">
    <div id="pageMessages" class="m-3"></div>
  <div class="card banner-card page-title-card shadow-sm border-0 overflow-hidden" dir="rtl">
    <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
      <div class="me-0 me-md-4 text-md-end">
        <h4 class="mb-1 fw-bold banner-title">قائمة البلاغات / المكالمات</h4>
        <p class="mb-3 banner-subtitle">عرض ملخص البلاغات: الضحية، رقم الهاتف، التاريخ، المكان، والمستمع.</p>
        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
  <span class="banner-badge" title="إجمالي البلاغات">
    <i class="bx bx-phone align-middle ms-1"></i>
    إجمالي البلاغات: <strong>{{ number_format($totalSignalements ?? ($signalements->total() ?? 0)) }}</strong>
  </span>

  <span class="banner-badge" title="إجمالي الضحايا">
    <i class="bx bx-user align-middle ms-1"></i>
    إجمالي الضحايا: <strong>{{ number_format($totalVictimes ?? 0) }}</strong>
  </span>

  <span class="banner-badge" title="إجمالي التوجيهات / الإحالات">
    <i class="bx bx-share-alt align-middle ms-1"></i>
    إجمالي التوجيهات: <strong>{{ number_format($totalOrientations ?? 0) }}</strong>
  </span>

  <span class="banner-badge" title="تدخلات عاجلة">
    <i class="bx bx-chorus align-middle ms-1"></i>
    تدخلات عاجلة: <strong>{{ number_format($totalInterventionsImmediates ?? 0) }}</strong>
  </span>


</div>

        </div>
      </div>
      <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
    </div>
  </div>
</div>

{{-- ===== Card des filtres ===== --}}
<div class="card mb-3 shadow-sm border-0">
  <div class="card-header bg-white py-2 d-flex align-items-center justify-content-between" dir="rtl">
    <div class="fw-bold">فلتر البحث</div>
    {{-- <div class="text-muted small">صفّ النتائج حسب معايير مختلفة</div> --}}
  </div>

  <div class="card-body">
    <form id="filtersForm" method="GET" action="{{ route('form.index') }}" class="row g-2" dir="rtl">
      {{-- champ texte recherche (nom / téléphone / identifiant) --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">بحث (اسم / رقم )</label>
        <input type="text" name="q" value="{{ request('q') }}" class="form-control form-control-sm" placeholder="اسم الضحية أو رقم الهاتف أو ID">
      </div>

      {{-- date from --}}
      <div class="col-6 col-md-2">
        <label class="form-label small fw-semibold">من تاريخ</label>
        <input type="date" name="date_from" value="{{ request('date_from') }}" class="form-control form-control-sm">
      </div>

      {{-- date to --}}
      <div class="col-6 col-md-2">
        <label class="form-label small fw-semibold">إلى تاريخ</label>
        <input type="date" name="date_to" value="{{ request('date_to') }}" class="form-control form-control-sm">
      </div>

      {{-- gouvernorat --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">الولاية</label>
        <select name="gouver_id" id="gouverSelect" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @foreach($gouvernorats as $g)
            <option value="{{ $g->id_gouver }}" {{ (string)request('gouver_id') === (string)$g->id_gouver ? 'selected' : '' }}>
              {{ $g->nom_ar ?? $g->nom }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- delegation (municipalite) --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold"> المعتمدية</label>
        <select name="delegation_id" id="delegationSelect" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @if(!empty($delegations) && $delegations->count())
            @foreach($delegations as $d)
              <option value="{{ $d->id_delegation }}" {{ (string)request('delegation_id') === (string)$d->id_delegation ? 'selected' : '' }}>
                {{ $d->nom_ar ?? $d->nom }}
              </option>
            @endforeach
          @endif
        </select>
      </div>

      {{-- ecoutante --}}
      <div class="col-12 col-md-2">
        <label class="form-label small fw-semibold">المستمعة</label>
        <select name="ecoutante_id" class="form-select form-select-sm">
          <option value="">— الكل —</option>
          @foreach($ecoutantes as $u)
            <option value="{{ $u->id }}" {{ (string)request('ecoutante_id') === (string)$u->id ? 'selected' : '' }}>
              {{ $u->name }}
            </option>
          @endforeach
        </select>
      </div>

      {{-- boutons --}}
      <div class="col-12 d-flex gap-2 filters-actions">
        <!-- Bulk export of current filtered resultset (preserve query string) -->


        <button type="submit" class="btn btn-filter btn-sm">
          <i class="bx bx-filter-alt me-1"></i> تطبيق الفلتر
        </button>

        <a href="{{ route('form.index') }}" class="btn btn-outline-secondary btn-sm">
          <i class="bx bx-reset me-1"></i> إعادة تعيين
        </a>
      </div>

    </form>
  </div>
</div>
{{-- ===== fin card filtres ===== --}}

{{-- ===== table card (inchangée sauf petites adaptations) ===== --}}
<div class="card shadow-sm border-0">
  <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
    <div class="d-flex align-items-center gap-3">
      <h4 class="mb-0 fw-bold">البلاغات</h4>
      <small class="text-muted">عرض البلاغات المسجّلة</small>
    </div>

    <div class="d-flex align-items-center gap-2">
    <a href="{{ route('signalement.export.filtered') . (request()->getQueryString() ? ('?' . request()->getQueryString()) : '') }}"
   class="btn-download-signalement btn btn-sm d-flex align-items-center"
   title="تحميل Excel للنتائج المصفّاة">
  <i class="bx bx-download me-1"></i> 
</a>

      <a href="{{ route('form.add') ?? route('signalement.create') }}"
   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
  <i class="bx bx-plus align-middle me-1"></i> إضافة 
</a>

    </div>
  </div>

  <div class="card-body">
    @if(session('success'))
      <div class="m-3">
        <div class="alert alert-success mb-0">{{ session('success') }}</div>
      </div>
    @endif

    <div class="table-responsive">
      <table class="table table-hover mb-0">
        <thead class="table-light">
          <tr>
            <th>المتصلة</th>
            <th>تاريخ الاتصال</th>
            <th>رقم الهاتف</th>
            <th>الولاية</th>
            <th>المعتمدية</th>
            <th>المستمعة</th>
            <th style="width:150px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
      @forelse($signalements as $s)
<tr>
  <td>{{ optional($s->victime)->nom_prenom ?? '—' }}</td>
  <td>{{ $s->date_appel ? \Carbon\Carbon::parse($s->date_appel)->format('Y-m-d') : '—' }}</td>
  <td>{{ optional($s->victime)->num_tel ?? optional($s->victime)->num_tel_suivi ?? '—' }}</td>
  <td>{{ optional(optional($s->victime)->gouvernorat)->nom_ar ?? optional(optional($s->victime)->gouvernorat)->nom ?? '—' }}</td>
  <td>{{ optional(optional($s->victime)->municipalite)->nom_ar ?? optional(optional($s->victime)->municipalite)->nom ?? '—' }}</td>
  <td>{{ optional($s->ecoutante)->name ?? ($s->id_ecoutante ? 'ID: '.$s->id_ecoutante : '—') }}</td>
  <td class="text-end">
    <div class="actions-cell d-flex gap-1 justify-content-end">
            <a href="{{ route('signalement.show', $s->id_signalement) }}" class="btn btn-icon btn-icon-success" title="عرض">
                     <i class="bx bx-show-alt"></i>
                  </a>
      <a href="{{ route('signalement.edit', $s->id_signalement) }}" class="btn btn-icon btn-icon-outline" title="تعديل"><i class="bx bx-edit"></i></a>
  
<form action="{{ route('signalement.destroy', $s->id_signalement) }}"
      method="POST"
      class="delete-signalement-form"
      data-id="{{ $s->id_signalement }}"
      style="display:inline-block">
  @csrf
  @method('DELETE')
  <!-- make button type="button" so native form submit does NOT happen -->
  <button type="button" class="btn btn-icon btn-icon-danger delete-btn" title="حذف">
    <i class="bx bx-trash"></i>
  </button>
</form>


    </div>
  </td>
</tr>
@empty
<tr><td colspan="7" class="text-center py-4"><div class="text-muted">لا يوجد بلاغات حالياً.</div></td></tr>
@endforelse

        </tbody>
      </table>
    </div>

@php
  $current = $signalements->currentPage() ?? 1;
  $last = $signalements->lastPage() ?: 1;
  // sliding window size (pages to show on each side)
  $window = 2;
  $start = max(1, $current - $window);
  $end = min($last, $current + $window);
@endphp

<div class="card-footer border-0" dir="rtl">
  <div class="d-flex justify-content-between align-items-center flex-row-reverse">
    <div>
      <small class="text-muted">
        عرض {{ $signalements->firstItem() ?? 0 }} - {{ $signalements->lastItem() ?? 0 }} من {{ $signalements->total() ?? 0 }}
      </small>
    </div>

    <!-- Centered pagination -->
    <nav aria-label="Pagination" class="mx-auto">
      <ul class="pagination mb-0 align-items-center pagination-centered" role="navigation" style="direction: ltr;">
        {{-- Jump to first (double chevrons left) --}}
        {{-- <li class="page-item {{ $current <= 1 ? 'disabled' : '' }}">
          <a class="page-link" href="{{ $current <= 1 ? '#' : request()->fullUrlWithQuery(['page' => 1]) }}" aria-label="الصفحة الأولى" title="الصفحة الأولى" rel="first">
            <i class="bx bx-chevrons-left"></i>
          </a>
        </li> --}}

        {{-- Previous --}}
        <li class="page-item {{ $current <= 1 ? 'disabled' : '' }}">
          <a class="page-link" href="{{ $current <= 1 ? '#' : request()->fullUrlWithQuery(['page' => $current - 1]) }}" aria-label="السابق" title="السابق">
            <i class="bx bx-chevron-left"></i>
          </a>
        </li>

        {{-- Left ellipsis if needed --}}
        @if($start > 1)
          <li class="page-item">
            <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => 1]) }}">1</a>
          </li>
          @if($start > 2)
            <li class="page-item disabled"><span class="page-link">…</span></li>
          @endif
        @endif

        {{-- Page numbers window --}}
        @for($p = $start; $p <= $end; $p++)
          <li class="page-item {{ $p == $current ? 'active' : '' }}">
            <a class="page-link" href="{{ $p == $current ? '#' : request()->fullUrlWithQuery(['page' => $p]) }}">
              {{ $p }}
            </a>
          </li>
        @endfor

        {{-- Right ellipsis if needed --}}
        @if($end < $last)
          @if($end < $last - 1)
            <li class="page-item disabled"><span class="page-link">…</span></li>
          @endif
          <li class="page-item">
            <a class="page-link" href="{{ request()->fullUrlWithQuery(['page' => $last]) }}">{{ $last }}</a>
          </li>
        @endif

        {{-- Next --}}
        <li class="page-item {{ $current >= $last ? 'disabled' : '' }}">
          <a class="page-link" href="{{ $current >= $last ? '#' : request()->fullUrlWithQuery(['page' => $current + 1]) }}" aria-label="التالي" title="التالي">
            <i class="bx bx-chevron-right"></i>
          </a>
        </li>

        {{-- Jump to last (double chevrons right) --}}
        {{-- <li class="page-item {{ $current >= $last ? 'disabled' : '' }}">
          <a class="page-link" href="{{ $current >= $last ? '#' : request()->fullUrlWithQuery(['page' => $last]) }}" aria-label="الصفحة الأخيرة" title="الصفحة الأخيرة" rel="last">
            <i class="bx bx-chevrons-right"></i>
          </a>
        </li> --}}
      </ul>
    </nav>

    {{-- <div style="min-width:140px; text-align:left;">
      <small class="text-muted">الصفحة <strong>{{ $current }}</strong> من {{ $last }}</small>
    </div> --}}
  </div>
</div>


  </div>
</div>
<!-- Delete confirmation modal (paste near end of Blade, once per page) -->
<!-- Delete confirmation modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-start" dir="rtl">

      <div class="modal-header border-0 justify-content-between align-items-center">
        <!-- Close button on the left -->
        <button type="button" class="btn-close me-2" data-bs-dismiss="modal" aria-label="إغلاق"></button>
        <!-- Title -->
        <h5 class="modal-title ms-auto me-3">تأكيد الحذف</h5>
      </div>

      <div class="modal-body">
        <p class="mb-1">هل أنت متأكد أنك تريد حذف هذا البلاغ؟</p>
        <p class="small text-muted mb-0" id="confirmDeleteDetail">هذا الإجراء نهائي ولا يمكن التراجع عنه.</p>
        <input type="hidden" id="confirmDeleteUrl" value="">
      </div>

      <div class="modal-footer border-0">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        <button id="confirmDeleteBtn" type="button" class="btn btn-danger btn-sm">
          <span id="confirmDeleteBtnText">حذف</span>
          <span id="confirmDeleteBtnSpinner" class="ms-2" style="display:none;"><i class="bx bx-loader bx-spin"></i></span>
        </button>
      </div>
    </div>
  </div>
</div>




@push('scripts')
<script>
(function(){
  // prevent loading twice
  if (window.__signalementDeleteInit) return;
  window.__signalementDeleteInit = true;

  document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('confirmDeleteModal');
    if (!modalEl) return;
    const bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);

    let activeForm = null;
    let activeRow = null;
    const detailEl = document.getElementById('confirmDeleteDetail');
    const urlInput = document.getElementById('confirmDeleteUrl');
    const confirmBtn = document.getElementById('confirmDeleteBtn');
    const btnSpinner = document.getElementById('confirmDeleteBtnSpinner');
    const messagesContainer = document.getElementById('pageMessages');

    // track requests by stable identifier (prefer data-id)
    const inFlight = new Map();   // id => true while request running
    const processed = new Map();  // id => 'notfound' | 'success' | 'error'

    // debug helper (remove or set false in prod)
    const DEBUG = false;
    function debug(...args){ if (DEBUG) console.debug('[delete-signalement]', ...args); }

    function csrfToken() {
      const meta = document.querySelector('meta[name="csrf-token"]');
      return meta ? meta.getAttribute('content') : '';
    }

    function showMessage(type, text, autoDismiss = true, timeout = 4000) {
      if (!messagesContainer) {
        console.warn('Message:', text);
        return;
      }
      // dedupe exact text
      const existing = Array.from(messagesContainer.querySelectorAll('.alert')).find(a => a.textContent.trim() === text.trim());
      if (existing) return;
      const wrapper = document.createElement('div');
      wrapper.className = `alert alert-${type} alert-dismissible fade show`;
      wrapper.role = 'alert';
      wrapper.innerHTML = `
        <div class="d-flex justify-content-between align-items-start gap-3">
          <div>${text}</div>
          <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="إغلاق"></button>
        </div>
      `;
      messagesContainer.prepend(wrapper);
      if (autoDismiss) {
        setTimeout(()=> {
          try { bootstrap.Alert.getOrCreateInstance(wrapper).close(); }
          catch (e) { wrapper.remove(); }
        }, timeout);
      }
    }

    function getFormId(form) {
      if (!form) return null;
      const fid = form.dataset.id || form.getAttribute('data-id');
      if (fid) return String(fid);
      return form.getAttribute('action') || '';
    }

    // PREVENT native submit as extra safety (capture phase)
    document.addEventListener('submit', function(e){
      if (e.target && e.target.matches('.delete-signalement-form')) {
        e.preventDefault();
        debug('Preventing native submit for delete form');
      }
    }, true);

    // Delegate click -> open modal
    // We add the listener only once (checked by top-level guard)
    document.body.addEventListener('click', function (e) {
      const btn = e.target.closest('.delete-btn');
      if (!btn) return;

      // Stop other click listeners on this target from executing (avoid duplicates)
      try { e.stopImmediatePropagation(); } catch (err) { /* ignore in older browsers */ }

      const form = btn.closest('form.delete-signalement-form');
      if (!form) return;

      // prevent re-opening / double processing
      if (form.dataset.deleting === '1') {
        debug('Form already deleting, ignore click', getFormId(form));
        return;
      }

      e.preventDefault();

      activeForm = form;
      activeRow = form.closest('tr');

      let victimName = 'هذا البلاغ';
      if (activeRow) {
        const firstCell = activeRow.querySelector('td');
        if (firstCell && firstCell.textContent.trim()) victimName = firstCell.textContent.trim();
      }

      detailEl.textContent = `سيتم حذف ${victimName}. هذا الإجراء نهائي ولا يمكن التراجع عنه.`;
      urlInput.value = form.getAttribute('action') || '';

      // visual marker (0 = opened but not confirmed)
      form.dataset.deleting = '0';

      debug('Opening modal for', getFormId(form), urlInput.value);
      bsModal.show();
    }, false);

    // Prevent duplicate confirm listeners: attach only once
    if (!confirmBtn.dataset.listenerAttached) {
      confirmBtn.dataset.listenerAttached = '1';

      confirmBtn.addEventListener('click', function () {
        if (!activeForm) { bsModal.hide(); return; }
        const action = (urlInput.value || activeForm.getAttribute('action') || '').toString();
        const id = getFormId(activeForm) || action;

        if (!action) {
          showMessage('danger', 'URL الحذف غير موجود.', true);
          bsModal.hide();
          return;
        }

        if (processed.has(id)) { debug('Already processed', id); bsModal.hide(); return; }
        if (inFlight.has(id)) { debug('In-flight exists', id); bsModal.hide(); return; }

        // mark form as being processed immediately
        activeForm.dataset.deleting = '1';
        inFlight.set(id, true);

        confirmBtn.disabled = true;
        btnSpinner.style.display = 'inline-block';

        debug('Sending DELETE', id, action);
        fetch(action, {
          method: 'DELETE',
          headers: {
            'X-CSRF-TOKEN': csrfToken(),
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          credentials: 'same-origin',
          body: JSON.stringify({})
        })
        .then(async (resp) => {
          inFlight.delete(id);
          confirmBtn.disabled = false;
          btnSpinner.style.display = 'none';

          debug('Response status', resp.status, id);

          if (resp.status === 404) {
            processed.set(id, 'notfound');
            if (activeRow) activeRow.remove();
            try { bsModal.hide(); } catch (e) {}
            activeForm && (activeForm.dataset.deleting = '0');
            showMessage('info', 'البلاغ غير موجود أو تم حذفه مسبقًا. تم تحديث القائمة.', true, 4500);
            return { __handled: 'notfound' };
          }

          if (!resp.ok) {
            let payload = null;
            try { payload = await resp.json(); } catch(e){ payload = null; }
            const msg = payload && payload.message ? payload.message : 'حدث خطأ أثناء الحذف.';
            const err = new Error(msg);
            err.payload = payload;
            throw err;
          }

          const json = await resp.json().catch(()=>({ success: true }));
          processed.set(id, 'success');
          return json;
        })
        .then((json) => {
          if (json && json.__handled === 'notfound') return;

          if (json && json.success === false) {
            processed.set(id, 'error');
            activeForm && (activeForm.dataset.deleting = '0');
            showMessage('danger', json.message || 'تعذّر الحذف', true, 6000);
            try { bsModal.hide(); } catch (e) {}
            return;
          }

          // If your application exposes fetchResults() let it handle refresh.
          if (typeof fetchResults === 'function') {
            try {
              const r = fetchResults({ preservePage: true });
              if (r === false) {
                if (activeRow) activeRow.remove();
                showMessage('success', (json && json.message) ? json.message : 'تم الحذف بنجاح', true, 3500);
              }
              activeForm && (activeForm.dataset.deleting = '0');
              try { bsModal.hide(); } catch (e) {}
              return;
            } catch (e) {
              console.warn('fetchResults call failed', e);
            }
          }

          if (activeRow) activeRow.remove();
          activeForm && (activeForm.dataset.deleting = '0');
          try { bsModal.hide(); } catch (e) {}
          showMessage('success', (json && json.message) ? json.message : 'تم الحذف بنجاح', true, 3500);
        })
        .catch(err => {
          inFlight.delete(id);
          confirmBtn.disabled = false;
          btnSpinner.style.display = 'none';
          try { bsModal.hide(); } catch (e) {}
          console.error('Delete failed', err);
          const msg = (err && err.payload && err.payload.message) ? err.payload.message : (err && err.message ? err.message : 'حدث خطأ أثناء حذف البلاغ. حاول مجدداً.');
          processed.set(id, 'error');
          activeForm && (activeForm.dataset.deleting = '0');
          showMessage('danger', msg, true, 6000);
        });
      }, false);
    } // end attach guard

    debug('Delete init done');
  }); // DOMContentLoaded
})(); // IIFE
</script>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const gouverSelect = document.getElementById('gouverSelect');
  const delegationSelect = document.getElementById('delegationSelect');
  if (!gouverSelect || !delegationSelect) return;

  // base URL to call: e.g. /delegations-by-gouver/{id}
  const baseUrl = "{{ url('delegations-by-gouver') }}";

  // server-provided initial selected delegation (if any)
  const initialSelectedDelegation = @json(request('delegation_id') ?? null);

  // simple cache to avoid repeated requests
  const cache = {};

  function setOptionsForSelect(selectEl, items, selectedId) {
    // keep the first "— الكل —" option
    selectEl.innerHTML = '';
    const defaultOpt = document.createElement('option');
    defaultOpt.value = '';
    defaultOpt.textContent = '— الكل —';
    selectEl.appendChild(defaultOpt);

    if (!items || !items.length) {
      const emptyOpt = document.createElement('option');
      emptyOpt.value = '';
      emptyOpt.textContent = 'لا توجد معتمديات';
      selectEl.appendChild(emptyOpt);
      selectEl.value = ''; // ensure blank
      return;
    }

    for (const it of items) {
      const opt = document.createElement('option');
      opt.value = it.id;
      // prefer Arabic name when present
      opt.textContent = (it.nom_ar && it.nom_ar.trim()) ? it.nom_ar : (it.nom || it.nom_ar || it.id);
      selectEl.appendChild(opt);
    }

    // if selectedId is provided and matches an option, set it, else keep blank
    if (selectedId) {
      const match = Array.from(selectEl.options).find(o => o.value.toString() === selectedId.toString());
      if (match) selectEl.value = selectedId;
    }
  }

  async function fetchDelegationsFor(gouverId, preserveSelected = false) {
    if (!gouverId) {
      // clear delegation select
      setOptionsForSelect(delegationSelect, []);
      return;
    }

    // show loading option
    delegationSelect.innerHTML = '';
    const loadingOpt = document.createElement('option');
    loadingOpt.value = '';
    loadingOpt.textContent = 'جاري التحميل...';
    delegationSelect.appendChild(loadingOpt);

    // cached?
    if (cache[gouverId]) {
      setOptionsForSelect(delegationSelect, cache[gouverId], preserveSelected ? initialSelectedDelegation : null);
      return;
    }

    try {
      const resp = await fetch(`${baseUrl}/${encodeURIComponent(gouverId)}`, { credentials: 'same-origin' });
      if (!resp.ok) throw new Error('Network response not OK');
      const json = await resp.json();
      // expect array [{id, nom_ar, nom}, ...]
      cache[gouverId] = json || [];
      setOptionsForSelect(delegationSelect, cache[gouverId], preserveSelected ? initialSelectedDelegation : null);
    } catch (err) {
      console.error('Failed to load delegations', err);
      delegationSelect.innerHTML = '';
      const errOpt = document.createElement('option');
      errOpt.value = '';
      errOpt.textContent = 'خطأ في التحميل';
      delegationSelect.appendChild(errOpt);
    }
  }

  // when gouver changes -> fetch delegations and reset delegation selection
  gouverSelect.addEventListener('change', function () {
    const gid = this.value || '';
    // clear any previously set initialSelectedDelegation so we don't reselect previous filtered value
    // (only keep it on initial load)
    // call fetch with preserveSelected = false
    fetchDelegationsFor(gid, false);
  });

  // also: if the user focuses the delegation select while a gouver is already chosen,
  // load delegations (helpful when gouver was pre-filled by server)
  delegationSelect.addEventListener('focus', function () {
    const gid = gouverSelect.value || '';
    if (!gid) return;
    if (cache[gid] && cache[gid].length) return; // already loaded
    fetchDelegationsFor(gid, true);
  });

  // Initial page load: if a gouver is selected on load, fetch its delegations and try to preselect
  (function init() {
    const gid = gouverSelect.value || '';
    if (!gid) {
      // ensure delegation select has the default option
      setOptionsForSelect(delegationSelect, []);
      return;
    }
    fetchDelegationsFor(gid, true);
  })();
});
</script>
@endpush





@stack('scripts')
<style>
  /* Add-button centralized styles (use a semantic class) */

    /* add to your CSS file */
.btn-filter {
  background: rgba(13,110,253,0.06);              /* soft blue wash */
  border: 0px solid rgba(13,110,253,0.06);        /* subtle blue border */
  color: #0d6efd;                                 /* primary blue text */
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  border-radius: .375rem;
  font-weight: 500;
}

/* hover / active */
.btn-filter:hover { 
  background: rgba(13,110,253,0.12);
  color: #0b5ed7;
  text-decoration: none;
}

.btn-filter:active {
  background: rgba(13,110,253,0.16);
}

/* accessible focus ring — small & subtle */
.btn-filter:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(13,110,253,0.12);
}

</style>
@endsection