@extends('adminlte::page')

@section('content')
<?php Fun::lang()?>
<script>
    function searching(){
        $("#datatable_report_booking").DataTable().draw(true);
    }
</script>
<div class="title-add">
    <div class="page-bar">
        <ul class="page-breadcrumb">
            <li> <a class="ng-binding" href="#"><i class="fa fa-dashboard"></i> Dashboard</a> </li>
            <li><a href="#">Operation</a></li>
            <li><a href="#">Manage Client</a></li>
            <li><a href="#">Client Relationship List</a></li>
        </ul>
    </div>
</div>
<div class="page">
      <div class="top-content">
          <div class="row">
              <div class="col-sm-12 col-xs-12">
                  <div class="title-add">
                      <div class="pull-left">
                          <h3>Client Relationship</h3>
                      </div>
                  </div>
                      @can('Relationship-Create')
                          <div class="pull-right">
                              <a class="button_sm button_primary" href="{{route('clients-relationship.create')}}"><span class="fa fa-plus"></span>  Create New</a>
                          </div>
                      @endcan
                    <div class="pull-right">
                        <a class="button_sm button_info" href="javascript:void(0)" id="filter-toggle-search"><span class="fa fa-plus"></span>  Filter Toggle</a>
                    </div>
              </div>
          </div>
          </div>
          <div class="box-body table-responsive">
            <div class="row" id="toggle-seaching">
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Name (KH) :</strong>
                        {!! Form::text('client_name',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="form-group">
                        <strong >Phone :</strong>
                        {!! Form::text('client_phone',null, array('class' => 'form-control')) !!}
                    </div>
                </div>
                <div class="col-md-12" style="text-align:right;margin-bottom:40px !important;">
                    <a class="button_sm button_success" href="javascript:void(0)" id="search-submit" onclick="searching()"><span class="fa fa-search"></span> Search</a>
                </div>
            </div>  
            <table id="datatable_report_booking" class="table table-striped table-bordered table-hover nowrap">
              <thead>
                <tr>
                    <th>No</th>
                    <th>Full Name</th>
                    <th>Gender</th>
                    <th>DOB</th>
                    <th>Phone</th>
                    <th>Address</th>
                    <th>Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('js')

<script type="text/javascript">
 $(document).ready(function(){
   $('#main-spinner').show();    
   $('#datatable_report_booking').DataTable({
     ordering: true,
     serverSide: true,
     processing:true,
     "scrollY":        "600px",
    "scrollCollapse": true,
     ajax: {
        url:"{{ route('datatable.get_client_relationship') }}",
        type:"GET",
        data:function(d){
            d.client_name = $("input[name=client_name]").val();
            d.client_phone = $("input[name=client_phone]").val();
        },
     },
     columns: [

     {data: 'DT_RowIndex'},
     {data: "clientship_fullname"},
     {data: "clientship_gender"},
     {data: "clientship_dob"},
     {data: "clientship_phone1"},
     {data: "address"},
     {data: "action"},

     ],  
     "initComplete": function(settings, json) {
      $('#main-spinner').hide();
  }        
});

   $.fn.dataTable.ext.errMode = 'throw';
});

</script>

@endsection

