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

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

{% block content %}
  <div class="kt-subheader kt-grid__item"></div>

  <form action="{{ path(post_form_url) }}" 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</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') }}" >
            <input type="hidden" name="id" value="{{ id }}">

            <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"  >
              <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>
            </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

    $('#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_url) }}',
        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 %}