@extends('layouts.app')

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

@section('header-action')
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#userModal" onclick="openAddModal()">
        Add User
    </button>
@endsection
<style>
    #passwordField .invalid-feedback {
        display: block;
    }

    .form-control.is-invalid+.passeyecon {
        border-color: #dc3545;
    }
</style>
@section('content')
    <div class="user-management-container">
        <div class="table-wrapper rounded">
            <table class="custom-table">
                <thead>
                    <tr>
                        <th style="width: 80px;">S. No.</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Phone</th>
                        <th>Role</th>
                        <th>Branch ID</th>
                        <th>Branch</th>
                        <th>Status</th>
                        <th style="width: 100px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($users as $user)
                        <tr>
                            <td>{{ $loop->iteration + ($users->currentPage() - 1) * $users->perPage() }}</td>
                            <td>
                                <div class="user-name">{{ $user->name }}</div>
                            </td>
                            <td>{{ $user->email }}</td>
                            <td>{{ $user->phone ?? '-' }}</td>
                            <td>
                                <span class="">{{ $user->getRoleName() }}</span>
                            </td>
                            <td>{{ $user->branch->branch_code ?? '-' }}</td>
                            <td>{{ $user->branch->branch_name ?? '-' }}</td>
                            <td>
                                <span class="">
                                    {{ ucfirst($user->status) }}
                                </span>
                            </td>
                            <td>
                                <div class="action-buttons">
                                    <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="9" class="text-center py-5">
                                <div class="empty-state">
                                    <div class="empty-icon">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <h5 class="empty-title">No Users Found</h5>
                                    <p class="empty-text">Create your first user to get started.</p>
                                    <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>
                                </div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        {{-- Pagination --}}
        {{-- Pagination --}}
        @if ($users->total() > 0)
            <div class="pagination-wrapper">
                <div class="pagination-info">
                    Showing <strong>{{ $users->firstItem() }}</strong> to
                    <strong>{{ $users->lastItem() }}</strong> of
                    <strong>{{ $users->total() }}</strong> entries
                </div>

                @if ($users->hasPages())
                    <nav class="pagination-controls">
                        <ul class="pagination-list">
                            {{-- Previous Button --}}
                            @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 --}}
                            @foreach ($users->getUrlRange(1, $users->lastPage()) as $page => $url)
                                @if ($page == $users->currentPage())
                                    <li class="page-item active">
                                        <span class="page-link">{{ $page }}</span>
                                    </li>
                                @else
                                    <li class="page-item">
                                        <a class="page-link" href="{{ $url }}">{{ $page }}</a>
                                    </li>
                                @endif
                            @endforeach

                            {{-- Next Button --}}
                            @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
                    {{-- Spacer when pagination controls aren't needed --}}
                    <div class="pagination-controls"></div>
                @endif

                <div class="pagination-per-page">
                    <label for="perPageSelect">Show:</label>
                    <select id="perPageSelect" class="per-page-select" onchange="changePerPage(this.value)">
                        <option value="10" {{ request('per_page') == 10 || !request('per_page') ? '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" novalidate>
                    @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">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="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-12 mb-3">
                                <label for="branch_id" class="form-label">Branch *</label>
                                <select class="form-select @error('branch_id') is-invalid @enderror" id="branch_id"
                                    name="branch_id" required>
                                    <option value="">Select Branch</option>
                                    @foreach ($branches as $branch)
                                        <option value="{{ $branch->id }}">
                                            {{ $branch->branch_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="branch_idError"></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-5 position-relative" id="passwordField">
                                <label for="password" class="form-label" id="passwordLabel">Password *</label>

                                <div class="input-group">
                                    <input type="password" class="form-control rounded-start" id="password"
                                        name="password" placeholder="Enter password" autocomplete="new-password">

                                    <button type="button"
                                        class="btn btn-outline-secondary toggle-password passeyecon rounded-end"
                                        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 rounded-3">
                                    <input type="password" class="form-control rounded-start" id="password_confirmation"
                                        name="password_confirmation" placeholder="Confirm password"
                                        autocomplete="new-password">

                                    <button type="button" class="btn btn-outline-secondary toggle-password rounded-end"
                                        data-target="password_confirmation">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>

                                <div class="invalid-feedback" id="password_confirmationError"></div>


                            </div>
                        </div>

                        {{-- Info Section --}}
                        {{-- <div class="alert alert-info mt-3">
                            <h6><i class="fas fa-info-circle me-2"></i>User Roles</h6>
                            <p class="mb-2"><strong>Location Manager:</strong> Manages a single branch with full control.</p>
                            <p class="mb-2"><strong>Floor Manager:</strong> Manages floor operations and table assignments.</p>
                            <p class="mb-0"><strong>Front Desk:</strong> Handles customer check-ins and basic operations.</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>
@endsection

@push('styles')
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.7.32/dist/sweetalert2.min.css">

    <style>
        /* Your existing styles remain the same, just add these modal-specific 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;
        }

        .input-group .form-control:focus+.input-group-text .toggle-password {
            border-color: #86b7fe;
        }

        /* Your existing table and other styles remain unchanged */
        .user-management-container {
            background: #fff;
            border-radius: 8px;
            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;
        }

        .custom-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
            min-width: 900px;
        }

        .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;
            white-space: nowrap;
        }

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

        .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: #065f46;
        }

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

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

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

        .dropdown-toggle::after {
            content: none !important;
        }

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

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

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

        .empty-state {
            text-align: center;
            padding: 60px 24px;
        }

        .empty-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background: #f3f4f6;
            border-radius: 50%;
            margin-bottom: 24px;
        }

        .empty-icon i {
            font-size: 36px;
            color: #9ca3af;
        }

        .empty-title {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 8px;
        }

        .empty-text {
            font-size: 14px;
            color: #6b7280;
            margin-bottom: 24px;
        }

        .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-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: var(--primary-color);
            border-color: var(--primary-color);
            color: #ffffff;
            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
            cursor: default;
        }

        .pagination-per-page {
            display: flex;
            align-items: center;
            gap: 8px;
            white-space: nowrap;
        }

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

        @media (max-width: 768px) {
            .custom-table {
                font-size: 12px;
                min-width: 700px;
            }

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

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

            .action-buttons {
                gap: 4px;
            }

            .pagination-wrapper {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;

            }

            .modal-dialog {
                margin: 0.5rem;
            }
        }
    </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;

            // Password toggle functionality
            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 click handler
            document.querySelectorAll('.edit-user').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userData = JSON.parse(this.dataset.userData);
                    openEditModal(userData);
                });
            });

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

            // Regenerate Password
            document.querySelectorAll('.regenerate-password').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userId = this.dataset.userId;
                    const userName = 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>${userName}</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();

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

                        fetch(`{{ route('users.regenerate-password', ':id') }}`.replace(':id',
                                userId), {
                                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: 3000,
                                        timerProgressBar: true
                                    });
                                } else {
                                    Swal.fire({
                                        icon: 'error',
                                        title: 'Error!',
                                        text: data.message ||
                                            'Failed to regenerate password',
                                        confirmButtonColor: 'var(--primary-color)'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Network Error!',
                                    text: 'Unable to connect to the server',
                                    confirmButtonColor: 'var(--primary-color)'
                                });
                            });
                    };
                });
            });

            // Toggle Status
            document.querySelectorAll('.toggle-status').forEach(button => {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    const userId = this.dataset.userId;
                    const currentStatus = this.dataset.status;
                    const userName = this.dataset.userName;
                    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>${userName}</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();

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

                        fetch(`{{ url('restaurant-admin/users') }}/${userId}/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: data.message ||
                                            'Failed to update status',
                                        confirmButtonColor: 'var(--primary-color)'
                                    });
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                Swal.fire({
                                    icon: 'error',
                                    title: 'Network Error!',
                                    text: 'Unable to connect to the server',
                                    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('restaurant-admin.users.store') }}';

            // ✅ Password label normal
            document.getElementById('passwordLabel').innerHTML = 'Password *';

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

            clearValidationErrors();
        }


        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')';

            // Fill form data
            document.getElementById('name').value = userData.name || '';
            document.getElementById('email').value = userData.email || '';
            document.getElementById('phone').value = userData.phone || '';
            document.getElementById('branch_id').value = userData.bid || '';
            document.getElementById('role').value = userData.role || '';

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

            // ✅ Password label info text
            document.getElementById('passwordLabel').innerHTML =
                'Password <small class="text-muted">(Leave blank to not change password)</small>';

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

            clearValidationErrors();

            let userModal = new bootstrap.Modal(document.getElementById('userModal'));
            userModal.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...';

            fetch(userForm.action, {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    }
                })
                .then(response => 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 {
                        displayValidationErrors(data.errors);
                        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(error => {
                    console.error('Error:', error);
                    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) return;

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

                // 🔥 Ensure password fields are visible if error exists
                if (field === 'password') {
                    document.getElementById('passwordField').style.display = 'block';
                    document.getElementById('passwordConfirmationField').style.display = 'block';
                }

                if (input && errorDiv) {
                    input.classList.add('is-invalid');
                    errorDiv.textContent = messages[0];
                }
            }
        }


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

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

        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