@include('pretests.patient_info')
<div class="row mt-4">
    <div id="form-date-group" class="form-group col-12 mb-4">
        <label for="form-date" class="col-form-label required">{{ __('pretests.form_date') }}</label>
        <div class="input-group date" id="form-date" data-target-input="nearest">
            <input type="text" name="form-date" class="form-control datetimepicker-input" data-target="#form-date" value="{{ date('Y-m-d') }}">
            <div class="input-group-append" data-target="#form-date" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fas fa-calendar"></i></div>
            </div>
        </div>
    </div>
    <div id="q1-group" class="form-group col-12 mb-4">
        <label for="q1" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q1') }}</label><br>
        @php $answers = __('pretests.skin_care_answers.q1') @endphp
        @foreach ((array) $answers as $key => $answer)
            <div class="custom-control custom-radio ml-4">
                <input type="radio" name="q1" id="q1_{{ $key }}" value="{{ $key }}"
                    class="custom-control-input">
                <label class="custom-control-label" for="q1_{{ $key }}">{{ $answer }}</label>
            </div>
        @endforeach
    </div>
    @if ($patient->gender == 'f')
        <div id="q2-group" class="form-group col-12 mb-4">
            <label for="q2" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q2') }}</label><br>
            <input type="text" name="q2" class="form-control">
        </div>
        <div id="q3-group" class="form-group col-12 mb-4">
            <label for="q3" class="form-label font-weight-bold">
                {{ __('pretests.skin_care_questions.q3') }}
            </label><br>
            <div class="custom-control custom-radio custom-control-inline ml-4">
                <input type="radio" name="q3" id="q3_1" value="1" class="custom-control-input">
                <label class="custom-control-label" for="q3_1">{{ __('patient/common.yes') }}</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline ml-4">
                <input type="radio" name="q3" id="q3_2" value="0" class="custom-control-input">
                <label class="custom-control-label" for="q3_2">{{ __('patient/common.no') }}</label>
            </div>
            <div id="q3-input" class="row">
                <div class="col-12 col-lg-6">
                    <input type="text" name="q3-input" class="form-control d-none disabled" disabled>
                </div>
            </div>
        </div>
    @endif
    <div id="q4-group" class="form-group col-12 mb-4">
        <label for="q4" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q4') }}</label><br>
        <div class="custom-control custom-radio custom-control-inline ml-4">
            <input type="radio" name="q4" id="q4_1" value="1" class="custom-control-input">
            <label class="custom-control-label" for="q4_1">{{ __('patient/common.yes') }}</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline ml-4">
            <input type="radio" name="q4" id="q4_2" value="0" class="custom-control-input">
            <label class="custom-control-label" for="q4_2">{{ __('patient/common.no') }}</label>
        </div>
        <div id="q4-input" class="row">
            <div class="col-12 col-lg-6">
                <input type="text" name="q4-input" class="form-control d-none disabled" disabled>
            </div>
        </div>
    </div>
    <div id="q5-group" class="form-group col-12 mb-4">
        <label for="q5" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q5') }}</label><br>
        <input type="text" name="q5" class="form-control">
    </div>
    <div id="q6-group" class="form-group col-12 mb-4">
        <label for="q6" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q6') }}</label><br>
        <div class="custom-control custom-radio custom-control-inline ml-4">
            <input type="radio" name="q6" id="q6_1" value="1" class="custom-control-input">
            <label class="custom-control-label" for="q6_1">{{ __('patient/common.yes') }}</label>
        </div>
        <div class="custom-control custom-radio custom-control-inline ml-4">
            <input type="radio" name="q6" id="q6_2" value="0" class="custom-control-input">
            <label class="custom-control-label" for="q6_2">{{ __('patient/common.no') }}</label>
        </div>
        <div id="q6-input" class="row">
            <div class="col-12 col-lg-6">
                <input type="text" name="q6-input" class="form-control d-none disabled" disabled>
            </div>
        </div>
    </div>
    <div id="q7-group" class="form-group col-12 mb-4">
        <label for="q7" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q7') }}</label><br>
        <input type="text" name="q7" class="form-control">
    </div>
    <div id="q8-group" class="form-group col-12 mb-4">
        <label for="q8" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q8') }}</label><br>
        <input type="text" name="q8" class="form-control">
    </div>
    <div id="q9-group" class="form-group col-12 mb-4">
        <label for="q9" class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q9') }}</label><br>
        @php $answers = __('pretests.skin_care_answers.q9') @endphp
        @foreach ((array) $answers as $key => $answer)
            <div class="custom-control custom-radio ml-4">
                <input type="radio" name="q9" id="q9_{{ $key }}" value="{{ $key }}"
                    class="custom-control-input">
                <label class="custom-control-label" for="q9_{{ $key }}">{{ $answer }}</label>
            </div>
        @endforeach
        <input type="text" name="q9-input" class="form-control">
    </div>
    @if (user_id())
        <div id="q10-group" class="form-group col-12 mb-4">
            <label for="q10"
                class="form-label font-weight-bold">{{ __('pretests.skin_care_questions.q10') }}</label><br>
            <textarea class="form-control" name="q10" rows="5"></textarea>
        </div>
    @endif
    <div class="form-group mb-4 col-12">
        <label for="pretest-attachment" class="form-label font-weight-bold">
            {{ __('admin/complaints.form.attachment') }}
            <small class="text-muted">(5 MB maximum)</small>
        </label>
        <div class="input-group">
            <div class="custom-file">
                <input type="file" name="attachment" class="custom-file-input" id="pretest-attachment"aria-describedby="pretest-attachment">
                <label class="custom-file-label " for="pretest-attachment">
                    {{ __('admin/complaints.form.browse') }}
                </label>
            </div>
        </div>
    </div>
    <div class="form-group mb-4 col-12">
        <label for="notes" class="form-label font-weight-bold">{{ __('pretests.notes') }}</label><br>
        <textarea name="notes" class="form-control" id="notes" rows="5"></textarea>
    </div>
    <x-admin.form.save-button title="{{ __('admin/common.buttons.save') }}" />
    <script>
        $(document).ready(function() {
            $('#q3_1').change(function() {
                hideInput(this)
            });
            $('#q3_2').change(function() {
                showInput(this)
            });
            $('#q4_1').change(function() {
                showInput(this)
            });
            $('#q4_2').change(function() {
                hideInput(this)
            });
            $('#q6_1').change(function() {
                showInput(this)
            });
            $('#q6_2').change(function() {
                hideInput(this)
            });
        });

        function showInput(radio) {

            let q = $(radio).attr('name');

            $(radio).parent().parent().find('#' + q + '-input input').removeClass('d-none disabled').removeAttr('disabled');

        }

        function hideInput(radio) {

            let q = $(radio).attr('name');

            $(radio).parent().parent().find('#' + q + '-input input').addClass('d-none disabled').attr('disabled',
                'disabled');

        }
    </script>
</div>