@extends('Front.PatientLayout.mainLayout')
@section('title', 'Profile')
@section('content')
    {{-- {{ pre($Question) }} --}}
    <div class="container-fluid  m-0 p-0">

        <div class="container-fluid bgDarkBlue h-100"style="border-radius:0;">
            <div class="d-flex justify-content-center col-12 ">
                <h3 class="text-white mt-4">MRC</h3>
            </div>
            <div id="err" class="text-center mt-3 mb-3">

            </div>
            <form id="mrcFrm" action="{{ route('front.patient.store-sp02-result') }}" method="post">
                @csrf
                <div>
                    <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">
                                    <h4>
                                        {{ __('test.mrc_question') }}
                                    </h4>
                                </div>
                                {{-- <input type="hidden" name="question_id[]" value="{{ $que['id'] }}">
                                    <input type="hidden" name="question_type[]" value="{{ $que['question_type'] }}"> --}}
                                <input type="hidden" name="arr[Question_name]" value="Your MRC breathlessness grade">
                                <input type="hidden" name="arr[extra_data]">
                                <input type="hidden" name="arr[date]" value="{{ date('d-m-Y') }}">
                                <input type="hidden" name="arr[time]" value="{{ date('H:m A') }}">
                                <input type="hidden" name="arr[category]" value="Hospital">
                                <input type="hidden" name="arr[sub_category]" value="MRC Test">
                                <input type="hidden" name="is_edit" value="NO">
                                <input type="hidden" name="is_mrc_test" value="YES">

                                <div class="col-12 mb-2">
                                    <input id="opt-1" name="arr[value]" type="radio" class="btn-check "
                                        value="1">
                                    <label class="mt-3 col-12 text-start border-2 border-light btn btn-custom-dark "
                                        for="opt-1"
                                        data-value="Not troubled by breathlessness except on strenous exercise">
                                        {{ __('test.mrc_que_opt1') }}
                                    </label>
                                    <input value="2" id="opt-2" name="arr[value]" type="radio"
                                        class="btn-check ">
                                    <label class="col-12 text-start border-2 border-light btn btn-custom-dark "
                                        for="opt-2"
                                        data-value="Short of breath when hurrying on the level or walking up a slight hill">{{ __('test.mrc_que_opt2') }}
                                    </label>
                                    <input value="3" id="opt-3" name="arr[value]" type="radio"
                                        class="btn-check ">
                                    <label class="col-12 text-start border-2 border-light btn btn-custom-dark "
                                        for="opt-3"
                                        data-value="Walks slower than most people of the same age because of breathlessness or has to stop for breath when walking at own pace on level ground">{{ __('test.mrc_que_opt3') }}
                                    </label>
                                    <input value="4" id="opt-4" name="arr[value]" type="radio"
                                        class="btn-check ">
                                    <label class="col-12 text-start border-2 border-light btn btn-custom-dark "
                                        for="opt-4"
                                        data-value="Stops for breath after walking about 100m, or stops after a few minutes waking on level ground">{{ __('test.mrc_que_opt4') }}
                                    </label>
                                    <input value="5" id="opt-5" name="arr[value]" type="radio"
                                        class="btn-check ">
                                    <label class="col-12 text-start border-2 border-light btn btn-custom-dark "
                                        for="opt-5"
                                        data-value="Too Breathless to leave the house or breathless on dressing or
                                        undressing">{{ __('test.mrc_que_opt5') }}
                                    </label>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center mt-7">
                        <button id="subBtn" type="button" 
                            class=" btn btn-white text-center  fw-bold col-4 "> {{ __('COPDplan.Submit_title') }}</button>
                    </div>
                </div>

            </form>
        </div>
    </div>
@section('js')
    <script nonce="{{ $cspNonce }}">
        $("#subBtn").click(function() {
            let thisInput = $('input[type="radio"]');
            $.each(thisInput, function(indexInArray, valueOfElement) {
                if (valueOfElement.type == "radio") {
                    if (!$(`[name="arr[value]"]:checked`).val()) {
                        html =
                            ` <span id="errorMsg" class="alert alert-secondary col-4 text-white">{{ __('dashboard.select_option') }}</span>`;
                        error = $('#err').html(html);
                    } else {
                        error = $('#err').html("");
                        $('#subBtn').attr("type", 'submit')
                    }
                }
            });
            let lbl = $(`[name="arr[value]"]:checked`).next();
            // console.log(lbl.attr("data-value"));
            if (lbl != undefined) {
                $('#mrcFrm').append(
                    `<input type="hidden" name="arr[extra_data]" value="${lbl.attr("data-value")}">`);
            }
        });
    </script>
@endsection

@endsection