@extends('admin.layout')
@section('main')
    <div class="content-overlay"></div>
    <div class="header-navbar-shadow"></div>
    <div class="content-wrapper">
        <div class="content-header row">
        </div>
        <div class="content-body">
            <!-- Dashboard Ecommerce Starts -->
            <section id="dashboard-ecommerce">
                <div class="row match-height justify-content-end g-2">
                    <div class="col-lg-auto col-md-auto col-sm-auto col-auto mr-auto my-auto">
                        <h2 class="m-0"> Payments Details

                        </h2>
                    </div>
                    <div class="col-lg-auto col-md-6 my-1">
                        <div class="d-flex">
                            {{-- @can('activity_multi_division_assign') --}}
                            <div class="form-group mr-1">
                                <button onclick="bulkProcess()"
                                    class="btn btn-info btn-toggle-sidebar waves-effect waves-float waves-light">
                                    <span class=""> Process Bulk Payment</span>
                                </button>

                            </div>
                            {{-- @endcan --}}
                            {{-- @if (auth()->user()->can('payment_initiated_view_logs')) --}}
                            <div class="form-group mr-1">
                                <button onclick="bulkProcessLogs()"
                                    class="btn btn-primary btn-toggle-sidebar waves-effect waves-float waves-light">
                                    <span class=""> Process Bulk Payment Logs</span>
                                </button>
                            </div>
                            {{-- @endif --}}
                            {{-- <div class="form-group">
                                <a href=""
                                    class="btn btn-success btn-toggle-sidebar waves-effect waves-float waves-light">
                                    <span class=""><i data-feather="download" class="ml-1"></i> Export</span>
                                </a>
                            </div> --}}
                        </div>
                    </div>

                </div>


                <div class="modal fade" id="bulkProcess" tabindex="-1" role="dialog" aria-labelledby=""
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title font-weight-bolder" id="">Process Bulk Payment</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body py-3">
                                <div class="row">
                                    <div class="col-12 ">
                                        <div class="row">
                                            <div class="col-lg-5 my-auto" style="border-right:1px solid #ccc">
                                                {{ Form::open(['url' => '#', 'name' => 'paymentprocess', 'id' => 'paymentprocess', 'enctype' => 'multipart/form-data']) }}
                                                <div class="form-group">
                                                    <button class="btn btn-outline-primary w-100">
                                                        <input type="file" name="vProcessFile" class="upload-file"
                                                            id="vProcessFile"
                                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                                                        <span class="filename">Browse</span>
                                                        <i class="fa fa-upload ml-1" style="color: #db644d;"></i>
                                                    </button>
                                                    <label id="vProcessFile-error" class="error"
                                                        for="vProcessFile"></label>
                                                    <p class="text-danger text-center mt-1">(Max. size 10 MB per file)</p>
                                                </div>
                                                <div class="d-flex   ">
                                                    <button class="btn btn-primary mx-auto d-block mt-1 mr-1"
                                                        type="submit">
                                                        <i class="fa fa-upload mr-1"></i> Upload
                                                    </button>
                                                    <a href="{{ asset('samples/other-services/activity-payment-sample.xlsx') }}"
                                                        class="btn btn-success mx-auto d-block mt-1">
                                                        <i class="fa fa-download mr-1"></i> Download Sample
                                                    </a>
                                                </div>
                                                {{ Form::close() }}
                                            </div>
                                            <div class="col-lg-7 ">
                                                <h4 class="mb-2" style="text-decoration:underline">Instructions for
                                                    Process Bulk
                                                    Payment:</h4>
                                                <p><i class="fa fa-angle-double-right mr-1"></i>Please Import with
                                                    <b>Payment
                                                        Information</b>
                                                </p>
                                                <p><i class="fa fa-angle-double-right mr-1"></i>Please ensure that you save
                                                    and
                                                    close the excel sheet in your computer before you upload the file</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="bulkProcess_logs" tabindex="-1" role="dialog" aria-labelledby=""
                    aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title font-weight-bolder" id="">View Logs</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <div class="row">
                                    <div class="col-12">


                                        <div class="table-responsive">

                                            <table class="dt-column-search1 table table-striped w-100 text-center"
                                                id="bulkProcess_dataTable">
                                                <thead class="w-100">
                                                    <tr>
                                                        <th>Sr. No.</th>
                                                        <th>Inserted Count</th>
                                                        <th>Error Count</th>
                                                        <th>Total Count</th>
                                                        <th>Status</th>
                                                        <th>Remarks</th>
                                                        <th>Import Date & Time</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                </tbody>
                                            </table>
                                        </div>

                                    </div>
                                </div>

                            </div>

                        </div>
                    </div>
                </div>
            </section>
            <!-- Dashboard Ecommerce ends -->
            <section id="column-search-datatable">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-datatable p-1">
                                <table class="dt-column-search table table-striped w-100 text-center display"
                                    id="dataTable">
                                    <thead>
                                        <tr>
                                            <th>Sr. No.</th>
                                            <th>PPM TRAN ID </th>
                                            <th>Payee Code </th>
                                            <th>Payee Name </th>
                                            <th>Payee City </th>
                                            <th>Payable Amount </th>
                                            <th>Adv Adj </th>
                                            <th>TDS Amt </th>
                                            <th>Paid Amount </th>
                                            <th>Payee Type</th>
                                            <th>Payment Method </th>
                                            <th>UTR NO </th>
                                            <th>UTR DATE </th>
                                            <th>Payable Voucher Number </th>
                                            <th>Voucher Date </th>
                                            <th>Payment Voch No </th>
                                            <th>Payment Voch Date</th>
                                            <th>Date & Time </th>
                                        </tr>
                                    </thead>

                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </div>



    </div>
@endsection

@section('scripts')
    <script>
        $('.upload-file').change(function() {
            var filename = $(this).val().replace(/C:\\fakepath\\/i, '');
            $(this).siblings('span').html(filename);
        });

        function bulkProcess() {
            $("#bulkProcess").modal('show');
        }

        function bulkProcessLogs() {

            $("#bulkProcess_logs").modal('show');
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    "orderable": false,
                    searchable: false
                },
                {
                    data: 'insert_count',
                    name: 'iInsertCount',
                },
                {
                    data: 'error_count',
                    name: 'iErrorCount',
                },
                {
                    data: 'total_count',
                    name: 'iImportCount',
                },
                {
                    data: 'status',
                    name: 'eStatus',
                },
                {
                    data: 'vComment',
                    name: 'vComment',
                },
                {
                    data: 'created_at',
                },
            ];
            var columnDefs = [];
            getdatatable_bulkProcess_logs("{{ route('division.other.activity.payment.import.paginate') }}",
                columns, columnDefs);
        }

        function getdatatable_bulkProcess_logs(url, columns, columnDefs) {
            $('#bulkProcess_dataTable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}"
                    }
                },
                "drawCallback": function(settings) {
                    feather.replace();

                }
            });
        }
        $(function() {
            $.validator.addMethod('filesize', function(value, element, param) {
                return this.optional(element) || (element.files[0].size <= param)
            }, 'File size must be less than {0}');
            $("#paymentprocess").validate({
                rules: {
                    vProcessFile: {
                        required: true,
                        extension: "xlsx",
                        filesize: 15000000,
                    }
                },
                submitHandler: function(form) {
                    var formData = new FormData($("#paymentprocess")[0]);

                    ajax_submit(
                        "{{ route('division.other.activity.payment.import.uploadfile') }}",
                        'POST',
                        formData, 1, 'dataTable', 1, 1, 'paymentprocess_response');

                    $('#bulkProcess').modal('hide');
                }
            });
        });

        function paymentprocess_response(response) {
            if (response.status == 1) {
                $('#bulkProcess').modal("hide");
                $('#paymentprocess').trigger("reset");
                $(".filename").html('Browse');
            }
        }


        $('.center_code_div>.unlock_center_code').hide();
        $('.center_code_div>.unlock_center').hide();
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.unlock_center').show();
            $('.center_code_div>.unlock_center_code').show();
            $('.center_code_div>.lock_center').hide();
        })
        $('.center_code_div').on('click', function() {
            $('.center_code_div>.lock_center').show();
            $('.center_code_div>.unlock_center').hide();
            $('.center_code_div>.unlock_center_code').hide();
        })
        dt_filter_table = $('.dt-column-search');
        if (dt_filter_table.length) {
            var dt_filter = dt_filter_table.DataTable({
                'scrollX': true,

            });

            new VenoBox({
                selector: '.my-image-links',
                numeration: true,
                infinigall: true,
                share: true,
                spinner: 'rotating-plane'
            });
        }

        $(function() {
            var columns = [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vOtherActivityAssignID',
                    name: 'vOtherActivityAssignID',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayeeCode',
                    name: 'vPayeeCode',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayeeName',
                    name: 'vPayeeName',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayeeCity',
                    name: 'vPayeeCity',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayableAmount',
                    name: 'vPayableAmount',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vAdvAdj',
                    name: 'vAdvAdj',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vTDSAmt',
                    name: 'vTDSAmt',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPaidAmount',
                    name: 'vPaidAmount',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayeeType',
                    name: 'vPayeeType',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPaymentMethod',
                    name: 'vPaymentMethod',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vUTRNO',
                    name: 'vUTRNO',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'dtUTRDate',
                    name: 'dtUTRDate',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPayableVoucherNumber',
                    name: 'vPayableVoucherNumber',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'dtVoucherDate',
                    name: 'dtVoucherDate',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'vPaymentVochNo',
                    name: 'vPaymentVochNo',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'dtPaymentVochDate',
                    name: 'dtPaymentVochDate',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'created_at',
                    name: 'created_at'
                }
            ];
            var columnDefs = [];
            getdatatable("{{ route('division.other.activity.payment.data.paginate') }}", columns, columnDefs);
        });

        function getdatatable(url, columns, columnDefs) {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                bDestroy: true,
                order: [],
                "scrollX": true,
                columns: columns,
                columnDefs: columnDefs,
                ajax: {
                    method: 'post',
                    url: url,
                    data: function(d) {
                        d._token = "{{ csrf_token() }}";
                        d.iOtherActivityAssignID = "{{ $iOtherActivityAssignID }}";
                    }
                },
                "drawCallback": function(settings) {
                    new VenoBox({
                        selector: '.venobox_img',
                    });
                    feather.replace();
                }
            });
        }
    </script>
@endsection