{% extends 'base.html.twig' %}

{% block title %}
{% if modes == 'DEMOGRAPHICS' %}
Demographic
{% elseif modes == 'AADHAAR_OTP' %}
Aadhar OTP
{% else %}
Mobile OTP
{% endif %}
{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('link_verify_details') }}" autocomplete="off" method="post" class="kt-form" id="frmVerifyOtp">
    <div class="kt-container kt-grid__item kt-grid__item--fluid">
        <div class="kt-portlet kt-portlet--mobile">
            <div class="kt-portlet__head kt-portlet__head--lg">
                {% if modes == 'DEMOGRAPHICS' %}
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">Demographic</h3>
                </div>
                {% elseif modes == 'AADHAAR_OTP' %}
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">Aadhaar OTP</h3>
                </div>
                {% else %}
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">Mobile OTP</h3>
                </div>
                {% endif %}
                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <a href="{{ path('case_index') }}" class="btn btn-clean btn-icon-sm mr-2"><i
                                class="la la-long-arrow-left"></i>Back</a>
                        <a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
                        <button type="submit" class="btn btn-primary btn-bold">Next</button>
                    </div>
                </div>
            </div>

            <div class="kt-portlet__body">
                {% include 'parts/flash.html.twig' %}
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                <input type="hidden" name="type" value="{{ type }}">
                <input type="hidden" name="txn_id" value="{{ txn_id }}">
                <input type="hidden" name="health_address" value="{{ health_address }}">
                <input type="hidden" name="modes" class="modes" value="{{ modes }}">
                {% if modes == 'DEMOGRAPHICS' %}
                    <div class="form-group row">
                        <label class="col-2 col-form-label font-weight-bold required">Name</label>
                        <div class="col-lg-6 col-xl-4">
                            <input type="text" id="name" class="form-control" name="name" required="required" maxlength="50"
                                readonly value="{{patientArr.name}}">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2 col-form-label font-weight-bold required">Gender</label>
                        <div class="col-5">
                            <div class="kt-radio-inline">
                                <label class="kt-radio">
                                    <input type="radio" id="genderM" name="gender" required="required" class="kt-radio"
                                        value="M" {{patientArr.gender=='Male' ? 'checked' :''}} {{patientArr.gender=='Male' ? '' :'disabled'}}>
                                    <label class="non-req required" for="genderM">Male</label>
                                    <span></span>
                                </label>
                                <label class="kt-radio">
                                    <input type="radio" id="genderF" name="gender" required="required" class="kt-radio"
                                        value="F" {{patientArr.gender=='Female' ? 'checked' :''}} {{patientArr.gender=='Female' ? '' :'disabled'}}>
                                    <label class="non-req required" for="genderF">Female</label>
                                    <span></span>
                                </label>
                                <label class="kt-radio">
                                    <input type="radio" id="genderF" name="gender" required="required" class="kt-radio"
                                        value="O" {{patientArr.gender=='Other' ? 'checked' :''}} {{patientArr.gender== 'Other' ? '' :'disabled'}}>
                                    <label class="non-req required" for="genderF">Other</label>
                                    <span></span>
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2 col-form-label font-weight-bold required" for="patient_dob">Date of
                            Birth</label>
                        <div class="col-lg-6 col-xl-4">
                            <input type="text" id="{{patientArr.dob ? '':'patientDob'}}" readonly="{{patientArr.dob ? 'readonly':''}}" name="dob" required="required"
                                value="{{patientArr.dob ? patientArr.dob :''}}" class="form-control dob"
                                oninput="this.value = this.value.replace(/[^]/g, '')">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-2 col-form-label font-weight-bold">Mobile no.</label>
                        <div class="col-lg-6 col-xl-4">
                            <input type="text" id="mobile" class="form-control"
                                value="{{patientArr.mobile ? patientArr.mobile :''}}" name="mobile" minlength="10"
                                maxlength="10">
                        </div>
                    </div>
                {% else %}
                    <div class="form-group row">
                        <label class="col-2 col-form-label font-weight-bold">OTP</label>
                        <div class="col-lg-6 col-xl-4">
                            <input type="number" id="otp" class="form-control" name="otp" maxlength="6">
                            {# <span class="msg"></span> #}
                        </div>
                        {# <div class="">
                            <span id="timer" class="btn btn-default timer"></span>
                            <button disabled="disabled" class="btn btn-link">Resend OTP</button>
                        </div> #}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
</form>
<script src="{{ asset('assets/js/jquery.min.js') }}"></script>
<script>
    $(document).ready(function () {
        $('#frmVerifyOtp').validate({ // initialize the plugin
            rules: {
                otp: {
                    required: true,
                    minlength: 1
                },
            },
            messages: {
                otp: {
                    required: "Please enter OTP",
                },
            }
        });
        if (KTUtil.isRTL()) {
            arrows = {
                leftArrow: '<i class="la la-angle-right"></i>',
                rightArrow: '<i class="la la-angle-left"></i>'
            };
        } else {
            arrows = {
                leftArrow: '<i class="la la-angle-left"></i>',
                rightArrow: '<i class="la la-angle-right"></i>'
            };
        }
        $('#patientDob').datepicker({
            rtl: KTUtil.isRTL(),
            todayHighlight: true,
            autoclose: true,
            orientation: "bottom left",
            templates: arrows,
            endDate: '+0d',
            format: 'yyyy-mm-dd'
        });

        if ($('.modes').val() != "DEMOGRAPHICS") {
            timer(10);
            let timerOn = false;
            var count = 0;

            $('#otp').on('blur', function () {
                if ($(this).val() != '') {
                    $('button[type=submit]').attr('disabled', false);
                } else {
                    $('button[type=submit]').attr('disabled', false);
                }
            });
        }

        $('.resendOTP').on('click', function () {
            count += 1;
            if (count == 2) {
                $(this).hide();
            }
            $(this).attr('disabled', true);
            timer(10); // TODO when click on resent otp btn that start the timer
            var txnId = $('.txn_id').val();
            var responseNew = 'success';
            Swal.fire({
                title: 'Please Wait !',
                allowOutsideClick: false,
                onBeforeOpen: () => {
                    Swal.showLoading()
                },
            });

            setTimeout(function () {
                if (responseNew == 'invalid') {
                    $('.aadhaar_number_msg').text('Invalid OTP.').css('color', 'red');
                } else if (responseNew == 'success') {
                    swal.close();
                    $('.msg').text('OTP sent successfully.').css('color', 'green');
                } else if (responseNew == 'bad_request') {
                    $('.aadhaar_number_msg').text('Bad request, check request before retrying').css('color', 'red');
                } else if (responseNew == 'no_found') {
                    $('.aadhaar_number_msg').text('Not found').css('color', 'red');
                }
            }, 2500);
        });
    });

    if ($('.modes').val() != "DEMOGRAPHICS") {
        let timerOn = true;
        function timer(remaining) {
            var m = Math.floor(remaining / 60);
            var s = remaining % 60;

            m = m < 10 ? '0' + m : m;
            s = s < 10 ? '0' + s : s;
            document.getElementById('timer').innerHTML = m + ':' + s;
            remaining -= 1;

            if (remaining >= 0 && timerOn) {
                setTimeout(function () {
                    timer(remaining);
                }, 1000);
                return;
            }

            if (!timerOn) {
                // Do validate stuff here
                return true;
            }

            $('.resendOTP').attr('disabled', false);
        }
    }
</script>
{% endblock %}