@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">
@include('partials.unified-management-style')
<style>
  /* Roles banner text override: dark blue + bold */
  .page-title-card .banner-title,
  .page-title-card .banner-subtitle,
  .page-title-card .banner-badge,
  .page-title-card .banner-badge strong,
  .page-title-card .banner-badge i {
    color: #102a72 !important;
  }

  .page-title-card .banner-title,
  .page-title-card .banner-badge,
  .page-title-card .banner-badge strong {
    font-weight: 800 !important;
  }
</style>
<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) — REPLACE this whole card block in your blade -->
<div class="card banner-card page-title-card shadow-sm border-0 overflow-hidden mx-auto" style="max-width:1100px;" 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>

  <!-- Roles table: simplified, centered and matched to banner width -->
  <div class="card shadow-sm border-0 mx-auto mt-3" style="max-width:1100px;">
    <div class="card-body">
      <div class="table-responsive">
        <table class="table table-hover table-striped mb-0 text-start" id="roles-table">
          <thead class="table-light">
            <tr>
              <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->name }}</td>
                <td class="permissions-cell">
                  @if($role->permissions->isEmpty())
                    <small class="text-muted">— لا توجد صلاحيات —</small>
                  @else
                    <div class="permissions-inline">
                      <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="3" 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>

<!-- نافذة إضافة دور -->
<!-- ═══════════════════════════════════════ -->
<!-- نافذة إضافة دور (Styled like Edit Modal) -->
<!-- ═══════════════════════════════════════ -->
<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 edit-role-modal-content">

      <!-- ══ Header ══ -->
      <div class="edit-role-modal-header">
        <div class="edit-role-header-icon">
          <i class="bx bx-plus-circle"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="addRoleModalLabel">إضافة دور جديد</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 ══ -->
      <form id="addRoleForm" action="{{ route('roles.store') }}" method="POST" novalidate>
        @csrf

        <div class="modal-body edit-role-modal-body">

          <!-- Error box -->
          <div id="addRoleErrors" class="alert alert-danger d-none"></div>

          <!-- Role name -->
          <div class="edit-role-field-group">
            <label class="edit-role-label">
              <i class="bx bx-tag-alt"></i>
              اسم الدور
            </label>
            <input
              name="name"
              class="edit-role-input form-control"
              placeholder="أدخل اسم الدور..."
              required>
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <!-- Permissions -->
          <div class="edit-role-field-group">
            <label class="edit-role-label">
              <i class="bx bx-check-shield"></i>
              الصلاحيات
            </label>

            <!-- Search -->
            <div class="edit-role-perm-search-wrap">
              <i class="bx bx-search edit-role-perm-search-icon"></i>
              <input
                type="text"
                id="addPermSearch"
                class="edit-role-perm-search"
                placeholder="ابحث في الصلاحيات..."
                autocomplete="off">
            </div>

            <!-- Permissions grid -->
            <div class="edit-role-perms-grid" id="addPermissionsList">
              @foreach($permissions as $perm)
                <label class="edit-role-perm-item" data-perm-name="{{ strtolower($perm->name) }}">
                  <input
                    class="edit-role-perm-checkbox"
                    type="checkbox"
                    name="permissions[]"
                    value="{{ $perm->id }}">
                  <span class="edit-role-perm-check-icon"><i class="bx bx-check"></i></span>
                  <span class="edit-role-perm-name">{{ $perm->name }}</span>
                </label>
              @endforeach
            </div>

            <!-- Footer -->
            <div class="edit-role-perms-footer">
              <i class="bx bx-info-circle"></i>
              <span>اختر الصلاحيات لهذا الدور</span>
              <span class="edit-role-perms-count ms-auto" id="addPermCount">0 محدد</span>
            </div>
          </div>

        </div>

        <!-- ══ Footer ══ -->
        <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="addRoleSubmit" class="edit-role-btn-save">
            <span id="addRoleSpinner" class="spinner-border spinner-border-sm d-none"></span>
            <i class="bx bx-save edit-role-save-icon"></i>
            حفظ الدور
          </button>
        </div>

      </form>
    </div>
  </div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

  /* ── Search ── */
  const search = document.getElementById('addPermSearch');
  if (search) {
    search.addEventListener('input', function () {
      const q = this.value.trim().toLowerCase();
      document.querySelectorAll('#addPermissionsList .edit-role-perm-item').forEach(item => {
        const name = (item.dataset.permName || '').toLowerCase();
        item.style.display = (!q || name.includes(q)) ? '' : 'none';
      });
    });
  }

  /* ── Counter ── */
  const countEl = document.getElementById('addPermCount');

  function updateCount() {
    const total = document.querySelectorAll('#addPermissionsList .edit-role-perm-checkbox:checked').length;
    if (countEl) countEl.textContent = total + ' محدد';
  }

  document.querySelectorAll('#addPermissionsList .edit-role-perm-checkbox').forEach(cb => {
    cb.addEventListener('change', updateCount);
  });

  /* ── Click to toggle ── */
  document.querySelectorAll('#addPermissionsList .edit-role-perm-item').forEach(item => {
    item.addEventListener('click', function (e) {
      if (e.target.tagName === 'INPUT') return;
      const cb = this.querySelector('.edit-role-perm-checkbox');
      if (cb) {
        cb.checked = !cb.checked;
        cb.dispatchEvent(new Event('change'));
      }
    });
  });

  updateCount();
});
</script>

<!-- نافذة تعديل دور -->
<!-- نافذة تعديل دور -->
<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 edit-role-modal-content">

      <!-- ══ Header ══ -->
      <div class="edit-role-modal-header">
        <div class="edit-role-header-icon">
          <i class="bx bx-shield-alt-2"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="editRoleModalLabel">تعديل الدور</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 ══ -->
      <form id="editRoleForm" method="POST" novalidate>
        @csrf

        <div class="modal-body edit-role-modal-body">

          <!-- Error box -->
          <div id="editRoleErrors" class="alert alert-danger d-none"></div>

          <!-- Role name -->
          <div class="edit-role-field-group">
            <label class="edit-role-label" for="edit_name">
              <i class="bx bx-tag-alt"></i>
              اسم الدور
            </label>
            <input
              name="name"
              id="edit_name"
              class="edit-role-input form-control"
              required
              placeholder="أدخل اسم الدور...">
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <!-- Permissions -->
          <div class="edit-role-field-group">
            <label class="edit-role-label">
              <i class="bx bx-check-shield"></i>
              الصلاحيات
            </label>

            <!-- Search inside permissions -->
            <div class="edit-role-perm-search-wrap">
              <i class="bx bx-search edit-role-perm-search-icon"></i>
              <input
                type="text"
                id="permSearch"
                class="edit-role-perm-search"
                placeholder="ابحث في الصلاحيات..."
                autocomplete="off">
            </div>

            <!-- Permissions grid -->
            <div class="edit-role-perms-grid" id="existingPermissionsList">
              @foreach($permissions as $perm)
                <label class="edit-role-perm-item" data-perm-name="{{ strtolower($perm->name) }}">
                  <input
                    class="edit-role-perm-checkbox"
                    type="checkbox"
                    name="permissions[]"
                    value="{{ $perm->id }}"
                    data-perm-id="{{ $perm->id }}"
                    data-perm-name="{{ $perm->name }}">
                  <span class="edit-role-perm-check-icon"><i class="bx bx-check"></i></span>
                  <span class="edit-role-perm-name">{{ $perm->name }}</span>
                </label>
              @endforeach
            </div>

            <!-- Footer hint -->
            <div class="edit-role-perms-footer">
              <i class="bx bx-info-circle"></i>
              <span>اختر الصلاحيات الموجودة للدور</span>
              <span class="edit-role-perms-count ms-auto" id="permCount">0 محدد</span>
            </div>
          </div>

        </div><!-- /.modal-body -->

        <!-- ══ Footer ══ -->
        <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="editRoleSubmit" class="edit-role-btn-save">
            <span id="editRoleSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            <i class="bx bx-save edit-role-save-icon"></i>
            حفظ التعديلات
          </button>
        </div>

      </form>
    </div>
  </div>
</div>

<style>
/* ══════════════════════════════════════════════════════
   EDIT ROLE MODAL — modern design, brand colors
   #1A237E primary  |  #FF7043 secondary  |  #64B5F6 tertiary
   ══════════════════════════════════════════════════════ */

.edit-role-modal-content {
  border: none !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(26,35,126,0.18), 0 4px 20px rgba(255,112,67,0.10) !important;
  font-family: 'Tajawal', sans-serif !important;
}

/* ── Header ── */
.edit-role-modal-header {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 24px 28px !important;
  background: linear-gradient(115deg, #1A237E 0%, #283593 55%, #FF7043 130%) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* mesh glow */
.edit-role-modal-header::before {
  content: '' !important;
  position: absolute !important; inset: 0 !important;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(255,112,67,0.28) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 0% 0%,    rgba(100,181,246,0.18) 0%, transparent 55%) !important;
  pointer-events: none !important;
}

/* shimmer bottom border */
.edit-role-modal-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35) 40%, rgba(255,112,67,0.60) 60%, transparent) !important;
}

.edit-role-header-icon {
  position: relative !important;
  z-index: 1 !important;
  width: 46px !important; height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  border: 1px solid rgba(255,255,255,0.22) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  color: #ffffff !important;
  flex-shrink: 0 !important;
}

.edit-role-modal-title {
  position: relative !important;
  z-index: 1 !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

.edit-role-modal-subtitle {
  position: relative !important;
  z-index: 1 !important;
  font-size: .78rem !important;
  color: rgba(255,255,255,0.72) !important;
  font-weight: 500 !important;
}

.edit-role-close-btn {
  position: relative !important;
  z-index: 1 !important;
  margin-right: auto !important;
  margin-left: 0 !important;
  width: 34px !important; height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #ffffff !important;
  font-size: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .2s !important;
  flex-shrink: 0 !important;
}
.edit-role-close-btn:hover { background: rgba(255,255,255,0.24) !important; }

/* ── Body ── */
.edit-role-modal-body {
  padding: 28px 28px 20px !important;
  background: #f8f9ff !important;
}

.edit-role-field-group {
  margin-bottom: 24px !important;
}

.edit-role-label {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: .88rem !important;
  font-weight: 800 !important;
  color: #1A237E !important;
  margin-bottom: 10px !important;
}

.edit-role-label i {
  font-size: 1rem !important;
  color: #FF7043 !important;
}

/* role name input */
.edit-role-input.form-control {
  background: #ffffff !important;
  border: 1.5px solid rgba(26,35,126,0.18) !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .95rem !important;
  font-weight: 600 !important;
  color: #0d1547 !important;
  transition: border-color .22s, box-shadow .22s !important;
  direction: rtl !important;
}
.edit-role-input.form-control::placeholder { color: rgba(26,35,126,0.32) !important; font-weight: 400 !important; }
.edit-role-input.form-control:focus {
  border-color: #FF7043 !important;
  box-shadow: 0 0 0 3px rgba(255,112,67,0.15) !important;
  outline: none !important;
}
.edit-role-input.form-control.is-invalid {
  border-color: #e53935 !important;
  box-shadow: 0 0 0 3px rgba(229,57,53,0.12) !important;
}

/* permission search */
.edit-role-perm-search-wrap {
  position: relative !important;
  margin-bottom: 10px !important;
}
.edit-role-perm-search-icon {
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: rgba(26,35,126,0.40) !important;
  font-size: 1rem !important;
  pointer-events: none !important;
}
.edit-role-perm-search {
  width: 100% !important;
  padding: 9px 40px 9px 14px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(26,35,126,0.14) !important;
  border-radius: 10px !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .88rem !important;
  color: #0d1547 !important;
  direction: rtl !important;
  outline: none !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.edit-role-perm-search:focus {
  border-color: #64B5F6 !important;
  box-shadow: 0 0 0 3px rgba(100,181,246,0.15) !important;
}
.edit-role-perm-search::placeholder { color: rgba(26,35,126,0.32) !important; }

/* permissions grid */
.edit-role-perms-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important;
  gap: 8px !important;
  max-height: 230px !important;
  overflow-y: auto !important;
  padding: 10px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(26,35,126,0.12) !important;
  border-radius: 14px !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(255,112,67,0.35) transparent !important;
}
.edit-role-perms-grid::-webkit-scrollbar { width: 5px !important; }
.edit-role-perms-grid::-webkit-scrollbar-thumb { background: rgba(255,112,67,0.35) !important; border-radius: 99px !important; }

/* individual permission pill */
.edit-role-perm-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 10px !important;
  border: 1.5px solid rgba(26,35,126,0.10) !important;
  background: #f8f9ff !important;
  cursor: pointer !important;
  transition: border-color .18s, background .18s, box-shadow .18s !important;
  user-select: none !important;
  position: relative !important;
}
.edit-role-perm-item:hover {
  border-color: rgba(255,112,67,0.35) !important;
  background: rgba(255,112,67,0.05) !important;
}

/* hidden real checkbox */
.edit-role-perm-checkbox {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important; height: 0 !important;
  pointer-events: none !important;
}

/* custom check square */
.edit-role-perm-check-icon {
  width: 20px !important; height: 20px !important;
  border-radius: 6px !important;
  border: 1.5px solid rgba(26,35,126,0.22) !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  transition: border-color .18s, background .18s !important;
  font-size: .80rem !important;
  color: transparent !important;
}

/* checked state */
.edit-role-perm-item:has(.edit-role-perm-checkbox:checked) {
  border-color: #FF7043 !important;
  background: rgba(255,112,67,0.08) !important;
  box-shadow: 0 2px 8px rgba(255,112,67,0.14) !important;
}
.edit-role-perm-item:has(.edit-role-perm-checkbox:checked) .edit-role-perm-check-icon {
  background: #FF7043 !important;
  border-color: #FF7043 !important;
  color: #ffffff !important;
}
.edit-role-perm-item:has(.edit-role-perm-checkbox:checked) .edit-role-perm-name {
  color: #1A237E !important;
  font-weight: 700 !important;
}

.edit-role-perm-name {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: #374060 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  flex: 1 !important;
  direction: ltr !important;
  text-align: right !important;
}

/* perms footer hint */
.edit-role-perms-footer {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 8px !important;
  font-size: .76rem !important;
  color: rgba(26,35,126,0.50) !important;
  font-weight: 500 !important;
}
.edit-role-perms-footer i { color: #64B5F6 !important; font-size: .9rem !important; }
.edit-role-perms-count {
  font-weight: 800 !important;
  color: #FF7043 !important;
}

/* ── Footer ── */
.edit-role-modal-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 18px 28px !important;
  background: #f0f2ff !important;
  border-top: 1px solid rgba(26,35,126,0.08) !important;
}

.edit-role-btn-cancel {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 22px !important;
  border-radius: 11px !important;
  background: #ffffff !important;
  border: 1.5px solid rgba(26,35,126,0.18) !important;
  color: #1A237E !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .90rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background .2s, border-color .2s !important;
}
.edit-role-btn-cancel:hover {
  background: rgba(26,35,126,0.06) !important;
  border-color: rgba(26,35,126,0.32) !important;
}

.edit-role-btn-save {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 10px 28px !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #FF7043 0%, #e64a19 100%) !important;
  border: none !important;
  color: #ffffff !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: .92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 5px 18px rgba(255,112,67,0.36) !important;
  transition: transform .2s, box-shadow .2s !important;
  letter-spacing: .02em !important;
}
.edit-role-btn-save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,112,67,0.52) !important;
}
.edit-role-btn-save:active { transform: translateY(0) !important; }
.edit-role-btn-save:disabled {
  opacity: .7 !important;
  transform: none !important;
  cursor: not-allowed !important;
}
.edit-role-save-icon { font-size: 1rem !important; }

/* Show-role modal: enforce bold orange readable text */
#showRoleModal #show_role_name,
#showRoleModal #showPermissionsList,
#showRoleModal #showPermissionsList li,
#showRoleModal #showPermissionsList span,
#showRoleModal .perm-text,
#showRoleModal .edit-role-perm-name,
#showRoleModal .edit-role-perms-count,
#showRoleModal .text-muted,
#showRoleModal #noPermsHint {
  color: #FF7043 !important;
  font-weight: 800 !important;
  opacity: 1 !important;
}

#showRoleModal #show_role_name {
  background: #fff7f2 !important;
  border: 1.5px solid rgba(255,112,67,0.35) !important;
  border-radius: 12px !important;
  padding: 11px 16px !important;
}

#showRoleModal .edit-role-perm-check-icon {
  background: #FF7043 !important;
  border-color: #FF7043 !important;
  color: #fff !important;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function () {

  /* ── Live search inside permissions grid ── */
  const permSearch = document.getElementById('permSearch');
  if (permSearch) {
    permSearch.addEventListener('input', function () {
      const q = this.value.trim().toLowerCase();
      document.querySelectorAll('#existingPermissionsList .edit-role-perm-item').forEach(item => {
        const name = (item.dataset.permName || '').toLowerCase();
        item.style.display = (!q || name.includes(q)) ? '' : 'none';
      });
    });
  }

  /* ── Live checked counter ── */
  const permCountEl = document.getElementById('permCount');
  function updatePermCount() {
    if (!permCountEl) return;
    const total = document.querySelectorAll('#existingPermissionsList .edit-role-perm-checkbox:checked').length;
    permCountEl.textContent = total + ' محدد';
  }

  document.querySelectorAll('#existingPermissionsList .edit-role-perm-checkbox').forEach(cb => {
    cb.addEventListener('change', updatePermCount);
  });

  /* ── Click on label toggles hidden checkbox ── */
  document.querySelectorAll('#existingPermissionsList .edit-role-perm-item').forEach(item => {
    item.addEventListener('click', function (e) {
      e.preventDefault();
      if (e.target.tagName === 'INPUT') return; // already handled
      const cb = this.querySelector('.edit-role-perm-checkbox');
      if (cb) { cb.checked = !cb.checked; cb.dispatchEvent(new Event('change')); }
    });
  });

  updatePermCount();
});
</script>




        <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 ===== -->
<!-- ═══════════════════════════════════════ -->
<!-- نافذة عرض تفاصيل الدور (Modern Styled) -->
<!-- ═══════════════════════════════════════ -->
<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 edit-role-modal-content">

      <!-- ══ Header ══ -->
      <div class="edit-role-modal-header">
        <div class="edit-role-header-icon">
          <i class="bx bx-show"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="showRoleModalLabel">تفاصيل الدور</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>

      <!-- ══ Body ══ -->
      <div class="modal-body edit-role-modal-body">

        <!-- Error -->
        <div id="showRoleErrors" class="alert alert-danger d-none"></div>

        <!-- Role name -->
        <div class="edit-role-field-group">
          <label class="edit-role-label">
            <i class="bx bx-tag-alt"></i>
            اسم الدور
          </label>

          <div id="show_role_name" class="edit-role-input" style="pointer-events:none;">
            <!-- injected -->
          </div>
        </div>

        <!-- Permissions -->
        <div class="edit-role-field-group">
          <label class="edit-role-label">
            <i class="bx bx-check-shield"></i>
            الصلاحيات
          </label>

          <!-- Permissions grid (read-only) -->
          <div class="edit-role-perms-grid" id="showPermissionsList">

            <!-- injected dynamically -->
            <div class="text-center text-muted small py-3 w-100" id="noPermsHint">
              — لا توجد صلاحيات —
            </div>

          </div>

          <!-- Footer -->
          <div class="edit-role-perms-footer">
            <i class="bx bx-info-circle"></i>
            <span>الصلاحيات المرتبطة بهذا الدور</span>
            <span class="edit-role-perms-count ms-auto" id="showPermCount">0</span>
          </div>
        </div>

      </div>

      <!-- ══ Footer ══ -->
      <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>
      </div>

    </div>
  </div>
</div>
<script>
function renderShowRole(role) {
  // Name
  document.getElementById('show_role_name').textContent = role.name || '';

  // Permissions container
  const container = document.getElementById('showPermissionsList');
  const countEl = document.getElementById('showPermCount');

  container.innerHTML = '';
  let count = 0;

  if (role.permissions && role.permissions.length) {
    role.permissions.forEach(perm => {
      const item = document.createElement('div');
      item.className = 'edit-role-perm-item';
      item.style.cursor = 'default';

      item.innerHTML = `
        <span class="edit-role-perm-check-icon" style="background:#FF7043;color:#fff;border-color:#FF7043;">
          <i class="bx bx-check"></i>
        </span>
        <span class="edit-role-perm-name">${perm.name}</span>
      `;

      container.appendChild(item);
      count++;
    });
  } else {
    container.innerHTML = `
      <div class="text-center text-muted small py-3 w-100">
        — لا توجد صلاحيات —
}
</script>
<!-- Delete Role Confirmation Modal -->
<!-- ═══════════════════════════════════════ -->
<!-- نافذة تأكيد حذف الدور (Modern Styled) -->
<!-- ═══════════════════════════════════════ -->
<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 edit-role-modal-content">

      <!-- ══ Header ══ -->
      <div class="edit-role-modal-header" style="background: linear-gradient(115deg, #b71c1c 0%, #d32f2f 60%, #ff7043 140%) !important;">
        <div class="edit-role-header-icon" style="background: rgba(255,255,255,0.12);">
          <i class="bx bx-trash"></i>
        </div>
        <div>
          <h5 class="edit-role-modal-title" id="confirmDeleteRoleLabel">تأكيد حذف الدور</h5>
          <span class="edit-role-modal-subtitle">هذا الإجراء لا يمكن التراجع عنه</span>
        </div>
        <button type="button" class="edit-role-close-btn" data-bs-dismiss="modal">
          <i class="bx bx-x"></i>
        </button>
      </div>

      <!-- ══ Body ══ -->
      <div class="modal-body edit-role-modal-body text-center">

        <!-- Warning Icon -->
        <div style="margin-bottom: 16px;">
          <div style="
            width:64px;height:64px;
            margin:auto;
            border-radius:16px;
            background: rgba(211,47,47,0.1);
            display:flex;align-items:center;justify-content:center;
            font-size:1.8rem;
            color:#d32f2f;">
            <i class="bx bx-error-circle"></i>
          </div>
        </div>

        <!-- Message -->
        <p id="confirmDeleteRoleMessage" style="
          font-weight:700;
          color:#1A237E;
          margin-bottom:10px;">
          هل تريد فعلاً حذف هذا الدور؟
        </p>

        <p style="font-size:.85rem; color:rgba(26,35,126,0.6);">
          سيتم حذف الدور وجميع ارتباطاته بالصلاحيات.
        </p>

        <!-- Errors -->
        <div id="confirmDeleteRoleErrors" class="alert alert-danger d-none mt-3"></div>

      </div>

      <!-- ══ Footer ══ -->
      <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="button" id="confirmDeleteRoleBtn" class="edit-role-btn-save"
          style="background: linear-gradient(135deg, #e53935 0%, #b71c1c 100%) !important;
                 box-shadow: 0 6px 20px rgba(229,57,53,0.4) !important;">
          <span id="deleteRoleSpinner" class="spinner-border spinner-border-sm d-none"></span>
          <i class="bx bx-trash"></i>
          نعم، احذف
        </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('#showPermissionsList');
      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 || '— غير معروف —';
        nameEl.style.color = '#FF7043';
        nameEl.style.fontWeight = '800';
      }

      // 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 = '<div class="text-center small py-3" style="color:#FF7043;font-weight:800;">— لا توجد صلاحيات —</div>';
      } 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" style="color:#FF7043;font-weight:800;opacity:1;">${_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('#showPermissionsList');
        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 || '— غير معروف —';
            nameEl.style.color = '#FF7043';
            nameEl.style.fontWeight = '800';
          }
          // 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 = '<div class="text-center small py-3" style="color:#FF7043;font-weight:800;">— لا توجد صلاحيات —</div>';
          } 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" style="color:#FF7043;font-weight:800;opacity:1;">${_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('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  // Ensure any button with data-bs-dismiss="modal" reliably closes its nearest modal.
  document.querySelectorAll('[data-bs-dismiss="modal"]').forEach(btn => {
    // avoid double-binding
    if (btn.__dismissHandlerAttached) return; btn.__dismissHandlerAttached = true;
    btn.addEventListener('click', function (ev) {
      try {
        // find nearest modal ancestor
        const modalEl = this.closest('.modal');
        if (!modalEl) return; // nothing to do
        const bs = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);
        bs.hide();
        // cleanup stray backdrops if any
        document.querySelectorAll('.modal-backdrop').forEach(el => el.remove());
        if (!document.querySelectorAll('.modal.show').length) document.body.classList.remove('modal-open');
      } catch (e) {
        // fallback: toggle aria-hidden and remove show class
        const modalEl = this.closest('.modal');
        if (modalEl) {
          modalEl.classList.remove('show');
          modalEl.setAttribute('aria-hidden','true');
        }
      }
    });
  });
});
</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('style')
<style>
  /* Make show-role modal text clearer: use orange brand color */
  #showRoleModal #show_role_name,
  #showRoleModal .edit-role-perm-name,
  #showRoleModal .perm-text,
  #showRoleModal .edit-role-modal-subtitle,
  #showRoleModal .edit-role-perms-count {
    color: #FF7043 !important;
    font-weight: 700 !important;
    opacity: 1 !important;
  }

  /* Ensure the check icon uses solid orange for visibility */
  #showRoleModal .edit-role-perm-check-icon {
    background: #FF7043 !important;
    border-color: #FF7043 !important;
    color: #fff !important;
  }
</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