@extends('modules.head')
@section('contenido')
<!-- List banners-->
<div class="box">
    <div class="box-body">
        <!-- /.box-header -->
        <div class="form-group">
            <label for="user_id" class="col-sm-2">Customer</label>
            <div class="input-group col-sm-3">
                <input type="text" data-typeorder="5" id="user_id" class="form-control ui-autocomplete-input" name="user_id" autocomplete="off">
                <span class="input-group-btn">
                    <button class="btn btn-default clear-customer" type="button" style="border-radius: 0px !important"><span class="fa fa-remove"></span></button>
                </span>
            </div>
        </div>
        <button class="btn btn-primary pull-right hide" onclick="selectAll(this)" type="button" id="btn_select_all" style="width: 100px">Select All</button>
        <button id="send_invoice_email_btn" class="btn btn-primary pull-right hide" type="button" style="width: 100px; margin-right:5px;">Send Email</button>
        <ul class="nav nav-tabs" id="incoming_payment_tabs"></ul>
        <div id="incoming_payments_content"></div>
    </div>
</div>
<input type="hidden" value="" id="sucursal" />
<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script type="text/javascript">
    let tableTemplate = `
            <table class="table table-bordered table-hover dataTable tblIncoming" role="grid">
                <thead>
                <tr role="row">
                    <th>Company</th>
                    <th>Order code</th>
                    <th>DocNum</th>
                    <th>DocType</th>
                    <th>DueDate</th>
                    <th>OverDueDays</th>
                    <th>Order Total</th>
                    <th>Paid to date</th>
                    <th>Amount due</th>
                    <th>Actions</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
                <tfoot></tfoot>
            </table>`;

    $(function() {

        $("#user_id").autocomplete({
            source: "/client/autocomplete",
            minLength: 1,
            autoFocus: true,
            select: function(event, ui) {
                $('#client_id').attr('data-document', ui.item.document);
                $('#user_id').prop('disabled', true);

                getOpenInvoices(ui.item.document);

            }
        });

        $(".clear-customer").click(function() {
            $("#user_id").val('');
            $('#user_id').prop('disabled', false);
            $('#incoming_payments_content').html('');
            $('#incoming_payment_tabs').html('');
        });
        // send email to client logic
        $('#send_invoice_email_btn').click(function() {
            swal({
                title: 'Are you sure?',
                text: "The customer will get an email with a link to a payment portal.",
                icon: 'info',
                buttons: {
                    confirm: {
                        text: 'Yes, send it',
                        className: 'btn btn-primary'
                    },
                    cancel: {
                        visible: true,
                        className: 'btn btn-danger'
                    }
                }
            }).then(function(ok) {

                if (ok) {
                    let document = $('#client_id').attr('data-document');
                    let branch = $("#incoming_payment_tabs li.active").attr('data-branch-id')
                    let possible_branch_ids = ["1", "3", "4"];
                    if (possible_branch_ids.includes(branch) && document.startsWith('C')) {
                        $.ajax({
                            url: `/open-invoices/send-email/${document}/${branch}`,
                            type: "GET",
                            contentType: 'application/json',
                            headers: {
                                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                                'Content-Type': 'application/json'
                            },
                            success: function(r) {
                                if (r.status) {
                                    swal('Success!', r.message, 'success').then(function() {
                                        location.reload();
                                    })
                                } else {
                                    swal('Alert', r.message, 'info');
                                }
                            },
                            error: function(e) {
                                console.error(e);
                                swal("Server error", '', "error");
                            },
                        });
                    } else {
                        swal('Warning', 'Client BP Code or Branch Id are not defined.', 'info')
                    }
                }

            })
        });

    });

    function getOpenInvoices(document) {
        const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
            maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
        });
        $.ajax({
            url: `/incoming_payments/open_invoices/${document}`,
            method: "get",
            success: (data) => {
                getCreditNotes(document);
                let tabs = $('#incoming_payment_tabs');
                let content = $('#incoming_payments_content');
                let old_date = null;
                let old_bpl = null;
                let body = null;
                let footer = null;
                tabs.html('');
                content.html('');
                if (data.length === 0) {
                    swal('', 'No results found', 'info');
                }
                if (data.length) {
                    $('#btn_select_all, #send_invoice_email_btn').removeClass('hide');
                }
                $(data).each(function(index, item) {
                    let code = item.eko_order ? item.eko_order.code : '';
                    let order_date = item.DocDueDate;
                    let order_id = item.eko_order ? item.eko_order.id : '';
                    let client_id = item.eko_order && item.eko_order.client ? item.eko_order.client.id : '';
                    let amount = roundingAmount(item.DocTotal - item.PaidToDate);
                    let payment_button = `<button class="btn btn-primary" onclick="makePayment(this)" type="button" name="btn_pay_${item.BPL_IDAssignedToInvoice}" data-bpl-id="${item.BPL_IDAssignedToInvoice}" style="width: 100px">Pay</button>`;
                    let reconciliate_button = `<button class="btn btn-primary" onclick="reconciliate(this)" type="button" name="btn_reconciliate_${item.BPL_IDAssignedToInvoice}" data-bpl-id="${item.BPL_IDAssignedToInvoice}" style="width: 100px">Reconciliate</button>`;
                    let payment_checkbox = `<input type="checkbox" name="payment_${item.BPL_IDAssignedToInvoice}" data-doc-entry="${item.DocEntry}" data-trans-num="${item.TransNum}" data-doc-num="${item.DocNum}"
                                                data-client-id="${client_id}" data-amount="${amount}" data-order-id="${order_id}" data-bpl-id="${item.BPL_IDAssignedToInvoice}" data-type="order" />`;
                    let new_bpl = item.BPLName;

                    let overDueDays = getOverDays(item.DocDueDate);

                    if (new_bpl !== old_bpl) {
                        old_bpl = new_bpl;
                        let tabName = `tab-${item.BPL_IDAssignedToInvoice}`;
                        tabs.append(`<li role="presentation" class="tab-link" onclick="openTab(event, '${tabName}')" data-branch-id="${item.BPL_IDAssignedToInvoice}"><a href="#">${new_bpl}</a></li>`);
                        content.append(`<div class="tab-content" id="${tabName}" style="display: none"></div>`);
                        $(`#${tabName}`).append(tableTemplate);
                        body = $(`#${tabName}`).find('table').find('tbody').first();
                        footer = $(`#${tabName}`).find('table').find('tfoot').first();
                        footer.append(`<tr>
                                            <td colspan="7"><span class="pull-right">Total:</span></td>
                                            <td><span class="amount_${item.BPL_IDAssignedToInvoice}">$0</span></td>
                                            <td>${payment_button}</td>
                                            <td>${reconciliate_button}</td>
                                        </tr>`);
                    }

                    let date = item.DocDueDate.split('-');
                    let new_date = `${date[0]}-${date[1]}`;
                    if (new_date !== old_date) {
                        old_date = new_date;
                        body.append(`<tr><td colspan="10" class="tdCol">${formatDate(old_date)}</td></tr>`);
                    }
                    let amount_due = roundingAmount(item.DocTotal - item.PaidToDate);
                    body.append(`
                            <tr class="${item.DocEntry}">
                                <td>${item.CardCode} - ${item.CardName}</td>
                                <td>${code}</td>
                                <td>${item.DocNum}</td>
                                <td><span class="badge badge-info">Orders</span></td>
                                <td>${order_date}</td>
                                <td class="text-red">${overDueDays}</td>
                                <td>${formatter.format(item.DocTotal)}</td>
                                <td>${formatter.format(item.PaidToDate)}</td>
                                <td><input class="amount-due w-75" type="number" max="${amount_due}" min="0" value="${amount_due}" placeholder="${amount_due}"></td>
                                <td>
                                    ${code ? payment_checkbox : ''}
                                </td>
                            </tr>
                        `);
                });

                $('.tab-link').first().addClass('active');
                $('.tab-content').first().show();

                $(`input[name^='payment_']`).change(function() {
                    let element = $(this);
                    let bpl_id = element.attr('data-bpl-id');
                    let checkboxes = $(`input[name='payment_${bpl_id}']:checked`);
                    let total = 0.0;
                    checkboxes.each(function(index, el) {
                        let element = $(el);
                        total += parseFloat(element.attr('data-amount'));
                    });
                    $(`.amount_${bpl_id}`).html(formatter.format(total));
                });

            }
        })
    }

    function getCreditNotes(document) {
        const formatter = new Intl.NumberFormat('en-US', {
            style: 'currency',
            currency: 'USD',
            minimumFractionDigits: 2, // (this suffices for whole numbers, but will print 2500.10 as $2,500.1)
            maximumFractionDigits: 2, // (causes 2500.99 to be printed as $2,501)
        });

        $.ajax({
            url: `/incoming_payments/open_credit_notes/${document}`,
            method: "get",
            success: (data) => {
                // let body = $('#incoming_payments').find('tbody');
                let tabs = $('#incoming_payment_tabs');
                let content = $('#incoming_payments_content');
                let old_date = null;
                let old_bpl = null;
                let body = null;
                $(data).each(function(index, item) {
                    let credit_note_date = item.DocDueDate;
                    let amount = roundingAmount(item.DocTotal - item.PaidToDate);
                    let payment_checkbox = `<input type="checkbox" name="payment_${item.BPL_IDAssignedToInvoice}"
                            data-doc-entry="${item.DocEntry}" data-trans-num="${item.TransNum}" data-doc-num="${item.DocNum}" data-amount="${amount}"
                            data-bpl-id="${item.BPL_IDAssignedToInvoice}" data-type="credit_note" />`;
                    let new_bpl = item.BPLName;

                    if (new_bpl !== old_bpl) {
                        old_bpl = new_bpl;
                        let tabName = `tab-${item.BPL_IDAssignedToInvoice}`;
                        body = $(`#${tabName}`).find('table').find('tbody').first();
                    }

                    let date = item.DocDueDate.split('-');
                    let new_date = `${date[0]}-${date[1]}`;
                    if (new_date !== old_date) {
                        old_date = new_date;
                        body.append(`<tr><td colspan="10" class="tdCol">${formatDate(old_date)} | Credit Notes</td></tr>`);
                    }
                    let amount_due = roundingAmount(item.DocTotal - item.PaidToDate);
                    body.append(`
                            <tr class="${item.DocEntry}">
                                <td>${item.CardCode} - ${item.CardName}</td>
                                <td></td>
                                <td>${item.DocNum}</td>
                                <td><span class="badge badge-success">Credit Note</span></td>
                                <td>${credit_note_date}</td>
                                <td></td>
                                <td>${formatter.format(item.DocTotal)}</td>
                                <td>${formatter.format(item.PaidToDate)}</td>
                                <td><input class="amount-due w-75" type="number" max="${amount_due}" min="0" value="${amount_due}" placeholder="${amount_due}"></td>
                                <td>
                                    ${payment_checkbox }
                                </td>
                            </tr>
                        `);
                });

                $('.tab-link').first().addClass('active');
                $('.tab-content').first().show();

                $('.amount-due').change(function(e) {
                    let element = $(e.target);
                    let row = element.parent().parent();
                    let checkbox = row.find("input[type='checkbox']");

                    let value = parseFloat(element.val());
                    let min = parseFloat(element.attr('min'));
                    let max = parseFloat(element.attr('max'));

                    if (value < min) {
                        element.val(max)
                    }
                    if (value > max) {
                        element.val(max)
                    }

                    checkbox.attr('data-amount', element.val());
                    checkbox.trigger('change');
                });


                $(`input[name^='payment_']`).change(function() {
                    let element = $(this);
                    let bpl_id = element.attr('data-bpl-id');
                    let checkboxes = $(`input[name='payment_${bpl_id}']:checked`);
                    let total = 0.0;
                    checkboxes.each(function(index, el) {
                        let element = $(el);
                        if (element.attr('data-type') === 'credit_note') {
                            total -= parseFloat(element.attr('data-amount'));
                        } else {
                            total += parseFloat(element.attr('data-amount'));
                        }
                    });
                    $(`.amount_${bpl_id}`).html(formatter.format(total));
                });

            }
        })
    }

    function makePayment(el) {
        let element = $(el);
        let bpl_id = element.attr('data-bpl-id');
        let checkboxes = $(`input[name='payment_${bpl_id}']:checked`);

        let total = 0.0;
        let order_id = '';
        let doc_entries = '';
        let client_id = '';

        checkboxes.each(function(index, el) {
            let element = $(el);
            let amount = parseFloat(element.attr('data-amount'));
            let doc_entry = element.attr('data-doc-entry');

            if (element.attr('data-type') === 'credit_note') {
                total -= parseFloat(element.attr('data-amount'));
                order_id += `null|${amount}|${doc_entry}|credit_note,`;
            } else {
                client_id = `${element.attr('data-client-id')}`;
                total += parseFloat(element.attr('data-amount'));
                order_id += `${element.attr('data-order-id')}|${amount}|${doc_entry}|order,`;
            }
            doc_entries += `${doc_entry},`;
        });
        console.log(order_id);
        $('#doc_entry').val(doc_entries);
        $('#client_id').val(client_id);
        $('#order_id').val(order_id);
        $('#sucursal').val(bpl_id);

        total = roundingAmount(total);

        showAdditionalPaymentModal('incoming_payment', total);
    }

    function reconciliate(el) {
        swal("Do you want to post this reconciliation?", {
            buttons: {
                cancel: "No",
                Ok: true,
            },
        }).then((val) => {
            if (val) {
                let element = $(el);
                let bpl_id = element.attr('data-bpl-id');
                let checkboxes = $(`input[name='payment_${bpl_id}']:checked`);

                let total = 0.0;
                let data_documents = '';
                let client_id = '';

                checkboxes.each(function(index, el) {
                    let element = $(el);
                    let amount = parseFloat(element.attr('data-amount'));
                    let trans_num = element.attr('data-trans-num');
                    let doc_num = element.attr('data-doc-num');
                    if (element.attr('data-type') === 'credit_note') {
                        total -= parseFloat(element.attr('data-amount'));
                        data_documents += `null|${amount}|${doc_num}|${trans_num}|credit_note,`;
                    } else {
                        client_id = `${element.attr('data-client-id')}`;
                        total += parseFloat(element.attr('data-amount'));
                        data_documents += `${element.attr('data-order-id')}|${amount}|${doc_num}|${trans_num}|order,`;
                    }
                });
                total = roundingAmount(total);

                // Validations
                if (checkboxes.length < 2) {
                    swal('', 'Please select at least one order and one credit note', 'warning');
                    return false;
                }
                if (total !== 0) {
                    swal('', 'Reconciliation total must be 0', 'warning');
                    return false;
                }

                const info = {
                    client_id: client_id,
                    data_documents: data_documents,
                    branch_id: bpl_id
                }
                element.button('loading');
                $.ajax({
                    url: "/incoming_payments/reconciliate",
                    type: "POST",
                    contentType: 'application/json',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'Content-Type': 'application/json'
                    },
                    data: JSON.stringify(info),
                    success: function(response) {
                        if (response.status) {
                            swal('', 'Reconciliation posted successfully', 'success').then(function() {
                                location.reload();
                            })
                        } else {
                            swal('Error posting reconciliation', response.message, 'error');
                        }
                    },
                    error: function(e) {
                        console.error(e);
                        swal("Server error", '', "error");
                    },
                    complete: function() {
                        element.button('reset');
                    }
                });
            }
        });
    }

    function openTab(evt, name) {
        $(".tab-content").hide();
        $(".tab-link").removeClass("active");
        $("#" + name).show();
        $(evt.currentTarget).addClass("active");
    }

    function formatDate(inputDate) {
        const [year, month] = inputDate.split('-');
        const dateObj = new Date(year, parseInt(month) - 1);
        return new Intl.DateTimeFormat('en-US', {
            year: 'numeric',
            month: 'long'
        }).format(dateObj);
    }

    let allSelected = false;

    function selectAll(el) {
        const element = $(el);
        const branch_id = $('li.tab-link.active').attr('data-branch-id');
        const checkboxes = $(`input[name='payment_${branch_id}']`);
        if (!allSelected) {
            checkboxes.prop('checked', true);
            allSelected = true;
            element.html('Deselect All');
        } else {
            checkboxes.prop('checked', false);
            allSelected = false;
            element.html('Select All');
        }
        checkboxes.trigger('change');
    }

    function getOverDays(from) {
        const date = new Date(from); // 1 de enero de 2022
        const now = new Date();
        const diffMilliseconds = now - date;
        const days = Math.floor(diffMilliseconds / (1000 * 60 * 60 * 24));
        if (days > 0) {
            return days;
        } else {
            return '';
        }
    }
</script>

@endsection

@include('additional_payments/incoming_payment')

<style>
    .badge-info {
        color: #fff !important;
        background-color: #3f9ae5 !important;
    }

    .badge-success {
        color: #fff !important;
        background-color: #2d995b !important;
    }

    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .w-75 {
        width: 75px;
    }
</style>