@extends('layouts.app')

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

@section('header-action')
    <div class="d-flex gap-3 align-items-center">
        <select class="form-select" id="outletFilter" style="width: 200px;">
            <option value="">All Outlets</option>
            @foreach ($outlets ?? [] as $outlet)
                <option value="{{ $outlet->id }}" {{ request('outlet') == $outlet->id ? 'selected' : '' }}>
                    {{ $outlet->name ?? $outlet->outlet_name }}
                </option>
            @endforeach
        </select>

        <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
            Add User
        </button>
    </div>
@endsection

<style>
    .btn-white {
        --bs-btn-color: #000 !important;
        --bs-btn-bg: #ffffff !important;
        --bs-btn-border-color: #2f3132 !important;
        --bs-btn-hover-color: #000 !important;
        --bs-btn-hover-bg: #ffffff !important;
        --bs-btn-hover-border-color: #c6c7c8 !important;
        --bs-btn-focus-shadow-rgb: 211, 212, 213 !important;
        --bs-btn-active-color: #000 !important;
        --bs-btn-active-bg: #c6c7c8 !important;
        --bs-btn-active-border-color: #babbbc !important;
        --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
        --bs-btn-disabled-color: #000 !important;
        --bs-btn-disabled-bg: #f8f9fa !important;
        --bs-btn-disabled-border-color: #f8f9fa !important;
    }

    .password-wrapper {
        position: relative;
    }

    .password-wrapper .toggle-password {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
    }

    .error-message {
        color: #dc3545;
        font-size: 0.875rem;
        margin-top: 0.25rem;
        display: none;
    }

    .is-invalid {
        border-color: #dc3545 !important;
    }

    .form-control.is-invalid:focus {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    }

    .form-select.is-invalid:focus {
        box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important;
    }

    .alert-danger ul {
        margin-bottom: 0;
        padding-left: 1rem;
    }

    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }
</style>

@section('content')
    <!-- Global Success/Error Messages -->
    <div id="globalAlert" style="display: none;">
        <div class="alert alert-dismissible fade show" role="alert">
            <span id="alertMessage"></span>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    </div>

    <!-- Users Table -->
    <div class="users-table-card">
        @if ($users->count() > 0)
            <div class="table-wrapper">
                <table class="users-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Email</th>
                            <th>Phone</th>
                            <th>Role</th>
                            <th>Outlet</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($users as $user)
                            <tr id="user-row-{{ $user->id }}">
                                <td>
                                    <div class="user-name">{{ $user->name }}</div>
                                </td>
                                <td>
                                    <div class="user-email">{{ $user->email }}</div>
                                </td>
                                <td>
                                    <div class="user-phone">{{ $user->phone }}</div>
                                </td>
                                <td>
                                    <div class="user-role">{{ $user->roles->role_name }}</div>
                                </td>
                                <td>
                                    <div class="outlet-name">
                                        {{ $user->outlet->name ?? ($user->outlet->outlet_name ?? 'N/A') }}
                                    </div>
                                </td>
                                <td>
                                    <div class="action-buttons">
                                        <button class="btn-icon edit-user-btn" title="Edit" data-bs-toggle="modal"
                                            data-bs-target="#editUserModal" data-user-id="{{ $user->id }}">
                                            <i class="fas fa-pen"></i>
                                        </button>
                                        {{-- <button class="btn-icon text-danger delete-user-btn" title="Delete" 
                                            data-user-id="{{ $user->id }}" data-user-name="{{ $user->name }}">
                                            <i class="fas fa-trash"></i>
                                        </button> --}}
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($users->hasPages())
                <div class="pagination-wrapper">
                    {{ $users->links('pagination::bootstrap-5') }}
                </div>
            @endif
        @else
            <div class="empty-state">
                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                <h5 class="text-muted">No Users Found</h5>
                <p class="text-muted">No users have been created yet.</p>
                <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
                    <i class="fas fa-plus-circle me-2"></i> Add First User
                </button>
            </div>
        @endif
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Team User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="addUserForm" method="POST" autocomplete="off">
                    @csrf
                    <div class="modal-body">
                        <div id="addUserErrors" class="alert alert-danger" style="display: none;"></div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Outlet <span class="text-danger">*</span></label>
                                <select name="outlet_id" id="add_outlet_id" class="form-select">
                                    <option value="">Select Outlet</option>
                                    @foreach ($outlets ?? [] as $outlet)
                                        <option value="{{ $outlet->id }}">
                                            {{ $outlet->name ?? $outlet->outlet_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="error-message" id="add_outlet_id_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="add_name" placeholder="Enter your name" class="form-control">
                                <div class="error-message" id="add_name_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="add_email" class="form-control" placeholder="Enter your email">
                                <div class="error-message" id="add_email_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" id="add_phone" class="form-control" placeholder="Enter your phone number">
                                <div class="error-message" id="add_phone_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password <span class="text-danger">*</span></label>
                                <div class="password-wrapper">
                                    <input type="password" name="password" id="add_password" class="form-control"
                                        autocomplete="new-password" autocorrect="off" autocapitalize="off"
                                        spellcheck="false" placeholder="Enter the password">
                                    <i class="fas fa-eye toggle-password"></i>
                                </div>
                                <div class="error-message" id="add_password_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                <div class="password-wrapper">
                                    <input type="password" name="password_confirmation" id="add_password_confirmation"
                                        class="form-control" autocomplete="new-password" autocorrect="off"
                                        autocapitalize="off" spellcheck="false" placeholder="Enter the confirm password">

                                    <i class="fas fa-eye toggle-password"></i>
                                </div>
                                <div class="error-message" id="add_password_confirmation_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" id="add_status" class="form-select">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                                <div class="error-message" id="add_status_error"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="addUserBtn">
                            <span id="addUserBtnText">Add User</span>
                            <span id="addUserBtnSpinner" class="spinner-border spinner-border-sm"
                                style="display: none;"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Edit User Modal -->
    <div class="modal fade" id="editUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit User</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form id="editUserForm" method="POST">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="edit_user_id" name="user_id">
                    <div class="modal-body">
                        <div id="editUserErrors" class="alert alert-danger" style="display: none;"></div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Outlet <span class="text-danger">*</span></label>
                                <select name="outlet_id" id="edit_outlet_id" class="form-select">
                                    <option value="">Select Outlet</option>
                                    @foreach ($outlets ?? [] as $outlet)
                                        <option value="{{ $outlet->id }}">
                                            {{ $outlet->name ?? $outlet->outlet_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <div class="error-message" id="edit_outlet_id_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" id="edit_name" class="form-control">
                                <div class="error-message" id="edit_name_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" name="email" id="edit_email" class="form-control">
                                <div class="error-message" id="edit_email_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="tel" name="phone" id="edit_phone" class="form-control">
                                <div class="error-message" id="edit_phone_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Password (Leave blank to keep current)</label>
                                <div class="password-wrapper">
                                    <input type="password" name="password" id="edit_password" class="form-control">
                                    <i class="fas fa-eye toggle-password"></i>
                                </div>
                                <div class="error-message" id="edit_password_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Confirm Password</label>
                                <div class="password-wrapper">
                                    <input type="password" name="password_confirmation" id="edit_password_confirmation"
                                        class="form-control">
                                    <i class="fas fa-eye toggle-password"></i>
                                </div>
                                <div class="error-message" id="edit_password_confirmation_error"></div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Status <span class="text-danger">*</span></label>
                                <select name="status" id="edit_status" class="form-select">
                                    <option value="active">Active</option>
                                    <option value="inactive">Inactive</option>
                                </select>
                                <div class="error-message" id="edit_status_error"></div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="editUserBtn">
                            <span id="editUserBtnText">Update User</span>
                            <span id="editUserBtnSpinner" class="spinner-border spinner-border-sm"
                                style="display: none;"></span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        /* Table Card */
        .users-table-card {
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            overflow: hidden;
        }

        .table-wrapper {
            overflow-x: auto;
        }

        .users-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }

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

        .users-table thead th {
            padding: 16px 20px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            border: none;
        }

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

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

        .users-table tbody tr:last-child {
            border-bottom: none;
        }

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

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

        .user-email {
            font-size: 13px;
            color: #6b7280;
        }

        .user-phone {
            font-size: 13px;
            color: #6b7280;
        }

        .user-role {
            font-size: 13px;
            color: #6b7280;
        }

        .outlet-name {
            font-size: 13px;
            color: #6b7280;
        }

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

        .btn-icon {
            width: 32px;
            height: 32px;
            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;
            padding: 0;
            border: none;
        }

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

        .btn-icon.text-danger {
            color: #dc2626;
        }

        .btn-icon.text-danger:hover {
            background: #fee2e2;
            border-color: #fecaca;
        }

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

        .empty-state i {
            opacity: 0.3;
        }

        .pagination-wrapper {
            padding: 16px 20px;
            border-top: 1px solid #e5e7eb;
        }

        /* Modal Styling */
        .modal-header {
            border-bottom: 1px solid #e5e7eb;
            padding: 20px 24px;
        }

        .modal-body {
            padding: 24px;
        }

        .modal-footer {
            border-top: 1px solid #e5e7eb;
            padding: 16px 24px;
        }

        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 8px;
        }

        .form-control,
        .form-select {
            font-size: 14px;
            padding: 10px 12px;
            border: 1px solid #d1d5db;
            border-radius: 6px;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

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

            .users-table thead th,
            .users-table tbody td {
                padding: 12px 10px;
            }
        }
    </style>
@endpush

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const baseUrl = '{{ url('') }}';

            // Outlet filter
            document.getElementById('outletFilter').addEventListener('change', function() {
                let selected = this.value;
                let params = new URLSearchParams(window.location.search);
                if (selected) {
                    params.set('outlet', selected);
                } else {
                    params.delete('outlet');
                }
                window.location.search = params.toString();
            });

            // Global alert
            function showAlert(message, type = 'success') {
                const alertDiv = document.getElementById('globalAlert');
                if (!alertDiv) return;

                const alertMessage = document.getElementById('alertMessage');
                const alertBox = alertDiv.querySelector('.alert');

                alertBox.className = `alert alert-${type} alert-dismissible fade show`;
                alertMessage.textContent = message;
                alertDiv.style.display = 'block';

                setTimeout(() => {
                    alertDiv.style.display = 'none';
                }, 5000);
            }

            /**
             * prefix: "add" | "edit"
             * This matches IDs like add_email, add_email_error, edit_email, edit_email_error
             */
            function clearErrors(prefix) {
                const modal = document.getElementById(prefix === 'add' ? 'addUserModal' : 'editUserModal');
                if (!modal) return;

                modal.querySelectorAll('.error-message').forEach(el => {
                    el.textContent = '';
                    el.style.display = 'none';
                });

                modal.querySelectorAll('.form-control.is-invalid, .form-select.is-invalid').forEach(el => {
                    el.classList.remove('is-invalid');
                });

                const alertBox = document.getElementById(prefix + 'UserErrors');
                if (alertBox) {
                    alertBox.style.display = 'none';
                    alertBox.innerHTML = '';
                }
            }

            function showErrors(errors, prefix) {
                clearErrors(prefix);

                const modal = document.getElementById(prefix === 'add' ? 'addUserModal' : 'editUserModal');
                if (!modal) return;

                const alertBox = document.getElementById(prefix + 'UserErrors');
                let errorList = '';

                Object.keys(errors).forEach(field => {
                    const msgs = errors[field];

                    // field-level
                    const input = document.getElementById(`${prefix}_${field}`);
                    const errorEl = document.getElementById(`${prefix}_${field}_error`);

                    if (input) {
                        input.classList.add('is-invalid');
                    }
                    if (errorEl) {
                        errorEl.textContent = msgs[0];
                        errorEl.style.display = 'block';
                    }

                    // collect for global list
                    msgs.forEach(m => errorList += `<li>${m}</li>`);
                });

                if (alertBox && errorList) {
                    alertBox.innerHTML = `<ul class="mb-0">${errorList}</ul>`;
                    alertBox.style.display = 'block';
                }
            }

            function resetForm(formId, prefix) {
                const form = document.getElementById(formId);
                if (form) {
                    form.reset();
                    clearErrors(prefix);
                }
            }

            // Password toggle
            document.addEventListener("click", function(e) {
                if (e.target.classList.contains("toggle-password")) {
                    let input = e.target.previousElementSibling;

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

            // Add User Form Submission
            document.getElementById('addUserForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const submitBtn = document.getElementById('addUserBtn');
                const btnText = document.getElementById('addUserBtnText');
                const btnSpinner = document.getElementById('addUserBtnSpinner');

                btnText.textContent = 'Adding...';
                btnSpinner.style.display = 'inline-block';
                submitBtn.disabled = true;

                clearErrors('add');

                const formData = new FormData(this);

                fetch('{{ route('food-court.users.store') }}', {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json'
                        },
                        body: formData
                    })
                    .then(async response => {
                        const data = await response.json();
                        if (!response.ok) {
                            // 422 etc.
                            throw data;
                        }
                        return data;
                    })
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.message ?? 'User Saved Successfully',
                                confirmButtonColor: '#8C1867',
                                showConfirmButton: false, // hide OK
                                timer: 5000, // auto-close after 5 seconds
                                timerProgressBar: true
                            }).then(() => {
                                window.location.reload();
                            });
                        }
                    })
                    .catch(err => {
                        if (err && err.errors) {
                            showErrors(err.errors, 'add');
                        } else {
                            console.error('Error:', err);
                            showAlert('An error occurred. Please try again.', 'danger');
                        }
                    })
                    .finally(() => {
                        btnText.textContent = 'Add User';
                        btnSpinner.style.display = 'none';
                        submitBtn.disabled = false;
                    });
            });

            // Edit User Button Click
            document.querySelectorAll('.edit-user-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const userId = this.dataset.userId;

                    document.getElementById('editUserBtnText').textContent = 'Loading...';
                    document.getElementById('editUserBtn').disabled = true;

                    fetch(`${baseUrl}/food-court/users/${userId}/edit`, {
                            headers: {
                                'Accept': 'application/json'
                            }
                        })
                        .then(response => {
                            if (!response.ok) {
                                throw new Error('Network response was not ok');
                            }
                            return response.json();
                        })
                        .then(data => {
                            if (data.success) {
                                document.getElementById('edit_user_id').value = data.user.id;
                                document.getElementById('edit_outlet_id').value = data.user.bid;
                                document.getElementById('edit_name').value = data.user.name;
                                document.getElementById('edit_email').value = data.user.email;
                                document.getElementById('edit_phone').value = data.user.phone;
                                document.getElementById('edit_status').value = data.user.status;

                                document.getElementById('edit_password').value = '';
                                document.getElementById('edit_password_confirmation').value =
                                    '';

                                clearErrors('edit');
                            } else {
                                showAlert(data.message || 'Failed to load user data', 'danger');
                            }
                        })
                        .catch(error => {
                            console.error('Error:', error);
                            showAlert('Failed to load user data', 'danger');
                        })
                        .finally(() => {
                            document.getElementById('editUserBtnText').textContent =
                                'Update User';
                            document.getElementById('editUserBtn').disabled = false;
                        });
                });
            });

            // Edit User Form Submission
            document.getElementById('editUserForm').addEventListener('submit', function(e) {
                e.preventDefault();

                const userId = document.getElementById('edit_user_id').value;
                const submitBtn = document.getElementById('editUserBtn');
                const btnText = document.getElementById('editUserBtnText');
                const btnSpinner = document.getElementById('editUserBtnSpinner');

                btnText.textContent = 'Updating...';
                btnSpinner.style.display = 'inline-block';
                submitBtn.disabled = true;

                clearErrors('edit');

                const formData = new FormData(this);

                fetch(`${baseUrl}/food-court/users/${userId}`, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-HTTP-Method-Override': 'PUT'
                        },
                        body: formData
                    })
                    .then(async response => {
                        const data = await response.json();
                        if (!response.ok) {
                            throw data;
                        }
                        return data;
                    })
                    .then(data => {
                        if (data.success) {
                            Swal.fire({
                                icon: 'success',
                                title: 'Success',
                                text: data.message ?? 'User Saved Successfully',
                                confirmButtonColor: '#8C1867',
                                showConfirmButton: false, // hide OK
                                timer: 5000, // auto-close after 5 seconds
                                timerProgressBar: true
                            }).then(() => {
                                window.location.reload();
                            });
                        }
                    })
                    .catch(err => {
                        if (err && err.errors) {
                            showErrors(err.errors, 'edit');
                        } else {
                            console.error('Error:', err);
                            showAlert('An error occurred. Please try again.', 'danger');
                        }
                    })
                    .finally(() => {
                        btnText.textContent = 'Update User';
                        btnSpinner.style.display = 'none';
                        submitBtn.disabled = false;
                    });
            });

            // Update user row in table
            function updateUserRow(user) {
                const row = document.getElementById(`user-row-${user.id}`);
                if (row) {
                    row.querySelector('.user-name').textContent = user.name;
                    row.querySelector('.user-email').textContent = user.email;
                    row.querySelector('.user-phone').textContent = user.phone;

                    const outletCell = row.querySelector('.outlet-name');
                    if (outletCell && user.outlet_name) {
                        outletCell.textContent = user.outlet_name;
                    }

                    const editBtn = row.querySelector('.edit-user-btn');
                    if (editBtn) {
                        editBtn.dataset.userId = user.id;
                        editBtn.dataset.userName = user.name;
                        editBtn.dataset.userEmail = user.email;
                        editBtn.dataset.userPhone = user.phone;
                        editBtn.dataset.userOutlet = user.bid;
                        editBtn.dataset.userStatus = user.status;
                    }
                }
            }

            // Delete User (if you re-enable button)
            document.querySelectorAll('.delete-user-btn').forEach(button => {
                button.addEventListener('click', function() {
                    const userId = this.dataset.userId;
                    const userName = this.dataset.userName;

                    if (confirm(`Are you sure you want to delete user "${userName}"?`)) {
                        fetch(`${baseUrl}/food-court/users/${userId}`, {
                                method: 'DELETE',
                                headers: {
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json'
                                }
                            })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    showAlert(data.message || 'User deleted successfully!');
                                    document.getElementById(`user-row-${userId}`).remove();
                                } else {
                                    showAlert(data.message || 'Failed to delete user',
                                        'danger');
                                }
                            })
                            .catch(error => {
                                console.error('Error:', error);
                                showAlert('An error occurred. Please try again.', 'danger');
                            });
                    }
                });
            });

            // Reset forms when modal is closed
            document.getElementById('addUserModal').addEventListener('hidden.bs.modal', function() {
                resetForm('addUserForm', 'add');
            });

            document.getElementById('editUserModal').addEventListener('hidden.bs.modal', function() {
                resetForm('editUserForm', 'edit');
            });

            // Auto-dismiss any server-side alerts (if present)
            setTimeout(function() {
                document.querySelectorAll('.alert').forEach(alert => {
                    try {
                        new bootstrap.Alert(alert).close();
                    } catch (e) {}
                });
            }, 5000);
        });
    </script>
@endpush