@extends('layouts.app')

@section('title', 'قائمة الفرق / Equipes')

@section('content')

<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">

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

<style>
  /* Keep action buttons compact and prevent last column from expanding */
  #equipes-table td:last-child {
    white-space: nowrap;
    min-width: 108px;
  }

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

  #equipes-table .actions-cell .btn {
    margin: 0 !important;
  }
</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-1 fw-bold banner-title">
    
          الفرق المختصة ضد العنف
        </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 id="statTotal">{{ count($equipes ?? []) }}</strong>
          </span>

          <span class="banner-badge" title="الهياكل الأمنية">
            <i class="bx bx-shield-quarter 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="equipe-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('equipes.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="equipe-search" type="text" class="form-control" placeholder="ابحث بالهيكل، الفريق، المقر أو الهاتف…" aria-label="بحث الفرق">
             </div>
           </div>
    </div>
    <!-- end controls -->

 <div class="table-responsive">
   <table class="table table-hover table-striped management-table" id="equipes-table">
     <colgroup>
       <col style="width:30%">
       <col style="width:30%">
       <col style="width:20%">
       <col style="width:15%">
       <col style="width:5%">
     </colgroup>
        <thead class="table-light">
          <tr>
            <th>الهياكل الأمنية</th>
            <th>الفرقة المختصة</th>
            <th>مقر الفرقة</th>
            <th>الهاتف</th>
            <th class="text-end" style="width:120px">إجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($equipes as $i => $e)
            <tr data-id="{{ $e->id }}">
              <td class="col-structure">{{ $e->structure?->nom }}</td>
              <td class="col-nom">{{ $e->nom }}</td>
              <td class="col-siege">{{ $e->siege }}</td>
              <td class="col-tel">{{ $e->tel }}</td>
              <td class="text-end">
                <div class="actions-cell d-flex gap-1 justify-content-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>
                </div>
              </td>
            </tr>
          @empty
            <tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  <div id="equipe-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>

<!-- ================= MODALS (UNCHANGED LOGIC) ================= -->


@include('modals.equipes-modal')

<!-- Create/Edit Modal -->
<div class="modal fade summary-role-modal" id="equipeFormModal" 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-group"></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>

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

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="structure_id">
              <i class="bx bx-shield-quarter"></i>
              الهياكل الأمنية
            </label>
            <select id="structure_id" name="structure_id" class="edit-role-input form-select" required>
              <option value="">-- اختر الهيكل --</option>
            </select>
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="nom">
              <i class="bx bx-id-card"></i>
              الفرقة المختصة بـــ
            </label>
            <input id="nom" name="nom" class="edit-role-input form-control" required />
          </div>

          <div class="edit-role-field-group">
            <label class="edit-role-label" for="siege">
              <i class="bx bx-map-pin"></i>
              مقر الفرقة المختصة
            </label>
            <input id="siege" name="siege" class="edit-role-input form-control" />
          </div>

          <div class="edit-role-field-group mb-0">
            <label class="edit-role-label" for="tel">
              <i class="bx bx-phone"></i>
              الهاتف
            </label>
            <input id="tel" name="tel" 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="equipe-save-btn" class="edit-role-btn-save">
            <i class="bx bx-save"></i>
            حفظ
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

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

      <div class="edit-role-modal-footer justify-content-center">
        <button type="button" id="equipeDeleteConfirm" class="edit-role-btn-delete">
          <i class="bx bx-trash"></i>
          حذف
        </button>
        <button type="button" id="equipeDeleteCancel" 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 () {
  // elements
  const table = document.getElementById('equipes-table');
  if (!table) return;
  const tableBody = table.querySelector('tbody');
  const paginationContainer = document.getElementById('equipe-pagination-container');
  const searchInput = document.getElementById('equipe-search');

  const addBtn = document.getElementById('equipe-add-btn');
  const messages = document.getElementById('pageMessages');

  const formModalEl = document.getElementById('equipeFormModal');
  const formModal = new bootstrap.Modal(formModalEl);
  const form = document.getElementById('equipe-form');
  const saveBtn = document.getElementById('equipe-save-btn');
  const formError = document.getElementById('equipe-form-error');

  const deleteModalEl = document.getElementById('equipeDeleteModal');
  const deleteModal = new bootstrap.Modal(deleteModalEl);
  const deleteConfirmBtn = document.getElementById('equipeDeleteConfirm');
  const deleteText = document.getElementById('equipeDeleteText');

  const JSON_URL = "{{ route('equipes.json') }}";          // returns flat list of equipes
  const STRUCTURES_URL = "{{ route('structures.json') }}"; // returns list of structures for select
  const STORE_URL = "{{ route('equipes.store') }}";
  const CSRF = "{{ csrf_token() }}";

  let pendingDeleteRow = null;

  // PAGINATION CONFIG
  const perPage = 15;
  const windowSize = 2;

  // state arrays
  function readInitialRows() {
    const rows = Array.from(tableBody.querySelectorAll('tr')).filter(tr => tr.querySelectorAll('td').length > 0);
    return rows.map((tr, idx) => {
      const tds = tr.querySelectorAll('td');
      return {
        id: tr.dataset.id ?? null,
        structure_nom: (tds[0]?.textContent || '').trim(),
        nom: (tds[1]?.textContent || '').trim(),
        siege: (tds[2]?.textContent || '').trim(),
        tel: (tds[3]?.textContent || '').trim(),
        _rowIndex: idx
      };
    });
  }

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

  // utilities
  function showMessage(type, text, timeout = 3500) {
    if (!messages) return alert(text);
    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);
  }
  function escapeHtml(s){ if (s == null) return ''; return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }

  // Fill structures select
  async function loadStructures() {
    try {
      const res = await fetch(STRUCTURES_URL, { credentials:'same-origin', headers:{ 'Accept':'application/json' }});
      if (!res.ok) throw new Error('HTTP ' + res.status);
      const json = await res.json();
      if (!json || !json.success || !Array.isArray(json.data)) throw new Error('invalid json');
      const sel = document.getElementById('structure_id');
      sel.innerHTML = '<option value="">-- اختر الهيكل --</option>';
      json.data.forEach(s => {
        const opt = document.createElement('option');
        opt.value = s.id;
        opt.textContent = s.nom;
        sel.appendChild(opt);
      });
    } catch (err) {
      console.error('loadStructures error', err);
    }
  }

  // ========== Pagination renderers ==========
  function renderTablePage(itemsSlice = []) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
      attachRowHandlers();
      return;
    }

    tableBody.innerHTML = itemsSlice.map(it => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-structure">${escapeHtml(it.structure_nom || '')}</td>
        <td class="col-nom">${escapeHtml(it.nom || '')}</td>
        <td class="col-siege">${escapeHtml(it.siege || '')}</td>
        <td class="col-tel">${escapeHtml(it.tel || '')}</td>
        <td class="text-end">
          <button class="btn btn-icon btn-icon-outline btn-edit"><i class="bx bx-edit"></i></button>
          <button class="btn btn-icon btn-icon-danger btn-delete"><i class="bx bx-trash"></i></button>
        </td>
      </tr>
    `).join('');

    // reattach existing handlers
    try { if (typeof attachRowHandlers === 'function') attachRowHandlers(); } catch(e){ /* ignore */ }
    attachRowHandlers(); // ensure internal handlers are attached too
  }

  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:right;" dir="rtl">
          <small class="text-muted">صفحة ${currentPage} / ${totalPages}</small>
        </div>
      </div>
    `;
    if (paginationContainer) paginationContainer.innerHTML = html;

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

  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();
  }

  // update whole dataset and re-run filtering + pagination
  function setAllItemsFromData(arr) {
    allItems = (Array.isArray(arr) ? arr : []).map((it, idx) => ({
      id: it.id ?? null,
      structure_nom: it.structure_nom ?? '',
      nom: it.nom ?? '',
      siege: it.siege ?? '',
      tel: it.tel ?? '',
      _rowIndex: idx
    }));
    applySearch(searchInput ? searchInput.value : '');
  }

  // ========== Data fetch / refresh ==========
  async function refreshData(){
    // show loading
    tableBody.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();
      if (!json || json.success !== true || !Array.isArray(json.data)) throw new Error('invalid json');

      const items = json.data.map(it => ({
        id: it.id,
        structure_nom: it.structure_nom ?? (it.structure && it.structure.nom) ?? '',
        nom: it.nom ?? '',
        siege: it.siege ?? '',
        tel: it.tel ?? ''
      }));
      setAllItemsFromData(items);
      if (searchInput) searchInput.value = '';
    } catch (err) {
      console.error('refreshData error', err);
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">خطأ في التحميل</td></tr>';
      showMessage('danger', 'خطأ في التحميل');
    }
  }

  // on page load, if server rendered rows exist, collect them into allItems
  function collectInitialRows() {
    const rows = Array.from(tableBody.querySelectorAll('tr[data-id]'));
    if (!rows.length) return;
    const items = rows.map((tr, idx) => {
      const tds = tr.querySelectorAll('td');
      return {
        id: tr.dataset.id,
        structure_nom: (tds[0] && tds[0].textContent.trim()) || '',
        nom: (tds[1] && tds[1].textContent.trim()) || '',
        siege: (tds[2] && tds[2].textContent.trim()) || '',
        tel: (tds[3] && tds[3].textContent.trim()) || '',
      };
    });
    setAllItemsFromData(items);
  }

  // ========== Form create/update ==========
  function populateForm(d = {}) {
    document.getElementById('equipe-id').value = d.id || '';
    document.getElementById('structure_id').value = d.structure_id || '';
    document.getElementById('nom').value = d.nom || '';
    document.getElementById('siege').value = d.siege || '';
    document.getElementById('tel').value = d.tel || '';
    clearFormError();
  }
  function clearForm() { populateForm({}); clearFormError(); }
  function showFormError(m){ if(!formError) return alert(m); formError.classList.remove('d-none'); formError.textContent = m; }
  function clearFormError(){ if(!formError) return; formError.classList.add('d-none'); formError.textContent = ''; }

  addBtn && addBtn.addEventListener('click', (e) => {
    e.preventDefault();
    clearForm();
    loadStructures();
    formModal.show();
  });

  form.addEventListener('submit', async function(ev){
    ev.preventDefault();
    clearFormError();
    const id = (document.getElementById('equipe-id').value || '').trim();
    const payload = {
      structure_id: document.getElementById('structure_id').value || null,
      nom: document.getElementById('nom').value.trim(),
      siege: document.getElementById('siege').value.trim() || null,
      tel: document.getElementById('tel').value.trim() || null,
    };
    if (!payload.structure_id) { showFormError('الهيكل مطلوب'); return; }
    if (!payload.nom) { showFormError('اسم الفريق مطلوب'); return; }

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

    try {
      const res = await fetch(url, {
        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) throw new Error((json && (json.message || JSON.stringify(json))) || `HTTP ${res.status}`);
      if (!json || json.success !== true) throw new Error((json && json.message) ? json.message : 'تعذّر حفظ السجل');

      formModal.hide();
      showMessage('success', id ? 'تم تحديث الفريق' : 'تمت الإضافة بنجاح');

      if (json.data && json.data.id) {
        const item = {
          id: json.data.id,
          structure_nom: json.data.structure_nom ?? '',
          nom: json.data.nom ?? '',
          siege: json.data.siege ?? '',
          tel: json.data.tel ?? ''
        };
        const idx = allItems.findIndex(x => String(x.id) === String(item.id));
        if (idx >= 0) {
          allItems[idx] = item;
        } else {
          allItems.push(item);
        }
        // reapply current filter and refresh page
        applySearch(searchInput ? searchInput.value : '');
      } else {
        refreshData();
      }
    } catch (err) {
      console.error('save error', err);
      showFormError(err.message || 'خطأ أثناء الحفظ');
    } finally {
      if (saveBtn) saveBtn.disabled = false;
    }
  });

  // ========== Row handlers (edit/delete) ==========
  function attachRowHandlers(){
    // replace nodes to clear old listeners
    tableBody.querySelectorAll('tr').forEach(tr => {
      const clone = tr.cloneNode(true);
      tr.parentNode.replaceChild(clone, tr);
    });

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

    // delete buttons
    tableBody.querySelectorAll('.btn-delete').forEach(btn => {
      btn.addEventListener('click', function(){
        const tr = this.closest('tr');
        const id = tr ? tr.dataset.id : null;
        if (!id) return;
        pendingDeleteRow = tr;
        const label = (tr.querySelector('.col-nom') && tr.querySelector('.col-nom').textContent) || '';
        deleteText.textContent = label ? `هل أنت متأكد من حذف فريق "${label.trim()}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();
      });
    });
  }

  deleteConfirmBtn.addEventListener('click', function() {
    if (!pendingDeleteRow) { deleteModal.hide(); return; }
    const id = pendingDeleteRow.dataset.id;
    if (!id) { deleteModal.hide(); return; }
    deleteConfirmBtn.disabled = true;
    fetch(`{{ url('/equipes') }}/${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) {
        const idStr = String(id);
        allItems = allItems.filter(x => String(x.id) !== idStr);
        filtered = filtered.filter(x => String(x.id) !== idStr);
        // ensure current page still valid and re-render
        totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
        if (currentPage > totalPages) currentPage = totalPages;
        goToPage(currentPage);
        showMessage('success', 'تم حذف السجل');
      } else {
        showMessage('danger', (json && json.message) ? json.message : 'تعذّر الحذف');
      }
    })
    .catch(err => {
      console.error('delete error', err);
      showMessage('danger', err.message || 'خطأ أثناء الحذف');
    })
    .finally(() => {
      deleteConfirmBtn.disabled = false;
      deleteModal.hide();
      pendingDeleteRow = null;
    });
  });

  // ========== Search (debounced) ==========
  let to = null;
  function applySearch(q) {
    const term = (q || '').trim().toLowerCase();
    if (!term) {
      filtered = allItems.slice();
    } else {
      filtered = allItems.filter(it => {
        return (
          (it.structure_nom || '') + ' ' +
          (it.nom || '') + ' ' +
          (it.siege || '') + ' ' +
          (it.tel || '')
        ).toLowerCase().indexOf(term) !== -1;
      });
    }
    currentPage = 1;
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

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

  // initial: collect server rendered rows or fetch
  collectInitialRows();
  if (!allItems.length) {
    refreshData();
  } else {
    filtered = allItems.slice();
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
  }

  // expose client API for debugging/updates
  window.__equipesClient = {
    goToPage, applySearch, setAllItemsFromData, getState: () => ({ total: allItems.length, filtered: filtered.length, currentPage, totalPages })
  };

  // optional refresh button wiring
  document.getElementById('equipe-refresh') && document.getElementById('equipe-refresh').addEventListener('click', (e) => { e.preventDefault(); refreshData(); });

});
</script>

@endpush

@endsection