@extends('layouts.default', ['appTopMenu' => true])
@section('title','Copying Register Application') 
@push('scripts')

<link rel="stylesheet" href="{{ asset('css/jquery-ui.css')}}" />
<script src="{{ asset('js/jquery-ui.js') }}"></script>

<script src="{{ asset('js/hcrti/application.js')}}"></script>
 
 <meta name="csrf-token" content="{{ csrf_token() }}" />
 <link href="/assets/plugins/select2/dist/css/select2.min.css" rel="stylesheet" />

<script src="/assets/plugins/select2/dist/js/select2.min.js" defer></script>
<link href="/assets/plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.css" rel="stylesheet" />
<script src="/assets/plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.js" defer></script>

<script src="/assets/plugins/sweetalert/dist/sweetalert.min.js"></script>


<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

 <script type="text/javascript">
 
 

  $(".date").datepicker({
  todayHighlight: true,
    autoclose: true,
	opens: "right",
    dateFormat: "dd-mm-yy"
  });

 
  $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
</script>
@endpush



@section('content')
<div class="card mb-3">
            <div class="card-header card-bg-color ">Copying Report </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-xl-12 mb-3">

                            <div class="row">
                            @foreach($copyingReportDetail as $copyingDetail)

                                                        @endforeach

                                <div id="case_detail"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="table-responsive">
    <table class="table table-hover table-bordered">
        <thead>
            <tr>
                <th class="checkbox-area" scope="col">
                    <div class="form-check form-check-primary">
                        <input class="form-check-input" id="hover_parent_all" type="checkbox">
                    </div>
                </th>
                <th scope="col">Application ID/Year</th>
                <th scope="col">Applicant</th>
                <th class="text-center" scope="col">Address</th>
                <th class="text-center" scope="col">Purpose</th>
            </tr>
        </thead>
        <tbody>
        @foreach($copyingReportDetail as $copyingDetail)

            <tr>
                <td>
                    <div class="form-check form-check-primary">
                        <input class="form-check-input hover_child" type="checkbox">
                    </div>
                </td>
                <td>{{$copyingDetail->app_no}}/{{$copyingDetail->app_year}}</td>
                <td>
                    
                    <span class="table-inner-text">{{$copyingDetail->applicant}}</span>
                </td>
                <td class="text-center">{{$copyingDetail->app_add}}</td>
                <td class="text-center">
                {{$copyingDetail->purpose}}
                </td>
            </tr>
            @endforeach

        </tbody>
    </table>
</div>

        </div>




        




<script>
$(document).ready(function(){
// alert("its working");
$( "#date" ).datepicker();


$("#txtyear").blur(function(){
  var lst_case=$("#lst_case").val();
  var file_number=$("#txtcaseno").val();
  var txtyear=$("#txtyear").val();
  
  fil_no='1'+'0'+lst_case+String('00000' + file_number).slice(-5)+txtyear;

  $.ajax({
   url:"get-case-detail",
   data:"fil_no="+fil_no,
   method:"POST",
   success:function(data){
//     alert(data);
    //  console.log(data[0].pet_name);
    //  console.log(data);
    //  console.log(data['pet_name']);
    //  console.log(data.pet_name);
     $("#case_detail").html(data);
   } 
  })

});

$(".numeric").keypress(function (e) {
                if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
                    $(".errmsg").html("Digits Only").show().fadeOut("slow");
                    return false;
                }
            });

$("#buttonSubmit").click(function(){

  var name=$("#name").val();
  var address=$("#address").val();
  var mobile_number=$("#mobile_number").val();
    var lst_case=$("#lst_case").val();
  var file_number=$("#txtcaseno").val();
  var txtyear=$("#txtyear").val();
  var app_type=$("#app_type").val();
  
  fil_no='1'+'0'+lst_case+String('00000' + file_number).slice(-5)+txtyear;

  var amount=$("#amount").val();
  var other=$("#other").val();
  var purpose=$("#purpose").val();
  var status=$("#status").val();
  var optradio=$("#optradio").val();

  function resetForm(){
    $("#case_detail").html("");
    $("#txtcaseno").val("");
    document.getElementById("copyingApplicationForm").reset();
  }

  $.ajax({
url:"submit",
data:"name="+name+"&address="+address+"&mobile_number="+mobile_number+"&_token="+ '{{ csrf_token() }}'+"&fil_no="+fil_no+"&txtcaseno="+txtcaseno+"&app_type="+app_type+"&amount="+amount+"&applied_for="+optradio+"&purpose="+purpose+"&other="+other+"&status="+status,
method:"POST",
success:function(data){
  resetForm();
  $("#case_detail").html(data.response)
console.log(data);
}
});


})


});
</script>


@endsection

@push('scripts')