@extends('admin::layouts.master')
@php
    $pageTitle = 'لیست کاربران';
@endphp

@section('title', 'کاربران')
@section('content')
    <div class="row">
        <div class="col-12">
            <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="javascript: void(0);">کاربران</a></li>
                        <li class="breadcrumb-item active">لیست کاربران</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <div id="appointmentList">
        <div class="row g-3 mb-3">
            <div class="col-xxl-3">
                <div class="search-box">
                    <form action="{{ route('admin.users.index') }}" method="GET" id="searchForm">
                        <input type="text" class="form-control search" name="q" value="{{ request('q') }}"
                            placeholder="جستجوی نام کاربران، ایمیل، شماره تماس...">
                        <i class="ri-search-line search-icon"></i>
                    </form>
                </div>
            </div>

            
            <!-- فیلتر نقش -->
            <div class="col-xxl-2">
                <select class="form-select" name="role" form="searchForm" id="roleFilter">
                    <option value="">همه نقش‌ها</option>
                    <option value="admin" {{ request('role') == 'admin' ? 'selected' : '' }}>مدیر سیستم</option>
                    <option value="staff" {{ request('role') == 'staff' ? 'selected' : '' }}>کارمند</option>
                    <option value="owner" {{ request('role') == 'owner' ? 'selected' : '' }}>برگزارکننده</option>
                    <option value="member" {{ request('role') == 'member' ? 'selected' : '' }}>عضو تیم</option>
                </select>
            </div>

            <!-- فیلتر وضعیت -->
            <div class="col-xxl-2">
                <select class="form-select" name="status" form="searchForm" id="statusFilter">
                    <option value="">همه وضعیت‌ها</option>
                    <option value="active" {{ request('status') == 'active' ? 'selected' : '' }}>فعال</option>
                    <option value="inactive" {{ request('status') == 'inactive' ? 'selected' : '' }}>غیرفعال</option>
                </select>
            </div>

            <div class="col-xxl-auto col-sm-6 ms-auto">
                <div class="hstack gap-2">
                    <!-- دکمه اعمال فیلتر -->
                    <button type="submit" class="btn btn-primary" form="searchForm">
                        <i class="bi bi-funnel align-baseline me-1"></i> اعمال فیلتر
                    </button>

                    <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createUserModal">
                        <i class="bi bi-plus-circle align-baseline me-1"></i> کاربر جدید
                    </button>

                    <!-- دکمه پاک کردن فیلترها -->
                    @if (request()->hasAny(['q', 'role', 'status']))
                        <a href="{{ route('admin.users.index') }}" class="btn btn-outline-danger" title="حذف تمام فیلترها">
                            <i class="bi bi-arrow-clockwise align-baseline me-1"></i> حذف فیلترها
                        </a>
                    @endif
                </div>
            </div>
        </div>

        <!-- نمایش وضعیت فیلترهای فعال -->
        @if (request()->hasAny(['q', 'role', 'status']))
            <div class="row mb-3">
                <div class="col-12">
                    <div class="alert alert-info alert-dismissible fade show py-2" role="alert">
                        <div class="d-flex align-items-center">
                            <i class="bi bi-funnel me-2"></i>
                            <div class="flex-grow-1">
                                <strong>فیلترهای فعال:</strong>
                                @if (request('q'))
                                    <span class="badge bg-primary me-1">جستجو: "{{ request('q') }}"</span>
                                @endif
                                @if (request('role'))
                                    @php
                                        $roleLabels = [
                                            'admin' => 'مدیر سیستم',
                                            'staff' => 'کارمند',
                                            'owner' => 'برگزارکننده',
                                            'member' => 'عضو تیم',
                                        ];
                                    @endphp
                                    <span class="badge bg-success me-1">نقش:
                                        {{ $roleLabels[request('role')] ?? request('role') }}</span>
                                @endif
                                @if (request('status'))
                                    <span class="badge bg-warning me-1">وضعیت:
                                        {{ request('status') == 'active' ? 'فعال' : 'غیرفعال' }}</span>
                                @endif
                            </div>
                            <a href="{{ route('admin.users.index') }}" class="btn-close" aria-label="بستن"></a>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-custom align-middle table-borderless table-nowrap">
                                <thead>
                                    <tr>
                                        <th>#</th>
                                        <th class="sort cursor-pointer" data-sort="userName">نام کاربر</th>
                                        <th class="sort cursor-pointer" data-sort="email">ایمیل</th>
                                        <th class="sort cursor-pointer" data-sort="role">نقش</th>
                                        <th class="sort cursor-pointer" data-sort="status">وضعیت</th>
                                        <th class="sort cursor-pointer" data-sort="createdAt">تاریخ عضویت</th>
                                        <th>عملیات</th>
                                    </tr>
                                </thead>
                                <tbody class="list form-check-all">
                                    @forelse($users as $user)
                                        <tr>
                                            <td>{{ $loop->iteration }}</td>
                                            <td class="userName">
                                                <h6 class="mb-0">
                                                    <a href="#!" class="text-reset">{{ $user->name }}</a>
                                                </h6>
                                            </td>
                                            <td class="email">{{ $user->email ?? '-' }}</td>
                                            <td class="role">
                                                @switch($user->role)
                                                    @case('admin')
                                                        مدیر سیستم
                                                    @break

                                                    @case('staff')
                                                        کارمند
                                                    @break

                                                    @case('owner')
                                                        برگزارکننده کمپین
                                                    @break

                                                    @case('member')
                                                        عضو تیم
                                                    @break

                                                    @default
                                                        -
                                                @endswitch
                                            </td>
                                            <td>
                                                @if ($user->status === 'active')
                                                    <span class="badge bg-success-subtle text-success status">فعال</span>
                                                @else
                                                    <span class="badge bg-danger-subtle text-danger status">غیرفعال</span>
                                                @endif
                                            </td>
                                            <td class="createdAt">
                                                {{ $user->createTime }}
                                            </td>
                                            <td>
                                                <div class="dropdown position-static">
                                                    <button class="btn btn-subtle-secondary btn-sm btn-icon" role="button"
                                                        data-bs-toggle="dropdown">
                                                        <i class="bi bi-three-dots-vertical"></i>
                                                    </button>
                                                    <ul class="dropdown-menu dropdown-menu-end">
                                                        <li>
                                                            <a class="dropdown-item edit-user-btn"
                                                                href="javascript:void(0);"
                                                                data-user-id="{{ $user->id }}">
                                                                <i class="ph-pencil align-middle me-1"></i> ویرایش
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item delete-user-btn"
                                                                href="javascript:void(0);"
                                                                data-user-id="{{ $user->id }}">
                                                                <i class="ph-trash align-middle me-1"></i> حذف
                                                            </a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-item"
                                                                href="{{ route('admin.users.team', $user->id) }}">
                                                                <i class="ri-team-line align-middle me-1"></i> مشاهده تیم
                                                            </a>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </td>
                                        </tr>

                                        @empty
                                            <tr>
                                                <td colspan="7" class="text-center text-muted py-4">
                                                    هیچ کاربری برای نمایش وجود ندارد.
                                                </td>
                                            </tr>
                                        @endforelse

                                    </tbody>
                                </table>
                            </div>

                            @include('components.pagination', ['paginator' => $users])

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

        <!-- Create User Modal -->
        <div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header px-4 pt-4">
                        <h5 class="modal-title" id="createUserModalLabel">افزودن کاربر جدید</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                    </div>
                    <form action="{{ route('admin.users.store') }}" method="POST">
                        @csrf
                        <div class="modal-body p-4">
                            @if ($errors->any())
                                <div class="alert alert-danger py-2">
                                    <ul class="mb-0">
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif

                            <div class="mb-3">
                                <label for="create_name" class="form-label">نام کاربر <span
                                        class="text-danger">*</span></label>
                                <input type="text" id="create_name" name="name"
                                    class="form-control @error('name') is-invalid @enderror"
                                    placeholder="نام کاربر را وارد کنید" value="{{ old('name') }}" required>
                                @error('name')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="create_email" class="form-label">ایمیل <span class="text-danger">*</span></label>
                                <input type="email" id="create_email" name="email"
                                    class="form-control @error('email') is-invalid @enderror"
                                    placeholder="ایمیل کاربر را وارد کنید" value="{{ old('email') }}" required>
                                @error('email')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="create_mobile" class="form-label">شماره موبایل</label>
                                <input type="text" id="create_mobile" name="mobile"
                                    class="form-control @error('mobile') is-invalid @enderror" placeholder="مثلاً 09123456789"
                                    value="{{ old('mobile') }}">
                                @error('mobile')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="create_password" class="form-label">رمز عبور <span
                                        class="text-danger">*</span></label>
                                <input type="password" id="create_password" name="password"
                                    class="form-control @error('password') is-invalid @enderror"
                                    placeholder="رمز عبور را وارد کنید" required>
                                @error('password')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="create_role" class="form-label">نقش کاربر <span
                                        class="text-danger">*</span></label>
                                <select class="form-select @error('role') is-invalid @enderror" id="create_role"
                                    name="role" required>
                                    <option value="">انتخاب نقش</option>
                                    <option value="admin" {{ old('role') == 'admin' ? 'selected' : '' }}>مدیر سیستم</option>
                                    <option value="staff" {{ old('role') == 'staff' ? 'selected' : '' }}>کارمند پشتیبانی
                                    </option>
                                    <option value="owner" {{ old('role') == 'owner' ? 'selected' : '' }}>برگزارکننده کمپین
                                    </option>
                                    <option value="member" {{ old('role') == 'member' ? 'selected' : '' }}>عضو تیم</option>
                                </select>
                                @error('role')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="mb-3">
                                <label for="create_status" class="form-label">وضعیت <span
                                        class="text-danger">*</span></label>
                                <select class="form-select @error('status') is-invalid @enderror" id="create_status"
                                    name="status" required>
                                    <option value="">انتخاب وضعیت</option>
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>فعال</option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>غیرفعال
                                    </option>
                                </select>
                                @error('status')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-ghost-danger" data-bs-dismiss="modal">
                                    <i class="bi bi-x-lg align-baseline me-1"></i> بستن
                                </button>
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-plus-circle align-baseline me-1"></i> ثبت کاربر
                                </button>
                            </div>
                        </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">
                <div class="modal-content">
                    <div class="modal-header px-4 pt-4">
                        <h5 class="modal-title" id="editUserModalLabel">ویرایش کاربر</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                    </div>
                    <form id="editUserForm" method="POST">
                        @csrf
                        @method('PUT')
                        <input type="hidden" id="edit_user_id" name="id">
                        <div class="modal-body p-4">
                            <div id="edit-user-alert" class="d-none alert alert-danger py-2"></div>

                            <div class="mb-3">
                                <label for="edit_name" class="form-label">نام کاربر <span
                                        class="text-danger">*</span></label>
                                <input type="text" id="edit_name" name="name" class="form-control"
                                    placeholder="نام کاربر را وارد کنید" required>
                            </div>

                            <div class="mb-3">
                                <label for="edit_email" class="form-label">ایمیل <span class="text-danger">*</span></label>
                                <input type="email" id="edit_email" name="email" class="form-control"
                                    placeholder="ایمیل کاربر را وارد کنید" required>
                            </div>

                            <div class="mb-3">
                                <label for="edit_mobile" class="form-label">شماره موبایل</label>
                                <input type="text" id="edit_mobile" name="mobile" class="form-control"
                                    placeholder="مثلاً 09123456789">
                            </div>

                            <div class="mb-3">
                                <label for="edit_password" class="form-label">رمز عبور جدید</label>
                                <input type="password" id="edit_password" name="password" class="form-control"
                                    placeholder="در صورت تغییر رمز عبور وارد کنید">
                                <div class="form-text">در صورت عدم تغییر رمز عبور، این فیلد را خالی بگذارید</div>
                            </div>

                            <div class="mb-3">
                                <label for="edit_role" class="form-label">نقش کاربر <span
                                        class="text-danger">*</span></label>
                                <select class="form-select" id="edit_role" name="role" required>
                                    <option value="">انتخاب نقش</option>
                                    <option value="admin">مدیر سیستم</option>
                                    <option value="staff">کارمند پشتیبانی</option>
                                    <option value="owner">برگزارکننده کمپین</option>
                                    <option value="member">عضو تیم</option>
                                </select>
                            </div>

                            <div class="mb-3">
                                <label for="edit_status" class="form-label">وضعیت <span class="text-danger">*</span></label>
                                <select class="form-select" id="edit_status" name="status" required>
                                    <option value="">انتخاب وضعیت</option>
                                    <option value="active">فعال</option>
                                    <option value="inactive">غیرفعال</option>
                                </select>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <div class="hstack gap-2 justify-content-end">
                                <button type="button" class="btn btn-ghost-danger" data-bs-dismiss="modal">
                                    <i class="bi bi-x-lg align-baseline me-1"></i> بستن
                                </button>
                                <button type="submit" class="btn btn-primary" id="edit-user-btn">
                                    <i class="bi bi-check-lg align-baseline me-1"></i> ذخیره تغییرات
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- Delete User Modal -->
        <div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="deleteUserModalLabel">حذف کاربر</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="بستن"></button>
                    </div>
                    <div class="modal-body p-md-5">
                        <div class="text-center">
                            <div class="text-danger">
                                <i class="bi bi-trash display-4"></i>
                            </div>
                            <div class="mt-4">
                                <h3 class="mb-2">مطمئنی؟</h3>
                                <p class="text-muted fs-lg mx-3 mb-0">آیا مطمئن هستید که می‌خواهید این کاربر را حذف
                                    کنید؟</p>
                            </div>
                        </div>
                        <div class="d-flex gap-2 justify-content-center mt-4 mb-2">
                            <button type="button" class="btn w-sm btn-light btn-hover" data-bs-dismiss="modal">بستن</button>
                            <button type="button" class="btn w-sm btn-danger btn-hover" id="confirm-delete-btn">بله، حذفش
                                کن!
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endsection
    @push('js')
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                let currentDeleteUserId = null;
                console.log('User management script loaded');

                function showToast(message, type = 'success') {
                    const Toast = Swal.mixin({
                        toast: true,
                        position: "top-end",
                        showConfirmButton: false,
                        timer: 3000,
                        timerProgressBar: true,
                        didOpen: (toast) => {
                            toast.onmouseenter = Swal.stopTimer;
                            toast.onmouseleave = Swal.resumeTimer;
                        }
                    });

                    Toast.fire({
                        icon: type,
                        title: message
                    });
                }

                // نمایش خطا در فرم
                function showFormErrors(formId, errors) {
                    const form = document.getElementById(formId);
                    const alertDiv = form.querySelector('.alert-danger');

                    if (alertDiv) {
                        let errorHtml = '<ul class="mb-0">';
                        Object.values(errors).forEach(error => {
                            errorHtml += `<li>${error[0]}</li>`;
                        });
                        errorHtml += '</ul>';

                        alertDiv.innerHTML = errorHtml;
                        alertDiv.classList.remove('d-none');
                    }
                }

                // پاک کردن خطاهای فرم
                function clearFormErrors(formId) {
                    const form = document.getElementById(formId);
                    const alertDiv = form.querySelector('.alert-danger');
                    if (alertDiv) {
                        alertDiv.classList.add('d-none');
                        alertDiv.innerHTML = '';
                    }
                }

                // باز کردن مودال ویرایش
                document.addEventListener('click', function(e) {
                    if (e.target.classList.contains('edit-user-btn') || e.target.closest('.edit-user-btn')) {
                        const btn = e.target.classList.contains('edit-user-btn') ? e.target : e.target.closest(
                            '.edit-user-btn');
                        const userId = btn.getAttribute('data-user-id');
                        console.log('Edit button clicked for user:', userId);

                        // پاک کردن خطاهای قبلی
                        clearFormErrors('editUserForm');

                        fetch(`/admin/users/${userId}/edit`, {
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                }
                            })
                            .then(response => {
                                console.log('Edit response status:', response.status);
                                if (!response.ok) {
                                    throw new Error('Network response was not ok: ' + response.status);
                                }
                                return response.json();
                            })
                            .then(user => {
                                console.log('User data received:', user);

                                // پر کردن فرم با اطلاعات کاربر
                                document.getElementById('edit_user_id').value = user.id;
                                document.getElementById('edit_name').value = user.name;
                                document.getElementById('edit_email').value = user.email;
                                document.getElementById('edit_mobile').value = user.mobile || '';
                                document.getElementById('edit_role').value = user.role;
                                document.getElementById('edit_status').value = user.status;

                                // نمایش مودال
                                const editModal = new bootstrap.Modal(document.getElementById(
                                    'editUserModal'));
                                editModal.show();
                            })
                            .catch(error => {
                                console.error('Error fetching user:', error);
                                showToast('خطا در دریافت اطلاعات کاربر', 'error');
                            });
                    }

                    // باز کردن مودال حذف
                    if (e.target.classList.contains('delete-user-btn') || e.target.closest(
                        '.delete-user-btn')) {
                        const btn = e.target.classList.contains('delete-user-btn') ? e.target : e.target
                            .closest('.delete-user-btn');
                        currentDeleteUserId = btn.getAttribute('data-user-id');
                        console.log('Delete button clicked for user:', currentDeleteUserId);

                        const deleteModal = new bootstrap.Modal(document.getElementById('deleteUserModal'));
                        deleteModal.show();
                    }
                });

                // ویرایش کاربر
                const editForm = document.getElementById('editUserForm');
                if (editForm) {
                    editForm.addEventListener('submit', function(e) {
                        e.preventDefault();
                        console.log('Edit form submitted');

                        const submitBtn = document.getElementById('edit-user-btn');
                        const originalText = submitBtn.innerHTML;

                        submitBtn.innerHTML =
                            '<i class="bi bi-hourglass-split align-baseline me-1"></i> در حال ذخیره...';
                        submitBtn.disabled = true;

                        const userId = document.getElementById('edit_user_id').value;
                        const formData = new FormData(this);

                        fetch(`/admin/users/${userId}`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                    'X-HTTP-Method-Override': 'PUT'
                                },
                                body: formData
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Update response data:', data);

                                if (data.success) {
                                    // بستن مودال
                                    const editModal = bootstrap.Modal.getInstance(document.getElementById(
                                        'editUserModal'));
                                    editModal.hide();

                                    // نمایش پیام موفقیت
                                    showToast(data.message, 'success');

                                    // رفرش صفحه بعد از 1.5 ثانیه
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    // نمایش خطا
                                    if (data.errors) {
                                        showFormErrors('editUserForm', data.errors);
                                    } else {
                                        showToast(data.message, 'error');
                                    }
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showToast('خطا در ارتباط با سرور', 'error');
                            })
                            .finally(() => {
                                submitBtn.innerHTML = originalText;
                                submitBtn.disabled = false;
                            });
                    });
                }

                // تایید حذف
                const confirmDeleteBtn = document.getElementById('confirm-delete-btn');
                if (confirmDeleteBtn) {
                    confirmDeleteBtn.addEventListener('click', function() {
                        if (!currentDeleteUserId) {
                            console.log('No user ID for deletion');
                            return;
                        }

                        console.log('Confirm delete for user:', currentDeleteUserId);

                        const deleteBtn = this;
                        const originalText = deleteBtn.innerHTML;

                        deleteBtn.innerHTML =
                            '<i class="bi bi-hourglass-split align-baseline me-1"></i> در حال حذف...';
                        deleteBtn.disabled = true;

                        fetch(`/admin/users/${currentDeleteUserId}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                console.log('Delete response data:', data);

                                if (data.success) {
                                    // بستن مودال
                                    const deleteModal = bootstrap.Modal.getInstance(document.getElementById(
                                        'deleteUserModal'));
                                    deleteModal.hide();

                                    // نمایش پیام موفقیت
                                    showToast(data.message, 'success');

                                    // رفرش صفحه بعد از 1.5 ثانیه
                                    setTimeout(() => {
                                        location.reload();
                                    }, 1500);
                                } else {
                                    // نمایش خطا
                                    showToast(data.message, 'error');

                                    // بستن مودال در صورت خطا
                                    const deleteModal = bootstrap.Modal.getInstance(document.getElementById(
                                        'deleteUserModal'));
                                    deleteModal.hide();
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showToast('خطا در ارتباط با سرور', 'error');
                            })
                            .finally(() => {
                                deleteBtn.innerHTML = originalText;
                                deleteBtn.disabled = false;
                            });
                    });
                }

                // پاک کردن خطاها هنگام بستن مودال
                const editModal = document.getElementById('editUserModal');
                if (editModal) {
                    editModal.addEventListener('hidden.bs.modal', function() {
                        clearFormErrors('editUserForm');
                    });
                }

                const deleteModal = document.getElementById('deleteUserModal');
                if (deleteModal) {
                    deleteModal.addEventListener('hidden.bs.modal', function() {
                        currentDeleteUserId = null;
                    });
                }
            });
        </script>
    @endpush