@extends ('layouts.front-layout')
@section('content')
    <style>
        .pound {
            background-color: #30bfac;
            height: 200px;
            width: 200px;
            border-radius: 50%;
        }

        @media (max-width:786px) {
            .top-heading {
                margin: 0 10px;
            }
        }

        /* Yes/No button active/inactive states */
        .btn-check:checked+.btn-outline-success {
            background-color: #30bfac;
            border-color: #30bfac;
            color: #fff;
        }

        .btn-check:not(:checked)+.btn-outline-success {
            background-color: transparent;
            border-color: #30bfac;
            color: #30bfac !important;
        }


        /* Alert styles */
        .greenAlert {
            color: black !important;
            background-color: #CCFFCC !important;
        }

        .redAlert {
            color: black !important;
            background-color: #F2DEDE !important;
        }

        .warningAlert {
            color: black;
            background-color: #FCF8E3 !important;
        }

        /* ========================= */
        /* Question + Child CSS      */
        /* ========================= */
        .question {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* align top */
            margin-bottom: 15px;
            padding: 10px;
            width: 100%;
        }

        /* left side (text + answer) */
        .question-left {
            flex: 1;
        }

        .question {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            /* text top align */
            margin-bottom: 15px;
            padding: 10px;
            width: 100%;
        }


        .question-text {
            font-weight: 500;
            font-size: 17px;
            margin-bottom: 8px;
            margin-left: 0px;
        }

        .question-right {
            margin-left: 20px;
        }

        .answer-display {
            display: none;
            width: 100%;
            border-radius: 6px;
            padding: 10px;
            margin-top: 8px;
            font-size: 16px;
            font-weight: 500;
            color: #000;
        }

        /* Child indentation */
        /*.children-container {*/
        /*    margin-left: 25px;*/
        /*    margin-top: 12px;*/
        /*    padding-left: 12px;*/
        /*    border-left: 3px solid #e9ecef;*/
        /*}*/

        .children-container .question {
            border-radius: 6px;
            padding: 10px 0;
        }

        .btn-outline-success:hover {
            background-color: #30bfac;
            border-color: #30bfac;
            color: #fff !important;
            transition: all 0.2s ease;
        }
    </style>

    <style>
        /* Radio Options */
        .radio-options-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .radio-option-item {
            background: white;
            border: 2px solid #dee2e6;
            border-radius: 8px;
            padding: 12px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        .radio-option-item:hover {
            border-color: #007bff;
            background: #f8f9fa;
        }
        .radio-option-item.selected-radio-option {
            background: #17a2b8;
            border-color: #17a2b8;
            color: white;
        }
        .radio-option-label {
            margin-left: 10px;
            cursor: pointer;
            flex: 1;
            font-weight: 500;
        }

        /* Toggle Buttons */
        .custom-toggle-buttons .btn {
            transition: all 0.3s;
        }
        .custom-toggle-buttons .btn.btn-primary {
            background-color: #17a2b8 !important;
            border-color: #17a2b8 !important;
            color: white !important;
        }


    </style>

    <div class="container my-5">
        <!-- Stepper -->
        <div class="stepper mx-5">
            <div class="step">
                <div class="circle active"></div>
                <small>Consultation</small>
            </div>
            <div class="step">
                <div class="circle"></div>
                <small>Treatments</small>
            </div>
            <div class="step">
                <div class="circle"></div>
                <small>Delivery</small>
            </div>
            <div class="step">
                <div class="circle"></div>
                <small>Payment</small>
            </div>
        </div>

        <div class="row bg-white justify-content-center py-5">
            <!-- Main Form -->
            <div class="col-lg-8">

                <div class="card-body top-heading">
                    <h5 class="">
                        Medical Assessment for
                        <span class="font600">{{$category->category_name ? : ''}}</span>
                    </h5>
                    <p>
                        To help us supply you with the most suitable treatment, please
                        complete this online consultation.
                    </p>
                    <p>
                        Ordered treatment before?
                        <button class="btn btn-sm  text-white fw-bold" style="background-color: #E56515">
                            <i class="fas fa-lock"></i> Log in
                        </button>
                        now to check out faster.
                    </p>
                </div>


                {{-- Tabs show only if category ke tabs hain --}}
                @if ($category->tabTypes->isNotEmpty())
                    <div class="tabs mb-4">
                        @foreach ($category->tabTypes as $tab)
                            <a href="{{ route('categorySlug.consultation', [$category->slug, $tab->slug]) }}"
                               class="btn {{ $tabTypeId == $tab->id ? 'btn-primary' : 'btn-outline-primary' }}">
                                {{ $tab->type_name }}
                            </a>
                        @endforeach
                    </div>
                @endif


                <form>
                    @if ($category->sections->isNotEmpty())
                        @foreach ($sections as $section)
                            <div class="card shadow-small mb-4">
                                <div class="section-header">{{ $section->title }}</div>

                                @foreach ($section->questions as $question)
                                    @php
                                        $answerObj = $question->answer ?? null;
                                        $btnStatus = $answerObj->btn_status ?? 'yes';
                                        $uniqueName = 'yesno_' . $question->id;
                                        $fieldConfig = $question->field_config ?? [];
                                    @endphp

                                    <div class="question flex-column align-items-start position-relative mb-3"
                                         data-question-id="{{ $question->id }}" data-answer-id="{{ $answerObj->id ?? '' }}"
                                         data-answer="{{ $answerObj->answer ?? '' }}"
                                         data-color="{{ $answerObj->color ?? 'black' }}"
                                         data-btn-status="{{ strtolower(trim($btnStatus)) }}">

                                        <div class="container">
                                            <div class="d-flex justify-content-between align-items-start w-100">
                                                <!-- Question Text -->
                                                <div class="question-text mb-1">
                                                    {{ $question->question }}
                                                </div>

                                                <!-- Buttons / Inputs -->
                                                <div class="d-flex align-items-center gap-2">
                                                    {{-- Custom Radio Options --}}
                                                    @if(isset($fieldConfig['radio_options']))
                                                        <div class="radio-options-container">
                                                            @foreach($fieldConfig['radio_options'] as $index => $option)
                                                                <div class="radio-option-item" data-value="{{ $option }}">
                                                                    <input type="radio" class="radio-option-input"
                                                                           name="custom_{{ $question->id }}"
                                                                           id="option-{{ $question->id }}-{{ $index }}" autocomplete="off">
                                                                    <label class="radio-option-label" for="option-{{ $question->id }}-{{ $index }}">
                                                                        {{ $option }}
                                                                    </label>
                                                                </div>
                                                            @endforeach
                                                        </div>

                                                        {{-- Custom Toggle Buttons --}}
                                                    @elseif(isset($fieldConfig['btn1_text']) && isset($fieldConfig['btn2_text']))
                                                        <div class="d-flex gap-2 flex-column">
                                                            <div class="custom-toggle-buttons btn-group" role="group">
                                                                <button type="button" class="btn btn-outline-secondary">
                                                                    {{ $fieldConfig['btn1_text'] }}
                                                                </button>
                                                                <button type="button" class="btn btn-outline-secondary">
                                                                    {{ $fieldConfig['btn2_text'] }}
                                                                </button>
                                                            </div>

                                                            {{-- Input fields for btn1 --}}
                                                            @foreach($fieldConfig['btn1_input_labels'] ?? [] as $label)
                                                                <input type="text" class="form-control btn-input-fields"
                                                                       data-btn-index="0" placeholder="{{ $label }}" style="width:80px; display:none;">
                                                            @endforeach

                                                            {{-- Input fields for btn2 --}}
                                                            @foreach($fieldConfig['btn2_input_labels'] ?? [] as $label)
                                                                <input type="text" class="form-control btn-input-fields"
                                                                       data-btn-index="1" placeholder="{{ $label }}" style="width:80px; display:none;">
                                                            @endforeach
                                                        </div>

                                                        {{-- Yes/No Buttons --}}
                                                    @else
                                                        <div class="btn-group" role="group" aria-label="Yes No Toggle">
                                                            <input type="radio" class="btn-check" name="{{ $uniqueName }}"
                                                                   id="yes-{{ $question->id }}" autocomplete="off">
                                                            <label class="btn btn-outline-success yes-btn"
                                                                   for="yes-{{ $question->id }}">Yes</label>

                                                            <input type="radio" class="btn-check" name="{{ $uniqueName }}"
                                                                   id="no-{{ $question->id }}" autocomplete="off">
                                                            <label class="btn btn-outline-success no-btn"
                                                                   for="no-{{ $question->id }}">No</label>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>

                                            <!-- Notes under question -->
                                            @if ($question->notes)
                                                <div class="notes mt-1">{!! $question->notes !!}</div>
                                            @endif
                                        </div>

                                        <div class="answer-display alert p-2 mb-2" style="display: none; width: 100%;"></div>

                                        @if ($question->children->isNotEmpty())
                                            <div class="children-container container mt-2" style="display: none;">
                                                @include('front.includes.question-children', [
                                                    'questions' => $question->children,
                                                ])
                                            </div>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        @endforeach

                        {{-- ✅ Only show button if sections exist --}}
                        <div class="container d-flex justify-content-end">
                            <button type="submit" class="btn button-blue">
                                <i class="fas fa-lock"></i>&nbsp; Complete
                            </button>
                        </div>
                    @endif
                </form>


            </div>

            <!-- Side Panel -->
            <div class="col-lg-3">
                <div class="card shadow-small mb-3">
                    <div class="card-body text-center" style="background-color: #30BEAB;">
                        <i class="bi bi-clock fs-2 mb-2"></i>
                        <p class="fw-bold mb-0"><img class="mx-2" style="filter: invert();"
                                src="{{ asset('assets/Assets/clock.svg') }}" alt=""> Complete our 2 minute
                            questionnaire</p>
                    </div>
                </div>
                <div class="card shadow-small text-center p-3">
                    <i class="fa-solid fa-hourglass fs-2 text-success mb-2"></i>
                    <h6 class="fw-bold">We’re almost done!</h6>
                    <p>
                        To find a treatment suitable for you, we just need you to answer a
                        few questions.
                    </p>
                    <img style="height: 200px; object-fit: contain; background-color: #30BEAB;"
                        src="{{ asset('assets/Assets/doctor2.png') }}" class="rounded mb-2" alt="Pharmacist" />
                    <p class="fw-bold text-success mb-0">Ana Carolina Goncalves</p>
                    <small class="text-muted">Superintendent Pharmacist</small>
                </div>
                <div class="card shadow-small text-center my-2 p-3">
                    <i class="fa-solid fa-lock fs-2 text-success mb-2"></i>
                    <h6 class="fw-bold">Confidential & Secure</h6>
                    <p>
                        <i class="fa-solid fa-check text-success fs-4 mx-2"></i> We will
                        review your details in complete confidence
                    </p>
                    <p>
                        <i class="fa-solid fa-check text-success fs-4 mx-2"></i>
                        Medication will be delivered in plain unlabelled packaging
                    </p>
                    <p>
                        <i class="fa-solid fa-check text-success fs-4 mx-2"></i>Your order
                        will appear on your statement as "Pharma"
                    </p>
                </div>
                <div class="card shadow-small text-center sidebar-card py-3 d-flex flex-column gap-3">
                    <p class="blue" style="font-weight: 500">Lowest Price Guarantee</p>
                    <div class="container d-flex flex-column justify-content-center align-items-center pound">
                        <span class="text-white fw-bold">Lowest Price</span>
                        <span class="text-white fw-bold" style="font-size: 50px;">&#163;</span>
                        <span class="text-white fw-bold">Guarantee</span>
                    </div>
                    <p style="font-size: 12px">We're convinced you won't find your treatment cheaper, but if you do we'll
                        refund the difference.</p>
                    <a href="#" class="blue">Find out more</a>
                </div>
                <div class="card shadow-small text-center p-3 my-2">
                    <i class="fa-solid fa-question fs-2 text-success mb-2"></i>
                    <h6 class="fw-bold">Need help?</h6>
                    <p>
                        If you need help with this medical assessment, contact our helpline:
                    </p>
                    <p class="fw-bold text-success mb-0">0207 112 9014</p>
                    <small class="text-muted">or email us</small>
                    <p class="fw-bold text-success mb-0">help@ifeelshy.co.uk</p>
                </div>
                <div class="card shadow-small my-2 text-center sidebar-card py-3 px-2 d-flex flex-column gap-3">
                    <img style="height: 50px;" src="{{ asset('assets/Assets/tick.svg') }}" alt="">
                    <p class="fs-5 blue">We’re a safe and regulated UK service</p>
                    <img style="height: 40px; width: auto; object-fit: contain;"
                        src="{{ asset('assets/Assets/registered_pharmacy.png') }}" alt="">
                </div>
            </div>
        </div>
    </div>
@endsection
@section('script')
    <script>
        {{--$(document).ready(function() {--}}

        {{--    let allAnswers = [];--}}

        {{--    // ✅ Update or add answer to global array--}}
        {{--    function updateAnswerArray(questionId, answerId, selectedAnswer) {--}}
        {{--        let existing = allAnswers.find(a => a.question_id === questionId);--}}
        {{--        if (existing) {--}}
        {{--            existing.selected_answer = selectedAnswer;--}}
        {{--        } else {--}}
        {{--            allAnswers.push({--}}
        {{--                question_id: questionId,--}}
        {{--                answer_id: answerId,--}}
        {{--                selected_answer: selectedAnswer--}}
        {{--            });--}}
        {{--        }--}}
        {{--        console.log("🧠 Current Answers Array:", allAnswers);--}}
        {{--    }--}}

        {{--    function showAnswer($question, clickedBtnStatus) {--}}

        {{--        let answer = String($question.data('answer') || '');--}}
        {{--        let color = String($question.data('color') || 'alert-success');--}}
        {{--        let btnStatus = String($question.data('btn-status') || 'yes').trim().toLowerCase();--}}

        {{--        let $answerDisplay = $question.find('> .answer-display');--}}
        {{--        if ($answerDisplay.length === 0) {--}}
        {{--            $answerDisplay = $question.next('.answer-display');--}}
        {{--        }--}}

        {{--        let $childrenContainer = $question.children('.children-container');--}}
        {{--        if ($childrenContainer.length === 0) {--}}
        {{--            $childrenContainer = $question.nextAll('.children-container').first();--}}
        {{--        }--}}

        {{--        // 🔹 Radio check mark--}}
        {{--        $question.find(`input[type="radio"][value="${clickedBtnStatus}"]`).prop('checked', true);--}}

        {{--        // 🔹 Remove error--}}
        {{--        $answerDisplay.next('.error-message').remove();--}}

        {{--        // ------------------------------------------------------}}
        {{--        //         🔥 MAIN FIX — COLOR WORKING PROPERLY--}}
        {{--        // ------------------------------------------------------}}

        {{--        if (clickedBtnStatus === btnStatus) {--}}

        {{--            // YES matches required button → show answer + color--}}
        {{--            $answerDisplay--}}
        {{--                .removeClass('alert-success alert-danger alert-warning alert-info')--}}
        {{--                .addClass(color)--}}
        {{--                .text(answer)--}}
        {{--                .show();--}}

        {{--            if ($childrenContainer.length > 0) {--}}
        {{--                $childrenContainer.stop(true, true).slideDown();--}}
        {{--            }--}}

        {{--        } else {--}}

        {{--            // NO clicked → hide answer--}}
        {{--            $answerDisplay--}}
        {{--                .removeClass('alert-success alert-danger alert-warning alert-info')--}}
        {{--                .text('')--}}
        {{--                .hide();--}}

        {{--            if ($childrenContainer.length > 0) {--}}
        {{--                $childrenContainer.stop(true, true).slideUp(function () {--}}
        {{--                    $(this).find('input[type="radio"]').prop('checked', false);--}}
        {{--                    $(this).find('.answer-display').text('').hide();--}}
        {{--                });--}}
        {{--            }--}}
        {{--        }--}}
        {{--    }--}}
        {{--    --}}
        {{--    // ✅ Validate a single question--}}
        {{--    function validateQuestion($question) {--}}
        {{--        let $answerDisplay = $question.find('> .answer-display');--}}
        {{--        if ($answerDisplay.length === 0) $answerDisplay = $question.next('.answer-display');--}}

        {{--        // ✅ Check btn1/btn2 input fields--}}
        {{--        let $visibleInputs = $question.find('.btn-input-fields:visible');--}}
        {{--        if ($visibleInputs.length > 0) {--}}
        {{--            let allFilled = true;--}}
        {{--            $visibleInputs.each(function() {--}}
        {{--                if ($(this).val().trim() === '') allFilled = false;--}}
        {{--            });--}}
        {{--            if (!allFilled) {--}}
        {{--                if ($answerDisplay.next('.error-message').length === 0) {--}}
        {{--                    $answerDisplay.after('<span class="error-message alert alert-danger d-block mt-2 p-2">Please fill all fields for this selection.</span>');--}}
        {{--                }--}}
        {{--                return false;--}}
        {{--            } else {--}}
        {{--                $answerDisplay.next('.error-message').remove();--}}
        {{--                return true;--}}
        {{--            }--}}
        {{--        }--}}

        {{--        // ✅ Check Yes/No or any radio selection--}}
        {{--        let $checkedRadio = $question.find('input[type="radio"]:checked');--}}
        {{--        if ($checkedRadio.length === 0) {--}}
        {{--            if ($answerDisplay.next('.error-message').length === 0) {--}}
        {{--                $answerDisplay.after('<span class="error-message alert alert-danger d-block mt-2 p-2">Please complete this question.</span>');--}}
        {{--            }--}}
        {{--            return false;--}}
        {{--        }--}}

        {{--        // ✅ If answer-display has alert-danger → stop--}}
        {{--        if ($answerDisplay.hasClass('alert-danger')) return false;--}}

        {{--        // ✅ All good → remove any error--}}
        {{--        $answerDisplay.next('.error-message').remove();--}}
        {{--        return true;--}}
        {{--    }--}}

        {{--    // ✅ Handle Yes/No click--}}
        {{--    $(document).on('click', '.yes-btn, .no-btn', function() {--}}
        {{--        let $btn = $(this);--}}
        {{--        let clickedBtnStatus = $btn.hasClass('yes-btn') ? 'yes' : 'no';--}}
        {{--        let radioId = $btn.attr('for');--}}
        {{--        let $radioInput = $('#' + radioId);--}}
        {{--        let $question = $radioInput.closest('.question');--}}
        {{--        if ($question.length === 0) $question = $btn.closest('.question');--}}

        {{--        let questionId = $question.data('question-id');--}}
        {{--        let answerId = $question.data('answer-id') || null;--}}

        {{--        showAnswer($question, clickedBtnStatus);--}}
        {{--        updateAnswerArray(questionId, answerId, clickedBtnStatus);--}}
        {{--    });--}}

        {{--    // ✅ Handle btn1/btn2 buttons click--}}
        {{--    $(document).on('click', '.question .btn-group button', function() {--}}
        {{--        let $btn = $(this);--}}
        {{--        let $question = $btn.closest('.question');--}}
        {{--        let questionId = $question.data('question-id');--}}
        {{--        let answerId = $question.data('answer-id') || null;--}}
        {{--        let selectedAnswer = $btn.text().trim();--}}

        {{--        // Active styling--}}
        {{--        $btn.siblings().removeClass('btn-primary text-white').addClass('btn-outline-secondary');--}}
        {{--        $btn.removeClass('btn-outline-secondary').addClass('btn-primary text-white');--}}

        {{--        // Show related input fields--}}
        {{--        $question.find('.btn-input-fields').hide();--}}
        {{--        let index = $btn.index();--}}
        {{--        $question.find(`.btn-input-fields[data-btn-index="${index}"]`).show();--}}

        {{--        updateAnswerArray(questionId, answerId, selectedAnswer);--}}
        {{--    });--}}

        {{--    // ✅ Form submit--}}
        {{--    $('form').on('submit', function(e) {--}}
        {{--        e.preventDefault();--}}
        {{--        let stopSubmit = false;--}}

        {{--        $('.question:visible').each(function() {--}}
        {{--            let $question = $(this);--}}
        {{--            if (!validateQuestion($question)) stopSubmit = true;--}}
        {{--        });--}}

        {{--        if (stopSubmit) {--}}
        {{--            let $firstError = $('.answer-display.alert-danger:visible, .error-message').first();--}}
        {{--            if ($firstError.length) {--}}
        {{--                $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 300);--}}
        {{--            }--}}
        {{--            return;--}}
        {{--        }--}}

        {{--        if (allAnswers.length === 0) {--}}
        {{--            alert("Please answer at least one question before submitting.");--}}
        {{--            return;--}}
        {{--        }--}}

        {{--        // ✅ Submit via AJAX--}}
        {{--        $.ajax({--}}
        {{--            url: "{{ route('store.order.answer') }}",--}}
        {{--            type: "POST",--}}
        {{--            data: {--}}
        {{--                _token: "{{ csrf_token() }}",--}}
        {{--                answers: allAnswers--}}
        {{--            },--}}
        {{--            success: function(response) {--}}
        {{--                console.log("✅ All answers saved:", response);--}}
        {{--                window.location.href =--}}
        {{--                    "{{ route('categorySlug.treatments', $category->slug) }}";--}}
        {{--            },--}}
        {{--            error: function(xhr) {--}}
        {{--                console.error("❌ Error saving answers:", xhr.responseText);--}}
        {{--            }--}}
        {{--        });--}}
        {{--    });--}}

        {{--});--}}

        $(document).ready(function() {

            let allAnswers = [];

            // ✅ Update or add answer to global array
            function updateAnswerArray(questionId, answerId, selectedAnswer) {
                let existing = allAnswers.find(a => a.question_id === questionId);
                if (existing) {
                    existing.selected_answer = selectedAnswer;
                } else {
                    allAnswers.push({
                        question_id: questionId,
                        answer_id: answerId,
                        selected_answer: selectedAnswer
                    });
                }
                console.log("🧠 Current Answers Array:", allAnswers);
            }

            function showAnswer($question, clickedBtnStatus) {

                let answer = String($question.data('answer') || '');
                let color = String($question.data('color') || 'alert-success');
                let btnStatus = String($question.data('btn-status') || 'yes').trim().toLowerCase();

                let $answerDisplay = $question.find('> .answer-display');
                if ($answerDisplay.length === 0) {
                    $answerDisplay = $question.next('.answer-display');
                }

                let $childrenContainer = $question.children('.children-container');
                if ($childrenContainer.length === 0) {
                    $childrenContainer = $question.nextAll('.children-container').first();
                }

                // 🔹 Radio check mark
                $question.find(`input[type="radio"][value="${clickedBtnStatus}"]`).prop('checked', true);

                // 🔹 Remove error
                $answerDisplay.next('.error-message').remove();

                // ----------------------------------------------------
                //         🔥 MAIN FIX — COLOR WORKING PROPERLY
                // ----------------------------------------------------

                if (clickedBtnStatus === btnStatus) {

                    // YES matches required button → show answer + color
                    $answerDisplay
                        .removeClass('alert-success alert-danger alert-warning alert-info')
                        .addClass(color)
                        .text(answer)
                        .show();

                    if ($childrenContainer.length > 0) {
                        $childrenContainer.stop(true, true).slideDown();
                    }

                } else {

                    // NO clicked → hide answer
                    $answerDisplay
                        .removeClass('alert-success alert-danger alert-warning alert-info')
                        .text('')
                        .hide();

                    if ($childrenContainer.length > 0) {
                        $childrenContainer.stop(true, true).slideUp(function () {
                            $(this).find('input[type="radio"]').prop('checked', false);
                            $(this).find('.answer-display').text('').hide();
                        });
                    }
                }
            }

            // ✅ Validate a single question
            function validateQuestion($question) {
                let $answerDisplay = $question.find('> .answer-display');
                if ($answerDisplay.length === 0) $answerDisplay = $question.next('.answer-display');

                // ✅ Check btn1/btn2 input fields
                let $visibleInputs = $question.find('.btn-input-fields:visible');
                if ($visibleInputs.length > 0) {
                    let allFilled = true;
                    $visibleInputs.each(function() {
                        if ($(this).val().trim() === '') allFilled = false;
                    });
                    if (!allFilled) {
                        if ($answerDisplay.next('.error-message').length === 0) {
                            $answerDisplay.after('<span class="error-message alert alert-danger d-block mt-2 p-2">Please fill all fields for this selection.</span>');
                        }
                        return false;
                    } else {
                        $answerDisplay.next('.error-message').remove();
                        return true;
                    }
                }

                // ✅ Check Yes/No or any radio selection
                let $checkedRadio = $question.find('input[type="radio"]:checked');
                if ($checkedRadio.length === 0) {
                    if ($answerDisplay.next('.error-message').length === 0) {
                        $answerDisplay.after('<span class="error-message alert alert-danger d-block mt-2 p-2">Please complete this question.</span>');
                    }
                    return false;
                }

                // ✅ If answer-display has alert-danger → stop
                if ($answerDisplay.hasClass('alert-danger')) return false;

                // ✅ All good → remove any error
                $answerDisplay.next('.error-message').remove();
                return true;
            }

            $(document).on('click', '.radio-option-input', function () {
                let $opt = $(this).closest('.radio-option-item');
                let selectedValue = $opt.data('value');

                let $question = $opt.closest('.question');
                let questionId = $question.data('question-id');
                let answerId = $question.data('answer-id') || null;

                updateAnswerArray(questionId, answerId, selectedValue);
            });



            // ✅ Handle Yes/No click
            $(document).on('click', '.yes-btn, .no-btn', function() {
                let $btn = $(this);
                let clickedBtnStatus = $btn.hasClass('yes-btn') ? 'yes' : 'no';
                let radioId = $btn.attr('for');
                let $radioInput = $('#' + radioId);
                let $question = $radioInput.closest('.question');
                if ($question.length === 0) $question = $btn.closest('.question');

                let questionId = $question.data('question-id');
                let answerId = $question.data('answer-id') || null;

                showAnswer($question, clickedBtnStatus);
                updateAnswerArray(questionId, answerId, clickedBtnStatus);

            });

            // ✅ Handle btn1/btn2 buttons click
            $(document).on('click', '.question .btn-group button', function () {
                let $btn = $(this);
                let $question = $btn.closest('.question');
                let questionId = $question.data('question-id');
                let answerId = $question.data('answer-id') || null;

                let selectedAnswer = {
                    selected_button: $btn.text().trim(),
                    inputs: {}
                };

                // collect input fields
                let index = $btn.index();

                $question.find('.btn-input-fields').hide();
                $question.find(`.btn-input-fields[data-btn-index="${index}"]`).show();

                $question.find(`.btn-input-fields[data-btn-index="${index}"]`).each(function () {
                    let label = $(this).attr('placeholder');
                    selectedAnswer.inputs[label] = $(this).val();
                });

                updateAnswerArray(questionId, answerId, selectedAnswer);
            });



            $(document).on('input', '.btn-input-fields', function() {
                let $question = $(this).closest('.question');
                let questionId = $question.data('question-id');
                let answerId = $question.data('answer-id') || null;

                let btnIndex = $(this).data('btn-index');
                let btnText = $question.find('.btn-group button').eq(btnIndex).text().trim();

                let selectedAnswer = {
                    selected_button: btnText,
                    inputs: {}
                };

                $question.find(`.btn-input-fields[data-btn-index="${btnIndex}"]`).each(function () {
                    selectedAnswer.inputs[$(this).attr('placeholder')] = $(this).val();
                });

                updateAnswerArray(questionId, answerId, selectedAnswer);
            });




            // ✅ Form submit
            $('form').on('submit', function(e) {
                e.preventDefault();
                let stopSubmit = false;

                $('.question:visible').each(function() {
                    let $question = $(this);
                    if (!validateQuestion($question)) stopSubmit = true;
                });

                if (stopSubmit) {
                    let $firstError = $('.answer-display.alert-danger:visible, .error-message').first();
                    if ($firstError.length) {
                        $('html, body').animate({ scrollTop: $firstError.offset().top - 100 }, 300);
                    }
                    return;
                }

                if (allAnswers.length === 0) {
                    alert("Please answer at least one question before submitting.");
                    return;
                }

                // ✅ Submit via AJAX
                $.ajax({
                    url: "{{ route('store.order.answer') }}",
                    type: "POST",
                    data: {
                        _token: "{{ csrf_token() }}",
                        answers: allAnswers
                    },
                    success: function(response) {
                        console.log("✅ All answers saved:", response);
                        window.location.href =
                            "{{ route('categorySlug.treatments', $category->slug) }}";
                    },
                    error: function(xhr) {
                        console.error("❌ Error saving answers:", xhr.responseText);
                    }
                });
            });

        });

    </script>


@endsection