@extends('layouts.main', ['title' => 'Payment Requests | LOGISTICS'])
@section('navigation')
    <ul class="breadcrumb">
        <li><a href="{{route('home')}}">Dashboard</a><span class="divider">/</span></li>
        <li><a href="">Account Managements</a> <span class="divider">/</span></li>
        <li class="active">Payment Requests</li>
    </ul>
@stop
@section('title')
    Payment Requests
@endsection
@section('msghead_menu')
    <li class="right btn-group">
        <div class="btn-group">
            <button class="btn  btn-small" onclick="openAdvancedSearch('procurement_pending_order_filters')"
                    style="margin-left: 2px;">
                <span class="icon-search"></span> &nbsp; FILTER
            </button>

            <button class="btn  btn-small" id="bulk_payment" style="margin-left: 2px;">
                <span class="iconsweets-create"></span> &nbsp; PAYMENT
            </button>

        </div><!--btn-group-->
    </li>
@stop

@section('contentinner')

    <div id="procurement_pending_order_filters" class="sidenav">
        <a href="javascript:void(0)" class="closebtn"
           onclick="closeAdvancedSearch('procurement_pending_order_filters')">&times;</a>


        <form target="_blank" class="form-inline form-filter" method="get"
              action="#">

            <label class="control-label" for="Category">Entry #</label>
            <input name="entry_id" id="entry_id" class="span12">

            <label class="control-label" for="Category">Date</label>
            <input name="entry_date" id="entry_date" class="span12" autocomplete="off">
            <label class="control-label" for="Category">Supplier</label>

            <select name="select" width="100%" id="vendor_id" class="searchable_select">
                <option value="">All</option>
                @foreach($vendors as $vendor)
                    <option value="{{$vendor->id}}">{{$vendor->name}}</option>
                @endforeach
            </select>
            <button class="btn" style="margin: 10px" id="filter_payment_voucher_pending_orders">FILTER</button>
            {{--            <input class="btn" id="print_pending_payment" type="submit" value="PRINT">--}}
            <a class="btn  btn-small"
               id="print_pending_payment" style="margin-left: 2px;">
                <span class="icon-print"></span> Print
            </a>
        </form>


    </div>
    <div class="row-fluid">


        <div class="span12">
            <table class="table table-bordered table-condensed" id="pendig_payment_table">
                <thead>
                <tr>
                    <th style="width: 3%"></th>
                    <th style="width: 4%">ID</th>
                    <th style="width: 10%">Date</th>
                    <th style="width: 25%">Supplier</th>
                    {{--<th style="width: 15%">For</th>--}}
                    <th style="width: 18%">LPOs #:</th>
                    <th style="width: 22%">Remarks</th>
                    <th style="width: 10%">Amount</th>
                    <th style="width: 8%"></th>
                </tr>
                </thead>
            </table>
        </div><!--span12-->
    </div><!--span6-->
    <!--tabbable-->
    <script>

        jQuery('.searchable').select2();

        let oTable = jQuery('#pendig_payment_table').on('error.dt', function (e, settings, techNote, message) {
            console.log('An error has been reported by DataTables: ', message);
            $.jGrowl("ERROR LOADING DATA!", {header: 'Important'});
            stopSpinner();
        })
            .DataTable({
                "oLanguage": {
                    "sLoadingRecords": startSpinner(),
                    "sZeroRecords": "No store records to display.",
                    "sProcessing": "Please wait - loading records...",
                    "sInfoEmpty": "No entries to display."
                },
                "initComplete": function (settings, json) {
                    stopSpinner();
                },
                ajax: {
                    url: '{{ route("financial_management.payment_requests.datatable") }}',
                    data: function (d) {
                        d.entry_id = $('#entry_id').val();
                        d.entry_date = $('#entry_date').val();
                        d.vendor_id = $('#vendor_id').val();
                    }
                },
                scrollCollapse: true,
                "sPaginationType": "full_numbers",
                processing: true,
                serverSide: true,
                "order": [[0, 'asc']],
                "aoColumnDefs": [{
                    "aTargets": [6],
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        jQuery(nTd).css('text-align', 'right');

                    }
                }],
                "columns": [
                    {"class": "link", data: 'checkbox'},
                    {"class": "link", data: 'journal_number'},
                    {"class": "link", data: 'created_at'},
                    {"class": "link", data: 'supplier'},
                    // {"class": "link", data: 'for'},
                    {"class": "link", data: 'purchase_orders'},
                    {"class": "link", data: 'remarks'},
                    {"class": "link", data: 'amount'},
                    {"class": "link", data: 'action'}
                ],
                "bStateSave": true,
                "fnDrawCallback": function () {
                    // $('.requisition_approval_id').on('click', function () {
                    //
                    //     let amount = 0;
                    //     jQuery('.requisition_approval_id').each(function () {
                    //         if ($(this).is(':checked')) {
                    //             let tr = jQuery(this).parents('tr');
                    //             amount += parseFloat(tr.find('.grand_total').val());
                    //         }
                    //     });
                    //     console.log(amount);
                    // });
                },
            });

        jQuery('#print_pending_payment').on('click', function (e) {
            e.preventDefault();
            let url = '{{ route('accounts.pending_payments.print',[':vendor_id']) }}';
            url = url.replace(':vendor_id', $('#vendor_id').val());
            window.open(url, '_blank');
        });
        jQuery('#bulk_payment').on('click', function () {
            let checked = jQuery('.payment_request_id:checked').length > 0;
            if (!checked) {
                let sound = document.getElementById("audio");
                sound.play();
                jQuery.jGrowl('{!! HTML::image('img/truck.png') !!} Please check at least one payment to continue', {
                    theme: 'contrastBorder',
                    sticky: true
                });
                return false;
            }
            let payment_request_id = [];
            jQuery('.payment_request_id').each(function () {
                if (jQuery(this).is(':checked')) {
                    payment_request_id.push(jQuery(this).val());
                }
            });
            jQuery.ajax({
                url: "{{route('financial_management.payment_requests.create')}}",
                type: 'GET',
                data: {
                    payment_request_id: payment_request_id,
                    bulk_payment: true
                },
                success: function (data) {
                    if (data.state == 'Fail') {
                        jQuery.jGrowl(data.msg);
                    } else {
                        let modal = jQuery('#logistics_modal');
                        modal.empty().append(data);
                        modelShow('logistics_modal');
                        onModalShown();

                        let form = modal.find('form');
                        form.on('submit', function (e) {
                            e.preventDefault();
                            jQuery.ajax({
                                url: form.attr('action'),
                                type: 'POST',
                                data: form.serialize(),
                                beforeSend: function () {
                                    startSpinner();
                                    disableSubmitBtn();
                                },
                                success: function (data) {
                                    modalHide('logistics_modal');
                                    // jQuery.jGrowl('INVOICE GENERATED, CLICK HERE TO PRINT INVOICE <a class="btn btn-mini" href="' + data + '" target="_blank">PRINT</a>', {
                                    //     theme: 'contrastBorder',
                                    //     sticky: true
                                    // });
                                    oTable.draw();
                                    // stopSpinner();
                                },
                                error: function (xhr, textStatus, error) {
                                    onAjaxError(xhr, textStatus, error);
                                },
                                complete: function () {
                                    stopSpinner();
                                    enableSubmitBtn();
                                }
                            });
                        });
                    }

                },
                error: function (xhr, textStatus, error) {
                    onAjaxError(xhr, textStatus, error);
                },
                complete: function () {
                    stopSpinner();
                }
            });
        });
        $('#filter_payment_voucher_pending_orders').on('click', function (e) {
            e.preventDefault();
            oTable.draw();
        });

    </script>
@endsection