@extends('layouts.app')

@section('title', 'Add Outlet - Tiqkets')
@section('page-title', 'Add Outlet')
@section('header-action')
    <!-- Navigation Buttons on far right -->
    <div class="wizard-actions">
        <button type="button" class="btn btn-secondary mx-1" id="prevBtn" style="display: none;">
            <i class="fas fa-arrow-left me-1"></i> Previous
        </button>
        <div class="ms-auto d-flex gap-2">
            <button type="button" class="btn btn-outline-secondary" id="cancelBtn">
                Cancel
            </button>
            <button type="button" class="btn btn-primary" id="nextBtn">
                Next <i class="fas fa-arrow-right ms-1"></i>
            </button>
            <button type="button" class="btn btn-primary" id="completeBtn" style="display: none;">
                Complete
            </button>
        </div>
    </div>
@endsection
@section('content')
    <div class="wizard-container">
        <!-- Progress Steps -->
        <div class="wizard-steps">
            <div class="step-sidebar vh-100">
                <div class="step-item active" data-step="1">
                    <div class="step-icon">
                        {{-- <div class="step-icon-wrapper"> --}}
                        {{-- <i class="fas fa-building"></i> --}}
                        <img src="{{ asset('assest/images/branch_icon.svg') }}" alt="" class="iconImg">
                        {{-- </div> --}}
                    </div>
                    <div class="step-content">
                        <div class="step-title">Outlet Details</div>
                        <div class="step-subtitle">Add name and address of the outlet</div>
                    </div>
                    <div class="step-status">
                        <span class="badge badge-success">Completed</span>
                    </div>
                </div>

                <div class="step-item" data-step="2">
                    <div class="step-icon">
                        <img src="{{ asset('assest/images/user_id_icon.svg') }}" alt="" class="iconImg">
                    </div>
                    <div class="step-content">
                        <div class="step-title">Users</div>
                        <div class="step-subtitle">Add users working in this outlet</div>
                    </div>
                    <div class="step-status">
                        <span class="badge badge-progress">In Progress</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step Content -->
        <div class="wizard-content">
            <!-- Step 1: Outlet Details -->
            <div class="step-panel active" id="step1">
                <h3 class="step-panel-title">Outlet Details</h3>
                {{-- <div class="step-panel-avatar">
                    <div class="avatar-circle">R</div>
                    <div class="avatar-label">Shop Number</div>
                </div> --}}

                <form id="outletDetailsForm">
                    @csrf
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">Outlet Name</label>
                            <input type="text" class="form-control" name="outlet_name" placeholder="Enter outlet name"
                                required minlength="3">
                        </div>

                        <div class="col-md-6 mb-3">
                            <label class="form-label">Shop Number</label>
                            <input type="text" class="form-control" name="shop_number" placeholder="Shop Number">
                        </div>
                    </div>

                    <h5 class="mt-4 mb-3">Contact Details</h5>
                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Primary Contact Name</label>
                            <input type="text" class="form-control" name="outlet_contact_name"
                                placeholder="Primary contact name" required minlength="3">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">Contact Number</label>
                            <input type="tel" class="form-control" name="outlet_contact_phone"
                                placeholder="Enter contact number" inputmode="numeric" pattern="[0-9]*" maxlength="10"
                                required oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>

                        <div class="col-md-4 mb-3">
                            <label class="form-label">Email Address</label>
                            <input type="email" class="form-control" name="outlet_contact_email"
                                placeholder="Enter contact email address" required>
                        </div>
                    </div>
                </form>
            </div>

            <!-- Step 2: Add Users -->
            <div class="step-panel" id="step2">
                <div class="step-panel-header">
                    <div>
                        <h3 class="step-panel-title">Add Users</h3>
                    </div>
                    <button type="button" class="btn btn-primary" id="addUserBtn">
                        <i class="fas fa-plus me-1"></i> Add User
                    </button>
                </div>

                <div class="users-table-container">
                    <table class="table users-table">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Phone</th>
                                <th style="width: 100px;"></th>
                            </tr>
                        </thead>
                        <tbody id="usersTableBody">
                            <!-- Users will be added here -->
                        </tbody>
                    </table>

                    <div class="empty-state" id="emptyState">
                        <i class="fas fa-users fa-3x mb-3 text-muted"></i>
                        <p class="text-muted">No users added yet. Click "Add User" to get started.</p>
                    </div>
                </div>
            </div>

            <!-- Action Buttons -->
            {{-- <div class="wizard-actions">
                <button type="button" class="btn btn-secondary" id="prevBtn" style="display: none;">
                    <i class="fas fa-arrow-left me-1"></i> Previous
                </button>
                <div class="ms-auto d-flex gap-2">
                    <button type="button" class="btn btn-outline-secondary" id="cancelBtn">
                        Cancel
                    </button>
                    <button type="button" class="btn btn-primary" id="nextBtn">
                        Next <i class="fas fa-arrow-right ms-1"></i>
                    </button>
                    <button type="button" class="btn btn-primary" id="completeBtn" style="display: none;">
                        Complete
                    </button>
                </div>
            </div> --}}
        </div>
    </div>

    <!-- Add User Modal -->
    <div class="modal fade" id="addUserModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Team Member</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="name" placeholder="Enter user name"
                                    required>
                            </div>

                            {{-- <div class="col-md-6 mb-3">
                                <label class="form-label">Outlet</label>
                                <div class="outlet-display">
                                    <div class="outlet-avatar">R</div>
                                    <span id="outletNameDisplay">-</span>
                                </div>
                            </div> --}}

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

                            <div class="col-md-6 mb-3">
                                <label class="form-label">Phone <span class="text-danger">*</span></label>
                                <input type="tel" class="form-control" name="phone" placeholder="Enter your phone"
                                    inputmode="numeric" pattern="[0-9]*" maxlength="10" required
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                            </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" class="form-control password-field" name="password"
                                        id="passwordField" placeholder="Enter your password" required minlength="8">
                                    <span class="toggle-password" data-target="passwordField">
                                        <i class="far fa-eye"></i>
                                    </span>
                                </div>
                                {{-- <small class="text-muted">
                                    Minimum 8 characters with uppercase, lowercase, number & special character
                                </small> --}}

                            </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" class="form-control password-field"
                                        name="password_confirmation" id="confirmPasswordField"
                                        placeholder="Re-enter password" required>
                                    <span class="toggle-password" data-target="confirmPasswordField">
                                        <i class="far fa-eye"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </form>
                </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="saveUserBtn">Save</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .wizard-container {
            display: flex;
            gap: 30px;
            min-height: 70vh;
        }

        /* Step Sidebar */
        .wizard-steps {
            width: 300px;
            flex-shrink: 0;
        }

        .step-sidebar {
            background: #fff;
            border-radius: 12px;
            padding: 24px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .step-item {
            display: flex;
            gap: 16px;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .step-item:hover {
            background: #f9fafb;
        }

        .step-item.active {
            /* background: #f3f4f6; */
        }

        .step-icon {
            width: 40px;
            height: 40px;
            background: #e5e7eb;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .step-item.active .step-icon {
            background: #efd4e9;
            color: white;
        }

        .step-item.active .step-icon .iconImg {
            filter: brightness(0) saturate(100%) invert(12%) sepia(52%) saturate(4690%) hue-rotate(341deg) brightness(70%) contrast(105%);

        }

        .step-icon i {
            font-size: 18px;
        }

        .step-content {
            flex: 1;
        }

        .step-title {
            font-weight: 600;
            font-size: 14px;
            color: #111827;
            margin-bottom: 4px;
        }

        .step-subtitle {
            font-size: 12px;
            color: #6b7280;
        }

        .step-status {
            margin-top: 8px;
        }

        .badge {
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 500;
        }

        .badge-success {
            background: #d1fae5;
            color: #065f46;
        }

        .badge-progress {
            background: #dbeafe;
            color: #1e40af;
        }

        /* Wizard Content */
        .wizard-content {
            flex: 1;
            background: #fff;
            border-radius: 12px;
            padding: 32px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
        }

        .step-panel {
            display: none;
            flex: 1;
        }

        .step-panel.active {
            display: block;
        }

        .step-panel-title {
            font-size: 24px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 24px;
        }

        .step-panel-avatar {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 32px;
            padding: 20px;
            background: #f9fafb;
            border-radius: 8px;
        }

        .avatar-circle {
            width: 64px;
            height: 64px;
            background: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 28px;
            font-weight: 700;
            color: white;
        }

        .avatar-label {
            font-size: 14px;
            color: #6b7280;
        }

        .step-panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        /* Users Table */
        .users-table-container {
            margin-top: 24px;
            border: 1px solid #e5e7eb;
            border-radius: 8px;
            min-height: 300px;
            position: relative;
        }

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

        .users-table thead {
            background: #f9fafb;
        }

        .users-table thead th {
            padding: 12px 16px;
            font-size: 13px;
            font-weight: 600;
            color: #6b7280;
            border-bottom: 1px solid #e5e7eb;
        }

        .users-table tbody td {
            padding: 16px;
            border-bottom: 1px solid #f3f4f6;
        }

        .user-row {
            transition: background 0.2s;
        }

        .user-row:hover {
            background: #f9fafb;
        }

        .user-actions {
            display: flex;
            gap: 8px;
        }

        .btn-icon {
            width: 32px;
            height: 32px;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }

        .empty-state {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            width: 100%;
        }

        .empty-state i {
            opacity: 0.3;
        }

        /* Outlet Display in Modal */
        .outlet-display {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 12px;
            background: #f9fafb;
            border: 1px solid #e5e7eb;
            border-radius: 6px;
        }

        .outlet-avatar {
            width: 32px;
            height: 32px;
            background: #10b981;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            font-weight: 600;
            color: white;
        }

        /* Wizard Actions */
        .wizard-actions {
            /* display: flex;
                                                                                gap: 12px;
                                                                                margin-top: 32px;
                                                                                padding-top: 24px;
                                                                                border-top: 1px solid #e5e7eb; */
        }

        /* Form Styles */
        .form-label {
            font-size: 14px;
            font-weight: 500;
            color: #374151;
            margin-bottom: 6px;
        }

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

        .form-control:focus {
            border-color: #8b2d6b;
            box-shadow: 0 0 0 3px rgba(139, 45, 107, 0.1);
            outline: none;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .wizard-container {
                flex-direction: column;
            }

            .wizard-steps {
                width: 100%;
            }

            .step-sidebar {
                display: flex;
                overflow-x: auto;
                padding: 16px;
            }

            .step-item {
                flex-direction: column;
                min-width: 150px;
                text-align: center;
            }
        }

        /* .step-item:not(:last-child)::after {
                                                                        content: '';
                                                                        position: absolute;
                                                                        left: 35px;
                                                                        top: 56px;
                                                                        width: 2px;
                                                                        height: calc(100% - 25px);
                                                                        background: #e5e7eb;
                                                                    } */

        /* Make icon position reference */
        .step-icon {
            position: relative;
        }

        /* Vertical line under each icon (except last) */
        .step-item:not(:last-child) .step-icon::after {
            content: "";
            position: absolute;
            top: 40px;
            /* icon height = 40px → line starts exactly below circle */
            left: 50%;
            transform: translateX(-50%);
            width: 2px;
            height: 105px;
            /* spacing between steps → adjust if needed */
            background: #e5e7eb;
        }

        /* Completed step line color */
        .step-item.active .step-icon::after,
        .step-item.completed .step-icon::after {
            background: #e5e7eb;
            /* your primary color */
        }

        .wizard-actions {
            display: flex;
        }

        .password-wrapper {
            position: relative;
        }

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

        .toggle-password:hover {
            color: #111827;
        }

        /* Fix eye icon overlap when input is invalid */
        .password-wrapper .form-control.is-invalid {
            padding-right: 42px !important;
            /* space for eye icon */
            background-image: none !important;
            /* remove bootstrap error icon */
        }

        /* Keep eye icon clickable */
        .password-wrapper .toggle-password {
            z-index: 5;
        }
    </style>
@endpush


@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        let currentStep = 1;
        let users = [];
        let editIndex = null;
        const passwordRegex =
            /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;

        document.addEventListener('DOMContentLoaded', function() {
            updateStepDisplay();
            initializeValidation();

            // Next button
            document.getElementById('nextBtn').addEventListener('click', function() {
                if (currentStep === 1) {
                    saveOutletDetails();
                }
            });

            // Previous button
            document.getElementById('prevBtn').addEventListener('click', function() {
                if (currentStep > 1) {
                    currentStep--;
                    updateStepDisplay();
                }
            });

            // Complete button
            document.getElementById('completeBtn').addEventListener('click', function() {
                completeWizard();
            });

            // Cancel button (SweetAlert card)
            document.getElementById('cancelBtn').addEventListener('click', function() {
                Swal.fire({
                    html: `
                    <div class="adv-seat-card">
                        <div class="adv-seat-card-header">
                            Cancel Setup
                        </div>
                        <div class="adv-seat-card-body">
                            Are you sure you want to cancel?
                            All progress in this outlet setup will be lost.
                        </div>
                        <div class="adv-seat-card-footer">
                            <button type="button"
                                    class="adv-seat-btn adv-seat-btn-cancel"
                                    data-action="cancel">
                                No, keep editing
                            </button>
                            <button type="button"
                                    class="adv-seat-btn adv-seat-btn-confirm"
                                    data-action="confirm">
                                Yes, cancel
                            </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();
                    window.location.href = '{{ route('food-court.outlets.index') }}';
                };
            });

            // Add user button
            document.getElementById('addUserBtn').addEventListener('click', function() {
                showUserModal();
            });

            // Save user button
            document.getElementById('saveUserBtn').addEventListener('click', function() {
                saveUser();
            });

            // Password show / hide toggle
            document.querySelectorAll('.toggle-password').forEach(btn => {
                btn.addEventListener('click', function() {
                    const input = document.getElementById(this.dataset.target);
                    if (input.type === "password") {
                        input.type = "text";
                        this.innerHTML = '<i class="far fa-eye-slash"></i>';
                    } else {
                        input.type = "password";
                        this.innerHTML = '<i class="far fa-eye"></i>';
                    }
                });
            });

            // When modal closes → hide passwords
            document.getElementById('addUserModal')
                .addEventListener('hidden.bs.modal', hidePasswords);
        });

        /* ==========================
           Common validation helpers
           ========================== */

        function initializeValidation() {
            document.querySelectorAll('.form-control').forEach(input => {
                if (!input.parentNode.querySelector('.invalid-feedback')) {
                    const div = document.createElement('div');
                    div.className = 'invalid-feedback';
                    input.parentNode.appendChild(div);
                }
            });
        }

        function showFieldError(input, message) {
            const errorDiv = input.parentNode.querySelector('.invalid-feedback');
            if (errorDiv) {
                errorDiv.textContent = message;
            }
            input.classList.add('is-invalid');
        }

        function clearFieldError(input) {
            const errorDiv = input.parentNode.querySelector('.invalid-feedback');
            if (errorDiv) {
                errorDiv.textContent = '';
            }
            input.classList.remove('is-invalid');
        }

        function clearFormErrors(form) {
            form.querySelectorAll('.form-control').forEach(input => {
                clearFieldError(input);
            });
        }

        /* ==========================
           Step handling
           ========================== */

        function updateStepDisplay() {
            document.querySelectorAll('.step-panel').forEach(panel => {
                panel.classList.remove('active');
            });
            document.getElementById('step' + currentStep).classList.add('active');

            document.querySelectorAll('.step-item').forEach(item => {
                item.classList.remove('active');
            });
            document.querySelector(`.step-item[data-step="${currentStep}"]`).classList.add('active');

            document.getElementById('prevBtn').style.display = currentStep > 1 ? 'block' : 'none';
            document.getElementById('nextBtn').style.display = currentStep < 2 ? 'block' : 'none';
            document.getElementById('completeBtn').style.display = currentStep === 2 ? 'block' : 'none';

            if (currentStep === 2) {
                const outletName = document.querySelector('[name="outlet_name"]').value;
                // document.getElementById('outletNameDisplay').textContent = outletName || '-';
            }
        }

        /* ==========================
           Step 1: Outlet details
           ========================== */

        function saveOutletDetails() {
            const form = document.getElementById('outletDetailsForm');
            clearFormErrors(form);

            const formData = new FormData(form);
            formData.append('step', 1);

            fetch('{{ route('food-court.outlets.store') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json'
                    },
                    body: formData
                })
                .then(async response => {
                    if (response.status === 422) {
                        const data = await response.json();

                        Object.entries(data.errors || {}).forEach(([field, messages]) => {
                            const input = form.querySelector(`[name="${field}"]`);
                            if (input) {
                                showFieldError(input, messages[0]);
                            }
                        });

                        const firstInvalid = form.querySelector('.is-invalid');
                        if (firstInvalid) {
                            firstInvalid.scrollIntoView({
                                behavior: 'smooth',
                                block: 'center'
                            });
                        }

                        return null;
                    }

                    return response.json();
                })
                .then(data => {
                    if (!data) return;

                    if (data.success) {
                        currentStep = 2;
                        updateStepDisplay();
                    } else {
                        showAlert('error', data.message || 'Something went wrong');
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert('error', 'An error occurred. Please try again.');
                });
        }

        /* ==========================
           Step 2: Users
           ========================== */

        function showUserModal() {
            const form = document.getElementById('userForm');
            form.reset();
            clearFormErrors(form);

            editIndex = null;
            document.getElementById("saveUserBtn").textContent = "Save";
            // document.getElementById('outletNameDisplay').textContent =
            //     document.querySelector('[name="outlet_name"]').value || '-';

            new bootstrap.Modal(document.getElementById('addUserModal')).show();
        }

        function saveUser() {
            const form = document.getElementById('userForm');
            clearFormErrors(form);

            const formData = new FormData(form);
            const userData = {
                name: formData.get('name'),
                email: formData.get('email'),
                phone: formData.get('phone'),
                password: formData.get('password'),
                password_confirmation: formData.get('password_confirmation')
            };

            let isValid = true;

            if (!userData.name.trim()) {
                showFieldError(form.querySelector('[name="name"]'), 'Name is required');
                isValid = false;
            }

            if (!userData.email.trim()) {
                showFieldError(form.querySelector('[name="email"]'), 'Email is required');
                isValid = false;
            } else {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                if (!emailRegex.test(userData.email)) {
                    showFieldError(form.querySelector('[name="email"]'), 'Enter a valid email');
                    isValid = false;
                }
            }

            if (!userData.phone.trim()) {
                showFieldError(form.querySelector('[name="phone"]'), 'Phone is required');
                isValid = false;
            } else if (userData.phone.length !== 10) {
                showFieldError(form.querySelector('[name="phone"]'), 'Phone must be 10 digits');
                isValid = false;
            }

            if (!userData.password.trim()) {
                showFieldError(
                    form.querySelector('[name="password"]'),
                    'Password is required'
                );
                isValid = false;
            } else if (!passwordRegex.test(userData.password)) {
                showFieldError(
                    form.querySelector('[name="password"]'),
                    'Password must be at least 8 characters and include uppercase, lowercase, number and special character'
                );
                isValid = false;
            }


            if (userData.password !== userData.password_confirmation) {
                showFieldError(form.querySelector('[name="password"]'), 'Passwords do not match');
                showFieldError(form.querySelector('[name="password_confirmation"]'), 'Passwords do not match');
                isValid = false;
            }

            if (!isValid) return;

            if (editIndex !== null) {
                users[editIndex] = userData;
                editIndex = null;
                showAlert('success', 'User updated successfully');
            } else {
                users.push(userData);
                showAlert('success', 'User added successfully');
            }

            updateUsersTable();
            bootstrap.Modal.getInstance(document.getElementById('addUserModal')).hide();
        }

        function updateUsersTable() {
            const tbody = document.getElementById('usersTableBody');
            const emptyState = document.getElementById('emptyState');

            if (!users.length) {
                emptyState.style.display = 'block';
                tbody.innerHTML = '';
                return;
            }

            emptyState.style.display = 'none';
            tbody.innerHTML = users.map((user, index) => `
            <tr class="user-row">
                <td>${user.name}</td>
                <td>${user.email}</td>
                <td>${user.phone}</td>
                <td>
                    <div class="user-actions">
                        <button class="btn btn-icon" onclick="editUser(${index})" title="Edit">
                            <i class="fas fa-pen"></i>
                        </button>
                        <button class="btn btn-icon text-danger" onclick="deleteUser(${index})" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
        `).join('');
        }

        function editUser(index) {
            editIndex = index;
            const user = users[index];

            const form = document.getElementById('userForm');
            clearFormErrors(form);

            form.querySelector('[name="name"]').value = user.name;
            form.querySelector('[name="email"]').value = user.email;
            form.querySelector('[name="phone"]').value = user.phone;
            form.querySelector('[name="password"]').value = '';
            form.querySelector('[name="password_confirmation"]').value = '';

            document.getElementById("saveUserBtn").textContent = "Update User";
            new bootstrap.Modal(document.getElementById('addUserModal')).show();
        }

        function deleteUser(index) {
            const user = users[index];

            Swal.fire({
                html: `
                <div class="adv-seat-card">
                    <div class="adv-seat-card-header">
                        Remove User
                    </div>
                    <div class="adv-seat-card-body">
                        Are you sure you want to remove "<strong>${user.name}</strong>" from this outlet setup?
                    </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, remove
                        </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();
                users.splice(index, 1);
                updateUsersTable();
                showAlert('success', 'User removed');
            };
        }

        /* ==========================
           Final submit (step 2)
           ========================== */

        function completeWizard() {
            if (!users.length) {
                showAlert('error', 'Please add at least one user before completing');
                return;
            }

            const btn = document.getElementById('completeBtn');
            btn.disabled = true;
            btn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Creating...';

            fetch('{{ route('food-court.outlets.store') }}', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    },
                    body: JSON.stringify({
                        step: 2,
                        users: users
                    })
                })
                .then(async response => {
                    if (response.status === 422) {
                        const data = await response.json();
                        showAlert('error', data.message || 'Some user data is invalid');
                        btn.disabled = false;
                        btn.innerHTML = 'Complete';
                        return null;
                    }
                    return response.json();
                })
                .then(data => {
                    if (!data) return;

                    if (data.success) {
                        showAlert('success', data.message || 'Outlet created');
                        setTimeout(() => {
                            window.location.href = data.redirect;
                        }, 1500);
                    } else {
                        showAlert('error', data.message || 'Something went wrong');
                        btn.disabled = false;
                        btn.innerHTML = 'Complete';
                    }
                })
                .catch(err => {
                    console.error(err);
                    showAlert('error', 'An error occurred. Please try again.');
                    btn.disabled = false;
                    btn.innerHTML = 'Complete';
                });
        }

        /* ==========================
           Misc helpers
           ========================== */

        function showAlert(type, message) {
            Swal.fire({
                icon: type,
                title: message,
                confirmButtonColor: '#8b2d6b'
            });
        }

        function hidePasswords() {
            document.querySelectorAll('.password-field').forEach(input => {
                input.type = 'password';
            });
            document.querySelectorAll('.toggle-password').forEach(icon => {
                icon.innerHTML = '<i class="far fa-eye"></i>';
            });
        }
    </script>
@endpush