
@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 >= 50%</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 Contract >= 50%</h3>
                   <!-- <h3><i class="fa fa-list font-red-sunglo"></i> </h3> -->
                </div>
            </div>
          </div>
        </div>
    </div>
   <div class="row">
      <div class="col-sm-12 col-xs-12">
        <form action="{{url('realty/report-first-payment-plus-deposit-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>Client Name</strong>
                       {!! Form::select('client_name', $clients, null, ['class' => 'form-control select2 form-control client_name']) !!}
                   </div>
               </div>
               <div class="col-xs-12 col-sm-3 col-md-3">
                   <div class="form-group">
                       <strong>Item Code</strong>
                       {!! Form::select('item_name', $items, null, ['class' => 'form-control select2 form-control item_name']) !!}
                   </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
                   <button type="submit" class="button_primary btn-sm search"><span class="fa fa-print"> Print</span></button>
               </div>
           </div>
       </div>
      </div>
   </div>
   {!! Form::close() !!}
   <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 class="centers">
                  <th>No</th>
                  <th>Date Contract</th>
                  <th>Client Name</th>
                  <th>Street</th>
                  <th>Item Code</th>
                  <th>Item Price</th>
                  <th>First Payment</th>
                  <th>Deposit Amount</th>
              </tr>
          </thead>
          <tbody class="tbody"></tbody>
          <tfoot class="tfoot">
              <tr>
                  <td colspan="5" style="text-align: right;">Total :</td>
                  <td></td>
                  <td></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_first_payment_plus_deposit') }}",
            columns: [
                {data: 'DT_RowIndex'},
                {data: 'created_at'},
                {data: 'client_fullname'},
                {data: 'item_street'},
                {data: 'item_name'},
                {data: 'sale_amount'},
                {data: 'loan_amount_payment'},
                {data: 'sale_receive'},
            ],
            columnDefs: [
                { className: 'text-right', targets: [5,  6, 7] },
                { className: 'text-center', targets: [0,1,3,4] },
            ],
            "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 item_price_Total = api
                    .column( 5 )
                    .data()
                    .reduce( function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0 );

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

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



                var numFormat = $.fn.dataTable.render.number( '\,', '.', 2, '$ ' ).display;
                $( api.column( 5 ).footer() ).html(numFormat(item_price_Total));
                $( api.column( 6 ).footer() ).html(numFormat(loan_Total));
                $( api.column( 7 ).footer() ).html(numFormat(paid_Total));
            },

            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
          });
        $.fn.dataTable.ext.errMode = 'throw';
      });
  </script>
<script type="text/javascript">
    function searching() {

        var start_date = $('.start_date').val();
        var end_date = $('.end_date').val();
        var client_name = $('.client_name').val();
        var item_name = $('.item_name').val();
        var table = '';
        var i = 0;
        var total_sale_amount = 0;
        var total_loan_amount_payment = 0;
        var total_com_receive_amount = 0;
        $('.tbody').empty();
        $('.tfoot').empty();
        $.ajax({
            method: 'POST',
            dataType: 'json',
            url: '/realty/get-report-first-payment-plus-deposit',
            async: false,
            data: {

                _token: '{{ csrf_token() }}',
                start_date: start_date,
                end_date: end_date,
                client_name: client_name,
                item_name: item_name,
            },
            success: function(response) {
                $.each(response, function(index, val) {
                    var dateTimeSplit = val.created_at.split(' ');
                    st2 = dateTimeSplit[0].split('-');


                    yr = st2[0];
                    mo = st2[1];
                    dy = st2[2];
                    var depo_date = dy+'-'+mo+'-'+yr;

                    i++;
                    table += "<tr class='remove'>" +
                        "<td style='text-align: center;'>" + i + "</td>" +
                        "<td style='text-align: center;'>" + depo_date + "</td>" +
                        "<td>" + val.client_fullname + "</td>" +
                        "<td>" + val.item_street + "</td>" +
                        "<td>" + val.item_name + "</td>" +
                        "<td style='text-align: right;'>$" + parseFloat(val.sale_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                        "<td style='text-align: right;'>$" + parseFloat(val.loan_amount_payment).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                        "<td style='text-align: right;'>$" + parseFloat(val.sale_receive).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                        "</tr>";

                    total_sale_amount += parseFloat(val.sale_amount);
                    total_loan_amount_payment += parseFloat(val.loan_amount_payment);
                    total_com_receive_amount += parseFloat(val.sale_receive);
                });

                $('.dataTables_filter').hide();
                $('.dataTables_info').hide();
                $('.pagination').hide();
                $('.dataTables_length').hide();
                var tfoot = `<tr>
                            <td colspan="5" class="text-right">Total : </td>
                            <td style='text-align: right;'>$${parseFloat(total_sale_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                            <td style='text-align: right;'>$${parseFloat(total_loan_amount_payment).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                           <td style='text-align: right;'>$${parseFloat(total_com_receive_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                          </tr>`;

                $('.tbody').append(table);
                $('.tfoot').append(tfoot);

            },

        });
    }
</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> --}}