 @extends('adminlte::page') @section('content')
 <?php Fun::lang() ?>
 <div class="title-page">
     <div class="page-bar">
         <ul class="page-breadcrumb">
             <li><a href="#"><i class="fa fa-dashboard"></i> Dashboard</a></li>
             <li><a href="#">Report Project Owner</a></li>
             <li><a href="#">Report Contract</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>Report Client Contract</h3>
                     </div>
                 </div>

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

     <div class="box-body">
         <form action="" method="POST">
             @csrf()
             @method('POST')
             <div class="col-sm-12">
                 <div class="col-sm-6 form-group">
                     <label for="" class="text-right">Project Name</label>
                     {!! Form::select('project_id',$projects,null,['class'=>'select2 form-control','id'=>'project_id']) !!}
                 </div>
                 <div class="col-sm-6 form-group">
                     <label for="" class="text-right">Item Name</label>
                     {!! Form::select('item_id',$items,null,['class'=>'select2 form-control','id'=>'item_id']) !!}
                 </div>
                 <div class="col-sm-6 form-group">
                     <label for="" class="text-right">Start Date</label>
                     {!! Form::text('start_date',null,['class'=>'form-control date_picker','placeholder'=>'Select Date','id'=>'start_date']) !!}
                 </div>
                 <div class="col-sm-6 form-group">
                     <label for="" class="text-right">End Date</label>
                     {!! Form::text('start_date',null,['class'=>'form-control date_picker','placeholder'=>'Select Date','id'=>'end_date']) !!}
                 </div>
                 <div class="col-sm-6 pull-right form-group">
                     <button type="button" class="btn btn-primary fa fa-search pull-right" onclick="search()"> Search</button>
                 </div>
             </div>
         </form>
         <div class="row col-sm-12">
             <div class="table-responsive">
                 <table id="datatable_client_contract" class="table table-striped table-bordered table-hover nowrap">
                     <thead>
                         <tr>
                             <th></th>
                             <th>No</th>
                             <th>Booking Date</th>
                             <th>Project Name</th>
                             <th>Item Code</th>
                             <th>Client Name</th>
                             <th>Gender</th>
                             <th>Phone</th>
                             <th>Address</th>
                         </tr>
                     </thead>
                 </table>
             </div>
         </div>
     </div>
 </div>
 <div class="overlay">
     <div id="loading-img"></div>
 </div>
 @endsection @section('js')
 <script type="text/javascript" src="{{asset('assets/scripts/yajrabox-datatable/handlebars.min.js')}}"></script>
 <script type="text/javascript" src="{{asset('assets/controller/client-contract.js')}}"></script>
 <script id="details-template" type="text/x-handlebars-template">

     @verbatim
        <div style="border-top:2px solid #000;"></div>
        <table width="100%" class="menghortphon" id="sale-info">
            <tbody>
                <tr class="trh">
                    <td>Project :</td>
                    <td class="project"></td>
                    <td>Item Code :</td>
                    <td class="item-code"></td>
                    <td>Category :</td>
                    <td class="category"></td>
                </tr>
                <tr class="trh">
                    <td>Price :</td>
                    <td class="price"></td>
                    <td>Deposit :</td>
                    <td class="deposit"></td>
                    <td>Discount :</td>
                    <td class="discount"></td>
                </tr>
                <tr class="trh">
                    <td>Paid :</td>
                    <td class="paid"></td>
                    <td>Balance :</td>
                    <td class="balance"></td>
                </tr>

            </tbody>
        </table>
        <table class="table details-table" id="purchases-{{id}}">
            <thead>
                <tr>
                    <th>No</th>
                    <th>Payment Date</th>
                    <th>Principal</th>
                    <th>Interest</th>
                    <th>Payment</th>
                    <th>Principal Balance</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody class="tbody">

            </tbody>
        </table>
        @endverbatim
    </script>

 <script type="text/javascript">
     $('.main-spinner').show();
     var template = Handlebars.compile($("#details-template").html());
     var table = $('#datatable_client_contract').DataTable({
         serverSide: true,
         ajax: "{{ route('datatable.get_client_contract') }}",
         dom: 'Blfrtip',
         buttons: [
             'copyHtml5',
             'excelHtml5',
             'csvHtml5',
             'pdfHtml5'
         ],
         columns: [{
                 "className": 'details-control',
                 "orderable": false,
                 "searchable": false,
                 "data": null,
                 "defaultContent": ''
             },
             {
                 data: 'DT_RowIndex',
                 searchable: false,
                 ordering: false,
                 name: 'DT_RowIndex'
             },
             {
                 data: 'date',
                 name: 'sale.sale_date'
             },
             {
                 data: 'project_name',
                 name: 'project.project_name'
             },
             {
                 data: 'item_name',
                 name: 'stock.item_house'
             },
             {
                 data: 'client_fullname',
                 name: 'client.client_fullname'
             },
             {
                 data: 'gender',
                 searchable: false
             },
             {
                 data: 'client_phone1',
                 name: 'client.client_phone1'
             },
             {
                 data: 'address',
                 searchable: false
             },
         ],
         "initComplete": function(settings, json) {
             $('.main-spinner').hide();
         }
     });

     function search() {
         $('#datatable_client_contract').DataTable().destroy();
         var item_id = $('#item_id').find(':selected').val();
         var category_id = $('#category_id').find(':selected').val();
         var project_id = $('#project_id').val();
         var start_date = $('#start_date').val();
         var end_date = $('#end_date').val();
         table = $('#datatable_client_contract').DataTable({
             serverSide: true,
             ajax: {
                 type: "POST",
                 url: "{{ route('datatable.get_client_contract') }}",
                 data: {
                     _token: "{{csrf_token()}}",
                     item_id: item_id,
                     category_id: category_id,
                     project_id: project_id,
                     start_date: start_date,
                     end_date: end_date
                 }
             },
             dom: 'Blfrtip',
             buttons: [
                 'copyHtml5',
                 'excelHtml5',
                 'csvHtml5',
                 'pdfHtml5'
             ],
             columns: [{
                     "className": 'details-control',
                     "orderable": false,
                     "searchable": false,
                     "data": null,
                     "defaultContent": ''
                 },
                 {
                     data: 'DT_RowIndex',
                     searchable: false,
                     ordering: false,
                     name: 'DT_RowIndex'
                 },
                 {
                     data: 'date',
                     name: 'sale.sale_date'
                 },
                 {
                     data: 'project_name',
                     name: 'project.project_name'
                 },
                 {
                     data: 'item_name',
                     name: 'stock.item_house'
                 },
                 {
                     data: 'client_fullname',
                     name: 'client.client_fullname'
                 },
                 {
                     data: 'gender',
                     searchable: false
                 },
                 {
                     data: 'client_phone1',
                     name: 'client.client_phone1'
                 },
                 {
                     data: 'address',
                     searchable: false
                 },
             ],
             "initComplete": function(settings, json) {
                 $('.main-spinner').hide();
             }
         });
     }
 </script>


 @endsection