@extends('operations.layout.mainlayout')

@section('content')
    <div class="content-wrapper">
        <div class="content-header">
            <div class="container-fluid card">
                <div class="row mb-2">
                    <div class="col-sm-6 card-body">
                        <h1 class="m-0 text-dark" style="color: var(--blazma-text)!important;">Vendors Payments List</h1>
                    </div>
                    <div class="col-sm-6">

                    </div>
                </div>
                <div class="col-12 col-sm-12 col-md-12">
                    <br/>
                    <div class="card bg-light">
                        <div class="card-header text-muted border-bottom-0">
                        </div>
                        <form method="get" action="" style="width:100%;">
                            <div class="card-body pt-0">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="row form-group">
                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Date from</b></span>
                                                <input id="date_from" class="form-control" type="date"
                                                       name="date_from"

                                                       placeholder="Date From"></div>
                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Date to</b></span>
                                                <input id="date_to" class="form-control" type="date"
                                                       name="date_to"

                                                       placeholder="Date To">
                                            </div>
                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Payment Status</b></span>
                                                <select id="payment_status" name="payment_status"
                                                        multiple>
                                                    @foreach($paymentStatus as $status)
                                                        <option value="{{ $status->ID }}">{{ $status->NAME_EN }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Vendors</b></span>
                                                <select name="vendor_select" multiple id="vendor_select">
                                                    @foreach($vendors as $vendor)
                                                        <option value="{{ $vendor->ID }}">{{ $vendor->NAME }}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>

                                        <div class="row form-group">
                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Order Status</b></span>
                                                <select name="status_select" multiple id="status_select">
                                                    @foreach($statuses as $status)
                                                        <option value="{{ $status->ID }}">{{ $status->NAME }}</option>
                                                    @endforeach
                                                </select>
                                            </div>

                                            <div class="col-md-3">
                                                <span class="text-muted text-sm"><b>Reference #</b></span>
                                                <input type="text" class="form-control" placeholder="Reference #"
                                                       name="reference_number" id="reference_number">
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                            <div class="card-footer">
                                <div class="text-right">
                                    <button class="btn btn-sm btn-info" id="loading_button" type="button"
                                            disabled style="display: none">
                                                <span class="spinner-border spinner-border-sm" role="status"
                                                      aria-hidden="true"></span>
                                        Loading...
                                    </button>
                                    <button id="submit-po-payments-filter-form" type="submit"
                                            class="btn btn-sm btn-success">
                                        <i class="fas fa-search"></i> Search
                                    </button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </div>

        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <table id="warehouse-vendors-payments-datatable"
                                       class="table table-bordered table-striped">
                                    <tfoot style="background: gainsboro;">
                                    <tr>
                                        <th colspan="3">Totals</th>
                                        <th></th>
                                        <th></th>
                                        <th colspan="5"></th>
                                    </tr>
                                    </tfoot>
                                </table>
                                @permission('add_reporting_warehouse_vendors_payment')
                                <div class="row">
                                    <div class="col" style="text-align: center">
                                        <button id="add-invoice" data-toggle="modal" data-target="#vendorPaymentModal"
                                                class="btn btn-info">Add Payment
                                        </button>
                                    </div>
                                </div>
                                @endpermission
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="payments-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="lines-modal-title" style="font-size: 16px; font-weight: bold;"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body payment-body">

                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="vendorPaymentModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="lines-modal-title" style="font-size: 16px; font-weight: bold;">Add
                        Payment</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="/operations/warehouse/vendors/payment" method="POST" id="vendor-payment-form">
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-12 form-group">
                                <label for="vendor_id">Vendors</label>
                                <select name="vendor_id" class="form-control" id="vendor_id">
                                    <option value="0" selected disabled>Select Vendor</option>
                                    @foreach($vendors as $vendor)
                                        <option value="{{ $vendor->ID }}">{{ $vendor->NAME }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="amount">Amount</label>
                                <input type="number" required name="amount" max="0" placeholder="Amount"
                                       class="form-control" id="amount">
                                <small class="text-muted" id="max_amount"></small>
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="po_reference">Reference #</label>
                                <input type="text" class="form-control" placeholder="Reference #" id="po_reference" name="po_reference">
                            </div>
                            <div class="col-md-12 form-group">
                                <label for="payment_method">Payment Method</label>
                                <select name="payment_method" class="form-control" required id="payment_method">
                                    <option value="Credit Card" selected>Credit Card</option>
                                    <option value="Cash">Cash</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>


                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        <button id="remaining_submit_btn" type="submit" class="btn btn-info btn-sm">Submit</button>
                        <button id="remaining_loading_btn" style="display: none" class="btn btn-info btn-sm" type="button" disabled>
                            <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                            Loading...
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection
<link rel="stylesheet" href="/warehouse_components/css/alert.css">

@section('warehouse_scripts')

    <script src="/warehouse_components/js/alert.js"></script>
    <script>

        $('#payment_status').select2({
            placeholder: 'Select Status'
        });
        $('#vendor_select').select2({
            placeholder: 'Select Vendor'
        });
        $('#status_select').select2({
            placeholder: 'Select Status'
        });
        $('#vendor_id').select2({
            placeholder: 'Select Vendor'
        });

        $("#warehouse-vendors-payments-datatable").DataTable({
            dom: 'lBfrtip',
            "buttons": [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            "responsive": true,
            "autoWidth": false,
            "info": true,
            destroy: true,
            "pageLength": 10,
            lengthChange: true,
            lengthMenu: [
                [10, 25, 50, 100, -1],
                [10, 25, 50, 100, "All"],
            ],
            "order": [[0, "desc"]],
            ajax: {
                url: '/operations/warehouse/vendors/payments-table',
                "data": function (d) {
                    d.date_from = $('#date_from').val();
                    d.date_to = $('#date_to').val();
                    d.vendors = $('#vendor_select').val();
                    d.payment_status = $('#payment_status').val();
                    d.order_status = $('#status_select').val();
                    d.reference_number = $('#reference_number').val();
                }
            },
            columns: [
                {data: 'ID', title: 'ID'},
                {data: 'VENDOR.NAME', title: 'Vendor Name'},
                {data: 'REFERENCE_NUMBER', title: 'Reference Number'},
                {data: 'TOTAL_AMOUNT', title: 'Total Amount'},
                {data: 'TOTAL_PAID', title: 'Total Paid'},
                {data: 'PAYMENTS_COUNT', title: 'Number of Payments'},
                {data: 'STATUSDETAILS.NAME', title: 'Order Status'},
                {data: 'PAYMENTSTATUS.NAME_EN', title: 'Payment Status'},
                {data: 'created_at', title: 'Order Date'},
                {
                    title: 'Payments Details', "mRender": function (data, type, row) {
                        return '<button style="border-radius: 50%; padding: 7px;" class="btn btn-outline-success btn-sm payment_details" id="' + row.ID + '"><i class="fa fa-list"></i></button>';
                    }
                },
            ],
            "footerCallback": function (row, data, start, end, display) {

                var api = this.api();
                // Remove the formatting to get integer data for summation
                var intVal = function (i) {
                    return typeof i === 'string' ? i.replace(/[\$,]/g, '') * 1 : typeof i === 'number' ? i : 0;
                };

                totalAmount = api
                    .column(3)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                totalPaid = api
                    .column(4)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);

                numberOfPayments = api
                    .column(5)
                    .data()
                    .reduce(function (a, b) {
                        return intVal(a) + intVal(b);
                    }, 0);
                $(api.column(3).footer()).html(totalAmount);
                $(api.column(4).footer()).html(totalPaid);
                $(api.column(5).footer()).html(numberOfPayments);
            }
        });

        $('#submit-po-payments-filter-form').on('click', function (e) {
            e.preventDefault();
            $("#warehouse-vendors-payments-datatable").DataTable().ajax.reload();
        })

        $(document).on('click', '.payment_details', function (e) {
            e.preventDefault();
            let id = $(this).attr('id');
            $.ajax({
                url: '/operations/warehouse/vendors/payments-data',
                data: {
                    id: id
                },
                success: function (data) {
                    $('.payment-body').html(data)
                }
            })
            $('#payments-modal').modal('show');

        })

        $('#vendor_id').on('change', function (e) {
            e.preventDefault();
            let vendorId = $(this).val();
            $.ajax({
                url: "/operations/warehouse/vendors/remaining-payment/" + vendorId,
                success: function (response) {
                    let amount = $('#amount');
                    amount.attr('max', response).val(response)
                    let textStyle = 'Remaining amount : <b style="color: red">'+response+'</b>';
                    $('#max_amount').text('');
                    $('#max_amount').append(textStyle)
                    //$('#max_amount').text('Maximum amount : ' + response)
                }
            })
        })
        $('#vendor-payment-form').submit(function (e) {
            e.preventDefault();

            $('#remaining_submit_btn').css('display', 'none')
            $('#remaining_loading_btn').css('display', 'block')

            var action_url = e.currentTarget.action;
            let vendor_id = $('#vendor_id').val();
            let amount = parseInt($('#amount').val());
            let payment_method = $('#payment_method').val();
            let refNumber = $('#po_reference').val();

            if (vendor_id === null) {
                alert('Please insert amount before submit')
                return;
            }

            if (amount > parseInt($('#amount').attr('max'))) {
                alert('Incorrect value')
                return;
            }

            let data = {
                amount: amount,
                vendor_id: vendor_id,
                payment_method: payment_method,
                reference_no: refNumber,
            }

            $.ajax({
                url: action_url,
                type: 'post',
                dataType: "json",
                data: data,
                context: this,
                success: function (data) {
                    $('#max_amount').text('');
                    $("#warehouse-vendors-payments-datatable").DataTable().ajax.reload();
                    $('#vendor-payment-form')[0].reset()
                    $('#vendor_id').select2("val", 0);
                    $('#vendorPaymentModal').modal('hide');
                    $('#remaining_submit_btn').css('display', 'block')
                    $('#remaining_loading_btn').css('display', 'none')
                    triggerAlert('Payments have been paid successfully','success');
                },
                error: function (response) {
                    alert(response.responseJSON.errorMessage)
                }
            });
        })
    </script>
@endsection