@extends('layouts.app')

@section('title', 'قائمة المفوضين الإقليميين لشؤون المرأة')

@section('content')
{{-- <link rel="stylesheet" href="{{ asset('css/pages/users_index.css') }}"> --}}
@include('partials.unified-management-style')
@include('partials.form-editorial-style')
@include('partials.role-modal-system-style')
<style>
  #commissaires-table td:last-child {
    white-space: nowrap;
    min-width: 108px;
  }

  #commissaires-table .actions-cell {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: nowrap;
  }

  #commissaires-table .actions-cell .btn {
    margin: 0 !important;
  }
</style>
<div class="mb-4 editorial-page">
  <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" style="min-width:0;">
        <h4 class="mb-1 fw-bold banner-title">
          <i class="bx bx-shield-quarter ms-2"></i>
          قائمة المفوضين الإقليميين لشؤون المرأة
        </h4>
        <p class="mb-2 banner-subtitle">إدارة بيانات المفوضين الجهويين وتحيين معلومات الاتصال الرسمية</p>

        <div class="banner-stats d-flex flex-wrap gap-2 mt-2 justify-content-md-end" aria-hidden="false">
          <span class="banner-badge" title="إجمالي السجلات">
            <i class="bx bx-data align-middle ms-1"></i>
            إجمالي السجلات: <strong>{{ count($commissaires) }}</strong>
          </span>

          <span class="banner-badge" title="نوع السجل">
            <i class="bx bx-category align-middle ms-1"></i>
            التصنيف: <strong>مفوضون</strong>
          </span>
        </div>
      </div>

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

    <div id="pageMessages" class="m-3"></div>
</div>

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

    <!-- Controls row: ADD button at extreme LEFT, SEARCH at RIGHT (same line) -->
    <!-- container uses dir="ltr" so visual order is: button (left) ... search (right) even on an RTL page -->
<!-- Controls row: ADD button at extreme LEFT, SEARCH at extreme RIGHT (same line) -->
<div class="d-flex justify-content-between align-items-center mb-3 w-100" dir="ltr">

     <div class="d-flex gap-2">
    <button  class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement" data-bs-toggle="modal" data-bs-target="#commissairesFormModal" id="add-commissaire-btn">
       إضافة 
    <i class="bx bx-plus align-middle me-1"></i></button>
                  <a href="{{ route('commissaires.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">
    <input id="commissaire-search" type="text" class="form-control" placeholder="ابحث بالهيكل، الاسم، الهاتف، فاكس، المحمول أو البريد..." aria-label="بحث المفوضين">
  </div>
</div>

    <!-- end controls -->

    <div class="table-responsive">
      <table class="table table-hover table-striped" id="commissaires-table">
         <thead class="table-light">
            <tr>
                 {{-- <th style="width:48px">#</th> --}}
                <th>الهيكل</th>
                <th>الاسم واللقب</th>
                <th>الهاتف</th>
                <th>فاكس</th>
                <th>الهاتف المحمول</th>
                <th>البريد الإلكتروني</th>
                <th>إجراءات</th>
            </tr>
        </thead>
        <tbody>
            @foreach($commissaires as $i =>$c)
            <tr data-id="{{ $c->id }}">
                 {{-- <td>{{ $i + 1 }}</td> --}}
                <td>{{ $c->structure_mffpa }}</td>
                <td>{{ $c->prenom_nom }}</td>
                <td>{{ $c->telephone_fixe }}</td>
                <td>{{ $c->fax }}</td>
                <td>{{ $c->tel_portable }}</td>
                <td>{{ $c->mail }}</td>
                <td class="text-end">
                  <div class="actions-cell d-flex gap-1 justify-content-end">
                    <button class="btn btn-icon btn-icon-outline edit-btn"><i class="bx bx-edit"></i></button>
                    <button class="btn btn-icon btn-icon-danger delete-btn"><i class="bx bx-trash"></i></button>
                  </div>
                </td>
            </tr>
            @endforeach
        </tbody>
      </table>
    </div>
  </div>
  <div id="commissaires-pagination-container" class="card-footer border-0" dir="rtl" style="display:block;">
  <!-- JS will inject pagination HTML and "Affichage X - Y de Z" text -->
</div>
</div>

<!-- Form Modal -->
<div class="modal fade summary-role-modal" id="commissairesFormModal" tabindex="-1" aria-labelledby="commissairesFormModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content edit-role-modal-content">
      <div class="edit-role-modal-header">
        <div class="edit-role-header-icon">
          <i class="bx bx-shield-plus"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="commissairesFormModalLabel">إضافة / تعديل مفوض</h5>
          <span class="edit-role-modal-subtitle">تحيين بيانات المفوض الجهوي ومعلومات الاتصال</span>
        </div>
        <button type="button" class="edit-role-close-btn" data-bs-dismiss="modal" aria-label="إغلاق">
          <i class="bx bx-x"></i>
        </button>
      </div>

      <form id="commissaire-form" novalidate>
        <div class="modal-body edit-role-modal-body">
          <input type="hidden" id="commissaire-id">
          <div id="commissaire-form-error" class="alert alert-danger d-none"></div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="structure_mffpa">
              <i class="bx bx-buildings"></i>
              الهيكل
            </label>
            <input type="text" class="edit-role-input form-control" id="structure_mffpa" name="structure_mffpa">
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="prenom_nom">
              <i class="bx bx-user"></i>
              الاسم واللقب *
            </label>
            <input type="text" class="edit-role-input form-control" id="prenom_nom" name="prenom_nom" required>
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="telephone_fixe">
              <i class="bx bx-phone"></i>
              الهاتف
            </label>
            <input type="text" class="edit-role-input form-control" id="telephone_fixe" name="telephone_fixe">
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="fax">
              <i class="bx bx-printer"></i>
              فاكس
            </label>
            <input type="text" class="edit-role-input form-control" id="fax" name="fax">
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="tel_portable">
              <i class="bx bx-mobile-alt"></i>
              الهاتف المحمول
            </label>
            <input type="text" class="edit-role-input form-control" id="tel_portable" name="tel_portable">
          </div>

          <div class="edit-role-field-group mb-0">
            <label class="edit-role-label" for="mail">
              <i class="bx bx-envelope"></i>
              البريد الإلكتروني
            </label>
            <input type="email" class="edit-role-input form-control" id="mail" name="mail">
          </div>
        </div>

        <div class="edit-role-modal-footer">
          <button type="button" class="edit-role-btn-cancel" data-bs-dismiss="modal">
            <i class="bx bx-x-circle"></i>
            إلغاء
          </button>
          <button type="submit" id="commissaire-save-btn" class="edit-role-btn-save">
            <i class="bx bx-save"></i>
            حفظ
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade summary-role-modal" id="commissairesDeleteModal" tabindex="-1" aria-labelledby="commissairesDeleteModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content edit-role-modal-content">
      <div class="edit-role-modal-header edit-role-danger-header">
        <div class="edit-role-header-icon">
          <i class="bx bx-trash"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="commissairesDeleteModalLabel">تأكيد الحذف</h5>
          <span class="edit-role-modal-subtitle">هذا الإجراء لا يمكن التراجع عنه</span>
        </div>
        <button type="button" class="edit-role-close-btn" data-bs-dismiss="modal" aria-label="إغلاق">
          <i class="bx bx-x"></i>
        </button>
      </div>

      <div class="modal-body edit-role-modal-body edit-role-danger-body">
        <p id="commissairesDeleteText" class="delete-confirm-text">هل أنت متأكد من حذف هذا السجل؟</p>
      </div>

      <div class="edit-role-modal-footer justify-content-center">
        <button type="button" id="commissairesDeleteConfirm" class="edit-role-btn-delete">
          <i class="bx bx-trash"></i>
          حذف
        </button>
        <button type="button" id="commissairesDeleteCancel" class="edit-role-btn-cancel" data-bs-dismiss="modal">
          <i class="bx bx-x-circle"></i>
          إلغاء
        </button>
      </div>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Elements and globals
    const form = document.getElementById('commissaire-form');
    const formModalEl = document.getElementById('commissairesFormModal');
    const formModal = new bootstrap.Modal(formModalEl);
    const tableTbody = document.getElementById('commissaires-table').querySelector('tbody');
    const errorBox = document.getElementById('commissaire-form-error');

    // Delete modal
    const deleteModalEl = document.getElementById('commissairesDeleteModal');
    const deleteModal = new bootstrap.Modal(deleteModalEl);
    const deleteConfirmBtn = document.getElementById('commissairesDeleteConfirm');
    const deleteTextEl = document.getElementById('commissairesDeleteText');

    let pendingDeleteRow = null; // <tr> element waiting deletion

    // Search input
    const searchInput = document.getElementById('commissaire-search');

    // showMessage helper (Bootstrap alerts)
    function showMessage(type, text, timeout = 4000) {
        const container = document.getElementById('pageMessages');
        if (!container) { alert(text); return; }
        const id = 'msg-' + Date.now();
        const div = document.createElement('div');
        div.className = `alert alert-${type} alert-dismissible fade show`;
        div.role = 'alert';
        div.id = id;
        div.innerHTML = `<div>${escapeHtml(text)}</div>
                         <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>`;
        container.appendChild(div);
        if (timeout > 0) {
            setTimeout(() => {
                const bsAlert = bootstrap.Alert && bootstrap.Alert.getOrCreateInstance
                    ? bootstrap.Alert.getOrCreateInstance(div) : null;
                if (bsAlert && typeof bsAlert.close === 'function') bsAlert.close();
                else div.remove();
            }, timeout);
        }
    }

    function showError(message) {
        if (!errorBox) { showMessage('danger', message); return; }
        errorBox.classList.remove('d-none');
        errorBox.textContent = message;
    }
    function clearError() {
        if (!errorBox) return;
        errorBox.classList.add('d-none');
        errorBox.textContent = '';
    }

    // Helper: populate/clear form
    function populateForm(data = {}) {
        document.getElementById('commissaire-id').value = data.id || '';
        document.getElementById('structure_mffpa').value = data.structure_mffpa || '';
        document.getElementById('prenom_nom').value = data.prenom_nom || '';
        document.getElementById('telephone_fixe').value = data.telephone_fixe || '';
        document.getElementById('fax').value = data.fax || '';
        document.getElementById('tel_portable').value = data.tel_portable || '';
        document.getElementById('mail').value = data.mail || '';
    }
    function clearForm() { populateForm({}); clearError(); }

    // When Add clicked: clear and show
    document.getElementById('add-commissaire-btn').addEventListener('click', () => {
        clearForm();
        formModal.show();
    });

    // Submit form (create/update)
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        clearError();

        const id = document.getElementById('commissaire-id').value.trim();
        const payload = {
            structure_mffpa: document.getElementById('structure_mffpa').value.trim(),
            prenom_nom: document.getElementById('prenom_nom').value.trim(),
            telephone_fixe: document.getElementById('telephone_fixe').value.trim(),
            fax: document.getElementById('fax').value.trim(),
            tel_portable: document.getElementById('tel_portable').value.trim(),
            mail: document.getElementById('mail').value.trim(),
        };

        if (!payload.prenom_nom) { showError('الاسم واللقب مطلوب'); return; }

        const url = id ? `/commissaires/${encodeURIComponent(id)}` : '/commissaires';
        const method = id ? 'PUT' : 'POST';
        const saveBtn = document.getElementById('commissaire-save-btn');
        if (saveBtn) saveBtn.disabled = true;

        fetch(url, {
            method: method,
            credentials: 'same-origin',
            headers: {
                'Content-Type':'application/json',
                'Accept':'application/json',
                'X-CSRF-TOKEN':'{{ csrf_token() }}'
            },
            body: JSON.stringify(payload)
        })
        .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) {
                // hide modal, show message
                formModal.hide();
                clearForm();
                showMessage('success', id ? 'تم تحديث المفوض بنجاح' : 'تم إضافة المفوض بنجاح');

                // Update table inline
               if (json.data && json.data.id) {
                    const item = json.data;
                    const existingRow = tableTbody.querySelector(`tr[data-id="${item.id}"]`);

                    const rowHtml = `
                        <tr data-id="${item.id}">
                            <td>${escapeHtml(item.structure_mffpa || '')}</td>
                            <td class="col-nom">${escapeHtml(item.prenom_nom || '')}</td>
                            <td>${escapeHtml(item.telephone_fixe || '')}</td>
                            <td>${escapeHtml(item.fax || '')}</td>
                            <td>${escapeHtml(item.tel_portable || '')}</td>
                            <td>${escapeHtml(item.mail || '')}</td>
                            <td class="text-end">
                              <div class="actions-cell d-flex gap-1 justify-content-end">
                                <button class="btn btn-icon btn-icon-outline edit-btn"><i class="bx bx-edit"></i></button>
                                <button class="btn btn-icon btn-icon-danger delete-btn"><i class="bx bx-trash"></i></button>
                              </div>
                            </td>
                        </tr>`;

                    if (existingRow) {
                        existingRow.outerHTML = rowHtml;
                    } else {
                        tableTbody.insertAdjacentHTML('beforeend', rowHtml);
                    }
                    // IMPORTANT: re-attach handlers (we export attachRowHandlers below, but calling here ensures immediate availability)
                    try { if (typeof attachRowHandlers === 'function') attachRowHandlers(); } catch(e){ console.warn(e); }
                } else {
                    // fallback
                    location.reload();
                }
            } else {
                throw new Error((json && json.message) ? json.message : 'تعذر حفظ البيانات');
            }
        })
        .catch(err => {
            console.error('commissaire save error', err);
            showError(err.message || 'خطأ غير معروف');
            showMessage('danger', err.message || 'خطأ غير معروف');
        })
        .finally(() => {
            if (saveBtn) saveBtn.disabled = false;
        });
    });

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

    // Attach handlers to rows (edit/delete)
    function attachRowHandlers() {
        // clone to remove previous listeners
        tableTbody.querySelectorAll('tr').forEach(tr => {
            const newTr = tr.cloneNode(true);
            tr.parentNode.replaceChild(newTr, tr);
        });

        // edit
        tableTbody.querySelectorAll('.edit-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tr = this.closest('tr');
                const id = tr.dataset.id;
                if (!id) return;
                fetch(`/commissaires/${encodeURIComponent(id)}`, {
                    credentials:'same-origin',
                    headers: { 'Accept':'application/json' }
                })
                .then(res => res.json().catch(()=>null))
                .then(json => {
                    if (json && json.success && json.data) {
                        populateForm(json.data);
                        formModal.show();
                    } else {
                        showMessage('danger', (json && json.message) ? json.message : 'تعذر جلب بيانات السجل');
                    }
                })
                .catch(err => {
                    console.error('fetch commissaire error', err);
                    showMessage('danger', 'خطأ في الاتصال عند جلب السجل');
                });
            });
        });

        // delete (open modal)
        tableTbody.querySelectorAll('.delete-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                const tr = this.closest('tr');
                const id = tr ? tr.dataset.id : null;
                if (!id) return;
                pendingDeleteRow = tr;
                const name = (tr.querySelectorAll('td')[1] && tr.querySelectorAll('td')[1].textContent) || '';
                deleteTextEl.textContent = name ? `هل أنت متأكد من حذف "${name.trim()}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
                deleteModal.show();
            });
        });
    }

    // EXPORT attachRowHandlers so other scripts (pagination rendering) can call it
    window.attachRowHandlers = attachRowHandlers;

    // Handle delete confirm button
    deleteConfirmBtn.addEventListener('click', function() {
        if (!pendingDeleteRow) { deleteModal.hide(); return; }
        const id = pendingDeleteRow.dataset.id;
        if (!id) { deleteModal.hide(); return; }

        // disable confirm button while deleting
        deleteConfirmBtn.disabled = true;

        fetch(`/commissaires/${encodeURIComponent(id)}`, {
            method: 'DELETE',
            credentials: 'same-origin',
            headers: {
                'Accept':'application/json',
                'X-CSRF-TOKEN':'{{ csrf_token() }}'
            }
        })
        .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 row and show message
                pendingDeleteRow.remove();
                showMessage('success', 'تم حذف المفوض بنجاح');
            } else {
                showMessage('danger', (json && json.message) ? json.message : 'تعذّر الحذف');
            }
        })
        .catch(err => {
            console.error('delete commissaire error', err);
            showMessage('danger', err.message || 'خطأ في الاتصال أثناء الحذف');
        })
        .finally(() => {
            deleteConfirmBtn.disabled = false;
            deleteModal.hide();
            pendingDeleteRow = null;
        });
    });

    // When delete modal is closed, clear pending
    deleteModalEl.addEventListener('hidden.bs.modal', () => {
        pendingDeleteRow = null;
    });

    // initial attach
    attachRowHandlers();

    // clear form errors when the form modal is hidden
    formModalEl.addEventListener('hidden.bs.modal', () => {
        clearError();
    });

    // SEARCH: filter table rows (search across the first 6 columns)
    searchInput && searchInput.addEventListener('input', function() {
        const q = (this.value || '').trim().toLowerCase();
        const rows = tableTbody.querySelectorAll('tr');
        rows.forEach(row => {
            // check first 6 columns (structure, name, phone, fax, mobile, mail)
            const cells = Array.from(row.querySelectorAll('td')).slice(0, 6);
            const matched = q === '' || cells.some(td => (td.textContent || '').toLowerCase().includes(q));
            row.style.display = matched ? '' : 'none';
        });
    });

});
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
  // CONFIG
  const perPage = 15;       // lines per page
  const windowSize = 2;     // pages around current
  const table = document.getElementById('commissaires-table');
  if (!table) return;
  const tbody = table.querySelector('tbody');
  const paginationContainer = document.getElementById('commissaires-pagination-container');
  const searchInput = document.getElementById('commissaire-search');

  // read initial server rendered rows
  function readInitialRows() {
    const rows = Array.from(tbody.querySelectorAll('tr')).filter(tr => tr.querySelectorAll('td').length > 0);
    return rows.map((tr, idx) => {
      return {
        id: tr.dataset.id ?? null,
        structure_mffpa: (tr.children[0]?.textContent || '').trim(),
        prenom_nom: (tr.children[1]?.textContent || '').trim(),
        telephone_fixe: (tr.children[2]?.textContent || '').trim(),
        fax: (tr.children[3]?.textContent || '').trim(),
        tel_portable: (tr.children[4]?.textContent || '').trim(),
        mail: (tr.children[5]?.textContent || '').trim(),
        _rowIndex: idx
      };
    });
  }

  // state
  let allItems = readInitialRows();
  let filtered = allItems.slice();
  let currentPage = 1;
  let totalPages = Math.max(1, Math.ceil(filtered.length / perPage));

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

  // render a page
  function renderTablePage(itemsSlice, startOffset = 0) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tbody.innerHTML = '<tr><td colspan="7" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }

    tbody.innerHTML = itemsSlice.map((it, idx) => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td>${escapeHtml(it.structure_mffpa)}</td>
        <td class="col-nom">${escapeHtml(it.prenom_nom)}</td>
        <td>${escapeHtml(it.telephone_fixe)}</td>
        <td>${escapeHtml(it.fax)}</td>
        <td>${escapeHtml(it.tel_portable)}</td>
        <td>${escapeHtml(it.mail)}</td>
        <td class="text-end">
          <div class="actions-cell d-flex gap-1 justify-content-end">
            <button class="btn btn-icon btn-icon-outline edit-btn"><i class="bx bx-edit"></i></button>
            <button class="btn btn-icon btn-icon-danger delete-btn"><i class="bx bx-trash"></i></button>
          </div>
        </td>
      </tr>
    `).join('');

    // reattach your existing handlers for edit/delete (function exists in your page)
    try { if (typeof attachRowHandlers === 'function') attachRowHandlers(); } catch(e){ console.warn('attachRowHandlers missing', e); }
  }

  // update pagination UI (sliding window)
  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;

    // hook page links
    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' });
      });
    });
  }

  // go to page
  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, startIdx);
    updatePaginationUI();
  }

  // apply search
  function applySearch(q) {
    const term = (q || '').trim().toLowerCase();
    if (!term) {
      filtered = allItems.slice();
    } else {
      filtered = allItems.filter(it => {
        return (
          (it.structure_mffpa || '') + ' ' +
          (it.prenom_nom || '') + ' ' +
          (it.telephone_fixe || '') + ' ' +
          (it.fax || '') + ' ' +
          (it.tel_portable || '') + ' ' +
          (it.mail || '')
        ).toLowerCase().indexOf(term) !== -1;
      });
    }
    currentPage = 1;
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

  // If you later update table by AJAX, call this to replace allItems and refresh:
  function setAllItemsFromData(arr) {
    allItems = (Array.isArray(arr) ? arr : []).map((it, idx) => ({
      id: it.id ?? null,
      structure_mffpa: it.structure_mffpa ?? '',
      prenom_nom: it.prenom_nom ?? '',
      telephone_fixe: it.telephone_fixe ?? '',
      fax: it.fax ?? '',
      tel_portable: it.tel_portable ?? '',
      mail: it.mail ?? '',
      _rowIndex: idx
    }));
    applySearch(searchInput ? searchInput.value : '');
  }

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

  // initial render
  totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
  goToPage(1);

  // expose for debugging and for other scripts that may update the table:
  window.__commissairesClient = {
    goToPage, applySearch, setAllItemsFromData, getState: () => ({ total: allItems.length, filtered: filtered.length, currentPage, totalPages })
  };

});
</script>
@endsection