@extends('layouts.app')

@section('styles')
  <style type="text/css">
    .t14_box .border{
      border: 1px solid #b87272;
      margin-bottom: 15px;
      padding-bottom:  15px;
    }
  </style>
@endsection

@section('content')
<div class="container">
  <div class="row">
    <div class="col-md-12">
       <div class="card">
        <div class="card-body">
          <div class="text-center">
            <h2 class="text-gray-900 mb-4 sub-title">ข้อมูลการเดินทาง</h2>
            @if(session('message'))
              <div class="alert alert-danger alert-dismissible fade show mt-3" role="alert">
                <strong>Warning!</strong> {{session('message')}}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            @endif
          </div>
          <form class="user" action="{{ route('frontend.patient.save-travel') }}" method="post">
            @csrf
            <input type="hidden" name="patient_id" value="{{ $case->id }}">
            <input type="hidden" name="Case_ID" value="{{ $case->case_id }}">
            <div class="row justify-content-md-center">
              @if ($errors->any())
                <div class="col-md-10 mt-3">
                  <div class="alert alert-danger bg-gradient-danger">
                    <ul style="list-style: none;margin-bottom: 0;color: #fff;">
                        @foreach ($errors->all() as $error)
                          <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                  </div>
                </div>
              @endif

              <div class="col-md-10 mt-3">
                <div class="case_id">
                  Case ID : {{$case->case_id}}
                </div>
              </div>

              <div class="col-md-10 mt-3 border p-3">
                <div class="row">
                  <div class="col-md-6 col-sm-6 col-xs-6">
                    มีเดินทางในช่วง 14 วัน
                  </div>
                  <div class="col-md-6 col-sm-6 col-xs-6">
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="t_14" id="t_14-1" value="1" required>
                      <label class="form-check-label" for="t_14-1">มี</label>
                    </div>
                    <div class="form-check form-check-inline">
                      <input class="form-check-input" type="radio" name="t_14" id="t_14-2" value="0" required>
                      <label class="form-check-label" for="t_14-2">ไม่มี</label>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-md-10 mt-3 t_14 hidden">
                <h4>สถานที่เดินทางไป</h4>
                <div class="row t14_box">
                  <div class="col-md-12 border" id="travel_box">
                    <div class="row">
                      <div class="col-md-12 mt-3">
                          <div class="has-float-label">
                            <input type="text" id="date_travel" name="date_travel[]" class="form-control datepicker" autocomplete="off" value="{{ old('date_travel', date('d-m-Y')) }}" placeholder="วันที่" data-date-format="dd-mm-yyyy">
                            <label for="date_travel" style="display: inline-block;">วันที่</label>
                            {!! $errors->first('date_travel', '<p class="help-block text-danger mb-0">:message</p>') !!}
                          </div>
                      </div>
                      <div class="col-md-6 col-6 mt-3">
                        <div class="form-group bmd-form-group">
                          <input type="text" name="moo[]" class="form-control form-control-user" value="{{ old('moo') }}" placeholder="หมู่ที่ *" >
                        </div>
                      </div>
                      <div class="col-md-6 col-6 mt-3">
                        <div class="has-float-label">
                          <!-- <label class="bmd-label-floating">Province</label> -->
                          <select class="form-control select2" style="width: 100%;" name="PROVINCE_ID[]" id="province" >
                            <option></option>
                            @php
                               $provinces = \App\Models\Province::all();
                            @endphp
                            @foreach($provinces as $key => $province)
                            <option value="{{$province->PROVINCE_ID}}">{{$province->PROVINCE_NAME}}</option>
                            @endforeach
                          </select>
                          <label for="province">จังหวัด</label>
                        </div>
                      </div>
                      <div class="col-md-6 col-6 mt-2">
                        <div class="has-float-label">
                          <!-- <label class="bmd-label-floating">Amphur</label> -->
                          <select class="form-control select2" style="width: 100%;" name="AMPHUR_ID[]" id="amphur" >
                            <option></option>
                            @php
                               $amphurs = \App\Models\Amphur::all();
                            @endphp
                            @foreach($amphurs as $key => $amphur)
                            <option value="{{$amphur->AMPHUR_ID}}">{{$amphur->AMPHUR_NAME}}</option>
                            @endforeach
                          </select>
                          <label for="amphur">อำเภอ</label>
                        </div>
                      </div>
                      <div class="col-md-6 col-6 mt-2">
                        <div class="has-float-label">
                          <!-- <label class="bmd-label-floating">Sub District</label> -->
                          <select class="form-control select2" style="width: 100%;" name="DISTRICT_ID[]" id="sub_district" placeholder="Sub District" >
                            <option></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>
                          <label for="sub_district">ตำบล</label>
                        </div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>

	           	<div class="col-md-12 mt-3 t_14 hidden text-center">
	              <button type="button" class="btn btn-warning" onClick="add_more()">เพิ่มเติม</button>
	          	</div>
               <div class="col-md-8 mt-3">
                  <button type="submit" class="btn btn-primary btn-block btn-user">บันทึก</button>
              </div>
            </div>
                 
            <div class="clearfix"></div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="template hidden">
  <div class="col-md-12 border" id="travel_box_id">
    <a href="javascript:;" style="position: absolute;margin-left: -50px;" onclick="deleteBox(delete_box_id)"><i class="fa fa-window-close text-danger fa-2x"></i></a>
    <div class="row">
    	<div class="col-md-12 mt-3">
    	      <div class="has-float-label">
    	        <input type="text" id="date_travel_id" name="date_travel[]" class="form-control datepicker" autocomplete="off" value="{{ old('date_travel', date('d-m-Y')) }}" placeholder="วันที่" data-date-format="dd-mm-yyyy">
    	        <label for="date_travel_id" style="display: inline-block;">วันที่</label>
    	        {!! $errors->first('date_travel', '<p class="help-block text-danger mb-0">:message</p>') !!}
    	      </div>
    	  </div>
    	<div class="col-md-6 col-6 mt-3">
    	    <div class="form-group bmd-form-group">
    	      <input type="text" name="moo[]" class="form-control form-control-user" value="{{ old('moo') }}" placeholder="หมู่ที่ *">
    	    </div>
    	</div>
      <div class="col-md-6 col-6 mt-3">
          <div class="has-float-label">
            <!-- <label class="bmd-label-floating">Province</label> -->
            <select class="form-control select2" style="width: 100%;" name="PROVINCE_ID[]" id="province_id" >
              <option></option>
              @foreach($provinces as $key => $province)
              <option value="{{$province->PROVINCE_ID}}">{{$province->PROVINCE_NAME}}</option>
              @endforeach
            </select>
            <label for="province_id">จังหวัด</label>
          </div>
      </div>
    	<div class="col-md-6 col-6 mt-2">
    	    <div class="has-float-label">
    	      <!-- <label class="bmd-label-floating">Amphur</label> -->
    	      <select class="form-control select2" style="width: 100%;" name="AMPHUR_ID[]" id="amphur_id" >
    	        <option></option>
    	        @foreach($amphurs as $key => $amphur)
    	        <option value="{{$amphur->AMPHUR_ID}}">{{$amphur->AMPHUR_NAME}}</option>
    	        @endforeach
    	      </select>
            <label for="amphur_id">อำเภอ</label>
    	    </div>
    	</div>
      <div class="col-md-6 col-6 mt-2">
          <div class="has-float-label">
            <!-- <label class="bmd-label-floating">Sub District</label> -->
            <select class="form-control select2" style="width: 100%;" name="DISTRICT_ID[]" id="sub_district_id" placeholder="Sub District" >
              <option></option>
              @foreach($sub_district as $key => $district)
              <option value="{{$district->DISTRICT_ID}}">{{$district->DISTRICT_NAME}}</option>
              @endforeach
            </select>
            <label for="sub_district_id">ตำบล</label>
          </div>
        </div>
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script type="text/javascript">
      $('#sub_district.select2').select2({
            placeholder: "Sub district",
            allowClear: true
      });
      $('#amphur.select2').select2({
            placeholder: "District",
            allowClear: true
      });
      $('#province.select2').select2({
            placeholder: "Province",
            allowClear: true
      });

      $('input[name="t_14"]').change(function(){
        if( $(this).prop('checked') && $(this).val() == 1 ){
          $('.t_14').show();
        }else{
          $('.t_14').hide();
        }
      });

      $('input[name="same_house_sick"]').change(function(){
        if( $(this).prop('checked') && $(this).val() == 1 ){
          $('.same_house_sick').show();
        }else{
          $('.same_house_sick').hide();
        }
      });

      $('input[name="school_office_sick"]').change(function(){
        if( $(this).prop('checked') && $(this).val() == 1 ){
          $('.school_office_sick').show();
        }else{
          $('.school_office_sick').hide();
        }
      });

      $('input[name="near_house_sick"]').change(function(){
        if( $(this).prop('checked') && $(this).val() == 1 ){
          $('.near_house_sick').show();
        }else{
          $('.near_house_sick').hide();
        }
      });

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

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

      var id = 1;
      function add_more(){
      	var html = $('.template').html();
        html = html.replace("travel_box_id", "travel_box_"+id);
        html = html.replace("delete_box_id", id);
      	html = html.replace("date_travel_id", "date_travel_"+id);
      	html = html.replace("date_travel_id", "date_travel_"+id);
      	html = html.replace("sub_district_id", "sub_district_"+id);
      	html = html.replace("sub_district_id", "sub_district_"+id);
      	html = html.replace("amphur_id", "amphur_"+id);
      	html = html.replace("amphur_id", "amphur_"+id);
      	html = html.replace("province_id", "province_"+id);
      	html = html.replace("province_id", "province_"+id);

      	$('.t14_box').append(html);


      	var province_id = '#province_'+id+'.select2';
      	var amphur_id = '#amphur_'+id+'.select2';
      	var sub_district_id = '#sub_district_'+id+'.select2';
	    
	    $(sub_district_id).select2({
	        placeholder: "Sub district",
	        allowClear: true
	    });
	    $(amphur_id).select2({
	        placeholder: "District",
	        allowClear: true
	    });
	    $(province_id).select2({
            placeholder: "Province",
            allowClear: true
	    });

      	var provinceid = '#province_'+id;
      	var amphurid = '#amphur_'+id;
      	var sub_districtid = '#sub_district_'+id;
      	$(provinceid).change(function(){
	        getAmphur(jQuery(provinceid).val(),amphurid,sub_districtid);
	    });
	    $(amphurid).change(function(){
	        getSubDistrict(jQuery(provinceid).val(), jQuery(amphurid).val(),sub_districtid);
	    });

	    var date_travel_id = '#date_travel_'+id+'.datepicker';
        $(date_travel_id).datepicker();

      	id++;
      }

      function deleteBox(box_id){
        var bb_id = '#travel_box_'+box_id;
        $(bb_id).remove();
      }

</script>
@endsection