@extends('layouts.app')
@section('title', 'Edit 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">
    <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 {
            height: 4px;
        }

        .nav-tabs::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 10px;
        }

        .nav-tabs::-webkit-scrollbar-track {
            background: transparent;
        }

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

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

        /* Timeline Badge Styles */
        .bg-soft-success { background-color: rgba(40, 167, 69, 0.1) !important; }
        .bg-soft-secondary { background-color: rgba(108, 117, 125, 0.1) !important; }
        .bg-soft-primary { background-color: rgba(0, 123, 255, 0.1) !important; }
        .bg-soft-warning { background-color: rgba(255, 193, 7, 0.1) !important; }
        .bg-soft-danger { background-color: rgba(220, 53, 69, 0.1) !important; }

        .timeline-item .ms-3 {
            transition: all 0.2s ease;
        }

        .timeline-item:hover .ms-3 {
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
            background-color: #fff !important;
        }

        @media (min-width: 768px) {
            .border-right-md {
                border-right: 1px solid #eee !important;
            }
        }

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

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

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

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

        /* 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;
        }

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

        /* Modal specific 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;
        }

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

        /* Activity Filter Styling */
        .activity-filter {
            border: none !important;
            border-bottom: 2px solid transparent !important;
            border-radius: 0 !important;
            padding-bottom: 8px !important;
            color: #888 !important;
            text-decoration: none !important;
            font-weight: 500 !important;
            transition: all 0.3s ease;
        }

        .activity-filter.active {
            color: #dc3545 !important;
            /* Red color as per user requirement/image */
            border-bottom-color: #dc3545 !important;
            font-weight: 700 !important;
        }

        .activity-filter: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>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
@endpush

@section('content')
    <!-- Map Modal -->
    <div class="modal fade" id="mapModal" tabindex="-1" role="dialog" aria-labelledby="mapModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mapModalLabel">Pick Location on Map</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&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 class="mt-2 small text-muted">
                        Click on the map to place a marker or drag the marker to adjust the position.
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="confirmLocation">Confirm Location</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Region Modal -->
    <div class="modal fade" id="regionModal" tabindex="-1" role="dialog" aria-labelledby="regionModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="regionModalLabel">Add New Region</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&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-labelledby="territoryModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="territoryModalLabel">Add New Territory</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&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>

    <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">Edit</li>
                </ol>
            </nav>
            <div class="fw-semibold mt-1">Edit Outlet: {{ $outlet->name }}</div>
        </div>
        <div class="d-flex align-items-center">
            <a href="{{ route('horeca.outlets.create') }}" data-toggle="tooltip" title="Add">
                <i class="fa-regular fa-plus fixed-nav-btn p-1 d-inline-flex align-items-center justify-content-center mx-1"></i>
            </a>

            <button type="button" id="saveAllBtn" 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 All Data"></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 NORM 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>
                <li class="nav-item">
                    <a class="nav-link" id="history-tab" data-toggle="tab" href="#history" role="tab">
                        <span class="step-number">6.</span> HISTORY
                    </a>
                </li>
            </ul>

            <div class="tab-content p-4" id="outletTabsContent">
                @if($outlet->status === 'draft')
                    <div id="draftAlert" class="alert alert-warning mb-4 shadow-sm border-0 p-3"
                        style="border-left: 4px solid #FABB1E !important; background-color: #fff9e6;">
                        <div class="d-flex align-items-center mb-1">
                            <i class="fa-solid fa-circle-info fs-4 me-3 text-warning" style="margin-top: 6px;"></i>
                            <h6 class="mb-0 fw-bold">&nbsp;Draft Status</h6>
                        </div>
                        <div class="ps-4 ms-2">
                            <p class="mb-0 small">This outlet is currently in draft mode. Please complete <strong>Step 02:
                                    Workflow Config</strong> to activate it and make it available for field activities.</p>
                        </div>
                    </div>
                @endif
                <!-- Tab 1: Basic Information -->
                <div class="tab-pane fade show active" id="basic" role="tabpanel">
                    <form class="section-form" data-section="basic">
                        @csrf
                        @method('PUT')
                        <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" value="{{ $outlet->rt_code }}"
                                        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
                                        value="{{ $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="restaurant" {{ $outlet->outlet_type == 'restaurant' ? 'selected' : '' }}>Restaurant</option>
                                        <option value="hotel" {{ $outlet->outlet_type == 'hotel' ? 'selected' : '' }}>Hotel
                                        </option>
                                        <option value="cafe" {{ $outlet->outlet_type == 'cafe' ? 'selected' : '' }}>Café
                                        </option>
                                        <option value="bar" {{ $outlet->outlet_type == 'bar' ? 'selected' : '' }}>Bar</option>
                                        <option value="other" {{ $outlet->outlet_type == 'other' ? 'selected' : '' }}>Other
                                        </option>
                                    </select>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">Visit Frequency</label>
                                    <input type="number" name="visit_frequency" class="form-control"
                                        value="{{ $outlet->visit_frequency }}" 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 }}" {{ $outlet->distribution_point_id == $warehouse->id ? 'selected' : '' }}>
                                                {{ $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"
                                            value="{{ $outlet->contact_phone }}">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">Contact Email</label>
                                        <input type="email" name="contact_email" class="form-control"
                                            value="{{ $outlet->contact_email }}">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="custom-control custom-switch">
                                        <input type="checkbox" class="custom-control-input" id="statusSwitch" name="status"
                                            {{ $outlet->status == 'active' ? 'checked' : '' }}>
                                        <label class="custom-control-label" for="statusSwitch">Active Status</label>
                                    </div>
                                </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>{{ $outlet->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
                                            value="{{ $outlet->latitude }}">
                                    </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
                                            value="{{ $outlet->longitude }}">
                                    </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 }}" {{ $outlet->territory_id == $territory->id ? 'selected' : '' }}>{{ $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 }}" {{ $outlet->region_id == $region->id ? 'selected' : '' }}>{{ $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 }}" {{ $outlet->assigned_lsr_id == $lsr->id ? 'selected' : '' }}>{{ $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 }}" {{ $outlet->assigned_tm_id == $tm->id ? 'selected' : '' }}>
                                            {{ $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 }}" {{ $outlet->assigned_sm_id == $sm->id ? 'selected' : '' }}>
                                            {{ $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">{{ $outlet->lsr->name ?? '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">{{ $outlet->tm->name ?? '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">{{ $outlet->sm->name ?? 'N/A' }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right mt-4">
                            <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">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="section" value="workflow">
                        <div class="row mb-4">
                            <div class="col-md-6">
                                <h5 class="form-section-title">Workflow Template <span class="text-danger">*</span></h5>
                                <select name="workflow_group_template_id" id="workflow_template_id_select"
                                    class="form-control select2" required>
                                    <option value="">Select Template</option>
                                    @foreach($templates as $template)
                                        <option value="{{ $template->id }}" {{ $outlet->workflow_group_template_id == $template->id ? 'selected' : '' }}>
                                            {{ $template->name }}
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted d-block mt-1">Changing the template will reset any ongoing
                                    workflows for this outlet.</small>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="form-section-title">Workflow Customization</h5>
                                <div id="workflow_customization_container">
                                    @if($outlet->template)
                                        <div class="accordion" id="workflowAccordion">
                                            @foreach($outlet->template->workflows as $wf)
                                                @php
                                                    $customization = $outlet->customizations->where('workflow_id', $wf->id)->first();
                                                    $isEnabled = $customization ? $customization->is_enabled : true;
                                                @endphp
                                                <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">
                                                            <div class="me-4 text-primary" style="width: 32px; text-align: center;">
                                                                @if(str_starts_with($wf->icon ?: '', 'fa-'))
                                                                    <i class="{{ $wf->icon }} fa-lg"></i>
                                                                @else
                                                                    <span style="font-size: 1.25rem;">{{ $wf->icon ?: '🔄' }}</span>
                                                                @endif
                                                            </div>
                                                            <div class="ms-3">
                                                                <h6 class="mb-0 fw-bold">{{ $wf->name }}</h6>
                                                                <small
                                                                    class="text-muted">{{ $wf->pivot->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 }}" {{ $isEnabled ? '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 {{ $isEnabled ? '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 }}">
                                                                @foreach($wf->steps as $step)
                                                                    @php
                                                                        $stepCustomization = $customization ? $customization->steps->where('step_id', $step->id)->first() : null;
                                                                        $isStepEnabled = $stepCustomization ? $stepCustomization->is_enabled : true;
                                                                    @endphp
                                                                    <div class="d-flex align-items-center justify-content-between p-2 mb-2 bg-white rounded border-sm shadow-sm">
                                                                        <div class="d-flex align-items-center">
                                                                            <span class="badge bg-light text-dark border me-2">{{ $loop->iteration }}</span>
                                                                            <span class="small fw-bold text-dark">{{ $step->name }}</span>
                                                                        </div>
                                                                        <div class="custom-control custom-switch me-3">
                                                                            <input type="checkbox"
                                                                                name="customizations[{{ $wf->id }}][steps][{{ $step->id }}]"
                                                                                class="custom-control-input"
                                                                                id="step_custom_{{ $step->id }}" {{ $isStepEnabled ? 'checked' : '' }}>
                                                                            <label class="custom-control-label"
                                                                                for="step_custom_{{ $step->id }}"></label>
                                                                        </div>
                                                                    </div>
                                                                @endforeach

                                                                @if($customization)
                                                                    @foreach($customization->steps->where('is_custom', true) as $customStep)
                                                                        <div class="d-flex align-items-center justify-content-between p-2 mb-2 bg-white rounded border-sm shadow-sm animate__animated animate__fadeIn">
                                                                            <div class="d-flex align-items-center">
                                                                                <span class="badge bg-light text-dark border me-2">{{ $loop->iteration + $wf->steps->count() }}</span>
                                                                                <div>
                                                                                    <div class="small fw-bold text-dark">{{ $customStep->name }}</div>
                                                                                    <div class="x-small text-muted text-uppercase">{{ $customStep->question_type }} • {{ $customStep->is_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[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][is_enabled]" 
                                                                                           class="custom-control-input" 
                                                                                           id="step_custom_saved_{{ $customStep->id }}" {{ $customStep->is_enabled ? 'checked' : '' }}>
                                                                                    <label class="custom-control-label" for="step_custom_saved_{{ $customStep->id }}"></label>
                                                                                </div>
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][name]" value="{{ $customStep->name }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][description]" value="{{ $customStep->description }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][instructions]" value="{{ $customStep->instructions }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][question_type]" value="{{ $customStep->question_type }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][is_mandatory]" value="{{ $customStep->is_mandatory ? 1 : 0 }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][allow_remarks]" value="{{ $customStep->allow_remarks ? 1 : 0 }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][require_photo]" value="{{ $customStep->require_photo ? 1 : 0 }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][photo_count]" value="{{ $customStep->photo_count }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][trigger_sr]" value="{{ $customStep->trigger_sr ? 1 : 0 }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][trigger_value]" value="{{ $customStep->trigger_value }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][service_request_category_id]" value="{{ $customStep->service_request_category_id }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][service_request_template_id]" value="{{ $customStep->service_request_template_id }}">
                                                                                <input type="hidden" name="customizations[{{ $wf->id }}][custom_steps][{{ $customStep->id }}][options]" value='{{ json_encode($customStep->skip_reasons) }}'>
                                                                                
                                                                                <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>
                                                                    @endforeach
                                                                @endif
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <div class="p-4 bg-light rounded text-center">
                                            <p class="text-muted mb-0">Select a template and save to customize individual
                                                workflows.</p>
                                        </div>
                                    @endif
                                </div>
                            </div>
                            <div class="col-md-6">
                                <h5 class="form-section-title">Workflow Preview</h5>
                                <div id="workflow_preview_container">
                                    <div id="workflow_preview_content">
                                        @if($outlet->template)
                                            <div class="list-group">
                                                @foreach($outlet->template->workflows as $wf)
                                                    <div class="list-group-item d-flex align-items-center">
                                                        <div class="me-4 text-primary" style="width: 32px; text-align: center;">
                                                            @if(str_starts_with($wf->icon ?: '', 'fa-'))
                                                                <i class="{{ $wf->icon }}"></i>
                                                            @else
                                                                <span style="font-size: 1.1rem;">{{ $wf->icon ?: '🔄' }}</span>
                                                            @endif
                                                        </div>
                                                        <div class="ms-3">
                                                            <div class="fw-bold">{{ $wf->name }}</div>
                                                            <div class="small text-muted">{{ $wf->steps()->count() }} steps •
                                                                {{ $wf->pivot->is_mandatory ? 'Mandatory' : 'Optional' }}
                                                            </div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @else
                                            <div class="text-muted">No template assigned.</div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4">Save Workflow Customization</button>
                        </div>
                    </form>
                </div>

                <!-- Tab 3: Brand Config -->
                <div class="tab-pane fade" id="brand" role="tabpanel">
                    <form class="section-form" data-section="brand">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="section" value="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 }}" {{ $outlet->brands->where('id', $brand->id)->where('pivot.is_must_have', true)->count() ? 'selected' : '' }}>
                                            {{ $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 }}" {{ $outlet->brands->where('id', $brand->id)->where('pivot.is_optional', true)->count() ? 'selected' : '' }}>
                                            {{ $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 }}" {{ $outlet->brands->where('id', $brand->id)->where('pivot.is_drive_brand', true)->count() ? 'selected' : '' }}>
                                                {{ $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 }}" {{ $outlet->brands->where('id', $brand->id)->where('pivot.is_npd_brand', true)->count() ? 'selected' : '' }}>
                                                {{ $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">
                        @csrf
                        @method('PUT')
                        <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 }}" {{ $outlet->posm_norm_template_id == $pt->id ? 'selected' : '' }}>
                                                {{ $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" {{ $outlet->use_custom_posm_norms ? 'checked' : '' }}>
                                        <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 {{ $outlet->use_custom_posm_norms ? '' : '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" class="{{ $outlet->use_custom_posm_norms ? 'opacity-50' : '' }}">
                                            @if($outlet->posmTemplate)
                                                <p class="small mb-2 text-primary"><strong>Applicable Types:</strong> 
                                                    {{ implode(', ', array_map('ucfirst', $outlet->posmTemplate->outlet_types ?? [])) }}
                                                </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>
                                                            @foreach($outlet->posmTemplate->items as $item)
                                                                <tr class="extra-small">
                                                                    <td>{{ $item->product->name ?? 'Deleted Product' }}</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">
                                                                        @if($item->must_have)
                                                                            <i class="fa-solid fa-check text-success"></i>
                                                                        @else
                                                                            <span class="text-muted">—</span>
                                                                        @endif
                                                                    </td>
                                                                </tr>
                                                            @endforeach
                                                        </tbody>
                                                    </table>
                                                </div>
                                            @else
                                                <div class="text-center text-muted py-5">
                                                    <p class="small mb-0">Select a template to see details.</p>
                                                </div>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div id="custom_norms_section" class="mt-5 {{ $outlet->use_custom_posm_norms ? '' : '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>
                                        @php $normIdx = 0; @endphp
                                        @forelse($outlet->posmNorms as $norm)
                                            <tr>
                                                <td>
                                                    <select name="posm_norms[{{ $normIdx }}][product_id]"
                                                        class="form-control select2">
                                                        @foreach($posmProducts ?? [] as $product)
                                                            @if(is_object($product))
                                                                <option value="{{ $product->id }}" {{ $norm->product_id == $product->id ? 'selected' : '' }}>
                                                                    {{ $product->name }} ({{ $product->code }})
                                                                </option>
                                                            @endif
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><input type="number" name="posm_norms[{{ $normIdx }}][qty]"
                                                        class="form-control qty-input" value="{{ $norm->qty > 0 ? $norm->qty : round(($norm->min_quantity + $norm->max_quantity) / 2) }}" min="0" required></td>
                                                <td><input type="number" name="posm_norms[{{ $normIdx }}][min_quantity]"
                                                        class="form-control min-input" value="{{ $norm->min_quantity }}" readonly></td>
                                                <td><input type="number" name="posm_norms[{{ $normIdx }}][max_quantity]"
                                                        class="form-control max-input" value="{{ $norm->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_{{ $normIdx }}"
                                                            name="posm_norms[{{ $normIdx }}][must_have]" value="1" {{ $norm->must_have ? 'checked' : '' }}>
                                                        <label class="custom-control-label"
                                                            for="norm_must_have_{{ $normIdx }}"></label>
                                                    </div>
                                                </td>
                                                <td>
                                                    <select name="posm_norms[{{ $normIdx }}][deviation_tolerance]"
                                                        class="form-control">
                                                        <option value="None" {{ ($norm->deviation_tolerance ?? '±10%') == 'None' ? 'selected' : '' }}>None</option>
                                                        <option value="±5%" {{ ($norm->deviation_tolerance ?? '±10%') == '±5%' ? 'selected' : '' }}>±5%</option>
                                                        <option value="±10%" {{ ($norm->deviation_tolerance ?? '±10%') == '±10%' ? 'selected' : '' }}>±10%</option>
                                                        <option value="±1 unit" {{ ($norm->deviation_tolerance ?? '±10%') == '±1 unit' ? 'selected' : '' }}>±1 unit</option>
                                                        <option value="±2 units" {{ ($norm->deviation_tolerance ?? '±10%') == '±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>
                                            @php $normIdx++; @endphp
                                        @empty
                                            <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>
                                        @endforelse
                                    </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 Norm 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">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="section" value="equipment">
                        <div class="mb-4">
                            <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>Type</th>
                                            <th>Quantity</th>
                                            <th>Serial Numbers</th>
                                            <th style="width: 50px;"></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @php $equipIdx = 0; @endphp
                                        @forelse($outlet->equipment->where('equipment_type', 'cooler') as $item)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="equipment[{{ $equipIdx }}][type]" value="cooler">
                                                    <select name="equipment[{{ $equipIdx }}][name]" class="form-control">
                                                        <option value="Single Door" {{ $item->equipment_name == 'Single Door' ? 'selected' : '' }}>Single Door</option>
                                                        <option value="Double Door" {{ $item->equipment_name == 'Double Door' ? 'selected' : '' }}>Double Door</option>
                                                        <option value="Table Top" {{ $item->equipment_name == 'Table Top' ? 'selected' : '' }}>Table Top</option>
                                                    </select>
                                                </td>
                                                <td><input type="number" name="equipment[{{ $equipIdx }}][quantity]"
                                                        class="form-control" value="{{ $item->quantity }}" min="1"></td>
                                                <td><textarea name="equipment[{{ $equipIdx }}][serials]" class="form-control"
                                                        rows="1">{{ is_array($item->serial_numbers) ? implode("\n", $item->serial_numbers) : $item->serial_numbers }}</textarea>
                                                </td>
                                                <td><button type="button" class="btn btn-sm btn-outline-danger remove-row"><i
                                                            class="fa fa-trash"></i></button></td>
                                            </tr>
                                            @php $equipIdx++; @endphp
                                        @empty
                                            <tr class="empty-row">
                                                <td colspan="4" class="text-center text-muted">No coolers added.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <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>
                                        @forelse($outlet->equipment->where('equipment_type', 'branding_material') as $item)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="equipment[{{ $equipIdx }}][type]"
                                                        value="branding_material">
                                                    <input type="text" name="equipment[{{ $equipIdx }}][name]"
                                                        class="form-control" value="{{ $item->equipment_name }}">
                                                </td>
                                                <td><input type="number" name="equipment[{{ $equipIdx }}][quantity]"
                                                        class="form-control" value="{{ $item->quantity }}" 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>
                                            @php $equipIdx++; @endphp
                                        @empty
                                            <tr class="empty-row">
                                                <td colspan="3" class="text-center text-muted">No branding materials added.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <div class="mb-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <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>
                                        @forelse($outlet->equipment->where('equipment_type', 'pouring_material') as $item)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="equipment[{{ $equipIdx }}][type]"
                                                        value="pouring_material">
                                                    <input type="text" name="equipment[{{ $equipIdx }}][name]"
                                                        class="form-control" value="{{ $item->equipment_name }}">
                                                </td>
                                                <td><input type="number" name="equipment[{{ $equipIdx }}][quantity]"
                                                        class="form-control" value="{{ $item->quantity }}" 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>

                                            @php $equipIdx++; @endphp
                                        @empty
                                            <tr class="empty-row">
                                                <td colspan="3" class="text-center text-muted">No pouring materials added.</td>
                                            </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="text-right mt-4">
                            <button type="submit" class="btn btn-primary px-4">Save Equipment & Materials</button>
                        </div>
                    </form>
                </div>

                <div class="tab-pane fade" id="history" role="tabpanel">
                    <div class="p-4">
                        {{-- Activity Filters --}}
                        <div class="d-flex justify-content-center mb-4 border-bottom pb-2">
                            <button class="btn btn-link nav-link activity-filter active px-4 mx-3" data-type="all">All
                                Activity</button>
                            <button class="btn btn-link nav-link activity-filter px-4 mx-3" data-type="visit">Visits
                                Only</button>
                            <button class="btn btn-link nav-link activity-filter px-4 mx-3" data-type="config">Config
                                Changes Only</button>
                            <button class="btn btn-link nav-link activity-filter px-4 mx-3"
                                data-type="service_request">Service Requests Only</button>
                        </div>

                        <div class="timeline">
                            @if($activities->count() == 0)
                                <div class="text-muted text-center py-5">
                                    <i class="fa-solid fa-clock-rotate-left fa-3x mb-3 text-secondary"></i>
                                    <p>No activity history available.</p>
                                </div>
                            @else
                                <div class="position-relative">
                                    <!-- Vertical Line -->
                                    <div class="position-absolute"
                                        style="top: 0; bottom: 0; left: 135px; width: 2px; background-color: #e9ecef;"></div>

                                    @foreach($activities as $activity)
                                        @php
                                            $itemType = $activity['type'];
                                            if (in_array($itemType, ['created', 'audit']))
                                                $itemType = 'config';
                                        @endphp
                                        <div class="d-flex mb-4 position-relative timeline-item" data-type="{{ $itemType }}">
                                            <!-- Date/Time -->
                                            <div class="text-end pe-4" style="width: 120px; min-width: 120px;">
                                                @if($activity['date'])
                                                    <div class="fw-bold text-dark">{{ $activity['date']->format('M d, Y') }}</div>
                                                    <div class="d-block small text-muted">{{ $activity['date']->format('h:i A') }}</div>
                                                @else
                                                    <div class="text-muted">N/A</div>
                                                @endif
                                            </div>

                                            <!-- Icon -->
                                            <div class="d-flex justify-content-center align-items-center rounded-circle border border-2 border-white shadow-sm bg-{{ $activity['color'] }} text-white"
                                                style="width: 32px; height: 32px; z-index: 2;">
                                                <i class="fa {{ $activity['icon'] }} fa-sm"></i>
                                            </div>

                                            <!-- Content -->
                                            <div class="ms-3 flex-grow-1 bg-light p-3 rounded position-relative">
                                                <!-- Arrow -->
                                                <div class="position-absolute bg-light"
                                                    style="width: 12px; height: 12px; transform: rotate(45deg); left: -6px; top: 10px;">
                                                </div>

                                                <div class="d-flex justify-content-between align-items-start mb-1">
                                                     <h6 class="mb-0 fw-bold text-dark">{{ $activity['title'] }}</h6>
                                                     @if(isset($activity['status']))
                                                         <span class="badge {{ str_contains(strtolower($activity['status']), 'complete') || str_contains(strtolower($activity['status']), 'resolve') || str_contains(strtolower($activity['status']), 'active') ? 'bg-soft-success text-success' : 'bg-soft-secondary text-secondary' }} border-0 px-2" style="font-size: 0.7rem;">
                                                             {{ $activity['status'] }}
                                                         </span>
                                                     @endif
                                                 </div>
                                                 <p class="text-secondary small mb-2">{{ $activity['description'] }}</p>
                                                 
                                                 @if(isset($activity['outcome_reason']) && $activity['outcome_reason'])
                                                     <div class="alert alert-light border p-2 mb-2 small text-muted">
                                                         <i class="fa-solid fa-comment-dots me-1"></i> {{ $activity['outcome_reason'] }}
                                                     </div>
                                                 @endif

                                                 {{-- Extra Details Grid --}}
                                                 <div class="row g-3 mb-2">
                                                     @if(isset($activity['check_in']))
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-right-to-bracket me-1 opacity-75"></i> Check-in</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['check_in'] }}</div>
                                                         </div>
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-right-from-bracket me-1 opacity-75"></i> Check-out</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['check_out'] ?? 'N/A' }}</div>
                                                         </div>
                                                     @endif
                                                     @if(isset($activity['category']))
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-tags me-1 opacity-75"></i> Category</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['category'] }}</div>
                                                         </div>
                                                     @endif
                                                     @if(isset($activity['assigned_to']))
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-user-gear me-1 opacity-75"></i> Assigned To</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['assigned_to'] }}</div>
                                                         </div>
                                                     @endif
                                                     @if(isset($activity['sla_due']))
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-hourglass-half me-1 opacity-75"></i> SLA Due Date</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['sla_due'] }}</div>
                                                         </div>
                                                     @endif
                                                     @if(isset($activity['scheduled']))
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-calendar-day me-1 opacity-75"></i> Scheduled Date</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['scheduled'] }}</div>
                                                         </div>
                                                         <div class="col-6 col-md-4">
                                                             <div class="small text-muted mb-0"><i class="fa-solid fa-calendar-check me-1 opacity-75"></i> Completed Date</div>
                                                             <div class="small fw-semibold text-dark">{{ $activity['completed'] }}</div>
                                                         </div>
                                                     @endif
                                                     
                                                     {{-- Specific Workflow Layout --}}
                                                     @if(isset($activity['started_at']))
                                                         <div class="col-12 mt-2">
                                                             <div class="bg-white border rounded-sm p-2" style="background-color: #fcfcfc !important;">
                                                                 <div class="row g-0">
                                                                     <div class="col-6 col-md-3 border-right-md px-2 mb-2 mb-md-0">
                                                                         <div class="x-small text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">Started</div>
                                                                         <div class="small fw-bold text-dark"><i class="fa-solid fa-play me-1 text-primary" style="font-size: 0.7rem;"></i> {{ $activity['started_at'] }}</div>
                                                                     </div>
                                                                     <div class="col-6 col-md-3 border-right-md px-2 mb-2 mb-md-0">
                                                                         <div class="x-small text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">Completed</div>
                                                                         <div class="small fw-bold text-dark"><i class="fa-solid fa-stop me-1 text-danger" style="font-size: 0.7rem;"></i> {{ $activity['completed_at'] }}</div>
                                                                     </div>
                                                                     <div class="col-6 col-md-3 border-right-md px-2">
                                                                         <div class="x-small text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">Duration</div>
                                                                         <div class="small fw-bold text-dark"><i class="fa-solid fa-clock me-1 text-info" style="font-size: 0.7rem;"></i> {{ $activity['duration'] }}</div>
                                                                     </div>
                                                                     <div class="col-6 col-md-3 px-2">
                                                                         <div class="x-small text-muted text-uppercase mb-1" style="font-size: 0.65rem; letter-spacing: 0.5px;">Progress</div>
                                                                         <div class="small fw-bold text-dark"><i class="fa-solid fa-list-check me-1 text-success" style="font-size: 0.7rem;"></i> {{ $activity['steps_completed'] }} steps</div>
                                                                     </div>
                                                                 </div>
                                                             </div>
                                                         </div>
                                                     @endif
                                                 </div>

                                                 <div class="d-flex align-items-center justify-content-between mt-2 pt-2 border-top">
                                                     <div class="d-flex align-items-center gap-3">
                                                         <div class="badge bg-white text-secondary border fw-normal">
                                                             <i class="fa fa-user me-1 text-muted"></i> {{ $activity['user'] }}
                                                         </div>
                                                         @if(isset($activity['priority']))
                                                             <div class="small text-muted">
                                                                 <i class="fa-solid fa-flag {{ strtolower($activity['priority']) == 'high' ? 'text-danger' : (strtolower($activity['priority']) == 'medium' ? 'text-warning' : 'text-info') }} me-1"></i>
                                                                 {{ $activity['priority'] }} Priority
                                                             </div>
                                                         @endif
                                                     </div>
                                                 </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            @endif
                        </div>

                        {{-- Pagination --}}
                        <div id="timelinePagination" class="d-flex justify-content-center mt-4 gap-2">
                            <!-- Pagination buttons will be injected by JS -->
                        </div>
                    </div>
                </div>
            </div>
        </div>



    <!-- 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') }}" 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>
@endsection

@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 });

                // Tab activation based on hash
                const hash = window.location.hash;
                if (hash) {
                    $(`.nav-tabs a[href="${hash}"]`).tab('show');
                }

                // Update hash on tab change
                $('.nav-tabs a').on('shown.bs.tab', function (e) {
                    // Only change content, no scroll or hash update as per request
                });

                // 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: '#FABB1E',
                                textColor: '#000000',
                                loaderBg: '#0b0b0b',
                                icon: 'warning',
                                hideAfter: 4000,
                                stack: 6
                            });
                        }
                    });
                });

                // Map Selection & Preview Logic
                let previewMap, previewMarker;
                let modalMap, modalMarker;
                const defaultLat = {{ $outlet->latitude ?? 6.9271 }};
                const defaultLng = {{ $outlet->longitude ?? 79.8612 }};

                function initPreviewMap() {
                    const lat = parseFloat($('#lat').val()) || defaultLat;
                    const 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() {
                    const lat = parseFloat($('#lat').val()) || defaultLat;
                    const 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', function (e) {
                            modalMarker.setLatLng(e.latlng);
                        });
                    } else {
                        setTimeout(() => {
                            modalMap.invalidateSize();
                            modalMap.setView([lat, lng]);
                            modalMarker.setLatLng([lat, lng]);
                        }, 200);
                    }
                }

                initPreviewMap();

                $('#lat, #lng').on('input', function () {
                    initPreviewMap();
                });

                $('#mapModal').on('shown.bs.modal', function () {
                    initModalMap();
                });

                $('#confirmLocation').click(function () {
                    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);
                                }
                            })
                            .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 interdependence
                $('#territory_id').on('change', function () {
                    const territoryId = $(this).val();
                    if (!territoryId) return;
                    @php
                        $territoryMapping = $territories->mapWithKeys(fn($t) => [$t->id => $t->region_id]);
                    @endphp
                    const mapping = @json($territoryMapping);
                    const regionId = mapping[territoryId];
                    if (regionId) {
                        $('#region_id').val(regionId).trigger('change.select2');
                    }
                });

                $('#assigned_lsr_id').on('change', function () {
                    const lsrId = $(this).val();
                    const lsrName = $(this).find('option:selected').text();
                    if (!lsrId) {
                        $('#lsr_name_display').text('Unassigned');
                        $('#tm_name_display').text('N/A');
                        $('#sm_name_display').text('N/A');
                        $('#assigned_tm_id').val('').trigger('change');
                        $('#assigned_sm_id').val('').trigger('change');
                        return;
                    }
                    $('#lsr_name_display').text(lsrName);
                    $.get(`{{ url('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_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');
                });

                // Template Change AJAX
                $('#workflow_template_id_select').on('change', function () {
                    const templateId = $(this).val();
                    const $container = $('#workflow_preview_content');
                    const $custContainer = $('#workflow_customization_container');

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

                    $container.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
                            let previewHtml = '<div class="list-group">';
                            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-4">
                                                                        <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);
                        }
                    });
                });

                // Handle Modal interactions
                $('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();
                });

                // Add Option in Modal
                $('.add-modal-option-btn').on('click', function () {
                    const $list = $('#modal_options_list');
                    const index = $list.find('.modal-option-item').length;
                    const html = `
                        <div class="modal-option-item d-flex align-items-center mb-2">
                            <input type="text" name="options[${index}][text]" class="form-control form-control-sm me-2 modal-option-text-input" placeholder="Option Label" required>
                            <input type="text" name="options[${index}][value]" class="form-control form-control-sm me-2 modal-option-value-input" placeholder="Value (Auto)" required>
                            <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>`;
                    $list.append(html);
                });

                $(document).on('click', '.remove-modal-option-btn', function () {
                    $(this).closest('.modal-option-item').remove();
                    updateModalTriggerValueDropdown();
                    
                    // Re-order indices
                    $('#modal_options_list .modal-option-item').each(function(idx) {
                        $(this).find('.modal-option-text-input').attr('name', `options[${idx}][text]`);
                        $(this).find('.modal-option-value-input').attr('name', `options[${idx}][value]`);
                    });
                });

                // Auto-slugify label to value
                $(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')) {
                        const val = $(this).val().toLowerCase().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
                        $valInput.val(val);
                        updateModalTriggerValueDropdown();
                    }
                });

                $(document).on('input', '.modal-option-value-input', function () { $(this).data('user-edited', true); 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'));
                });

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

                $('#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>`);
                            });
                        }
                    });
                });

                $('textarea[name="description"]').on('input', function() {
                    $('#modal_char_count').text($(this).val().length);
                });

                $('#modal_sample_photo').on('change', function() {
                    const fileName = $(this).val().split('\\').pop();
                    $(this).next('.custom-file-label').addClass("selected").html(fileName);
                });

                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 Field',
                            text: 'Please enter a step name',
                            icon: 'warning',
                            position: 'top-right'
                        });
                        return;
                    }

                    const type = $form.find('input[name="question_type"]:checked').val();
                    const selectionType = $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();

                    // Choice options collection
                    const options = [];
                    if (type === 'selection' && (selectionType === 'single_select' || selectionType === 'multi_select')) {
                        $('#modal_options_list .modal-option-item').each(function() {
                            const optText = $(this).find('.modal-option-text-input').val();
                            const optVal = $(this).find('.modal-option-value-input').val();
                            if (optText && optVal) {
                                options.push({ text: optText, value: optVal });
                            }
                        });
                    }

                    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 custom-step-row" data-temp-id="${timestamp}">
                            <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">${type === 'selection' ? selectionType : (type === '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="${type === 'selection' ? (selectionType || 'yes_no') : (type === 'mhb_brand' ? 'mhb_brand' : 'text')}">
                                <input type="hidden" name="customizations[${workflowId}][custom_steps][${timestamp}][selection_type]" value="${selectionType}">
                                <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(options)}'>
                                
                                <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...');

                    const $workflowForm = $('form.section-form[data-section="workflow"]');
                    const formData = new FormData($workflowForm[0]);
                    
                    // Manually append the sample photo for the new step since it's in the modal, not the form
                    const samplePhoto = $('#modal_sample_photo')[0].files[0];
                    if (samplePhoto) {
                        formData.append(`customizations[${workflowId}][custom_steps][${timestamp}][sample_photo]`, samplePhoto);
                    }

                    formData.append('section', 'workflow');
                    formData.append('_method', 'PUT');

                    $.ajax({
                        url: '{{ route("horeca.outlets.update-section", $outlet->id) }}',
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            if (response.success) {
                                $('#addCustomStepModal').modal('hide');
                                
                                // Sync real IDs returned from server for newly added steps
                                if (response.new_steps && response.new_steps.length > 0) {
                                    response.new_steps.forEach(function(step) {
                                        const $row = $(`.custom-step-row[data-temp-id="${step.temp_id}"]`);
                                        if ($row.length) {
                                            // Update all hidden inputs to use the real step ID as a standard step
                                            // and also update the inputs to match the 'steps' array structure
                                            const $checkbox = $row.find('input[type="checkbox"]');
                                            $checkbox.attr('name', `customizations[${step.workflow_id}][steps][${step.real_id}]`);
                                            $checkbox.attr('id', `step_custom_${step.real_id}`);
                                            $row.find('label.custom-control-label').attr('for', `step_custom_${step.real_id}`);
                                            
                                            // Remove the custom-step hidden inputs (since it's now a template step)
                                            $row.find('input[type="hidden"]').remove();
                                            
                                            // Remove the delete button (optional, but consistent with template steps)
                                            // $row.find('.remove-step-row').remove();
                                            
                                            // Remove the data-temp-id attribute
                                            $row.removeAttr('data-temp-id');
                                            $row.removeClass('custom-step-row');
                                        }
                                    });
                                }

                                $.toast({
                                    heading: 'Success',
                                    text: response.message || 'Workflow step saved and persisted',
                                    icon: 'success',
                                    position: 'top-right'
                                });
                            }
                        },
                        error: function (xhr) {
                            let msg = 'Error saving step';
                            if (xhr.status === 422) {
                                msg = Object.values(xhr.responseJSON.errors).flat().join('<br>');
                            }
                            Swal.fire('Error', msg, 'error');
                        },
                        complete: function () {
                            $btn.prop('disabled', false).text(origText);
                        }
                    });
                });

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

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

                let equipIndex = {{ $equipIdx }};

                $('#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++;
                });

                $('#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++;
                });

                $(document).on('click', '.remove-row', function () { $(this).closest('tr').remove(); });

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

                // AJAX Section Updates
                $('.section-form').on('submit', function (e) {
                    e.preventDefault();
                    const $form = $(this);
                    const section = $form.data('section');
                    const formData = new FormData(this);
                    const $btn = $form.find('button[type="submit"]');
                    const origText = $btn.text();

                    $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Saving...');

                    $.ajax({
                        url: '{{ route("horeca.outlets.update-section", $outlet->id) }}',
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            if (response.success) {
                                $.toast({
                                    heading: 'Success',
                                    text: response.message,
                                    icon: 'success',
                                    position: 'top-right',
                                    bgColor: '#1ecab8',
                                    loaderBg: '#ecf0f1'
                                });

                                if (section === 'workflow') {
                                    $('#draftAlert').fadeOut();
                                }
                            }
                        },
                        error: function (xhr) {
                            let msg = 'Error saving changes';
                            if (xhr.status === 422) {
                                const errors = xhr.responseJSON.errors;
                                msg = Object.values(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);
                        }
                    });
                });

                // Save All Data together
                $('#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 === '_method' || key === 'section') continue;
                            allData.append(key, value);
                        }
                    });

                    allData.append('_token', '{{ csrf_token() }}');
                    allData.append('_method', 'PUT');

                    $.ajax({
                        url: '{{ route("horeca.outlets.update", $outlet->id) }}',
                        method: 'POST',
                        data: allData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            if (response.success) {
                                $.toast({
                                    heading: 'Success',
                                    text: 'All data saved successfully',
                                    icon: 'success',
                                    position: 'top-right',
                                    bgColor: '#1ecab8',
                                    loaderBg: '#ecf0f1'
                                });
                                setTimeout(() => { window.location.reload(); }, 1000);
                            }
                        },
                        error: function (xhr) {
                            let msg = (xhr.responseJSON && xhr.responseJSON.message) ? xhr.responseJSON.message : 'Error saving changes';
                            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(origHtml);
                        }
                    });
                });

                // Top Button triggers active tab form (optional, keeping for compatibility if ever needed)
                $('#saveActiveTab').on('click', function () {
                    const activeTabId = $('#outletTabs .nav-link.active').attr('href');
                    const $activeForm = $(activeTabId).find('form.section-form');
                    if ($activeForm.length) {
                        $activeForm.submit();
                    }
                });

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

                // 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 = {{ $normIdx }};
                // 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 => {
                        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++;
                });



                $('#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.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}" name="posm_norms[${normIndex}][must_have]" value="1" ${p.must_have ? 'checked' : ''}>
                                                        <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" ${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>`);
                            }
                        }
                    });
                });

                $(document).on('change', 'select[name^="posm_norms"][name$="[product_id]"]', function () {
                    const currentSelect = $(this);
                    const productId = currentSelect.val();
                    if (!productId) return;

                    let duplicate = false;
                    $('select[name^="posm_norms"][name$="[product_id]"]').not(currentSelect).each(function () {
                        if ($(this).val() === productId) {
                            duplicate = true;
                            return false;
                        }
                    });

                    if (duplicate) {
                        Swal.fire({
                            title: 'Product Already Selected',
                            text: 'This product is already added to the custom norms list. Please update the existing row or choose a different product.',
                            icon: 'warning'
                        });
                        currentSelect.val('').trigger('change.select2');
                    }
                });

                $(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);
                });

                // Timeline Filtering & Pagination
                let currentPage = 1;
                const itemsPerPage = 10;
                let activeType = 'all';

                function updateTimeline() {
                    const $items = $('.timeline-item');
                    let $filteredItems;

                    if (activeType === 'all') {
                        $filteredItems = $items;
                    } else {
                        $filteredItems = $items.filter(`[data-type="${activeType}"]`);
                    }

                    const totalItems = $filteredItems.length;
                    const totalPages = Math.ceil(totalItems / itemsPerPage);

                    // If current page is out of bounds due to filtering
                    if (currentPage > totalPages && totalPages > 0) {
                        currentPage = 1;
                    }

                    // Hide all items first by adding d-none (to override d-flex)
                    $items.addClass('d-none').removeClass('d-flex');

                    // Show items for current page
                    const start = (currentPage - 1) * itemsPerPage;
                    const end = start + itemsPerPage;

                    const $pagedItems = $filteredItems.slice(start, end);
                    $pagedItems.removeClass('d-none').addClass('d-flex').hide().fadeIn(200);

                    // Update Pagination UI
                    updatePaginationUI(totalPages);

                    // Toggle empty state
                    if (totalItems === 0) {
                        if ($('.timeline-empty-state').length === 0) {
                            $('.timeline .position-relative').after(`
                                                            <div class="timeline-empty-state text-muted text-center py-5">
                                                                <i class="fa-solid fa-clock-rotate-left fa-3x mb-3 text-secondary"></i>
                                                                <p>No matches found for this filter.</p>
                                                            </div>
                                                        `);
                        }
                        $('.timeline-empty-state').show();
                        $('.timeline .position-relative').hide();
                    } else {
                        $('.timeline-empty-state').hide();
                        $('.timeline .position-relative').show();
                    }
                }

                function updatePaginationUI(totalPages) {
                    const $pagination = $('#timelinePagination');
                    $pagination.empty();

                    if (totalPages <= 1) return;

                    // Previous button
                    $pagination.append(`
                                                    <button class="btn btn-sm btn-outline-secondary ${currentPage === 1 ? 'disabled' : ''}" id="prevPage">
                                                        <i class="fa fa-chevron-left"></i>
                                                    </button>
                                                `);

                    // Page numbers (limited)
                    for (let i = 1; i <= totalPages; i++) {
                        if (i === 1 || i === totalPages || (i >= currentPage - 1 && i <= currentPage + 1)) {
                            $pagination.append(`
                                                            <button class="btn btn-sm ${i === currentPage ? 'btn-primary' : 'btn-outline-secondary'} page-number" data-page="${i}">
                                                                ${i}
                                                            </button>
                                                        `);
                        } else if (i === currentPage - 2 || i === currentPage + 2) {
                            $pagination.append('<span class="px-1">...</span>');
                        }
                    }

                    // Next button
                    $pagination.append(`
                                                    <button class="btn btn-sm btn-outline-secondary ${currentPage === totalPages ? 'disabled' : ''}" id="nextPage">
                                                        <i class="fa fa-chevron-right"></i>
                                                    </button>
                                                `);
                }

                $(document).on('click', '.activity-filter', function (e) {
                    e.preventDefault();
                    activeType = $(this).data('type');
                    currentPage = 1;

                    $('.activity-filter').removeClass('active fw-bold text-dark');
                    $(this).addClass('active fw-bold text-dark');

                    updateTimeline();
                });

                $(document).on('click', '.page-number', function () {
                    currentPage = parseInt($(this).data('page'));
                    updateTimeline();
                    $('html, body').animate({
                        scrollTop: $("#history-tab").offset().top - 100
                    }, 200);
                });

                $(document).on('click', '#prevPage', function () {
                    if (currentPage > 1) {
                        currentPage--;
                        updateTimeline();
                    }
                });

                $(document).on('click', '#nextPage', function () {
                    const $items = activeType === 'all' ? $('.timeline-item') : $(`.timeline-item[data-type="${activeType}"]`);
                    const totalPages = Math.ceil($items.length / itemsPerPage);
                    if (currentPage < totalPages) {
                        currentPage++;
                        updateTimeline();
                        $('html, body').animate({
                            scrollTop: $("#history-tab").offset().top - 100
                        }, 200);
                    }
                });

                // Initialize timeline
                updateTimeline();
            });
        </script>
        <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    @endpush