@extends('layouts/master')

@section('content')
<div id="wrapper">
  <div id="main" class="">
    <section class="section" id="section_1736602487" style="padding-top: 30px; padding-bottom: 30px;">
      <div class="bg section-bg fill bg-fill  bg-loaded">
      </div>
      <!-- .section-bg -->
      <div class="section-content relative">
        
        {{-- <div class="row" id="row-2111276267">
          <div class="col medium-2 small-2 large-2">
            <div class="col-inner">
              <a href="settings.html">
                <img class="wp-image-2738 alignright show-for-small" role="img"
                  src="{{asset('assets/images/settings.svg')}}" alt="" width="25" height="25">
              </a>
            </div>
          </div>
          <div class="col medium-8 small-8 large-8">
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y hide-for-small" id="image_167575854"
                style="margin:0 auto;">
                <div class="img-inner dark">
                  <img src="{{asset('assets/images/logo.svg')}}" class="attachment-original size-original" alt="" height="32.2"
                    width="380.9">
                </div>
                <style scope="scope">
                  #image_167575854 {
                    width: 65%;
                  }
                </style>
              </div>
              <div class="img has-hover x md-x lg-x y md-y lg-y show-for-small" id="image_167575856"
                style="margin:0 auto;">
                <div class="img-inner dark">
                  <img src="{{asset('assets/images/logo.svg')}}" class="attachment-original size-original" alt="" height="32.2"
                    width="380.9">
                </div>
                <style scope="scope">
                  #image_167575856 {
                    width: 100%;
                  }
                </style>
              </div>
              <p style="color:#40B4C7;">{{ $clinic->name }}</p>
            </div>
          </div>
          <div class="col medium-2 small-2 large-2">
            <div class="col-inner text-right">
              <p style="margin:0;">
                <a href="{{ route('logout') }}" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                  <img class="wp-image-2737 alignright" role="img" src="{{asset('assets/images/logout.svg')}}"
                    alt="" width="25" height="25">
                </a>
                <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                  @csrf
                </form>
                <a href="settings.html"><img class="wp-image-2738 alignright hide-for-small" role="img"
                    src="{{asset('assets/images/settings.svg')}}" alt="" width="25" height="25"></a>
              </p>
            </div>
          </div>
        </div> --}}

        <div class="row align-middle" id="row-13538362">
          
          <div class="col medium-3 small-12 large-3">
            <div class="col-inner">
                @if(Session::get('locale') == 'en')
                <a class="button primary" style="border-radius:5px;" href="{{ url('/lang/fr') }}">
                    <span>FR</span>
                </a>
                @else
                <a class="button primary" style="border-radius:5px;" href="{{ url('/lang/en') }}">
                    <span>EN</span>
                </a>
                @endif
              
              @can('isAdmin')
              <a class="button primary" style="border-radius:5px;" onclick="window.history.back();">
                <span>{{ __('web.back') }}</span>
              </a>
              @endcan
            </div>
          </div>
          
          <div class="col medium-5 small-12 large-5">
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" id="image_397860314">
                <div class="img-inner dark">
                  <img
                    src="{{ asset('assets/images/logo2.svg') }}"
                    class="attachment-original size-original" alt="" height="32.2" width="380.9">
                </div>
        
                <style scope="scope">
                  #image_397860314 {
                    width: 80%;
                  }
                </style>
              </div>
        
              <p style="color:#40B4C7;">{{ $clinic->name }}</p>
            </div>
          </div>
          <div class="col medium-4 small-12 large-4">
            <div class="col-inner text-right">
              <a class="button primary" style="border-radius:5px;" href="#change_password">
                <span>{{ __('web.settings') }}</span>
              </a>
        
              <a href="{{ route('logout') }}" class="button primary" style="border-radius:5px;" onclick="event.preventDefault();document.getElementById('logout-form').submit();">
                <span>{{ __('auth.logout') }}</span>
              </a>
              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                @csrf
              </form>
            </div>
          </div>
        
          <style scope="scope">
        
          </style>
        </div>

        <div class="row row-collapse align-center" id="row-579753643">
          <div class="col medium-1 small-3 large-1">
            <div class="col-inner">
              <form class="lgview">
                <button type="button" class="active gridbtn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15.434" height="11.802" viewBox="0 0 15.434 11.802">
                    <g id="Group_38" data-name="Group 38" transform="translate(-209 -141)">
                      <rect id="Rectangle_14" data-name="Rectangle 14" width="4.539" height="5.447"
                        transform="translate(209 141)" fill="#707070"></rect>
                      <rect id="Rectangle_19" data-name="Rectangle 19" width="4.539" height="5.447"
                        transform="translate(209 147.355)" fill="#707070"></rect>
                      <rect id="Rectangle_15" data-name="Rectangle 15" width="4.539" height="5.447"
                        transform="translate(214.447 141)" fill="#707070"></rect>
                      <rect id="Rectangle_18" data-name="Rectangle 18" width="4.539" height="5.447"
                        transform="translate(214.447 147.355)" fill="#707070"></rect>
                      <rect id="Rectangle_16" data-name="Rectangle 16" width="4.539" height="5.447"
                        transform="translate(219.894 141)" fill="#707070"></rect>
                      <rect id="Rectangle_17" data-name="Rectangle 17" width="4.539" height="5.447"
                        transform="translate(219.894 147.355)" fill="#707070"></rect>
                    </g>
                  </svg>
                </button>
                <button type="button" class="listbtn">
                  <svg xmlns="http://www.w3.org/2000/svg" width="15.539" height="10.447" viewBox="0 0 15.539 10.447">
                    <g id="Group_14" data-name="Group 14" transform="translate(-775 -141)">
                      <g id="Group_39" data-name="Group 39">
                        <rect id="Rectangle_20" data-name="Rectangle 20" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 141)" fill="#707070"></rect>
                        <rect id="Rectangle_21" data-name="Rectangle 21" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 144)" fill="#707070"></rect>
                        <rect id="Rectangle_22" data-name="Rectangle 22" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 147)" fill="#707070"></rect>
                        <rect id="Rectangle_23" data-name="Rectangle 23" width="15.539" height="1.447" rx="0.724"
                          transform="translate(775 150)" fill="#707070"></rect>
                      </g>
                    </g>
                  </svg>
                </button>
              </form>
            </div>
          </div>
          <div class="col medium-3 small-8 large-3">
            <div class="col-inner">
              <p>
                <select class="sorting" name="sorting" id="selectSort">
                  <option disabled="" selected="">{{ __('web.arrange_by') }}</option>
                  <option value="name,asc">Alphabetical Order</option>
                  <option value="created_at,desc">Date</option>
                  {{-- <option value="Size">Size</option> --}}
                </select>
              </p>
            </div>
          </div>
          <div class="col medium-1 small-12 hide-for-small large-1">
            <div class="col-inner"></div>
          </div>
          <div class="col medium-3 small-11 large-3">
            <div class="col-inner">
              <form method="GET" action="" id="searchForm" class="serachbar" style="margin:0;">                
                <input type="text" placeholder="{{ __('web.search_here') }}" name="search" id="txtSearch" required>
                <input type="submit" value="">
              </form>
            </div>
          </div>
          <div class="col medium-4 small-11 large-4">
            <div class="col-inner text-right">
              {{-- <a href="#add_patient_file" target="_self" class="button primary lowercase btnaddfolder"
                style="border-radius:5px;">
                <span>Add Patient File</span>
                <i class="icon-plus"></i></a> --}}
              <a href="#add_patient" target="_self" class="button primary lowercase btnaddfolder"
                style="border-radius:5px;">
                <span>{{ __('web.add_patient_folder') }}</span>
                <i class="icon-plus"></i></a>

            </div>
          </div>
        </div>
        <div class="row" id="row-860202790" style="margin-top:50px;">
            @if (session('error'))
            <div class="alert alert-danger">
              {{ session('error') }}
            </div>
            @endif
            @if (session('success'))
            <div class="alert alert-success">
              {{ session('success') }}
            </div>
            @endif

          @forelse($patients as $patient)
          <div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_patient_folder" data-id="{{ $patient->id }}">
                <img src="{{asset('assets/images/edit.svg')}}" width="20" alt="">
              </a>
              <a class="destroyLink" href="#delete_confirmation" data-id="{{ $patient->id }}" data-name="{{ $patient->name }}">
                <img src="{{asset('assets/images/delete.svg')}}" width="20" alt="">
              </a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{ url('/patients/files/create/'.$patient->id) }}" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{ url('/patients/files/create/'.$patient->id) }}">{{ $patient->name }}</a></p>
            </div>
          </div>
          @empty
          <h3>No record found</h3>
          @endforelse
          
        </div>
      </div>
      <!-- .section-content -->
    </section>
    <div id="add_patient" class="lightbox-by-id lightbox-content mfp-hide lightbox-white "
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" id="section_600098972">
        <div class="bg section-bg fill bg-fill   bg-loaded">





        </div><!-- .section-bg -->

        <div class="section-content relative">


          <div class="row row-collapse align-center" id="row-2103079420">

            <div class="col medium-11 small-12 large-11">
              <div class="col-inner">

                <h4>{{ __('web.create_patient_folder') }}</h4>
                <form method="POST" action="{{ route('patients.store') }}" id="patientForm">
                  @csrf
                  <input type="hidden" name="clinic" value="{{ $clinic->id }}">
                  <div class="form-field-hd"><label>{{ __('web.patient_name') }}: </label><input name="patient_name" type="text" required></div>
                  <div class="form-field-hd"><label>{{ __('web.patient_age') }}: </label><input name="patient_age" type="number"></div>
                  <div class="form-field-hd"><label>{{ __('web.patient_email') }}: </label><input name="patient_email" type="email">
                  </div>
                  <div class="form-field-hd-btn"><input type="submit" value="Add Patient Folder"></div>
                </form>

              </div>
            </div>


            <style scope="scope">

            </style>
          </div>

        </div><!-- .section-content -->


        <style scope="scope">
          #section_600098972 {
            padding-top: 60px;
            padding-bottom: 60px;
          }

          #section_600098972 .section-bg.bg-loaded {
            background-image: url(http://94l.c20.myftpupload.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>
    
    <div id="edit_patient_folder" class="lightbox-by-id lightbox-content mfp-hide lightbox-white "
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" id="section_600098972">
        <div class="bg section-bg fill bg-fill   bg-loaded">

        </div><!-- .section-bg -->

        <div class="section-content relative">

          <div class="row row-collapse align-center" id="row-2103079420">

            <div class="col medium-11 small-12 large-11">
              <div class="col-inner">

                <h4>Edit Patient Folder</h4>
                <form method="POST" action="{{ route('patients.store') }}" id="patientEditForm">
                  @csrf
                  @method('PUT')
                  <input type="hidden" name="clinic" value="{{ $clinic->id }}">
                  <div class="form-field-hd"><label>Patient Name: </label><input id="edit_patient_name" name="patient_name" type="text"></div>
                  <div class="form-field-hd"><label>Patient Age: </label><input id="edit_patient_age" name="patient_age" type="number"></div>
                  <div class="form-field-hd"><label>Patient Email: </label><input id="edit_patient_email" name="patient_email" type="email" readonly>
                  </div>
                  <div class="form-field-hd-btn"><input type="submit" value="Update Patient Folder"></div>
                </form>

              </div>
            </div>


            <style scope="scope">

            </style>
          </div>

        </div><!-- .section-content -->


        <style scope="scope">
          #section_600098972 {
            padding-top: 60px;
            padding-bottom: 60px;
          }

          #section_600098972 .section-bg.bg-loaded {
            background-image: url(http://94l.c20.myftpupload.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>
    <div id="add_patient_file" class="lightbox-by-id lightbox-content mfp-hide lightbox-white "
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" id="section_1283451044">
        <div class="bg section-bg fill bg-fill   bg-loaded">





        </div><!-- .section-bg -->

        <div class="section-content relative">


          <div class="row row-collapse align-center" id="row-1731648714">

            <div class="col medium-11 small-12 large-11">
              <div class="col-inner">

                <h4>Add File</h4>
                <form>
                  <div class="form-field-hd"><select>
                      <option selected="">John Doe</option>
                      <option>Clare</option>
                      <option>Robin Hood</option>
                    </select> </div>
                  <div class="form-field-hd"><label>Patient Name: </label><input name="patient_name" type="text"
                      readonly="" value="John Doe"></div>
                  <div class="form-field-hd"><label>Patient Age: </label><input name="patient_age" type="number"
                      readonly="" value="24"></div>
                  <div class="form-field-hd"><label>Date Needed</label><input type="date" name="date_needed"></div>
                  <div class="form-field-hd"><label>Notes</label><textarea name="notes"></textarea></div>
                  <div class="form-field-hd"><label>Add Files</label><input type="file" name="files"></div>
                  <div class="form-field-hd-btn"><input type="submit" value="Save and Send"></div>
                </form>

              </div>
            </div>


            <style scope="scope">

            </style>
          </div>

        </div><!-- .section-content -->


        <style scope="scope">
          #section_1283451044 {
            padding-top: 60px;
            padding-bottom: 60px;
          }

          #section_1283451044 .section-bg.bg-loaded {
            background-image: url(http://94l.c20.myftpupload.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>

    <div id="change_password" class="lightbox-by-id lightbox-content lightbox-white mfp-hide" style="max-width:600px ;padding:20px">
      <section class="section has-block tooltipstered" id="section_501259736">
        <div class="bg section-bg fill bg-fill   bg-loaded">
                    
        </div><!-- .section-bg -->
    
        <div class="section-content relative">
    
    
          <div class="row row-collapse align-center" id="row-1004061135">
    
            <div class="col medium-11 small-12 large-11">
              <div class="col-inner">
    
                <h4>{{ __('web.settings') }}</h4>
                <form method="POST" action="{{ route('clinics.update', ['id'=>$clinic->id]) }}">
                  @csrf
                  @method('PUT')
                                    <div class="form-field-hd"><label>{{ __('auth.clinic_code') }}: </label><input name="clinic_code" type="text" value="{{ $clinic->code }}"></div>
                  <div class="form-field-hd"><label>{{ __('auth.phone_number') }}: </label><input name="clinic_phone" type="tel" value="{{ $clinic->phone }}"></div>
                  <div class="form-field-hd"><label>{{ __('auth.address') }} 1: </label><textarea name="clinic_address">{{ $clinic->address }}</textarea></div>
                   <div class="form-field-hd"><label>{{ __('auth.address') }} 2: </label><textarea placeholder="Office #..." name="clinic_address_2">{{ $clinic->address_2}}</textarea></div>
                    <div class="form-field-hd"><label>{{ __('auth.city') }}: </label><input name="clinic_city" type="text" value="{{ $clinic->city }}"></div>
                     <div class="form-field-hd"><label>{{ __('auth.province') }}: </label><input name="clinic_province" type="text" value="{{ $clinic->province }}"></div>
                     <div class="form-field-hd"><label>{{ __('auth.postal_code') }}: </label><input name="clinic_postal_code" type="text" value="{{ $clinic->postal_code }}"></div>
                  <div class="form-field-hd"><label>{{ __('auth.current_password') }}: </label><input name="current_password" type="password"></div>
                  <div class="form-field-hd"><label>{{ __('auth.new_password') }}: </label><input name="new_password" type="password"></div>
                  <div class="form-field-hd"><label>{{ __('auth.retype_new_password') }}: </label><input name="new_password_confirmation" type="password"></div>
                  <div class="form-field-hd-btn"><input type="submit" value="{{ __('web.update') }}"></div>
                </form>
    
              </div>
            </div>
    
    
            <style scope="scope">
    
            </style>
          </div>
    
        </div><!-- .section-content -->
    
    
        <style scope="scope">
          #section_501259736 {
            padding-top: 60px;
            padding-bottom: 60px;
          }
    
          #section_501259736 .section-bg.bg-loaded {
            background-image: url(http://labbellomo.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>
    
    <div id="delete_confirmation" class="lightbox-by-id lightbox-content lightbox-white mfp-hide"
      style="max-width:600px ;padding:0px">
      <section class="section has-block tooltipstered" id="section_843072587">
        <div class="bg section-bg fill bg-fill   bg-loaded">
        </div><!-- .section-bg -->
        <div class="section-content relative">
          <div class="row row-collapse align-center" id="row-1005866054">
            <div class="col medium-11 small-12 large-11">
              <div class="col-inner text-center">
                <form action="{{ route('patients.index') }}" method="post" id="deleteForm">
                  @csrf
                  @method("DELETE")
                  <input type="hidden" id="id" />
                  <h1>ALERT</h1>
                  <p>Are you sure you want to delete <strong></strong> patient?</p>
                  {{-- <a class="button primary">
                    <span>YES</span>
                  </a> --}}
                  <button type="submit" class="button primary">YES</button>
                  <button id="btnNo" type="button" class="button alert">NO</button>
                  {{-- <a class="button alert">
                    <span>NO</span>
                  </a> --}}
                </form>
              </div>
            </div>
            <style scope="scope">
            </style>
          </div>
        </div><!-- .section-content -->
        <style scope="scope">
          #section_843072587 {
            padding-top: 60px;
            padding-bottom: 60px;
          }

          #section_843072587 .section-bg.bg-loaded {
            background-image: url(http://94l.c20.myftpupload.com/wp-content/uploads/2019/05/Group-42.svg);
          }
        </style>
      </section>
    </div>
  </div>
  <!-- #main -->
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/custom.js') }}"></script>
<script src="{{asset('assets/js/axios.min.js')}}"></script>
<script>
  function populatePatients(patients) {
    var html =  '';
    for (var key in patients) {
      html += `<div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_patient_folder" data-id="`+patients[key].id +`">
                <img src="{{asset('assets/images/edit.svg')}}" width="20" alt="">
              </a>
              <a class="destroyLink" href="#delete_confirmation" data-id="`+patients[key].id +`" data-name="`+patients[key].name +`">
                <img src="{{asset('assets/images/delete.svg')}}" width="20" alt="">
              </a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{ url('/patients/files/create/') }}/`+patients[key].id +`" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{ url('/patients/files/create/') }}/`+patients[key].id +`">`+patients[key].name +`</a></p>
            </div>
          </div>`;
    }
    $('#row-860202790').html('');
    $(html).hide().prependTo("#row-860202790").fadeIn();
  }

  jQuery('#patientForm').on('submit', function(e){
    
    e.preventDefault();
    // Send a POST request
    axios({
      method: 'post',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: '{{route("patients.store")}}',
      data: jQuery('#patientForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      
      var html = `<div class="col medium-2 small-6 large-2 foldercol">
            <div class="tooltiphd hide-for-small">
              <a class="editLink" href="#edit_patient_folder" data-id="`+response.data.patient.id+`"><img src="{{asset('assets/images/edit.svg')}}" width="20" alt=""></a>
              <a class="destroyLink" href="#delete_confirmation" data-id="`+response.data.patient.id+`" data-name="`+response.data.patient.name+`"><img src="{{asset('assets/images/delete.svg')}}" width="20" alt=""></a>
            </div>
            <div class="col-inner text-center">
              <div class="img has-hover x md-x lg-x y md-y lg-y" style="width: 50%;">
                <a class="" href="{{ url('/patients/files/create/') }}/`+response.data.patient.id+`" target="_self">
                  <div class="img-inner dark">
                    <img src="{{asset('assets/images/folder.svg')}}" class="attachment-original size-original" alt="" height="51"
                      width="58">
                  </div>
                </a>
              </div>
              <p><a href="{{ url('/patients/files/create/') }}/`+response.data.patient.id+`">`+response.data.patient.name+`</a></p>
            </div>
          </div>    `;
      jQuery('.mfp-close').click();
      if($('.foldercol').length == 0)
      {
        $('#row-860202790').html('');
      }
      jQuery(html).hide().prependTo("#row-860202790").fadeIn();
    });
  });
  $(".destroyLink").on('click', function(){
    $("#delete_confirmation form").attr('action', '{{route('patients.index')}}/'+$(this).data('id'));
    $("#id").val($(this).data('id'));
    $("#delete_confirmation form p strong").html($(this).data('name'));
    // $("#modal-danger").modal('show');
  });
  $('#deleteForm').on('submit', function(e){
    e.preventDefault();
    axios({
      method: 'delete',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: $('#deleteForm').attr('action'),
      data: jQuery('#deleteForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('.mfp-close').click();
      $('.destroyLink[data-id="'+$('#id').val()+'"]').parent().parent().hide('slow');
    });
  });

  $('.editLink').on('click', function(){
    var id = $(this).data('id');
    var url = '{{route("patients.index")}}/'+id;
    axios({
      method: 'get',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: url, 
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('#patientEditForm').attr('action', url);
      $('#edit_id').val(id);
      $('#edit_patient_name').val(response.data.patient.name);
      $('#edit_patient_age').val(response.data.patient.age);
      $('#edit_patient_email').val(response.data.patient.email);      
    });
  });
  $('#patientEditForm').on('submit', function(e){
    e.preventDefault();
    axios({
      method: 'put',
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      url: $('#patientEditForm').attr('action'),
      data: jQuery('#patientEditForm').serialize(),
      responseType: 'json'
    })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      $('.editLink[data-id="'+response.data.patient.id+'"]').parent().parent().find('p a').html(response.data.patient.name);
      $('.mfp-close').click();        
    });
  });
  $('#searchForm').on('submit', function(e){
    e.preventDefault();
    axios.get('{{route("patients.index")}}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      params: {
        search: $('#txtSearch').val(),
        clinic: "{{$clinic->id}}"
      },
      responseType: 'json'
    })    
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }
      if(response.data.patients.length == 0)
      {
        alert('No record found');
        return;
      }
      populatePatients(response.data.patients);
    });
  });
  $('#selectSort').on('change', function(){
    if($(this).val() == '')
      return;
    axios.get('{{route("patients.index")}}', {
      headers: { 'X-Requested-With': 'XMLHttpRequest' },
      params: {
        sort: $('#selectSort').val(),
        clinic: "{{$clinic->id}}"
      },
      responseType: 'json'
    })
    // axios({
    //   method: 'get',
    //   headers: { 'X-Requested-With': 'XMLHttpRequest' },
    //   url: '{{route("clinics.index")}}',
    //   data: $('#searchForm').serialize(),
    //   responseType: 'json'
    // })
    .then(function(response){
      if(response.data.status == 0)
      {
        alert(response.data.msg);
        return;
      }      
      populatePatients(response.data.patients);
    });
  });
</script>
@endpush