@extends('adminlte::page')
@section('content')
@include('administrator.deposit.form-add-collect')
<?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 Collect Deposit</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="col-xs-5 col-sm-5 col-md-5">
                    <div class="title-add">
                        <div class="pull-left">
                            <h3>Report Collect Deposit</h3>
                        </div>
                    </div>
                </div>
                <div class="col-xs-7 col-sm-7 col-md-7 text-right">
                    <div class="top-view">
                        @can('Collect-Deposit-Report-Print')
                        <span style="color:white;margin-left:0;" class="button_primary btn btn-circle btn-xs" data-toggle="modal" title="Collect Deposit" onclick="addToPrint()"><i class="fa fa-check">Add To Print</i></span>
                        @endcan
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12 col-xs-12">
            <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, ['class' => 'form-control date_picker start_date']) !!}
                        </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, ['class' => 'form-control date_picker end_date']) !!}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3">
                        <div class="form-group">
                            <strong>Project Name</strong>
                            {!! Form::select('project_id', $projects, null, ['class' => 'select2 form-control project_id']) !!}
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-3 col-md-3">
                        <div class="form-group">
                            <strong>Item Name</strong>
                            {!! Form::select('item_id', $item, null, ['class' => '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
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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>
                        <label class="checkbox-list">
                            <input type="checkbox" id="check_all">
                            <span class="checkmark"></span></label>

                    </th>
                    <th>Name</th>
                    <th>Phone</th>
                    <th>Address</th>
                    <th>Project Name</th>
                    <th>Category</th>
                    <th>Item Code</th>
                    <th>Street No</th>
                    <th>House No</th>
                    <th>Zone</th>
                    <th>House Size</th>
                    <th>Land Size</th>
                    <th>Sale Price</th>
                    <th>Deposit</th>
                    <th>Remain Amount</th>
                    <th>Sale Date</th>
                    <th>Contract Date</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody class="tbody">
            </tbody>
            <tfoot class="tfoot">
                <tr>
                    <td colspan="13" style="text-align: right;">Total :</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="3"></td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

@endsection @section('js')

<script type="text/javascript">
    $(document).ready(function() {
        $('.main-spinner').show();
        $('#datatable_report_booking').DataTable({
            serverSide: true,
            ordering: false,
            dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
            ajax: "{{ route('datatable.get_report_collect_deposit') }}",
            columns: [{
                    data: 'DT_RowIndex'
                },
                {
                    data: 'check_id',
                    'width': '3px'
                },
                {
                    data: 'client_name'
                },
                {
                    data: 'client_phone1'
                },
                {
                    data: 'client_address'
                },
                {
                    data: 'project_name'
                },
                {
                    data: 'category_name',
                    width: '5px'
                },
                {
                    data: 'item_name'
                },
                {
                    data: 'item_street'
                },
                {
                    data: 'item_house'
                },
                {
                    data: 'zone_name'
                },
                {
                    data: 'house_size'
                },
                {
                    data: 'land_size'
                },
                {
                    data: 'item_price',
                    "className": 'text-right'
                },
                {
                    data: 'sale_receive',
                    "className": 'text-right'
                },
                {
                    data: 'remain_amount',
                    "className": 'text-right'
                },
                {
                    data: 'sale_date'
                },
                {
                    data: 'contract_date'
                },
                {
                    data: 'status'
                }
            ],
            "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 column14 = api
                    .column(13)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var column15 = api
                    .column(14)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var column16 = api
                    .column(15)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var numFormat = $.fn.dataTable.render.number('\,', '.', 2, '$ ').display;
                $(api.column(13).footer()).html(numFormat(column14));
                $(api.column(14).footer()).html(numFormat(column15));
                $(api.column(15).footer()).html(numFormat(column16));
            },
            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
        });
    });
    $(document).on('click', '#check_all', function() {
        if ($(this).is(':checked')) {
            $('.checkbox').prop('checked', true);
        } else {
            $('.checkbox').prop('checked', false);
        }
    });

    function addToPrint() {
        var arrayID = [];
        $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
                arrayID.push($(this).val());
            }
        });
        if (arrayID.length == 0) {
            $.alert({
                title: 'Warning!',
                content: 'No Row Selected!',
            });
        } else {
            $.confirm({
                title: 'Add To Print!',
                content: '' +
                    '<form action="" class="formName">' +
                    '<div class="form-group">' +
                    '<label>Description</label>' +
                    '<textarea name="description" id="description" class="form-control" cols="30" rows="5"></textarea>' +
                    '</div>' +
                    '</form>',
                buttons: {
                    formSubmit: {
                        text: 'Submit',
                        btnClass: 'btn-blue',
                        action: function() {
                            var des = this.$content.find('#description').val();
                            $.ajax({
                                type: "POST",
                                url: "{{route('print-deposit.store')}}",
                                data: {
                                    _token: "{{csrf_token()}}",
                                    des: des,
                                    ids: arrayID
                                },
                                success: function(response) {
                                    if (response.success == true) {
                                        $('#datatable_report_booking').DataTable().ajax.reload();
                                    }
                                    $.alert({
                                        title: 'Message',
                                        content: response.msg,
                                    });
                                }
                            });
                        }
                    },
                    cancel: function() {},
                },
                onContentReady: function() {
                    var jc = this;
                    this.$content.find('form').on('submit', function(e) {
                        e.preventDefault();
                        jc.$$formSubmit.trigger('click');
                    });
                }
            });
        }
    }
</script>
<script type="text/javascript">
    function searching() {
        var project_id = $('.project_id').val();
        var start_date = $('.start_date').val();
        var end_date = $('.end_date').val();
        var item_id = $('.item_id').val();
        $('#datatable_report_booking').DataTable().destroy();
        $('#datatable_report_booking').DataTable({
            serverSide: true,
            ordering: false,
            dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
            ajax: {
                type: "POST",
                url: "{{ route('datatable.get_report_collect_deposit') }}",
                data: {
                    _token: "{{csrf_token()}}",
                    project_id: project_id,
                    item_id: item_id,
                    start_date: start_date,
                    end_date: end_date
                }
            },
            columns: [{
                    data: 'DT_RowIndex'
                },
                {
                    data: 'check_id',
                    'width': '3px'
                },
                {
                    data: 'client_name'
                },
                {
                    data: 'client_phone1'
                },
                {
                    data: 'client_address'
                },
                {
                    data: 'project_name'
                },
                {
                    data: 'category_name',
                    width: '5px'
                },
                {
                    data: 'item_name'
                },
                {
                    data: 'item_street'
                },
                {
                    data: 'item_house'
                },
                {
                    data: 'zone_name'
                },
                {
                    data: 'house_size'
                },
                {
                    data: 'land_size'
                },
                {
                    data: 'item_price',
                    "className": 'text-right'
                },
                {
                    data: 'sale_receive',
                    "className": 'text-right'
                },
                {
                    data: 'remain_amount',
                    "className": 'text-right'
                },
                {
                    data: 'sale_date'
                },
                {
                    data: 'contract_date'
                },
                {
                    data: 'status'
                }
            ],
            "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 column14 = api
                    .column(13)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var column15 = api
                    .column(14)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var column16 = api
                    .column(15)
                    .data()
                    .reduce(function(a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                var numFormat = $.fn.dataTable.render.number('\,', '.', 2, '$ ').display;
                $(api.column(13).footer()).html(numFormat(column14));
                $(api.column(14).footer()).html(numFormat(column15));
                $(api.column(15).footer()).html(numFormat(column16));
            },
            "initComplete": function(settings, json) {
                $('.main-spinner').hide();
            }
        });
    }
</script>

@endsection