{{-- resources/views/sommaires/bureaux_commissaires.blade.php --}}
@extends('layouts.app')

@section('title', 'المكاتب الجهوية لمندوبي حماية الطفولة')

@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-sommaires 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">
        <h3 class="mb-1 fw-bold banner-title">المكاتب الجهوية لمندوبي حماية الطفولة</h3>
   
      </div>
      <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
    </div>
  </div>
</div>

<div class="card">
  <div class="card-body">

    <!-- Controls row: ADD (left) - SEARCH (right) -->
    <div class="d-flex justify-content-between align-items-center mb-3 w-100" dir="ltr">
            <div class="d-flex gap-2">

                   <button id="bureaux-add-btn"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
                     إضافة 
                   <i class="bx bx-plus align-middle me-1"></i> </button>
                  <a href="{{ route('bureauxcommissaires.export') }}"   class="btn-download-signalement btn btn-sm d-flex align-items-center" title="تصدير Excel">
                   <i class="bx bx-download me-1"></i> 
                  </a>
              </div>

           <div style="min-width:200px; max-width:480px; width:40%; direction:rtl;">
             <div class="d-flex gap-2">
               <input id="bureaux-search" type="text" class="form-control" placeholder="ابحث بالولاية، العنوان، الهاتف أو البريد..." aria-label="بحث المكاتب">
                 {{-- <button id="bureaux-refresh" class="btn btn-outline-secondary">تحديث</button> --}}
             </div>
           </div>
    </div>
    <!-- end controls -->

    <div class="table-responsive">
      <table class="table table-hover" id="bureaux-table">
        <thead class="table-light">
          <tr>
            {{-- <th style="width:48px">الرقم</th> --}}
            <th>الولاية</th>
            <th>العنوان</th>
            <th>الهاتف</th>
            <th>الفاكس</th>
            <th>البريد الإلكتروني</th>
            <th class="text-end" style="width:120px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($bureaux as $i => $b)
            <tr data-id="{{ $b->id }}">
              {{-- <td>{{ $i + 1 }}</td> --}}
              <td class="col-gouv">{{ $b->gouvernorat }}</td>
              <td class="col-adresse">{{ $b->adresse_bureau }}</td>
              <td class="col-tel">{{ $b->telephone }}</td>
              <td class="col-fax">{{ $b->fax }}</td>
              <td class="col-mail">{{ $b->courriel }}</td>
              <td class="text-end">
                <button class="btn btn-icon btn-icon-outline btn-edit" aria-label="تعديل"><i class="bx bx-edit"></i></button>
                <button class="btn btn-icon btn-icon-danger btn-delete" aria-label="حذف"><i class="bx bx-trash"></i></button>
              </td>
            </tr>
          @empty
            <tr><td colspan="7" class="text-center text-muted">لا توجد بيانات</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  <div id="bureaux-pagination-container" class="card-footer border-0" dir="rtl" style="display:block;">
  <!-- Le JS injectera ici le HTML de la pagination et le texte "affichage 1-20 de X" -->
</div>
</div>

<!-- Create/Edit Modal -->
<div class="modal fade" id="bureauxFormModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-md modal-dialog-centered">
    <div class="modal-content">
      <form id="bureaux-form" novalidate>
        <div class="modal-header">
          <h5 class="modal-title" id="bureauxFormModalLabel">إضافة / تعديل مكتب جهوي</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="bureaux-id" />
          <div class="mb-2">
            <label class="form-label">الولاية / Gouvernorat *</label>
            <input id="gouvernorat" name="gouvernorat" class="form-control" required />
          </div>
          <div class="mb-2">
            <label class="form-label">العنوان</label>
            <input id="adresse_bureau" name="adresse_bureau" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">الهاتف</label>
            <input id="telephone" name="telephone" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">الفاكس</label>
            <input id="fax" name="fax" class="form-control" />
          </div>
          <div class="mb-2">
            <label class="form-label">البريد الإلكتروني</label>
            <input id="courriel" name="courriel" type="email" class="form-control" />
          </div>
          <div id="bureaux-form-error" class="alert alert-danger d-none"></div>
        </div>
        <div class="modal-footer">
          <button type="submit" id="bureaux-save-btn"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">حفظ</button>
          <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete Confirm Modal -->
<div class="modal fade" id="bureauxDeleteModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">تأكيد الحذف</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body"><p id="bureauxDeleteText">هل أنت متأكد من حذف هذا السجل؟</p></div>
      <div class="modal-footer">
        <button type="button" id="bureauxDeleteCancel" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" id="bureauxDeleteConfirm" class="btn btn-danger">حذف</button>
      </div>
    </div>
  </div>
</div>
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // CONFIG
  const perPage = 15;         // lignes par page
  const windowSize = 2;       // pages autour de la page courante
  const table = document.getElementById('bureaux-table');
  if (!table) return;
  const tbody = table.querySelector('tbody');
  const paginationContainer = document.getElementById('bureaux-pagination-container');
  const searchInput = document.getElementById('bureaux-search');

  // Endpoints + token (depuis Blade)
  const JSON_URL = "{{ route('bureauxcommissaires.json') }}";
  const STORE_URL = "{{ route('bureauxcommissaires.store') }}";
  const CSRF = "{{ csrf_token() }}";

  // State
  let allItems = [];      // [{id?, gouvernorat, adresse_bureau, telephone, fax, courriel}]
  let filtered = [];      // sous-ensemble selon recherche
  let currentPage = 1;
  let totalPages = 1;

  // Helpers: read server-rendered rows even s'il n'y a pas data-id
  function readInitialRows() {
    const rows = Array.from(tbody.querySelectorAll('tr')).filter(tr => !!tr.querySelector('.col-gouv'));
    return rows.map(tr => ({
      id: tr.dataset.id || null,
      gouvernorat: (tr.querySelector('.col-gouv')?.textContent || '').trim(),
      adresse_bureau: (tr.querySelector('.col-adresse')?.textContent || '').trim(),
      telephone: (tr.querySelector('.col-tel')?.textContent || '').trim(),
      fax: (tr.querySelector('.col-fax')?.textContent || '').trim(),
      courriel: (tr.querySelector('.col-mail')?.textContent || '').trim(),
    }));
  }

  // Render a slice of items into tbody (replaces tbody content)
  function renderTablePage(itemsSlice) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }

    tbody.innerHTML = itemsSlice.map((it) => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-gouv">${escapeHtml(it.gouvernorat)}</td>
        <td class="col-adresse">${escapeHtml(it.adresse_bureau)}</td>
        <td class="col-tel">${escapeHtml(it.telephone)}</td>
        <td class="col-fax">${escapeHtml(it.fax)}</td>
        <td class="col-mail">${escapeHtml(it.courriel)}</td>
        <td class="text-end">
          <button class="btn btn-icon btn-icon-outline btn-edit" aria-label="تعديل"><i class="bx bx-edit"></i></button>
          <button class="btn btn-icon btn-icon-danger btn-delete" aria-label="حذف"><i class="bx bx-trash"></i></button>
        </td>
      </tr>
    `).join('');
    attachRowHandlers(); // attache edit/delete aux lignes affichées
  }

  // escape helper
  function escapeHtml(s){ if (s == null) return ''; return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  // Build pagination HTML and attach handlers
  function updatePaginationUI() {
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    if (currentPage > totalPages) currentPage = totalPages;
    const firstItem = filtered.length === 0 ? 0 : ((currentPage - 1) * perPage + 1);
    const lastItem = Math.min(filtered.length, currentPage * perPage);

    const start = Math.max(1, currentPage - windowSize);
    const end = Math.min(totalPages, currentPage + windowSize);

    let html = `
      <div class="d-flex justify-content-between align-items-center flex-row-reverse">
        <div>
          <small class="text-muted">عرض ${firstItem} - ${lastItem} من ${filtered.length}</small>
        </div>
        <nav aria-label="Pagination" class="mx-auto">
          <ul class="pagination mb-0 align-items-center pagination-centered" role="navigation" style="direction: ltr;">
            <li class="page-item ${currentPage <= 1 ? 'disabled' : ''}">
              <a class="page-link page-nav" data-page="${currentPage - 1}" href="#" aria-label="السابق" title="السابق">
                <i class="bx bx-chevron-left"></i>
              </a>
            </li>
    `;

    if (start > 1) {
      html += `<li class="page-item"><a class="page-link page-nav" data-page="1" href="#">1</a></li>`;
      if (start > 2) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
    }

    for (let p = start; p <= end; p++) {
      html += `<li class="page-item ${p === currentPage ? 'active' : ''}">` +
              `<a class="page-link page-nav" data-page="${p}" href="#">${p}</a></li>`;
    }

    if (end < totalPages) {
      if (end < totalPages - 1) html += `<li class="page-item disabled"><span class="page-link">…</span></li>`;
      html += `<li class="page-item"><a class="page-link page-nav" data-page="${totalPages}" href="#">${totalPages}</a></li>`;
    }

    html += `
            <li class="page-item ${currentPage >= totalPages ? 'disabled' : ''}">
              <a class="page-link page-nav" data-page="${currentPage + 1}" href="#" aria-label="التالي" title="التالي">
                <i class="bx bx-chevron-right"></i>
              </a>
            </li>
          </ul>
        </nav>
        <div style="min-width:140px; text-align:left;">
          <small class="text-muted">صفحة ${currentPage} / ${totalPages}</small>
        </div>
      </div>
    `;

    paginationContainer.innerHTML = html;

    // Attach handlers
    paginationContainer.querySelectorAll('.page-link.page-nav').forEach(a => {
      a.addEventListener('click', function (ev) {
        ev.preventDefault();
        const p = parseInt(this.dataset.page, 10) || 1;
        if (p < 1 || p > totalPages || p === currentPage) return;
        goToPage(p);
        table.scrollIntoView({ behavior: 'smooth', block: 'start' });
      });
    });
  }

  // Navigate to page -> render slice
  function goToPage(page) {
    currentPage = Math.max(1, Math.min(page, totalPages));
    const startIdx = (currentPage - 1) * perPage;
    const slice = filtered.slice(startIdx, startIdx + perPage);
    renderTablePage(slice);
    updatePaginationUI();
  }

  // Apply search filtering
  function applySearch(q) {
    const term = (q || '').trim().toLowerCase();
    if (!term) filtered = allItems.slice();
    else filtered = allItems.filter(it =>
      (
        (it.gouvernorat || '') + ' ' +
        (it.adresse_bureau || '') + ' ' +
        (it.telephone || '') + ' ' +
        (it.fax || '') + ' ' +
        (it.courriel || '')
      ).toLowerCase().indexOf(term) !== -1
    );
    currentPage = 1;
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

  // Fetch fresh data from JSON endpoint and replace allItems
  async function refreshData() {
    tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted py-3">جارٍ التحميل ...</td></tr>';
    try {
      const res = await fetch(JSON_URL, { credentials:'same-origin', headers:{ 'X-Requested-With':'XMLHttpRequest', 'Accept':'application/json' }});
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const json = await res.json();
      if (!json || json.success !== true || !Array.isArray(json.data)) throw new Error('invalid json');
      allItems = json.data.map(it => ({
        id: it.id ?? null,
        gouvernorat: it.gouvernorat ?? '',
        adresse_bureau: it.adresse_bureau ?? '',
        telephone: it.telephone ?? '',
        fax: it.fax ?? '',
        courriel: it.courriel ?? ''
      }));
    } catch (err) {
      console.error('refreshData error', err);
      showMessage('danger', 'خطأ في التحميل');
    }
    applySearch(searchInput ? searchInput.value : '');
  }

  // UI helper messages
  const messages = document.getElementById('pageMessages');
  function showMessage(type, text, timeout = 3500) {
    if (!messages) return;
    const div = document.createElement('div');
    div.className = `alert alert-${type} alert-dismissible fade show`;
    div.role = 'alert';
    div.innerHTML = `${text}<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
    messages.appendChild(div);
    if (timeout > 0) setTimeout(()=> { try { bootstrap.Alert.getOrCreateInstance(div).close(); } catch(e){ div.remove(); } }, timeout);
  }

  // Attach Edit/Delete handlers for currently rendered rows
  function attachRowHandlers() {
    // remove previous listeners by cloning rows (prevents duplicate handlers)
    tbody.querySelectorAll('tr').forEach(tr => {
      const clone = tr.cloneNode(true);
      tr.parentNode.replaceChild(clone, tr);
    });

    // EDIT
    tbody.querySelectorAll('.btn-edit').forEach(btn => {
      btn.addEventListener('click', function () {
        const tr = this.closest('tr');
        const id = tr?.dataset?.id || null;
        // If server supports fetch by id, we use that; otherwise we populate modal from row text
        if (id) {
          fetch(`{{ url('/bureauxcommissaires') }}/${encodeURIComponent(id)}`, { credentials:'same-origin', headers:{ 'Accept':'application/json' }})
            .then(r => r.json().catch(()=>null))
            .then(json => {
              if (json && json.success && json.data) {
                populateForm(json.data);
                bootstrap.Modal.getOrCreateInstance(document.getElementById('bureauxFormModal')).show();
              } else {
                showMessage('danger', (json && json.message) ? json.message : 'تعذّر جلب بيانات السجل');
              }
            })
            .catch(err => {
              console.error('fetch show error', err);
              showMessage('danger', 'خطأ في الاتصال عند جلب السجل');
            });
        } else {
          // populate from row cells (fallback)
          const data = {
            id: null,
            gouvernorat: tr.querySelector('.col-gouv')?.textContent?.trim() || '',
            adresse_bureau: tr.querySelector('.col-adresse')?.textContent?.trim() || '',
            telephone: tr.querySelector('.col-tel')?.textContent?.trim() || '',
            fax: tr.querySelector('.col-fax')?.textContent?.trim() || '',
            courriel: tr.querySelector('.col-mail')?.textContent?.trim() || ''
          };
          populateForm(data);
          bootstrap.Modal.getOrCreateInstance(document.getElementById('bureauxFormModal')).show();
        }
      });
    });

    // DELETE
    tbody.querySelectorAll('.btn-delete').forEach(btn => {
      btn.addEventListener('click', function () {
        const tr = this.closest('tr');
        const id = tr?.dataset?.id || null;
        const deleteModalEl = document.getElementById('bureauxDeleteModal');
        const deleteModal = bootstrap.Modal.getOrCreateInstance(deleteModalEl);
        const deleteText = document.getElementById('bureauxDeleteText');
        const name = (tr.querySelector('.col-gouv')?.textContent || '').trim();
        deleteText.textContent = name ? `هل أنت متأكد من حذف مكتب "${name}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();

        const confirmBtn = document.getElementById('bureauxDeleteConfirm');
        const newBtn = confirmBtn.cloneNode(true);
        confirmBtn.parentNode.replaceChild(newBtn, confirmBtn);

        newBtn.addEventListener('click', function () {
          newBtn.disabled = true;
          // If we have id, call DELETE /resource/{id}; otherwise, attempt a POST with identifying fields (fallback)
          if (id) {
            fetch(`{{ url('/bureauxcommissaires') }}/${encodeURIComponent(id)}`, {
              method: 'DELETE',
              credentials: 'same-origin',
              headers: { 'Accept':'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With':'XMLHttpRequest' }
            })
            .then(async res => {
              const json = await res.json().catch(()=>null);
              if (!res.ok) throw (json && json.message) ? new Error(json.message) : new Error('HTTP ' + res.status);
              return json;
            })
            .then(json => {
              if (json && json.success) {
                allItems = allItems.filter(it => String(it.id) !== String(id));
                applySearch(searchInput ? searchInput.value : '');
                showMessage('success', 'تم حذف السجل');
              } else {
                showMessage('danger', (json && json.message) ? json.message : 'تعذّر الحذف');
              }
            })
            .catch(err => {
              console.error('delete error', err);
              showMessage('danger', err.message || 'خطأ أثناء الحذف');
            })
            .finally(() => {
              newBtn.disabled = false;
              try { bootstrap.Modal.getOrCreateInstance(deleteModalEl).hide(); } catch(e){}
            });
          } else {
            // fallback: try deleting by unique field (telephone or courriel) using a POST endpoint
            const telef = tr.querySelector('.col-tel')?.textContent?.trim() || '';
            fetch(`{{ url('/bureauxcommissaires/delete-by') }}`, { // <-- assure-toi que ton backend a une route fallback
              method: 'POST',
              credentials: 'same-origin',
              headers: { 'Accept':'application/json', 'Content-Type':'application/json', 'X-CSRF-TOKEN': CSRF, 'X-Requested-With':'XMLHttpRequest' },
              body: JSON.stringify({ telephone: telef })
            })
            .then(async res => {
              const json = await res.json().catch(()=>null);
              if (!res.ok) throw (json && json.message) ? new Error(json.message) : new Error('HTTP ' + res.status);
              return json;
            })
            .then(json => {
              if (json && json.success) {
                // remove matching item(s) from allItems
                allItems = allItems.filter(it => (it.telephone || '') !== telef);
                applySearch(searchInput ? searchInput.value : '');
                showMessage('success', 'تم حذف السجل');
              } else {
                showMessage('danger', (json && json.message) ? json.message : 'تعذّر الحذف');
              }
            })
            .catch(err => {
              console.error('delete by fallback error', err);
              showMessage('danger', 'تعذّر حذف السجل (لا يوجد id و لم تُعرّف مسار حذف بديل)');
            })
            .finally(() => {
              newBtn.disabled = false;
              try { bootstrap.Modal.getOrCreateInstance(deleteModalEl).hide(); } catch(e){}
            });
          }
        }, { once: true });
      });
    });
  }

  // Form handling (create/update)
  const form = document.getElementById('bureaux-form');
  const saveBtn = document.getElementById('bureaux-save-btn');
  const formError = document.getElementById('bureaux-form-error');

  function populateForm(data = {}) {
    document.getElementById('bureaux-id').value = data.id || '';
    document.getElementById('gouvernorat').value = data.gouvernorat || '';
    document.getElementById('adresse_bureau').value = data.adresse_bureau || '';
    document.getElementById('telephone').value = data.telephone || '';
    document.getElementById('fax').value = data.fax || '';
    document.getElementById('courriel').value = data.courriel || '';
    clearFormError();
  }
  function clearForm() { populateForm({}); clearFormError(); }
  function showFormError(msg){ if(!formError) return alert(msg); formError.classList.remove('d-none'); formError.textContent = msg; }
  function clearFormError(){ if(!formError) return; formError.classList.add('d-none'); formError.textContent = ''; }
// === Ensure Add button opens modal ===
const addBtn = document.getElementById('bureaux-add-btn');
if (addBtn) {
  addBtn.addEventListener('click', function (e) {
    e.preventDefault();
    clearForm(); // reset inputs
    // show bootstrap modal
    const modalEl = document.getElementById('bureauxFormModal');
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
  });
}

  if (form) {
    form.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      clearFormError();
      const id = (document.getElementById('bureaux-id').value || '').trim();
      const payload = {
        gouvernorat: document.getElementById('gouvernorat').value.trim(),
        adresse_bureau: document.getElementById('adresse_bureau').value.trim() || null,
        telephone: document.getElementById('telephone').value.trim() || null,
        fax: document.getElementById('fax').value.trim() || null,
        courriel: document.getElementById('courriel').value.trim() || null,
      };
      if (!payload.gouvernorat) { showFormError('الولاية مطلوبة'); return; }

      const url = id ? `{{ url('/bureauxcommissaires') }}/${encodeURIComponent(id)}` : STORE_URL;
      const method = id ? 'PUT' : 'POST';
      if (saveBtn) saveBtn.disabled = true;

      try {
        const res = await fetch(url, {
          method: method,
          credentials: 'same-origin',
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'X-CSRF-TOKEN': CSRF,
            'X-Requested-With': 'XMLHttpRequest'
          },
          body: JSON.stringify(payload)
        });
        const json = await res.json().catch(()=>null);
        if (!res.ok) {
          const msg = (json && (json.message || JSON.stringify(json))) || `HTTP ${res.status}`;
          throw new Error(msg);
        }
        if (!json || json.success !== true) throw new Error((json && json.message) ? json.message : 'تعذّر حفظ السجل');

        const item = json.data;
        if (item) {
          // normalize and upsert into allItems (id may be null)
          const normalized = {
            id: item.id ?? null,
            gouvernorat: item.gouvernorat ?? payload.gouvernorat ?? '',
            adresse_bureau: item.adresse_bureau ?? payload.adresse_bureau ?? '',
            telephone: item.telephone ?? payload.telephone ?? '',
            fax: item.fax ?? payload.fax ?? '',
            courriel: item.courriel ?? payload.courriel ?? ''
          };
          if (normalized.id) {
            const idx = allItems.findIndex(it => String(it.id) === String(normalized.id));
            if (idx === -1) allItems.push(normalized); else allItems[idx] = normalized;
          } else {
            // try to update matching by telephone/email, otherwise push
            const idxByTel = normalized.telephone ? allItems.findIndex(it => it.telephone === normalized.telephone) : -1;
            if (idxByTel !== -1) allItems[idxByTel] = normalized;
            else allItems.push(normalized);
          }
        } else {
          await refreshData();
        }

        populateForm({});
        try { bootstrap.Modal.getOrCreateInstance(document.getElementById('bureauxFormModal')).hide(); } catch(e){}
        showMessage('success', id ? 'تم تحديث السجل' : 'تمت الإضافة بنجاح');

        applySearch(searchInput ? searchInput.value : '');
      } catch (err) {
        console.error('save error', err);
        showFormError(err.message || 'خطأ أثناء الحفظ');
      } finally {
        if (saveBtn) saveBtn.disabled = false;
      }
    });
  }

  // Initial boot: try to read server-rendered rows; if none, fetch JSON
  (function init() {
    const initial = readInitialRows();
    if (initial.length > 0) {
      allItems = initial;
      filtered = allItems.slice();
      totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
      goToPage(1);
    } else {
      refreshData();
    }

    if (searchInput) {
      let to = null;
      searchInput.addEventListener('input', function () {
        if (to) clearTimeout(to);
        to = setTimeout(() => {
          applySearch(this.value);
          to = null;
        }, 180);
      });
    }

    window.__bureauxClient = { refreshData, applySearch, goToPage, getState: () => ({ total: allItems.length, filtered: filtered.length, currentPage, totalPages }) };
  })();

});
</script>
@endpush


<style>
  

/* ---------- Banner: center title/subtitle + tighter top spacing ---------- */
/* Scope to .page-title-card so other banner variants won't be affected */
.page-title-card .card-body,
.page-title-card-sommaires .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;   /* put items to the right edge */
  text-align: right !important;       /* ensure inline text is right-aligned */
  justify-content: flex-start !important; /* keep vertical stacking at top */
  gap: 0.35rem;
  padding-top: 0.8rem;
  padding-bottom: 0.2rem;
}
/* ensure right-aligned helper classes (text-md-end) do not reassert on this card */
.page-title-card .text-md-end,
.page-title-card-sommaires .text-md-end {
  text-align: right !important;
}

/* tighten title/subtitle spacing */
.page-title-card .banner-title,
.page-title-card-sommaires .banner-title {
  margin-bottom: 0.12rem;  /* less vertical space under the title */
  line-height: 1.08;
}

/* smaller subtitle and less margin */
.page-title-card .banner-subtitle,
.page-title-card-sommaires .banner-subtitle,
.page-title-card small.text-muted,
.page-title-card-sommaires small.text-muted {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  color: rgba(16,32,46,0.6);
}

/* badges centered under title (keeps previous style but centers) */
.page-title-card .banner-stats,
.page-title-card-sommaires .banner-stats {
  display: flex;
  gap: .5rem;
  justify-content: right;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}

/* keep the decorative graphic hidden on narrow screens and positioned on wide screens */
@media (min-width: 768px) {
  /* If you still want the graphic on desktop, show and keep it aligned to the right visually */
  .page-title-card .banner-graphic,
  .page-title-card-sommaires .banner-graphic {
    display: block !important;
    margin-top: 2px;
  }
}

/* reduce the top margin that surrounds the whole card (if present elsewhere) */
.page-title-card,
.page-title-card-sommaires {
  margin-top: 0.4rem;  /* reduce overall top spacing relative to surrounding content */
  margin-bottom: 0.2rem;
}

/* small screens: ensure card body not cramped but centered */
@media (max-width:767.98px) {
  .page-title-card .card-body,
  .page-title-card-sommaires .card-body {
    padding-left: .75rem;
    padding-right: .75rem;
  }
}
/* add spacing above the page title (h3) */
.page-title-card-sommaires .card-body h3 {
  margin-top: 0.6rem; /* adjust value (e.g. 0.4rem - 1rem) to taste */
}
.page-title-card-sommaires{
  position: relative;       /* nécessaire pour le pseudo-élément */
  overflow: visible;        /* laisse la ligne dépasser si besoin */
  z-index: 0;
  border-radius: 16px;
  box-shadow: 0 6px 6px rgba(82, 155, 250, 0.08), 0 2px 8px rgba(28, 101, 238, 0.06) !important;

  max-height: 80px !important;
}

</style>

@endsection