@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('content')
    <div class="container-fluid p-0 m-0">
        <div class="bg-darkBlue">
            <div class="text-center text-white  p-4 ">
                <strong class="mt-5">{{ __('test.assesment_que_title') }}</strong>
                <p class="">{{ __('test.assesment_que_sub_title') }}</p>
            </div>
        </div>
        <form id="assesmentTestForm" action="{{ route('front.patient.store-assesment-questions') }}" method="post">
            @csrf
            <input type="hidden" name="is_edit" value="NO">
            <input type="hidden" name="sub_category_val" value="Do an COPD Assessment Test">

            <div class="container-fluid mt-4 p-2">
                <div class="text-center">
                    <div id="err" class="text-center mt-3 mb-3">
                    </div>
                    <div id="que-1">
                        <p>{{ __('test.assesment_que1_title1') }}</p>

                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]" value="Select how you feel about your cough today">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">


                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="cough" id="cough-{{ $i }}"
                                    value="{{ $i }}" data-id="this-1">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="cough-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que1_title2') }}</p>
                        <div id="btn-que-1" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="2">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 1 {{ __('register.of') }} 8</p>
                    </div>
                    <div id="que-2" hidden>
                        <p>{{ __('test.assesment_que2_title1') }}</p>

                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]" value="Select how you feel about your phlegm (Mucus)">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="phlegm" id="phlegm-{{ $i }}"
                                    value="{{ $i }}" data-id="this-2">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="phlegm-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que2_title2') }}</p>
                        <div id="btn-que-2" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="3">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 2 {{ __('register.of') }} 8</p>
                    </div>
                    <div id="que-3" hidden>
                        <p>{{ __('test.assesment_que3_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]" value="Select how you feel about your chest">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="chest" id="chest-{{ $i }}"
                                    value="{{ $i }}" data-id="this-3">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="chest-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que3_title2') }}</p>
                        <div id="btn-que-3" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="4">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 3 {{ __('register.of') }} 8</p>

                    </div>
                    <div id="que-4" hidden>
                        <p>{{ __('test.assesment_que4_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]"
                            value="Select how you feel about you walk up a hill or a flight of stairs">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="breath" id="breath-{{ $i }}"
                                    value="{{ $i }}" data-id="this-4">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="breath-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que4_title2') }}</p>
                        <div id="btn-que-4" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="5">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 4 {{ __('register.of') }} 8</p>

                    </div>
                    <div id="que-5" hidden>
                        <p>{{ __('test.assesment_que5_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]"
                            value="Select how you feel about you do any activities at home">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="activity"
                                    id="activity-{{ $i }}" value="{{ $i }}" data-id="this-5">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="activity-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que5_title2') }}</p>
                        <div id="btn-que-5" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="6">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 5 {{ __('register.of') }} 8</p>

                    </div>
                    <div id="que-6" hidden>
                        <p>{{ __('test.assesment_que6_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]"
                            value="Select how you feel about you confident of leaving your home despite your lung condition">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="lung" id="lung-{{ $i }}"
                                    value="{{ $i }}" data-id="this-6">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="lung-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que6_title2') }}</p>
                        <div id="btn-que-6" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="7">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 6 {{ __('register.of') }} 8</p>

                    </div>
                    <div id="que-7" hidden>
                        <p>{{ __('test.assesment_que7_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]" value="Select how you feel about your sleep">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="soudly" id="soudly-{{ $i }}"
                                    value="{{ $i }}" data-id="this-7">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="soudly-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que7_title2') }}</p>
                        <div id="btn-que-7" class="text-center mt-5">
                            <button type="button"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step"
                                data-step="8">{{ __('register.next') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 7 {{ __('register.of') }} 8</p>
                    </div>
                    <div id="que-8" hidden>
                        <p>{{ __('test.assesment_que8_title1') }}</p>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment Test">
                        <input type="hidden" name="Question_name[]" value="Select how you feel about your energy">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                        <div class=" mb-3">
                            @for ($i = 0; $i <= 5; $i++)
                                <input type="radio" class=" btn-check" name="energy" id="energy-{{ $i }}"
                                    value="{{ $i }}" data-id="this-8">
                                <label
                                    class=" btn btn-custom-dark border  border-2     
                             m-2 rounded-5"
                                    for="energy-{{ $i }}">{{ $i }}</label>
                                <br>
                            @endfor
                        </div>
                        <p>{{ __('test.assesment_que8_title2') }}</p>
                        <div id="btn-que-8" class="text-center mt-5">
                            <button type="button" data-step="9"
                                class="col-md-4 btn btn-dark bgDarkBlue mx-3 mt-2 btn-md fw-bold change-step">{{ __('register.done') }}</button>
                        </div>
                        <p class="text-muted">{{ __('test.assesment_que_page') }} 8 {{ __('register.of') }} 8</p>
                    </div>
                    <div hidden>
                        <input type="hidden" name="category[]" value="Hospital">
                        <input type="hidden" name="sub_category[]" value="Do an COPD Assessment sum">
                        <input type="hidden" name="Question_name[]" value="Total sum">
                        <input type="hidden" name="extra_data[]" value="">
                        <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                        <input type="hidden" name="time[]" value="{{ date('H:i A') }}">
                    </div>
                    <div id="que-ans"></div>
                </div>
            </div>
        </form>
    </div>

@section('js')
    <script nonce="{{ $cspNonce }}">
        let currentStep = 1;
        let lastStep = 8;
        let sumInp = [];


        $(".change-step").click(function() {
            currentStep = $(this).attr('data-step');

            // console.log();
            let inputs = $(`input[type="radio"]`);
            $.each(inputs, function(indexInArray, valueOfElement) {
                if (!$(`[data-id=this-${currentStep-1}]:checked`).val()) {
                    html =
                        `<span id="errorMsg" class="alert alert-secondary col-4 text-white">{{ __('test.assesment_que_validation') }}</span>`;
                    error = $('#err').html(html);
                    goNext = false;
                } else {
                    error = $('#err').html("");
                    goNext = true;
                }
            });

            inpVal = $(`[data-id=this-${currentStep-1}]:checked`).val();
            if (inpVal != undefined) {
                sumInp.push(parseInt(inpVal))
                $("#que-ans").append(`<input type="hidden" name="ans_value[]" value="${inpVal}"> `);
            }

            for (let i = 1; i <= lastStep; i++) {
                if (goNext == true) {
                    if (currentStep != i) {
                        $(`#que-${i}`).attr('hidden', true);
                        // console.log(i);
                    } else {
                        $(`#que-${i}`).attr('hidden', false);
                    }
                } else {
                    return;
                }
            }

            let sumOfArr = sumInp.reduce((partialSum, a) => partialSum + a, 0);
            if ((currentStep - 1) == 8) {
                $("#que-ans").append(`<input type="hidden" name="ans_value[]" value="${sumOfArr}"> `);
                $("#assesmentTestForm").submit();
            }
        });
    </script>
@endsection
@endsection