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

{% block title %}Consent Request{% endblock %}

{% block content %}
<div class="kt-subheader kt-grid__item"></div>
<form action="{{ path('request_init') }}" method="post" class="kt-form" id="reqInit" autocomplete="off">
    <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">
                <div class="kt-portlet__head-label">
                    <h3 class="kt-portlet__head-title">Consent Request Form</h3>
                </div>

                <div class="kt-portlet__head-toolbar">
                    <div class="kt-portlet__head-wrapper">
                        <a href="{{ app.request.uri }}" class="btn btn-secondary btn-bold mr-2">Reset</a>
                        <button type="submit" class="btn btn-primary btn-bold" id="submitBtn">Next</button>
                    </div>
                </div>
            </div>

            <div class="kt-portlet__body">
                {% include 'parts/flash.html.twig' %}
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold required">Patient identifier</label>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    <div class="input-group col-lg-6 col-xl-4">
                        <input id="health_id" placeholder="Search Health Id" class="form-control" type="text"
                            name="health_id"
                            oninput="this.value = this.value.replace(/[^0-9a-zA-Z]/g, '').replace(/(\..*)\./g, '$1')"
                            autocomplete="off">
                        <input type="hidden" name="name" value="" id="name_fn">
                        <div class="input-group-append">
                            {% if abha_env == 'sandbox' %}
                            <span class="input-group-text" id="basic-addon2">{{abha_sbx}}</span>
                            {% else %}
                            <span class="input-group-text" id="basic-addon2">{{abha_prod}}</span>
                            {% endif %}
                        </div>
                    </div>
                    <span class="errors_health_id"
                        style="position: absolute;margin-top: 40px; margin-left: 232px;color: red;"></span>
                    <div class="col-md-2">
                        <a href="javascript:void(0);" id="patient_find" class="btn btn-primary btn-bold"
                            role="button">Search</a>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold required">Purpose of request</label>
                    <div class="input-group col-lg-6 col-xl-4">
                        <select name="purpose" class="form-control" id="consent-cases" style="width: 100%">
                            <option value="CAREMGT">Care Management</option>
                            <option value="BTG">Break The Glass</option>
                            <option value="PUBHLTH">Public Health</option>
                            <option value="HPAYMT">Healthcare Payment</option>
                            <option value="DSRCH">Disease Specific Healthcare Research</option>
                            <option value="PATRQT">Self Requested</option>
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold required">Health info date range</label>
                    <div class="input-group col-lg-6 col-xl-4">
                        <input type="text" name="fromTo" class="form-control consent_date" readonly="readonly" value="">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-calendar"></i>
                            </span>
                        </div>
                        </input>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold required">Health info type</label>
                    <div class="col-10 col-xl-4">
                        <div class="row" width="100%">
                            <div class="col-6">
                                <div class="checkbox">
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="OPConsultation">
                                        <span></span>
                                        OP Consultation
                                    </label>
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="DischargeSummary">
                                        <span></span>
                                        Discharge Summary
                                    </label>
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="ImmunizationRecord">
                                        <span></span>
                                        Immunization Record
                                    </label>
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="WellnessRecord">
                                        <span></span>
                                        Wellness Record
                                    </label>
                                </div>
                            </div>
                            <div class="col-6" width="100%">
                                <div class="checkbox">
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="DiagnosticReport">
                                        <span></span>
                                        Diagnostic Record
                                    </label>
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="Prescription">
                                        <span></span>
                                        Prescription
                                    </label>
                                    <label class="kt-checkbox kt-checkbox--bold kt-checkbox--brand">
                                        <input type="checkbox" name="type[]" value="HealthDocumentRecord">
                                        <span></span>
                                        Health Document Record
                                    </label>
                                </div>
                            </div>
                        </div>
                        <span class="errors_type" style="color: red;"></span>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-2 col-form-label font-weight-bold required">Consent expiry</label>
                    <div class="input-group col-lg-6 col-xl-4">
                        <input type="text" name="expiry" class="form-control consent_date_expiry" required
                            readonly="readonly" value="">
                        <div class="input-group-append">
                            <span class="input-group-text">
                                <i class="la la-calendar"></i>
                            </span>
                        </div>
                        <span class="errors_expiry position-absolute mt-5" style="color: red;"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
{% endblock %}
{% block scripts %}
{{ parent() }}

<script>
    var arrows;
    $(function () {
        $('#reqInit').validate({ // initialize the plugin
            errorClass: "error",
            errorElement: "span",
            rules: {
                health_id: {
                    required: true,
                },
                "type[]": {
                    required: true,
                },
                consent_date_expiry: {
                    required: true,
                }
            },
            messages: {
                health_id: {
                    required: "Please enter health id",
                },
                "type[]": {
                    required: "Please select at least one type",
                },
                expiry: {
                    required: "Please select expiry date",
                }
            },
            errorPlacement: function (error, element) {
                if (element.attr("name") == "health_id") {
                    error.appendTo('.errors_health_id');
                } else if (element.attr("name") == "type[]") {
                    error.appendTo('.errors_type');
                } else if (element.attr("name") == "expiry") {
                    error.appendTo('.errors_expiry');
                } else {
                    error.insertBefore(element);

                }
            }
        });
    })

    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>'
        };
    }

    $('.consent_date').daterangepicker({
        buttonClasses: 'btn',
        applyClass: 'btn-primary',
        cancelClass: 'btn-secondary',
        templates: arrows,
        locale: {
            format: 'DD/MM/YYYY'
        },
        autoclose: true,
        maxDate: new Date()
    }, function (start, end, label) {
        $('.consent_date').val(start.format('DD-MM-YYYY') + ' / ' + end.format('DD-MM-YYYY'));
    });

    $('.consent_date_expiry').datepicker({
        rtl: KTUtil.isRTL(),
        autoclose: true,
        todayHighlight: true,
        //orientation: 'bottom left',
        templates: arrows,
        startDate: '+0d',
        maxDate: new Date(),
        endDate: '+30d',
        format: 'dd/mm/yyyy'
    }, function (start, end, label) {
        $('.consent_date_expiry').val(start.format('YYYY-MM-DD'));
    });

    // consent-cases
    $('#consent-cases').select2({

    });

    $('#patient_find').on('click', function () {
        var health_id = $('#health_id').val();
        if (health_id.length <= 6) {
            swal.fire("", "Please enter minimum 6 characters for searching!", "error");
            return false;
        }

        $("#patient_find").prop("disabled", true);

        $.ajax({
            method: "POST",
            url: "{{ path('patient_find') }}",
            data: { 'health_id': health_id },
            beforeSend: function () {
                Swal.fire({
                    title: 'Please Wait !',
                    allowOutsideClick: false,
                    onBeforeOpen: () => {
                        Swal.showLoading()
                    },
                });
            },
            complete: function () {
                swal.close()
            },
            success: function (response) {
                if (response == 'invalid') {
                    $('.pt_find').text('Please enter minimum 6 characters for searching.').css('color', 'red');
                } else if (response == 'error') {
                    $('.pt_find').text('Something want wrong please try again.').css('color', 'red');
                } else if (response != '') {
                    $('.pt_find').text('Patient find sucessfully.').css('color', 'green');
                    $('#name_fn').val(response);
                } else {
                    $('.pt_find').text('Patient not find.').css('color', 'red');
                }
                $("#patient_find").prop("disabled", false);
            }
        });
        $('.reset').on('click', function () {
            $('.pt_find').text('');
            $('#health_id').val('');
        });
    });
</script>
{% endblock %}