@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('content')
    {{-- {{ pre($Question) }} --}}
    <div class="container-fluid bgDarkBlue"style="border-radius:0;">
        <div class="d-flex justify-content-center col-12 ">
            <h3 class="text-white mt-4">{{ __('dashboard.copd_checker') }}</h3>
        </div>
        <div id="err" class="text-center mt-3 mb-3">

        </div>
        <form id="que-form" action="{{ route('front.patient.checker-question.store') }}" method="post">
            @csrf
            <input type="hidden" name="is_edit" value="{{ Crypt::encrypt('NO') }}">

            @foreach ($Question as $k => $que)
                @php
                    $k++;

                    $lang = app()->getLocale();
                    $date = new Carbon\Carbon('31 days ago');
                    $month = $lang == 'en' ? $date->format('F') : GetMonthNameWelsh($date->format('F'));
                    $que['question'] = str_replace('MONTHNAME', $month, $que['question']);
                    $sub = array_key_last($Question) + 1;
                @endphp
                <div id="step-{{ $k }}" class="steps" @if ($k != 1) hidden @endif
                    data-step="{{ $k }}">
                    <div id="options" class=" d-flex justify-content-center mt-5">
                        <div class="card col-md-6 col-12" style="box-shadow: 0px 40px 2px -7px #e2efff9c;">
                            <div class="card-body ">
                                <div class="mt-3 d-flex">
                                    <h2>{{ sprintf('%02d', $k) }}<h5 class="text-muted d-flex mx-2 mt-3">of
                                            {{ count($Question) }}
                                        </h5>
                                    </h2>
                                </div>
                                <div class="mt-3  mb-4">
                                    <h5>
                                        {{ $que['question'] }}
                                    </h5>
                                </div>
                                <input type="hidden" name="question_id[]" value="{{ $que['id'] }}">
                                <input type="hidden" name="question_type[]" value="{{ $que['question_type'] }}">
                                <input type="hidden" name="date[]" value="{{ date('Y-m-d') }}">
                                <input type="hidden" name="month_name[]" value="{{ sprintf('%02d', date('m') - 01) }}">
                                <input type="hidden" name="time[]" value="{{ date('h:i a') }}">
                                <input type="hidden" name="year_name[]" value="{{ date('Y') }}">
                                @if ($que['id'] == 14)
                                    <input type="hidden" name="extra_data[]" value="OPTIONAL">
                                @else
                                    <input type="hidden" name="extra_data[]" value="NEW">
                                @endif

                                @if ($que['question_type'] == 'single')
                                    @foreach ($que['option'] as $opt)
                                        <div class="col-12 mb-2">
                                            <input type="radio" class="btn-check " id="opt-single-{{ $opt['id'] }}"
                                                value="{{ $opt['option'] }}" autocomplete="off"
                                                name="opt-single-{{ $k }}" data-title="select an option"
                                                data-step-id="{{ $k }}" data-value="{{ $opt['id'] }}">
                                            <label class="col-12 text-start border-2 border-light btn btn-custom-dark "
                                                for="opt-single-{{ $opt['id'] }}">
                                                {{ $opt['option'] }}</label>
                                        </div>
                                    @endforeach
                                @endif
                                @if ($que['question_type'] == 'number')
                                    <div class="mt-4">
                                        <input type="text" placeholder="{{ __('dashboard.Enter_value') }}"
                                            class="form-control bg-light border-0 number" step="any"
                                            data-title="enter value" data-step-id="{{ $k }}" />
                                    </div>
                                @elseif ($que['question_type'] == 'date')
                                    <input type="date" name="ans_date[]" class="form-control bg-light border-0"
                                        data-title="date" data-step-id="{{ $k }}" max="{{ date('Y-m-d') }}" />
                                @endif
                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center mt-7">
                        <button id="btn-{{ $k }}" type="button" class=" btn btn-white nextStep  fw-bold col-4 "
                            data-step="{{ $k }}" data-next="1">
                            {{ __('dashboard.Next') }} 
                        </button>
                    </div>
                    @if ($k !== 1)
                        <div class="d-flex justify-content-center mt-3">
                            <a type="button" class=" text-white text-center backToLast fw-bold col-4 "
                                data-step="{{ $k }}" data-next="-1">{{ __('dashboard.Back') }}</a>
                        </div>
                    @endif
                </div>
            @endforeach
        </form>
    </div>
@endsection
@section('js')
    <script nonce="{{ $cspNonce }}">
        // validation
        $(document).on('input', ".number", function() {
            DigitOnly(this)
        })
        $(document).on('click', ".nextStep", function() {
            let step = $(this).data('step');
            let next = $(this).data('next');
            showStep(step, next, false);
        })
        $(document).on('click', ".backToLast", function() {
            let step = $(this).data('step');
            let next = $(this).data('next');
            showStep(step, next, true);
        })

        const form = document.querySelectorAll(".steps");
        const inputs = document.querySelectorAll("input");

        function showStep(step, next, back) {
            // find step
            const getStep = step + next;

            // console.log(form.length);
            if (back == true) {
                if (getStep == 0) return;
                // process
                for (let item of form) {
                    item.hidden = (item.dataset.step == getStep) ? false : true;
                }
            } else {
                let thisInput = $(`[data-step-id=${step}]`);

                if (thisInput.val() == "") {
                    html =
                        ` <span id="errorMsg" class="alert alert-secondary col-4 text-white">{{ __('dashboard.Enter_value') }}</span>`;
                    error = $('#err').html(html);
                    goNext = false;
                } else {
                    error = $('#err').html("");
                    goNext = true;
                }

                $.each(thisInput, function(indexInArray, valueOfElement) {
                    if (valueOfElement.type == "radio") {
                        if (!$(`[data-step-id=${step}]:checked`).val()) {
                            html =
                                ` <span id="errorMsg" class="alert alert-secondary col-4 text-white">{{ __('dashboard.select_option') }}</span>`;
                            error = $('#err').html(html);
                            goNext = false;
                        } else {

                            error = $('#err').html("");
                            goNext = true;
                        }
                    }
                });
                if (goNext == true) {

                    let opt_val_input = $(`[data-step-id=${step}]:checked`);
                    opt_val = opt_val_input.attr('data-value');
                    if (opt_val == undefined) {
                        opt_val = "";
                    }
                    $('#que-form').append(`<input type="hidden" name="option_id[${step-1}]" value="${opt_val}"> `);
                    let option_val = opt_val_input.val();

                    if (option_val == undefined) {
                        option_val = "";
                    }
                    console.log(option_val);

                    $('#que-form').append(`<input type="hidden" name="option_value[${step-1}]" value="${option_val}"> `);
                    let num_val_input = $(`[data-step-id=${step}]`);
                    let ans_value = num_val_input.val();
                    if (isNaN(ans_value)) {
                        ans_value = "";
                    }
                    $('#que-form').append(`<input type="hidden" name="ans_value[${step-1}]" value="${ans_value}"> `);
                }

                if (getStep == 0 || goNext == false) return;
                // process
                for (let item of form) {
                    item.hidden = (item.dataset.step == getStep) ? false : true;
                }

                if (goNext == true && getStep == {{ $sub + 1 }}) {
                    $('#que-form').submit();
                }


            }

        }
    </script>
@endsection