@extends('layouts.app')
@section('title', 'Create Workflow')

@section('content')
    <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.workflows.index') }}">Workflows</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Create</li>
                </ol>
            </nav>
            <div class="fw-semibold mt-1">Create New Workflow: <span id="titleIconDisplay" class="me-2">🔄</span> <span
                    id="titleNameDisplay">Untitled Workflow</span></div>
        </div>
        <div class="d-flex align-items-center">
            <a href="{{ route('horeca.workflows.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="submitForm" 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 Workflow"></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.workflows.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>

    <form id="workflowForm" action="{{ route('horeca.workflows.store') }}" method="POST" enctype="multipart/form-data"
        novalidate>
        @csrf

        <div class="row mt-3">
            <div class="col-12">
                <div class="card">
                    <div class="card-body p-0">
                        <!-- Nav tabs -->
                        <ul class="nav nav-tabs nav-tabs-custom nav-justified" id="workflowTabs" role="tablist">
                            <li class="nav-item">
                                <a class="nav-link active" data-toggle="tab" href="#basic-info" role="tab">
                                    <span class="d-none d-sm-block">1. Basic Information</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#workflow-steps" role="tab">
                                    <span class="d-none d-sm-block">2. Workflow Steps</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#conditional-logic" role="tab">
                                    <span class="d-none d-sm-block">3. Conditional Logic</span>
                                </a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" data-toggle="tab" href="#preview-tab" role="tab">
                                    <span class="d-none d-sm-block">4. Preview</span>
                                </a>
                            </li>
                        </ul>

                        <!-- Tab panes -->
                        <div class="tab-content p-4">
                            <!-- Tab 1: Basic Information -->
                            <div class="tab-pane active" id="basic-info" role="tabpanel">
                                <div class="row">
                                    <div class="col-12">
                                        <h5 class="mb-4 fw-bold">Workflow Details</h5>
                                        <div class="mb-3">
                                            <label for="name" class="form-label">Workflow Name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control @error('name') is-invalid @enderror"
                                                id="name" name="name" value="{{ old('name') }}" required maxlength="100"
                                                placeholder="e.g., Outlet Audit 2024">
                                            @error('name') <div class="invalid-feedback">{{ $message }}</div> @enderror
                                        </div>

                                        <div class="mb-3">
                                            <label for="description" class="form-label">Description</label>
                                            <textarea class="form-control" id="description" name="description" rows="4"
                                                maxlength="500"
                                                placeholder="Briefly describe the purpose of this workflow...">{{ old('description') }}</textarea>
                                            <div class="text-end small text-muted mt-1"><span id="charCount">0</span>/500
                                            </div>
                                        </div>

                                        <div class="row mt-4">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="category" class="form-label">Category <span
                                                            class="text-danger">*</span></label>
                                                    <select name="category" id="category"
                                                        class="form-control @error('category') is-invalid @enderror"
                                                        required>
                                                        <option value="">Select Category</option>
                                                        @foreach(['impulse', 'cooler', 'branding', 'pouring_material', 'competitor', 'audit', 'custom'] as $cat)
                                                            <option value="{{ $cat }}" {{ (old('category') == $cat) ? 'selected' : '' }}>{{ ucwords(str_replace('_', ' ', $cat)) }}</option>
                                                        @endforeach
                                                    </select>
                                                    @error('category') <div class="invalid-feedback">{{ $message }}</div>
                                                    @enderror
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="icon" class="form-label">Icon</label>
                                                    <div class="input-group">
                                                        <input type="text" class="form-control" id="icon" name="icon"
                                                            value="{{ old('icon', '🔄') }}" placeholder="Emoji" readonly>
                                                        <button class="btn btn-outline-secondary" type="button"
                                                            id="emojiPickerBtn">
                                                            <i class="fa-regular fa-face-smile"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="row mt-3">
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label for="color" class="form-label">Theme Color</label>
                                                    <input type="color" class="form-control form-control-color w-100"
                                                        id="color" name="color" value="{{ old('color', '#4e73df') }}">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="mb-3">
                                                    <label class="form-label d-block">Status</label>
                                                    <div class="form-check form-check-inline mt-2">
                                                        <input class="form-check-input" type="radio" name="status"
                                                            id="statusActive" value="active" {{ old('status', 'active') == 'active' ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="statusActive">Active</label>
                                                    </div>
                                                    <div class="form-check form-check-inline mt-2">
                                                        <input class="form-check-input" type="radio" name="status"
                                                            id="statusInactive" value="inactive" {{ old('status') == 'inactive' ? 'checked' : '' }}>
                                                        <label class="form-check-label"
                                                            for="statusInactive">Inactive</label>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row mt-4">
                                            <div class="col-12 text-start border-top pt-3">
                                                <button type="button" class="btn btn-primary px-4 btn-save-section"
                                                    data-section="basic">
                                                    Save Basic Information
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 2: Workflow Steps -->
                            <div class="tab-pane" id="workflow-steps" role="tabpanel">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <div>
                                        <h5 class="fw-bold mb-0">Workflow Steps</h5>
                                        <small class="text-muted">Drag to reorder steps</small>
                                    </div>
                                    <button type="button" class="btn btn-primary" id="addStepBtn">
                                        <i class="fa fa-plus me-1"></i> Add Step
                                    </button>
                                </div>

                                <div id="stepsContainer" class="mt-4 sortable">
                                    <!-- Steps will be added here -->
                                    <div class="text-center py-5 text-muted shadow-sm rounded-3 border dashed"
                                        id="noStepsPlaceholder">
                                        <i class="fa-solid fa-list-check fa-3x mb-3 text-light"></i>
                                        <h5>No steps added yet</h5>
                                        <p>Click "Add Step" to begin building your workflow.</p>
                                        <button type="button" class="btn btn-sm btn-outline-primary mt-2"
                                            onclick="$('#addStepBtn').click()">+ Add Your First Step</button>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12 text-start border-top pt-3">
                                        <button type="button" class="btn btn-primary px-4 btn-save-section"
                                            data-section="steps">
                                            Save & Continue
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 3: Conditional Logic -->
                            <div class="tab-pane" id="conditional-logic" role="tabpanel">
                                <div class="mb-4 d-flex justify-content-between align-items-center">
                                    <div>
                                        <h5 class="fw-bold mb-1">Conditional Logic</h5>
                                        <p class="text-muted small mb-0">Define when steps should be shown based on previous
                                            responses.</p>
                                    </div>
                                    <button type="button" class="btn btn-primary btn-sm px-3" id="addConditionBtn">
                                        <i class="fas fa-plus me-1"></i> Add Condition
                                    </button>
                                </div>

                                <div id="conditionsContainer">
                                    <div class="text-center py-5 no-conditions-placeholder">
                                        <i class="fa-solid fa-diagram-project fa-3x mb-3 text-light"></i>
                                        <h5 class="text-muted">No conditional logic defined</h5>
                                        <p class="text-muted small">All steps will be shown in sequence.</p>
                                    </div>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12 text-start border-top pt-3">
                                        <button type="button" class="btn btn-primary px-4 btn-save-section"
                                            data-section="logic">
                                            Save & Complete
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Tab 4: Preview -->
                            <div class="tab-pane" id="preview-tab" role="tabpanel">
                                <div class="row justify-content-center">
                                    <div class="col-md-6">
                                        <div class="mobile-preview-container card shadow-lg border-dark mx-auto"
                                            style="max-width: 320px; border-radius: 40px; border-width: 8px;">
                                            <div class="card-body p-0" style="height: 560px; overflow-y: auto;">
                                                <div class="bg-primary text-white p-3 text-center">
                                                    <div class="small opacity-75">Workflow Preview</div>
                                                    <div class="d-flex align-items-center justify-content-center mb-1">
                                                        <div id="previewIconDisplay" class="me-3">
                                                            <span style="font-size: 1.2rem;">🔄</span>
                                                        </div>
                                                        <div class="fw-bold" id="previewName">Untitled Workflow</div>
                                                    </div>
                                                </div>
                                                <div class="p-3">
                                                    <div id="previewContent" class="py-2">
                                                        <div class="text-center py-5 text-muted opacity-50">
                                                            <i class="fa-solid fa-mobile-screen-button fa-2x mb-2"></i>
                                                            <p class="small">Add steps to see preview</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="text-center mt-3">
                                            <button type="button" class="btn btn-sm btn-outline-secondary"
                                                id="restartPreviewBtn"><i class="fa-solid fa-rotate-right me-1"></i> Restart
                                                Preview</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>

    <!-- Templates for dynamic steps -->
    <template id="stepTemplate">
        <div class="card step-card mb-3 border shadow-sm accordion-item" data-step-index="{INDEX}">
            <div class="card-header bg-white p-2" id="heading_{INDEX}">
                <div class="d-flex align-items-center justify-content-between">
                    <div class="d-flex align-items-center flex-grow-1 cursor-move" data-toggle="collapse"
                        data-target="#collapse_{INDEX}">
                        <i class="fa-solid fa-grip-vertical text-muted me-3"></i>
                        <span class="step-number-container me-5">
                            <span class="step-number">{NUMBER}</span>
                        </span>
                        <div class="me-auto">
                            <div class="fw-bold step-title-display mb-2"
                                style="font-size: 1.1rem; color: #1a1a1b; letter-spacing: -0.01em;">New Step</div>
                            <div class="d-flex align-items-center">
                                <span class="badge question-type-badge text-uppercase">SELECTION</span>
                                <div class="mandatory-badge d-block">
                                    <div class="d-flex align-items-center">
                                        <span class="badge-divider mx-3"></span>
                                        <span class="small text-muted d-flex align-items-center">
                                            <i class="fa-solid fa-asterisk text-danger small scale-75 me-1"></i> Mandatory
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center">
                        <button type="button" class="btn btn-sm btn-link text-primary me-1 duplicate-step-btn"
                            title="Duplicate"><i class="fa-regular fa-copy"></i></button>
                        <button type="button" class="btn btn-sm btn-link text-danger me-2 remove-step-btn" title="Delete"><i
                                class="fa-regular fa-trash-can"></i></button>
                        <button type="button" class="btn btn-sm btn-link text-muted p-0 me-2" data-toggle="collapse"
                            data-target="#collapse_{INDEX}">
                            <i class="fa-solid fa-chevron-down"></i>
                        </button>
                    </div>
                </div>
            </div>

            <div id="collapse_{INDEX}" class="collapse show" aria-labelledby="heading_{INDEX}">
                <div class="card-body bg-light border-top">
                    <div class="row">
                        <div class="col-md-7 border-end">
                            <div class="mb-3">
                                <label class="form-label small fw-bold">Step Name <span class="text-danger">*</span></label>
                                <input type="text" name="steps[{INDEX}][name]"
                                    class="form-control form-control-sm step-name-input"
                                    placeholder="e.g., Is the cooler clean?" required>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small fw-bold">Step Description (Optional)</label>
                                <textarea name="steps[{INDEX}][description]" class="form-control form-control-sm" rows="2"
                                    maxlength="300" placeholder="Brief summary of the step..."></textarea>
                                <div class="text-end x-small text-muted"><span class="desc-char-count">0</span>/300</div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label small fw-bold">Instructions (Rich Text)</label>
                                <textarea name="steps[{INDEX}][instructions]" class="form-control instructions-editor"
                                    placeholder="Provide extra guidance for the agent..."></textarea>
                            </div>

                            <div class="mb-3">
                                <label class="form-label small fw-bold">Question Type</label>
                                <div class="d-flex flex-wrap gap-3 mt-2">
                                    <div class="form-check form-check-inline me-0">
                                        <input class="form-check-input q-type-radio" type="radio"
                                            name="steps[{INDEX}][question_type]" id="q_yesno_{INDEX}" value="yes_no"
                                            checked>
                                        <label class="form-check-label small" for="q_yesno_{INDEX}">Selection</label>
                                    </div>
                                    <div class="form-check form-check-inline me-0">
                                        <input class="form-check-input q-type-radio" type="radio"
                                            name="steps[{INDEX}][question_type]" id="q_text_{INDEX}" value="text">
                                        <label class="form-check-label small" for="q_text_{INDEX}">Text Area</label>
                                    </div>
                                    <div class="form-check form-check-inline me-0">
                                        <input class="form-check-input q-type-radio" type="radio"
                                            name="steps[{INDEX}][question_type]" id="q_mhb_{INDEX}" value="mhb_brand">
                                        <label class="form-check-label small" for="q_mhb_{INDEX}">MHB Brand?</label>
                                    </div>
                                </div>
                            </div>

                            <!-- Selection Details -->
                            <div class="selection-details">
                                <div class="mb-3">
                                    <label class="form-label small fw-bold">Selection Type</label>
                                    <div class="d-flex flex-wrap gap-3 mt-2">
                                        <div class="form-check form-check-inline me-0">
                                            <input class="form-check-input s-type-radio" type="radio"
                                                name="steps[{INDEX}][selection_type]" id="s_yesno_{INDEX}" value="yes_no"
                                                checked>
                                            <label class="form-check-label small" for="s_yesno_{INDEX}">Yes/No</label>
                                        </div>
                                        <div class="form-check form-check-inline me-0">
                                            <input class="form-check-input s-type-radio" type="radio"
                                                name="steps[{INDEX}][selection_type]" id="s_single_{INDEX}"
                                                value="single_select">
                                            <label class="form-check-label small" for="s_single_{INDEX}">Single
                                                Choice</label>
                                        </div>
                                        <div class="form-check form-check-inline me-0">
                                            <input class="form-check-input s-type-radio" type="radio"
                                                name="steps[{INDEX}][selection_type]" id="s_multi_{INDEX}"
                                                value="multi_select">
                                            <label class="form-check-label small" for="s_multi_{INDEX}">Multiple
                                                Choice</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="options-container d-none">
                                    <label class="form-label small fw-bold d-flex justify-content-between">Options <button
                                            type="button"
                                            class="btn btn-link btn-sm p-0 add-option-btn text-decoration-none">+ Add
                                            Option</button></label>
                                    <div class="options-list"></div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="p-2">
                                <h6 class="small fw-bold text-uppercase text-muted mb-3">Configuration</h6>
                                <div class="mb-2">
                                    <div
                                        class="form-check form-switch p-0 d-flex align-items-center justify-content-between">
                                        <label class="form-check-label small" for="mandatory_{INDEX}">Mandatory Step</label>
                                        <input type="hidden" name="steps[{INDEX}][is_mandatory]" value="0">
                                        <input class="form-check-input mandatory-toggle" type="checkbox"
                                            name="steps[{INDEX}][is_mandatory]" id="mandatory_{INDEX}" value="1" checked>
                                    </div>
                                    <small class="text-muted x-small">User cannot skip this step.</small>
                                </div>
                                <div class="mb-2 allow-skip-container d-none">
                                    <div
                                        class="form-check form-switch p-0 d-flex align-items-center justify-content-between">
                                        <label class="form-check-label small" for="skip_{INDEX}">Allow Skip</label>
                                        <input type="hidden" name="steps[{INDEX}][allow_skip]" value="0">
                                        <input class="form-check-input skip-toggle" type="checkbox"
                                            name="steps[{INDEX}][allow_skip]" id="skip_{INDEX}" value="1">
                                    </div>
                                    <small class="text-muted x-small">User can bypass this step if needed.</small>

                                    <!-- Skip Reasons Repeater -->
                                    <div class="skip-reasons-container d-none mt-2 pt-2 border-top">
                                        <label class="form-label x-small fw-bold d-flex justify-content-between mb-2">
                                            Skip Reason Options
                                            <button type="button"
                                                class="btn btn-link btn-sm p-0 add-skip-reason-btn text-decoration-none"
                                                style="font-size: 11px;">+ Add Reason</button>
                                        </label>
                                        <div class="skip-reasons-list">
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-2 border-top pt-2 mt-2">
                                    <div
                                        class="form-check form-switch p-0 d-flex align-items-center justify-content-between">
                                        <label class="form-check-label small" for="remarks_{INDEX}">Enable Remarks
                                            Field</label>
                                        <input type="hidden" name="steps[{INDEX}][allow_remarks]" value="0">
                                        <input class="form-check-input" type="checkbox" name="steps[{INDEX}][allow_remarks]"
                                            id="remarks_{INDEX}" value="1">
                                    </div>
                                </div>
                                <div class="mb-2 border-top pt-2 mt-2">
                                    <div
                                        class="form-check form-switch p-0 d-flex align-items-center justify-content-between">
                                        <label class="form-check-label small" for="photo_req_{INDEX}">Require Photo</label>
                                        <input type="hidden" name="steps[{INDEX}][require_photo]" value="0">
                                        <input class="form-check-input photo-toggle" type="checkbox"
                                            name="steps[{INDEX}][require_photo]" id="photo_req_{INDEX}" value="1">
                                    </div>
                                    <div class="photo-settings d-none">
                                        <div class="mt-2 bg-white p-2 rounded border">
                                            <div class="row align-items-center">
                                                <div class="col-8">
                                                    <label class="small mb-0">Photo Count (1-10)</label>
                                                </div>
                                                <div class="col-4">
                                                    <input type="number" name="steps[{INDEX}][photo_count]"
                                                        class="form-control form-control-sm text-center photo-count-input"
                                                        value="1" min="1" max="10">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="mt-2">
                                        <label class="small fw-bold mb-1 d-block">Sample Photo (Optional)</label>
                                        <div class="bg-white p-2 rounded border">
                                            <input type="file" name="steps[{INDEX}][sample_photo]"
                                                class="form-control form-control-sm sample-photo-input" accept="image/*">
                                            <div class="sample-photo-preview mt-2 d-none">
                                                <img src="" class="img-thumbnail" style="max-height: 100px;">
                                                <button type="button"
                                                    class="btn btn-sm text-danger remove-preview-btn border-0 py-0"><i
                                                        class="fa-solid fa-times"></i> Remove</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <!-- Trigger Section -->
                                <div class="mb-0 border-top pt-2 mt-2">
                                    <div
                                        class="form-check form-switch p-0 d-flex align-items-center justify-content-between">
                                        <label class="form-check-label small" for="trigger_{INDEX}">Trigger Service
                                            Request</label>
                                        <input type="hidden" name="steps[{INDEX}][trigger_sr]" value="0">
                                        <input class="form-check-input trigger-toggle" type="checkbox"
                                            name="steps[{INDEX}][trigger_sr]" id="trigger_{INDEX}" value="1">
                                    </div>
                                    <div class="trigger-settings d-none mt-2 bg-white p-2 rounded border">
                                        <div class="mb-2">
                                            <label class="x-small mb-1 fw-bold">If Answer Equal To</label>
                                            <div class="trigger-value-container">
                                                <select name="steps[{INDEX}][trigger_value]" class="form-control form-control-sm trigger-value-select">
                                                    <option value="">Select</option>
                                                    <option value="yes">Yes</option>
                                                    <option value="no">No</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="x-small text-muted mb-2 info-msg">
                                            <i class="fas fa-info-circle mr-1"></i> A service request will be created automatically if the answer matches.
                                        </div>
                                        <div>
                                            <label class="x-small mb-1 fw-bold">Request Category</label>
                                            <select name="steps[{INDEX}][service_request_category_id]"
                                                class="form-control form-control-sm category-select">
                                                <option value="">Select</option>
                                                @foreach($categories as $category)
                                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="mt-2">
                                            <label class="x-small mb-1 fw-bold">Request Template (Optional)</label>
                                            <select name="steps[{INDEX}][service_request_template_id]"
                                                class="form-control form-control-sm template-select">
                                                <option value="">-- Select Template --</option>
                                                {{-- Loaded via AJAX --}}
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{-- Removed Save Step and Cancel buttons --}}
                </div>
            </div>
        </div>
    </template>

    <template id="optionTemplate">
        <div class="option-item d-flex align-items-center mb-2">
            <input type="text" name="steps[{STEP_INDEX}][options][{OPT_INDEX}][text]"
                class="form-control form-control-sm me-2 option-text-input" placeholder="Option Text" required>
            <input type="hidden" name="steps[{STEP_INDEX}][options][{OPT_INDEX}][value]"
                class="option-value-input" value="">
            <button type="button" class="btn btn-sm text-danger remove-option-btn border-0 p-0"><i
                    class="fa-solid fa-circle-minus"></i></button>
        </div>
    </template>

    <template id="skipReasonTemplate">
        <div class="skip-reason-item d-flex align-items-center mb-2">
            <input type="text" name="steps[{STEP_INDEX}][skip_reasons][]" class="form-control form-control-sm me-2"
                placeholder="e.g., Outlet Closed" required>
            <button type="button" class="btn btn-sm text-danger remove-skip-reason-btn border-0 p-0"><i
                    class="fa-solid fa-circle-minus"></i></button>
        </div>
    </template>

    <template id="conditionTemplate">
        <div class="card condition-card mb-3 border shadow-sm" data-condition-index="{INDEX}">
            <div class="card-body p-3">
                <div class="row align-items-center g-2">
                    <div class="col-md-3">
                        <label class="x-small fw-bold text-uppercase text-muted mb-1">Show Step</label>
                        <select name="conditions[{INDEX}][step_id]" class="form-control form-control-sm target-step-select"
                            required>
                            <option value="">Select Step</option>
                        </select>
                    </div>
                    <div class="col-md-1 text-center mt-4">
                        <span class="fw-bold text-muted small">IF</span>
                    </div>
                    <div class="col-md-3">
                        <label class="x-small fw-bold text-uppercase text-muted mb-1">Step</label>
                        <select name="conditions[{INDEX}][condition_step_id]"
                            class="form-control form-control-sm condition-step-select" required>
                            <option value="">Select Step</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="x-small fw-bold text-uppercase text-muted mb-1">Operator</label>
                        <select name="conditions[{INDEX}][condition_operator]" class="form-control form-control-sm"
                            required>
                            <option value="equals">Equals</option>
                            <option value="not_equals">Not Equals</option>
                            <option value="contains">Contains</option>
                        </select>
                    </div>
                    <div class="col-md-2">
                        <label class="x-small fw-bold text-uppercase text-muted mb-1">Value</label>
                        <input type="text" name="conditions[{INDEX}][condition_value]" class="form-control form-control-sm"
                            placeholder="Expected answer" required>
                    </div>
                    <div class="col-md-1 text-end mt-4">
                        <button type="button" class="btn btn-sm text-danger remove-condition-btn border-0 p-0">
                            <i class="fa-solid fa-trash-can"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </template>

@endsection

@push('css')
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
    <style>
        .nav-tabs-custom .nav-link {
            border: none;
            border-bottom: 2px solid transparent;
            font-weight: 600;
            color: #70757a;
            padding: 1rem;
        }

        .nav-tabs-custom .nav-link.active {
            color: #0d6efd;
            border-bottom-color: #0d6efd;
            background: transparent;
        }

        .dashed {
            border-style: dashed !important;
        }

        .cursor-move {
            cursor: grab;
        }

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

        .scale-75 {
            transform: scale(0.75);
        }

        .mobile-preview-container {
            background: #000;
            position: relative;
            border-radius: 40px;
        }

        .step-card {
            border-radius: 12px !important;
            overflow: hidden;
            border: 1px solid #e0e0e0 !important;
        }

        .step-card:hover {
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
            background-color: #fff;
        }

        .step-card .card-header {
            border-bottom: none;
            padding: 1.5rem !important;
            border-radius: 16px 16px 0 0 !important;
        }

        .step-card {
            border-radius: 16px !important;
            border: 1px solid #edf2f7 !important;
        }

        .selection-type-pill {
            position: relative;
        }

        .selection-type-pill input {
            position: absolute;
            opacity: 0;
            cursor: pointer;
            height: 0;
            width: 0;
        }

        .selection-type-pill label {
            display: inline-block;
            padding: 6px 16px;
            background: #fff;
            border: 1px solid #dce0e4;
            border-radius: 20px;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
            margin-bottom: 0;
        }

        .selection-type-pill input:checked+label {
            background: #fabb1e;
            border-color: #fabb1e;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 2px 6px rgba(250, 187, 30, 0.3);
        }

        .selection-type-pill label:hover {
            border-color: #fabb1e;
        }

        .question-type-badge {
            font-weight: 700;
            letter-spacing: 0.5px;
            padding: 0.4em 1em;
            font-size: 0.65rem;
            background-color: #f0f7ff !important;
            border: 1px solid #4e73df !important;
            color: #4e73df !important;
            border-radius: 6px;
        }

        .step-number-container {
            display: inline-block;
            vertical-align: middle;
            margin-right: 2.5rem !important;
        }

        .step-number {
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            font-weight: 800;
            background-color: #fabb1e;
            color: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(250, 187, 30, 0.25);
        }

        .badge-divider {
            width: 1px;
            height: 14px;
            background-color: #e2e8f0;
            display: inline-block;
        }

        .cursor-move .fa-grip-vertical {
            opacity: 0.4;
            transition: opacity 0.2s;
            font-size: 1.1rem;
        }

        .step-card:hover .fa-grip-vertical {
            opacity: 0.8;
        }
    </style>
@endpush

@push('js')
    <script type="module" src="https://cdn.jsdelivr.net/npm/emoji-picker-element@1/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
    <script>
        $(document).ready(function () {
            // Tab Persistence
            const urlParams = new URLSearchParams(window.location.search);
            const activeTab = urlParams.get('tab');
            if (activeTab) {
                $(`[href="#${activeTab}"]`).tab('show');
            }

            let stepCount = 0;
            let conditionCount = 0;

            function initSummernote($el) {
                $el.summernote({
                    placeholder: 'Provide extra guidance for the agent...',
                    tabsize: 2,
                    height: 120,
                    toolbar: [
                        ['style', ['style']],
                        ['font', ['bold', 'underline', 'clear']],
                        ['color', ['color']],
                        ['para', ['ul', 'ol', 'paragraph']],
                        ['table', ['table']],
                        ['view', ['fullscreen', 'codeview']]
                    ]
                });
            }

            // Emoji Picker implementation using emoji-picker-element
            const pickerContainer = $('<div id="pickerContainer" style="display:none; position:absolute; z-index:9999; box-shadow: 0 5px 15px rgba(0,0,0,0.2); border-radius: 8px;"></div>');
            $('body').append(pickerContainer);
            pickerContainer.html('<emoji-picker></emoji-picker>');

            const $picker = pickerContainer.find('emoji-picker');

            $(document).on('click', '#emojiPickerBtn', function (e) {
                e.preventDefault();
                e.stopPropagation();

                const btnOffset = $(this).offset();
                const btnHeight = $(this).outerHeight();

                pickerContainer.css({
                    top: btnOffset.top + btnHeight + 5,
                    left: btnOffset.left - 250 // Adjust based on picker width
                }).toggle();
            });

            // Close picker when clicking outside
            $(document).on('click', function (e) {
                if (!$(e.target).closest('#emojiPickerBtn, #pickerContainer').length) {
                    pickerContainer.hide();
                }
            });

            $picker.on('emoji-click', event => {
                const emoji = event.detail.unicode;
                $('#icon').val(emoji).trigger('input');
                pickerContainer.hide();
            });

            $('#icon').on('input', function () {
                const val = $(this).val();
                if (val && val.startsWith('fa-')) {
                    $('#previewIconDisplay, #titleIconDisplay').html(`<i class="${val} font-16"></i>`);
                } else {
                    $('#previewIconDisplay, #titleIconDisplay').html(`<span style="font-size: 1.2rem;">${val || '🔄'}</span>`);
                }
            });

            $('#name').on('input', function () {
                const val = $(this).val() || 'Untitled Workflow';
                $('#previewName, #titleNameDisplay').text(val);
            });

            $('#color').on('input', function () {
                const color = $(this).val();
                $('.mobile-preview-container .bg-primary').attr('style', 'background-color: ' + color + ' !important');
            });

            $('#description').on('input', function () {
                $('#charCount').text($(this).val().length);
            });

            // Step Management
            new Sortable(document.getElementById('stepsContainer'), {
                handle: '.cursor-move',
                animation: 150,
                onEnd: function () { updateStepNumbers(); }
            });

            $('#addStepBtn').on('click', function () {
                $('#noStepsPlaceholder').hide();
                const template = $('#stepTemplate').html();
                const rendered = template.replace(/{INDEX}/g, stepCount).replace(/{NUMBER}/g, $('.step-card').length + 1);
                const $newStep = $(rendered);
                $('#stepsContainer').append($newStep);

                // Initialize Summernote for new step
                initSummernote($newStep.find('.instructions-editor'));

                $('.step-card .collapse').not($newStep.find('.collapse')).collapse('hide');
                stepCount++;
                updateStepNumbers();
                updatePreview();
            });

            $(document).on('input', '.step-name-input', function () {
                const val = $(this).val() || 'New Step';
                $(this).closest('.step-card').find('.step-title-display').text(val);
                updateConditionStepDropdowns();
                updatePreview();
            });

            $(document).on('click', '.remove-step-btn', function (e) {
                e.stopPropagation();
                const $card = $(this).closest('.step-card');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "Delete this configuration?",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonText: 'Delete'
                }).then((result) => {
                    if (result.isConfirmed) {
                        $card.remove();
                        if ($('.step-card').length === 0) $('#noStepsPlaceholder').show();
                        updateStepNumbers();
                        updatePreview();
                    }
                });
            });

            // Duplicate Step
            $(document).on('click', '.duplicate-step-btn', function (e) {
                e.stopPropagation();
                const $card = $(this).closest('.step-card');

                // Sync summernote content back to textarea before cloning
                $card.find('.instructions-editor').each(function () {
                    const code = $(this).summernote('code');
                    $(this).val(code);
                    $(this).summernote('destroy');
                });

                const $clone = $card.clone();

                // Re-init summernote for original
                $card.find('.instructions-editor').each(function () {
                    initSummernote($(this));
                });

                // Clean up clone
                $clone.find('.note-editor, .note-modal').remove();
                $clone.find('.collapse').removeClass('show');
                const copyText = $card.find('.step-name-input').val() + ' (Copy)';
                $clone.find('.step-title-display').text(copyText);
                $clone.find('.step-name-input').val(copyText);

                // Re-index inputs
                const tempIndex = stepCount;
                $clone.find('input, select, textarea').each(function () {
                    const name = $(this).attr('name');
                    if (name) {
                        $(this).attr('name', name.replace(/steps\[[^\]]+\]/, 'steps[' + tempIndex + ']'));
                    }
                });

                $clone.find('input[type="file"]').val('');
                $clone.find('.sample-photo-preview').addClass('d-none').find('img').attr('src', '');
                
                $card.after($clone);

                // Re-init summernote for clone
                $clone.find('.instructions-editor').each(function () {
                    initSummernote($(this));
                });

                stepCount++;
                updateStepNumbers();
                updatePreview();
            });

            $(document).on('change', '.q-type-radio', function () {
                const val = $(this).val();
                const $card = $(this).closest('.step-card');
                const $selectionDetails = $card.find('.selection-details');
                const $badge = $card.find('.question-type-badge');

                if (val === 'mhb_brand') {
                    $selectionDetails.slideUp(function () {
                        $(this).addClass('d-none');
                    });
                    $badge.text('MHB BRAND?');
                } else if (val !== 'text' && val !== 'number') {
                    $selectionDetails.removeClass('d-none').hide().slideDown();
                    if ($card.find('.s-type-radio:checked').length === 0) {
                        $card.find('.s-type-radio[value="yes_no"]').prop('checked', true).trigger('change');
                    }
                    const sType = $card.find('.s-type-radio:checked').val() || 'yes_no';
                    $badge.text('SELECTION');
                } else {
                    $selectionDetails.slideUp(function () {
                        $(this).addClass('d-none');
                    });
                    $badge.text('TEXT AREA');
                }
                updatePreview();
            });

            $(document).on('change', '.s-type-radio', function () {
                const val = $(this).val();
                const $card = $(this).closest('.step-card');
                const $container = $card.find('.options-container');

                if (val === 'yes_no') {
                    $container.addClass('d-none');
                    $container.find('input').prop('disabled', true);
                } else {
                    $container.removeClass('d-none');
                    $container.find('input').prop('disabled', false);
                    const $list = $container.find('.options-list');
                    if ($list.is(':empty')) {
                        addOption($card.data('step-index'));
                    }
                }
                updatePreview();
            });

            $(document).on('change', '.mandatory-toggle', function () {
                const checked = $(this).is(':checked');
                const $card = $(this).closest('.step-card');
                $card.find('.mandatory-badge').toggleClass('d-none', !checked);
                $card.find('.allow-skip-container').toggleClass('d-none', checked);
                if (checked) $card.find('.skip-toggle').prop('checked', false).trigger('change');
            });

            $(document).on('change', '.skip-toggle', function () {
                const checked = $(this).is(':checked');
                $(this).closest('.step-card').find('.skip-reasons-container').toggleClass('d-none', !checked);
            });

            $(document).on('change', '.photo-toggle', function () {
                $(this).closest('.step-card').find('.photo-settings').toggleClass('d-none', !$(this).is(':checked'));
            });

            $(document).on('change', '.trigger-toggle', function () {
                const isChecked = $(this).is(':checked');
                const $card = $(this).closest('.step-card');
                const $settings = $card.find('.trigger-settings');
                const $valueInput = $card.find('[name*="[trigger_value]"]');
                const $categorySelect = $card.find('.category-select');

                $settings.toggleClass('d-none', !isChecked);
                $valueInput.prop('required', isChecked);
                $categorySelect.prop('required', isChecked);
            });

            // Fetch templates on category change
            $(document).on('change', '.category-select', function () {
                const categoryId = $(this).val();
                const $templateSelect = $(this).closest('.trigger-settings').find('.template-select');

                $templateSelect.empty().append('<option value="">-- Loading... --</option>');

                if (!categoryId) {
                    $templateSelect.empty().append('<option value="">-- Select Template --</option>');
                    return;
                }

                $.ajax({
                    url: `{{ route('horeca.service-request-templates.by-category', ':id') }}`.replace(':id', categoryId),
                    method: 'GET',
                    success: function (response) {
                        $templateSelect.empty().append('<option value="">-- Select Template --</option>');
                        response.forEach(function (template) {
                            $templateSelect.append(`<option value="${template.id}">${template.name}</option>`);
                        });
                    },
                    error: function () {
                        $templateSelect.empty().append('<option value="">-- Error loading templates --</option>');
                    }
                });
            });
            
            $(document).on('change', '.sample-photo-input', function() {
                const file = this.files[0];
                const $preview = $(this).siblings('.sample-photo-preview');
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        $preview.find('img').attr('src', e.target.result);
                        $preview.removeClass('d-none');
                    }
                    reader.readAsDataURL(file);
                } else {
                    $preview.addClass('d-none');
                }
            });

            $(document).on('click', '.remove-preview-btn', function() {
                const $preview = $(this).closest('.sample-photo-preview');
                const $input = $preview.siblings('.sample-photo-input');
                $input.val('');
                $preview.addClass('d-none');
                $preview.find('img').attr('src', '');
            });

            $(document).on('click', '.add-option-btn', function () {
                addOption($(this).closest('.step-card').data('step-index'));
                updatePreview();
            });

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

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



            $(document).on('click', '.add-skip-reason-btn', function () {
                const stepIndex = $(this).closest('.step-card').data('step-index');
                const $list = $(this).closest('.step-card').find('.skip-reasons-list');
                const rendered = $('#skipReasonTemplate').html().replace(/{STEP_INDEX}/g, stepIndex);
                $list.append(rendered);
            });

            $(document).on('click', '.remove-skip-reason-btn', function () { $(this).closest('.skip-reason-item').remove(); });

            // Conditions
            $('#addConditionBtn').on('click', function () {
                $('.no-conditions-placeholder').hide();
                const rendered = $('#conditionTemplate').html().replace(/{INDEX}/g, conditionCount);
                $('#conditionsContainer').append(rendered);
                conditionCount++;
                updateConditionStepDropdowns();
            });

            $(document).on('click', '.remove-condition-btn', function () {
                $(this).closest('.condition-card').remove();
                if ($('.condition-card').length === 0) $('.no-conditions-placeholder').show();
            });

            $(document).on('change', '.target-step-select, .condition-step-select', function () {
                updateConditionStepDropdowns();
                validateConditionLogic();
            });

            // Dynamic Trigger Value Dropdown logic
            $(document).on('change', '.q-type-radio, .s-type-radio, .option-text-input, .option-value-input, .remove-option-btn', function() {
                const $card = $(this).closest('.step-card');
                updateTriggerValueDropdown($card);
            });

            function updateTriggerValueDropdown($card) {
                const $container = $card.find('.trigger-value-container');
                const qType = $card.find('.q-type-radio:checked').val();
                const sType = $card.find('.s-type-radio:checked').val();
                const stepIndex = $card.data('step-index');
                const isTriggerEnabled = $card.find('.trigger-toggle').is(':checked');
                let currentValue = $card.find('[name*="[trigger_value]"]').val();

                if (currentValue === '*') currentValue = '';

                if (qType === 'text' || qType === 'number') {
                    if (!$container.find('input').length) {
                        $container.html(`<input type="text" name="steps[${stepIndex}][trigger_value]" class="form-control form-control-sm" value="${currentValue || ''}" placeholder="Enter trigger answer" ${isTriggerEnabled ? 'required' : ''}>`);
                    } else {
                        $container.find('input').prop('required', isTriggerEnabled);
                    }
                } else {
                    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 {
                        $card.find('.option-item').each(function() {
                            const text = $(this).find('.option-text-input').val();
                            const val = $(this).find('.option-value-input').val();
                            if (text && val) {
                                options += `<option value="${val}" ${currentValue === val ? 'selected' : ''}>${text}</option>`;
                            }
                        });
                    }
                    
                    if (!$container.find('select').length || sType !== $container.data('prev-stype') || qType !== $container.data('prev-qtype')) {
                        $container.html(`<select name="steps[${stepIndex}][trigger_value]" class="form-control form-control-sm trigger-value-select" ${isTriggerEnabled ? 'required' : ''}>${options}</select>`);
                    } else {
                        $container.find('select').html(options).prop('required', isTriggerEnabled);
                    }
                }
                $container.data('prev-stype', sType);
                $container.data('prev-qtype', qType);
            }

            function addOption(stepIndex) {
                const $list = $(`.step-card[data-step-index="${stepIndex}"]`).find('.options-list');
                const optIndex = $list.find('.option-item').length;
                const template = $('#optionTemplate').html().replace(/{STEP_INDEX}/g, stepIndex).replace(/{OPT_INDEX}/g, optIndex);
                $list.append(template);
            }

            function updateStepNumbers() {
                $('.step-card').each(function (index) {
                    const $card = $(this);
                    $card.find('.step-number').text(index + 1);
                    $card.data('step-index', index).attr('data-step-index', index);

                    const hId = 'heading_' + index;
                    const cId = 'collapse_' + index;
                    $card.find('.card-header').attr('id', hId);
                    $card.find('[data-toggle="collapse"]').attr('data-target', '#' + cId);
                    $card.find('.collapse').attr({ 'id': cId, 'aria-labelledby': hId });

                    $card.find('input, select, textarea').each(function () {
                        const name = $(this).attr('name');
                        if (name) $(this).attr('name', name.replace(/steps\[[^\]]+\]/, 'steps[' + index + ']'));
                    });

                    // Also re-index options and skip reasons within the step
                    $card.find('.options-list .option-item').each(function(optIndex) {
                        $(this).find('input').each(function() {
                            const name = $(this).attr('name');
                            if (name) {
                                const newName = name.replace(/\[options\]\[[^\]]+\]/, '[options][' + optIndex + ']');
                                $(this).attr('name', newName);
                            }
                        });
                    });

                    $card.find('.skip-reasons-list .skip-reason-item').each(function(srIndex) {
                        $(this).find('input').each(function() {
                            const name = $(this).attr('name');
                            if (name) {
                                const newName = name.replace(/\[skip_reasons\]\[[^\]]*\]/, '[skip_reasons][' + srIndex + ']');
                                $(this).attr('name', newName);
                            }
                        });
                    });
                });
                updateConditionStepDropdowns();
            }

            function updateConditionStepDropdowns() {
                const steps = [];
                $('.step-card').each(function (idx) {
                    steps.push({ index: idx, name: $(this).find('.step-name-input').val() || `Step ${idx + 1}` });
                });

                $('.condition-card').each(function () {
                    const $card = $(this);
                    const $target = $card.find('.target-step-select');
                    const $source = $card.find('.condition-step-select');
                    const curTarget = $target.val();
                    const curSource = $source.val();

                    $target.empty().append('<option value="">Select Step</option>');
                    $source.empty().append('<option value="">Select Step</option>');

                    steps.forEach(s => {
                        if (s.index.toString() !== curSource) $target.append(`<option value="${s.index}" ${curTarget == s.index ? 'selected' : ''}>${s.name}</option>`);
                        if (s.index.toString() !== curTarget) $source.append(`<option value="${s.index}" ${curSource == s.index ? 'selected' : ''}>${s.name}</option>`);
                    });
                });
            }

            function validateConditionLogic() {
                const conditions = [];
                let hasError = false;
                $('.condition-card').removeClass('border-danger bg-light-danger').find('.logic-error-msg').remove();

                $('.condition-card').each(function () {
                    const target = $(this).find('.target-step-select').val();
                    const source = $(this).find('.condition-step-select').val();
                    if (!target || !source) return;

                    if (conditions.some(c => c.target === target && c.source === source)) {
                        $(this).addClass('border-danger').append('<div class="logic-error-msg text-danger x-small p-2">Duplicate condition</div>');
                        hasError = true;
                    }
                    if (conditions.some(c => c.target === source && c.source === target)) {
                        $(this).addClass('border-danger').append('<div class="logic-error-msg text-danger x-small p-2">Circular dependency</div>');
                        hasError = true;
                    }
                    conditions.push({ target, source });
                });
                return !hasError;
            }

            // Preview
            function updatePreview() {
                const $content = $('#previewContent').empty();
                $('.step-card').each(function () {
                    const name = $(this).find('.step-name-input').val() || 'New Step';
                    const qType = $(this).find('.q-type-radio:checked').val();
                    let html = `<div class="preview-item mb-4 bg-light p-2 rounded"><div class="fw-bold small">${name}</div><div class="mt-2">`;

                    if (qType === 'text') {
                        html += '<textarea class="form-control form-control-sm" rows="2" placeholder="User response..."></textarea>';
                    } else if (qType === 'mhb_brand') {
                        html += '<div class="alert alert-info py-1 px-2 small mb-0" style="font-size: 11px;">MHB Brands of the outlet will be loaded dynamically as checkboxes.</div>';
                    } else {
                        const sType = $(this).find('.s-type-radio:checked').val();
                        if (sType === 'yes_no') {
                            html += '<div class="d-flex gap-2"><button type="button" class="btn btn-sm btn-outline-primary flex-grow-1">Yes</button><button type="button" class="btn btn-sm btn-outline-primary flex-grow-1">No</button></div>';
                        } else {
                            $(this).find('.option-text-input').each(function () {
                                if ($(this).val()) html += `<div class="form-check small"><input class="form-check-input" type="radio" disabled><label class="form-check-label">${$(this).val()}</label></div>`;
                            });
                        }
                    }
                    html += '</div></div>';
                    $content.append(html);
                });
                if ($('.step-card').length === 0) $content.append('<div class="text-center py-5 text-muted opacity-50"><p class="small">Add steps to see preview</p></div>');
            }

            // Individual Section Save
            $('.btn-save-section').on('click', function () {
                const section = $(this).data('section');
                const $btn = $(this);
                const origText = $btn.text();

                if (section === 'steps' && $('.step-card').length === 0) {
                    Swal.fire('Oops!', 'Add at least one step.', 'warning');
                    return;
                }

                if (section === 'logic' && !validateConditionLogic()) {
                    Swal.fire('Error', 'Fix conditional logic errors.', 'error');
                    return;
                }

                // Sync Summernote for steps
                if (section === 'steps') {
                    $('.instructions-editor').each(function () {
                        $(this).val($(this).summernote('code'));
                    });

                    // Sync question type with selection type for Selection steps
                    $('.step-card').each(function () {
                        const $card = $(this);
                        const qType = $card.find('.q-type-radio:checked').val();
                        if (qType === 'yes_no' || qType === 'single_select' || qType === 'multi_select') {
                            const sType = $card.find('.s-type-radio:checked').val() || 'yes_no';
                            $card.find('.q-type-radio:checked').val(sType);
                        }
                    });
                }

                const formData = new FormData(document.getElementById('workflowForm'));
                formData.append('section', section);

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

                $.ajax({
                    url: $('#workflowForm').attr('action'),
                    method: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (response) {
                        if (response.success) {
                            if (response.redirect) {
                                window.location.href = response.redirect;
                            } else {
                                $.toast({
                                    heading: 'Success',
                                    text: response.message || 'Section saved successfully',
                                    icon: 'success',
                                    position: 'top-right'
                                });
                            }
                        }
                    },
                    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);
                    }
                });
            });

            $('#submitForm').on('click', function (e) {
                e.preventDefault();
                const $btn = $(this);
                const $icon = $btn.find('i');
                const form = document.getElementById('workflowForm');

                if ($('.step-card').length === 0) {
                    $('[href="#workflow-steps"]').tab('show');
                    Swal.fire('Oops!', 'Add at least one step.', 'warning');
                    return;
                }

                if (!validateConditionLogic()) {
                    $('[href="#conditional-logic"]').tab('show');
                    Swal.fire('Error', 'Fix conditional logic errors.', 'error');
                    return;
                }

                if (form.checkValidity()) {
                    $('.step-card').each(function () {
                        const $card = $(this);
                        $card.find('.instructions-editor').each(function () { $(this).val($(this).summernote('code')); });

                        const qType = $card.find('.q-type-radio:checked').val();
                        if (qType === 'yes_no' || qType === 'single_select' || qType === 'multi_select') {
                            const sType = $card.find('.s-type-radio:checked').val() || 'yes_no';
                            $card.find('.q-type-radio:checked').val(sType);
                        }
                    });

                    const formData = new FormData(form);
                    $icon.removeClass('fa-save').addClass('fa-spinner fa-spin');
                    $btn.prop('disabled', true);

                    $.ajax({
                        url: $(form).attr('action'),
                        method: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            $.toast({
                                heading: 'Success',
                                text: 'Workflow created successfully. Redirecting...',
                                icon: 'success',
                                position: 'top-right'
                            });
                            // Redirect to edit page or index
                            setTimeout(() => {
                                window.location.href = '{{ route("horeca.workflows.index") }}';
                            }, 1000);
                        },
                        error: function (xhr) {
                            let msg = 'Error creating workflow';
                            if (xhr.status === 422) {
                                const errors = xhr.responseJSON.errors;
                                msg = Object.values(errors).flat().join('<br>');
                            }
                            Swal.fire('Error', msg, 'error');
                            $icon.removeClass('fa-spinner fa-spin').addClass('fa-save');
                            $btn.prop('disabled', false);
                        }
                    });
                } else {
                    const $invalid = $(form).find(':invalid').first();
                    const $pane = $invalid.closest('.tab-pane');
                    if ($pane.length) $(`[href="#${$pane.attr('id')}"]`).tab('show');
                    form.reportValidity();
                }
            });

            // Initial step
            $('#addStepBtn').click();
            $('.mobile-preview-container .bg-primary').attr('style', 'background-color: ' + $('#color').val() + ' !important');
        });
    </script>
@endpush