@extends('adminlte::page')
<?php Fun::lang() ?>
@section('content')
@include('administrator.client-payment.payment.form-approve-payment')
<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="#">Operation</a></li>
            <li><a href="#">Manage Approve deposit</a></li>
            <li><a href="#">Approval deposit</a></li>
        </ul>
    </div>
</div>
<div class="page">
    <div class="alert-message alert-success" id="done" style="display: none">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <i class="fa fa-check"></i>
        <h3>Success</h3>
        <p>Approved success</p>
    </div>
    <div class="alert-message alert-success" id="done_reject" style="display: none">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <i class="fa fa-check"></i>
        <h3>Success</h3>
        <p>Reject success</p>
    </div>
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="pull-left">
                    <h3>Payment deposit</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="box-body">
{{--        <form action="{{route('print-panding-client-payment')}}" method="POST">--}}
{{--            @csrf--}}
{{--            @method('POST')--}}
{{--            <div class="col-sm-12">--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="label-control col-sm-4 text-right">Start Date</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        <input type="text" class="form-control date_picker" name="start" id="start">--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="label-control col-sm-4 text-right">End Date</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        <input type="text" class="form-control date_picker" name="end" id="end">--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="col-sm-4 label-control text-right">Cashier</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        {!! Form::select('cashier',$cashier,null,['class'=>'form-control select2','id'=>'cashier']) !!}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="col-sm-4 label-control text-right">Payment Method</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        {!! Form::select('method',[''=>'Please Select','11001'=>'Cash On Hand','11002'=>'Cash In Bank'],null,['class'=>'form-control select2','id'=>'method']) !!}--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="col-sm-4 label-control text-right">Receipt</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        <input type="text" class="form-control" name="receipt" id="receipt">--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--                <div class="form-group col-sm-6">--}}
{{--                    <label for="" class="col-sm-4 label-control text-right">Reference</label>--}}
{{--                    <div class="col-sm-8">--}}
{{--                        <input type="text" class="form-control" name="reference" id="reference">--}}
{{--                    </div>--}}
{{--                </div>--}}
{{--            </div>--}}

{{--            <div class="row form-group col-sm-12">--}}
{{--                <div class="pull-right">--}}
{{--                    <button type="button" class="btn btn-md btn-info" onclick="search()"><span class="fa fa-search"></span> Search</button>--}}
{{--                    <button type="submit" class="btn btn-md btn-warning" style="margin-left: 2px;"><span class="fa fa-print"></span> Print</button>--}}
{{--                </div>--}}
{{--            </div>--}}
{{--        </form>--}}
        <div class="row col-sm-12">
            <div class="form-group pull-right">
                @can('Approval-Payment-Action-Approve')
                <a class="btn btn-warning btn-md fa fa-check" id="approve_payment">Approve</a>
                <a class="btn btn-danger btn-md fa fa-times" id="reject_payment" style="margin-left: 2px"> Reject</a>
                @endcan
            </div>
        </div>
        <div class="row col-sm-12">
            <div class="table-responsive">
                <table id="datatable_payment_pending" 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>Date Deposit</th>
                            <th>Client</th>
                            <th>Item</th>
                            <th>Amount</th>
                            <th>Type</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="overlay">
    <div id="loading-img"></div>
</div>
@endsection
@section('js')
<script type="text/javascript">
    $(document).ready(function() {
        $('#datatable_payment_pending').DataTable({
            ordering: true,
            serverSide: false,
            processing:true,
            searching: true,
            paging: true,
            "scrollY":"600px",
            "scrollCollapse": true,
            ajax: "{{route('datatable_client_payment_deposit')}}",
            "lengthMenu": [
                [25, 50, 100, -1],
                [25, 50, 100, "All"]
            ],
            dom: 'Blfrtip',
            buttons: [
                'copyHtml5',
                'excelHtml5',
                'csvHtml5',
                'pdfHtml5'
            ],
            columns: [{
                    data: 'DT_RowIndex'
                },
                {
                    data: 'check_id',
                    'width': '3px'
                },
                {
                    data: 'sale_date'
                },
                {
                    data: 'client_fullname'
                },
                {
                    data: 'item_house'
                },
                {
                    data: 'sale_amount'
                },
                {
                    data: 'type'
                }
            ]
        });
        $('#check_all').on('click', function(e) {
            if ($(this).is(':checked', true)) {
                $(".checkbox").prop('checked', true);
            } else {
                $(".checkbox").prop('checked', false);
            }
        });
        $(document).on('click', '#reject_payment', function() {
            var idsArr = [];
            $(".checkbox:checked").each(function() {
                idsArr.push($(this).attr('data-id'));
            });
            if (idsArr.length <= 0) {
                $.alert({
                    title: 'Error!',
                    content: 'No Payment Selected!',
                });
            } else {
                $.confirm({
                    title: 'Are Your Sure to Reject?',
                    content: '<p>' + idsArr.length + ' Payment(s) will be rejected</p>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function() {
                                var name = this.$content.find('.name').val();
                                if (idsArr.length <= 0) {
                                    $.alert({
                                        title: 'Error!',
                                        content: 'No Payment Selected!',
                                    });
                                    return false;
                                } else {
                                    $('#main-spinner').show();
                                    $.ajax({
                                        url: "{{route('reject_client_payment')}}",
                                        type: "POST",
                                        dataType: 'json',
                                        data: {
                                            "_token": "{{ csrf_token() }}",
                                            paid_id: idsArr
                                        },
                                        success: function(data) {
                                            $('#main-spinner').hide();
                                            if (data == "error") {
                                                $.alert({
                                                    title: 'Error!',
                                                    content: 'Please Reject In Order, From the latest to the oldest!',
                                                });
                                            } else {
                                                $('#datatable_payment_pending').DataTable().ajax.reload();
                                                $('#done_reject').show();
                                            }

                                        },
                                        error: function(err) {
                                            console.log(err);
                                        }
                                    });
                                }
                            }
                        },
                        cancel: function() {},
                    },
                    onContentReady: function() {
                        var jc = this;
                        this.$content.find('form').on('submit', function(e) {
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click');
                        });
                    }
                });
            }
        });
        $('.checkbox').on('click', function() {
            if ($('.checkbox:checked').length == $('.checkbox').length) {
                $('#check_all').prop('checked', true);
            } else {
                $('#check_all').prop('checked', false);
            }
        });
        $('#approve_payment').on('click', function() {
            var idsArr = [];
            $(".checkbox:checked").each(function() {
                idsArr.push($(this).attr('data-id'));
            });
            if (idsArr.length <= 0) {
                $.alert({
                    title: 'Error!',
                    content: 'No Payment Selected!',
                });
            } else {
                $.confirm({
                    title: 'Are Your Sure to Approve?',
                    content: '<p>' + idsArr.length + ' Payment(s) Booking will be approved</p>',
                    buttons: {
                        formSubmit: {
                            text: 'Submit',
                            btnClass: 'btn-blue',
                            action: function() {
                                var name = this.$content.find('.name').val();
                                if (idsArr.length <= 0) {
                                    $.alert('Please Select Any Payment');
                                    return false;
                                } else {
                                    $('#main-spinner').show();
                                    $.ajax({
                                        url: "{{route('approve_client_payment_deposit')}}",
                                        type: "POST",
                                        dataType: 'json',
                                        data: {
                                            "_token": "{{ csrf_token() }}",
                                            paid_id: idsArr
                                        },
                                        success: function(data) {
                                            $('#main-spinner').hide();
                                            $('#datatable_payment_pending').DataTable().ajax.reload();
                                            $('#done').show();
                                            $('.overlay').hide();
                                        },
                                        error: function(err) {
                                            console.log(err);
                                        }
                                    });
                                }
                            }
                        },
                        cancel: function() {},
                    },
                    onContentReady: function() {
                        var jc = this;
                        this.$content.find('form').on('submit', function(e) {
                            e.preventDefault();
                            jc.$$formSubmit.trigger('click');
                        });
                    }
                });
            }
        });
    });

</script>
@endsection