@extends('layouts/layoutMaster')

@section('title', 'Payments - Finances')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-bs5/datatables.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/select2/select2.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.css') }}">
@endsection

@section('page-style')
    <!-- Page -->
    <style>
        .circle-img {
            border-radius: 50%;
            overflow: hidden;
            width: 150px;
            height: 150px;
            background-color: white;
            /* Adjust width and height as needed */
        }

        .circle-img img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
            /* Ensures image fills the container */
        }

        .ctab {
            padding: 10px 25px;
            color: gray;
            border-bottom: 1px gray solid;
            font-weight: normal;
            cursor: pointer;

            a {
                color: gray;
            }
        }

        .ctaba {
            padding: 10px 25px;
            color: white;
            border-bottom: 1px white solid;
            font-weight: bold;
            cursor: pointer;

            a {
                color: white;
            }
        }
    </style>
@endsection

@section('vendor-script')
    <script src="{{ asset('assets/vendor/libs/moment/moment.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/select2/select2.js') }}"></script>
    <script src="{{ asset('assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js') }}"></script>
@endsection

@section('content')
    <div class="row">
        <img class="object-fit-cover" src="{{ asset('assets/images/bnnr-5.jpg') }}"
            style="height: 230px; position: absolute; top: 0; left: 0; padding: 0; margin: 0; z-index: -1">

        {{-- secondary --}}
        <div class="col-lg-3" style="margin-top: 50px;">
            @if (isset(session()->get('active_company')['logo']))
                <div class="row justify-content-center mt-3">
                    <div class="col-md-auto">
                        <div class="circle-img">
                            <img class="p-3"
                                src="{{ url('https://upload.wikimedia.org/wikipedia/ms/thumb/5/5d/LOGO-SNP.png/1024px-LOGO-SNP.png') }}"
                                alt="Image">
                        </div>
                    </div>
                </div>
            @else
                <div class="row" style="margin-bottom: 62px;">
                </div>
            @endif
            <div class="row mb-1">
                <div class="col-lg-12">
                    <div class="card mb-3 py-3 px-2 bg-white"
                        style="border-left-width: 8px; border-left-color:{{ config('custom.custom.primaryColor') }}; border-left-style: solid;">
                        <div class="mx-2">
                            <div class="text-wrap fw-bold">
                                <a href="#" class="text-black">{{ session()->get('active_company')['name'] }}</a>
                            </div>
                            <div class="text-wrap text-muted">{{ session()->get('active_company')['roc_no'] }}
                            </div>
                            <div class="text-wrap">{{ session()->get('active_company')['group_company'] }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row overvide-cn d-none">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Overview</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3 overvide-cn d-none">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header d-flex justify-content-between">
                            <div class="d-flex flex-column">
                                <small class="d-block mb-1 text-muted">Total Unpaid</small>
                                <p class="card-text text-danger fw-bold" id="summ-unpaid">--</p>
                            </div>
                            <div class="d-flex flex-column text-end">
                                <small class="d-block mb-1 text-muted">Total Paid</small>
                                <p class="card-text text-success fw-bold" id="summ-paid">--</p>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-4">
                                    <div class="d-flex gap-2 align-items-center mb-2">
                                        <span class="badge bg-label-warning p-1 rounded"><i
                                                class="ti ti-alarm ti-xs"></i></span>
                                        <p class="mb-0">Overdue</p>
                                    </div>
                                    <h5 class="mb-0 pt-1 text-nowrap" id="summ-overdue-p">--</h5>
                                    <small class="text-muted" id="summ-overdue">--</small>
                                </div>
                                <div class="col-4">
                                    <div class="divider divider-vertical">
                                        <div class="divider-text">
                                            <span class="badge-divider-bg bg-label-secondary">Unpaid</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-4 text-end">
                                    <div class="d-flex gap-2 justify-content-end align-items-center mb-2">
                                        <p class="mb-0">Not due</p>
                                        <span class="badge bg-label-secondary p-1 rounded"><i
                                                class="ti ti-clock ti-xs"></i></span>
                                    </div>
                                    <h5 class="mb-0 pt-1 text-nowrap ms-lg-n3 ms-xl-0" id="summ-notdue-p">--</h5>
                                    <small class="text-muted" id="summ-notdue">--</small>
                                </div>
                            </div>
                            <div class="d-flex align-items-center mt-4">
                                <div class="progress w-100" style="height: 8px;" id="summ-progress">
                                </div>
                            </div>
                            <div class="text-muted fst-italic small mt-3" id="summ-remark"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- primary --}}
        <div class="col-lg-9" style="margin-top: 30px;">
            <div class="row mb-4">
                <div class="col d-flex justify-content-between">
                    <div class="d-flex flex-row">
                        <div class="{{ Str::contains(url()->current(), 'finances/invoices') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('finances/invoices') }}">Invoices</a>
                        </div>
                        <div class="{{ Str::contains(url()->current(), 'finances/credit-notes') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('finances/credit-notes') }}">Credit Notes</a>
                        </div>
                        <div class="{{ Str::contains(url()->current(), 'finances/payments') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('finances/payments') }}">Payments</a>
                        </div>
                        <div
                            class="{{ Str::contains(url()->current(), 'finances/account-statement') ? 'ctaba' : 'ctab' }}">
                            <a href="{{ url('finances/account-statement') }}">Statement of Account</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-3 mt-4" id="filter-container">
                <div class="col-md-2 d-none" id="filter-selects-container">
                    <select id="status-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2">
                    <select id="date-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2" id="custom-date-container" style="display: none;">
                    <input type="text" class="form-control" placeholder="Select dates..." id="custom-date-inp" />
                </div>
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 mb-4">
                    <div class="card">
                        <div class="card-datatable table-responsive">
                            <table id="p-invoice-list-table" class="table border-top">
                                <thead>
                                    <tr>
                                        {{-- <th class="cell-fit">
                                            <input type="checkbox" id="checkAll" onchange="checkAllCbListener(this)">
                                        </th> --}}
                                        <th class="cell-fit" style="white-space: nowrap;">No.</th>
                                        <th class="cell-fit text-truncate">Date</th>
                                        <th>Entity</th>
                                        <th class="cell-fit text-end">Amount</th>
                                        <th class="cell-fit">Status</th>
                                        <th class="cell-fit">Actions</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th colspan="4" class="text-end pe-3 fw-bold" style="font-size: 0.9rem"></th>
                                        <th colspan="2" class="text-start fw-bold" style="font-size: 0.9rem"></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-script')
    <script>
        var dt_cinvoice, defFilterDate = null,
            defFilterStatus = null,
            defFilterPayment = null,
            customStartDate = null,
            customEndDate = null,
            totalSelected = 0;

        function dl(id) {
            window.location.href = `${baseUrl}finances/payments/${id}/download`;
        }

        function toggleCheckAll() {
            let isChecked = $("#checkAll").prop("checked");
            if (isChecked) $("#checkAll").prop("checked", false).trigger("change");
        }

        function enabledBatch(selectedCount) {
            // $('#batch-act-sel').prop('disabled', selectedCount == 0);
            // $('#batch-sel-count').html(totalSelected > 0 ? `${totalSelected} selected` : '');
        }

        function checkAllCbListener(obj) {
            if (obj.checked) {
                $(".checkbox").not(':disabled').prop('checked', true).change();
                totalSelected = $(".checkbox").siblings().length;
            } else {
                $(".checkbox").prop('checked', false).change();
                totalSelected = 0;
            }
            enabledBatch(totalSelected);
            // $('#batch-sel-count').html(totalSelected > 0 ? `${totalSelected} selected` : '');
        }

        function rowCbListener(obj) {
            let inv = JSON.parse(atob($(obj).siblings(".hidden-input").data('inv')));
            if (obj.checked) {
                totalSelected++;
            } else {
                $(this).prop('checked', false);
                totalSelected--;
            }
            enabledBatch(totalSelected);
            // $('#staff-selected-count').html(`${totalSelected} staff selected`);
        }

        async function loadTable() {
            dt_cinvoice.ajax.reload();
        }

        async function populateFilters() {
            axios.post('{{ env('APP_URL') }}' + '/finances/payments/filters')
                .then((res) => {
                    console.log(JSON.stringify(res.data.data.filter_status));
                    console.log(JSON.stringify(res.data.data.filter_date));
                    console.log(JSON.stringify(res.data.data.default));
                    console.log(JSON.stringify(res.data.data.all_years));
                    console.log(JSON.stringify(res.data.data.summary));
                    defFilterDate = res.data.data.default.filter_date;
                    defFilterStatus = res.data.data.default.filter_status;
                    let allYears = res.data.data.all_years;
                    if (res.data.data.summary) {
                        $("#overvide-cn").removeClass("d-none");
                        let currencies = res.data.data.summary.currencies.split(',');
                        if (currencies.length == 1) {
                            let formatter = new Intl.NumberFormat('en-MY', {
                                style: 'currency',
                                currency: currencies[0]
                            });
                            $("#summ-unpaid").html(formatter.format(res.data.data.summary.total_unpaid));
                            $("#summ-paid").html(formatter.format(res.data.data.summary.total_paid));
                            $("#summ-overdue").html(formatter.format(res.data.data.summary.total_overdue));
                            $("#summ-notdue").html(formatter.format(res.data.data.summary.total_notdue));
                            let percentOverdue = (parseFloat(res.data.data.summary.total_overdue) > 0 ? (parseFloat(
                                res.data.data.summary.total_overdue) / (parseFloat(res
                                .data.data.summary.total_overdue) + parseFloat(res.data.data.summary
                                .total_notdue)) * 100) : 0).toFixed(1);
                            let percentNotdue = (parseFloat(res.data.data.summary.total_notdue) > 0 ? (100 -
                                percentOverdue) : 0).toFixed(1);
                            $("#summ-overdue-p").html(`${percentOverdue}%`);
                            $("#summ-notdue-p").html(`${percentNotdue}%`);
                            $("#summ-progress").empty();
                            $("#summ-progress").append(`
                                <div class="progress-bar bg-warning" style="width: ${Math.round(percentOverdue)}%" role="progressbar"
                                  aria-valuenow="${Math.round(percentOverdue)}" aria-valuemin="0" aria-valuemax="100"></div>
                                <div class="progress-bar bg-secondary" role="progressbar" style="width: ${Math.round(percentNotdue)}%"
                                  aria-valuenow="${Math.round(percentNotdue)}" aria-valuemin="0" aria-valuemax="100"></div>
                            `);
                            $("#summ-remark").html(res.data.data.summary_remark);
                        } else {
                            // handle multiple currecies shit
                        }
                    }
                    if (res.data.data.filter_status.length > 0) {
                        console.log('withstatus');
                        $("#filter-selects-container").removeClass("d-none");
                        $('#status-sel').select2({
                            data: res.data.data.filter_status,
                            templateResult: function(option) {
                                if (option.parent) {
                                    return $(
                                        '<span style="padding-left: 10px;"><span class="text-muted me-2">-</span>' +
                                        option.text + '</span>');
                                } else {
                                    return $('<span>' + option.text + '</span>');
                                }
                            }
                        }).on('select2:open', function() {
                            $('.select2-search__field').remove();
                        });
                        $("#status-sel").val(defFilterStatus).trigger("change");
                    }

                    $('#date-sel').select2({
                        data: res.data.data.filter_date,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });;

                    $("#date-sel").val(defFilterDate).trigger("change");
                    $('#custom-date-inp').daterangepicker({
                        opens: 'left',
                        showDropdowns: true,
                        minYear: allYears[allYears.length - 1],
                        maxYear: allYears[0],
                        locale: {
                            format: "DD.MM.YYYY",
                            separator: " - ",
                        },
                        startDate: res.data.data.filter_date_custom_start,
                        endDate: res.data.data.filter_date_custom_start,
                    }, function(start, end, label) {
                        customStartDate = start.format('YYYY-MM-DD');
                        customEndDate = end.format('YYYY-MM-DD');
                        loadTable();
                    });
                })
                .catch((err) => {
                    console.log(err);
                });

        }

        $(function() {
            populateFilters();

            // Invoice datatable
            $('#p-invoice-list-table').DataTable().destroy();
            dt_cinvoice = $('#p-invoice-list-table').DataTable({
                processing: true,
                searching: true,
                order: [
                    [1, 'desc']
                ],
                ajax: {
                    url: '{{ env('APP_URL') }}' + '/finances/payments/all',
                    type: 'POST',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function(d) {
                        d.filter_status = defFilterStatus;
                        d.filter_date = defFilterDate;
                        d.custom_start_date = customStartDate;
                        d.custom_end_date = customEndDate;
                    }
                },
                columns: [{
                        data: 'qb_payment_ref_number'
                    },
                    {
                        data: 'payment_date'
                    },
                    {
                        data: 'p_display_name'
                    },
                    {
                        data: 'total_amount'
                    },
                    {
                        data: 'unapplied_amount'
                    },
                    {
                        data: 'id'
                    },
                ],
                columnDefs: [
                    // {
                    //     targets: 0,
                    //     searchable: false,
                    //     orderable: false,
                    //     className: 'dt-left',
                    //     render: function(data, type, full, meta) {
                    //         if (type == 'display') {
                    //             return `
                //                 <input type="hidden" id="invoice-row-${full['uuid']}" class="hidden-input" data-inv="${btoa(JSON.stringify(full))}" data-invuuid="${full['uuid']}">
                //                 <input type="checkbox" onchange="rowCbListener(this)" class="checkbox">
                //                 `;
                    //         }
                    //         return data;
                    //     }
                    // },
                    {
                        targets: 0,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<a href="${baseUrl}finances/payments/${full['uuid']}">${data ? data : '--'}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 1,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<span>${moment(data).format('DD.MM.YYYY')}</span>`;
                            }
                            return data;
                        }
                    },
                    {
                        // also include group
                        targets: 2,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<a href="${baseUrl}entities/${full['p_uuid']}">${full['p_display_name']}</a>`;
                            }
                            return full['p_display_name'];
                        }
                    },
                    {
                        targets: 3,
                        className: 'dt-right',
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                let formatter = new Intl.NumberFormat('en-MY', {
                                    style: 'currency',
                                    currency: full['currency']
                                });
                                let ttlA = formatter.format(full['total_amount']);
                                return `<span>${ttlA}</span>`;
                            }
                            return full['total_amount'];
                        }
                    },
                    {
                        targets: 4,
                        className: 'dt-nowrap',
                        render: function(data, type, full, meta) {
                            // main status(paid,open,voided), due status, partial status, reminder status
                            let statusStr = '';
                            let classStr = '';
                            let dueStr = '';
                            let dueClassStr = 'secondary';
                            let balanceStr = '';
                            if (full['total_amount'] != 0 && (!full['unapplied_amount'] || full[
                                    'unapplied_amount'] == 0)) {
                                statusStr = 'Closed';
                                classStr = 'success';
                            } else if (full['total_amount'] != 0 && full['unapplied_amount'] !=
                                0) {
                                statusStr = 'Open';
                                classStr = 'info';
                                // check balance
                                if (parseFloat(full['unapplied_amount']) == parseFloat(full[
                                        'total_amount'])) {
                                    let formatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: full['currency']
                                    });
                                    let ttlB = formatter.format(full['total_amount']);
                                    balanceStr = `Unapplied`;
                                } else {
                                    let formatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: full['currency']
                                    });
                                    let ttlB = formatter.format(full['unapplied_amount']);
                                    balanceStr = `Partially applied, ${ttlB} remaining`;
                                }
                            } else if (full['total_amount'] == 0) {
                                statusStr = 'Voided';
                                classStr = 'secondary';
                            }

                            return `
                                <div><span class="me-2 badge bg-label-${classStr}">${statusStr}</span>` +
                                (dueStr == '' ? '' :
                                    `<span class="me-2 badge bg-label-${dueClassStr}">${dueStr}</span>`
                                ) +
                                `</div>` +
                                (balanceStr == '' ? '' :
                                    `<div class="mt-1 small text-muted">${balanceStr}</div>`);
                        }
                    },
                    {
                        targets: 5,
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return (
                                '<div class="d-flex align-items-center">' +
                                `<a href="${baseUrl}finances/payments/${full['uuid']}" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="View Invoice"><i class="ti ti-eye mx-2 ti-sm"></i></a>` +
                                '<div class="dropdown">' +
                                '<a href="javascript:;" class="btn dropdown-toggle hide-arrow text-body p-0" data-bs-toggle="dropdown"><i class="ti ti-dots-vertical ti-sm"></i></a>' +
                                '<div class="dropdown-menu dropdown-menu-end">' +
                                `<button type="button" onclick="dl('${full['uuid']}')" class="dropdown-item inv-dl-btn" data-uuid="${full['uuid']}">Download</button>` +
                                // '<a href="' + baseUrl +
                                // 'app/invoice/edit" class="dropdown-item">Print</a>' +
                                '</div>' +
                                '</div>'
                            );
                        }
                    },
                ],
                footerCallback: function(row, data, start, end, display) {
                    let api = this.api();

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

                    // Total over all pages
                    total = api
                        .column(3)
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Total over this page
                    pageTotal = api
                        .column(3, {
                            page: 'current'
                        })
                        .data()
                        .reduce((a, b) => intVal(a) + intVal(b), 0);

                    // Update
                    let formatter = new Intl.NumberFormat('en-MY', {
                        style: 'currency',
                        currency: 'MYR'
                    });
                    api.column(3).footer().innerHTML = formatter.format(pageTotal);
                    api.column(4).footer().innerHTML = '(' + formatter.format(total) + ' total)';
                }
                // deferRender: true,
            });

            $("#status-sel").on("change", function() {
                defFilterStatus = $("#status-sel").val();
                if ([1, 2, 3, 4].includes(parseInt(defFilterStatus))) {
                    console.log('yep');
                    $("#payment-status-container").show();
                } else {
                    console.log('nope');
                    defFilterPayment = 1;
                    $("#payment-sel").val(defFilterPayment);
                    $("#payment-status-container").hide();
                }
                loadTable();
            });
            $("#payment-sel").on("change", function() {
                defFilterPayment = $("#payment-sel").val();
                loadTable();
            });
            $("#date-sel").on("change", function() {
                defFilterDate = $("#date-sel").val();
                if (defFilterDate == 5) {
                    $("#custom-date-container").show();
                } else {
                    $("#custom-date-container").hide();
                    loadTable();
                }
            });
            // $("#batch-act-sel").on("change", function() {
            //     if ((batchOp = $("#batch-act-sel").val()) == 1) return;
            //     console.log('op: ' + batchOp);
            //     let modalTitle = '';
            //     switch (batchOp) {
            //         case '4':
            //             if (totalSelected > 10) {
            //                 showToast("You can print up to 10 invoices at one time", 'error', 1500, 0);
            //                 $("#batch-act-sel").val(1).trigger("change");
            //             } else {

            //             }
            //             break;
            //         case '5':
            //             if (totalSelected > 10) {
            //                 showToast("You can download up to 10 invoices at one time", 'error', 1500, 0);
            //                 $("#batch-act-sel").val(1).trigger("change");
            //             } else {

            //             }
            //             break;
            //     }
            // });
            // $("#bill-op-review-modal").on("hide.bs.modal", function() {
            //     $("#batch-act-sel").val(1).trigger("change");
            // });
            $(".filter-selects").on("change", function() {
                toggleCheckAll();
            });
            $("#bill-op-review-modal-submit").on("click", function() {
                let uuids = [];
                $(".review-invoices").each(function() {
                    uuids.push($(this).data('uuid'));
                });
                let postData = {
                    op_code: $("#bill-op-review-modal").data('op_code'),
                    options: JSON.stringify([
                        ($("#bill-op-review-modal-inp0").is(':checked') ? 1 : 0), ($(
                            "#bill-op-review-modal-inp1").is(':checked') ? 1 : 0)
                    ]),
                    invoices: JSON.stringify(uuids)
                };
                console.log(JSON.stringify(postData));
            });
        });
    </script>
@endsection

@include('finances.modals.op-review')