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

{% block title %}ABHA Account Profile{% endblock %}

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

  <form action="{{ path('generate_address_abhacard') }}" method="post" class="kt-form" id="frmFetchMode" 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">ABHA Account Profile</h3>
          </div>

          <div class="kt-portlet__head-toolbar">
            <div class="kt-portlet__head-wrapper">
              <a href="{{ path('abha_link') }}" class="btn btn-clean btn-icon-sm mr-2"><i class="la la-long-arrow-left"></i>Back</a>
              <button type="button"  class="btn btn-link " id="patientcreate">Create Patient</button>
              <button type="submit" class="btn btn-primary btn-bold" id="submitBtn">Download ABHACARD</button>
            </div>
          </div>
        </div>

        <div class="kt-portlet__body">
          {% include 'parts/flash.html.twig' %}
         
          <div>
            <button type="button" class="btn btn-primary btn-bold" id="editprofile">view Profile</button>
            <button type="button" class="btn btn-primary btn-bold" id="viewprofile">View Abhacard</button>
          </div>
          <div class="form-group row test1">
           
            <div class="col-lg-12 col-xl-10">
              <table style="width:100%">
                <tr>
                  <th>Name</th>
                  <th>Gender</th>
                  <th>Date of birth
                  </th>
                </tr>
                <tr>
                  <td>{{ firstName }} {{ middleName }} {{ lastName }}</td>
                  <td>{{ gender }}</td>
                  <td>{{ dob }}</td>
                </tr>

                <tr>
                  <th>ABHA NUMBER</th>
                  <th>ABHA ADDRESS</th>
                </tr>
                <tr>
                  <td>{{ ABHANumber }}</td>
                  <td>{{ preferredAbhaAddress }}</td>
                  
                </tr>
              
                <tr>
                  <th>Address</th>
                  
                  </th>
                </tr>
                <tr>
                  <td>{{ address }}</td>
                  
                </tr>
                <tr>
                
                  <th>Pincode
                  </th>
                </tr>
                <tr>
                  
                  <td>{{ pincode }}</td>
                </tr>
                <tr>
                  <th>Mobile number
                  </th>
                  </th>
                </tr>
                <tr>
                 <td>
                   {{ mobile }}
                  </td>
                </tr>
              </table>
              
                </div>
          </div>
          
          <div class="form-group row test2">
            <div class="col-lg-12 col-xl-10">
                
                <input type="hidden" name="txn_id" class="txn_id" value="{{ txnId }}" />
                <input type="hidden" name="type" value="{{ type }}" />
                <input type="hidden" name="tokens" class="tokens" value="{{ tokens }}" />
                </div>
                <img src="{{ imageUrl }}" alt="ABHA Card" style="height:400px;">
          </div>
        </div>
      </div>
    </div>
  </form>
{% endblock %}

{% block scripts %}
	{{ parent() }}

	<script src="{{ asset('assets/js/jquery.validate.min.js') }}"></script>

	<script>
		
    $('.mobilenumber').validate({
      rules: {
        mobilenumber: {
          required: true,
          minlength: 10,
          maxlength: 10,
          digits: true
        },
        terms: {
          required: true
        }
      },
      messages: {
        mobilenumber: {
          required: 'Please Enter 10 Digit Mobile Number',
          minlength:'Mobile Number is Not Valid',
          digits: 'Please enter digits only.'
        },
        terms: {
          required: 'Consent is required.'
        }
      }
    });

    

$('#submitBtn').on('click', function () {
			
  $(this.form).attr('action',"{{ path('generate_address_abhacard') }}").submit();

});

$('#patientcreate').on('click', function () {
			
  $(this.form).attr('action',"{{ path('link_abha_profile_address') }}").submit();

});

$(document).ready(function () {
  $('.test2').hide(); // Initially hide test2
  $('.test1').show(); // Initially show test1
});

// Show 'test2' and hide 'test1' when 'Edit Profile' is clicked
$('#viewprofile').on('click', function () {
  $('.test1').hide(); // Hide test1
  $('.test2').show(); // Show test2
});

// Show 'test1' and hide 'test2' when 'View Abhacard' is clicked
$('#editprofile').on('click', function () {
  $('.test2').hide(); // Hide test2
  $('.test1').show(); // Show test1
});

	</script>
{% endblock %}