@extends('layouts.app')

@section('title', 'Create Outlet')

<!-- Add Custom Step Modal -->
<div class="modal fade" id="addCustomStepModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px; overflow: hidden;">
            <div class="modal-header bg-white py-3 border-bottom">
                <h5 class="modal-title font-weight-bold" style="color: #172B4D;"><i class="fas fa-plus-circle mr-2 text-primary"></i> Add Custom Step</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body p-4 bg-light">
                <form id="addCustomStepForm">
                    <input type="hidden" id="custom_step_workflow_id" name="workflow_id">
                    <div class="row">
                        <!-- Left Column: Step Details -->
                        <div class="col-md-8 border-right pr-4">
                            <div class="form-group mb-4">
                                <label class="form-label font-weight-bold small text-uppercase mb-2">Step Name <span class="text-danger">*</span></label>
                                <input type="text" name="name" class="form-control form-control-lg shadow-sm" required
                                    placeholder="e.g. Check cooler temperature">
                            </div>

                            <div class="form-group mb-4">
                                <label class="form-label font-weight-bold small text-uppercase mb-2">Step Description (Optional)</label>
                                <textarea name="description" class="form-control" rows="2" maxlength="300" placeholder="Brief summary of the step..."></textarea>
                                <div class="text-right small text-muted mt-1"><span id="modal_char_count">0</span>/300</div>
                            </div>

                            <div class="form-group mb-4">
                                <label class="form-label font-weight-bold small text-uppercase mb-2">Instructions (Rich Text)</label>
                                <div class="rich-text-container shadow-sm border rounded bg-white">
                                    <textarea name="instructions" id="modal_step_instructions" class="form-control border-0"></textarea>
                                </div>
                            </div>

                            <div class="form-group mb-4">
                                <label class="form-label font-weight-bold small text-uppercase mb-2 d-block text-muted">Question Type</label>
                                <div class="d-flex align-items-center mt-2">
                                    <div class="custom-control custom-radio mr-5">
                                        <input type="radio" id="modal_q_selection" name="question_type" value="selection" class="custom-control-input q-type-radio" checked>
                                        <label class="custom-control-label font-weight-bold cursor-pointer" for="modal_q_selection" style="font-size: 0.95rem;">Selection</label>
                                    </div>
                                    <div class="custom-control custom-radio mr-5">
                                        <input type="radio" id="modal_q_text" name="question_type" value="text" class="custom-control-input q-type-radio">
                                        <label class="custom-control-label font-weight-bold cursor-pointer" for="modal_q_text" style="font-size: 0.95rem;">Text Area</label>
                                    </div>
                                    <div class="custom-control custom-radio">
                                        <input type="radio" id="modal_q_mhb" name="question_type" value="mhb_brand" class="custom-control-input q-type-radio">
                                        <label class="custom-control-label font-weight-bold cursor-pointer" for="modal_q_mhb" style="font-size: 0.95rem;">MHB Brand?</label>
                                    </div>
                                </div>
                            </div>

                            <div id="modal_selection_details" class="form-group mb-0 p-3 bg-white border rounded shadow-sm">
                                <div class="mb-3">
                                    <label class="form-label font-weight-bold small text-uppercase mb-2 d-block text-muted">Selection Type</label>
                                    <div class="d-flex align-items-center mt-2">
                                        <div class="custom-control custom-radio mr-4">
                                            <input type="radio" id="modal_s_yesno" name="selection_type" value="yes_no" class="custom-control-input s-type-radio" checked>
                                            <label class="custom-control-label cursor-pointer" for="modal_s_yesno">Yes/No</label>
                                        </div>
                                        <div class="custom-control custom-radio mr-4">
                                            <input type="radio" id="modal_s_single" name="selection_type" value="single_select" class="custom-control-input s-type-radio">
                                            <label class="custom-control-label cursor-pointer" for="modal_s_single">Single Choice</label>
                                        </div>
                                        <div class="custom-control custom-radio">
                                            <input type="radio" id="modal_s_multi" name="selection_type" value="multi_select" class="custom-control-input s-type-radio">
                                            <label class="custom-control-label cursor-pointer" for="modal_s_multi">Multiple Choice</label>
                                        </div>
                                    </div>
                                </div>

                                <div id="modal_options_container" class="options-container d-none mt-3 border-top pt-3">
                                    <label class="form-label font-weight-bold small text-uppercase mb-2 d-flex justify-content-between align-items-center">
                                        Options
                                        <button type="button" class="btn btn-link btn-sm p-0 add-modal-option-btn text-decoration-none" style="font-weight: 600;">+ Add Option</button>
                                    </label>
                                    <div id="modal_options_list" class="options-list">
                                        <!-- Options will be added here -->
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Right Column: Configuration -->
                        <div class="col-md-4 pl-4">
                            <div class="p-3 bg-white rounded shadow-sm border h-100" style="border-radius: 8px !important;">
                                <h6 class="font-weight-bold text-uppercase text-muted mb-4 border-bottom pb-2 x-small letter-spacing-1">Configuration</h6>

                                <div class="mb-4">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="modal_mandatory" name="is_mandatory" checked>
                                        <label class="custom-control-label font-weight-bold text-dark cursor-pointer" for="modal_mandatory" style="font-size: 0.9rem;">Mandatory Step</label>
                                        <small class="text-muted d-block mt-1">User cannot skip this step.</small>
                                    </div>
                                </div>

                                <div class="mb-4 border-top pt-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="modal_remarks" name="allow_remarks">
                                        <label class="custom-control-label cursor-pointer text-muted" for="modal_remarks" style="font-size: 0.9rem;">Enable Remarks Field</label>
                                    </div>
                                </div>

                                <div class="mb-4 border-top pt-3 pb-2">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="modal_require_photo" name="require_photo">
                                        <label class="custom-control-label cursor-pointer text-muted" for="modal_require_photo" style="font-size: 0.9rem;">Require Photo</label>
                                    </div>
                                </div>

                                <div id="modal_photo_container" class="mb-4 border-top pt-3 d-none">
                                    <label class="small font-weight-bold mb-2 d-block text-muted">Photo Count <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control form-control-sm" name="photo_count" id="modal_photo_count" value="1" min="1">
                                    <small class="text-muted">Minimum number of photos required.</small>
                                </div>

                                <div class="mb-4 border-top pt-3">
                                    <label class="small font-weight-bold mb-2 d-block text-muted">Sample Photo (Optional)</label>
                                    <div class="custom-file custom-file-sm">
                                        <input type="file" class="custom-file-input" id="modal_sample_photo" name="sample_photo" accept="image/*">
                                        <label class="custom-file-label border-0 bg-light" for="modal_sample_photo" style="overflow: hidden; height: auto; padding: 6px 10px;">Choose file...</label>
                                    </div>
                                </div>

                                <div class="border-top pt-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="modal_trigger_sr" name="trigger_sr">
                                        <label class="custom-control-label cursor-pointer text-muted" for="modal_trigger_sr" style="font-size: 0.9rem;">Trigger Service Request</label>
                                    </div>
                                    
                                    <div id="modal_sr_settings" class="mt-2 d-none p-3 bg-light rounded border-dashed shadow-none">
                                        <div class="mb-3">
                                            <label class="x-small font-weight-bold text-uppercase mb-1">If Answer Equal To</label>
                                            <div id="modal_trigger_value_container">
                                                <select name="trigger_value" class="form-control form-control-sm">
                                                    <option value="">Select</option>
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="x-small font-weight-bold text-uppercase mb-1">Request Category</label>
                                            <select name="service_request_category_id" class="form-control form-control-sm" id="modal_sr_cat">
                                                <option value="">Select Category</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div>
                                            <label class="x-small font-weight-bold text-uppercase mb-1">Request Template</label>
                                            <select name="service_request_template_id" class="form-control form-control-sm" id="modal_sr_template">
                                                <option value="">-- Select Template --</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer bg-white border-top py-3 justify-content-end">
                <button type="button" class="btn btn-link text-muted px-4 mr-2" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-primary px-4 py-2 shadow-sm d-flex align-items-center" id="btnSaveCustomStep">
                    <i class="fas fa-save mr-2"></i> Add Step to Workflow
                </button>
            </div>
        </div>
    </div>
</div>

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    <style>
        .rounded-border {
            border-radius: 12px;
            border: 1px solid #e0e0e0;
        }

        #map-preview {
            height: 200px;
            border-radius: 8px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
        }

        #modal-map {
            height: 450px;
            width: 100%;
        }

        .form-section-title {
            font-size: 1.1rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #eee;
        }



        .nav-tabs {
            border-bottom: 2px solid #F0F0F0;
            padding: 0 1.5rem;
            gap: 2.5rem;
            flex-wrap: nowrap;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }

        .nav-tabs::-webkit-scrollbar {
            display: none;
        }

        .nav-tabs .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
            color: #888;
            font-weight: 600;
            font-size: 0.85rem;
            text-transform: uppercase;
            padding: 1.25rem 0;
            white-space: nowrap;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .nav-tabs .nav-link.active {
            color: #FABB1E !important;
            border-bottom-color: #FABB1E !important;
            background: transparent !important;
        }

        .form-control {
            border: 1px solid #DFE1E6;
            border-radius: 6px;
            padding: 0.6rem 0.75rem;
            font-size: 0.95rem;
            color: #172B4D;
            transition: all 0.2s ease;
            line-height: 1.5 !important;
        }

        .form-control:focus {
            border-color: #FABB1E !important;
            box-shadow: 0 0 0 2px rgba(250, 187, 30, 0.1) !important;
        }

        select.form-control {
            height: auto !important;
            min-height: 42px !important;
        }

        /* Modal refinements */
        #addCustomStepModal .modal-header {
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
        }

        #addCustomStepModal .form-label {
            color: #7A869A;
            letter-spacing: 0.5px;
        }

        #addCustomStepModal .border-right {
            border-right: 1px solid #e0e0e0 !important;
        }

        .custom-switch-md .custom-control-label::before {
            height: 1.5rem;
            width: 2.75rem;
            border-radius: 1rem;
        }

        .custom-switch-md .custom-control-label::after {
            width: calc(1.5rem - 4px);
            height: calc(1.5rem - 4px);
            border-radius: 1rem;
        }

        .custom-switch-md .custom-control-input:checked ~ .custom-control-label::after {
            transform: translateX(1.25rem);
        }

        .custom-control-input:checked ~ .custom-control-label::before {
            background-color: #FABB1E !important;
            border-color: #FABB1E !important;
        }

        .border-dashed {
            border: 1px dashed #ced4da !important;
        }

        .letter-spacing-1 {
            letter-spacing: 1px;
        }

        .x-small {
            font-size: 0.75rem;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .rich-text-container .note-editor {
            border: none !important;
        }

        .rich-text-container .note-toolbar {
            background-color: #f8f9fa !important;
            border-bottom: 1px solid #eee !important;
        }

        #addCustomStepModal .modal-footer .btn-link {
            text-decoration: none;
            font-weight: 500;
        }

        #addCustomStepModal .modal-footer .btn-link:hover {
            color: #172B4D !important;
        }

        /* Radio centering align */
        .custom-radio .custom-control-label::before,
        .custom-radio .custom-control-label::after {
            top: 0.15rem;
        }

        .nav-tabs .nav-link .step-number {
            margin-right: 0.5rem;
        }

        /* Button styling unification */
        .btn {
            border-radius: 6px !important;
            font-weight: 600 !important;
            transition: all 0.2s ease !important;
            box-shadow: none !important;
            border: none !important;
            outline: none !important;
        }

        .btn-primary,
        .btn-secondary,
        .btn-outline-primary {
            padding: 8px 20px !important;
        }

        .btn-sm:not(.p-0) {
            padding: 4px 12px !important;
        }

        .btn-link,
        .p-0 {
            padding: 0 !important;
        }

        .form-label {
            min-height: 24px;
            display: flex;
            align-items: center;
            color: #7A869A;
            font-weight: 500;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        .btn-primary {
            background-color: #FABB1E !important;
            color: #fff !important;
        }

        .btn-primary:hover {
            background-color: #e6a800 !important;
            transform: translateY(-1px);
        }

        .btn-outline-primary {
            border: 1px solid #FABB1E !important;
            color: #FABB1E !important;
            background: transparent !important;
        }

        .btn-outline-primary:hover {
            background-color: #FABB1E !important;
            color: #fff !important;
        }

        .btn-secondary {
            background-color: #f0f0f0 !important;
            color: #666 !important;
            border: 1px solid #ddd !important;
        }

        .btn:focus,
        .btn:active,
        .btn.active,
        .btn.focus {
            outline: none !important;
            box-shadow: none !important;
            border: none !important;
        }

        /* Brand Config Select2 Styling */
        .select2-container--default .select2-selection--multiple .select2-selection__choice {
            background-color: #343a40 !important;
            border: 1px solid #23272b !important;
            color: #ffffff !important;
            border-radius: 4px !important;
            padding: 2px 8px !important;
            font-weight: 500 !important;
            margin-top: 4px !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
            color: #adb5bd !important;
            margin-right: 5px !important;
            border: none !important;
            background: transparent !important;
        }

        .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
            color: #dc3545 !important;
        }

        .fixed-nav-btn {
            width: 32px !important;
            height: 32px !important;
            font-size: 14px !important;
            background-color: #F6F6F6 !important;
            color: #000000 !important;
            border-radius: 50% !important;
            border: none !important;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 4px;
            transition: all 0.2s;
        }

        .fixed-nav-btn:hover {
            opacity: 0.85;
            transform: scale(1.05);
        }

        .fixed-nav-btn-active {
            background-color: #FABB1E !important;
            color: #000000 !important;
        }
    </style>
@endpush

@section('content')
    <!-- Region Modal -->
    <div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Region</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <form id="regionForm">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Region Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required placeholder="Enter region name">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Region</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Territory Modal -->
    <div class="modal fade" id="territoryModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Territory</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <form id="territoryForm">
                    @csrf
                    <div class="modal-body">
                        <div class="form-group mb-3">
                            <label>Region <span class="text-danger">*</span></label>
                            <select name="region_id" class="form-control" required>
                                <option value="">Select Region</option>
                                @foreach($regions as $region)
                                    <option value="{{ $region->id }}">{{ $region->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Territory Name <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control" required placeholder="Enter territory name">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary">Save Territory</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Map Modal -->
    <div class="modal fade" id="mapModal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Select Location</h5>
                    <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                </div>
                <div class="modal-body">
                    <div class="input-group mb-3">
                        <input type="text" id="map-search" class="form-control" placeholder="Search for location...">
                        <div class="input-group-append">
                            <button class="btn btn-outline-secondary" type="button" id="btn-map-search"><i
                                    class="fa fa-search"></i></button>
                        </div>
                    </div>
                    <div id="search-error" class="alert alert-warning d-none py-2 mb-3">
                        <small><i class="fa fa-exclamation-triangle me-1"></i> Location not found. Try a broader search or
                            pick manually on the map.</small>
                    </div>
                    <div id="modal-map"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmLocation">Confirm Location</button>
                </div>
            </div>
        </div>
    </div>

    <div class="fixed-action-bar d-flex align-items-center justify-content-between">
        <div class="fixed-nav-title">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-0 p-0 bg-transparent" style="font-size: 0.75rem;">
                    <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('horeca.outlets.index') }}">Outlets</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create</li>
                </ol>
            </nav>
            <div class="fw-semibold mt-1">Create Outlet</div>
        </div>
        <div class="d-flex align-items-center">
            <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Add"></i>

            <button type="submit" form="createOutletForm" class="btn p-0">
                <i class="fa-regular fa-save fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mx-1"
                    data-toggle="tooltip" title="Save"></i>
            </button>

            <i class="fa-regular fa-edit fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Edit"></i>
            <i class="fa-regular fa-trash-can fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Delete"></i>

            <a href="{{ route('horeca.outlets.index') }}">
                <i class="fa-solid fa-xmark fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center ms-1"
                    data-toggle="tooltip" title="Close"></i>
            </a>

            <i class="fa-solid fa-columns fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1" data-toggle="tooltip" title="Columns"></i>
        </div>
    </div>

    <div class="card mt-3 rounded-border">
        <div class="card-body p-0">
            <ul class="nav nav-tabs" id="outletTabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" id="basic-tab" data-toggle="tab" href="#basic" role="tab">
                        <span class="step-number">1.</span> BASIC INFORMATION
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="workflow-tab" data-toggle="tab" href="#workflow" role="tab">
                        <span class="step-number">2.</span> WORKFLOW CONFIG
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="brand-tab" data-toggle="tab" href="#brand" role="tab">
                        <span class="step-number">3.</span> BRAND CONFIG
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="posm-tab" data-toggle="tab" href="#posm" role="tab">
                        <span class="step-number">4.</span> POSM CONFIG
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" id="equipment-tab" data-toggle="tab" href="#equipment" role="tab">
                        <span class="step-number">5.</span> EQUIPMENT & MATERIALS
                    </a>
                </li>
            </ul>

            <div class="tab-content p-4" id="outletTabsContent">
                <!-- Tab 1: Basic Information -->
                <div class="tab-pane fade show active" id="basic" role="tabpanel">
                    <form class="section-form" data-section="basic" action="{{ route('horeca.outlets.store') }}"
                        method="POST">
                        @csrf
                        <input type="hidden" name="section" value="basic">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="form-section-title">Outlet Details</h5>
                                <div class="mb-3">
                                    <label class="form-label">RT Code</label>
                                    <input type="text" name="rt_code" class="form-control" placeholder="Enter RT code">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Outlet Name <span class="text-danger">*</span></label>
                                    <input type="text" name="name" class="form-control" required
                                        placeholder="Enter outlet name">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Outlet Type <span class="text-danger">*</span></label>
                                    <select name="outlet_type" class="form-control" required>
                                        <option value="">Select Type</option>
                                        <option value="restaurant">Restaurant</option>
                                        <option value="hotel">Hotel</option>
                                        <option value="cafe">Café</option>
                                        <option value="bar">Bar</option>
                                        <option value="other">Other</option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Visit Frequency</label>
                                    <input type="number" name="visit_frequency" class="form-control" placeholder="e.g. 4"
                                        min="0">
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Distribution Point</label>
                                    <select name="distribution_point_id" class="form-control select2">
                                        <option value="">Select Distribution Point</option>
                                        @foreach($warehouses as $warehouse)
                                            <option value="{{ $warehouse->id }}">{{ $warehouse->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Contact Phone</label>
                                        <input type="text" name="contact_phone" class="form-control"
                                            placeholder="Phone number">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Contact Email</label>
                                        <input type="email" name="contact_email" class="form-control"
                                            placeholder="Email address">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="statusSwitch" name="status"
                                            checked>
                                        <label class="custom-control-label" for="statusSwitch">Active Status</label>
                                    </div>
                                    <small class="text-muted d-block mt-1">
                                        <i class="fa-solid fa-circle-info me-1"></i> New outlets are saved as
                                        <strong>Draft</strong> until Workflow Configuration (Step 02) is completed.
                                    </small>
                                </div>


                            </div>
                            <div class="col-md-6">
                                <h5 class="form-section-title">Location</h5>
                                <div class="mb-3">
                                    <label class="form-label">Address <span class="text-danger">*</span></label>
                                    <textarea name="address" class="form-control" rows="2" required
                                        placeholder="Enter full address"></textarea>
                                </div>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Latitude <span class="text-danger">*</span></label>
                                        <input type="text" name="latitude" id="lat" class="form-control" required
                                            placeholder="0.000000">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Longitude <span class="text-danger">*</span></label>
                                        <input type="text" name="longitude" id="lng" class="form-control" required
                                            placeholder="0.000000">
                                    </div>
                                </div>
                                <button type="button" class="btn btn-outline-primary btn-sm mb-3" data-toggle="modal"
                                    data-target="#mapModal">
                                    <i class="fa-solid fa-location-dot me-1"></i> Pick on Map
                                </button>
                                <div id="map-preview"></div>
                            </div>
                        </div>

                        <div class="row mt-4">
                            <div class="col-12">
                                <h5 class="form-section-title">Assignment</h5>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label d-flex justify-content-between align-items-center">
                                    <span>Territory <span class="text-danger">*</span></span>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-danger text-decoration-none"
                                        data-toggle="modal" data-target="#territoryModal"><i class="fa fa-plus-circle"></i>
                                        Add</button>
                                </label>
                                <select name="territory_id" id="territory_id" class="form-control select2" required>
                                    <option value="">Select Territory</option>
                                    @foreach($territories as $territory)
                                        <option value="{{ $territory->id }}">{{ $territory->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label d-flex justify-content-between align-items-center">
                                    <span>Region <span class="text-danger">*</span></span>
                                    <button type="button" class="btn btn-link btn-sm p-0 text-danger text-decoration-none"
                                        data-toggle="modal" data-target="#regionModal"><i class="fa fa-plus-circle"></i>
                                        Add</button>
                                </label>
                                <select name="region_id" id="region_id" class="form-control select2" required>
                                    <option value="">Select Region</option>
                                    @foreach($regions as $region)
                                        <option value="{{ $region->id }}">{{ $region->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-4 mb-3">
                                <label class="form-label d-flex justify-content-between align-items-center">
                                    <span>Assigned LSR <span class="text-danger">*</span></span>
                                </label>
                                <select name="assigned_lsr_id" id="assigned_lsr_id" class="form-control select2" required>
                                    <option value="">Select LSR</option>
                                    @foreach($lsrs as $lsr)
                                        <option value="{{ $lsr->id }}">
                                            {{ $lsr->name ?? ($lsr->first_name . ' ' . $lsr->last_name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-flex align-items-center">
                                    <span>Assigned TM <span class="text-danger">*</span></span>
                                </label>
                                <select name="assigned_tm_id" id="assigned_tm_id" class="form-control select2" required>
                                    <option value="">Select TM</option>
                                    @foreach($tms as $tm)
                                        <option value="{{ $tm->id }}">
                                            {{ $tm->name ?? ($tm->first_name . ' ' . $tm->last_name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label d-flex align-items-center">
                                    <span>Assigned SM</span>
                                </label>
                                <select name="assigned_sm_id" id="assigned_sm_id" class="form-control select2">
                                    <option value="">Select SM</option>
                                    @foreach($sms as $sm)
                                        <option value="{{ $sm->id }}">
                                            {{ $sm->name ?? ($sm->first_name . ' ' . $sm->last_name) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="p-3 bg-light rounded d-flex align-items-center">
                                    <div class="me-4 text-center">
                                        <div class="small text-muted">LSR</div>
                                        <div class="fw-bold" id="lsr_name_display">Unassigned</div>
                                    </div>
                                    <div class="me-4"><i class="fa-solid fa-arrow-right text-muted"></i></div>
                                    <div class="me-4 text-center">
                                        <div class="small text-muted">Assigned TM</div>
                                        <div class="fw-bold" id="tm_name_display">N/A</div>
                                    </div>
                                    <div class="me-4"><i class="fa-solid fa-arrow-right text-muted"></i></div>
                                    <div class="text-center">
                                        <div class="small text-muted">Assigned SM</div>
                                        <div class="fw-bold" id="sm_name_display">N/A</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="text-right mt-4">
                            <p class="small text-muted mb-2">Saving Basic Information will create the outlet and allow
                                further configuration.</p>
                            <button type="submit" class="btn btn-primary px-4">Save Basic Information</button>
                        </div>
                    </form>
                </div>

                <!-- Tab 2: Workflow Config -->
                <div class="tab-pane fade" id="workflow" role="tabpanel">
                    <form class="section-form" data-section="workflow" action="{{ route('horeca.outlets.store') }}"
                        method="POST">
                        @csrf
                        <input type="hidden" name="section" value="workflow">
                        <div class="row mb-4">
                            <div class="col-md-12">
                                <label class="form-label">Workflow Template <span class="text-danger">*</span></label>
                                <select name="workflow_group_template_id" id="workflow_template_id_create"
                                    class="form-control select2" required>
                                    <option value="">Select Template</option>
                                    @foreach($templates as $template)
                                        <option value="{{ $template->id }}">{{ $template->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="form-section-title">Workflow Customization</h5>
                                <div id="workflow_customization_container">
                                    <div class="p-4 bg-light rounded text-center">
                                        <p class="text-muted mb-0">Select a template above to customize
                                            individual workflows.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="p-4 bg-light rounded text-center">
                                    <i class="fa-solid fa-info-circle fa-2x mb-3 text-muted"></i>
                                    <h5>Workflow Preview</h5>
                                    <p class="text-muted small">The assigned workflows will be listed here after you save
                                        the outlet.</p>
                                </div>
                            </div>
                        </div>
                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4">Save Workflow Configuration</button>
                        </div>
                    </form>
                </div>

                <!-- Tab 3: Brand Config -->
                <div class="tab-pane fade" id="brand" role="tabpanel">
                    <form class="section-form" data-section="brand">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="form-section-title">Must Have Base</h5>
                                <select name="must_have_brands[]" class="form-control select2" multiple>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6">
                                <h5 class="form-section-title">Optional Brands</h5>
                                <select name="optional_brands[]" class="form-control select2" multiple>
                                    @foreach($brands as $brand)
                                        <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <div class="mt-4 pt-3 border-top">
                            <h5 class="form-section-title">Drive Brand</h5>
                            <div class="row">
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">Drive Brand</label>
                                    <select name="drive_brands[]" class="form-control select2" multiple>
                                        @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label class="form-label fw-bold">NPD Brand</label>
                                    <select name="npd_brands[]" class="form-control select2" multiple>
                                        @foreach($brands as $brand)
                                            <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="alert alert-info">
                                    <i class="fa-solid fa-circle-info me-2"></i>
                                    <strong>Must-have brands</strong> will trigger alerts if reported unavailable during a
                                    visit.
                                </div>
                            </div>
                        </div>
                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4">Save Brand Configuration</button>
                        </div>
                    </form>
                </div>

                <!-- Tab 4: POSM Norm Config -->
                <div class="tab-pane fade" id="posm" role="tabpanel">
                    <form class="section-form" data-section="posm_norms" action="{{ route('horeca.outlets.store') }}"
                        method="POST">
                        @csrf
                        <input type="hidden" name="section" value="posm_norms">

                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="form-section-title d-flex justify-content-between align-items-center">
                                    POSM Norms Assignment
                                    @can('HoReCa POSM Norms create')
                                        <a href="{{ route('posm.norms.create') }}" data-toggle="tooltip"
                                            title="Create Template">
                                            <i
                                                class="fa-regular fa-plus fixed-nav-btn fixed-nav-btn-active p-1 d-inline-flex align-items-center justify-content-center mb-1"></i>
                                        </a>
                                    @endcan
                                </h5>

                                <div class="alert alert-soft-info border-0 small mb-4">
                                    <i class="fa-solid fa-circle-info me-2"></i> Assign POSM norms template based on outlet
                                    type and size.
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">POSM Norms Template</label>
                                    <select name="posm_norm_template_id" class="form-control select2"
                                        id="posm_template_select">
                                        <option value="">Select template... ▾</option>
                                        @foreach($posmTemplates as $pt)
                                            <option value="{{ $pt->id }}">
                                                {{ $pt->name }} |
                                                {{ implode(', ', array_map('ucfirst', $pt->outlet_types ?? [])) }} |
                                                {{ $pt->items_count ?? $pt->items->count() }} Products
                                            </option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="mb-3">
                                    <div class="custom-control custom-checkbox">
                                        <input type="checkbox" class="custom-control-input" id="useCustomPosmNorms"
                                            name="use_custom_posm_norms" value="1">
                                        <label class="custom-control-label fw-bold" for="useCustomPosmNorms">Use custom
                                            norms for this outlet</label>
                                    </div>
                                    <div class="alert alert-warning small mt-2 py-2 d-none" id="custom-norms-warning">
                                        <i class="fa-solid fa-triangle-exclamation me-1"></i>
                                        Custom norms will override template for this outlet only.
                                    </div>
                                </div>
                            </div>

                            <!-- Template Preview -->
                            <div class="col-md-6">
                                <div class="card border-0 shadow-none" style="background: #f8fbff; min-height: 200px;">
                                    <div class="card-body">
                                        <h6 class="fw-bold mb-3" style="color: #435e9c;">
                                            <i class="fa-solid fa-layer-group me-1"></i> Template Preview
                                        </h6>
                                        <div id="posm_template_preview">
                                            <div class="text-center text-muted py-5">
                                                <p class="small mb-0">Select a template to see details.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div id="custom_norms_section" class="mt-5 d-none">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <h5 class="form-section-title mb-0 border-0">Custom POSM Norms</h5>
                                <div class="d-flex gap-2">
                                    <button type="button" class="btn btn-sm btn-outline-secondary me-2" id="bulkImportBtn"
                                        data-toggle="modal" data-target="#bulkImportModal">
                                        <i class="fa-solid fa-file-import me-1"></i> Bulk Import
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning" id="addCustomNorm">
                                        <i class="fa-solid fa-plus me-1"></i> Add Product Line
                                    </button>
                                </div>
                            </div>
                            <div class="table-responsive">
                                <table class="table table-bordered bg-white shadow-sm" id="customNormsTable">
                                    <thead style="background-color: #f8fafd;">
                                        <tr class="extra-small text-uppercase">
                                            <th>PRODUCT</th>
                                            <th style="width: 120px;">QTY</th>
                                            <th style="width: 120px;">MIN QTY</th>
                                            <th style="width: 120px;">MAX QTY</th>
                                            <th style="width: 120px;" class="text-center">MUST HAVE</th>
                                            <th style="width: 150px;">DEVIATION</th>
                                            <th style="width: 50px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="empty-norms-row">
                                            <td colspan="6" class="text-center text-muted p-4">
                                                <i class="fa-solid fa-clipboard-list fa-2x mb-2 d-block opacity-25"></i>
                                                No custom norms defined. Click "Add Product Line" to start.
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="text-right mt-4 pt-3 border-top">
                            <button type="submit" class="btn btn-primary px-4">Save POSM Configuration</button>
                        </div>
                    </form>
                </div>

                <!-- Tab 5: Equipment & Materials -->
                <div class="tab-pane fade" id="equipment" role="tabpanel">
                    <form class="section-form" data-section="equipment">
                        <div class="d-flex justify-content-between align-items-center mb-3">
                            <h5 class="form-section-title mb-0 border-0">Coolers</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addCooler">
                                <i class="fa-solid fa-plus me-1"></i> Add Cooler
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="coolersTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 40%">Type</th>
                                        <th style="width: 20%">Quantity</th>
                                        <th style="width: 35%">Serial Numbers</th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="empty-row">
                                        <td colspan="4" class="text-center text-muted">No coolers added.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
                            <h5 class="form-section-title mb-0 border-0">Branding Materials</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addBranding">
                                <i class="fa-solid fa-plus me-1"></i> Add Material
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="brandingTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 70%">Type / Name</th>
                                        <th style="width: 25%">Quantity</th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="empty-row">
                                        <td colspan="3" class="text-center text-muted">No branding materials added.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-3 mt-4">
                            <h5 class="form-section-title mb-0 border-0">Pouring Materials</h5>
                            <button type="button" class="btn btn-sm btn-outline-primary" id="addPouring">
                                <i class="fa-solid fa-plus me-1"></i> Add Material
                            </button>
                        </div>
                        <div class="table-responsive">
                            <table class="table table-bordered" id="pouringTable">
                                <thead class="bg-light">
                                    <tr>
                                        <th style="width: 70%">Type / Name</th>
                                        <th style="width: 25%">Quantity</th>
                                        <th style="width: 5%"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="empty-row">
                                        <td colspan="3" class="text-center text-muted">No pouring materials added.</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4">Save Equipment & Materials</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

<!-- Bulk Import Modal -->
<div class="modal fade" id="bulkImportModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 12px;">
            <div class="modal-header border-0 pb-0 shadow-none">
                <h5 class="modal-title fw-bold" style="color: #50649c;">Bulk Import Products & Norms</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="bulkImportForm">
                @csrf
                <div class="modal-body p-4">
                    <div class="text-center mb-4 p-3 rounded"
                        style="background-color: #f8f9fa; border: 1px dashed #ced4da;">
                        <p class="small text-muted mb-2">Download the template to see the required format</p>
                        <a href="{{ asset('files/norm_products_import_template.xlsx') }}" download
                            class="btn btn-sm btn-outline-secondary">
                            <i class="fa-solid fa-download me-1"></i> Download Template Excel
                        </a>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Select Excel File <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="file" id="import_file" name="import_file" class="form-control"
                                accept=".xlsx, .xls" required>
                        </div>
                        <div class="extra-small text-muted mt-2">
                            <i class="fa-solid fa-circle-info me-1 text-info"></i> Only .xlsx file supported.
                        </div>
                    </div>

                    <div id="importErrors" class="alert alert-danger d-none small">
                        <ul class="mb-0 ps-3"></ul>
                    </div>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-link text-muted text-decoration-none"
                        data-dismiss="modal">Cancel</button>
                    <button type="submit" id="processImportBtn" class="btn btn-primary px-4"
                        style="background-color: #50649c; border-color: #50649c; border-radius: 8px;">
                        Upload & Import
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('js')
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script>
        $(document).ready(function () {
            $('.select2').select2({ width: '100%', placeholder: "Select option", allowClear: true });
            // Brand mutually exclusive validation
            const brandSelects = [
                'select[name="must_have_brands[]"]',
                'select[name="optional_brands[]"]'
            ];

            $(brandSelects.join(', ')).on('change', function () {
                const selector = $(this).attr('name');
                const currentVal = $(this).val() || [];

                brandSelects.forEach(otherSelector => {
                    if ($(otherSelector).attr('name') === selector) return;

                    const otherSelect = $(otherSelector);
                    const otherVal = otherSelect.val() || [];
                    const intersection = currentVal.filter(value => otherVal.includes(value));

                    if (intersection.length > 0) {
                        const newVal = currentVal.filter(value => !intersection.includes(value));
                        $(this).val(newVal).trigger('change.select2');

                        const otherName = $(otherSelector).attr('name') === 'must_have_brands[]' 
                            ? 'Must Have Base' 
                            : 'Optional Brand';

                        $.toast({
                            heading: 'Selection Warning',
                            text: `This brand is already selected as ${otherName}`,
                            position: 'top-right',
                            bgColor: '#ffc107',
                            loaderBg: '#343a40',
                            icon: 'warning',
                            hideAfter: 4000,
                            stack: 6
                        });
                    }
                });
            });

            // Map logic
            let previewMap, previewMarker, modalMap, modalMarker;
            const defaultLat = 6.9271, defaultLng = 79.8612;

            function initPreviewMap() {
                if (typeof L === 'undefined') return;
                const lat = parseFloat($('#lat').val()) || defaultLat, lng = parseFloat($('#lng').val()) || defaultLng;
                if (!previewMap) {
                    previewMap = L.map('map-preview').setView([lat, lng], 13);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(previewMap);
                    previewMarker = L.marker([lat, lng]).addTo(previewMap);
                } else {
                    previewMap.setView([lat, lng]);
                    previewMarker.setLatLng([lat, lng]);
                }
            }

            function initModalMap() {
                if (typeof L === 'undefined') return;
                const lat = parseFloat($('#lat').val()) || defaultLat, lng = parseFloat($('#lng').val()) || defaultLng;
                if (!modalMap) {
                    modalMap = L.map('modal-map').setView([lat, lng], 13);
                    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(modalMap);
                    modalMarker = L.marker([lat, lng], { draggable: true }).addTo(modalMap);
                    modalMap.on('click', e => modalMarker.setLatLng(e.latlng));
                }
                setTimeout(() => {
                    modalMap.invalidateSize();
                    modalMap.setView([lat, lng]);
                    modalMarker.setLatLng([lat, lng]);
                }, 200);
            }

            initPreviewMap();
            $('#lat, #lng').on('input', initPreviewMap);
            $('#mapModal').on('shown.bs.modal', initModalMap);
            $('#confirmLocation').click(() => {
                const pos = modalMarker.getLatLng();
                $('#lat').val(pos.lat.toFixed(6));
                $('#lng').val(pos.lng.toFixed(6));
                initPreviewMap();
                $('#mapModal').modal('hide');
            });

            // Search in map logic
            function searchLocation() {
                const query = $('#map-search').val();
                const $error = $('#search-error');

                $error.addClass('d-none');

                if (query && typeof modalMap !== 'undefined') {
                    fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${query}`)
                        .then(response => response.json())
                        .then(data => {
                            if (data.length > 0) {
                                const lat = parseFloat(data[0].lat);
                                const lon = parseFloat(data[0].lon);
                                modalMap.setView([lat, lon], 15);
                                modalMarker.setLatLng([lat, lon]);
                            } else {
                                $error.removeClass('d-none');
                                setTimeout(() => $error.addClass('d-none'), 5000); // Hide after 5 seconds
                            }
                        })
                        .catch(error => {
                            console.error('Error searching location:', error);
                            $error.removeClass('d-none').find('small').text('Error searching. Please try again or pick manually.');
                        });
                }
            }

            $('#map-search').on('keypress', function (e) {
                if (e.which == 13) {
                    e.preventDefault();
                    searchLocation();
                }
            });

            $('#btn-map-search').on('click', function () {
                searchLocation();
            });

            // Territory/Region
            $('#territory_id').on('change', function () {
                const mapping = @json($territories->mapWithKeys(fn($t) => [$t->id => $t->region_id]));
                const regionId = mapping[$(this).val()];
                if (regionId) $('#region_id').val(regionId).trigger('change');
            });

            // LSR Hierarchy
            function updateLsrHierarchy() {
                const lsrId = $('#assigned_lsr_id').val();
                const lsrName = $('#assigned_lsr_id').find('option:selected').text();

                if (!lsrId) {
                    $('#lsr_name_display').text('Unassigned');
                    $('#tm_name_display').text('N/A');
                    $('#sm_name_display').text('N/A');
                    return;
                }

                $('#lsr_name_display').text(lsrName);

                $.get(`{{ route('horeca.outlets.lsr-hierarchy', '') }}/${lsrId}`, function (response) {
                    if (response.success) {
                        $('#tm_name_display').text(response.tm ? response.tm.name : 'N/A');
                        $('#sm_name_display').text(response.sm ? response.sm.name : 'N/A');

                        if (response.tm) {
                            $('#assigned_tm_id').val(response.tm.id).trigger('change');
                        } else {
                            $('#assigned_tm_id').val('').trigger('change');
                        }

                        if (response.sm) {
                            $('#assigned_sm_id').val(response.sm.id).trigger('change');
                        } else {
                            $('#assigned_sm_id').val('').trigger('change');
                        }
                    }
                });
            }

            $('#assigned_lsr_id').on('change', updateLsrHierarchy);

            // Update display names when TM/SM changed manually
            $('#assigned_tm_id').on('change', function () {
                const name = $(this).find('option:selected').text();
                $('#tm_name_display').text($(this).val() ? name : 'N/A');
            });

            $('#assigned_sm_id').on('change', function () {
                const name = $(this).find('option:selected').text();
                $('#sm_name_display').text($(this).val() ? name : 'N/A');
            });

            // Initial trigger if values are pre-selected
            if ($('#assigned_lsr_id').val()) updateLsrHierarchy();

            // Equipment logic
            let equipIndex = 0;
            $('#addCooler').click(() => {
                $('#coolersTable .empty-row').remove();
                $('#coolersTable tbody').append(`
                                                                                                                                                                                                                                        <tr>
                                                                                                                                                                                                                                            <td>
                                                                                                                                                                                                                                                <input type="hidden" name="equipment[${equipIndex}][type]" value="cooler">
                                                                                                                                                                                                                                                <select name="equipment[${equipIndex}][name]" class="form-control">
                                                                                                                                                                                                                                                    <option value="Single Door">Single Door</option>
                                                                                                                                                                                                                                                    <option value="Double Door">Double Door</option>
                                                                                                                                                                                                                                                    <option value="Table Top">Table Top</option>
                                                                                                                                                                                                                                                </select>
                                                                                                                                                                                                                                            </td>
                                                                                                                                                                                                                                            <td><input type="number" name="equipment[${equipIndex}][quantity]" class="form-control" value="1" min="1"></td>
                                                                                                                                                                                                                                            <td><textarea name="equipment[${equipIndex}][serials]" class="form-control" rows="1"></textarea></td>
                                                                                                                                                                                                                                            <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa fa-trash"></i></button></td>
                                                                                                                                                                                                                                        </tr>
                                                                                                                                                                                                                                    `);
                equipIndex++;
            });
            $(document).on('click', '.remove-row', function () { $(this).closest('tr').remove(); });

            $('#addBranding').click(() => {
                $('#brandingTable .empty-row').remove();
                $('#brandingTable tbody').append(`
                                                                                                                                                                                                    <tr>
                                                                                                                                                                                                        <td>
                                                                                                                                                                                                            <input type="hidden" name="equipment[${equipIndex}][type]" value="branding_material">
                                                                                                                                                                                                            <input type="text" name="equipment[${equipIndex}][name]" class="form-control" placeholder="e.g. Signage, Poster">
                                                                                                                                                                                                        </td>
                                                                                                                                                                                                        <td><input type="number" name="equipment[${equipIndex}][quantity]" class="form-control" value="1" min="1"></td>
                                                                                                                                                                                                        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa fa-trash"></i></button></td>
                                                                                                                                                                                                    </tr>
                                                                                                                                                                                                `);
                equipIndex++;
            });

            $('#addPouring').click(() => {
                $('#pouringTable .empty-row').remove();
                $('#pouringTable tbody').append(`
                                                                                                                                                                                                    <tr>
                                                                                                                                                                                                        <td>
                                                                                                                                                                                                            <input type="hidden" name="equipment[${equipIndex}][type]" value="pouring_material">
                                                                                                                                                                                                            <input type="text" name="equipment[${equipIndex}][name]" class="form-control" placeholder="e.g. Glassware, Opener">
                                                                                                                                                                                                        </td>
                                                                                                                                                                                                        <td><input type="number" name="equipment[${equipIndex}][quantity]" class="form-control" value="1" min="1"></td>
                                                                                                                                                                                                        <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i class="fa fa-trash"></i></button></td>
                                                                                                                                                                                                    </tr>
                                                                                                                                                                                                `);
                equipIndex++;
            });

            // Template Change AJAX for Create
            $('#workflow_template_id_create').on('change', function () {
                const templateId = $(this).val();
                const $container = $('#workflow').find('.p-4.bg-light.rounded.text-center');
                const $custContainer = $('#workflow_customization_container');

                if (!templateId) {
                    $custContainer.html('<div class="p-4 bg-light rounded text-center"><p class="text-muted mb-0">Select a template to customize individual workflows.</p></div>');
                    return;
                }

                $custContainer.html('<div class="text-center p-4"><i class="fa fa-spinner fa-spin fa-2x text-muted"></i></div>');

                $.get(`{{ url('horeca/workflow-templates') }}/${templateId}/preview`, function (response) {
                    if (response.success) {
                        // Update Preview Side
                        let previewHtml = '<i class="fa-solid fa-info-circle fa-2x mb-3 text-muted"></i><h5>Workflow Preview</h5><div class="list-group text-left">';
                        response.workflows.forEach(wf => {
                            let iconHtml = (wf.icon && wf.icon.startsWith('fa-'))
                                ? `<i class="${wf.icon} me-4 text-primary"></i>`
                                : `<div class="me-4 text-primary d-inline-block" style="width: 32px; text-align: center;"><span style="font-size: 1.1rem;">${wf.icon || '🔄'}</span></div>`;

                            previewHtml += `
                                                                                                                                                                                                                                <div class="list-group-item d-flex align-items-center">
                                                                                                                                                                                                                                    ${iconHtml}
                                                                                                                                                                                                                                    <div class="ms-3">
                                                                                                                                                                                                                                        <div class="fw-bold">${wf.name}</div>
                                                                                                                                                                                                                                        <div class="small text-muted">${wf.steps_count} steps • ${wf.is_mandatory ? 'Mandatory' : 'Optional'}</div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                </div>`;
                        });
                        previewHtml += '</div>';
                        $container.html(previewHtml);

                        // Update Customization Table (Accordion Style)
                        let custHtml = '<div class="accordion" id="workflowAccordion">';
                        response.workflows.forEach(wf => {
                            let stepsHtml = '';
                            wf.steps.forEach((step, index) => {
                                stepsHtml += `
                                                                                                                                                                                                                                    <div class="d-flex align-items-center justify-content-between p-2 mb-2 bg-white rounded border-sm">
                                                                                                                                                                                                                                        <div class="d-flex align-items-center">
                                                                                                                                                                                                                                            <span class="badge bg-light text-dark border me-2">${index + 1}</span>
                                                                                                                                                                                                                                            <span class="small">${step.name}</span>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                        <div class="custom-control custom-switch">
                                                                                                                                                                                                                                            <input type="checkbox" name="customizations[${wf.id}][steps][${step.id}]" 
                                                                                                                                                                                                                                                   class="custom-control-input" 
                                                                                                                                                                                                                                                   id="step_custom_${step.id}" 
                                                                                                                                                                                                                                                   checked>
                                                                                                                                                                                                                                            <label class="custom-control-label" for="step_custom_${step.id}"></label>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>`;
                            });

                            let iconHtml = (wf.icon && wf.icon.startsWith('fa-'))
                                ? `<i class="${wf.icon} me-4 text-primary fa-lg"></i>`
                                : `<div class="me-4 text-primary d-inline-block" style="width: 32px; text-align: center;"><span style="font-size: 1.25rem;">${wf.icon || '🔄'}</span></div>`;

                            custHtml += `
                                                                                                                                                                                                                                <div class="card mb-3 border shadow-sm">
                                                                                                                                                                                                                                    <div class="card-header bg-white d-flex align-items-center justify-content-between py-2" id="heading${wf.id}">
                                                                                                                                                                                                                                        <div class="d-flex align-items-center">
                                                                                                                                                                                                                                            ${iconHtml}
                                                                                                                                                                                                                                            <div class="ms-3">
                                                                                                                                                                                                                                                <h6 class="mb-0 fw-bold">${wf.name}</h6>
                                                                                                                                                                                                                                                <small class="text-muted">${wf.is_mandatory ? 'Mandatory' : 'Optional'}</small>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                        <div class="d-flex align-items-center">
                                                                                                                                                                                                                                            <div class="custom-control custom-switch me-3">
                                                                                                                                                                                                                                                <input type="checkbox" name="customizations[${wf.id}][is_enabled]" 
                                                                                                                                                                                                                                                       class="custom-control-input workflow-toggle" 
                                                                                                                                                                                                                                                       id="custom_wf_${wf.id}" 
                                                                                                                                                                                                                                                       checked>
                                                                                                                                                                                                                                                <label class="custom-control-label" for="custom_wf_${wf.id}"></label>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            <button class="btn btn-sm btn-light border" type="button" data-toggle="collapse" data-target="#collapse${wf.id}">
                                                                                                                                                                                                                                                <i class="fa fa-chevron-down"></i>
                                                                                                                                                                                                                                            </button>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                    <div id="collapse${wf.id}" class="collapse show" data-parent="#workflowAccordion">
                                                                                                                                                                                                                                        <div class="card-body bg-light">
                                                                                                                                                                                                                                            <div class="d-flex justify-content-between align-items-center mb-3">
                                                                                                                                                                                                                                                <h6 class="mb-0 fw-bold text-muted small uppercase">Customize Steps</h6>
                                                                                                                                                                                                                                                <button type="button" class="btn btn-xs btn-outline-primary" onclick="openAddCustomStepModal(${wf.id})">
                                                                                                                                                                                                                                                    <i class="fa fa-plus me-1"></i> Add Custom Step
                                                                                                                                                                                                                                                </button>
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                            <div class="steps-list" id="steps_list_${wf.id}">
                                                                                                                                                                                                                                                ${stepsHtml}
                                                                                                                                                                                                                                            </div>
                                                                                                                                                                                                                                        </div>
                                                                                                                                                                                                                                    </div>
                                                                                                                                                                                                                                </div>`;
                        });
                        custHtml += '</div>';
                        $custContainer.html(custHtml);
                    }
                });
            });

            window.openAddCustomStepModal = function (workflowId) {
                $('#custom_step_workflow_id').val(workflowId);
                $('#addCustomStepForm')[0].reset();
                $('#modal_char_count').text('0');
                $('#modal_selection_details').show();
                $('#modal_options_container').addClass('d-none');
                $('#modal_options_list').empty();
                $('#modal_photo_container').addClass('d-none');
                $('#modal_photo_count').val(1);
                $('#modal_sr_settings').addClass('d-none');
                $('.custom-file-label').removeClass("selected").html("Choose file");

                $('#modal_step_instructions').summernote({
                    placeholder: 'Provide extra guidance for the agent...',
                    tabsize: 2,
                    height: 150,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['view', ['fullscreen']]
                    ]
                });
                $('#modal_step_instructions').summernote('code', '');

                $('#addCustomStepModal').modal('show');
            };

            $('#btnSaveCustomStep').on('click', function () {
                const workflowId = $('#custom_step_workflow_id').val();
                const $form = $('#addCustomStepForm');
                const name = $form.find('input[name="name"]').val();
                if (!name) {
                    $.toast({ heading: 'Required', text: 'Enter step name', icon: 'warning', position: 'top-right' });
                    return;
                }

                const qType = $form.find('input[name="question_type"]:checked').val();
                const sType = $form.find('input[name="selection_type"]:checked').val();
                const description = $form.find('textarea[name="description"]').val();
                const instructions = $('#modal_step_instructions').summernote('code');
                const mandatory = $('#modal_mandatory').is(':checked');
                const remarks = $('#modal_remarks').is(':checked');
                const photo = $('#modal_require_photo').is(':checked');
                const photoCount = $('#modal_photo_count').val();
                const triggerSr = $('#modal_trigger_sr').is(':checked');
                const triggerValue = $form.find('[name="trigger_value"]').val();
                const srCat = $form.find('select[name="service_request_category_id"]').val();
                const srTemplate = $form.find('select[name="service_request_template_id"]').val();

                const opts = [];
                if (qType === 'selection' && (sType === 'single_select' || sType === 'multi_select')) {
                    $('#modal_options_list .modal-option-item').each(function() {
                        const t = $(this).find('.modal-option-text-input').val();
                        const v = $(this).find('.modal-option-value-input').val();
                        if (t && v) opts.push({ text: t, value: v });
                    });
                }

                const timestamp = Date.now();
                const stepCount = $(`#steps_list_${workflowId} .d-flex`).length + 1;
                const stepHtml = `
                    <div class="d-flex align-items-center justify-content-between p-2 mb-2 bg-white rounded border-sm animate__animated animate__fadeIn">
                        <div class="d-flex align-items-center">
                            <span class="badge bg-light text-dark border me-2">${stepCount}</span>
                            <div>
                                <div class="small fw-bold text-dark">${name}</div>
                                <div class="x-small text-muted text-uppercase">${qType === 'selection' ? sType : (qType === 'mhb_brand' ? 'MHB Brand?' : 'Text Area')} • ${mandatory ? 'Mandatory' : 'Optional'}</div>
                            </div>
                        </div>
                        <div class="d-flex align-items-center">
                            <div class="custom-control custom-switch me-3">
                                <input type="checkbox" name="customizations[${workflowId}][custom_steps][${timestamp}][is_enabled]" 
                                       class="custom-control-input" id="step_custom_new_${timestamp}" checked>
                                <label class="custom-control-label" for="step_custom_new_${timestamp}"></label>
                            </div>
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][name]" value="${name}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][description]" value="${description}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][instructions]" value="${instructions.replace(/"/g, '&quot;')}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][question_type]" value="${qType === 'selection' ? sType : (qType === 'mhb_brand' ? 'mhb_brand' : 'text')}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][selection_type]" value="${sType}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][is_mandatory]" value="${mandatory ? 1 : 0}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][allow_remarks]" value="${remarks ? 1 : 0}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][require_photo]" value="${photo ? 1 : 0}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][photo_count]" value="${photoCount}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][trigger_sr]" value="${triggerSr ? 1 : 0}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][trigger_value]" value="${triggerValue}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][service_request_category_id]" value="${srCat}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][service_request_template_id]" value="${srTemplate}">
                            <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][options]" value='${JSON.stringify(opts)}'>
                            <button type="button" class="btn btn-sm btn-link text-danger remove-step-row p-0 ms-2"><i class="fa fa-trash-alt"></i></button>
                        </div>
                    </div>`;

                $(`#steps_list_${workflowId}`).append(stepHtml);
                
                const $btn = $(this);
                const origText = $btn.text();
                $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Saving...');

                // Collect data from all sections to satisfy backend validation
                const allData = new FormData();
                $('.section-form').each(function () {
                    const sectionData = new FormData(this);
                    for (let [key, value] of sectionData.entries()) {
                        if (key === '_token' || key === 'section') continue;
                        allData.append(key, value);
                    }
                });
                allData.append('_token', '{{ csrf_token() }}');
                allData.append('section', 'workflow'); // Signal current section status

                // Include sample photo from modal
                const sampleFile = $('#modal_sample_photo')[0].files[0];
                if (sampleFile) {
                    allData.append(`customizations[${workflowId}][custom_steps][${timestamp}][sample_photo]`, sampleFile);
                }

                $.ajax({
                    url: '{{ route("horeca.outlets.store") }}',
                    method: 'POST',
                    data: allData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success && response.redirect) {
                            $('#addCustomStepModal').modal('hide');
                            $.toast({
                                heading: 'Success',
                                text: 'Outlet created and step persisted. Redirecting...',
                                icon: 'success',
                                position: 'top-right'
                            });
                            setTimeout(() => { window.location.href = response.redirect; }, 1000);
                        }
                    },
                    error: function (xhr) {
                        let msg = 'Error saving section';
                        if (xhr.status === 422) {
                            msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                        } else if (xhr.responseJSON && xhr.responseJSON.message) {
                            msg = xhr.responseJSON.message;
                        }
                        Swal.fire('Error', msg, 'error');
                    },
                    complete: function () {
                        $btn.prop('disabled', false).text(origText);
                    }
                });
            });

            // Handle additional controls
            $('input[name="question_type"]').on('change', function () {
                $('#modal_selection_details').toggleClass('d-none', $(this).val() !== 'selection');
                updateModalTriggerValueDropdown();
            });

            $('input[name="selection_type"]').on('change', function () {
                const isChoice = $(this).val() === 'single_select' || $(this).val() === 'multi_select';
                $('#modal_options_container').toggleClass('d-none', !isChoice);
                if (isChoice && $('#modal_options_list .modal-option-item').length === 0) $('.add-modal-option-btn').click();
                updateModalTriggerValueDropdown();
            });

            $(document).on('click', '.add-modal-option-btn', function () {
                const $list = $('#modal_options_list');
                const idx = $list.find('.modal-option-item').length;
                $list.append(`
                    <div class="modal-option-item d-flex align-items-center mb-2">
                        <input type="text" name="options[${idx}][text]" class="form-control form-control-sm me-2 modal-option-text-input" placeholder="Label">
                        <input type="text" name="options[${idx}][value]" class="form-control form-control-sm me-2 modal-option-value-input" placeholder="Value">
                        <button type="button" class="btn btn-sm text-danger remove-modal-option-btn border-0 p-0"><i class="fa-solid fa-circle-minus"></i></button>
                    </div>`);
            });

            $(document).on('click', '.remove-modal-option-btn', function () {
                $(this).closest('.modal-option-item').remove();
                updateModalTriggerValueDropdown();
            });

            $(document).on('input', '.modal-option-text-input', function () {
                const $item = $(this).closest('.modal-option-item');
                const $valInput = $item.find('.modal-option-value-input');
                if (!$valInput.data('user-edited')) {
                    $valInput.val($(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '_'));
                    updateModalTriggerValueDropdown();
                }
            });

            $('#modal_trigger_sr').on('change', function () {
                $('#modal_sr_settings').toggleClass('d-none', !$(this).is(':checked'));
                updateModalTriggerValueDropdown();
            });

            $('#modal_require_photo').on('change', function () {
                $('#modal_photo_container').toggleClass('d-none', !$(this).is(':checked'));
            });

            $('#modal_sr_cat').on('change', function() {
                const categoryId = $(this).val();
                const $templateSelect = $('#modal_sr_template');
                $templateSelect.empty().append('<option value="">Loading...</option>');
                
                if (!categoryId) {
                    $templateSelect.empty().append('<option value="">-- Select Template --</option>');
                    return;
                }

                $.get(`{{ url('horeca/api/service-request-templates') }}/${categoryId}`, function(response) {
                    $templateSelect.empty().append('<option value="">-- Select Template --</option>');
                    if (Array.isArray(response)) {
                        response.forEach(template => {
                            $templateSelect.append(`<option value="${template.id}">${template.name}</option>`);
                        });
                    }
                });
            });

            function updateModalTriggerValueDropdown() {
                const $container = $('#modal_trigger_value_container');
                const qType = $('input[name="question_type"]:checked').val();
                const sType = $('input[name="selection_type"]:checked').val();
                const currentValue = $container.find('[name="trigger_value"]').val();
                const isTriggerEnabled = $('#modal_trigger_sr').is(':checked');

                if (qType === 'selection') {
                    let opts = `<option value="">Select</option>`;
                    if (sType === 'yes_no') {
                        opts += `<option value="yes" ${currentValue === 'yes' ? 'selected' : ''}>Yes</option>`;
                        opts += `<option value="no" ${currentValue === 'no' ? 'selected' : ''}>No</option>`;
                    } else {
                        $('#modal_options_list .modal-option-item').each(function() {
                            const t = $(this).find('.modal-option-text-input').val();
                            const v = $(this).find('.modal-option-value-input').val();
                            if (t && v) opts += `<option value="${v}" ${currentValue === v ? 'selected' : ''}>${t}</option>`;
                        });
                    }
                    $container.html(`<select name="trigger_value" class="form-control form-control-sm" ${isTriggerEnabled ? 'required' : ''}>${opts}</select>`);
                } else {
                    $container.html(`<input type="text" name="trigger_value" class="form-control form-control-sm" value="${currentValue || ''}" placeholder="Enter trigger answer" ${isTriggerEnabled ? 'required' : ''}>`);
                }
            }

            $(document).on('click', '.remove-step-row', function () {
                $(this).closest('.d-flex').parent().remove();
            });

            // "Save All" logic for Create
            $('#saveAllBtn').on('click', function () {
                const $btn = $(this);
                const origHtml = $btn.html();
                $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin fixed-nav-btn fixed-nav-btn-active rounded-5 p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>');

                const allData = new FormData();
                $('.section-form').each(function () {
                    const formData = new FormData(this);
                    for (let [key, value] of formData.entries()) {
                        if (key === '_token' || key === 'section') continue;
                        allData.append(key, value);
                    }
                });
                allData.append('_token', '{{ csrf_token() }}');

                $.ajax({
                    url: '{{ route("horeca.outlets.store") }}',
                    method: 'POST',
                    data: allData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success && response.redirect) {
                            window.location.href = response.redirect;
                        }
                    },
                    error: function (xhr) {
                        let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Error creating outlet';
                        if (xhr.status === 422) msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                        Swal.fire('Error', msg, 'error');
                        $btn.prop('disabled', false).html(origHtml);
                    }
                });
            });

            // Section forms submission (Tab-wise)
            $('.section-form').on('submit', function (e) {
                e.preventDefault();
                const $btn = $(this).find('button[type="submit"]');
                const origText = $btn.text();
                $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-1"></i> Saving...');

                const formData = new FormData(this);

                $.ajax({
                    url: '{{ route("horeca.outlets.store") }}',
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success && response.redirect) {
                            $.toast({
                                heading: 'Success',
                                text: 'Outlet created successfully. Redirecting...',
                                icon: 'success',
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                loaderBg: '#ecf0f1'
                            });
                            setTimeout(() => { window.location.href = response.redirect; }, 1000);
                        }
                    },
                    error: function (xhr) {
                        let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Error saving section';
                        if (xhr.status === 422) {
                            const errors = xhr.responseJSON.errors;
                            msg = Object.values(errors).flat().join('<br>');
                        }
                        Swal.fire('Error', msg, 'error');
                        $btn.prop('disabled', false).html(origText);
                    }
                });
            });

            // POSM Template Preview
            $('select[name="posm_norm_template_id"]').on('change', function () {
                const templateId = $(this).val();
                const $container = $('#posm_template_preview');

                if (!templateId) {
                    $container.html('<div class="text-center text-muted py-5"><p class="small mb-0">Select a template to see details.</p></div>');
                    return;
                }

                $container.html('<div class="text-center p-3 py-5"><i class="fa fa-spinner fa-spin text-muted"></i></div>');

                $.get(`{{ url('posm/norms') }}/${templateId}/preview`, function (response) {
                    if (response.success) {
                        const template = response.template;
                        let itemsHtml = `
                                <p class="small mb-2 text-primary"><strong>Applicable Types:</strong> 
                                    ${template.outlet_types ? template.outlet_types.map(t => t.charAt(0).toUpperCase() + t.slice(1)).join(', ') : 'None'}
                                </p>
                                <div class="table-responsive">
                                    <table class="table table-sm bg-white rounded shadow-sm border-0 mb-0">
                                        <thead class="bg-light sticky-top">
                                            <tr class="extra-small">
                                                <th>PRODUCT NAME</th>
                                                <th class="text-center">MIN QTY</th>
                                                <th class="text-center">MAX QTY</th>
                                                <th class="text-center">MUST HAVE</th>
                                            </tr>
                                        </thead>
                                        <tbody>`;

                        if (template.items && template.items.length > 0) {
                            template.items.forEach(item => {
                                itemsHtml += `
                                        <tr class="extra-small">
                                            <td>${item.product ? item.product.name : 'Unknown'}</td>
                                            <td class="text-center fw-bold text-muted">${item.min_quantity}</td>
                                            <td class="text-center fw-bold text-muted">${item.max_quantity}</td>
                                            <td class="text-center">
                                                ${item.must_have ? '<i class="fa-solid fa-check text-success"></i>' : '<span class="text-muted">—</span>'}
                                            </td>
                                        </tr>`;
                            });
                        } else {
                            itemsHtml += '<tr><td colspan="4" class="text-center small text-muted">No items in this template</td></tr>';
                        }

                        itemsHtml += `</tbody></table></div>`;
                        $container.html(itemsHtml);
                    }
                }).fail(function () {
                    $container.html('<p class="text-danger small">Error loading preview.</p>');
                });
            });

            // Region & Territory AJAX Submission
            $('#regionForm').on('submit', function (e) {
                e.preventDefault();
                const formData = $(this).serialize();
                $.post('{{ route("horeca.regions.store") }}', formData)
                    .done(function (response) {
                        if (response.success) {
                            $('#regionModal').modal('hide');
                            $('#regionForm')[0].reset();

                            // Refresh Region dropdowns
                            const $regionSelects = $('select[name="region_id"]');
                            $regionSelects.empty().append('<option value="">Select Region</option>');
                            response.all.forEach(region => {
                                $regionSelects.append(`<option value="${region.id}">${region.name}</option>`);
                            });

                            // Set the newly created region as selected
                            $('#region_id').val(response.data.id).trigger('change');

                            $.toast({
                                heading: 'Success',
                                text: 'Region added successfully',
                                icon: 'success',
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                loaderBg: '#ecf0f1'
                            });
                        }
                    })
                    .fail(function (xhr) {
                        const error = xhr.responseJSON.message || 'Error saving region';
                        Swal.fire('Error', error, 'error');
                    });
            });

            $('#territoryForm').on('submit', function (e) {
                e.preventDefault();
                const formData = $(this).serialize();
                $.post('{{ route("horeca.territories.store") }}', formData)
                    .done(function (response) {
                        if (response.success) {
                            $('#territoryModal').modal('hide');
                            $('#territoryForm')[0].reset();

                            // Refresh Territory dropdown
                            const $territorySelect = $('#territory_id');
                            $territorySelect.empty().append('<option value="">Select Territory</option>');
                            response.all.forEach(territory => {
                                $territorySelect.append(`<option value="${territory.id}">${territory.name}</option>`);
                            });

                            // Set the newly created territory as selected
                            $('#territory_id').val(response.data.id).trigger('change');

                            $.toast({
                                heading: 'Success',
                                text: 'Territory added successfully',
                                icon: 'success',
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                loaderBg: '#ecf0f1'
                            });
                        }
                    })
                    .fail(function (xhr) {
                        const error = xhr.responseJSON.message || 'Error saving territory';
                        Swal.fire('Error', error, 'error');
                    });
            });

            // Handle Custom POSM Norms toggle
            $('#useCustomPosmNorms').on('change', function () {
                const checked = $(this).is(':checked');
                if (checked) {
                    $('#custom_norms_section').removeClass('d-none');
                    $('#custom-norms-warning').removeClass('d-none');
                    $('#posm_template_preview').addClass('opacity-50');
                } else {
                    $('#custom_norms_section').addClass('d-none');
                    $('#custom-norms-warning').addClass('d-none');
                    $('#posm_template_preview').removeClass('opacity-50');
                }
            });

            let normIndex = 0;
            // Posm Products for the dynamic rows
            const posmProducts = @json($posmProducts ?? []);

            $('#addCustomNorm').click(() => {
                $('#customNormsTable .empty-norms-row').remove();

                let productOptions = '<option value="">Select Product...</option>';
                posmProducts.forEach(p => {
                    if (p) productOptions += `<option value="${p.id}">${p.name} (${p.code})</option>`;
                });

                $('#customNormsTable tbody').append(`
                        <tr>
                            <td>
                                <select name="posm_norms[${normIndex}][product_id]" class="form-control select2-dynamic">
                                    ${productOptions}
                                </select>
                            </td>
                            <td><input type="number" name="posm_norms[${normIndex}][qty]" class="form-control qty-input" value="0" min="0" required></td>
                            <td><input type="number" name="posm_norms[${normIndex}][min_quantity]" class="form-control min-input" value="0" readonly></td>
                            <td><input type="number" name="posm_norms[${normIndex}][max_quantity]" class="form-control max-input" value="10" readonly></td>
                            <td class="text-center">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="norm_must_have_${normIndex}" name="posm_norms[${normIndex}][must_have]" value="1">
                                    <label class="custom-control-label" for="norm_must_have_${normIndex}"></label>
                                </div>
                            </td>
                            <td>
                                <select name="posm_norms[${normIndex}][deviation_tolerance]" class="form-control">
                                    <option value="None">None</option>
                                    <option value="±5%">±5%</option>
                                    <option value="±10%" selected>±10%</option>
                                    <option value="±1 unit">±1 unit</option>
                                    <option value="±2 units">±2 units</option>
                                </select>
                            </td>
                            <td class="text-center">
                                <button type="button" class="btn btn-sm btn-outline-danger remove-norm-row">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </td>
                        </tr>
                    `);

                $('.select2-dynamic').select2({ width: '100%' });
                normIndex++;
            });

            $(document).on('click', '.remove-norm-row', function () {
                $(this).closest('tr').remove();
                if ($('#customNormsTable tbody tr').length === 0) {
                    $('#customNormsTable tbody').append(`
                            <tr class="empty-norms-row">
                                <td colspan="6" class="text-center text-muted p-4">
                                    <i class="fa-solid fa-clipboard-list fa-2x mb-2 d-block opacity-25"></i>
                                    No custom norms defined. Click "Add Product Line" to start.
                                </td>
                            </tr>
                        `);
                }
            });

            // Dynamic calculations for custom norms row min/max
            function updateCustomNormRowMinMax(row) {
                const qtyInput = row.find('.qty-input');
                const minInput = row.find('.min-input');
                const maxInput = row.find('.max-input');
                const deviationSelect = row.find('select[name$="[deviation_tolerance]"]');

                const qtyVal = parseInt(qtyInput.val());
                if (isNaN(qtyVal) || qtyVal < 0) {
                    minInput.val('');
                    maxInput.val('');
                    return;
                }

                const deviation = deviationSelect.val();
                let deviationFlat = 0;
                if (deviation === '±5%') {
                    deviationFlat = 5;
                } else if (deviation === '±10%') {
                    deviationFlat = 10;
                } else if (deviation === '±1 unit') {
                    deviationFlat = 1;
                } else if (deviation === '±2 units') {
                    deviationFlat = 2;
                }

                minInput.val(Math.max(0, qtyVal - deviationFlat));
                maxInput.val(qtyVal + deviationFlat);
            }

            // Prevent negative keypresses and handle negative validation
            $(document).on('keypress', '#customNormsTable .qty-input', function(e) {
                if (e.which === 45) { // minus sign
                    e.preventDefault();
                }
            });

            $(document).on('input change', '#customNormsTable .qty-input', function() {
                let val = $(this).val();
                if (val && parseFloat(val) < 0) {
                    $(this).val(0);
                }
            });

            $(document).on('input change', '#customNormsTable .qty-input, #customNormsTable select[name$="[deviation_tolerance]"]', function() {
                const row = $(this).closest('tr');
                updateCustomNormRowMinMax(row);
            });

            $('#bulkImportForm').on('submit', function (e) {
                e.preventDefault();

                const $btn = $('#processImportBtn');
                const origText = $btn.html();
                $btn.prop('disabled', true).html('<i class="fa-solid fa-spinner fa-spin me-1"></i> Processing...');
                $('#importErrors').addClass('d-none').find('ul').empty();

                const formData = new FormData(this);

                $.ajax({
                    url: "{{ route('posm.norms.import.validate') }}",
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success && response.products) {
                            $('#customNormsTable .empty-norms-row').remove();

                            response.products.forEach(p => {
                                // Check if product already exists in current table
                                let exists = false;
                                $('select[name^="posm_norms"][name$="[product_id]"]').each(function () {
                                    if ($(this).val() == p.product_id) {
                                        exists = true;
                                        return false;
                                    }
                                });

                                if (!exists) {
                                    let productOptions = `<option value="${p.product_id}" selected>${p.name} (${p.sku})</option>`;
                                    posmProducts.forEach(prod => {
                                        if (prod && prod.id != p.product_id) {
                                            productOptions += `<option value="${prod.id}">${prod.name} (${prod.code})</option>`;
                                        }
                                    });

                                    $('#customNormsTable tbody').append(`
                                            <tr>
                                                <td>
                                                    <select name="posm_norms[${normIndex}][product_id]" class="form-control select2-dynamic">
                                                        ${productOptions}
                                                    </select>
                                                </td>
                                                <td><input type="number" name="posm_norms[${normIndex}][qty]" class="form-control qty-input" value="${p.qty}" min="0" required></td>
                                                <td><input type="number" name="posm_norms[${normIndex}][min_quantity]" class="form-control min-input" value="${p.min_quantity}" readonly></td>
                                                <td><input type="number" name="posm_norms[${normIndex}][max_quantity]" class="form-control max-input" value="${p.max_quantity}" readonly></td>
                                                <td class="text-center">
                                                    <div class="custom-control custom-checkbox">
                                                        <input type="checkbox" class="custom-control-input" id="norm_must_have_${normIndex}_new" name="posm_norms[${normIndex}][must_have]" value="1" ${p.must_have ? 'checked' : ''}>
                                                        <label class="custom-control-label" for="norm_must_have_${normIndex}_new"></label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <select name="posm_norms[${normIndex}][deviation_tolerance]" class="form-control">
                                                        <option value="None" ${p.deviation_tolerance === 'None' ? 'selected' : ''}>None</option>
                                                        <option value="±5%" ${p.deviation_tolerance === '±5%' ? 'selected' : ''}>±5%</option>
                                                        <option value="±10%" ${p.deviation_tolerance === '±10%' ? 'selected' : ''}>±10%</option>
                                                        <option value="±1 unit" ${p.deviation_tolerance === '±1 unit' ? 'selected' : ''}>±1 unit</option>
                                                        <option value="±2 units" ${p.deviation_tolerance === '±2 units' ? 'selected' : ''}>±2 units</option>
                                                    </select>
                                                </td>
                                                <td class="text-center">
                                                    <button type="button" class="btn btn-sm btn-outline-danger remove-norm-row">
                                                        <i class="fa fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                        `);

                                    $('.select2-dynamic').select2({ width: '100%' });
                                    normIndex++;
                                }
                            });

                            $('#bulkImportModal').modal('hide');
                            $('#bulkImportForm')[0].reset();

                            $.toast({
                                heading: 'Import Successful',
                                text: `Imported norms for ${response.products.length} products.`,
                                icon: 'success',
                                position: 'top-right',
                                bgColor: '#1ecab8',
                                loaderBg: '#ecf0f1'
                            });
                        }
                        $btn.prop('disabled', false).html(origText);
                    },
                    error: function (xhr) {
                        $btn.prop('disabled', false).html(origText);
                        $('#importErrors').removeClass('d-none');
                        if (xhr.status === 422 && xhr.responseJSON.errors) {
                            xhr.responseJSON.errors.forEach(err => {
                                $('#importErrors ul').append(`<li>${err}</li>`);
                            });
                        } else {
                            $('#importErrors ul').append(`<li>${xhr.responseJSON.message || 'Error processing import'}</li>`);
                        }
                    }
                });
            });

            // End of script

        });
    </script>
@endpush