@push('styles')
    <style>
        :root {
            --primary-color: #7c2d5e;
            --primary-hover: #651f4a;
        }

        .progress-dot {
            width: 40px;
            height: 4px;
            background: #e5e7eb;
            border-radius: 2px;
            transition: all 0.3s;
        }

        .progress-dot.active,
        .progress-dot.completed {
            background: var(--primary-color);
        }

        /* Step Indicator Sidebar */
        .step-sidebar {
            background: white;
            border-radius: 12px;
            padding: 1.5rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: calc(70px + 2rem);
        }

        .step-list {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .step-indicator {
            display: flex;
            align-items: flex-start;
            gap: 1rem;
            padding: 1rem;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.2s;
            position: relative;
        }

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

        .step-indicator.completed::after {
            background: var(--primary-color);
        }

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

        .step-indicator.active {
            /* background: #faf5f9; */
        }

        .step-icon-wrapper {
            width: 40px;
            height: 40px;
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            background: #f3f4f6;
            color: #9ca3af;
            font-size: 18px;
            transition: all 0.3s;
        }

        .step-indicator.active .step-icon-wrapper {
            background: #f3e8ff;
            color: var(--primary-color);

        }

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

        }


        .step-indicator.completed .step-icon-wrapper {
            /* background: var(--primary-color);
                                                                        color: white; */
        }

        .step-details {
            flex: 1;
            min-width: 0;
        }

        .step-name {
            font-weight: 600;
            font-size: 15px;
            color: #111827;
            margin-bottom: 0.25rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .step-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 11px;
            font-weight: 500;
        }

        .step-badge.in-progress {
            background: #e3e5e9;
            color: #3a3c3e;
        }

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

        .step-description {
            font-size: 13px;
            color: #6b7280;
            line-height: 1.5;
        }

        /* Form Sections */
        .form-section {
            display: none;
            animation: fadeIn 0.3s ease-in;
        }

        .form-section.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .section-card {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            /* margin-bottom: 1.5rem; */
        }

        .section-title {
            font-size: 20px;
            font-weight: 600;
            color: #111827;
            margin-bottom: 1.5rem;
        }

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

        .form-control,
        .form-select {
            border: 1px solid #d1d5db;
            border-radius: 8px;
            padding: 0.625rem 0.875rem;
            font-size: 14px;
            transition: all 0.2s;
        }

        .form-control:focus,
        .form-select:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(124, 45, 94, 0.1);
        }

        .select2-container--default .select2-selection--single {
            height: auto !important;
            min-height: 42px;
            border: 1px solid #dee2e6 !important;
            border-radius: 0.375rem !important;
            padding: 0.625rem 0.75rem !important;
            font-size: 14px !important;
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: normal !important;
            padding: 0 !important;
            color: #212529 !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #6c757d !important;
        }

        .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 100% !important;
            top: 0 !important;
            right: 8px !important;
        }

        .select2-container--default.select2-container--focus .select2-selection--single,
        .select2-container--default.select2-container--open .select2-selection--single {
            border-color: var(--primary-color) !important;
            box-shadow: 0 0 0 0.2rem rgba(107, 27, 61, 0.1) !important;
            outline: 0 !important;
        }

        .select2-dropdown {
            border: 1px solid #dee2e6 !important;
            border-radius: 0.375rem !important;
            box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
        }

        .select2-container--default .select2-results__option {
            padding: 0.625rem 0.75rem !important;
            font-size: 14px !important;
        }

        .select2-container--default .select2-results__option--highlighted[aria-selected] {
            background-color: var(--primary-color) !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field {
            border: 1px solid #dee2e6 !important;
            border-radius: 0.375rem !important;
            padding: 0.5rem 0.75rem !important;
            font-size: 14px !important;
        }

        .select2-container--default .select2-search--dropdown .select2-search__field:focus {
            border-color: var(--primary-color) !important;
            outline: 0 !important;
            box-shadow: 0 0 0 0.2rem rgba(107, 27, 61, 0.1) !important;
        }

        .select2-container {
            width: 100% !important;
        }

        /* Match Bootstrap validation states */
        .is-invalid+.select2-container--default .select2-selection--single {
            border-color: #dc3545 !important;
        }

        .is-valid+.select2-container--default .select2-selection--single {
            border-color: #198754 !important;
        }


        /* Radio Cards */
        .radio-card {
            /* border: 2px solid #e5e7eb; */
            border-radius: 12px;
            /* padding: 1.25rem; */
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 1rem;
        }

        .radio-card:hover {
            border-color: var(--primary-color);
            background: #faf5f9;
        }

        .radio-card.selected {
            /* border-color: var(--primary-color);
                                                                            background: #faf5f9; */
        }

        .radio-card input[type="radio"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: #699c2b;
        }

        .radio-card-title {
            font-weight: 600;
            color: #111827;
            margin-bottom: 0.25rem;
            font-size: 15px;
        }

        .radio-card-desc {
            font-size: 13px;
            color: #6b7280;
            margin: 0;
        }

        /* Buttons */
        .btn-custom {
            padding: 0.625rem 1.5rem;
            border-radius: 8px;
            font-weight: 500;
            font-size: 14px;
            border: none;
            cursor: pointer;
            transition: all 0.2s;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-outline-custom {
            background: white;
            border: 1px solid #d1d5db;
            color: #374151;
        }

        .btn-outline-custom:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        .btn-primary-custom {
            background: var(--primary-color);
            color: white;
        }

        .btn-primary-custom:hover {
            background: var(--primary-hover);
        }

        .btn-primary-custom:disabled,
        .btn-outline-custom:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* Table */
        .table-responsive {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .table-custom {
            margin: 0;
        }

        .table-custom thead th {
            background: #f9fafb;
            color: #000;
            font-weight: 900;
            font-size: 13px;
            text-transform: uppercase;
            padding: 1rem;
            border: none;
        }

        .table-custom tbody td {
            padding: 1rem;
            vertical-align: middle;
            border-bottom: 1px solid #f3f4f6;
            color: #374151;
            font-size: 14px;
        }

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

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

        .btn-icon:hover {
            border-color: var(--primary-color);
            color: var(--primary-color);
        }

        /* Action Bar */
        .action-bar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.5rem;
            gap: 1rem;
        }

        .action-bar h5 {
            margin: 0;
            font-size: 18px;
            font-weight: 600;
        }

        /* Modal Improvements */
        .modal-content {
            border-radius: 12px;
            border: none;
        }

        .modal-header {
            border-bottom: 1px solid #e5e7eb;
            padding: 1.25rem 1.5rem;
        }

        .modal-title {
            font-weight: 600;
            font-size: 18px;
        }

        .modal-body {
            padding: 1.5rem;
        }

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

        /* Loading States */
        .btn-loading {
            position: relative;
            color: transparent !important;
        }

        .btn-loading::after {
            content: '';
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-right-color: transparent;
            animation: spin 0.75s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        /* Alert Styles */
        .alert-custom {
            border-radius: 8px;
            border: none;
            padding: 0.75rem 1rem;
            margin-bottom: 1rem;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .step-sidebar {
                position: static;
                margin-bottom: 1.5rem;
            }

            .progress-container {
                display: none;
            }

            .section-card {
                padding: 1.5rem;
            }
        }

        @media (max-width: 576px) {
            .step-sidebar {
                padding: 1rem;
            }

            .step-indicator {
                padding: 0.75rem;
            }

            .step-icon-wrapper {
                width: 36px;
                height: 36px;
                font-size: 16px;
            }

            .step-name {
                font-size: 14px;
            }

            .section-card {
                padding: 1.25rem;
            }

            .section-title {
                font-size: 18px;
            }

            .action-bar {
                flex-direction: column;
                align-items: flex-start;
            }

            .action-bar .btn-custom {
                width: 100%;
                justify-content: center;
            }

            .table-responsive {
                margin: 0 -1.25rem;
            }
        }

        /* Global Error Styles */
        #globalErrorAlert {
            border-radius: 8px;
            border: none;
            padding: 1rem 1.25rem;
            margin-bottom: 1.5rem;
            box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
            border-left: 4px solid #dc3545;
        }

        #globalErrorAlert .fa-exclamation-triangle {
            font-size: 1.25rem;
        }

        /* Make sure the error is visible at the top */
        .container-fluid {
            position: relative;
        }

        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .page-title-section {
            display: flex;
            align-items: center;
            gap: 1rem;
            flex: 1;
        }

        /* Progress container near title */
        .progress-container {
            display: flex;
            gap: 0.5rem;
            align-items: center;
        }

        .progress-dot {
            width: 40px;
            height: 4px;
            background: #e5e7eb;
            border-radius: 2px;
            transition: all 0.3s;
        }

        .progress-dot.active,
        .progress-dot.completed {
            background: var(--primary-color);
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .page-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .progress-container {
                order: 2;
                margin-top: 0.5rem;
            }

            .d-flex.gap-2 {
                order: 3;
                width: 100%;
                margin-top: 0.5rem;
            }

            .d-flex.gap-2 button {
                flex: 1;
            }
        }

        @media (max-width: 576px) {
            .progress-dot {
                width: 30px;
                height: 3px;
            }

            .progress-container {
                gap: 0.375rem;
            }
        }

        .page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.5rem;
            /* Changed from 1rem to 0.5rem */
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }

        .height_vh {
            min-height: 100vh;
            /* Same as vh-100 */
            height: auto;
            /* Allows card to grow beyond screen */
        }
    </style>
@endpush


@extends('layouts.app')

@section('title', 'Add Branch - Tiqkets')
@section('page-title')
    <div class="d-flex align-items-center gap-3 mt-4">
        <span>Add Branch</span>
        <!-- Progress Dots near title -->

        <div class="progress-container">
            <div class="progress-dot completed" data-step="1"></div>
            <div class="progress-dot active" data-step="2"></div>
            <div class="progress-dot" data-step="3"></div>
        </div>
    </div>
@endsection

@section('header-action')
    <!-- Navigation Buttons on far right -->
    <div class="d-flex gap-2">
        <button type="button" class="btn-custom btn-outline-custom" id="prevBtn">
            <i class="fas fa-arrow-left"></i> Previous
        </button>
        <button type="button" class="btn-custom btn-outline-custom" id="cancelBranchBtn">
            Cancel
        </button>

        <button type="button" class="btn-custom btn-primary-custom" id="nextBtn">
            Next <i class="fas fa-arrow-right"></i>
        </button>
    </div>
@endsection



@section('content')
    <div class="container-fluid">
        <div id="globalErrorAlert" class="alert alert-danger alert-custom" style="display:none;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <span id="globalErrorMessage" class="flex-grow-1"></span>
                <button type="button" class="btn-close ms-2" onclick="hideGlobalError()"></button>
            </div>
        </div>

        <div class="row g-4">
            <!-- Step Sidebar -->
            <div class="col-lg-3">
                <div class="step-sidebar height_vh">
                    <div class="step-list">
                        <div class="step-indicator completed" data-step="1">
                            <div class="step-icon-wrapper">
                                {{-- <i class="fas fa-building"></i> --}}
                                <img src="{{ asset('assest/images/branch_icon.svg') }}" alt="" class="iconImg">
                            </div>
                            <div class="step-details active">
                                <div class="step-name">
                                    Branch Details
                                    <span class="step-badge completed">Completed</span>
                                </div>
                                <p class="step-description">Add name and address of your business branch</p>
                            </div>
                        </div>

                        <div class="step-indicator " data-step="2">
                            <div class="step-icon-wrapper">
                                {{-- <i class="fas fa-chair"></i> --}}
                                <img src="{{ asset('assest/images/desk_icon.svg') }}" alt="" class="iconImg">
                            </div>
                            <div class="step-details">
                                <div class="step-name">
                                    Table Management
                                    <span class="step-badge in-progress">In Progress</span>
                                </div>
                                <p class="step-description">Manage tables on your branch for advanced seating</p>
                            </div>
                        </div>

                        <div class="step-indicator" data-step="3">
                            <div class="step-icon-wrapper">
                                {{-- <i class="fas fa-users"></i> --}}
                                <img src="{{ asset('assest/images/user_id_icon.svg') }}" alt="" class="iconImg">
                            </div>
                            <div class="step-details">
                                <div class="step-name">Team Members</div>
                                <p class="step-description">Add your team members working in this branch</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Form Content -->
            <div class="col-lg-9">
                <form id="branchForm">
                    <!-- Step 1: Branch Details -->
                    <div class="form-section active" id="step1">
                        <div class="section-card height_vh">
                            <h2 class="section-title">Branch Details</h2>

                            <div class="row g-3 mb-4">
                                <div class="col-md-6">
                                    <label class="form-label">Branch Name <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="branch_name"
                                        placeholder="Enter your branch name" required>
                                    <div class="invalid-feedback d-block" id="branch_name-error"></div>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label">Address <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="address"
                                        placeholder="Enter branch address" required>
                                    <div class="invalid-feedback d-block" id="address-error"></div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <label class="form-label">Country <span class="text-danger">*</span></label>
                                    <select id="country" class="form-select" disabled>
                                        @foreach ($countries as $country)
                                            <option value="{{ $country->id }}"
                                                {{ $tenant->country == $country->id ? 'selected' : '' }}>
                                                {{ ucfirst($country->name) }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <input type="hidden" name="country" value="{{ $tenant->country }}">

                                    <div class="invalid-feedback d-block" id="country-error"></div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <label class="form-label">State <span class="text-danger">*</span></label>
                                    <select id="state" class="form-select select2" disabled>
                                        @foreach ($states as $state)
                                            <option value="{{ $state->id }}"
                                                {{ $tenant->state == $state->id ? 'selected' : '' }}>
                                                {{ ucfirst($state->name) }}
                                            </option>
                                        @endforeach
                                    </select>

                                    <!-- Hidden input to submit real value -->
                                    <input type="hidden" name="state" value="{{ $tenant->state }}">


                                    <div class="invalid-feedback d-block" id="state-error"></div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <label class="form-label">City <span class="text-danger">*</span></label>
                                    <select id="city" name="city" class="form-select select2" required>
                                        <option value="">-- Select City --</option>
                                    </select>

                                    <div class="invalid-feedback d-block" id="city-error"></div>
                                </div>
                                <div class="col-md-3 col-sm-6">
                                    <label class="form-label">Pincode <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="pincode"
                                        placeholder="Enter pincode" required>
                                    <div class="invalid-feedback d-block" id="pincode-error"></div>
                                </div>
                            </div>

                            <h5 class="mb-3" style="font-weight: 600; font-size: 16px;">Contact Details</h5>
                            <div class="row g-3 mb-4">
                                <div class="col-md-4">
                                    <label class="form-label">Primary Contact Name</label>
                                    <input type="text" class="form-control" name="contact_name"
                                        placeholder="Primary contact name">
                                    <div class="invalid-feedback d-block" id="branch_contact_name-error"></div>

                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Contact Number</label>
                                    <input type="tel" class="form-control" name="contact_number"
                                        placeholder="Enter contact number">
                                    <div class="invalid-feedback d-block" id="branch_contact_phone-error"></div>

                                </div>
                                <div class="col-md-4">
                                    <label class="form-label">Email Address</label>
                                    <input type="email" class="form-control" name="contact_email"
                                        placeholder="Enter contact email address">
                                    <div class="invalid-feedback d-block" id="branch_contact_email-error"></div>
                                </div>
                            </div>

                            <h5 class="mb-3" style="font-weight: 600; font-size: 16px;">Additional Setup</h5>
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="reservations"
                                            id="reservations">
                                        <label class="form-check-label" for="reservations">
                                            <strong>Reservations</strong><br>
                                            <small class="text-muted">Enable users to prebook a table on this
                                                branch.</small>
                                        </label>
                                    </div>
                                </div>

                                <div class="col-6">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="takeaway_enabled"
                                            id="takeaway_enabled">
                                        <label class="form-check-label" for="takeaway_enabled">
                                            <strong>Take Away</strong><br>
                                            <small class="text-muted">Enable users to order food on this branch.</small>
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 2: Table Management -->
                    <div class="form-section " id="step2">
                        <div class="section-card height_vh">
                            <h2 class="section-title">Table Management</h2>

                            <div class="radio-card selected">
                                <label class="d-flex align-items-start gap-3 w-100 mb-0">
                                    <input type="radio" name="tableType" value="simple" checked>
                                    <div>
                                        <div class="radio-card-title">Simple</div>
                                        <p class="radio-card-desc">Enter table number manually for each booking.</p>
                                    </div>
                                </label>
                            </div>

                            <div class="radio-card">
                                <label class="d-flex align-items-start gap-3 w-100 mb-0">
                                    <input type="radio" name="tableType" value="advanced">
                                    <div>
                                        <div class="radio-card-title">Advanced</div>
                                        <p class="radio-card-desc">Allow detailed seat selection. Requires additional
                                            setup.</p>
                                    </div>
                                </label>
                            </div>

                            <div id="tableManagement" style="display: none;">
                                <div class="action-bar mt-4">
                                    <h5>Tables</h5>
                                    <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                        data-bs-target="#addTableModal">
                                        Add Table
                                    </button>
                                </div>

                                <div class="table-responsive">
                                    <table class="table table-custom">
                                        <thead>
                                            <tr>
                                                <th>Table ID</th>
                                                <th>Name</th>
                                                <th>Description</th>
                                                <th>Min</th>
                                                <th>Max</th>
                                                <th style="width: 100px;"></th>
                                            </tr>
                                        </thead>
                                        <tbody id="tablesTableBody">
                                            <!-- Tables will be dynamically added here -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Step 3: Team Members -->
                    <div class="form-section" id="step3">
                        <div class="section-card height_vh">
                            <div class="action-bar">
                                <h2 class="section-title mb-0">Add Team</h2>
                                <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal"
                                    data-bs-target="#addMemberModal">
                                    {{-- <i class="fas fa-plus"></i>  --}}
                                    Add Member
                                </button>
                            </div>

                            <div class="table-responsive">
                                <table class="table table-custom">
                                    <thead>
                                        <tr>
                                            <th>Name</th>
                                            <th>Email</th>
                                            <th>Phone</th>
                                            <th>Role</th>
                                            <th style="width: 100px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody id="teamMembersTableBody">
                                        <!-- Team members will be dynamically added here -->
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Navigation Buttons -->
                    {{-- <div class="d-flex justify-content-between gap-3 mt-4">
                        <button type="button" class="btn-custom btn-outline-custom" id="prevBtn">
                            <i class="fas fa-arrow-left"></i> Previous
                        </button>
                        <button type="button" class="btn-custom btn-primary-custom" id="nextBtn">
                            Next <i class="fas fa-arrow-right"></i>
                        </button>
                    </div> --}}
                </form>
            </div>
        </div>
    </div>

    <!-- Add Table Modal -->
    <div class="modal fade" id="addTableModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Table</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="AddTableModalError"
                        class="d-flex align-items-center d-none bg-warning  text-white p-2 mb-3 rounded">
                        <button type="button" class="btn-close ms-auto"
                            onclick="this.parentElement.parentElement.remove()"></button>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="tableName" placeholder="Enter table name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="tableDescription" rows="3" placeholder="Enter description"></textarea>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">Min Capacity</label>
                            <input type="number" class="form-control" id="tableMinCapacity" placeholder="Min"
                                min="1">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Max Capacity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="tableMaxCapacity" placeholder="Max"
                                min="1">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-custom btn-outline-custom" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn-custom btn-primary-custom" id="saveTableBtn">Save</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add Member Modal -->
    <div class="modal fade" id="addMemberModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered modal-lg"> <!-- made it slightly bigger -->
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title fw-semibold fs-5">Add Team Member</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <!-- Name -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="memberName" placeholder="Enter name"
                                    autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
                                    readonly onfocus="this.removeAttribute('readonly');">
                                <div class="invalid-feedback" id="memberName-error"></div>
                            </div>
                        </div>

                        <!-- Email -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control" id="memberEmail" placeholder="Enter email">
                                <div class="invalid-feedback" id="memberEmail-error"></div>
                            </div>
                        </div>

                        <!-- Role -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Role <span class="text-danger">*</span></label>
                                <select class="form-select" id="memberRole">
                                    <option value="">Select Role</option>
                                    @foreach ($role as $roles)
                                        <option value="{{ $roles->id }}">{{ $roles->role_name }}</option>
                                    @endforeach
                                </select>
                                <div class="invalid-feedback" id="memberRole-error"></div>
                            </div>
                        </div>

                        <!-- Phone Number -->
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">Phone Number <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="memberPhone"
                                    placeholder="Enter phone number" maxlength="15" inputmode="numeric" pattern="[0-9]*"
                                    oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                                <div class="invalid-feedback" id="memberPhone-error"></div>
                            </div>
                        </div>

                        <!-- Password -->
                        <div class="col-md-6">
                            <div class="mb-3 position-relative">
                                <label class="form-label">Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="memberPassword"
                                        placeholder="Enter password">
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        id="togglePasswordBtn">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback" id="memberPassword-error"></div>
                            </div>
                        </div>

                        <!-- ✅ Confirm Password -->
                        <div class="col-md-6">
                            <div class="mb-3 position-relative">
                                <label class="form-label">Confirm Password <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <input type="password" class="form-control" id="memberConfirmPassword"
                                        placeholder="Re-enter password">
                                    <button class="btn btn-outline-secondary toggle-password" type="button"
                                        id="toggleConfirmPasswordBtn">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                </div>
                                <div class="invalid-feedback" id="memberConfirmPassword-error"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" onclick="resetPasswordFields()" class="btn-custom btn-outline-custom"
                        data-bs-dismiss="modal">Cancel</button>
                    <button type="button" onclick="resetPasswordFields()" class="btn-custom btn-primary-custom"
                        id="saveMemberBtn">Save</button>
                </div>
            </div>
        </div>
    </div>


    <!-- Verification Modal -->
    <div class="modal fade" id="verificationModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Verify Branch Setup</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div id="verificationContent">
                        <!-- Verification content will be dynamically added here -->
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-custom btn-outline-custom" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn-custom btn-primary-custom" id="completeSetupBtn">Complete
                        Setup</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Edit Table Modal -->
    <div class="modal fade" id="editTableModal" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Edit Table</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="editTableId">
                    <div class="mb-3">
                        <label class="form-label">Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="editTableName" placeholder="Enter table name">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Description</label>
                        <textarea class="form-control" id="editTableDescription" rows="3" placeholder="Enter description"></textarea>
                    </div>
                    <div class="row g-3">
                        <div class="col-6">
                            <label class="form-label">Min Capacity</label>
                            <input type="number" class="form-control" id="editTableMinCapacity" placeholder="Min"
                                min="1">
                        </div>
                        <div class="col-6">
                            <label class="form-label">Max Capacity <span class="text-danger">*</span></label>
                            <input type="number" class="form-control" id="editTableMaxCapacity" placeholder="Max"
                                min="1">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn-custom btn-outline-custom" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn-custom btn-primary-custom" id="updateTableBtn">Update</button>
                </div>
            </div>
        </div>
    </div>


@endsection

@push('scripts')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const togglePassword = (btnId, inputId) => {
                const btn = document.getElementById(btnId);
                const input = document.getElementById(inputId);

                if (btn && input) {
                    btn.addEventListener("click", function() {
                        const isPassword = input.type === "password";
                        input.type = isPassword ? "text" : "password";
                        const icon = this.querySelector("i");
                        icon.classList.toggle("fa-eye");
                        icon.classList.toggle("fa-eye-slash");
                    });
                }
            };

            togglePassword("togglePasswordBtn", "memberPassword");
            togglePassword("toggleConfirmPasswordBtn", "memberConfirmPassword");
        });

        function resetPasswordFields() {
            const fields = ["memberPassword", "memberConfirmPassword"];

            fields.forEach(id => {
                const input = document.getElementById(id);
                if (input) input.type = "password";
            });

            // reset icons back to eye
            ["togglePasswordBtn", "toggleConfirmPasswordBtn"].forEach(btnId => {
                const btn = document.getElementById(btnId);
                if (btn) {
                    const icon = btn.querySelector("i");
                    if (icon) {
                        icon.classList.remove("fa-eye-slash");
                        icon.classList.add("fa-eye");
                    }
                }
            });
        }

        $(document).ready(function() {
            loadCities("{{ $tenant->state }}", "{{ $tenant->city }}");
            let currentStep = 1;
            const totalSteps = 3;
            let branchId = null;
            let tables = [];
            let teamMembers = [];

            // Elements
            const prevBtn = document.getElementById('prevBtn');
            const nextBtn = document.getElementById('nextBtn');
            const stepIndicators = document.querySelectorAll('.step-indicator');
            const formSections = document.querySelectorAll('.form-section');
            const progressDots = document.querySelectorAll('.progress-dot');
            const tableManagement = document.getElementById('tableManagement');
            const radioCards = document.querySelectorAll('.radio-card');
            const tablesTableBody = document.getElementById('tablesTableBody');
            const teamMembersTableBody = document.getElementById('teamMembersTableBody');
            const saveTableBtn = document.getElementById('saveTableBtn');
            const saveMemberBtn = document.getElementById('saveMemberBtn');
            const updateTableBtn = document.getElementById('updateTableBtn');

            // Initialize Select2
            function initializeSelect2() {
                $('.select2').select2({
                    width: '100%',
                    minimumResultsForSearch: 5,
                    placeholder: function() {
                        return $(this).data('placeholder') || 'Select an option';
                    }
                });
            }

            // Initialize on page load
            initializeSelect2();
            updateUI();

            // Previous button
            prevBtn.addEventListener('click', () => {
                if (currentStep > 1) {
                    currentStep--;
                    updateUI();
                    scrollToTop();
                }
            });

            // Next button
            nextBtn.addEventListener('click', async () => {
                if (currentStep < totalSteps) {
                    // For step 1, we need to create the branch first
                    if (currentStep === 1 && !branchId) {
                        const success = await saveStepData(currentStep);
                        if (success) {
                            currentStep++;
                            updateUI();
                            scrollToTop();
                        }
                        return;
                    }

                    // For steps 2 and 3, check if branchId exists
                    if (currentStep >= 2 && !branchId) {
                        showGlobalError('Please complete step 1 first to create the branch.');
                        return;
                    }

                    // Save current step data before moving to next
                    const success = await saveStepData(currentStep);
                    if (success) {
                        currentStep++;
                        updateUI();
                        scrollToTop();
                    }
                } else {
                    // We're on step 3 (final step) - complete setup directly
                    await handleFinalStep();
                }
            });

            // Handle final step (step 3) - Complete setup directly
            async function handleFinalStep() {
                // Validate team members before proceeding
                if (teamMembers.length === 0) {
                    showGlobalError('Please add at least one team member before completing setup.');
                    return;
                }
                if (teamMembers.length > 5) {
                    showGlobalError(
                        'Maximum 5 team members allowed per branch. Please remove some members.'
                    );
                    return;
                }

                // Complete the setup directly without saving step data again
                await completeSetup();
            }

            // Step navigation
            stepIndicators.forEach((indicator, index) => {
                indicator.addEventListener('click', async () => {
                    const targetStep = index + 1;

                    // Prevent navigating to steps 2/3 without branchId
                    if (targetStep >= 2 && !branchId && currentStep === 1) {
                        showGlobalError('Please complete step 1 first to create the branch.');
                        return;
                    }

                    if (targetStep <= currentStep + 1) {
                        const success = await saveStepData(currentStep);
                        if (success) {
                            currentStep = targetStep;
                            updateUI();
                            scrollToTop();
                        }
                    }
                });
            });

            // Radio card selection
            radioCards.forEach(card => {
                card.addEventListener('click', function() {
                    radioCards.forEach(c => c.classList.remove('selected'));
                    this.classList.add('selected');
                    const radio = this.querySelector('input[type="radio"]');
                    radio.checked = true;

                    if (radio.value === 'advanced') {
                        tableManagement.style.display = 'block';
                    } else {
                        tableManagement.style.display = 'none';
                    }
                });
            });

            // Save table button
            saveTableBtn.addEventListener('click', () => {
                addTable();
            });
            updateTableBtn.addEventListener('click', () => {
                updateTable();
            });

            // Save member button
            saveMemberBtn.addEventListener('click', async () => {
                await saveTeamMemberToDatabase();
            });

            async function saveTeamMemberToDatabase() {
                const name = document.getElementById('memberName').value.trim();
                const email = document.getElementById('memberEmail').value.trim();
                const role = document.getElementById('memberRole').value;
                const phone = document.getElementById('memberPhone').value;
                const password = document.getElementById('memberPassword').value;
                const password_confirmation = document.getElementById('memberConfirmPassword').value;
                const memberId = document.getElementById('memberIdHidden')?.value;

                // Clear old errors
                clearMemberModalErrors();

                // Frontend basic validation
                let errors = [];
                if (!name) errors.push('Name is required');
                if (!email) errors.push('Email is required');
                if (!role) errors.push('Role is required');

                if (errors.length > 0) {
                    showMemberModalErrors(errors);
                    return;
                }

                try {
                    const baseUrl = '{{ url('') }}';
                    saveMemberBtn.classList.add('btn-loading');
                    saveMemberBtn.disabled = true;

                    const url = memberId ?
                        `${baseUrl}/restaurant-admin/branches/${branchId}/team-members/${memberId}` :
                        `${baseUrl}/restaurant-admin/branches/${branchId}/team-members`;

                    const method = memberId ? 'PUT' : 'POST';

                    const response = await fetch(url, {
                        method: method,
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify({
                            name: name,
                            email: email,
                            role: role,
                            phone: phone,
                            password: password,
                            password_confirmation: password_confirmation // 🔥 REQUIRED
                        })
                    });

                    const result = await response.json();

                    // Handle Laravel validation errors
                    if (!response.ok) {
                        if (response.status === 422 && result.errors) {

                            for (const [field, messages] of Object.entries(result.errors)) {

                                switch (field) {
                                    case 'name':
                                        showMemberFieldError('memberName', messages[0]);
                                        break;

                                    case 'email':
                                        showMemberFieldError('memberEmail', messages[0]);
                                        break;

                                    case 'role':
                                        showMemberFieldError('memberRole', messages[0]);
                                        break;

                                    case 'phone':
                                        showMemberFieldError('memberPhone', messages[0]);
                                        break;

                                    case 'password':
                                        showMemberFieldError('memberPassword', messages[0]);
                                        break;

                                    case 'password_confirmation': // 🔥 CORRECT KEY
                                        showMemberFieldError('memberConfirmPassword', messages[0]);
                                        break;

                                    default:
                                        showMemberModalErrors([messages[0]]);
                                }
                            }
                            return;
                        }

                        throw new Error(result.message || `HTTP error! Status: ${response.status}`);
                    }

                    // Success
                    if (result.success) {

                        // Reset modal inputs
                        document.getElementById('memberName').value = '';
                        document.getElementById('memberEmail').value = '';
                        document.getElementById('memberRole').value = '';
                        document.getElementById('memberPhone').value = '';
                        document.getElementById('memberPassword').value = '';
                        document.getElementById('memberConfirmPassword').value = '';

                        if (document.getElementById('memberIdHidden')) {
                            document.getElementById('memberIdHidden').remove();
                        }

                        bootstrap.Modal.getInstance(document.getElementById('addMemberModal')).hide();

                        await loadTeamMembers();

                        showInlineAlert(result.message || 'Team member saved successfully!', 'success');
                    }

                } catch (error) {
                    console.error('Error saving team member:', error);
                    showMemberModalErrors([error.message]);
                } finally {
                    saveMemberBtn.classList.remove('btn-loading');
                    saveMemberBtn.disabled = false;
                }
            }

            // Reset modal when closed
            document.getElementById('addMemberModal').addEventListener('hidden.bs.modal', function() {
                clearMemberModalErrors();
                document.getElementById('memberName').value = '';
                document.getElementById('memberEmail').value = '';
                document.getElementById('memberRole').value = '';
                document.querySelector('#addMemberModal .modal-title').textContent = 'Add Team Member';

                // Remove hidden ID field if exists
                const hiddenInput = document.getElementById('memberIdHidden');
                if (hiddenInput) {
                    hiddenInput.remove();
                }
            });

            const originalUpdateUI = updateUI;
            updateUI = function() {
                originalUpdateUI();

                // Load team members when reaching step 3
                if (currentStep === 3 && branchId) {
                    loadTeamMembers();
                }
            };

            async function loadTeamMembers() {
                if (!branchId) {
                    console.log('No branch ID available yet');
                    return;
                }

                try {
                    console.log('🔄 Loading team members for branch:', branchId);

                    // Show loading state
                    teamMembersTableBody.innerHTML = `
                    <tr>
                        <td colspan="4" class="text-center py-4">
                            <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                            Loading team members...
                        </td>
                    </tr>
                `;

                    const baseUrl = '{{ url('') }}';
                    const response = await fetch(
                        `${baseUrl}/restaurant-admin/branches/${branchId}/team-members`, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });

                    console.log('Response status:', response.status, response.statusText);

                    if (response.redirected) {
                        console.warn('Request was redirected to:', response.url);
                        throw new Error('Authentication required. Please refresh the page.');
                    }

                    const result = await response.json();
                    console.log('📦 Team members API response:', result);

                    if (result.success) {
                        teamMembers = result.team_members || [];
                        console.log('✅ Team members loaded:', teamMembers);
                        renderTeamMembers();

                        // If we have team members and we're on step 3, show completion option
                        if (currentStep === 3 && teamMembers.length > 0) {
                            showInlineAlert(
                                `Loaded ${teamMembers.length} team member(s). Click "Complete Setup" to finish.`,
                                'info', 5000);
                        }
                    } else {
                        console.error('❌ API returned error:', result.message);
                        throw new Error(result.message || 'Failed to load team members');
                    }

                } catch (error) {
                    console.error('💥 Error loading team members:', error);

                    let errorMessage = 'Failed to load team members. ';

                    if (error.message.includes('Authentication') || error.message.includes('302')) {
                        errorMessage = 'Session expired. Please refresh the page and try again.';
                        setTimeout(() => {
                            window.location.reload();
                        }, 3000);
                    } else {
                        errorMessage += error.message;
                    }

                    teamMembersTableBody.innerHTML = `
                    <tr>
                        <td colspan="4" class="text-center py-4 text-danger">
                            <i class="fas fa-exclamation-triangle me-2"></i>
                            ${errorMessage}
                        </td>
                    </tr>
                `;
                }
            }

            // Country, State, City Dropdown Logic
            // $('#country').on('change', function() {
            //     const countryId = $(this).val();

            //     // Reset state and city
            //     $('#state').html('<option value="">-- Select State --</option>')
            //         .prop('disabled', true)
            //         .val('')
            //         .trigger('change');
            //     $('#city').html('<option value="">-- Select City --</option>')
            //         .prop('disabled', true)
            //         .val('')
            //         .trigger('change');

            //     if (countryId) {
            //         loadStates(countryId);
            //     }
            // });

            // $('#state').on('change', function() {
            //     const stateId = $(this).val();

            //     // Reset city
            //     $('#city').html('<option value="">-- Select City --</option>')
            //         .prop('disabled', true)
            //         .val('')
            //         .trigger('change');

            //     if (stateId) {
            //         loadCities(stateId);
            //     }
            // });

            // function loadStates(countryId) {
            //     $('#state').html('<option value="">Loading...</option>')
            //         .prop('disabled', true)
            //         .trigger('change');
            //     const baseUrl = '{{ url('') }}';
            //     $.ajax({
            //         url: `${baseUrl}/get-states/${countryId}`,
            //         method: 'GET',
            //         headers: {
            //             'Content-Type': 'application/json',
            //             'X-CSRF-TOKEN': '{{ csrf_token() }}',
            //             'Accept': 'application/json',
            //             'X-Requested-With': 'XMLHttpRequest'
            //         },
            //         success: function(data) {
            //             $('#state').html('<option value="">-- Select State --</option>');

            //             if (data && data.length > 0) {
            //                 $.each(data, function(index, state) {
            //                     $('#state').append(
            //                         `<option value="${state.id}">${state.name[0].toUpperCase() + state.name.slice(1)}</option>`
            //                     );
            //                 });
            //                 $('#state').prop('disabled', false);
            //             } else {
            //                 $('#state').append('<option value="">No states available</option>');
            //             }

            //             $('#state').trigger('change');
            //         },
            //         error: function(xhr, status, error) {
            //             console.error('States Error:', xhr);

            //             let errorMessage = 'Failed to load states';

            //             if (xhr.status === 302) {
            //                 errorMessage = 'Session expired. Please refresh the page.';
            //                 setTimeout(() => {
            //                     window.location.reload();
            //                 }, 2000);
            //             } else if (xhr.status === 401 || xhr.status === 403) {
            //                 errorMessage = 'Authentication required. Please login again.';
            //             } else if (xhr.responseJSON && xhr.responseJSON.message) {
            //                 errorMessage = xhr.responseJSON.message;
            //             }

            //             $('#state').html('<option value="">-- Select State --</option>')
            //                 .prop('disabled', true)
            //                 .trigger('change');

            //             showAlert(errorMessage, 'danger');
            //         }
            //     });
            // }

            function loadCities(stateId, selectedCity = null) {

                $('#city').html('<option value="">Loading...</option>')
                    .prop('disabled', true)
                    .trigger('change');

                const baseUrl = '{{ url('') }}';

                $.ajax({
                    url: `${baseUrl}/get-cities/${stateId}`,
                    method: 'GET',
                    success: function(data) {
                        $('#city').html('<option value="">-- Select City --</option>');

                        data.forEach(city => {
                            $('#city').append(`
                                                <option value="${city.id}" 
                                                    ${selectedCity == city.id ? 'selected' : ''}>
                                                    ${city.name.charAt(0).toUpperCase() + city.name.slice(1)}
                                                </option>
                                            `);
                        });

                        $('#city').prop('disabled', false).trigger('change');
                    }
                });
            }



            async function saveStepData(step) {
                const originalText = nextBtn.innerHTML;

                try {
                    nextBtn.classList.add('btn-loading');
                    nextBtn.disabled = true;
                    prevBtn.disabled = true;

                    hideGlobalError();
                    clearValidationErrors();

                    let data = {};
                    let url = '';

                    switch (step) {
                        case 1:
                            data = getBranchDetailsData();
                            data.current_step = step;
                            url = '{{ route('branches.store') }}';
                            break;
                        case 2:
                            if (!branchId) {
                                showGlobalError('Branch ID not found. Please complete step 1 first.');
                                return false;
                            }
                            data = getTableManagementData();
                            data.current_step = step;
                            url = '{{ route('branches.saveTables', ':branchId') }}'.replace(':branchId',
                                branchId);
                            break;
                        case 3:
                            if (!branchId) {
                                showGlobalError('Branch ID not found. Please complete step 1 first.');
                                return false;
                            }

                            // For step 3, we only update the current_step, not branch details
                            // This fixes the "Failed to update branch details" error
                            url = '{{ route('branches.update', ':branchId') }}'.replace(':branchId', branchId);
                            data = {
                                current_step: step,
                                _method: 'PUT'
                            };
                            break;
                    }

                    console.log('Saving step:', step, 'URL:', url, 'Data:', data);

                    const response = await fetch(url, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                            'Accept': 'application/json',
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                        body: JSON.stringify(data)
                    });

                    const result = await response.json();

                    console.log('Response for step', step, ':', result);

                    if (!response.ok) {
                        if (response.status === 422 && result.errors) {
                            displayValidationErrors(result.errors);
                            showGlobalError(result.message || 'Please fix the validation errors below.');
                            return false;
                        } else {
                            throw new Error(result.message || `HTTP error! status: ${response.status}`);
                        }
                    }

                    if (result.success) {
                        if (result.branch_id) {
                            branchId = result.branch_id;
                            console.log('Branch ID updated:', branchId);
                        }

                        showInlineAlert(result.message || 'Data saved successfully!', 'success');
                        return true;
                    } else {
                        showGlobalError(result.message || 'Error saving data');
                        return false;
                    }

                } catch (error) {
                    console.error('Error saving step data:', error);
                    showGlobalError('An unexpected error occurred: ' + error.message);
                    return false;
                } finally {
                    nextBtn.classList.remove('btn-loading');
                    nextBtn.disabled = false;
                    prevBtn.disabled = false;
                    nextBtn.innerHTML = originalText;
                }
            }

            function getBranchDetailsData() {
                const form = document.getElementById('branchForm');
                const countrySelect = document.querySelector('[name="country"]');
                const stateSelect = document.querySelector('[name="state"]');
                const citySelect = document.querySelector('[name="city"]');

                return {
                    branch_name: form.querySelector('[name="branch_name"]').value,
                    address: form.querySelector('[name="address"]').value,
                    branch_contact_name: form.querySelector('[name="contact_name"]').value,
                    branch_contact_phone: form.querySelector('[name="contact_number"]').value,
                    branch_contact_email: form.querySelector('[name="contact_email"]').value,
                    country: countrySelect ? countrySelect.value : '',
                    state: stateSelect ? stateSelect.value : '',
                    city: citySelect ? citySelect.value : '',
                    pincode: form.querySelector('[name="pincode"]').value,
                    reservations: form.querySelector('[name="reservations"]').checked ? 1 : 0,
                    takeaway_enabled: form.querySelector('[name="takeaway_enabled"]').checked ? 1 : 0
                };
            }

            function getTableManagementData() {
                const tableType = document.querySelector('input[name="tableType"]:checked').value;
                return {
                    table_type: tableType,
                    tables: tableType === 'advanced' ? tables : []
                };
            }

            function addTable() {
                const name = document.getElementById('tableName').value;
                const description = document.getElementById('tableDescription').value;
                const minCapacity = document.getElementById('tableMinCapacity').value;
                const maxCapacity = document.getElementById('tableMaxCapacity').value;

                if (!name || !maxCapacity) {

                    $('#AddTableModalError').removeClass('d-none').html('Please fill all required fields');
                    return;
                }

                const table = {
                    id: 'T' + Date.now(),
                    name: name,
                    description: description,
                    min_capacity: minCapacity || 1,
                    max_capacity: parseInt(maxCapacity)
                };

                tables.push(table);
                renderTables();

                document.getElementById('tableName').value = '';
                document.getElementById('tableDescription').value = '';
                document.getElementById('tableMinCapacity').value = '';
                document.getElementById('tableMaxCapacity').value = '';

                bootstrap.Modal.getInstance(document.getElementById('addTableModal')).hide();
                showAlert('Table added successfully!', 'success');
            }

            function clearMemberModalErrors() {
                const errorElements = document.querySelectorAll('#addMemberModal .invalid-feedback');
                errorElements.forEach(element => {
                    element.textContent = '';
                    element.style.display = 'none';
                });

                const inputElements = document.querySelectorAll(
                    '#addMemberModal .form-control, #addMemberModal .form-select');
                inputElements.forEach(element => {
                    element.classList.remove('is-invalid');
                });
            }

            function showMemberModalErrors(errors) {
                clearMemberModalErrors();

                errors.forEach(error => {
                    const normalizedError = error.toLowerCase();

                    if (normalizedError.includes('name')) {
                        showMemberFieldError('memberName', error);
                    } else if (normalizedError.includes('email')) {
                        showMemberFieldError('memberEmail', error);
                    } else if (normalizedError.includes('role')) {
                        showMemberFieldError('memberRole', error);
                    } else if (normalizedError.includes('phone')) {
                        showMemberFieldError('memberPhone', error);
                    } else if (normalizedError.includes('confirm')) {
                        showMemberFieldError('memberConfirmPassword', error);
                    } else if (normalizedError.includes('password')) {
                        showMemberFieldError('memberPassword', error);
                    } else {
                        // Fallback → do NOT push to email or name
                        console.warn("Unhandled error:", error);
                    }

                });
            }

            function showMemberFieldError(fieldId, message) {
                const field = document.getElementById(fieldId);
                const errorElement = document.getElementById(fieldId + '-error');

                if (field && errorElement) {
                    field.classList.add('is-invalid');
                    errorElement.textContent = message;
                    errorElement.style.display = 'block';
                }
            }

            function isValidEmail(email) {
                const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return emailRegex.test(email);
            }

            function renderTables() {
                tablesTableBody.innerHTML = '';

                tables.forEach((table, index) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>${table.id}</td>
                    <td>${table.name}</td>
                    <td>${table.description || '-'}</td>
                    <td>${table.min_capacity}</td>
                    <td>${table.max_capacity}</td>
                    <td>
                        <div class="d-flex align-items-center gap-2">
                        <button type="button" class="btn-icon me-1" onclick="editTable(${index})">
                            <i class="fas fa-pen"></i>
                        </button>
                        <button type="button" class="btn-icon" onclick="deleteTable(${index})">
                            <i class="fas fa-trash"></i>
                        </button>
                        </div>

                    </td>
                `;
                    tablesTableBody.appendChild(row);
                });
            }

            function renderTeamMembers() {
                teamMembersTableBody.innerHTML = '';

                if (teamMembers.length === 0) {
                    const emptyRow = document.createElement('tr');
                    emptyRow.innerHTML = `
                    <td colspan="4" class="text-center py-4 text-muted">
                        <i class="fas fa-users fa-2x mb-2"></i><br>
                        No team members added yet.<br>
                        <small>Click "Add Member" to get started.</small>
                    </td>
                `;
                    teamMembersTableBody.appendChild(emptyRow);
                    return;
                }

                // Update count in header
                const actionBar = document.querySelector('#step3 .action-bar h2');
                if (actionBar) {
                    actionBar.innerHTML = `Add Team <small class="text-muted">(${teamMembers.length}/5)</small>`;
                }

                teamMembers.forEach((member) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `
                    <td>
                        <div class="">${member.name}</div>
                    </td>
                    <td>
                        <div>${member.email}</div>
                    </td>
                    <td>
                        <div>${member.phone}</div>
                    </td>
                    <td>
                        <span class="">${member.role_name}</span>
                    </td>
                    <td class="d-flex">
                       
                        <button type="button" class="btn-icon text-danger" onclick="deleteTeamMemberFromDB(${member.id})" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                `;
                    teamMembersTableBody.appendChild(row);
                });
            }

            // Edit team member
            window.editTeamMemberFromDB = async function(memberId) {
                try {
                    const baseUrl = '{{ url('') }}';
                    const response = await fetch(
                        `${baseUrl}/restaurant-admin/branches/${branchId}/team-members/${memberId}`, {
                            method: 'GET',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            credentials: 'same-origin'
                        });

                    if (response.redirected) {
                        throw new Error('Authentication required');
                    }

                    const result = await response.json();

                    if (result.success) {
                        const member = result.team_member;

                        // Fill modal with member data
                        document.getElementById('memberName').value = member.name;
                        document.getElementById('memberEmail').value = member.email;
                        document.getElementById('memberRole').value = member.role;

                        // Add hidden field for member ID
                        let hiddenInput = document.getElementById('memberIdHidden');
                        if (!hiddenInput) {
                            hiddenInput = document.createElement('input');
                            hiddenInput.type = 'hidden';
                            hiddenInput.id = 'memberIdHidden';
                            document.getElementById('addMemberModal').querySelector('.modal-body')
                                .appendChild(hiddenInput);
                        }
                        hiddenInput.value = member.id;

                        // Update modal title
                        document.querySelector('#addMemberModal .modal-title').textContent =
                            'Edit Team Member';

                        // Show modal
                        const modal = new bootstrap.Modal(document.getElementById('addMemberModal'));
                        modal.show();
                    }

                } catch (error) {
                    console.error('Error loading team member:', error);
                    if (error.message.includes('Authentication')) {
                        showGlobalError('Session expired. Please refresh the page.');
                    } else {
                        showAlert('Failed to load team member details', 'danger');
                    }
                }
            };

            // Delete team member
            window.deleteTeamMemberFromDB = function(memberId) {
                Swal.fire({
                    html: `
            <div class="adv-seat-card">
                <div class="adv-seat-card-header">
                    Remove Team Member
                </div>
                <div class="adv-seat-card-body">
                    Are you sure you want to remove this team member?
                    This action cannot be undone.
                </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();

                // Cancel button
                popup.querySelector('[data-action="cancel"]').onclick = () => Swal.close();

                // Confirm button
                popup.querySelector('[data-action="confirm"]').onclick = async () => {
                    Swal.close();

                    try {
                        const baseUrl = '{{ url('') }}';
                        const response = await fetch(
                            `${baseUrl}/branches/${branchId}/team-members-delete/${memberId}`, {
                                method: 'DELETE',
                                headers: {
                                    'Content-Type': 'application/json',
                                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                    'Accept': 'application/json',
                                    'X-Requested-With': 'XMLHttpRequest'
                                }
                            }
                        );

                        const result = await response.json();

                        if (result.success) {
                            await loadTeamMembers();
                            showInlineAlert('Team member removed successfully!', 'success');
                        } else {
                            showAlert(result.message || 'Failed to remove team member', 'danger');
                        }
                    } catch (error) {
                        console.error('Error deleting team member:', error);
                        showAlert('Failed to remove team member', 'danger');
                    }
                };
            };


            // Complete the setup directly without modal
            async function completeSetup() {
                try {
                    // Show loading state on the next button
                    const nextBtn = document.getElementById('nextBtn');
                    const originalText = nextBtn.innerHTML;
                    nextBtn.classList.add('btn-loading');
                    nextBtn.disabled = true;
                    prevBtn.disabled = true;

                    const baseUrl = '{{ url('') }}';
                    const response = await fetch(
                        `${baseUrl}/restaurant-admin/branches/${branchId}/complete-setup`, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                                'Accept': 'application/json',
                                'X-Requested-With': 'XMLHttpRequest'
                            },
                            body: JSON.stringify({
                                branch_id: branchId
                            })
                        });

                    const result = await response.json();

                    if (result.success) {
                        showAlert('Branch setup completed successfully!', 'success');

                        // Redirect to branches list after a short delay
                        setTimeout(() => {
                            window.location.href = "{{ route('branches.index') }}";
                        }, 2000);

                    } else {
                        showAlert(result.message || 'Error completing setup', 'danger');
                        nextBtn.classList.remove('btn-loading');
                        nextBtn.disabled = false;
                        prevBtn.disabled = false;
                        nextBtn.innerHTML = originalText;
                    }
                } catch (error) {
                    console.error('Error completing setup:', error);
                    showAlert('An error occurred while completing setup', 'danger');

                    const nextBtn = document.getElementById('nextBtn');
                    nextBtn.classList.remove('btn-loading');
                    nextBtn.disabled = false;
                    prevBtn.disabled = false;
                }
            }

            // Validation error handling functions
            function displayValidationErrors(errors) {
                clearValidationErrors();
                hideGlobalError();

                let hasErrors = false;
                let firstErrorElement = null;

                for (const field in errors) {
                    const errorElement = document.getElementById(`${field}-error`);
                    let inputElement = document.querySelector(`[name="${field}"]`);

                    if (!inputElement) {
                        if (field === 'branch_address') {
                            inputElement = document.querySelector('[name="address"]');
                        } else if (field === 'branch_contact_name') {
                            inputElement = document.querySelector('[name="contact_name"]');
                        } else if (field === 'branch_contact_phone') {
                            inputElement = document.querySelector('[name="contact_number"]');
                        } else if (field === 'branch_contact_email') {
                            inputElement = document.querySelector('[name="contact_email"]');
                        }
                    }

                    if (errorElement && errors[field][0]) {
                        errorElement.textContent = errors[field][0];
                        errorElement.style.display = 'block';
                        hasErrors = true;

                        if (inputElement) {
                            inputElement.classList.add('is-invalid');

                            if (!firstErrorElement) {
                                firstErrorElement = inputElement;
                            }

                            if (inputElement.classList.contains('select2')) {
                                const select2Container = inputElement.nextElementSibling;
                                if (select2Container && select2Container.classList.contains('select2-container')) {
                                    select2Container.querySelector('.select2-selection').classList.add(
                                        'is-invalid');
                                }
                            }
                        }
                    }
                }

                if (!hasErrors && Object.keys(errors).length > 0) {
                    const errorMessages = Object.values(errors).flat().join(', ');
                    showGlobalError('Validation errors: ' + errorMessages);
                }

                if (firstErrorElement) {
                    setTimeout(() => {
                        firstErrorElement.scrollIntoView({
                            behavior: 'smooth',
                            block: 'center'
                        });
                        firstErrorElement.focus();
                    }, 300);
                }

                return hasErrors;
            }

            function clearValidationErrors() {
                const errorElements = document.querySelectorAll('.invalid-feedback');
                errorElements.forEach(element => {
                    element.textContent = '';
                    element.style.display = 'none';
                });

                const invalidInputs = document.querySelectorAll('.is-invalid');
                invalidInputs.forEach(input => {
                    input.classList.remove('is-invalid');
                });

                const select2Invalids = document.querySelectorAll('.select2-selection.is-invalid');
                select2Invalids.forEach(element => {
                    element.classList.remove('is-invalid');
                });
            }

            function showGlobalError(message, duration = 0) {
                const errorAlert = document.getElementById('globalErrorAlert');
                const errorMessage = document.getElementById('globalErrorMessage');

                errorMessage.textContent = message;
                errorAlert.style.display = 'block';

                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });

                if (duration > 0) {
                    setTimeout(() => {
                        hideGlobalError();
                    }, duration);
                }
            }

            function hideGlobalError() {
                const errorAlert = document.getElementById('globalErrorAlert');
                errorAlert.style.display = 'none';
            }

            function showInlineAlert(message, type, duration = 5000) {
                const existingAlerts = document.querySelectorAll('.alert-custom:not(#globalErrorAlert)');
                existingAlerts.forEach(alert => alert.remove());

                const alert = document.createElement('div');
                alert.className = `alert alert-${type} alert-custom`;
                alert.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-${getAlertIcon(type)} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close ms-auto" onclick="this.parentElement.parentElement.remove()"></button>
                </div>
            `;

                const currentSection = document.querySelector('.form-section.active');
                currentSection.insertBefore(alert, currentSection.firstChild);

                if (duration > 0) {
                    setTimeout(() => {
                        if (alert.parentElement) {
                            alert.remove();
                        }
                    }, duration);
                }
            }

            function showAlert(message, type) {
                const existingAlerts = document.querySelectorAll('.alert-custom:not(#globalErrorAlert)');
                existingAlerts.forEach(alert => alert.remove());

                if (type === 'danger' || type === 'error') {
                    showGlobalError(message);
                    return;
                }

                const alert = document.createElement('div');
                alert.className = `alert alert-${type} alert-custom`;
                alert.innerHTML = `
                <div class="d-flex align-items-center">
                    <i class="fas fa-${getAlertIcon(type)} me-2"></i>
                    ${message}
                    <button type="button" class="btn-close ms-auto" onclick="this.parentElement.parentElement.remove()"></button>
                </div>
            `;

                const formContent = document.querySelector('.col-lg-9');
                formContent.insertBefore(alert, formContent.firstChild);

                if (type === 'success') {
                    setTimeout(() => {
                        if (alert.parentElement) {
                            alert.remove();
                        }
                    }, 5000);
                }
            }

            function getAlertIcon(type) {
                const icons = {
                    'success': 'check-circle',
                    'warning': 'exclamation-triangle',
                    'danger': 'exclamation-circle',
                    'info': 'info-circle'
                };
                return icons[type] || 'info-circle';
            }

            // Update UI based on current step
            function updateUI() {
                formSections.forEach((section, index) => {
                    section.classList.remove('active');
                    if (index + 1 === currentStep) {
                        section.classList.add('active');
                    }
                });

                stepIndicators.forEach((indicator, index) => {
                    const stepNumber = index + 1;
                    indicator.classList.remove('active', 'completed');

                    const existingBadge = indicator.querySelector('.step-badge');
                    if (existingBadge) {
                        existingBadge.remove();
                    }

                    if (stepNumber < currentStep) {
                        indicator.classList.add('completed');
                        const badge = document.createElement('span');
                        badge.className = 'step-badge completed';
                        badge.textContent = 'Completed';
                        indicator.querySelector('.step-name').appendChild(badge);
                    } else if (stepNumber === currentStep) {
                        indicator.classList.add('active');
                        const badge = document.createElement('span');
                        badge.className = 'step-badge in-progress';
                        badge.textContent = 'In Progress';
                        indicator.querySelector('.step-name').appendChild(badge);
                    }
                });

                progressDots.forEach((dot, index) => {
                    dot.classList.remove('active', 'completed');
                    const dotStep = index + 1;
                    if (dotStep < currentStep) {
                        dot.classList.add('completed');
                    } else if (dotStep === currentStep) {
                        dot.classList.add('active');
                    }
                });

                // Update button text and functionality
                prevBtn.disabled = currentStep === 1;

                if (currentStep === totalSteps) {
                    nextBtn.innerHTML = 'Complete Setup <i class="fas fa-check ms-2"></i>';
                } else {
                    nextBtn.innerHTML = 'Next <i class="fas fa-arrow-right ms-2"></i>';
                }
            }

            // Scroll to top of content
            function scrollToTop() {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            }


            // Utility functions
            window.editTable = function(index) {
                const table = tables[index];

                // ✅ Set the actual table ID (not array index)
                document.getElementById('editTableId').value = table.id;
                document.getElementById('editTableName').value = table.name || table.table_name || '';
                document.getElementById('editTableDescription').value = table.description || '';
                document.getElementById('editTableMinCapacity').value = table.min_capacity || 1;
                document.getElementById('editTableMaxCapacity').value = table.max_capacity || 1;

                const modal = new bootstrap.Modal(document.getElementById('editTableModal'));
                modal.show();
            };

            function updateTable() {
                const tableId = document.getElementById('editTableId').value;
                const name = document.getElementById('editTableName').value;
                const description = document.getElementById('editTableDescription').value;
                const minCapacity = document.getElementById('editTableMinCapacity').value;
                const maxCapacity = document.getElementById('editTableMaxCapacity').value;

                if (!name || !maxCapacity) {
                    showAlert('Please fill in all required fields', 'warning');
                    return;
                }

                // Find table index by ID (not by array index)
                const tableIndex = tables.findIndex(table => table.id == tableId);

                if (tableIndex !== -1) {
                    // ✅ Update the table while preserving its ID
                    tables[tableIndex] = {
                        id: tableId, // ✅ KEEP THE ORIGINAL ID
                        name: name,
                        table_name: name, // Also update table_name for consistency
                        description: description,
                        min_capacity: minCapacity || 1,
                        max_capacity: parseInt(maxCapacity)
                    };
                }

                renderTables();
                bootstrap.Modal.getInstance(document.getElementById('editTableModal')).hide();
                showAlert('Table updated successfully!', 'success');
            }

            window.deleteTable = function(index) {
                Swal.fire({
                    html: `
                            <div class="adv-seat-card">
                                <div class="adv-seat-card-header">
                                    Delete Table
                                </div>
                                <div class="adv-seat-card-body">
                                    Are you sure you want to delete this table?
                                    This action cannot be undone.
                                </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, delete
                                    </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();

                    // Original logic
                    tables.splice(index, 1);
                    renderTables();
                    showAlert('Table deleted successfully!', 'success');
                };
            };


            // Initialize table management visibility
            const selectedRadio = document.querySelector('input[name="tableType"]:checked');
            if (selectedRadio && selectedRadio.value === 'advanced') {
                tableManagement.style.display = 'block';
            }
        });


        document.addEventListener('DOMContentLoaded', function() {
            const cancelBtn = document.getElementById('cancelBranchBtn');
            if (!cancelBtn) return;

            cancelBtn.addEventListener('click', function() {
                Swal.fire({
                    html: `
                            <div class="adv-seat-card">
                                <div class="adv-seat-card-header">
                                    Cancel Branch Setup
                                </div>
                                <div class="adv-seat-card-body">
                                    If you cancel, current branch setup progress will be lost.
                                    Are you sure you want to leave this page?
                                </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('branches.index') }}";
                };
            });

        });
    </script>
    <script>
        function preventZero(inputId) {
            const input = document.getElementById(inputId);
            if (!input) return;

            input.addEventListener('input', function() {
                if (this.value === '0') {
                    this.value = '';
                }
            });

            input.addEventListener('keydown', function(e) {
                if (e.key === '0' && this.value.length === 0) {
                    e.preventDefault();
                }
            });
        }

        // Apply to all capacity fields
        document.addEventListener('DOMContentLoaded', function() {
            preventZero('tableMinCapacity');
            preventZero('tableMaxCapacity');
            preventZero('editTableMinCapacity');
            preventZero('editTableMaxCapacity');
        });
    </script>
    <script>
        function hideGlobalError() {
            const errorAlert = document.getElementById('globalErrorAlert');
            const errorMessage = document.getElementById('globalErrorMessage');

            if (!errorAlert) return;

            // Clear text
            if (errorMessage) {
                errorMessage.textContent = '';
            }

            // Hide alert
            errorAlert.style.display = 'none';
        }
    </script>
@endpush