@extends('layouts.app')

@section('title', 'User Management - Tiqkets')
@section('page-title', 'User Management')

@section('header-action')
    @if (App\Models\User::canCreateMoreUsers(auth()->user()->bid))
        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal"
            onclick="openAddModal()">
            Add User
        </button>
    @else
        <button class="btn btn-secondary" disabled title="Maximum 4 users reached">
            Add User (Max Reached)
        </button>
    @endif
@endsection

@section('content')
    @if (session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle me-2"></i>
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    @if (session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle me-2"></i>
            {{ session('error') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    @endif

    <div class="user-management-container">
        <div class="table-wrapper">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Role</th>
                        <th>Status</th>
                        <th style="width: 100px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>
                                <div class="user-name">{{ $user->name }}</div>
                            </td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone ?? '-' }}</td>
                            <td>
                                <span class="role-badge">{{ $user->getRoleName() }}</span>
                            </td>
                            <td>
                                <span class="">
                                    {{ ucfirst($user->status) }}
                                </span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <button class="btn-icon edit-user" title="Edit" data-user-id="{{ $user->id }}"
                                        data-user-data="{{ json_encode($user) }}">
                                        <i class="fas fa-pen"></i>
                                    </button>
                                    <div class="dropdown">
                                        <button class="btn-icon dropdown-toggle" type="button" data-bs-toggle="dropdown">
                                            <i class="fas fa-ellipsis-v"></i>
                                        </button>
                                        <ul class="dropdown-menu dropdown-menu-end">
                                            <li>
                                                <a class="dropdown-item edit-user" href="#"
                                                    data-user-id="{{ $user->id }}"
                                                    data-user-data="{{ json_encode($user) }}">
                                                    <i class="fas fa-edit me-2"></i> Edit
                                                </a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item regenerate-password" href="#"
                                                    data-user-id="{{ $user->id }}"
                                                    data-user-name="{{ $user->name }}">
                                                    <i class="fas fa-key me-2"></i> Regenerate Password
                                                </a>
                                            </li>
                                            <li>
                                                <hr class="dropdown-divider">
                                            </li>
                                            <li>
                                                <a class="dropdown-item toggle-status" href="#"
                                                    data-user-id="{{ $user->id }}" data-status="{{ $user->status }}"
                                                    data-user-name="{{ $user->name }}">
                                                    <i
                                                        class="fas fa-{{ $user->status === 'active' ? 'ban' : 'check-circle' }} me-2"></i>
                                                    Mark as {{ $user->status === 'active' ? 'Inactive' : 'Active' }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="6" class="text-center py-5">
                                <div class="empty-state">
                                    <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                    <p class="text-muted">No users found. Create your first user to get started.</p>
                                    @if (App\Models\User::canCreateMoreUsers(auth()->user()->bid))
                                        <button type="button" class="btn btn-primary" data-bs-toggle="modal"
                                            data-bs-target="#userModal" onclick="openAddModal()">
                                            <i class="fas fa-plus me-1"></i> Add User
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- ✅ CUSTOM PAGINATION --}}
        @if ($users->total() > 0)
            <div class="pagination-wrapper">

                {{-- SHOWING INFO --}}
                <div class="pagination-info">
                    Showing
                    <strong>{{ $users->firstItem() ?? 1 }}</strong>
                    to
                    <strong>{{ $users->lastItem() ?? $users->count() }}</strong>
                    of
                    <strong>{{ $users->total() }}</strong>
                    entries
                </div>

                {{-- PAGINATION CONTROLS --}}
                @if ($users->hasPages())
                    <nav class="pagination-controls">
                        <ul class="pagination-list">

                            {{-- Previous --}}
                            @if ($users->onFirstPage())
                                <li class="page-item disabled">
                                    <span class="page-link"><i class="fas fa-chevron-left"></i></span>
                                </li>
                            @else
                                <li class="page-item">
                                    <a class="page-link" href="{{ $users->previousPageUrl() }}">
                                        <i class="fas fa-chevron-left"></i>
                                    </a>
                                </li>
                            @endif

                            {{-- Page Numbers --}}
                            @php
                                $current = $users->currentPage();
                                $last = $users->lastPage();
                                $start = max($current - 2, 1);
                                $end = min($current + 2, $last);
                            @endphp

                            @if ($start > 1)
                                <li class="page-item">
                                    <a class="page-link" href="{{ $users->url(1) }}">1</a>
                                </li>
                                @if ($start > 2)
                                    <li class="page-item disabled"><span class="page-link">…</span></li>
                                @endif
                            @endif

                            @for ($i = $start; $i <= $end; $i++)
                                @if ($i == $current)
                                    <li class="page-item active">
                                        <span class="page-link">{{ $i }}</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $users->url($i) }}">{{ $i }}</a>
                                    </li>
                                @endif
                            @endfor

                            @if ($end < $last)
                                @if ($end < $last - 1)
                                    <li class="page-item disabled"><span class="page-link">…</span></li>
                                @endif
                                <li class="page-item">
                                    <a class="page-link" href="{{ $users->url($last) }}">{{ $last }}</a>
                                </li>
                            @endif

                            {{-- Next --}}
                            @if ($users->hasMorePages())
                                <li class="page-item">
                                    <a class="page-link" href="{{ $users->nextPageUrl() }}">
                                        <i class="fas fa-chevron-right"></i>
                                    </a>
                                </li>
                            @else
                                <li class="page-item disabled">
                                    <span class="page-link"><i class="fas fa-chevron-right"></i></span>
                                </li>
                            @endif

                        </ul>
                    </nav>
                @else
                    <nav class="pagination-controls"></nav>
                @endif

                {{-- PER PAGE --}}
                <div class="pagination-per-page">
                    <label>Show:</label>
                    <select class="per-page-select" onchange="changePerPage(this.value)">
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 ? 'selected' : '' }}>20</option>
                        <option value="50" {{ request('per_page') == 50 ? 'selected' : '' }}>50</option>
                        <option value="100" {{ request('per_page') == 100 ? 'selected' : '' }}>100</option>
                    </select>
                </div>

            </div>
        @endif

    </div>

    <!-- User Modal -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">Add User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="userForm" method="POST">
                    @csrf
                    <div id="formMethod"></div>

                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label">Full Name *</label>
                                <input type="text" class="form-control @error('name') is-invalid @enderror"
                                    id="name" name="name" value="{{ old('name') }}"
                                    placeholder="Enter full name" minlength="3" required>
                                <div class="invalid-feedback" id="nameError"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="email" class="form-label">Email Address *</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                    id="email" name="email" value="{{ old('email') }}"
                                    placeholder="Enter email address" autocomplete="new-email" required>
                                <div class="invalid-feedback" id="emailError"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="phone" class="form-label">Phone Number *</label>
                                <input type="tel" class="form-control @error('phone') is-invalid @enderror"
                                    id="phone" name="phone" value="{{ old('phone') }}"
                                    placeholder="Enter phone number" required>
                                <div class="invalid-feedback" id="phoneError"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="role" class="form-label">Role *</label>
                                <select class="form-select @error('role') is-invalid @enderror" id="role"
                                    name="role" required>
                                    <option value="">Select Role</option>
                                    @foreach ($roles as $key => $value)
                                        <option value="{{ $key }}">
                                            {{ $value }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="roleError"></div>
                            </div>

                            <div class="col-md-6 mb-3 position-relative" id="passwordField">
                                <label for="password" class="form-label">Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control @error('password') is-invalid @enderror"
                                        id="password" name="password" placeholder="Enter password"
                                        autocomplete="new-password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password"
                                        data-target="password">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback" id="passwordError"></div>
                            </div>

                            <div class="col-md-6 mb-3 position-relative" id="passwordConfirmationField">
                                <label for="password_confirmation" class="form-label">Confirm Password *</label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="password_confirmation"
                                        name="password_confirmation" placeholder="Confirm password"
                                        autocomplete="new-password" required>
                                    <button type="button" class="btn btn-outline-secondary toggle-password"
                                        data-target="password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Info Section -->
                        {{-- <div class="alert alert-info mt-3">
                            <h6><i class="fas fa-info-circle me-2"></i>User Limits</h6>
                            <p class="mb-2">You can create maximum <strong>4 users</strong> for your branch.</p>
                            <p class="mb-0">Available roles: <strong>Floor Manager</strong> and <strong>Front Desk</strong>.</p>
                        </div>

                        <div class="alert alert-warning">
                            <h6><i class="fas fa-exclamation-triangle me-2"></i>Password Requirements</h6>
                            <ul class="mb-0 small">
                                <li>Minimum 8 characters</li>
                                <li>Include uppercase & lowercase letters</li>
                                <li>Include numbers and special characters</li>
                            </ul>
                        </div> --}}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="submitBtn">
                            <i class="fas fa-save me-1"></i> Create User
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Regenerate Password Modal -->
    <div class="modal fade" id="regeneratePasswordModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Regenerate Password</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to regenerate password for "<strong id="userNameRegenerate"></strong>"?</p>
                    <p class="text-warning">
                        <i class="fas fa-exclamation-triangle me-1"></i>
                        A new password will be generated and sent to the user's email.
                    </p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmRegeneratePassword">Regenerate
                        Password</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Change Confirmation Modal -->
    <div class="modal fade" id="statusChangeModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Status Change</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to change the status of "<strong id="userNameStatus"></strong>" to <span
                            id="newStatusText"></span>?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmStatusChange">Confirm</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .user-management-container {
            /* background: #fff; */
            border-radius: 12px;
            padding: 0;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            /* background: #fff; */
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            min-width: 900px;
            background: #fff;
            border-radius: 12px;
        }

        .custom-table thead {
            background: #f9fafb;
            border-bottom: 1px solid #e5e7eb;
        }

        .custom-table thead th {
            padding: 14px 16px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            white-space: nowrap;
        }

        .custom-table tbody tr {
            border-bottom: 1px solid #f3f4f6;
            transition: background-color 0.2s;
        }

        .custom-table tbody tr:hover {
            background-color: #f9fafb;
        }

        .custom-table tbody td {
            padding: 12px 16px;
            font-size: 14px;
            color: #111827;
            vertical-align: middle;
        }

        .user-name {
            font-weight: 500;
            color: #111827;
        }

        .role-badge {
            display: inline-block;
            padding: 4px 12px;
            background: #f3f4f6;
            color: #374151;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 500;
        }

        .badge {
            display: inline-flex;
            align-items: center;
            padding: 4px 10px;
            font-size: 12px;
            font-weight: 600;
            border-radius: 6px;
            white-space: nowrap;
        }

        .badge-success {
            background-color: #d1fae5;
            color: #8C1867;
        }

        .badge-secondary {
            background-color: #f3f4f6;
            color: #6b7280;
        }

        .action-buttons {
            display: flex;
            align-items: center;
            gap: 8px;
            justify-content: flex-end;
        }

        .btn-icon {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            background: #fff;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            color: #6b7280;
        }

        .btn-icon:hover {
            background: #f9fafb;
            border-color: #d1d5db;
            color: #374151;
        }

        .btn-icon i {
            font-size: 14px;
        }

        .dropdown-toggle::after {
            display: none;
        }

        .dropdown-menu {
            border: 1px solid #e5e7eb;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            border-radius: 8px;
            padding: 8px;
            min-width: 200px;
        }

        .dropdown-item {
            padding: 10px 12px;
            border-radius: 6px;
            font-size: 14px;
            color: #374151;
            display: flex;
            align-items: center;
            transition: background-color 0.2s;
        }

        .dropdown-item:hover {
            background-color: #f3f4f6;
            color: #111827;
        }

        .dropdown-item i {
            width: 18px;
            font-size: 13px;
            color: #6b7280;
        }

        .dropdown-divider {
            margin: 8px 0;
            border-color: #e5e7eb;
        }

        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 40px 20px;
        }

        .empty-state i {
            opacity: 0.3;
        }

        /* Modal Styles */
        .modal-content {
            border: none;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        .modal-header {
            background: #f8f9fa;
            border-bottom: 1px solid #e9ecef;
            border-radius: 12px 12px 0 0;
            padding: 1.25rem 1.5rem;
        }

        .modal-title {
            font-weight: 600;
            color: #374151;
        }

        .modal-body {
            padding: 1.5rem;
            max-height: 70vh;
            overflow-y: auto;
        }

        .modal-footer {
            border-top: 1px solid #e9ecef;
            padding: 1rem 1.5rem;
        }

        .input-group .btn.toggle-password {
            border-color: #ced4da;
            background-color: #f8f9fa;
            border-left: none;
        }

        .input-group .btn.toggle-password:hover {
            background-color: #e9ecef;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .custom-table {
                font-size: 13px;
            }

            .custom-table thead th,
            .custom-table tbody td {
                padding: 12px 10px;
            }

            .btn-icon {
                width: 32px;
                height: 32px;
            }

            .modal-dialog {
                margin: 0.5rem;
            }
        }

        /* Dropdown visibility fix */
        .table-wrapper,
        .user-management-container {
            overflow: visible !important;
        }

        .dropdown-menu {
            position: absolute !important;
            z-index: 9999 !important;
            transform: translate3d(0, 0, 0);
        }

        .custom-table td,
        .custom-table th {
            overflow: visible !important;
        }

        .invalid-feedback {
            display: block;
            width: 100%;
            margin-top: 0.25rem;
            font-size: 0.875em;
            color: #dc3545;
        }

        .is-invalid {
            border-color: #dc3545;
            padding-right: calc(1.5em + 0.75rem);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 3.6.4.4.4-.4'/%3e%3cpath d='M6 7v2'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right calc(0.375em + 0.1875rem) center;
            background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
        }

        .is-invalid:focus {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

          /* ===== Pagination Wrapper ===== */
        .pagination-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-top: 1px solid #e5e7eb;
            background: #f9fafb;
            gap: 16px;
            flex-wrap: wrap;
        }

        .pagination-info {
            font-size: 14px;
            color: #6b7280;
            white-space: nowrap;
        }

        .pagination-info strong {
            color: #111827;
            font-weight: 600;
        }

        /* ===== Custom Pagination Controls ===== */
        .pagination-controls {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .pagination-list {
            display: flex;
            list-style: none;
            gap: 6px;
            margin: 0;
            padding: 0;
            align-items: center;
        }

        .pagination-list .page-item {
            list-style: none;
        }

        .pagination-list .page-link {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 38px;
            height: 38px;
            padding: 0 12px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            color: #374151;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
            background: #ffffff;
            cursor: pointer;
        }

        .pagination-list .page-item.active .page-link {
            background: #667eea;
            border-color: #667eea;
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            cursor: default;
        }

        .pagination-list .page-item:not(.active):not(.disabled) .page-link:hover {
            background: #f3f4f6;
            border-color: #9ca3af;
            color: #111827;
        }

        .pagination-list .page-item.disabled .page-link {
            color: #d1d5db;
            background: #f9fafb;
            border-color: #e5e7eb;
            cursor: not-allowed;
            opacity: 0.6;
        }

        .pagination-list .page-link i {
            font-size: 12px;
        }

        /* ===== Per Page Selector ===== */
        .pagination-per-page {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

        .pagination-per-page label {
            font-size: 14px;
            color: #6b7280;
            margin: 0;
        }

        .per-page-select {
            padding: 8px 32px 8px 12px;
            border: 1.5px solid #d1d5db;
            border-radius: 8px;
            font-size: 14px;
            color: #374151;
            background-color: #ffffff;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23374151' d='M8 11L3 6h10z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 10px center;
            appearance: none;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .per-page-select:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
        }
        /* ===== RESPONSIVE PAGINATION ===== */

/* Tablets & below */
@media (max-width: 1024px) {
    .pagination-wrapper {
        padding: 16px;
        gap: 12px;
    }

    .pagination-controls {
        order: 3;
        width: 100%;
        justify-content: center;
    }
}

/* Mobile (stack layout) */
@media (max-width: 768px) {
    .pagination-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pagination-info {
        text-align: center;
        white-space: normal;
    }

    .pagination-controls {
        order: 2;
    }

    .pagination-list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }

    .pagination-list .page-link {
        min-width: 34px;
        height: 34px;
        padding: 0 10px;
        font-size: 13px;
    }

    .pagination-per-page {
        order: 1;
        justify-content: center;
    }
}

/* Very small screens (≤ 480px) */
@media (max-width: 480px) {
    .pagination-list .page-link {
        min-width: 32px;
        height: 32px;
        font-size: 12px;
    }

    .pagination-info {
        font-size: 13px;
    }

    .per-page-select {
        font-size: 13px;
        padding: 6px 28px 6px 10px;
    }
}

    </style>
@endpush

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.all.min.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            let userModal = new bootstrap.Modal(document.getElementById('userModal'));
            let userForm = document.getElementById('userForm');
            let isEditMode = false;
            let currentUserId = null;
            let currentUserName = null;

            // Password toggle
            document.querySelectorAll('.toggle-password').forEach(function(button) {
                button.addEventListener('click', function() {
                    const targetId = this.getAttribute('data-target');
                    const input = document.getElementById(targetId);
                    const icon = this.querySelector('i');

                    if (input.type === 'password') {
                        input.type = 'text';
                        icon.classList.remove('fa-eye');
                        icon.classList.add('fa-eye-slash');
                    } else {
                        input.type = 'password';
                        icon.classList.remove('fa-eye-slash');
                        icon.classList.add('fa-eye');
                    }
                });
            });

            // Edit user
            document.querySelectorAll('.edit-user').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userData = JSON.parse(this.dataset.userData);
                    openEditModal(userData);
                });
            });

            // Form submit (AJAX)
            userForm.addEventListener('submit', function(e) {
                e.preventDefault();
                submitUserForm();
            });

            // Regenerate Password (SweetAlert)
            document.querySelectorAll('.regenerate-password').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentUserId = this.dataset.userId;
                    currentUserName = this.dataset.userName;

                    Swal.fire({
                        html: `
                        <div class="adv-seat-card">
                            <div class="adv-seat-card-header">
                                Regenerate Password
                            </div>
                            <div class="adv-seat-card-body">
                                Are you sure you want to regenerate password for
                                "<strong>${currentUserName}</strong>"?
                                <br><br>
                                <span style="color:#f59e0b;">
                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                    A new password will be generated and sent to the user's email.
                                </span>
                            </div>
                            <div class="adv-seat-card-footer">
                                <button type="button"
                                        class="adv-seat-btn adv-seat-btn-cancel"
                                        data-action="cancel">
                                    Cancel
                                </button>
                                <button type="button"
                                        class="adv-seat-btn adv-seat-btn-confirm"
                                        data-action="confirm">
                                    Yes, regenerate
                                </button>
                            </div>
                        </div>
                    `,
                        showConfirmButton: false,
                        showCancelButton: false,
                        customClass: {
                            popup: 'adv-seat-popup'
                        }
                    });

                    const popup = Swal.getPopup();
                    popup.querySelector('[data-action="cancel"]').onclick = () => Swal.close();
                    popup.querySelector('[data-action="confirm"]').onclick = () => {
                        Swal.close();

                        if (!currentUserId) return;

                        const url =
                            "{{ route('location-manager.users.regenerate-password', ':id') }}"
                            .replace(':id', currentUserId);

                        Swal.fire({
                            title: 'Processing...',
                            text: 'Regenerating password',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => Swal.showLoading()
                        });

                        fetch(url, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: data.message ||
                                            'Password regenerated successfully!',
                                        confirmButtonColor: 'var(--primary-color)',
                                        timer: 2500,
                                        timerProgressBar: true
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        text: 'Error: ' + (data.message ||
                                            'Failed to regenerate password'),
                                        confirmButtonColor: 'var(--primary-color)'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: 'Error regenerating password. Please try again.',
                                    confirmButtonColor: 'var(--primary-color)'
                                });
                            });
                    };
                });
            });

            // Toggle Status (SweetAlert)
            document.querySelectorAll('.toggle-status').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    currentUserId = this.dataset.userId;
                    currentUserName = this.dataset.userName;
                    const currentStatus = this.dataset.status;
                    const newStatus = currentStatus === 'active' ? 'Inactive' : 'Active';

                    Swal.fire({
                        html: `
                        <div class="adv-seat-card">
                            <div class="adv-seat-card-header">
                                Confirm Status Change
                            </div>
                            <div class="adv-seat-card-body">
                                Do you want to mark "<strong>${currentUserName}</strong>" as ${newStatus}?
                            </div>
                            <div class="adv-seat-card-footer">
                                <button type="button"
                                        class="adv-seat-btn adv-seat-btn-cancel"
                                        data-action="cancel">
                                    Cancel
                                </button>
                                <button type="button"
                                        class="adv-seat-btn adv-seat-btn-confirm"
                                        data-action="confirm">
                                    Yes, mark as ${newStatus}
                                </button>
                            </div>
                        </div>
                    `,
                        showConfirmButton: false,
                        showCancelButton: false,
                        customClass: {
                            popup: 'adv-seat-popup'
                        }
                    });

                    const popup = Swal.getPopup();
                    popup.querySelector('[data-action="cancel"]').onclick = () => Swal.close();
                    popup.querySelector('[data-action="confirm"]').onclick = () => {
                        Swal.close();

                        if (!currentUserId) return;

                        Swal.fire({
                            title: 'Processing...',
                            text: 'Updating user status',
                            allowOutsideClick: false,
                            allowEscapeKey: false,
                            didOpen: () => Swal.showLoading()
                        });

                        fetch(`{{ url('location-manager/users') }}/${currentUserId}/toggle-status`, {
                                method: 'POST',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Content-Type': 'application/json',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    Swal.fire({
                                        icon: 'success',
                                        title: 'Success!',
                                        text: data.message ||
                                            'User status updated successfully',
                                        confirmButtonColor: 'var(--primary-color)',
                                        timer: 2000,
                                        timerProgressBar: true,
                                        showConfirmButton: false
                                    }).then(() => {
                                        location.reload();
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        text: 'Error updating status: ' + (data
                                            .message || 'Unknown error'),
                                        confirmButtonColor: 'var(--primary-color)'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Error!',
                                    text: 'Error updating status. Please try again.',
                                    confirmButtonColor: 'var(--primary-color)'
                                });
                            });
                    };
                });
            });
        });

        function openAddModal() {
            isEditMode = false;
            currentUserId = null;

            document.getElementById('userModalLabel').textContent = 'Add User';
            document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save me-1"></i> Create User';
            document.getElementById('formMethod').innerHTML = '';

            userForm.reset();
            userForm.action = '{{ route('location-manager.users.store') }}';

            document.getElementById('passwordField').style.display = 'block';
            document.getElementById('passwordConfirmationField').style.display = 'block';
            document.getElementById('password').required = true;
            document.getElementById('password_confirmation').required = true;

            clearValidationErrors();

            let modal = new bootstrap.Modal(document.getElementById('userModal'));
            modal.show();
        }

        function openEditModal(userData) {
            isEditMode = true;
            currentUserId = userData.id;

            document.getElementById('userModalLabel').textContent = 'Edit User';
            document.getElementById('submitBtn').innerHTML = '<i class="fas fa-save me-1"></i> Update User';
            document.getElementById('formMethod').innerHTML = '@method('PUT')';

            document.getElementById('name').value = userData.name || '';
            document.getElementById('email').value = userData.email || '';
            document.getElementById('phone').value = userData.phone || '';
            document.getElementById('role').value = userData.role || '';

            userForm.action = `{{ url('location-manager/users') }}/${currentUserId}`;

            document.getElementById('password').required = false;
            document.getElementById('password_confirmation').required = false;

            clearValidationErrors();

            let modal = new bootstrap.Modal(document.getElementById('userModal'));
            modal.show();
        }

        function submitUserForm() {
            const formData = new FormData(userForm);
            const submitBtn = document.getElementById('submitBtn');

            submitBtn.disabled = true;
            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Processing...';

            clearValidationErrors();

            fetch(userForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    }
                })
                .then(response => {
                    if (!response.ok) {
                        return response.json().then(data => {
                            throw data;
                        });
                    }
                    return response.json();
                })
                .then(data => {
                    if (data.success) {
                        Swal.fire({
                            icon: 'success',
                            title: 'Success!',
                            text: data.message,
                            confirmButtonColor: 'var(--primary-color)',
                            timer: 2000,
                            timerProgressBar: true,
                            showConfirmButton: false
                        }).then(() => {
                            window.location.reload();
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: data.message || 'An unexpected error occurred.',
                            confirmButtonColor: 'var(--primary-color)'
                        });
                        submitBtn.disabled = false;
                        submitBtn.innerHTML = isEditMode ?
                            '<i class="fas fa-save me-1"></i> Update User' :
                            '<i class="fas fa-save me-1"></i> Create User';
                    }
                })
                .catch(errorData => {
                    console.error('Error:', errorData);

                    if (errorData.errors) {
                        displayValidationErrors(errorData.errors);
                    } else if (errorData.message) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: errorData.message,
                            confirmButtonColor: 'var(--primary-color)'
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Error!',
                            text: 'An error occurred while processing your request.',
                            confirmButtonColor: 'var(--primary-color)'
                        });
                    }

                    submitBtn.disabled = false;
                    submitBtn.innerHTML = isEditMode ?
                        '<i class="fas fa-save me-1"></i> Update User' :
                        '<i class="fas fa-save me-1"></i> Create User';
                });
        }

        function displayValidationErrors(errors) {
            clearValidationErrors();

            if (errors && typeof errors === 'object') {
                for (const [field, messages] of Object.entries(errors)) {
                    const input = document.getElementById(field);
                    const errorDiv = document.getElementById(field + 'Error');

                    if (input && errorDiv) {
                        input.classList.add('is-invalid');
                        errorDiv.textContent = Array.isArray(messages) ? messages.join('\n') : messages;
                        errorDiv.style.display = 'block';
                    }
                }
            }
        }

        function clearValidationErrors() {
            const errorDivs = document.querySelectorAll('.invalid-feedback');
            const inputs = document.querySelectorAll('.is-invalid');

            errorDivs.forEach(div => {
                div.textContent = '';
                div.style.display = 'none';
            });

            inputs.forEach(input => input.classList.remove('is-invalid'));
        }

        function showAlert(type, message) {
            const alert = document.createElement('div');
            alert.className = `alert alert-${type} alert-dismissible fade show position-fixed`;
            alert.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
            alert.innerHTML = `
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
            document.body.appendChild(alert);

            setTimeout(() => alert.remove(), 5000);
        }
    </script>

    <script>
        function changePerPage(value) {
            const url = new URL(window.location.href);
            url.searchParams.set('per_page', value);
            url.searchParams.set('page', 1);
            window.location.href = url.toString();
        }
    </script>
@endpush