@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">


  {{-- Banner card: place this before your main card --}}
{{-- Banner card (Arabic) --}}
<div class="mb-4">
<div class="card banner-card page-title-card shadow-sm border-0 overflow-hidden" dir="rtl">
  <div class="card-body d-flex flex-column flex-md-row align-items-start align-items-md-center justify-content-between">
    <div class="me-0 me-md-4 text-md-end">
        <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">
    <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>

    <div class="card-body">
      @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" 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>

<div class="modal fade" id="addUserModal" tabindex="-1" aria-labelledby="addUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="addUserModalLabel">إضافة مستخدم جديد</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

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

        <div class="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

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

          <div class="mb-3">
            <label class="form-label fw-semibold">الاسم الكامل</label>
            <input name="name" value="{{ old('name') }}" class="form-control" required placeholder="أدخل اسم المستخدم">
            <div class="invalid-feedback" data-field="name"></div>
          </div>

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

          {{-- <div class="mb-3">
            <label class="form-label fw-semibold">كلمة المرور</label>
            <input name="password" class="form-control" type="password" placeholder="••••••••">
            <div class="invalid-feedback" data-field="password"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">تأكيد كلمة المرور</label>
            <input name="password_confirmation" class="form-control" type="password" placeholder="أعد إدخال كلمة المرور">
            <div class="invalid-feedback" data-field="password_confirmation"></div>
          </div> --}}

          <div class="mb-3">
            <label class="form-label fw-semibold">الدور / الصلاحية</label>
            <select name="role" class="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="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">إغلاق</button>
          <button type="submit" id="addUserSubmit"   class="btn btn-success btn-sm d-flex align-items-center btn-add-signalement">
            <span id="addUserSpinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
            حفظ المستخدم
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit User Modal -->
<div class="modal fade" id="editUserModal" tabindex="-1" aria-labelledby="editUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title fw-bold" id="editUserModalLabel">تعديل المستخدم</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>

      <form id="editUserForm" method="POST" novalidate>
        @csrf
        <!-- _method sera ajouté dynamiquement dans FormData lors de l'envoi -->
        <div class="modal-body">
          <div id="editUserErrors" class="alert alert-danger d-none"></div>

          <div class="mb-3">
            <label class="form-label fw-semibold">الاسم الكامل</label>
            <input name="name" id="edit_name" class="form-control" required placeholder="أدخل اسم المستخدم">
            <div class="invalid-feedback" data-field="name"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">البريد الإلكتروني</label>
            <input name="email" id="edit_email" class="form-control" required type="email" placeholder="example@email.com">
            <div class="invalid-feedback" data-field="email"></div>
          </div>

          {{-- <div class="mb-3">
            <label class="form-label fw-semibold">كلمة المرور <small>(اتركها فارغة للحفاظ على الحالية)</small></label>
            <input name="password" id="edit_password" class="form-control" type="password" placeholder="••••••••">
            <div class="invalid-feedback" data-field="password"></div>
          </div>

          <div class="mb-3">
            <label class="form-label fw-semibold">تأكيد كلمة المرور</label>
            <input name="password_confirmation" id="edit_password_confirmation" class="form-control" type="password" placeholder="أعد إدخال كلمة المرور">
            <div class="invalid-feedback" data-field="password_confirmation"></div>
          </div> --}}

          <div class="mb-3">
            <label class="form-label fw-semibold">الأدوار</label>
          <select name="role" id="edit_role" class="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 class="invalid-feedback" data-field="roles"></div>
          </div>
        </div>

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

<!-- Show User Modal -->
<div class="modal fade" id="showUserModal" tabindex="-1" aria-labelledby="showUserModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-md">
    <div class="modal-content">
     <div class="modal-header" style="direction: rtl; justify-content: space-between;">
  <h5 class="modal-title fw-bold" id="showUserModalLabel">عرض المستخدم</h5>
  <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
</div>


      <div class="modal-body">
        <div id="showUserErrors" class="alert alert-danger d-none"></div>

        <div class="mb-2"><strong>الاسم:</strong> <span id="show_user_name"></span></div>
        <div class="mb-2"><strong>البريد الإلكتروني:</strong> <a href="#" id="show_user_email_link"></a></div>
        <div class="mb-2"><strong>الأدوار:</strong> <div id="show_user_roles"></div></div>
        <div class="mb-2"><strong>عضو منذ:</strong> <span id="show_user_created"></span></div>
      </div>

      <div class="modal-footer">
        {{-- <a href="#" id="showUserEditLink" class="btn btn-primary">تعديل</a> --}}
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">إغلاق</button>
      </div>
    </div>
  </div>
</div>
<!-- Global toast container (place once in the page) -->
<div class="position-fixed top-0 end-0 p-3" style="z-index: 2100;">
  <div id="globalToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong id="globalToastTitle" class="me-auto">اشعار</strong>
      <small class="text-muted"></small>
      <button type="button" class="btn-close ms-2 mb-1" data-bs-dismiss="toast" aria-label="إغلاق"></button>
    </div>
    <div class="toast-body" id="globalToastBody"></div>
  </div>
</div>

<!-- Delete confirmation modal -->
<div class="modal fade" id="confirmDeleteModal" tabindex="-1" aria-labelledby="confirmDeleteLabel" aria-hidden="true" dir="rtl">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content text-right">
      <div class="modal-header">
        <h5 class="modal-title" id="confirmDeleteLabel">تأكيد الحذف</h5>
        <button type="button" class="btn-close ms-0" data-bs-dismiss="modal" aria-label="إغلاق"></button>
      </div>
      <div class="modal-body">
        <p id="confirmDeleteMessage">هل تريد فعلاً حذف هذا المستخدم؟</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-light" data-bs-dismiss="modal">إغلاق</button>
        <button type="button" id="confirmDeleteBtn" class="btn btn-danger">نعم، احذف</button>
      </div>
    </div>
  </div>
</div>

@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