@extends('layouts.app')

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

@section('content')

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

{{-- ══════════════════════════════════════════════════════
     resources/views/sommaires/cheffes.blade.php
     Modern orange × blue glassmorphism design
     ══════════════════════════════════════════════════════ --}}

<link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap" rel="stylesheet">

<style>
/* ═══════════════════════════════════════════════════════════
   CHEFFES PAGE — full !important override
   ═══════════════════════════════════════════════════════════ */

/* ── Page wrapper ── */
.editorial-page {
  font-family: 'Tajawal', sans-serif !important;
  direction: rtl !important;
}

/* ════════════════════════════════
   PAGE HEADER CARD
   — orange × blue glass
   ════════════════════════════════ */
.page-header {
  position: relative !important;
  border-radius: 20px !important;
  padding: 32px 36px !important;
  margin-bottom: 28px !important;
  overflow: hidden !important;

  /* orange-blue gradient base */
  background: linear-gradient(
    135deg,
    rgba(26,35,126,0.82) 0%,
    rgba(22,28,100,0.78) 38%,
    rgba(230,74,25,0.70) 100%
  ) !important;
  backdrop-filter: blur(22px) !important;
  -webkit-backdrop-filter: blur(22px) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 20px 60px rgba(26,35,126,0.30),
    0 4px 24px rgba(255,112,67,0.22) !important;
}

/* When we want the header without the card look (small screens / single use) */
.page-header.no-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 0 !important;
}

/* Color tokens for this page */
:root {
  --primary: #1A237E;    /* deep indigo */
  --secondary: #FF7043;  /* orange */
  --tertiary: #64B5F6;   /* light blue */
  --neutral: #77767D;    /* gray */
}

/* Modal system styles are provided by partials/role-modal-system-style */

/* decorative mesh overlay */
.page-header::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 80% at 5% 50%,  rgba(100,181,246,0.18) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 95% 20%,  rgba(255,112,67,0.22) 0%, transparent 55%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* subtle top shimmer */
.page-header::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #FF7043, #64B5F6, #FF7043) !important;
  opacity: .65 !important;
  z-index: 1 !important;
}

.page-header > * { position: relative !important; z-index: 2 !important; }

/* title */
.page-header h1 {
  font-size: 1.65rem !important;
  font-weight: 900 !important;
  color: #102a72 !important;
  margin: 0 0 14px !important;
  text-shadow: none !important;
  letter-spacing: .02em !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.page-header h1 i {
  color: #102a72 !important;
  font-size: 1.5rem !important;
  filter: none !important;
}

/* badges */
.header-badges {
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.header-badges .badge {
  display: inline-flex !important;
  align-items: center !important;
  padding: 6px 18px !important;
  border-radius: 99px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .85rem !important;
  font-weight: 800 !important;
  color: #102a72 !important;
  letter-spacing: .03em !important;
  text-shadow: none !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
}

/* alternate badge colours */
.header-badges .badge:nth-child(odd) {
  background: rgba(255,112,67,0.20) !important;
  border-color: rgba(255,112,67,0.45) !important;
}
.header-badges .badge:nth-child(even) {
  background: rgba(100,181,246,0.20) !important;
  border-color: rgba(100,181,246,0.40) !important;
}

/* ════════════════════════════════
   TOOLBAR  (add + export + search)
   ════════════════════════════════ */
.cheffes-toolbar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  margin-bottom: 20px !important;
  padding: 18px 22px !important;
  border-radius: 16px !important;
  background: rgba(26,35,126,0.18) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(100,181,246,0.18) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12) !important;
}

.toolbar-actions {
  display: flex !important;
  gap: 10px !important;
  align-items: center !important;
}

/* Add button */
.btn-add-cheffes {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 22px !important;
  background: linear-gradient(135deg, #FF7043 0%, #e64a19 100%) !important;
  color: #ffffff !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  border: none !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-shadow: 0 5px 18px rgba(255,112,67,0.38) !important;
  transition: transform .2s, box-shadow .2s !important;
  letter-spacing: .03em !important;
}
.btn-add-cheffes:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,112,67,0.55) !important;
  color: #ffffff !important;
}

/* Export button */
.btn-export-cheffes {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important; height: 42px !important;
  background: rgba(100,181,246,0.18) !important;
  border: 1.5px solid rgba(100,181,246,0.35) !important;
  border-radius: 12px !important;
  color: #64B5F6 !important;
  font-size: 1.1rem !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background .2s, color .2s !important;
}
.btn-export-cheffes:hover {
  background: rgba(100,181,246,0.30) !important;
  color: #ffffff !important;
}

/* Search input */
.cheffes-search-wrap {
  flex: 1 !important;
  max-width: 420px !important;
  position: relative !important;
}

.cheffes-search-wrap input {
  width: 100% !important;
  padding: 10px 20px 10px 44px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1.5px solid rgba(255,112,67,0.30) !important;
  border-radius: 12px !important;
  color: #1A237E !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  outline: none !important;
  transition: border-color .22s, box-shadow .22s !important;
  direction: rtl !important;
}
.cheffes-search-wrap input::placeholder {
  color: rgba(26,35,126,0.45) !important;
}
.cheffes-search-wrap input:focus {
  border-color: #FF7043 !important;
  box-shadow: 0 0 0 3px rgba(255,112,67,0.18) !important;
  background: rgba(255,255,255,0.14) !important;
}

.cheffes-search-wrap .search-icon {
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(255,112,67,0.60) !important;
  font-size: 1rem !important;
  pointer-events: none !important;
}

/* ════════════════════════════════
   TABLE CARD
   ════════════════════════════════ */
.cheffes-table-card {
  border-radius: 20px !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.55) !important;   /* lighter transparent */
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,112,67,0.18) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.30) inset,
    0 16px 48px rgba(26,35,126,0.14),
    0 4px 16px rgba(255,112,67,0.10) !important;
}

/* ── Table ── */
.cheffes-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: 'Tajawal', sans-serif !important;
  direction: rtl !important;
}

/* thead */
.cheffes-table thead tr {
  background: linear-gradient(
    135deg,
    rgba(26,35,126,0.82) 0%,
    rgba(40,52,168,0.78) 50%,
    rgba(230,74,25,0.65) 100%
  ) !important;
}

.cheffes-table thead th {
  padding: 16px 20px !important;
  font-size: .90rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-align: right !important;
  white-space: nowrap !important;
  letter-spacing: .03em !important;
  border: none !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.25) !important;
}

.cheffes-table thead th:first-child { border-radius: 0 !important; }

/* first column (إجراءات) lighter */
.cheffes-table thead th.col-actions {
  background: rgba(0,0,0,0.18) !important;
  text-align: center !important;
}

/* tbody rows */
.cheffes-table tbody tr {
  border-bottom: 1px solid rgba(26,35,126,0.07) !important;
  transition: background .18s !important;
}

.cheffes-table tbody tr:last-child { border-bottom: none !important; }

.cheffes-table tbody tr:nth-child(odd) {
  background: rgba(255,255,255,0.55) !important;
}
.cheffes-table tbody tr:nth-child(even) {
  background: rgba(26,35,126,0.04) !important;
}
.cheffes-table tbody tr:hover {
  background: rgba(255,112,67,0.07) !important;
}

.cheffes-table tbody td {
  padding: 14px 20px !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: #1A237E !important;
  text-align: right !important;
  border: none !important;
  vertical-align: middle !important;
}

.cheffes-table tbody td.col-actions {
  text-align: center !important;
  white-space: nowrap !important;
}

/* name column — bolder */
.cheffes-table tbody td.col-name {
  font-weight: 700 !important;
  color: #0d1547 !important;
}

/* ── Action buttons ── */
.btn-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important;
  border: none !important;
  cursor: pointer !important;
  font-size: .95rem !important;
  transition: transform .18s, box-shadow .18s !important;
  margin: 0 3px !important;
}
.btn-action:hover { transform: translateY(-2px) !important; }

.btn-delete {
  background: rgba(255,112,67,0.14) !important;
  color: #FF7043 !important;
  border: 1.5px solid rgba(255,112,67,0.28) !important;
}
.btn-delete:hover {
  background: rgba(255,112,67,0.25) !important;
  box-shadow: 0 4px 14px rgba(255,112,67,0.30) !important;
}

.btn-edit {
  background: rgba(26,35,126,0.10) !important;
  color: #1A237E !important;
  border: 1.5px solid rgba(26,35,126,0.22) !important;
}
.btn-edit:hover {
  background: rgba(26,35,126,0.20) !important;
  box-shadow: 0 4px 14px rgba(26,35,126,0.20) !important;
}

/* empty cell placeholder */
.cheffes-table tbody td:empty::after {
  content: '—' !important;
  color: rgba(26,35,126,0.28) !important;
  font-weight: 400 !important;
}

/* ── Messages area ── */
#pageMessages { font-family: 'Tajawal', sans-serif !important; }

/* ── Responsive ── */
@media (max-width: 768px) {
  .page-header        { padding: 24px 20px !important; }
  .page-header h1     { font-size: 1.25rem !important; }
  .cheffes-toolbar    { flex-direction: column !important; align-items: stretch !important; }
  .cheffes-search-wrap{ max-width: 100% !important; }
  .cheffes-table thead th,
  .cheffes-table tbody td { padding: 12px 12px !important; font-size: .82rem !important; }
}
</style>

@include('partials.role-modal-system-style')

{{-- ══════════════ PAGE HEADER ══════════════ --}}
<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-user-check 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($cheffes) }}</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>

  {{-- ══ TOOLBAR ══ --}}
  <div class="cheffes-toolbar" dir="rtl">
    <div class="toolbar-actions">
      <!-- Open create modal (no dedicated create route) -->
      <a href="#" class="btn-add-cheffes" data-bs-toggle="modal" data-bs-target="#cheffeFormModal">
        <i class="bx bx-plus"></i> إضافة
      </a>
      <!-- Use named export route -->
      <a href="{{ route('sommaires.cheffes.export') }}" class="btn-export-cheffes" title="تصدير">
        <i class="bx bx-download"></i>
      </a>
    </div>

    <div class="cheffes-search-wrap">
      <i class="bx bx-search search-icon"></i>
      <input type="text"
             id="cheffe-search"
             placeholder="ابحث بالرقم، الاسم، الهيكل، الهاتف أو البريد..."
             autocomplete="off">
    </div>
  </div>

  {{-- ══ TABLE CARD ══ --}}
  <div class="cheffes-table-card">
    <table class="cheffes-table" id="cheffes-table">
      <thead>
        <tr>
          <th class="col-name">الاسم و اللقب</th>
          <th>الهيكل</th>
          <th>الهاتف</th>
          <th>البريد الإلكتروني</th>
          <th class="col-actions">إجراءات</th>
        </tr>
      </thead>
      <tbody>
        @forelse($cheffes as $cheff)
        <tr data-id="{{ $cheff->id }}">
          <td class="col-name col-nom">{{ $cheff->prenom_nom ?? '' }}</td>
          <td class="col-structure">{{ $cheff->structure ?? '' }}</td>
          <td class="col-telephone">{{ $cheff->telephone ?? '' }}</td>
          <td class="col-email">{{ $cheff->email ?? '' }}</td>
          <td class="col-actions">
            <button type="button"
                    class="btn-action btn-edit"
                    data-id="{{ $cheff->id }}"
                    title="تعديل">
              <i class="bx bx-edit-alt"></i>
            </button>
            <button type="button"
                    class="btn-action btn-delete"
                    data-id="{{ $cheff->id }}"
                    title="حذف">
              <i class="bx bx-trash"></i>
            </button>
          </td>
        </tr>
        @empty
        <tr>
          <td colspan="5" style="text-align:center !important; padding:40px !important; color:rgba(26,35,126,0.40) !important; font-weight:700 !important;">
            لا توجد سجلات
          </td>
        </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  <div id="cheffes-pagination-container" class="card-footer border-0" dir="rtl" style="display:block;"></div>

</div>

<!-- Form Modal : create / edit (modernized) -->
<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-plus"></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="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" class="edit-role-input form-control" type="email" />
          </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 -->
<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() {
  const perPage = 15;
  const windowSize = 2;

  const tableBody = document.querySelector('#cheffes-table tbody');
  const searchInput = document.getElementById('cheffe-search');
  const addBtn = document.querySelector('.btn-add-cheffes');
  const messages = document.getElementById('pageMessages');
  const paginationContainer = document.getElementById('cheffes-pagination-container');

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

  const deleteModalEl = document.getElementById('cheffeDeleteModal');
  const deleteModal = new bootstrap.Modal(deleteModalEl);
  const deleteConfirmBtn = document.getElementById('cheffeDeleteConfirm');
  const deleteText = document.getElementById('cheffeDeleteText');

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

  let allItems = [];
  let filtered = [];
  let currentPage = 1;
  let totalPages = 1;
  let pendingDeleteRow = null;

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

  function readInitialRows() {
    const rows = Array.from(tableBody.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(),
    }));
  }

  function renderTablePage(itemsSlice) {
    if (!Array.isArray(itemsSlice) || itemsSlice.length === 0) {
      tableBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">لا توجد بيانات</td></tr>';
      return;
    }
    tableBody.innerHTML = itemsSlice.map(it => `
      <tr ${it.id ? `data-id="${it.id}"` : ''}>
        <td class="col-name 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="col-actions">
          <button type="button" class="btn-action btn-edit" aria-label="تعديل"><i class="bx bx-edit-alt"></i></button>
          <button type="button" class="btn-action btn-delete" aria-label="حذف"><i class="bx bx-trash"></i></button>
        </td>
      </tr>
    `).join('');
    attachRowHandlers();
  }

  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" 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="السابق"><i class="bx bx-chevron-left"></i></a>
            </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>`;
    }

    html += `
            <li class="page-item ${currentPage >= totalPages ? 'disabled' : ''}">
              <a class="page-link page-nav" data-page="${currentPage + 1}" href="#" aria-label="التالي"><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;

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

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

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

  async function refreshData() {
    try {
      const res = await fetch(JSON_URL, { credentials:'same-origin', headers:{ 'Accept':'application/json', 'X-Requested-With':'XMLHttpRequest' }});
      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,
        prenom_nom: it.prenom_nom ?? '',
        structure: it.structure ?? '',
        telephone: it.telephone ?? '',
        email: it.email ?? ''
      }));
    } catch (err) {
      console.error('refreshData error', err);
      showMessage('danger', 'خطأ في التحميل');
    }
    applySearch(searchInput ? searchInput.value : '');
  }

  function attachRowHandlers(){
    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(`${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);
              formModal.show();
            } else {
              showMessage('danger', (json && json.message) ? json.message : 'تعذّر جلب بيانات السجل');
            }
          })
          .catch(err => { console.error('fetch show error', err); showMessage('danger', 'خطأ في الاتصال عند جلب السجل'); });
      });
    });

    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')?.textContent || '').trim();
        deleteText.textContent = label ? `هل أنت متأكد من حذف "${label}"؟ هذا الإجراء لا يمكن التراجع عنه.` : 'هل أنت متأكد من حذف هذا السجل؟';
        deleteModal.show();
      });
    });
  }

  function setIfExists(id, value) {
    const el = document.getElementById(id);
    if (!el) return;
    el.value = (value === null || value === undefined) ? '' : value;
  }
  function populateForm(d = {}) {
    setIfExists('cheffe-id', d.id ?? '');
    setIfExists('prenom_nom', d.prenom_nom ?? '');
    setIfExists('structure', d.structure ?? '');
    setIfExists('telephone', d.telephone ?? '');
    setIfExists('email', d.email ?? '');
    if (formError) formError.classList.add('d-none');
  }
  function clearForm() { populateForm({}); if (formError) { formError.classList.add('d-none'); formError.textContent = ''; } }
  function showFormError(m){ if(!formError) return alert(m); formError.classList.remove('d-none'); formError.textContent = m; }

  if (form) {
    form.addEventListener('submit', async function(e){
      e.preventDefault();
      if (formError) formError.classList.add('d-none');
      const id = (document.getElementById('cheffe-id')?.value || '').toString().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, 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 ? 'تم تحديث السجل' : 'تمت الإضافة بنجاح');
        await refreshData();
      } catch (err) {
        console.error('save error', err);
        showFormError((err && err.message) ? err.message : 'خطأ أثناء الحفظ');
      } finally {
        if (saveBtn) saveBtn.disabled = false;
      }
    });
  }

  deleteConfirmBtn.addEventListener('click', function(){
    if (!pendingDeleteRow) { deleteModal.hide(); return; }
    const id = pendingDeleteRow.dataset.id;
    if (!id) { deleteModal.hide(); return; }
    deleteConfirmBtn.disabled = true;
    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) {
        showMessage('success', 'تم حذف السجل');
        refreshData();
      } 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;
    });
  });

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

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

  (function init() {
    const initial = readInitialRows();
    allItems = initial;
    filtered = allItems.slice();
    totalPages = Math.max(1, Math.ceil(filtered.length / perPage));
    goToPage(1);
    attachRowHandlers();
  })();
});
</script>
@endpush

@endsection