@extends('layouts.app')

@section('title', 'قائمة رئيسات خدمات المرأة و الأسرة بالجهات')

@section('content')

@include('partials.unified-management-style')
@include('partials.form-editorial-style')
@include('partials.role-modal-system-style')

  <div class="mb-4 editorial-page">
  <div class="index-page-header" 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-2 fw-bold banner-title">
          قائمة المفوضين الإقليميين لشؤون المرأة
        </h4>

        <p class="mb-3 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($cheffes ?? []) }}</strong>
          </span>

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

  
    </div>
  </div>

  <div id="pageMessages" class="m-3"></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="cheffes-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('sommaires.cheffes.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="cheffe-search" type="text" class="form-control" placeholder="ابحث بالاسم، الهيكل، الهاتف أو البريد..." aria-label="بحث رئيسات الخدمات">
             </div>
           </div>
    </div>


    <div class="table-responsive">
      <table class="table table-hover table-striped" id="cheffes-table">
        <colgroup>
          <col style="width:25%">
          <col style="width:30%">
          <col style="width:15%">
          <col style="width:15%">
          <col style="width:15%">
        </colgroup>
        <thead class="table-light">
          <tr>
            <th>الاسم و اللقب</th>
            <th>الهيكل</th>
            <th>الهاتف</th>
            <th>البريد الإلكتروني</th>
            <th class="text-end">إجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($cheffes as $i => $c)
            <tr data-id="{{ $c->id }}">
              <td class="col-nom">{{ $c->prenom_nom }}</td>
              <td class="col-structure">{{ $c->structure }}</td>
              <td class="col-telephone">{{ $c->telephone }}</td>
              <td class="col-email">{{ $c->email }}</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="5" class="text-center text-muted">لا توجد بيانات</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  <div id="cheffes-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 summary-role-modal" id="cheffeFormModal" tabindex="-1" 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-user-check"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="cheffeFormModalLabel">إضافة / تعديل رئيسة خدمة</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="cheffe-form" novalidate>
        <div class="modal-body edit-role-modal-body">
          <input type="hidden" id="cheffe-id" />
          <div id="cheffe-form-error" class="alert alert-danger d-none"></div>

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

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

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

          <div class="edit-role-field-group mb-0">
            <label class="edit-role-label" for="email">
              <i class="bx bx-envelope"></i>
              البريد الإلكتروني
            </label>
            <input id="email" name="email" type="email" class="edit-role-input form-control" />
          </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="cheffe-save-btn" class="edit-role-btn-save">
            <i class="bx bx-save"></i>
            حفظ
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Delete Confirm Modal -->
<div class="modal fade summary-role-modal" id="cheffeDeleteModal" tabindex="-1" 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">تأكيد الحذف</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="cheffeDeleteText" class="delete-confirm-text">هل أنت متأكد من حذف هذا السجل؟</p>
      </div>

      <div class="edit-role-modal-footer justify-content-center">
        <button type="button" id="cheffeDeleteConfirm" class="edit-role-btn-delete">
          <i class="bx bx-trash"></i>
          حذف
        </button>
        <button type="button" id="cheffeDeleteCancel" class="edit-role-btn-cancel" data-bs-dismiss="modal">
          <i class="bx bx-x-circle"></i>
          إلغاء
        </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('cheffes-table');
  if (!table) return;
  const tbody = table.querySelector('tbody');
  const paginationContainer = document.getElementById('cheffes-pagination-container');
  const searchInput = document.getElementById('cheffe-search');

  // Endpoints + token (depuis Blade)
  const JSON_URL = "{{ route('cheffes.json') }}";
  const STORE_URL = "{{ route('sommaires.cheffes.store') }}";
  const BASE_URL = "{{ url('/sommaires/cheffes') }}";
  const DESTROY_BASE = "{{ url('/sommaires/destroy') }}";
  const CSRF = "{{ csrf_token() }}";

  // State
  let allItems = [];      // [{id?, prenom_nom, structure, telephone, email}]
  let filtered = [];      // sous-ensemble selon recherche
  let currentPage = 1;
  let totalPages = 1;

  // Helpers: read server-rendered rows
  function readInitialRows() {
    const rows = Array.from(tbody.querySelectorAll('tr')).filter(tr => !!tr.querySelector('.col-nom'));
    return rows.map(tr => ({
      id: tr.dataset.id || null,
      prenom_nom: (tr.querySelector('.col-nom')?.textContent || '').trim(),
      structure: (tr.querySelector('.col-structure')?.textContent || '').trim(),
      telephone: (tr.querySelector('.col-telephone')?.textContent || '').trim(),
      email: (tr.querySelector('.col-email')?.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="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }

    tbody.innerHTML = itemsSlice.map((it) => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-nom">${escapeHtml(it.prenom_nom)}</td>
        <td class="col-structure">${escapeHtml(it.structure)}</td>
        <td class="col-telephone">${escapeHtml(it.telephone)}</td>
        <td class="col-email">${escapeHtml(it.email)}</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.prenom_nom || '') + ' ' +
        (it.structure || '') + ' ' +
        (it.telephone || '') + ' ' +
        (it.email || '')
      ).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="5" 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();
      console.log('cheffes JSON response:', json);
      if (!json || json.success !== true || !Array.isArray(json.data)) throw new Error('invalid json: ' + JSON.stringify(json));
      allItems = json.data.map(it => {
        console.log('mapping item:', it);
        return {
          id: it.id ?? null,
          prenom_nom: it.prenom_nom ?? '',
          structure: it.structure ?? '',
          telephone: it.telephone ?? '',
          email: it.email ?? ''
        };
      });
      console.log('cheffes items after mapping:', allItems);
    } catch (err) {
      console.error('refreshData error', err);
      showMessage('danger', 'خطأ في التحميل: ' + err.message);
    }
    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(`${BASE_URL}/${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('cheffeFormModal')).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,
            prenom_nom: tr.querySelector('.col-nom')?.textContent?.trim() || '',
            structure: tr.querySelector('.col-structure')?.textContent?.trim() || '',
            telephone: tr.querySelector('.col-telephone')?.textContent?.trim() || '',
            email: tr.querySelector('.col-email')?.textContent?.trim() || ''
          };
          populateForm(data);
          bootstrap.Modal.getOrCreateInstance(document.getElementById('cheffeFormModal')).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('cheffeDeleteModal');
        const deleteModal = bootstrap.Modal.getOrCreateInstance(deleteModalEl);
        const deleteText = document.getElementById('cheffeDeleteText');
        const name = (tr.querySelector('.col-nom')?.textContent || '').trim();
        deleteText.textContent = name ? `هل أنت متأكد من حذف "${name}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();

        const confirmBtn = document.getElementById('cheffeDeleteConfirm');
        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(`${DESTROY_BASE}/${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 email) using a POST endpoint
            const telef = tr.querySelector('.col-telephone')?.textContent?.trim() || '';
            fetch(`{{ url('/sommaires/delete-by') }}`, { // <-- make sure backend has fallback route
              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('cheffe-form');
  const saveBtn = document.getElementById('cheffe-save-btn');
  const formError = document.getElementById('cheffe-form-error');

  function populateForm(data = {}) {
    document.getElementById('cheffe-id').value = data.id || '';
    document.getElementById('prenom_nom').value = data.prenom_nom || '';
    document.getElementById('structure').value = data.structure || '';
    document.getElementById('telephone').value = data.telephone || '';
    document.getElementById('email').value = data.email || '';
    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('cheffes-add-btn');
if (addBtn) {
  addBtn.addEventListener('click', function (e) {
    e.preventDefault();
    clearForm(); // reset inputs
    // show bootstrap modal
    const modalEl = document.getElementById('cheffeFormModal');
    bootstrap.Modal.getOrCreateInstance(modalEl).show();
  });
}

  if (form) {
    form.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      clearFormError();
      const id = (document.getElementById('cheffe-id').value || '').trim();
      const payload = {
        prenom_nom: document.getElementById('prenom_nom').value.trim(),
        structure: document.getElementById('structure').value.trim() || null,
        telephone: document.getElementById('telephone').value.trim() || null,
        email: document.getElementById('email').value.trim() || null,
      };
      if (!payload.prenom_nom) { showFormError('الاسم واللقب مطلوب'); return; }

      const url = id ? `${BASE_URL}/${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,
            prenom_nom: item.prenom_nom ?? payload.prenom_nom ?? '',
            structure: item.structure ?? payload.structure ?? '',
            telephone: item.telephone ?? payload.telephone ?? '',
            email: item.email ?? payload.email ?? ''
          };
          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('cheffeFormModal')).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();
    }

    // ========== Search (debounced) ==========
    let to = null;

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

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

});
</script>
@endpush

@endsection