@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')
@include('partials.form-editorial-style')

<style>
  .users-page-shell {
    max-width: 1380px;
    margin: 0 auto;
  }

  .users-page-shell > .card {
    width: 100% !important;
  }
</style>

<div class="users-page-shell">


  {{-- Banner card: place this before your main card --}}
{{-- Banner card (Arabic) --}}
<div class="card page-header banner-card page-title-card shadow-sm border-0 overflow-hidden w-100 mb-4" dir="rtl">
  <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
    <div class="me-0 me-md-4 text-md-end">
        <h4 class="mb-1 fw-bold banner-title">مرحبًا بكم في إدارة المستخدمين</h4>
        <p class="mb-3 banner-subtitle">قم بإدارة الحسابات، تعيين الصلاحيات، ومتابعة نشاط المستخدمين بسهولة.</p>

        <div class="d-flex flex-wrap gap-2 justify-content-md-end">
          {{-- إجمالي المستخدمين --}}
          <span class="banner-badge" title="إجمالي المستخدمين">
            <i class="bx bx-user-circle align-middle ms-1"></i>
            إجمالي المستخدمين: <strong>{{ $totalUsers }}</strong>
          </span>

          {{-- Badges حسب الدور --}}
          @foreach($roles as $role)
            <span class="banner-badge" title="{{ $role }}">
              <i class="bx bx-shield align-middle ms-1"></i>
              {{ $role }} : <strong>{{ $roleCounts[$role] ?? 0 }}</strong>
            </span>
          @endforeach
        </div>
      </div>

      {{-- زخرفة اختيارية على اليمين (desktop) --}}
      <div class="banner-graphic d-none d-md-block" aria-hidden="true">
        <!-- kept empty / decorative -->
      </div>
    </div>
  </div>
</div>


  <div class="card shadow-sm border-0 w-100 users-list-card">
    <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="users-search" type="text" class="form-control" placeholder="ابحث ..." aria-label="بحث المكاتب">
          </div>
          </div>
       <div class="d-flex align-items-center gap-2">
           <a href="{{ route('users.export', request()->only(['q','role'])) }}"   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="openAddUser"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement" data-bs-toggle="modal" data-bs-target="#addUserModal">
             <i class="bx bx-plus align-middle me-1"></i> إضافة 
           </button>
      </div>
    </div>

    @if(session('success'))
      <div class="m-3">
        <div class="alert alert-success mb-0">{{ session('success') }}</div>
      </div>
    @endif

    <div class="table-responsive">
      <table class="table table-hover table-striped" id="users-table">
        <thead class="table-light">
          <tr>
            {{-- <th style="width:70px">#</th> --}}
            <th>الاسم</th>
            <th>البريد الإلكتروني</th>
            <th style="width:220px">الأدوار</th>
            <th style="width:150px">الإجراءات</th>
          </tr>
        </thead>
        <tbody>
          @forelse($users as $user)
            <tr>
              {{-- <td class="fw-semibold">{{ $user->id }}</td> --}}
              <td>
          <button type="button"
        class="btn p-0 text-decoration-none openShowUser"
        data-id="{{ $user->id }}"
        data-name="{{ $user->name }}"
        data-email="{{ $user->email }}"
        data-roles='@json($user->getRoleNames())'
        data-created="{{ optional($user->created_at)->format('Y-m-d') }}">

  <div class="d-flex align-items-center justify-content-end gap-2 flex-row-reverse">
    <div>
      <div class="fw-semibold">{{ $user->name }}</div>
      {{-- <small class="text-muted">عضو منذ {{ $user->created_at->format('Y') }}</small> --}}
    </div>
  </div>
</button>
                </td>
                <td><a href="mailto:{{ $user->email }}" class="text-decoration-none text-muted">{{ $user->email }}</a></td>
                <td>
                  @foreach($user->getRoleNames() as $role)
                    <div class="fw-semibold">{{ $role }}</div>
                  @endforeach
                </td>
 <td class="text-end">
  <div class="actions-cell">
    <!-- example: message/show button (green) -->
    <button type="button"
      class="btn btn-icon btn-icon-success openShowUser"
      title="عرض"
      data-id="{{ $user->id }}"
      data-name="{{ $user->name }}"
      data-email="{{ $user->email }}"
      data-roles='@json($user->getRoleNames())'
      data-created="{{ optional($user->created_at)->format('Y-m-d') }}">
      <i class="bx bx-show-alt"></i>
    </button>

    <!-- edit in neutral style -->
    <button type="button"
      class="btn btn-icon btn-icon-outline openEditUser"
      title="تعديل"
      data-id="{{ $user->id }}"
      data-name="{{ $user->name }}"
      data-email="{{ $user->email }}"
      data-roles='@json($user->getRoleNames())'>
      <i class="bx bx-edit"></i>
    </button>

    <!-- delete in danger/pink -->
<form action="{{ route('users.destroy', $user) }}" method="POST" class="delete-user-form" data-user-name="{{ $user->name }}" style="margin:0;">
  @csrf
  @method('DELETE')
  <button class="btn btn-icon btn-icon-danger" type="submit" title="حذف">
    <i class="bx bx-trash"></i>
  </button>
</form>
  </div>
</td>

            </tr>
          @empty
            <tr>
              <td colspan="5" 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 flex-row-reverse">
      <div>
        <small class="text-muted">عرض {{ $users->firstItem() ?? 0 }} - {{ $users->lastItem() ?? 0 }} من {{ $users->total() ?? 0 }}</small>
      </div>
      <div>
        {{ $users->withQueryString()->links() }}
      </div>
    </div>
  </div>

</div>

<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content edit-user-modal-content">

      <div class="edit-user-modal-header">
        <div class="edit-user-header-icon"><i class="bx bx-user-plus"></i></div>
        <div>
          <h5 class="edit-user-modal-title" id="addUserModalLabel">إضافة مستخدم جديد</h5>
          <span class="edit-user-modal-subtitle">إنشاء حساب مستخدم جديد وتعيين دوره</span>
        </div>
        <button type="button" class="edit-user-close-btn" data-bs-dismiss="modal" aria-label="إغلاق"><i class="bx bx-x"></i></button>
      </div>

      <form id="addUserForm" action="{{ route('users.store') }}" method="POST" novalidate>
        @csrf

        <div class="modal-body edit-user-modal-body">
          @if ($errors->any())
            <div class="alert alert-danger">
              <ul class="mb-0">
                @foreach ($errors->all() as $err)
                  <li>{{ $err }}</li>
                @endforeach
              </ul>
            </div>
          @endif

          <div id="addUserErrors" class="alert alert-danger d-none"></div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-id-card"></i>الاسم الكامل</label>
            <input name="name" value="{{ old('name') }}" class="edit-user-input form-control" required placeholder="أدخل اسم المستخدم">
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-envelope"></i>البريد الإلكتروني</label>
            <input name="email" value="{{ old('email') }}" class="edit-user-input form-control" required type="email" placeholder="example@email.com">
            <div class="invalid-feedback" data-field="email"></div>
          </div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-shield-quarter"></i>الدور / الصلاحية</label>
            <select name="role" class="edit-user-input form-select" required>
              <option value="">— اختر الدور —</option>
              @foreach($roles as $role)
                <option value="{{ $role }}">{{ $role }}</option>
              @endforeach
            </select>
            <div class="invalid-feedback" data-field="role"></div>
          </div>
        </div>

        <div class="edit-user-modal-footer">
          <button type="button" class="edit-user-btn-cancel" data-bs-dismiss="modal"><i class="bx bx-x-circle"></i> إلغاء</button>
          <button type="submit" id="addUserSubmit" class="edit-user-btn-save">
            <span id="addUserSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            <i class="bx bx-save"></i>
            حفظ المستخدم
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit User Modal (styled) -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content edit-user-modal-content">

      <!-- Header -->
      <div class="edit-user-modal-header">
        <div class="edit-user-header-icon"><i class="bx bx-user"></i></div>
        <div>
          <h5 class="edit-user-modal-title">تعديل المستخدم</h5>
          <span class="edit-user-modal-subtitle">تحديث معلومات المستخدم ودوره</span>
        </div>
        <button type="button" class="edit-user-close-btn" data-bs-dismiss="modal"><i class="bx bx-x"></i></button>
      </div>

      <form id="editUserForm" method="POST" novalidate>
        @csrf
        <div class="modal-body edit-user-modal-body">
          <div id="editUserErrors" class="alert alert-danger d-none"></div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-id-card"></i>الاسم الكامل</label>
            <input name="name" id="edit_name" class="edit-user-input form-control" required placeholder="أدخل اسم المستخدم">
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-envelope"></i>البريد الإلكتروني</label>
            <input name="email" id="edit_email" type="email" class="edit-user-input form-control" required placeholder="example@email.com">
            <div class="invalid-feedback" data-field="email"></div>
          </div>

          <div class="edit-user-field-group">
            <label class="edit-user-label"><i class="bx bx-shield-quarter"></i>الدور</label>
            <select name="role" id="edit_role" class="edit-user-input form-select" required>
              <option value="">— اختر الدور —</option>
              @foreach($roles as $role)
                <option value="{{ $role }}">{{ $role }}</option>
              @endforeach
            </select>
            <div class="invalid-feedback" data-field="role"></div>
          </div>
        </div>

        <div class="edit-user-modal-footer">
          <button type="button" class="edit-user-btn-cancel" data-bs-dismiss="modal"><i class="bx bx-x-circle"></i> إغلاق</button>
          <button type="submit" id="editUserSubmit" class="edit-user-btn-save"><span id="editUserSpinner" class="spinner-border spinner-border-sm d-none"></span><i class="bx bx-save"></i> حفظ التعديلات</button>
        </div>
      </form>

    </div>
  </div>
</div>
<style>
/* ══════════════════════════════════════════════════════
   EDIT USER MODAL — SAME DESIGN AS ROLE MODAL
   ══════════════════════════════════════════════════════ */

.edit-user-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-user-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;
}

/* glow effect */
.edit-user-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;
}

/* shimmer line */
.edit-user-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.4), transparent) !important;
}

.edit-user-header-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 1.4rem !important;
}

.edit-user-modal-title {
  color: #ffffff !important;
  font-weight: 900 !important;
}

.edit-user-modal-subtitle {
  color: rgba(255,255,255,0.7) !important;
  font-size: .8rem !important;
}

.edit-user-close-btn {
  margin-right: auto !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,0.15) !important;
  border: none !important;
  color: #fff !important;
}

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

.edit-user-field-group {
  margin-bottom: 22px !important;
}

.edit-user-label {
  display: flex !important;
  gap: 6px !important;
  font-weight: 800 !important;
  color: #1A237E !important;
  margin-bottom: 8px !important;
}

.edit-user-label i {
  color: #FF7043 !important;
}

/* Inputs */
.edit-user-input.form-control,
.edit-user-input.form-select {
  border-radius: 12px !important;
  border: 1.5px solid rgba(26,35,126,0.18) !important;
  padding: 10px 14px !important;
  font-weight: 600 !important;
  direction: rtl !important;
}

.edit-user-input:focus {
  border-color: #FF7043 !important;
  box-shadow: 0 0 0 3px rgba(255,112,67,0.15) !important;
}

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

.edit-user-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-weight: 700 !important;
}

.edit-user-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-weight: 800 !important;
  box-shadow: 0 5px 18px rgba(255,112,67,0.36) !important;
  transition: transform .2s, box-shadow .2s !important;
}

.edit-user-btn-save:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(255,112,67,0.52) !important;
}
</style>

<!-- Show User Modal -->
<!-- ═══════════════════════════════
     SHOW USER MODAL (MATCH DESIGN)
     ═══════════════════════════════ -->
<div class="modal fade" id="showUserModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content show-user-modal-content">

      <!-- ══ Header ══ -->
      <div class="show-user-modal-header">
        <div class="show-user-header-icon">
          <i class="bx bx-user-circle"></i>
        </div>
        <div>
          <h5 class="show-user-modal-title">عرض المستخدم</h5>
          <span class="show-user-modal-subtitle">معلومات المستخدم التفصيلية</span>
        </div>
        <button type="button" class="show-user-close-btn" data-bs-dismiss="modal">
          <i class="bx bx-x"></i>
        </button>
      </div>

      <!-- ══ Body ══ -->
      <div class="modal-body show-user-modal-body">

        <!-- Errors -->
        <div id="showUserErrors" class="alert alert-danger d-none"></div>

        <!-- Info Card -->
        <div class="show-user-card">

          <div class="show-user-row">
            <span class="label"><i class="bx bx-id-card"></i> الاسم</span>
            <span class="value" id="show_user_name"></span>
          </div>

          <div class="show-user-row">
            <span class="label"><i class="bx bx-envelope"></i> البريد الإلكتروني</span>
            <a href="#" class="value link" id="show_user_email_link"></a>
          </div>

          <div class="show-user-row">
            <span class="label"><i class="bx bx-shield"></i> الأدوار</span>
            <div class="value roles" id="show_user_roles"></div>
          </div>

          <div class="show-user-row">
            <span class="label"><i class="bx bx-time"></i> عضو منذ</span>
            <span class="value" id="show_user_created"></span>
          </div>

        </div>

      </div>

      <!-- ══ Footer ══ -->
      <div class="show-user-modal-footer">
        <button type="button" class="show-user-btn-close" data-bs-dismiss="modal">
          <i class="bx bx-x-circle"></i> إغلاق
        </button>
      </div>

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

<!-- Toast (unchanged) -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 2100;">
  <div id="globalToast" class="toast" role="alert">
    <div class="toast-header">
      <strong id="globalToastTitle" class="me-auto">اشعار</strong>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body" id="globalToastBody"></div>
  </div>
</div>

<style>
/* ═══════════════════════════════
   SHOW USER MODAL STYLE
   ═══════════════════════════════ */

.show-user-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 */
.show-user-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 28px;
  background: linear-gradient(115deg, #1A237E 0%, #283593 55%, #FF7043 130%);
  position: relative;
}

.show-user-modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(255,112,67,0.28), transparent),
    radial-gradient(ellipse 50% 80% at 0% 0%, rgba(100,181,246,0.18), transparent);
}

.show-user-header-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.4rem;
}

.show-user-modal-title {
  color: white;
  font-weight: 900;
}

.show-user-modal-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: .8rem;
}

.show-user-close-btn {
  margin-right: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
}

/* Body */
.show-user-modal-body {
  padding: 28px;
  background: #f8f9ff;
}

/* Card */
.show-user-card {
  background: white;
  border-radius: 16px;
  padding: 18px 20px;
  border: 1px solid rgba(26,35,126,0.08);
}

/* Rows */
.show-user-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(26,35,126,0.1);
}

.show-user-row:last-child {
  border-bottom: none;
}

.show-user-row .label {
  font-weight: 800;
  color: #1A237E;
  display: flex;
  gap: 6px;
}

.show-user-row .label i {
  color: #FF7043;
}

.show-user-row .value {
  font-weight: 600;
  color: #333;
}

/* Email link */
.show-user-row .link {
  color: #FF7043;
  text-decoration: none;
}
.show-user-row .link:hover {
  text-decoration: underline;
}

/* Roles badges */
.show-user-row .roles span {
  display: inline-block;
  background: rgba(255,112,67,0.1);
  color: #FF7043;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  margin-left: 5px;
}

/* Footer */
.show-user-modal-footer {
  padding: 16px 24px;
  background: #f0f2ff;
}

.show-user-btn-close {
  padding: 10px 22px;
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(26,35,126,0.2);
  font-weight: 700;
  color: #1A237E;
}
</style>

<!-- Delete confirmation modal -->
<!-- ═══════════════════════════════
     DELETE CONFIRM MODAL (MODERN UI)
     ═══════════════════════════════ -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content delete-modal-content">

      <!-- ══ Header ══ -->
      <div class="delete-modal-header">
        <div class="delete-header-icon">
          <i class="bx bx-error"></i>
        </div>
        <div>
          <h5 class="delete-modal-title">تأكيد الحذف</h5>
          <span class="delete-modal-subtitle">هذا الإجراء لا يمكن التراجع عنه</span>
        </div>
        <button type="button" class="delete-close-btn" data-bs-dismiss="modal">
          <i class="bx bx-x"></i>
        </button>
      </div>

      <!-- ══ Body ══ -->
      <div class="modal-body delete-modal-body">
        <p id="confirmDeleteMessage" class="delete-message">
          هل تريد فعلاً حذف هذا المستخدم؟
        </p>
      </div>

      <!-- ══ Footer ══ -->
      <div class="delete-modal-footer">
        <button type="button" class="delete-btn-cancel" data-bs-dismiss="modal">
          <i class="bx bx-x-circle"></i> إغلاق
        </button>

        <button type="button" id="confirmDeleteBtn" class="delete-btn-danger">
          <i class="bx bx-trash"></i>
          نعم، احذف
        </button>
      </div>

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

<style>
/* ═══════════════════════════════
   DELETE MODAL STYLE
   ═══════════════════════════════ */

.delete-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 */
.delete-modal-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 26px;
  background: linear-gradient(115deg, #b71c1c 0%, #d32f2f 55%, #FF7043 130%);
  position: relative;
}

.delete-modal-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 100% at 100% 50%, rgba(255,112,67,0.25), transparent),
    radial-gradient(ellipse 50% 80% at 0% 0%, rgba(255,255,255,0.15), transparent);
}

.delete-header-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.3rem;
}

.delete-modal-title {
  color: #fff;
  font-weight: 900;
}

.delete-modal-subtitle {
  color: rgba(255,255,255,0.75);
  font-size: .78rem;
}

.delete-close-btn {
  margin-right: auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
}

/* Body */
.delete-modal-body {
  padding: 24px;
  background: #fff5f5;
}

.delete-message {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5f2120;
  text-align: center;
}

/* Footer */
.delete-modal-footer {
  display: flex;
  gap: 10px;
  padding: 16px 24px;
  background: #fff0f0;
  border-top: 1px solid rgba(183,28,28,0.1);
}

.delete-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  background: white;
  border: 1px solid rgba(26,35,126,0.2);
  color: #1A237E;
  font-weight: 700;
}

.delete-btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 24px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e53935, #b71c1c);
  color: white;
  border: none;
  font-weight: 800;
  box-shadow: 0 6px 18px rgba(229,57,53,0.35);
  transition: transform .2s, box-shadow .2s;
}

.delete-btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(229,57,53,0.5);
}
</style>

@push('style')
<style>
  /* Force the modal and its backdrop above navbars, dropdowns, etc. */
/* place la modal au-dessus de tout (safe : valeurs élevées) */
.modal-backdrop {
  z-index: 1990 !important;
}
.modal {
  z-index: 2000 !important;
}

</style>
@endpush
@push('scripts')

<script>
document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.getElementById('users-search');
  const tableBody = document.querySelector('#users-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 () {
  // Close user dropdown and any open dropdowns when modal opens
  const modalEl = document.getElementById('addUserModal');
  
  if (modalEl) {
    modalEl.addEventListener('show.bs.modal', function () {
      try {
        // hide bootstrap Dropdown attached to user toggle if exists
        const userToggle = document.getElementById('rtl-user-toggle');
        if (userToggle) {
          const dd = bootstrap.Dropdown.getInstance(userToggle) || new bootstrap.Dropdown(userToggle);
          dd.hide(); // ensure dropdown is hidden
        }

        // remove show class from any dropdown menus that might be stuck open
        document.querySelectorAll('.dropdown-menu.show').forEach(menu => {
          menu.classList.remove('show');
        });
      } catch (e) {
        console.warn('Modal show handler error:', e);
      }
    });

    // Optional: when modal is fully hidden, return focus to the add button
    modalEl.addEventListener('hidden.bs.modal', function () {
      const openBtn = document.getElementById('openAddUser');
      if (openBtn) openBtn.focus();
    });
  }
});
document.addEventListener('DOMContentLoaded', function () {
  const modalEl = document.getElementById('confirmDeleteModal');
  if (!modalEl) return;
  const bsModal = bootstrap.Modal.getOrCreateInstance(modalEl);
  const msgEl = document.getElementById('confirmDeleteMessage');
  const confirmBtn = document.getElementById('confirmDeleteBtn');

  // keep a reference to the form to submit after confirmation
  let pendingForm = null;

  // delegate to all forms with class .delete-user-form
  document.querySelectorAll('form.delete-user-form').forEach(form => {
    // prevent default submission
    form.addEventListener('submit', function (e) {
      e.preventDefault();
      pendingForm = form;

      const userName = form.dataset.userName || '';
      // customize the message, keep it short and RTL-friendly
      msgEl.textContent = userName
        ? `هل تريد فعلاً حذف المستخدم «${userName}»؟ هذا الإجراء لا يمكن التراجع عنه.`
        : 'هل تريد فعلاً حذف هذا المستخدم؟ هذا الإجراء لا يمكن التراجع عنه.';

      // show modal
      bsModal.show();

      // focus confirm button for keyboard users
      setTimeout(() => confirmBtn.focus(), 150);
    });
  });

  // when confirm clicked -> submit the stored form
  confirmBtn.addEventListener('click', function () {
    if (!pendingForm) {
      bsModal.hide();
      return;
    }
    // Option 1: use regular submission (causes a full POST)
    pendingForm.submit();

    // Option 2: if you prefer AJAX, do fetch here and then hide modal / handle response.
    // After submit, clear pendingForm
    pendingForm = null;
    bsModal.hide();
  });

  // Clear pendingForm if modal dismissed
  modalEl.addEventListener('hidden.bs.modal', function () {
    pendingForm = null;
  });
});

</script>


@endpush
@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const addForm = document.getElementById('addUserForm');
  const submitBtn = document.getElementById('addUserSubmit');
  const spinner = document.getElementById('addUserSpinner');
  const errorsBox = document.getElementById('addUserErrors');
  const modalEl = document.getElementById('addUserModal');

  // Toast helper (Bootstrap 5)
  function showToast(title, body, success = true, delay = 3500) {
    const containerId = 'globalToastContainer';
    let container = document.getElementById(containerId);
    if (!container) {
      container = document.createElement('div');
      container.id = containerId;
      container.style.position = 'fixed';
      container.style.zIndex = 2200;
      container.style.top = '1rem';
      container.style.right = '1rem';
      document.body.appendChild(container);
    }
    const toastEl = document.createElement('div');
    toastEl.className = 'toast align-items-center text-bg-' + (success ? 'success' : 'danger') + ' border-0';
    toastEl.setAttribute('role','alert');
    toastEl.setAttribute('aria-live','assertive');
    toastEl.setAttribute('aria-atomic','true');
    toastEl.style.minWidth = '220px';
    toastEl.innerHTML = `
      <div class="d-flex">
        <div class="toast-body" style="text-align:right;">${title ? '<strong>' + title + '</strong><br>' : ''}${body}</div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    `;
    container.appendChild(toastEl);
    const bs = new bootstrap.Toast(toastEl, { delay });
    bs.show();
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
  }

  function clearFieldErrors(){
    if (!addForm) return;
    addForm.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    addForm.querySelectorAll('.invalid-feedback').forEach(el => el.innerText = '');
    if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }
  }

  function getCsrfToken(){
    const meta = document.querySelector('meta[name="csrf-token"]');
    if (meta && meta.getAttribute('content')) return meta.getAttribute('content');
    const match = document.cookie.match(new RegExp('(^|; )XSRF-TOKEN=([^;]+)'));
    if (match) { try { return decodeURIComponent(match[2]); } catch(e) { return match[2]; } }
    return null;
  }

  if (!addForm) return;
const originalForm = document.getElementById('addUserForm');
if (originalForm) {
  const clone = originalForm.cloneNode(true);
  originalForm.parentNode.replaceChild(clone, originalForm);
  // reassign addForm variable to the new node
  addForm = document.getElementById('addUserForm');
}
  // Remove any old submit handlers to avoid duplicates
  addForm.addEventListener('submit', async function (e) {
    e.preventDefault();
    clearFieldErrors();

    const csrfToken = getCsrfToken();
    if (!csrfToken) {
      showToast('خطأ', 'رمز CSRF مفقود — أعد تحميل الصفحة.', false);
      return;
    }

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

    const fd = new FormData(addForm);
    const action = addForm.getAttribute('action') || window.location.href;

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

      // read text first then try parse to JSON (robust)
      const text = await res.text();
      let json = null;
      try { json = text ? JSON.parse(text) : null; } catch (err) { json = null; }

      if (res.status === 422) {
        const errs = (json && json.errors) ? json.errors : {};
        // mark fields
        Object.keys(errs).forEach(field => {
          const input = addForm.querySelector(`[name="${field}"], [name="${field}[]"]`);
          if (input) input.classList.add('is-invalid');
          const fb = addForm.querySelector(`.invalid-feedback[data-field="${field}"]`);
          if (fb) fb.innerText = Array.isArray(errs[field]) ? errs[field].join(' ') : errs[field];
        });
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = (json && json.message) ? json.message : 'تحقق من الحقول.'; }
        showToast('خطأ', (json && json.message) ? json.message : 'تحقق من الحقول المُحددة.', false);
        return;
      }

      if (res.ok || res.status === 201) {
        // success — use server message if present
        const msg = (json && (json.message || json.data?.message)) ? (json.message || json.data.message) : 'تم إنشاء المستخدم بنجاح.';
        // hide modal and notify
   const bsModal = bootstrap.Modal.getInstance(modalEl);
if (bsModal) bsModal.hide();
// show inline message where server flash appears
window.showInlineAlert('success', msg);
// reload after a short delay so user sees the message
setTimeout(() => location.reload(), 900);

        return;
      }

      // any other non-ok status
      const fallback = (json && json.message) ? json.message : (text || 'حدث خطأ على الخادم.');
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = fallback; }
      showToast('خطأ', fallback, false);
      console.error('users.store error', res.status, text);

    } catch (err) {
      showToast('خطأ', 'خطأ في الاتصال — تحقق من الخادم (انظر console).', false);
      console.error('Network error', err);
    } finally {
      spinner.classList.add('d-none');
      submitBtn.removeAttribute('disabled');
    }
  });
});
// on page load, show flash stored by previous AJAX action (then remove it)
document.addEventListener('DOMContentLoaded', function () {
  try {
    const raw = localStorage.getItem('app_flash');
    if (!raw) return;
    const data = JSON.parse(raw || '{}');
    if (data && data.msg) {
      // prefer showInlineAlert if available
      if (typeof window.showInlineAlert === 'function') {
        window.showInlineAlert(data.type || 'success', data.msg);
      } else if (typeof window.showToast === 'function') {
        window.showToast(data.type === 'success' ? 'نجاح' : 'خطأ', data.msg, data.type === 'success');
      } else {
        // fallback to alert box
        console.info('FLASH:', data);
      }
    }
  } catch (e) {
    // ignore errors
    console.warn('flash show failed', e);
  } finally {
    try { localStorage.removeItem('app_flash'); } catch (e) { /* ignore */ }
  }
});

</script>


@endpush
@push('scripts')
<script>
// Inline alert helper — inserts into the same place as your server flash (top of the card body)
(function(){
  function findAlertInsertTarget(){
    // the element that contains the table and currently shows server flash <div class="card-body p-0">
    return document.querySelector('.card.shadow-sm.border-0 .card-body.p-0') ||
           document.querySelector('.card .card-body.p-0') ||
           document.querySelector('.card .card-body') ||
           document.body;
  }

  window.clearInlineAlerts = function(){
    document.querySelectorAll('.inline-server-alert').forEach(el => el.remove());
  };

  window.showInlineAlert = function(type, htmlText, options = {}){
    // type: 'success' | 'danger' | 'warning' | 'info'
    // htmlText: string (may contain small html)
    // options: { persist: boolean, timeout: number (ms) }
    const persist = !!options.persist;
    const timeout = typeof options.timeout === 'number' ? options.timeout : 4500;

    // remove previous
    clearInlineAlerts();

    const target = findAlertInsertTarget();
    const wrapper = document.createElement('div');
    wrapper.className = 'm-3 inline-server-alert';
    // RTL safe and role=alert for a11y
    wrapper.innerHTML = `<div class="alert alert-${type} mb-0" role="alert" style="direction: rtl;">${htmlText}</div>`;

    // Insert *before* the target so it appears where your blade's server flash is shown
    if (target && target.parentNode) target.parentNode.insertBefore(wrapper, target);
    else document.body.insertBefore(wrapper, document.body.firstChild);

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

<script>
document.addEventListener('DOMContentLoaded', function () {
  // template URL for update route: Laravel will render this string (we'll replace :id)
  const updateUrlTemplate = "{{ route('users.update', ':id') }}";

  // get references in this scope so submit handler can access them
  const editModalEl = document.getElementById('editUserModal'); // <- fixed scope name
  const editForm = document.getElementById('editUserForm');

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

  // lightweight toast fallback (only if no global showToast exists)
  function localShowToast(title, body, success = true, delay = 2500) {
    if (typeof showToast === 'function') {
      try { showToast(title, body, success, delay); return; } catch(e) { /* ignore */ }
    }
    // fallback: tiny toast using bootstrap classes if available
    const containerId = 'localToastContainer';
    let container = document.getElementById(containerId);
    if (!container) {
      container = document.createElement('div');
      container.id = containerId;
      container.style.position = 'fixed';
      container.style.zIndex = 2500;
      container.style.top = '1rem';
      container.style.left = '50%';
      container.style.transform = 'translateX(-50%)';
      document.body.appendChild(container);
    }
    const toastEl = document.createElement('div');
    toastEl.className = 'toast align-items-center text-bg-' + (success ? 'success' : 'danger') + ' border-0';
    toastEl.setAttribute('role','alert');
    toastEl.setAttribute('aria-live','assertive');
    toastEl.setAttribute('aria-atomic','true');
    toastEl.style.minWidth = '220px';
    toastEl.innerHTML = `<div class="d-flex"><div class="toast-body" style="text-align:center;">${title ? '<strong>' + title + '</strong><br>' : ''}${body}</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button></div>`;
    container.appendChild(toastEl);
    const bs = new bootstrap.Toast(toastEl, { delay });
    bs.show();
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
  }

  function showFieldErrors(formEl, errors) {
    // reset
    formEl.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    formEl.querySelectorAll('.invalid-feedback').forEach(el => el.innerText = '');

    Object.keys(errors).forEach(field => {
      const cleanField = field.replace(/\.\d+$/, '');
      const input = formEl.querySelector(`[name="${cleanField}"], [name="${cleanField}[]"]`);
      if (input) input.classList.add('is-invalid');
      const fb = formEl.querySelector(`.invalid-feedback[data-field="${cleanField}"]`);
      if (fb) fb.innerText = (errors[field] || []).join(' ');
    });
  }

  // OPEN modal & populate fields
  document.querySelectorAll('.openEditUser').forEach(btn => {
    btn.addEventListener('click', function () {
      const id = this.dataset.id;
      const name = this.dataset.name || '';
      const email = this.dataset.email || '';
      let roles = [];
      try { roles = JSON.parse(this.getAttribute('data-roles') || '[]'); } catch(e) { roles = []; }

      const modalElLocal = editModalEl;
      const bsModal = bootstrap.Modal.getInstance(modalElLocal) || new bootstrap.Modal(modalElLocal);

      // fill inputs
      document.getElementById('edit_name').value = name;
      document.getElementById('edit_email').value = email;

      // role: single select (choose first available role if multiple)
      const roleSelect = document.getElementById('edit_role');
      if (roleSelect) {
        roleSelect.value = (roles && roles.length) ? roles[0] : '';
      }

      // store target action on the form element (we'll replace :id)
      const form = document.getElementById('editUserForm');
      const action = updateUrlTemplate.replace(':id', id);
      form.setAttribute('action', action);

      // clear error box
      const errorsBox = document.getElementById('editUserErrors');
      if (errorsBox) {
        errorsBox.classList.add('d-none');
        errorsBox.innerText = '';
      }

      // show modal
      bsModal.show();

      // focus first input
      setTimeout(() => document.getElementById('edit_name').focus(), 200);
    });
  });

  // SUBMIT edit form via fetch (robust)
  if (!editForm) return;

  editForm.addEventListener('submit', async function (e) {
    e.preventDefault();

    const submitBtn = document.getElementById('editUserSubmit');
    const spinner = document.getElementById('editUserSpinner');
    const errorsBox = document.getElementById('editUserErrors');

    // clear previous errors
    editForm.querySelectorAll('.is-invalid').forEach(el => el.classList.remove('is-invalid'));
    editForm.querySelectorAll('.invalid-feedback').forEach(el => el.innerText = '');
    if (errorsBox) { errorsBox.classList.add('d-none'); errorsBox.innerText = ''; }

    const csrfToken = getCsrfToken();
    if (!csrfToken) {
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'رمز CSRF مفقود — تحقق من وجود meta[name=\"csrf-token\"]'; }
      return;
    }

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

    // build FormData (include _method=PUT)
    const fd = new FormData(editForm);
    fd.append('_method', 'PUT');

    // single role field
    const roleSelect = document.getElementById('edit_role');
    if (roleSelect) {
      fd.delete('role');
      fd.append('role', roleSelect.value);
    }

    const action = editForm.getAttribute('action') || window.location.href;

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

      // parse response text then try JSON (robust)
      const text = await res.text();
      let json = null;
      try { json = text ? JSON.parse(text) : null; } catch (err) { json = null; }

      if (res.status === 422) {
        const errs = (json && json.errors) ? json.errors : {};
        showFieldErrors(editForm, errs);
        if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = (json && json.message) ? json.message : 'تحقق من الحقول المُحددة.'; }
        return;
      }

if (res.ok) {
  const successMsg = (json && json.message) ? json.message : 'تم حفظ التعديلات.';

  // hide modal immediately (optional UX)
  try {
    const bs = bootstrap.Modal.getInstance(editModalEl);
    if (bs) bs.hide();
  } catch (e) { /* ignore */ }

  // store flash in localStorage so it survives the reload
  try {
    localStorage.setItem('app_flash', JSON.stringify({ type: 'success', msg: successMsg }));
  } catch (e) {
    // storage might fail in private mode; fallback: still reload
    console.warn('localStorage set failed', e);
  }

  // reload the page — after reload the message will be read and displayed
  window.location.reload();
  return;
}


      // non-OK server response: show returned message or raw text
      const fallback = (json && (json.message || json.error)) ? (json.message || json.error) : (text || 'حدث خطأ على الخادم.');
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = fallback; }
    } catch (err) {
      if (errorsBox) { errorsBox.classList.remove('d-none'); errorsBox.innerText = 'خطأ في الاتصال — راجع وحدة التحكم (console).'; }
      console.error('Edit user submit error:', err);
    } finally {
      if (spinner) spinner.classList.add('d-none');
      if (submitBtn) submitBtn.removeAttribute('disabled');
    }
  });

});
</script>
@endpush


@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
  const showModalEl = document.getElementById('showUserModal');
  if (!showModalEl) return;

  // ensure we have a single instance helper
  function getShowModalInstance() {
    return bootstrap.Modal.getInstance(showModalEl) || new bootstrap.Modal(showModalEl);
  }

  function clearShowModal() {
    const nameEl = document.getElementById('show_user_name');
    const emailEl = document.getElementById('show_user_email_link');
    const rolesEl = document.getElementById('show_user_roles');
    const createdEl = document.getElementById('show_user_created');
    const avatarEl = document.getElementById('show_user_avatar');
    const errorsEl = document.getElementById('showUserErrors');

    if (nameEl) nameEl.innerText = '';
    if (emailEl) { emailEl.innerText = ''; emailEl.setAttribute('href', '#'); }
    if (rolesEl) rolesEl.innerHTML = '';
    if (createdEl) createdEl.innerText = '';
    if (avatarEl) avatarEl.setAttribute('src', '{{ asset("assets/img/avatars/1.png") }}');
    if (errorsEl) { errorsEl.classList.add('d-none'); errorsEl.innerText = ''; }
  }

  // open modal & populate fields
  document.querySelectorAll('.openShowUser').forEach(btn => {
    btn.addEventListener('click', function (e) {
      e.preventDefault();

      // populate
      clearShowModal();
      const id = this.dataset.id;
      const name = this.dataset.name || '';
      const email = this.dataset.email || '';
      const created = this.dataset.created || '';
      let roles = [];
      try { roles = JSON.parse(this.getAttribute('data-roles') || '[]'); } catch (err) { roles = []; }

      const nameEl = document.getElementById('show_user_name');
      const emailEl = document.getElementById('show_user_email_link');
      const rolesEl = document.getElementById('show_user_roles');
      const createdEl = document.getElementById('show_user_created');

      if (nameEl) nameEl.innerText = name;
      if (emailEl) { emailEl.innerText = email; emailEl.setAttribute('href', 'mailto:' + email); }
      if (createdEl) createdEl.innerText = created;

      if (rolesEl) {
        rolesEl.innerHTML = '';
        if (roles.length === 0) {
          rolesEl.innerHTML = '<small class="text-muted">— لا يوجد —</small>';
        } else {
          roles.forEach(r => {
            const d = document.createElement('div');
            d.className = 'fw-semibold';
            d.innerText = r;
            rolesEl.appendChild(d);
          });
        }
      }

      // show modal
      try {
        getShowModalInstance().show();
      } catch (err) {
        console.error('Error showing showUserModal', err);
      }

      setTimeout(() => {
        const close = showModalEl.querySelector('.btn-close');
        if (close) close.focus();
      }, 200);
    });
  });

  // cleanup when hidden




});
</script>

<!-- put this once (near the other scripts, before code that calls showToast) -->
<script>
  // global showToast used by add/edit handlers (same container/position as your add-user helper)
  window.showToast = function(title, body, success = true, delay = 3500) {
    const containerId = 'globalToastContainer';
    let container = document.getElementById(containerId);
    if (!container) {
      container = document.createElement('div');
      container.id = containerId;
      container.style.position = 'fixed';
      container.style.zIndex = 2200;
      container.style.top = '1rem';
      container.style.right = '1rem';
      document.body.appendChild(container);
    }

    const toastEl = document.createElement('div');
    toastEl.className = 'toast align-items-center text-bg-' + (success ? 'success' : 'danger') + ' border-0';
    toastEl.setAttribute('role','alert');
    toastEl.setAttribute('aria-live','assertive');
    toastEl.setAttribute('aria-atomic','true');
    toastEl.style.minWidth = '220px';
    toastEl.innerHTML = `
      <div class="d-flex">
        <div class="toast-body" style="text-align:right;">
          ${title ? '<strong>' + title + '</strong><br>' : ''}${body}
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    `;
    container.appendChild(toastEl);
    const bs = new bootstrap.Toast(toastEl, { delay });
    bs.show();
    toastEl.addEventListener('hidden.bs.toast', () => toastEl.remove());
  };
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
  // --- helpers (preserve previous functions if any) ---
  function isIconOnlyButton(btn) {
    if (!btn) return false;
    // إذا يوجد نص واضح (بخلاف مسافات) -> ليس أيقونة فقط
    const text = (btn.textContent || '').trim();
    if (text.length > 0) return false;
    // يوجد عنصر أيقون (i or svg)
    return !!btn.querySelector('i, svg');
  }

  // موجود / سابق: setBtnLoading & clearBtnLoading (kept minimal)
  function setBtnLoading(btn, labelAr) {
    if (!btn) return;
    // guard: if this button was marked to preserve icon-only, skip entirely
    if (btn.dataset.preserveIcon === 'true' || btn.classList.contains('preserve-icon')) return;

    // If it's icon-only (trash icon) we DON'T change it
    if (isIconOnlyButton(btn)) return;

    if (btn.dataset._origHtml === undefined) btn.dataset._origHtml = btn.innerHTML;

    let spinner = btn.querySelector('.spinner-border');
    if (spinner) spinner.classList.remove('d-none');
    else {
      spinner = document.createElement('span');
      spinner.className = 'spinner-border spinner-border-sm ms-2';
      spinner.setAttribute('role','status');
      spinner.setAttribute('aria-hidden','true');
      btn.insertBefore(spinner, btn.firstChild);
    }

    let textEl = btn.querySelector('.btn-text');
    if (!textEl) {
      textEl = document.createElement('span');
      textEl.className = 'btn-text';
      // gather textual nodes (ignore spinner)
      const nodes = Array.from(btn.childNodes).filter(n => !(n.nodeType === 1 && n.classList.contains('spinner-border')));
      const texts = nodes.map(n => n.nodeType === 3 ? n.textContent : n.textContent || '').join('').trim();
      textEl.textContent = texts || '';
      nodes.forEach(n => { if (!(n.nodeType === 1 && n.classList.contains('spinner-border'))) n.remove(); });
      btn.appendChild(textEl);
    }

    textEl.textContent = labelAr;
    btn.setAttribute('disabled','disabled');
    btn.classList.add('loading');
    btn.dataset._loadingSince = Date.now();
  }

  function clearBtnLoading(btn) {
    if (!btn) return;
    if (btn.dataset._origHtml !== undefined) {
      btn.innerHTML = btn.dataset._origHtml;
      delete btn.dataset._origHtml;
    } else {
      const spinner = btn.querySelector('.spinner-border');
      if (spinner) spinner.classList.add('d-none');
    }
    btn.removeAttribute('disabled');
    btn.classList.remove('loading');
    delete btn.dataset._loadingSince;
  }

  // --- main: auto show loading on form submit, but skip delete-icon forms/buttons ---
  document.querySelectorAll('form').forEach(form => {
    form.addEventListener('submit', function (e) {
      // If the form is a delete form in table, do NOT change the button (we handle via confirm modal)
      if (form.classList.contains('delete-user-form')) {
        // mark the form as pending so the confirm modal code can pick it up if needed
        form.setAttribute('aria-pending','true');
        return; // don't change its submit button
      }

      // find the first submit button in the form
      const btn = form.querySelector('button[type="submit"], input[type="submit"]');
      if (!btn) return;

      // if this button is icon-only or marked to preserve, skip
      if (isIconOnlyButton(btn) || btn.dataset.preserveIcon === 'true' || btn.classList.contains('preserve-icon')) {
        return;
      }

      // decide label heuristic
      const id = (form.id || '').toLowerCase();
      let label = 'جاري الحفظ...';
      if (id.includes('delete') || form.dataset.method === 'delete' || (form._method && form._method.toLowerCase && form._method.toLowerCase() === 'delete')) {
        label = 'جارٍ الحذف...';
      } else if (id.includes('edit') || id.includes('update')) {
        label = 'جاري الحفظ...';
      } else if (id.includes('add') || id.includes('create') || form.getAttribute('action') && /store|create|add/i.test(form.getAttribute('action'))) {
        label = 'جاري الحفظ...';
      }
      if (btn.dataset.loadingLabel) label = btn.dataset.loadingLabel;

      setBtnLoading(btn, label);
    }, true); // capture = true so it runs before other submit handlers
  });

  // --- keep confirm delete modal logic (ensure it marks/unmarks pending forms) ---
  const confirmDeleteModal = document.getElementById('confirmDeleteModal');
  const confirmDeleteBtn = document.getElementById('confirmDeleteBtn');
  if (confirmDeleteBtn && confirmDeleteModal) {
    let pendingForm = null;

    // intercept 'open' on forms: your existing code sets pendingForm when opening modal.
    // We'll also listen to form submit events to set pendingForm attribute.
    document.querySelectorAll('form.delete-user-form').forEach(form => {
      form.addEventListener('submit', function (ev) {
        ev.preventDefault();
        pendingForm = form;
        // set aria-pending for reference
        form.setAttribute('aria-pending','true');

        // update modal message (reuse your existing msg element if present)
        const msgEl = document.getElementById('confirmDeleteMessage');
        const userName = form.dataset.userName || '';
        if (msgEl) {
          msgEl.textContent = userName
            ? `هل تريد فعلاً حذف المستخدم «${userName}»؟ هذا الإجراء لا يمكن التراجع عنه.`
            : 'هل تريد فعلاً حذف هذا المستخدم؟ هذا الإجراء لا يمكن التراجع عنه.';
        }

        // show modal
        const bs = bootstrap.Modal.getOrCreateInstance(confirmDeleteModal);
        bs.show();

        setTimeout(() => confirmDeleteBtn.focus(), 150);
      });
    });

    confirmDeleteBtn.addEventListener('click', function () {
      if (!pendingForm) {
        const bsx = bootstrap.Modal.getInstance(confirmDeleteModal);
        if (bsx) bsx.hide();
        return;
      }

      // show loading on confirm button only (we preserve the table trash button)
      setBtnLoading(confirmDeleteBtn, 'جارٍ الحذف...');

      // submit the pending form (regular submit -> navigation) after a tiny delay so UI shows
      setTimeout(() => pendingForm.submit(), 120);
    });

    // when modal hidden, clear pending mark and reset pendingForm
    confirmDeleteModal.addEventListener('hidden.bs.modal', function () {
      if (pendingForm) pendingForm.removeAttribute('aria-pending');
      pendingForm = null;
      // make sure confirm button restored (in case modal closed without submitting)
      clearBtnLoading(confirmDeleteBtn);
    });
  }

  // safety auto-clear: restore any stuck loading buttons after 12s
  setInterval(() => {
    document.querySelectorAll('button.loading').forEach(btn => {
      const since = Number(btn.dataset._loadingSince || 0);
      if (!since) return;
      if (Date.now() - since > 12000) clearBtnLoading(btn);
    });
  }, 4000);

});
</script>



@endpush


{{-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> --}}
@stack('scripts')
@endsection