 @extends('adminlte::page') @section('content')
<?php Fun::lang()?>
    <div class="page">
        <div class="top-content">
            <div class="row">
                <div class="col-sm-12 col-xs-12">
                    <div class="pull-left">
                        <h3>Report Add Deposit</h3>
                    </div>
                   
                </div>
            </div>
        </div>
        <form action="{{url('realty/report-add-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-3 col-md-3">
                        <div class="form-group">
                            <strong>Project Name</strong>
                            {!! Form::select('project_name', $project, null, ['class' => 'form-control select2 form-control project_name']) !!}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3">
                        <div class="form-group">
                            <strong>Category Name</strong>
                            {!! Form::select('category_name', $category, null, ['class' => 'form-control select2 form-control category_name']) !!}
                        </div>
                    </div>

                    <div class="col-xs-12 col-sm-4 col-md-4">
                        <div class="form-group">

                        </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>
            {!! Form::close() !!}
        <div class="box-body table-responsive">
            <table id="datatable_report_booking" class="table table-striped table-bordered table-hover nowrap">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Deposit Date</th>
                        <th>Client Name</th>
                        <th>Project Name</th>
                        <th>Category</th>
                        <th>Item Name</th>
                        <th>Sale Price</th>
                        <th>Amount Deposite</th>
                    </tr>
                </thead>
                <tbody class="tbody">

                </tbody>
                <tfoot class="tfoot">
                <tr>
                    <td colspan="6" style="text-align: right;">Total :</td>
                    <td></td>
                    <td></td>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
    @endsection @section('js')

    <script type="text/javascript">
        $(document).ready(function() {
            $('.main-spinner').show();
            $('#datatable_report_booking').DataTable({
                ordering:  false,
                "serverSide": true,
                "lengthMenu": [[20, 30, 50, 100, 200,500,1000], [20, 30, 50, 100, 200,500,1000]],
                ajax: "{{ route('datatable.get_report_add_deposit') }}",
                columns: [

                    {data: 'DT_RowIndex',"searchable": false},
                    {data: 'deposit_date',"searchable": false},
                    {data: 'client_fullname','name':'nso007_client.client_fullname'},
                    {data: 'project_name','name':'nso007_project_stock.project_name'},
                    {data: 'category_name', width: '5px','name':'nso007_category_stock.category_name'},
                    {data: 'item_name','name':'nso007_item_stock.item_name'},
                    {data: 'item_price',"searchable": false},
                    {data: 'deposit_amount',"searchable": false},

                ],
                columnDefs: [
                    { className: 'text-right', targets: [6, 7] },
                    { className: 'text-center', targets: [0,1] },
                ],
                "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 sale_price_Total = api
                        .column( 6 )
                        .data()
                        .reduce( function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0 );

                    var deposit_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( 6 ).footer() ).html(numFormat(sale_price_Total));
                    $( api.column( 7 ).footer() ).html(numFormat(deposit_Total));
                },

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

            });
        });
    </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 project_name = $('.project_name').val();
            var category_name = $('.category_name').val();
            var table = '';
            var i = 0;
            var total_sale_amount = 0;
            var total_sale_receive = 0;
            $('.tbody').empty();
            $('.tfoot').empty();
            $.ajax({
                method: 'POST',
                dataType: 'json',
                url: '/realty/datatable_get_report_add_deposit',
                async: false,
                data: {

                    _token: '{{ csrf_token() }}',
                    start_date: start_date,
                    end_date: end_date,
                    client_name: client_name,
                    item_name: item_name,
                    project_name: project_name,
                    category_name: category_name,
                },
                success: function(response) {
                    $.each(response, function(index, val) {
                        str = val.deposit_date;
                        st2 = str.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.project_name + "</td>" +
                            "<td>" + val.category_name + "</td>" +
                            "<td>" + val.item_name + "</td>" +
                            "<td style='text-align: right;'>$" + parseFloat(val.item_price).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                            "<td style='text-align: right;'>$" + parseFloat(val.deposit_amount).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,') + "</td>" +
                            "</tr>";

                        total_sale_amount += parseFloat(val.item_price);
                        total_sale_receive += parseFloat(val.deposit_amount);
                    });

                    $('.dataTables_filter').hide();
                    $('.dataTables_info').hide();
                    $('.pagination').hide();
                    $('.dataTables_length').hide();
                    var tfoot = `<tr>
                            <td colspan="6" 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_sale_receive).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,')}</td>
                          </tr>`;

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

                },

            });
        }
    </script>

    @endsection