@extends('layouts.admin')

@section('content')

<div class="">
  <div class="row">
    <div class="col-lg-12 col-md-12">
      <div class="card">
        <div class="card-header card-header-primary">
          <h4 class="card-title pull-left mr-auto">Patient</h4>
          <div class="pull-right">
               <select id="sub_district" class="form-control ml-2 pull-right" style="width: 200px;" onchange="refreshTable()">
                  <option value="">All sub district</option>
                  @php
                     $sub_district = \App\Models\SubDistrict::all();
                  @endphp
                  @foreach($sub_district as $key => $district)
                  <option value="{{$district->DISTRICT_ID}}">{{$district->DISTRICT_NAME}}</option>
                  @endforeach
               </select>
               <select id="amphur" class="form-control ml-2 pull-right" style="width: 200px;">
                  <option value="">All amphur</option>
                  @php
                     $amphurs = \App\Models\Amphur::all();
                  @endphp
                  @foreach($amphurs as $key => $amphur)
                  <option value="{{$amphur->AMPHUR_ID}}">{{$amphur->AMPHUR_NAME}}</option>
                  @endforeach
               </select>
               <select id="province" class="form-control ml-2 pull-right" style="width: 200px;">
                  <option value="">All province</option>
                  @php
                     $provinces = \App\Models\Province::all();
                  @endphp
                  @foreach($provinces as $key => $province)
                  <option value="{{$province->PROVINCE_ID}}">{{$province->PROVINCE_NAME}}</option>
                  @endforeach
               </select>
               <a href="{{ route('admin.patient.add') }}" class="btn btn-primary btn-round pull-right ml-2">Add patient<div class="ripple-container"></div></a>
          </div>
        </div>
        <div class="card-body table-responsive">
          @if ( session('message') )
            <div class="alert alert-success bg-gradient-success">
              {{ session('message') }}
            </div>
          @endif
          <table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
            <thead class="text-primary">
              <th>Case ID</th>
              <th>ชื่อ</th>
              <th>อายุ</th>
              <th>เพศ</th>
              <th>หน่วยบริการ</th>
              <!-- <th></th> -->
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection 

@section('styles')
  <link href="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
@endsection

@section('scripts')
    <script src="{{ asset('assets/vendor/datatables/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('assets/vendor/datatables/dataTables.bootstrap4.min.js') }}"></script>

    <script type="text/javascript">
      var dataTable;
      $(document).ready(function() {
        dataTable = $('#dataTable').DataTable({
                "ajax": {
                    "url": "{{route('admin.patient.ajax')}}",
                    "type": "POST",
                    data: dataTableValue
                },
                "paging": true,
                "processing": false,
                "serverSide": true,
                "ordering": false,
                "language": {
                  "oPaginate": oPaginate
                },
                "columns": [
                    { "data": "case_id" },
                    { "data": "fullname" },
                    { "data": "age" },
                    { "data": "sex" },
                    { "data": "hospital" },
                    // { "data": "action" }
                ]
            });
      });

      function dataTableValue(data){
          data._token = '{{ csrf_token() }}';
          data.DISTRICT_ID = jQuery('#sub_district').val();
          data.AMPHUR_ID = jQuery('#amphur').val();
          data.PROVINCE_ID = jQuery('#province').val();
          return data;
      }

      function refreshTable(){
          dataTable.ajax.reload();
      }

      $('#province').change(function(){
          getAmphur(jQuery('#province').val());
          refreshTable()
      });
      $('#amphur').change(function(){
          getSubDistrict(jQuery('#province').val(), jQuery('#amphur').val());
          refreshTable()
      });

      function getAmphur(province){
        $.ajax({
          url: '{{ route('admin.get-amphur') }}',
          type: 'post',
          dataType: 'json',
          data: {
            _token: '{{ csrf_token() }}',
            province: province
          },
          success: function(res){
            if(res.data != ''){
                var html = '<option value="">All amphur</option>';
                $.each( res.data, function( i, val ) {
                    html += '<option value="'+val.AMPHUR_ID+'">'+val.AMPHUR_NAME+'</option>';
                });
                $('#amphur').html(html);
            }else{
              $('#amphur').html('<option value="">All sub district</option>');
            }
            
            getSubDistrict(province,'');
          }
        });
      }

      function getSubDistrict(province,amphur){
        $.ajax({
          url: '{{ route('admin.get-sub-district') }}',
          type: 'post',
          dataType: 'json',
          data: {
            _token: '{{ csrf_token() }}',
            province: province,
            amphur: amphur
          },
          success: function(res){
            if(res.data != ''){
                var html = '<option value="">All sub district</option>';
                $.each( res.data, function( i, val ) {
                    html += '<option value="'+val.DISTRICT_ID+'">'+val.DISTRICT_NAME+'</option>';
                });
                $('#sub_district').html(html);
            }else{
              $('#sub_district').html('<option value="">All sub district</option>');
            }
          }
        });
      }
    </script>
@endsection