@extends('layouts/layoutMaster')

@section('title', 'Invoices - 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') }}">
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/3.0.2/css/buttons.dataTables.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.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;
            }
        }

        .dataTables_length {
            float: left;
            margin-right: 10px;
        }

        .dataTables_filter {
            float: right;
            margin-left: 10px;
        }

        .dataTables_info {
            float: left;
            margin-right: 10px;
        }

        .dataTables_paginate {
            float: right;
            margin-left: 10px;
        }
    </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: 90px;">
            <div class="row mb-1 mt-4">
                <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">{{ strtoupper($provider->display_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">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Overview</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <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">
                    @include('finances.partials.submenu')
                    <div class="align-self-end d-flex flex-row my-auto">
                        <div class="text-muted small my-auto me-2" id="batch-sel-count"></div>
                        <div style="width: 200px">
                            <select id="batch-act-sel" class="form-select">
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row g-3 mb-3 mt-4" id="filter-container">
                <div class="col-md-2">
                    <select id="status-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2" id="payment-status-container">
                    <select id="payment-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">
                    <input type="text" class="form-control" placeholder="Select dates..." id="custom-date-inp" />
                </div>
                {{-- <div class="col-md-2">
                    <select id="submission-sel" class="form-select filter-selects">
                    </select>
                </div>
                <div class="col-md-2" id="view-status-container">
                    <select id="view-sel" class="form-select filter-selects">
                    </select>
                </div> --}}
            </div>
            <div class="row">
                <div class="col-lg-12 col-sm-12 mb-4">
                    <div class="card p-2">
                        <div class="card-datatable table-responsive">
                            <table id="c-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">Invoice No.</th>
                                        <th class="cell-fit text-truncate">Invoice Date</th>
                                        <th>Client</th>
                                        <th class="cell-fit text-end">Amount</th>
                                        <th class="cell-fit">Status</th>
                                        {{-- <th class="cell-fit">Activity</th> --}}
                                        <th class="cell-fit">Actions</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th colspan="5" 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>
    <div class="modal" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false"
        aria-labelledby="loadingModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="d-flex justify-content-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div class="ms-3 my-auto">Preparing your data...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

@section('page-script')
    <!-- <script src="{{ asset('assets/js/app-invoice-list.js') }}"></script> -->
    <script>
        var dt_cinvoice, defFilterDate = null,
            defFilterStatus = null,
            defFilterPayment = null,
            defFilterSubmission = null,
            defFilterView = null,
            customStartDate = null,
            customEndDate = null,
            totalSelected = 0;
        // var default = {
        //     filter_status: null, filter_date: null
        // };

        function dl(id) {
            window.location.href = `${baseUrl}finances/invoices/${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() {
            console.log('triggered');
            dt_cinvoice.ajax.reload();
        }

        async function populateFilters() {
            console.log('pf');
            axios.post('{{ env('APP_URL') }}' + '/finances/invoices/filters')
                .then((res) => {
                    defFilterDate = res.data.data.default.filter_date;
                    defFilterStatus = res.data.data.default.filter_status;
                    defFilterPayment = res.data.data.default.filter_payment;
                    defFilterSubmission = res.data.data.default.filter_submission;
                    defFilterView = res.data.data.default.filter_view;
                    let allYears = res.data.data.all_years;
                    if (res.data.data.summary) {
                        // let currencies = res.data.data.summary.currencies.split(',');
                        // if (currencies.length == 1) {
                        let formatter = new Intl.NumberFormat('en-MY', {
                            style: 'currency',
                            currency: '{{ $provider->qb_currency }}'
                        });
                        $("#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
                        // }
                    }
                    $('#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();
                    });
                    $('#submission-sel').select2({
                        data: res.data.data.filter_submission,
                        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();
                    });
                    $('#view-sel').select2({
                        data: res.data.data.filter_view,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });;
                    $('#date-sel').select2({
                        data: res.data.data.filter_date,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });;
                    $('#payment-sel').select2({
                        data: res.data.data.filter_payment,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });;
                    $('#batch-act-sel').select2({
                        data: res.data.data.batch_actions,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });
                    $('#batch-act-sel').prop('disabled', true);
                    $("#status-sel").val(defFilterStatus).trigger("change");
                    $("#date-sel").val(defFilterDate).trigger("change");
                    $("#payment-sel").val(defFilterPayment).trigger("change");
                    $("#submission-sel").val(defFilterSubmission).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() {
            $("#custom-date-container").hide();
            $("#ivew-status-container").hide();

            populateFilters();

            // Invoice datatable
            $('#c-invoice-list-table').DataTable().destroy();
            dt_cinvoice = $('#c-invoice-list-table').DataTable({
                // dom: 'Blfrtip',
                sDom: 'B<"clear">lfrtip',
                buttons: [{
                    extend: 'print',
                    className: 'btn btn-primary',
                    title: 'Invoices',
                    messageTop: '{{ strtoupper($provider->display_name) }}',
                    // messageBottom: 'Boonana',
                    text: '<i class="fa fa-print"></i>',
                    titleAttr: 'Print',
                    exportOptions: {
                        header: function() {
                            return ['Custom Header 1', 'Custom Header 2', 'Custom Header 3'];
                        },
                        columns: [1, 2, 3, 4, 5],
                        format: {
                            body: function(data, row, column, node) {
                                // return column === 5 ? data.replace(/[$,]/g, '') : data;
                                // return column == 5 ? '--' : '--';
                                // if (column == 4) {
                                //     return data.replace('Open', 'Open,');
                                // } else {
                                //     return data;
                                // }
                                return data;
                            }
                        },
                    },
                    customize: function(win) {
                        $(win.document.body)
                            .css('font-size', '9pt')
                        // .prepend(
                        //     '<img src="http://datatables.net/media/images/logo-fade.png" style="position:absolute; top:0; left:0;" />'
                        // )
                        ;

                        $(win.document.body)
                            .find('table')
                            .addClass('compact')
                            .css('font-size', 'inherit');
                    }
                }],
                processing: true,
                searching: true,
                order: [
                    [2, 'desc']
                ],
                ajax: {
                    url: '{{ env('APP_URL') }}' + '/finances/invoices/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.filter_payment = defFilterPayment;
                        d.filter_submission = defFilterSubmission;
                        d.filter_view = defFilterView;
                        d.custom_start_date = customStartDate;
                        d.custom_end_date = customEndDate;
                    }
                },
                columns: [{
                        data: 'invoice_due_date'
                    },
                    {
                        data: 'invoice_number'
                    },
                    {
                        data: 'invoice_date'
                    },
                    {
                        data: 'c_display_name'
                    },
                    {
                        data: 'homecurr_total_amount'
                    },
                    {
                        data: 'homecurr_outstanding_amount'
                    },
                    // {
                    //     data: 'is_sent'
                    // },
                    {
                        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 inv-cb">
                                    `;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 1,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<a href="${baseUrl}finances/invoices/${full['uuid']}">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 2,
                        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: 3,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                let contentStr =
                                    `<div><a href="${baseUrl}clients/${full['c_id']}">${full['c_display_name']}</a></div>`;
                                if (full['c_fqn_name'].includes(full['c_display_name']) && full[
                                        'c_fqn_name'].includes(':')) {
                                    let nameArr = full['c_fqn_name'].split(':');
                                    contentStr += `<div class="small">${nameArr[0]}</div>`;
                                }
                                return contentStr;
                            }
                            let grpNameArr = null;
                            if (full['c_fqn_name'].includes(full['c_display_name']) && full[
                                    'c_fqn_name'].includes(':')) {
                                grpNameArr = full['c_fqn_name'].split(':');
                            }
                            return full['c_display_name'] + (grpNameArr ? grpNameArr[0] : '');
                        }
                    },
                    {
                        targets: 4,
                        className: 'dt-right',
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                let homeFomatter = new Intl.NumberFormat('en-MY', {
                                    style: 'currency',
                                    currency: '{{ $provider->qb_currency }}'
                                });
                                let formatter = new Intl.NumberFormat('en-MY', {
                                    style: 'currency',
                                    currency: full['currency']
                                });
                                let httlA = homeFomatter.format(full['homecurr_total_amount'])
                                let ttlA = formatter.format(full['total_amount']);
                                return `<span>${httlA}</span>` + (full['exchange_rate'] == 1 ? `` :
                                    `<br><span class="text-muted small" data-bs-toggle="tooltip" data-bs-placement="top" title="Exchange rate: ${full['exchange_rate']}">${ttlA}</span>`
                                );
                            }
                            return full['homecurr_total_amount'];
                        }
                    },
                    {
                        targets: 5,
                        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['outstanding_amount'] == 0) {
                                statusStr = 'Paid';
                                classStr = 'success';
                            } else if (full['total_amount'] != 0 && full['outstanding_amount'] !=
                                0) {
                                statusStr = 'Open';
                                classStr = 'info';
                                let duration = getDuration(full['invoice_due_date'], true);
                                // check due
                                if (duration.past) {
                                    dueStr = `Overdue ${Math.abs(duration.value)} ${duration.unit}`;
                                    dueClassStr = 'warning';
                                } else {
                                    if (Math.abs(duration.value) == 0) {
                                        dueStr = `Due today`;
                                    } else {
                                        dueStr =
                                            `Due in ${Math.abs(duration.value) + 1} ${duration.unit}`;
                                    }
                                }
                                // check balance
                                if (parseFloat(full['total_amount']) != parseFloat(full[
                                        'outstanding_amount'])) {
                                    let formatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: full['currency']
                                    });
                                    let ttlB = formatter.format(full['outstanding_amount']);
                                    balanceStr = `Partially paid, ${ttlB} due`;
                                }
                            } else if (full['total_amount'] == 0 && full['outstanding_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 badge bg-label-secondary">${balanceStr}</div>`
                                );
                            // `<div class="mt-1 small text-muted">${balanceStr}</div>`);
                        }
                    },
                    // {
                    //     targets: 6,
                    //     searchable: false,
                    //     orderable: false,
                    //     className: 'dt-left',
                    //     render: function(data, type, full, meta) {
                    //         if (type == 'display') {
                    //             let sendStatus = `--`;
                    //             let reminderStatus = '';
                    //             if (full['is_sent'] == 1) {
                    //                 sendStatus = `<span data-bs-toggle="tooltip" data-bs-placement="top" title="Invoice sent" class="badge my-auto badge-center rounded-pill bg-info">
                //                     <i class="ti ti-check ti-xs"></i></span>`;
                    //             }
                    //             if (full['is_viewed'] == 1) {
                    //                 sendStatus = `<span data-bs-toggle="tooltip" data-bs-placement="top" title="Invoice viewed" class="badge my-auto badge-center rounded-pill bg-info">
                //                     <i class="ti ti-checks ti-xs"></i></span>`;
                    //             }
                    //             if (full['reminder_count'] && parseInt(full['reminder_count']) >
                    //                 0) {
                    //                 reminderStatus = `
                //                     <span data-bs-toggle="tooltip" data-bs-placement="top" title="Reminder sent" class="d-inline-block">
                //                         <span class="tf-icons ti-sm ti ti-bell"></span>
                //                         <span class="mt-1 me-1 badge rounded-pill bg-danger text-white badge-notifications">${full['reminder_count']}</span>
                //                     </span>
                //                 `;
                    //             }
                    //             return sendStatus + reminderStatus;
                    //         }
                    //         return data;
                    //     }
                    // },
                    {
                        targets: 6,
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return (
                                '<div class="d-flex align-items-center">' +
                                `<a href="${baseUrl}finances/invoices/${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">' +
                                // '<a href="javascript:;" class="dropdown-item">Send</a>' +
                                // '<a href="javascript:;" class="dropdown-item">Send reminder</a>' +
                                // '<a href="javascript:;" class="dropdown-item">Download</a>' +
                                `<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(4)
                //         .data()
                //         .reduce((a, b) => intVal(a) + intVal(b), 0);

                //     // Total over this page
                //     pageTotal = api
                //         .column(4, {
                //             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(4).footer().innerHTML = formatter.format(pageTotal);
                //     api.column(5).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');
                    $("#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();
                }
            });
            $("#submission-sel").on("change", function() {
                defFilterSubmission = $("#submission-sel").val();
                if ([1, 2, 3, 4].includes(parseInt(defFilterSubmission))) {
                    $("#view-status-container").show();
                } else {
                    $("#view-status-container").hide();
                }
                loadTable();
            });
            $("#view-sel").on("change", function() {
                defFilterView = $("#view-sel").val();
                loadTable();
            });
            $("#batch-act-sel").on("change", function() {
                if ((batchOp = $("#batch-act-sel").val()) == 1) return;
                console.log('op: ' + batchOp);
                let modalTitle = '';
                switch (batchOp) {
                    case '2':
                        if (totalSelected > 25) {
                            showToast("You can send up to 25 invoices at one time", 'error', 1500, 0);
                            $("#batch-act-sel").val(1).trigger("change");
                        } else {
                            $("#rdc").empty();
                            // get review data
                            $("#bill-op-review-modal-main").hide();
                            $("#bill-op-review-modal-loader").show();
                            $("#bill-op-review-modal-main").show();
                            let allInv = [];
                            $(".checkbox:checked").each(function() {
                                let inv = JSON.parse(atob($(this).siblings(".hidden-input").data(
                                    'inv')));
                                allInv.push(inv.uuid);
                            });
                            axios.post('{{ env('APP_URL') }}' + '/finances/invoices/batch-op-review', {
                                    invoice_uuids: JSON.stringify(allInv),
                                    op_code: 2
                                })
                                .then((res) => {
                                    if (!res.data.success) showToast(res.data.message, 'error', 1500,
                                        0);
                                    // populate
                                    let ctnt = `<div class="accordion" id="rd-container">`;
                                    x = 0;
                                    res.data.data.review_data.forEach((rd) => {
                                        // child
                                        let child = ``;
                                        rd.invoices.forEach((ic) => {
                                            child +=
                                                `<span class="mx-1 my-1 badge bg-label-dark review-invoices" data-uuid="${ic.uuid}">Inv. #${ic.invoice_number}</span>`;
                                        });

                                        // parent
                                        ctnt += `
                                        <div class="accordion-item card">
                                            <h2 class="accordion-header d-flex align-items-center">
                                                <button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#rd-acc-${x}" aria-expanded="false">
                                                    <span class="my-auto me-2">${rd.client_name}</span><span data-bs-toggle="tooltip" data-bs-placement="top" title="Invoice count" class="mx-1 badge rounded-pill bg-label-secondary"><i class="me-2 ti ti-files ti-xs"></i>${rd.invoices.length}</span><span data-bs-toggle="tooltip" data-bs-placement="top" title="Active registered user" class="mx-1 badge rounded-pill bg-label-secondary"><i class="me-2 ti ti-user ti-xs"></i>${rd.owner_count}</span>
                                                </button>
                                            </h2>
                                            <div id="rd-acc-${x}" class="accordion-collapse collapse">
                                                <div class="accordion-body">
                                                    ${child}
                                                </div>
                                            </div>
                                        </div>
                                        `;
                                        x++;
                                    });
                                    ctnt += `</div>`;
                                    $("#rdc").append(`
                                        <div class="mt-2 mb-1 small">Please review the list accordingly. Only company with at least one active registered user will receive any notification email</div>
                                    `);
                                    $("#rdc").append(ctnt);
                                    // console.log(JSON.stringify(res.data.data));
                                })
                                .catch((err) => {
                                    showToast('Error fetching data', 'error', 1500, 0);
                                })
                                .finally(() => {
                                    $("#bill-op-review-modal-loader").hide();
                                });

                            modalTitle = 'Send Invoice';
                            $("#bill-op-review-modal-title").html(modalTitle);
                            $("#bill-op-review-modal-opt0").html("Notify via system and email");
                            $("#bill-op-review-modal-opt1").html("Send a copy via email (Owner only)");
                            $("#bill-op-review-modal-inp0").prop("checked", true).trigger("change");
                            $("#bill-op-review-modal-inp1").prop("checked", false).trigger("change");
                            $("#bill-op-review-modal").data('op_code', 2).modal("show");
                        }
                        break;
                    case '3':
                        if (totalSelected > 25) {
                            showToast("You can send up to 25 invoice reminders at one time", 'error', 1500,
                                0);
                            $("#batch-act-sel").val(1).trigger("change");
                        } else {
                            // get review data



                            modalTitle = 'Send Invoice Reminder';
                            $("#bill-op-review-modal-title").html(modalTitle);
                            $("#bill-op-review-modal-opt0").html("Notify via system");
                            $("#bill-op-review-modal-opt1").html("Notify via email");
                            $("#bill-op-review-modal-inp0").prop("checked", true).trigger("change");
                            $("#bill-op-review-modal-inp1").prop("checked", false).trigger("change");
                            $("#bill-op-review-modal").data('op_code', 3).modal("show");
                        }
                        break;
                    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 {
                            let allInv = [];
                            $("#loadingModal").modal('show');
                            $(".inv-cb:checked").each(function() {
                                allInv.push($(this).siblings(".hidden-input").data('invuuid'));
                            });
                            axios.post('{{ env('APP_URL') }}' + '/finances/invoices/batch-op-review', {
                                    object_type: 'Invoice',
                                    object_uuids: JSON.stringify(allInv),
                                    op_code: 5
                                })
                                .then((res) => {
                                    if (!res.data.success) showToast(res.data.message, 'error', 0, 0);
                                    let uid = res.data.data;
                                    window.location.href =
                                        `${baseUrl}finances/invoices/download/${uid}`;

                                })
                                .catch((err) => {
                                    showToast('Error fetching data', 'error', 0, 0);
                                })
                                .finally(() => {
                                    $("#batch-act-sel").val(1).trigger("change");
                                    $("#loadingModal").modal('hide');
                                });
                        }
                        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')