@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 Detail</a></li>
                <li><a href="#">Commission Project Owner Detail</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>Commission Project Owner Detail</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
   <div class="row">
    <div class="col-sm-12 col-xs-12">
       <form action="{{url('realty/report-commission-po-history-print')}}" method="POST">
         @csrf
         <div class="form-search">
             <div class="row">
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Start Date</strong> {!! Form::text('start_date', null, array('placeholder' => 'Start Date','class' => 'form-control date_picker start_date','autocomplete' => 'off')) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>End Date</strong> {!! Form::text('end_date', null, array('placeholder' => 'End Date','class' => 'form-control date_picker end_date','autocomplete' => 'off')) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Project</strong>
                         {!! Form::select('project_id', $projects, null, ['class' => 'form-control select2 form-control project_id']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Client Name</strong>
                         {!! Form::select('client_id', $clients, null, ['class' => 'form-control select2 form-control client_id']) !!}
                     </div>
                 </div>
                 <div class="col-xs-12 col-sm-3 col-md-3">
                     <div class="form-group">
                         <strong>Item Code</strong>
                         {!! Form::select('item_id', $items, null, ['class' => 'form-control select2 form-control item_id']) !!}
                     </div>
                 </div>

                 <div class="col-xs-12 col-sm-12 col-md-12 text-right">
                     <button type="button" class="button_primary btn-sm search" onclick="searching()">
                         <span class="fa fa-search"> Search</span></button>&nbsp
                     @can('Commission-Owner-Detail-Print')
                     <button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
                     @endcan
                 </div>
             </div>
         </div>
        {!! Form::close() !!}
      </div>
   </div>
   <div class="row">
      <div class="col-sm-12 col-xs-12">
        <div class="box-body table-responsive">
          <table id="datatable_item_deposit" class="table center table-striped table-bordered table-hover nowrap">
          <thead>
              <tr>
                  <th>No</th>
                  <th>Date Commission Receive</th>
                  <th>Project Name</th>
                  <th>Client Name</th>
                  <th>Item Name</th>
                  <th>Item Price</th>
                  <th>Commission Receive</th>
              </tr>
          </thead>
          <tbody class="tbody"></tbody>
          <tfoot class="tfoot">
              <tr>
                  <td colspan="6" style="text-align: right;">Total :</td>
                  <td></td>
              </tr>
          </tfoot>
          </table>
        </div>
      </div>
    </div>
</div>

 @endsection
@section('js')

<script type="text/javascript">
      $(document).ready(function(){
        $('.main-spinner').show();    
        $('#datatable_item_deposit').DataTable({
            "serverSide": true,
            ajax: "{{ route('datatable_get_commission_project_owner_history') }}",
            columns: [
                {data: 'DT_RowIndex'},
                {data: 'created_at'},
                {data: 'project_name'},
                {data: 'client_fullname'},
                {data: 'item_house'},
                {data: 'sale_amount'},
                {data: 'commission_amount'},
            ],
            dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;

                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };

                var conditioc_Total = api
                    .column( 6 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );


                var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '$ ' ).display;
                $( api.column( 6 ).footer() ).html(numFormat(conditioc_Total));

            },

            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
          });
         $.fn.dataTable.ext.errMode = 'throw';
      });
  </script>
<script type="text/javascript">
    function searching() {
        $('#datatable_item_deposit').DataTable().destroy();
        var start_date = $('.start_date').val();
        var end_date = $('.end_date').val();
        var client_id = $('.client_id').val();
        var item_id = $('.item_id').val();
        var project_id = $('.project_id').val();
        $('#datatable_item_deposit').DataTable({
            "serverSide": true,
            ajax: {
                type:"POST",
                url:"{{ route('datatable_get_commission_project_owner_history') }}",
                data:{
                    _token:"{{csrf_token()}}",
                    start_date:start_date,
                    end_date:end_date,
                    client_id:client_id,
                    item_id:item_id,
                    project_id:project_id
                }
            },
            dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
            columns: [
                {data: 'DT_RowIndex'},
                {data: 'created_at'},
                {data: 'project_name'},
                {data: 'client_fullname'},
                {data: 'item_house'},
                {data: 'sale_amount'},
                {data: 'commission_amount'},
            ],
            "footerCallback": function ( row, data, start, end, display ) {
                var api = this.api(), data;
                var intVal = function ( i ) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '')*1 :
                        typeof i === 'number' ?
                            i : 0;
                };
                var conditioc_Total = api
                    .column( 6 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );
                var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '$ ' ).display;
                $( api.column( 6 ).footer() ).html(numFormat(conditioc_Total));
            },
            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
          });
         $.fn.dataTable.ext.errMode = 'throw';
    }
</script>

@endsection


            {{-- {data: 'agency_fullname'},
            {data: 'client_fullname'},
            {data: 'project_name'},
            {data: 'category_name'}, --}}
                  {{-- <th>Agency Name</th>
                  <th>Client Name</th>
                  <th>Project Name</th>
                  <th>Category Name</th> --}}