@extends('layouts.app')

@section('content')
<link rel="stylesheet" href="{{ asset('css/pages/users_index.css') }}">
<link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">


    <div class="mb-4">
      <div id="pageAlertContainer" class="mt-3" aria-live="polite" style="min-height:1px;"></div>
      <!-- ضع هذا *مباشرة* بعد div#pageAlertContainer في الـ Blade -->
<script>
(function () {
  // حماية بسيطة: لا نعيد تعريف لو موجود
  if (window.showPageAlert) return;

  window.escapeHtml = function (s) {
    if (typeof s !== 'string') return s;
    return s.replace(/[&<>"'`=\/]/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;','/':'&#x2F;','=':'&#x3D;','`':'&#x60;'})[c];
    });
  };

  /**
   * showPageAlert(type, html, { persist = false, timeout = 4500 })
   * type: 'success' | 'danger' | 'info' | 'warning'
   * html: string (allowed to contain markup)
   */
  window.showPageAlert = function (type, html, opts) {
    opts = opts || {};
    const persist = !!opts.persist;
    const timeout = typeof opts.timeout === 'number' ? opts.timeout : 4500;

    const container = document.getElementById('pageAlertContainer');
    if (!container) {
      console.warn('showPageAlert: pageAlertContainer not found');
      return;
    }

    // remove previous alerts (behavior like your add-role code)
    container.innerHTML = '';

    const alert = document.createElement('div');
    alert.className = `alert alert-${type} d-flex align-items-start`;
    alert.setAttribute('role', 'alert');
    // keep RTL styling consistent
    alert.style.direction = 'rtl';
    alert.style.justifyContent = 'space-between';
    alert.style.alignItems = 'flex-start';
    alert.style.gap = '0.5rem';

    const content = document.createElement('div');
    content.innerHTML = html || '';
    alert.appendChild(content);

    const closeBtn = document.createElement('button');
    closeBtn.type = 'button';
    closeBtn.className = 'btn-close';
    closeBtn.setAttribute('aria-label', 'إغلاق');
    closeBtn.addEventListener('click', () => {
      try { alert.remove(); } catch(e){}
    });
    alert.appendChild(closeBtn);

    container.appendChild(alert);

    if (!persist) {
      setTimeout(() => {
        try { alert.remove(); } catch(e){}
      }, timeout);
    }
  };
})();
</script>

<!-- Card stylée (RTL) -->
<!-- Card stylée (RTL) — REPLACE this whole card block in your blade -->
<div class="card banner-card page-title-card 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">مرحبًا بكم في إدارة الادوار و الصلاحيات</h4>
      <p class="mb-2 banner-subtitle">قم بإدارة الادوار ، تعيين الصلاحيات،</p>

      <!-- COUNTS: placed UNDER title -->
      <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-briefcase align-middle ms-1"></i>
          إجمالي الأدوار: <strong>{{ $totalRoles }}</strong>
        </span>

        <span class="banner-badge" title="إجمالي الصلاحيات">
          <i class="bx bx-key align-middle ms-1"></i>
          إجمالي الصلاحيات: <strong>{{ $totalPermissions }}</strong>
        </span>
      </div>
    </div>

    <!-- décoration (desktop only) -->
    <div class="banner-graphic d-none d-md-block" aria-hidden="true"></div>
  </div>
</div>



</div>

  <div class="card shadow-sm border-0">
    <div class="card-header d-flex align-items-center justify-content-between bg-white py-3">
          <div style="min-width:200px; max-width:480px; width:40%; direction:rtl;">
  
      <div class="d-flex align-items-center gap-2">
          <input id="roles-search" type="text" class="form-control" placeholder="ابحث ..." aria-label="بحث المكاتب">
      </div>
          </div>

      <div class="d-flex align-items-center gap-2">
        <a href="{{ route('roles.export', request()->only('q')) }}"   class="btn-download-signalement btn btn-sm d-flex align-items-center">
  <i class="bx bx-download align-middle me-1"></i>  
</a>
         <button type="button" id="openAddRole"  class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement" data-bs-toggle="modal" data-bs-target="#addRoleModal">
          <i class="bx bx-plus align-middle me-1"></i> إضافة 
        </button>
      </div>
    </div>

    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover mb-0 text-start" id="roles-table">
          <thead class="table-light">
            <tr>
              {{-- <th style="width:70px">#</th> --}}
              <th>الدور</th>
              <th>الصلاحيات</th>
              <th style="width:150px">الإجراءات</th>
            </tr>
          </thead>
          <tbody>
            @forelse($roles as $role)
             <tr data-role-id="{{ $role->id }}">
                {{-- <td class="fw-semibold">{{ $role->id }}</td> --}}
                <td class="fw-semibold">{{ $role->name }}</td>
<td class="permissions-cell">
  @if($role->permissions->isEmpty())
    <small class="text-muted">— لا توجد صلاحيات —</small>
  @else
    <div class="permissions-inline">
      {{-- join permission names with a middle-dot separator for a clean, professional look --}}
      <span class="permissions-text">{{ $role->permissions->pluck('name')->join(' · ') }}</span>
    </div>
  @endif
</td>



                <td class="text-end">
                  <div class="actions-cell">
                <button type="button" class="btn btn-icon btn-icon-success openShowRole"
  title="عرض"
  data-id="{{ $role->id }}"
  data-name="{{ $role->name }}"
  data-permissions='@json($role->permissions->pluck("id"))'>
  <i class="bx bx-show-alt"></i>
</button>

                    <button type="button" class="btn btn-icon btn-icon-outline openEditRole"
                      title="تعديل"
                      data-id="{{ $role->id }}"
                      data-name="{{ $role->name }}"
                      data-permissions='@json($role->permissions->pluck("id"))'>
                      <i class="bx bx-edit"></i>
                    </button>
     <form action="{{ route('roles.destroy', $role) }}"
            method="POST"
            class="d-inline-block delete-role-form"
            data-role-name="{{ $role->name }}"
            data-role-id="{{ $role->id }}">
        @csrf
        @method('DELETE')
        <button class="btn btn-icon btn-icon-danger" type="submit" title="حذف" aria-label="حذف الدور">
          <i class="bx bx-trash"></i>
        </button>
      </form>

                  </div>
                </td>
              </tr>
            @empty
              <tr>
                <td colspan="4" class="text-center py-4">
                  <div class="text-muted">لا توجد أدوار حالياً.</div>
                </td>
              </tr>
            @endforelse
          </tbody>
        </table>
      </div>

      <div class="card-footer d-flex justify-content-between align-items-center">
        <div><small class="text-muted">إجمالي الأدوار: {{ $totalRoles }}</small></div>
        <div>{{ $roles->withQueryString()->links() }}</div>
      </div>
    </div>
  </div>
</div>

<!-- نافذة إضافة دور -->
<!-- نافذة إضافة دور (updated with inline add-permission widget) -->
<div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="addRoleModalLabel">إضافة دور جديد</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <form id="addRoleForm" action="{{ route('roles.store') }}" method="POST" novalidate>
        @csrf
        <div class="modal-body">
          <div id="addRoleErrors" class="alert alert-danger d-none"></div>

          <div class="mb-3">
              <label class="form-label fw-semibold">  اسم الدور : </label>
            <input name="name" class="form-control" placeholder="مثال: مدير" required>
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <!-- Permissions checkboxes (existing) -->
<!-- Permissions checkboxes (existing only) -->
<div class="mb-3">
  <label class="form-label fw-semibold">الصلاحيات</label>

  <div class="row g-2" id="existingPermissionsList" style="max-height:220px;overflow:auto;padding:6px;border:1px solid #e9ecef;border-radius:6px;">
    @foreach($permissions as $perm)
      <div class="col-6 col-md-4">
        <div class="form-check d-flex align-items-center justify-content-between">
          <label class="form-check-label text-truncate" style="flex:1;">
            <input class="form-check-input me-2" type="checkbox" name="permissions[]" value="{{ $perm->id }}">
            {{ $perm->name }}
          </label>
        </div>
      </div>
    @endforeach
  </div>

  <small class="text-muted d-block mt-2">اختر الصلاحيات الموجودة.</small>
</div>

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" id="addRoleSubmit"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
            <span id="addRoleSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            حفظ الدور
          </button>
        </div>
      </form>
    </div>
  </div>
</div>


<!-- نافذة تعديل دور -->
<div class="modal fade" id="editRoleModal" tabindex="-1" aria-labelledby="editRoleModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="editRoleModalLabel">تعديل الدور</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <form id="editRoleForm" method="POST" novalidate>
        @csrf
        <div class="modal-body">
          <div id="editRoleErrors" class="alert alert-danger d-none"></div>

          <div class="mb-3">
            <label class="form-label fw-semibold">  اسم الدور : </label>
            <input name="name" id="edit_name" class="form-control" required>
            <div class="invalid-feedback" data-field="name"></div>
          </div>

           <!-- Permissions checkboxes (existing) -->
<!-- Permissions checkboxes (existing only) -->
<div class="mb-3">
  <label class="form-label fw-semibold">الصلاحيات</label>

  <div class="row g-2" id="existingPermissionsList" style="max-height:220px;overflow:auto;padding:6px;border:1px solid #e9ecef;border-radius:6px;">
    @foreach($permissions as $perm)
      <div class="col-6 col-md-4">
        <div class="form-check d-flex align-items-center justify-content-between">
          <label class="form-check-label text-truncate" style="flex:1;">
            <input class="form-check-input me-2" type="checkbox" name="permissions[]" value="{{ $perm->id }}"
                   data-perm-id="{{ $perm->id }}" data-perm-name="{{ $perm->name }}">
            {{ $perm->name }}
          </label>
        </div>
      </div>
    @endforeach
  </div>

  <small class="text-muted d-block mt-2">اختر الصلاحيات الموجودة.</small>
</div>




        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
          <button type="submit" id="editRoleSubmit"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
            <span id="editRoleSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            حفظ التغييرات
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ===== Show Role Modal — simple & classy list ===== -->
<div class="modal fade" id="showRoleModal" tabindex="-1" aria-labelledby="showRoleModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content text-right">
      <div class="modal-header border-0 pb-0">
        <h5 id="showRoleModalLabel" class="modal-title fw-bold mb-0">تفاصيل الدور</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <div class="modal-body pt-3">
        <div id="showRoleErrors" class="alert alert-danger d-none"></div>

        <div class="row gx-3 gy-3">
       <div class="col-12 col-md-6 d-flex align-items-center gap-2">
  <label class="form-label fw-semibold mb-0">اسم الدور</label>
  <div id="show_role_name" class="role-name" aria-live="polite"></div>
</div>


          <div class="col-12">
            <div id="show_role_permissions" class="permissions-wrapper p-0" style="max-height:360px; overflow:auto;">
              <ul id="show_role_permissions_list" class="perm-list" role="list">
                <!-- list items injected here -->
                <li class="text-center text-muted small py-3" id="noPermsHint">— لا توجد صلاحيات —</li>
              </ul>
            </div>

            <div class="d-flex justify-content-end mt-3">
              <button class="btn btn-sm btn-light" data-bs-dismiss="modal">إغلاق</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Delete Role Confirmation Modal -->
<div class="modal fade" id="confirmDeleteRoleModal" tabindex="-1" aria-labelledby="confirmDeleteRoleLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-right">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteRoleLabel">تأكيد الحذف</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
        <p id="confirmDeleteRoleMessage">هل تريد فعلاً حذف هذا الدور؟</p>
        <div id="confirmDeleteRoleErrors" class="alert alert-danger d-none"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">إلغاء</button>
        <button type="button" id="confirmDeleteRoleBtn" class="btn btn-danger">نعم، احذف</button>
      </div>
    </div>
  </div>
</div>

@push('style')
<style>
  /* Role name: simple, larger, elegant */
.role-name {
  padding: 6px 10px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1;
  max-width: 85%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  /* RTL friendly */
  direction: rtl;
  text-align: right;
}
/* fallback if you don't have Bootstrap gap utility — small horizontal gap */
.col-12.col-md-6.d-flex.align-items-center.no-gap-fallback > .form-label {
  margin-inline-end: 0.6rem; /* logical property works with RTL/LTR */
}

  /* Permissions list container */
  .permissions-wrapper { padding: 0.25rem 0; }

  /* Perm list base */
  .perm-list {
    list-style: none;
    margin: 0;
    padding: 0.25rem;
    display: grid;
    gap: 0.5rem;
  }

  /* Two / three column variants (JS toggles cols-2 / cols-3) */
  .perm-list.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .perm-list.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* single permission item — subtle, minimal */
  .perm-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 6px;
    background: transparent;
    border: 1px solid rgba(15,23,42,0.04);
    color: #0f172a;
    font-size: .95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* small colored dot */
  .perm-dot {
    width:10px;
    height:10px;
    border-radius:50%;
    background: linear-gradient(90deg,#2f77d9,#f26b38);
    flex: none;
    opacity: .9;
  }

  /* muted hint */
  #noPermsHint { border: none; padding: 1rem 0; }

  /* scrollbar subtle */
  .permissions-wrapper::-webkit-scrollbar { width:8px; height:8px; }
  .permissions-wrapper::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.06); border-radius:6px; }

  /* responsive: collapse to 1 column on narrow screens */
  @media (max-width: 520px) {
    .perm-list.cols-2, .perm-list.cols-3 { grid-template-columns: 1fr; }
    .role-name { max-width: 60%; }
  }
  /* PROFESSIONAL PERMISSIONS STYLING */
.permissions-cell { vertical-align: middle; }
.permissions-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;            /* gap between dot group and other content if any */
  white-space: normal;
}
.permissions-text {
  font-size: 1rem;        /* slight bump from default */
  font-weight: 500;       /* medium weight for better readability */
  color: #0f172a;         /* dark neutral color */
  letter-spacing: 0.1px;  /* tiny tracking for polish */
  line-height: 1.35;
  display: inline-block;
  word-break: break-word; /* allow wrapping on small screens */
}

/* Optional: limit how long the list can be in a single line and make it wrap into multiple lines */
.permissions-cell .permissions-text {
  max-width: 36rem;       /* adjust as you like; controls when wrapping begins */
}

/* Subtle separator styling (in case you want to style the dot specifically when rendering per-item) */
.permissions-sep {
  margin: 0 0.45rem;
  color: rgba(15,23,42,0.45);
  font-weight: 600;
}

/* Responsive tweak */
@media (max-width: 520px) {
  .permissions-text { font-size: 0.97rem; max-width: 100%; }
}

</style>
@endpush

@push('scripts')
<script>
  // attach show-role handlers to existing server-rendered rows
document.addEventListener('DOMContentLoaded', function () {
  // avoid duplicating handlers if this script runs twice
  if (document.__showRoleInitDone) return;
  document.__showRoleInitDone = true;

  // helper escape (reuse your global if present)
  const _escapeHtml = (window.escapeHtml) ? window.escapeHtml : function (s) {
    if (typeof s !== 'string') return s;
    return s.replace(/[&<>"'`=\/]/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;','/':'&#x2F;','=':'&#x3D;','`':'&#x60;'})[c];
    });
  };

  function openShowFromButton(btn) {
    try {
      const modal = document.getElementById('showRoleModal');
      if (!modal) return;
      const nameEl = modal.querySelector('#show_role_name');
      const permsList = modal.querySelector('#show_role_permissions_list');
      const errorsBox = modal.querySelector('#showRoleErrors');

      const name = btn.dataset.name || '';
      const perms = JSON.parse(btn.getAttribute('data-permissions') || '[]');

      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.textContent = ''; }
      if (nameEl) nameEl.textContent = name || '— غير معروف —';

      // try to map permission ids -> names by looking at inputs on the page (edit modal checkboxes)
      const permNames = perms.map(pid => {
        const input = document.querySelector('input[data-perm-id="' + pid + '"]') ||
                      document.querySelector('input[name="permissions[]"][value="' + pid + '"]');
        if (input) return (input.dataset.permName || (input.closest('label')?.textContent || '')).trim();
        return String(pid);
      }).filter(Boolean);

      // render list
      permsList.innerHTML = '';
      if (!permNames.length) {
        permsList.innerHTML = '<li class="text-center text-muted small py-3">— لا توجد صلاحيات —</li>';
      } else {
        const colsClass = permNames.length <= 4 ? 'cols-2' : 'cols-3';
        permsList.classList.remove('cols-2','cols-3');
        permsList.classList.add(colsClass);
        const frag = document.createDocumentFragment();
        permNames.forEach(n => {
          const li = document.createElement('li');
          li.setAttribute('role','listitem');
          li.innerHTML = `<span class="perm-dot" aria-hidden="true"></span><span class="perm-text">${_escapeHtml(n)}</span>`;
          frag.appendChild(li);
        });
        permsList.appendChild(frag);
      }

      const bs = bootstrap.Modal.getOrCreateInstance(modal);
      bs.show();
    } catch (e) { console.error('openShowFromButton error', e); }
  }

  document.querySelectorAll('.openShowRole').forEach(btn => {
    // avoid binding twice
    if (btn.__showHandlerAttached) return;
    btn.__showHandlerAttached = true;
    btn.addEventListener('click', function (ev) {
      ev.preventDefault();
      openShowFromButton(this);
    });
  });
});

document.addEventListener('DOMContentLoaded', function () {
  const confirmModalEl = document.getElementById('confirmDeleteRoleModal');
  if (!confirmModalEl) return;
  const bsModal = bootstrap.Modal.getOrCreateInstance(confirmModalEl);
  const msgEl = document.getElementById('confirmDeleteRoleMessage');
  const confirmBtn = document.getElementById('confirmDeleteRoleBtn');
  const errorsBox = document.getElementById('confirmDeleteRoleErrors');
  let pendingForm = null;

  // helper: CSRF token
  function getCsrfToken() {
    const m = document.querySelector('meta[name="csrf-token"]');
    if (m) return m.getAttribute('content');
    const cookie = document.cookie.match(new RegExp('(^|; )XSRF-TOKEN=([^;]+)'));
    return cookie ? decodeURIComponent(cookie[2]) : null;
  }

  // helper: cleanup stray backdrops & body class (bootstrap sometimes leaves them)
  function cleanupModalBackdrops() {
    document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
    if (!document.querySelectorAll('.modal.show').length) document.body.classList.remove('modal-open');
  }

  // Attach intercept to delete forms
  function attachDeleteForm(form) {
    if (!form || form.__deleteInterceptorAttached) return;
    form.__deleteInterceptorAttached = true;
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      pendingForm = this;
      const roleName = this.dataset.roleName || '';
      msgEl.textContent = roleName
        ? `هل تريد فعلاً حذف الدور «${roleName}»؟ هذا الإجراء لا يمكن التراجع عنه.`
        : 'هل تريد فعلاً حذف هذا الدور؟ هذا الإجراء لا يمكن التراجع عنه.';
      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }
      bsModal.show();
      setTimeout(()=> confirmBtn.focus(), 150);
    });
  }

  // attach to existing forms
  document.querySelectorAll('form.delete-role-form').forEach(attachDeleteForm);

  // allow dynamic forms to be registered (your other code creates rows)
  document.addEventListener('register-delete-form', function (ev) {
    const f = ev.detail && ev.detail.form;
    if (f instanceof HTMLFormElement) attachDeleteForm(f);
  });

  // Confirm button -> do AJAX delete, then hide modal & show page alert
  confirmBtn.addEventListener('click', async function () {
    if (!pendingForm) { bsModal.hide(); cleanupModalBackdrops(); return; }
    const action = pendingForm.getAttribute('action');
    if (!action) {
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'خطأ: عنوان الطلب مفقود.'; }
      return;
    }
    const csrf = getCsrfToken();
    if (!csrf) {
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود.'; }
      showPageAlert('danger', 'رمز CSRF مفقود.');
      return;
    }

    confirmBtn.setAttribute('disabled','disabled');

    try {
      const fd = new FormData(pendingForm); // includes _method=DELETE and _token
      const res = await fetch(action, {
        method: 'POST',
        credentials: 'same-origin',
        headers: {
          'X-CSRF-TOKEN': csrf,
          'X-Requested-With': 'XMLHttpRequest',
          'Accept': 'application/json'
        },
        body: fd
      });

      // try to read json message if any
      let json = {};
      try { json = await res.clone().json().catch(()=>({})); } catch(e){ json = {}; }

      if (!res.ok) {
        const msg = json && json.message ? json.message : (await res.text().catch(()=> 'خطأ أثناء الحذف.'));
        // hide modal (to match add-role behaviour) and show error alert
        bsModal.hide();
        cleanupModalBackdrops();
        showPageAlert('danger', `<strong>خطأ</strong> — ${escapeHtml(msg)}`);
        pendingForm = null;
        return;
      }

      const message = json.message || 'تم حذف الدور.';
      // remove the row from DOM and decrement count
      const rid = pendingForm.dataset.roleId;
      if (rid) {
        const row = document.querySelector(`tr[data-role-id="${rid}"]`);
        if (row) row.remove();
        const badge = document.querySelector('.banner-badge[title="إجمالي الأدوار"]');
        const totalEl = badge ? badge.querySelector('strong') : document.querySelector('.banner-badge strong');
        if (totalEl) {
          const n = Math.max(0, parseInt(totalEl.textContent||'0',10) - 1);
          totalEl.textContent = n;
        }
      } else {
        // fallback: (shouldn't happen) reload
        setTimeout(()=> location.reload(), 350);
      }

      // hide modal, cleanup backdrop and show success message (same UX as add)
      bsModal.hide();
      cleanupModalBackdrops();
      showPageAlert('success', `<strong>نجاح</strong> — ${escapeHtml(message)}`);

      pendingForm = null;
    } catch (err) {
      console.error(err);
      bsModal.hide();
      cleanupModalBackdrops();
      showPageAlert('danger', 'فشل الاتصال — تحقق من الخادم.');
      pendingForm = null;
    } finally {
      confirmBtn.removeAttribute('disabled');
    }
  });

  // ensure we clear pendingForm when modal closes
  confirmModalEl.addEventListener('hidden.bs.modal', function () {
    pendingForm = null;
    if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }
    cleanupModalBackdrops();
  });

  // small helper used above (you probably already have it; re-declare safe)
  function escapeHtml(s) {
    if (typeof s !== 'string') return s;
    return s.replace(/[&<>"'`=\/]/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;','/':'&#x2F;','=':'&#x3D;','`':'&#x60;'})[c];
    });
  }
});
</script>



<script>
document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.getElementById('roles-search');
  const tableBody = document.querySelector('#roles-table tbody');
  if (!searchInput || !tableBody) return;

  let debounce = null;

  function showNoResultsRow(show) {
    let noRow = tableBody.querySelector('.no-results-row');
    if (show) {
      if (!noRow) {
        tableBody.insertAdjacentHTML('beforeend',
          '<tr class="no-results-row"><td colspan="5" class="text-center text-muted">لا توجد نتائج مطابقة</td></tr>');
      }
    } else {
      if (noRow) noRow.remove();
    }
  }

  function normalize(text) {
    return (text || '').toLowerCase().trim();
    // Optional: remove diacritics if needed using .normalize('NFD').replace(/\p{Diacritic}/gu,'')
  }

  searchInput.addEventListener('input', function () {
    if (debounce) clearTimeout(debounce);
    debounce = setTimeout(() => {
      const q = normalize(this.value);
      const rows = Array.from(tableBody.querySelectorAll('tr')).filter(r => !r.classList.contains('no-results-row'));
      let anyVisible = false;

      rows.forEach(row => {
        const cells = row.querySelectorAll('td');
        // columns: 0=#, 1=name, 2=email, 3=roles, 4=actions
        const name = normalize(cells[1]?.textContent);
        const email = normalize(cells[2]?.textContent);
        const roles = normalize(cells[3]?.textContent);

        const hay = [name, email, roles].join(' ');
        const match = q === '' || hay.indexOf(q) !== -1;

        row.style.display = match ? '' : 'none';
        if (match) anyVisible = true;
      });

      showNoResultsRow(!anyVisible && q !== '');
      debounce = null;
    }, 160);
  });
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  // --- small helpers local to these handlers (safe to redeclare) ---
  function getCsrfToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta) return meta.getAttribute('content');
    const match = document.cookie.match(new RegExp('(^|; )XSRF-TOKEN=([^;]+)'));
    if (match) return decodeURIComponent(match[2]);
    return null;
  }

  // escapeHtml is defined globally by your earlier script; fallback if missing:
  const _escapeHtml = (window.escapeHtml) ? window.escapeHtml : function (s) {
    if (typeof s !== 'string') return s;
    return s.replace(/[&<>"'`=\/]/g, function (c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;','/':'&#x2F;','=':'&#x3D;','`':'&#x60;'})[c];
    });
  };

function formatPermissionsBadges(perms) {
  if (!perms || !perms.length) return '<small class="text-muted">— لا توجد صلاحيات —</small>';
  // perms is an array of strings
  // join with " · " (space-dot-space) and escape each item
  const escaped = perms.map(p => _escapeHtml(p));
  return `<div class="permissions-inline"><span class="permissions-text">${escaped.join(' · ')}</span></div>`;
}


  function findTotalRolesElement() {
    const badge = document.querySelector('.banner-badge[title="إجمالي الأدوار"]');
    if (badge) return badge.querySelector('strong');
    return document.querySelector('.banner-badge strong');
  }

  // Build a table row HTML for a role object returned by server.
  // role expected shape: { id, name, permissions: [{id,name}, ...] } or permissions: [name,...]
  function buildRowHtml(role) {
    const permsArr = Array.isArray(role.permissions) ? role.permissions.map(p => (p && p.name) ? p.name : p) : [];
    const permsHtml = formatPermissionsBadges(permsArr);
    const actionFormAction = `/roles/${role.id}`;
    const permIds = Array.isArray(role.permissions) ? role.permissions.map(p => p && (p.id || p) ) : [];
    // use window.getCsrfToken if available or local
    const csrf = (window.getCsrfToken && typeof window.getCsrfToken === 'function') ? window.getCsrfToken() : getCsrfToken();
    const tokenInput = `<input type="hidden" name="_token" value="${_escapeHtml(csrf || '')}">`;
    return `
      <tr data-role-id="${role.id}">
        <td class="fw-semibold">${role.id}</td>
        <td class="fw-semibold">${_escapeHtml(role.name)}</td>
        <td>${permsHtml}</td>
        <td class="text-end">
          <div class="actions-cell">
            <button type="button" class="btn btn-icon btn-icon-success openShowRole"
              title="عرض"
              data-id="${role.id}"
              data-name="${_escapeHtml(role.name)}"
              data-permissions='${JSON.stringify(permIds)}'>
              <i class="bx bx-show-alt"></i>
            </button>

            <button type="button" class="btn btn-icon btn-icon-outline openEditRole"
              title="تعديل"
              data-id="${role.id}"
              data-name="${_escapeHtml(role.name)}"
              data-permissions='${JSON.stringify(permIds)}'>
              <i class="bx bx-edit"></i>
            </button>

            <form action="${actionFormAction}" method="POST" class="d-inline-block delete-role-form"
                  data-role-name="${_escapeHtml(role.name)}" data-role-id="${role.id}">
              ${tokenInput}
              <input type="hidden" name="_method" value="DELETE">
              <button class="btn btn-icon btn-icon-danger" type="submit" title="حذف" aria-label="حذف الدور">
                <i class="bx bx-trash"></i>
              </button>
            </form>
          </div>
        </td>
      </tr>
    `.trim();
  }

  // Attach show/edit/delete handlers to a row element (newly inserted)
  function attachRowHandlers(row) {
    if (!row) return;

    // show
    const showBtn = row.querySelector('.openShowRole');
    if (showBtn) {
      showBtn.addEventListener('click', function (e) {
        e.preventDefault();
        const modal = document.getElementById('showRoleModal');
        if (!modal) return;
        const nameEl = modal.querySelector('#show_role_name');
        const permsList = modal.querySelector('#show_role_permissions_list');
        const errorsBox = modal.querySelector('#showRoleErrors');
        try {
          const name = this.dataset.name || '';
          const perms = JSON.parse(this.getAttribute('data-permissions') || '[]');
          if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.textContent = ''; }
          if (nameEl) nameEl.textContent = name || '— غير معروف —';
          // extract names using inputs on the page if possible
          const permNames = perms.map(pid => {
            const input = document.querySelector('input[data-perm-id="' + pid + '"]') ||
                          document.querySelector('input[name="permissions[]"][value="' + pid + '"]');
            if (input) return (input.dataset.permName || input.closest('label')?.textContent || '').trim();
            return String(pid);
          }).filter(Boolean);
          // render
          permsList.innerHTML = '';
          if (!permNames.length) {
            permsList.innerHTML = '<li class="text-center text-muted small py-3">— لا توجد صلاحيات —</li>';
          } else {
            const colsClass = permNames.length <= 4 ? 'cols-2' : 'cols-3';
            permsList.classList.remove('cols-2','cols-3');
            permsList.classList.add(colsClass);
            const frag = document.createDocumentFragment();
            permNames.forEach(n => {
              const li = document.createElement('li');
              li.setAttribute('role','listitem');
              li.innerHTML = `<span class="perm-dot" aria-hidden="true"></span><span class="perm-text">${_escapeHtml(n)}</span>`;
              frag.appendChild(li);
            });
            permsList.appendChild(frag);
          }
          const bs = bootstrap.Modal.getOrCreateInstance(modal);
          bs.show();
        } catch (e) { console.error(e); }
      });
    }

    // edit
    const editBtn = row.querySelector('.openEditRole');
    if (editBtn) {
      editBtn.addEventListener('click', function (e) {
        e.preventDefault();
        const id = this.dataset.id;
        const name = this.dataset.name || '';
        let perms = [];
        try { perms = JSON.parse(this.getAttribute('data-permissions') || '[]'); } catch(e) { perms = []; }
        const editModal = document.getElementById('editRoleModal');
        if (!editModal) return;
        const nameInput = editModal.querySelector('#edit_name');
        const form = editModal.querySelector('#editRoleForm');
        if (nameInput) nameInput.value = name;
        // uncheck & check
        const checkboxes = Array.from(editModal.querySelectorAll('input[name="permissions[]"]'));
        checkboxes.forEach(ch => ch.checked = false);
        perms.forEach(pid => {
          const ch = editModal.querySelector('input[name="permissions[]"][value="' + pid + '"]');
          if (ch) ch.checked = true;
        });
        // set action (matches update route)
        const updateUrlTemplate = "{{ route('roles.update', ':id') }}";
        if (form) form.setAttribute('action', updateUrlTemplate.replace(':id', id));
        const bs = bootstrap.Modal.getOrCreateInstance(editModal);
        bs.show();
      });
    }

    // register delete form with global delete modal logic (that listens for register-delete-form)
    const delForm = row.querySelector('form.delete-role-form');
    if (delForm) {
      // notify the global delete code that a new form exists
      document.dispatchEvent(new CustomEvent('register-delete-form', { detail: { form: delForm } }));
    }
  }

  // ----------------------------------------
  // Replace add-role handler: insert new row & show alert instead of reload
  // ----------------------------------------
  (function handleAddModal() {
    const addModal = document.getElementById('addRoleModal');
    if (!addModal) return;
    const form = addModal.querySelector('#addRoleForm');
    const submitBtn = addModal.querySelector('#addRoleSubmit');
    const spinner = addModal.querySelector('#addRoleSpinner');
    const errorsBox = addModal.querySelector('#addRoleErrors');
    const tbody = document.querySelector('#roles-table tbody');
    const totalRolesEl = findTotalRolesElement();

    form?.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }

      const csrf = getCsrfToken();
      if (!csrf) {
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود.'; }
        showPageAlert('danger', 'رمز CSRF مفقود.');
        return;
      }

      spinner?.classList.remove('d-none');
      submitBtn?.setAttribute('disabled', 'disabled');

      const fd = new FormData(form);

      try {
        const res = await fetch(form.getAttribute('action'), {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
          body: fd,
          credentials: 'same-origin'
        });

        if (res.status === 422) {
          const json = await res.json().catch(()=>({}));
          const errs = json.errors || {};
          const first = Object.values(errs)[0];
          const msg = Array.isArray(first) ? first.join(' ') : (first || 'تحقق من الحقول.');
          if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = msg; }
          showPageAlert('danger', `<strong>خطأ</strong> — ${_escapeHtml(msg)}`);
          return;
        }

        if (!res.ok) {
          const txt = await res.text().catch(()=> 'خطأ أثناء إنشاء الدور.');
          showPageAlert('danger', `<strong>خطأ</strong> — ${_escapeHtml(txt)}`);
          return;
        }

        const json = await res.json().catch(()=>({}));
        const message = json.message || 'تم إنشاء الدور بنجاح.';
        const role = json.role || json.data || null;

        // hide modal
        const bs = bootstrap.Modal.getInstance(addModal);
        if (bs) bs.hide();

        if (role && tbody) {
          // build and insert row at top
          const rowHtml = buildRowHtml(role);
          const tmp = document.createElement('tbody');
          tmp.innerHTML = rowHtml;
          const newRow = tmp.querySelector('tr');
          tbody.insertAdjacentElement('afterbegin', newRow);
          attachRowHandlers(newRow);

          // increment count
          if (totalRolesEl) {
            const n = parseInt(totalRolesEl.textContent || '0', 10) + 1;
            totalRolesEl.textContent = n;
          }
        } else {
          // if server didn't return role, fallback to reload
          setTimeout(()=> location.reload(), 500);
        }

        showPageAlert('success', `<strong>نجاح</strong> — ${_escapeHtml(message)}`);
        form.reset();
      } catch (err) {
        console.error(err);
        showPageAlert('danger', '<strong>خطأ</strong> — فشل الاتصال — تحقق من الخادم.');
      } finally {
        spinner?.classList.add('d-none');
        submitBtn?.removeAttribute('disabled');
      }
    });
  })();

  // ----------------------------------------
  // Replace edit-role handler: update row in-place & show alert instead of reload
  // ----------------------------------------
  (function handleEditModal() {
    const editModal = document.getElementById('editRoleModal');
    if (!editModal) return;
    const form = editModal.querySelector('#editRoleForm');
    const submitBtn = editModal.querySelector('#editRoleSubmit');
    const spinner = editModal.querySelector('#editRoleSpinner');
    const errorsBox = editModal.querySelector('#editRoleErrors');

    form?.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }

      const action = form.getAttribute('action');
      if (!action) { if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'Missing form action.'; } return; }

      const csrf = getCsrfToken();
      if (!csrf) { if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود.'; } showPageAlert('danger','رمز CSRF مفقود.'); return; }

      spinner?.classList.remove('d-none');
      submitBtn?.setAttribute('disabled','disabled');

      const fd = new FormData(form);
      fd.append('_method', 'PUT');

      // ensure checked permissions are included
      const checked = Array.from(editModal.querySelectorAll('input[name="permissions[]"]:checked')).map(ch => ch.value);
      checked.forEach(v => fd.append('permissions[]', v));

      try {
        const res = await fetch(action, {
          method: 'POST', // with _method=PUT
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf, 'X-Requested-With': 'XMLHttpRequest' },
          body: fd,
          credentials: 'same-origin'
        });

        if (res.status === 422) {
          const json = await res.json().catch(()=>({}));
          const errs = json.errors || {};
          const first = Object.values(errs)[0];
          const msg = Array.isArray(first) ? first.join(' ') : (first || 'تحقق من الحقول.');
          if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = msg; }
          showPageAlert('danger', `<strong>خطأ</strong> — ${_escapeHtml(msg)}`);
          return;
        }

        if (!res.ok) {
          const txt = await res.text().catch(()=> 'خطأ أثناء حفظ التعديلات.');
          showPageAlert('danger', `<strong>خطأ</strong> — ${_escapeHtml(txt)}`);
          return;
        }

        const json = await res.json().catch(()=>({}));
        const message = json.message || 'تم حفظ التعديلات.';
        const role = json.role || null;

        // hide modal
        const bs = bootstrap.Modal.getInstance(editModal);
        if (bs) bs.hide();

        if (role) {
          const rid = role.id;
          const row = document.querySelector(`tr[data-role-id="${rid}"]`);
          if (row) {
            const nameCell = row.querySelectorAll('td')[1];
            const permsCell = row.querySelectorAll('td')[2];
            if (nameCell) nameCell.textContent = role.name;
            if (permsCell) permsCell.innerHTML = formatPermissionsBadges((role.permissions||[]).map(p=>p.name||p));
            // update data attributes on buttons
            const showBtn = row.querySelector('.openShowRole');
            const editBtn = row.querySelector('.openEditRole');
            const permIds = Array.isArray(role.permissions) ? role.permissions.map(p => p && (p.id || p) ) : [];
            if (showBtn) {
              showBtn.dataset.name = role.name;
              showBtn.setAttribute('data-permissions', JSON.stringify(permIds));
            }
            if (editBtn) {
              editBtn.dataset.name = role.name;
              editBtn.setAttribute('data-permissions', JSON.stringify(permIds));
            }
          } else {
            // if we didn't find the row, reload as fallback
            setTimeout(()=> location.reload(), 300);
          }
        } else {
          setTimeout(()=> location.reload(), 300);
        }

        showPageAlert('success', `<strong>نجاح</strong> — ${_escapeHtml(message)}`);
      } catch (err) {
        console.error(err);
        showPageAlert('danger', '<strong>خطأ</strong> — فشل الاتصال — تحقق من الخادم.');
      } finally {
        spinner?.classList.add('d-none');
        submitBtn?.removeAttribute('disabled');
      }
    });
  })();

}); // end DOMContentLoaded
</script>

@endpush





@push('style')
<style>
  .modal-backdrop { z-index: 1990 !important; }
  .modal { z-index: 2000 !important; }
  .actions-cell .btn { margin-left: 4px; }
  .badge { font-size: .75rem; padding: .35rem .5rem; }
  .text-orange { color: #f26b38; }
</style>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // ----------------- helpers -----------------
  function getCsrfToken() {
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta) return meta.getAttribute('content');
    const match = document.cookie.match(new RegExp('(^|; )XSRF-TOKEN=([^;]+)'));
    if (match) return decodeURIComponent(match[2]);
    return null;
  }

  // ----------------- Handle Add Role modal (scoped) -----------------
  (function handleAddModal() {
    const addModal = document.getElementById('addRoleModal');
    if (!addModal) return;

    const form = addModal.querySelector('#addRoleForm');
    const submitBtn = addModal.querySelector('#addRoleSubmit');
    const spinner = addModal.querySelector('#addRoleSpinner');
    const errorsBox = addModal.querySelector('#addRoleErrors');

    form?.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }

      const csrf = getCsrfToken();
      if (!csrf) { if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود.'; } return; }

      spinner?.classList.remove('d-none');
      submitBtn?.setAttribute('disabled', 'disabled');

      // FormData will include checked existing permissions[] automatically
      const fd = new FormData(form);

      try {
        const res = await fetch(form.getAttribute('action'), {
          method: 'POST',
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
          body: fd,
          credentials: 'same-origin'
        });

        if (res.status === 422) {
          const json = await res.json().catch(()=>({}));
          const errs = json.errors || {};
          const first = Object.values(errs)[0];
          if (errorsBox) {
            errorsBox.classList.remove('d-none');
            errorsBox.innerText = Array.isArray(first) ? first.join(' ') : (first || 'تحقق من الحقول.');
          }
          return;
        }

        if (res.ok) {
          const bs = bootstrap.Modal.getInstance(addModal) || new bootstrap.Modal(addModal);
          bs.hide();
          location.reload();
          return;
        }

        const txt = await res.text();
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = txt || 'Server error'; }
      } catch (err) {
        console.error(err);
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'خطأ في الاتصال — راجع وحدة التحكم (console).'; }
      } finally {
        spinner?.classList.add('d-none');
        submitBtn?.removeAttribute('disabled');
      }
    });
  })();

  // ----------------- Handle Edit Modal open/populate + submit (scoped) -----------------
  (function handleEditModal() {
    const editModal = document.getElementById('editRoleModal');
    if (!editModal) return;

    const form = editModal.querySelector('#editRoleForm');
    const submitBtn = editModal.querySelector('#editRoleSubmit');
    const spinner = editModal.querySelector('#editRoleSpinner');
    const errorsBox = editModal.querySelector('#editRoleErrors');

    // open & populate when clicking edit buttons
    const updateUrlTemplate = "{{ route('roles.update', ':id') }}";
    document.querySelectorAll('.openEditRole').forEach(btn => {
      btn.addEventListener('click', function () {
        const id = this.dataset.id;
        const name = this.dataset.name || '';
        let perms = [];
        try {
          perms = JSON.parse(this.getAttribute('data-permissions') || '[]');
        } catch (e) {
          perms = Array.isArray(this.dataset.permissions) ? this.dataset.permissions : [];
        }

        // set name
        const nameInput = editModal.querySelector('#edit_name');
        if (nameInput) nameInput.value = name;

        // uncheck all existing checkboxes inside edit modal, then check ones in perms
        const checkboxes = Array.from(editModal.querySelectorAll('input[name="permissions[]"]'));
        checkboxes.forEach(ch => ch.checked = false);
        perms.forEach(pid => {
          const ch = editModal.querySelector('input[name="permissions[]"][value="' + pid + '"]');
          if (ch) ch.checked = true;
        });

        // clear errors
        if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }
        // set form action
        if (form) form.setAttribute('action', updateUrlTemplate.replace(':id', id));

        const bs = bootstrap.Modal.getInstance(editModal) || new bootstrap.Modal(editModal);
        bs.show();
      });
    });

    // submit edit form via AJAX
    form?.addEventListener('submit', async function (ev) {
      ev.preventDefault();
      if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }

      const action = form.getAttribute('action');
      if (!action) { if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'Missing form action.'; } return; }

      const csrf = getCsrfToken();
      if (!csrf) { if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود.'; } return; }

      spinner?.classList.remove('d-none');
      submitBtn?.setAttribute('disabled','disabled');

      const fd = new FormData(form);
      fd.append('_method', 'PUT');

      // collect checked existing permissions (FormData already has permissions[] from form inputs,
      // but we re-append checked values to ensure consistency)
      const checked = Array.from(editModal.querySelectorAll('input[name="permissions[]"]:checked')).map(ch => ch.value);
      // remove any existing permissions[] fields added by browser to avoid duplicates (optional)
      // append checked ones:
      checked.forEach(v => fd.append('permissions[]', v));

      try {
        const res = await fetch(action, {
          method: 'POST', // _method=PUT
          headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': csrf },
          body: fd,
          credentials: 'same-origin'
        });

        if (res.status === 422) {
          const json = await res.json().catch(()=>({}));
          const errs = json.errors || {};
          const first = Object.values(errs)[0];
          if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = Array.isArray(first) ? first.join(' ') : (first || 'تحقق من الحقول.'); }
          return;
        }

        if (res.ok) {
          const bs = bootstrap.Modal.getInstance(editModal);
          if (bs) bs.hide();
          location.reload();
          return;
        }

        const txt = await res.text();
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = txt || 'Server error'; }
      } catch (err) {
        console.error(err);
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'خطأ في الاتصال — راجع وحدة التحكم (console).'; }
      } finally {
        spinner?.classList.add('d-none');
        submitBtn?.removeAttribute('disabled');
      }
    });
  })();

  // ----------------- Handle Show Role modal (scoped) -----------------
// ----------------- Handle Show Role modal (scoped) -----------------


  // ----------------- modal cleanup helper (avoid stuck backdrop) -----------------
  document.querySelectorAll('.modal').forEach(m => {
    m.addEventListener('hidden.bs.modal', function () {
      document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
      if (!document.querySelectorAll('.modal.show').length) document.body.classList.remove('modal-open');
    });
  });
});
</script>


@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // find nearest ancestor that might break fixed positioning
  function findProblemAncestor(el) {
    while (el && el !== document.body) {
      const s = window.getComputedStyle(el);
      // check common properties that create a new stacking/containing context
      if ((s.transform && s.transform !== 'none') ||
          (s.perspective && s.perspective !== 'none') ||
          (s.filter && s.filter !== 'none') ||
          (s.willChange && s.willChange !== 'auto')) {
        return el;
      }
      el = el.parentElement;
    }
    return null;
  }

  // Move all modals to body (so they're not nested inside transformed/overflow containers)
  document.querySelectorAll('.modal').forEach(modal => {
    // if already direct child of body skip
    if (modal.parentElement === document.body) return;

    const problem = findProblemAncestor(modal.parentElement);
    if (problem) {
      console.warn('Modal was nested inside an element that may clip fixed/floating elements:', problem);
      console.warn('Consider removing transform/filter/will-change from that ancestor, or keep this script to move modals to <body>.');
    }

    // move modal to body — preserves the node and event listeners
    document.body.appendChild(modal);
  });
});
</script>
@endpush


 {{-- ton script d'origine inchangé --}}
@endsection