@extends('layouts/layoutMaster')

@section('title', 'Credit Notes - 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>

        {{-- 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>
            </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 p-2">
                        <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>Client</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/credit-notes/${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/credit-notes/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 (defFilterStatus && defFilterStatus.length > 0) {
                        $("#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({
                // dom: 'Blfrtip',
                sDom: 'B<"clear">lfrtip',
                buttons: [{
                    extend: 'print',
                    className: 'btn btn-primary',
                    title: 'Credit Notes',
                    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: [0, 1, 2, 3, 4],
                        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: [
                    [1, 'desc']
                ],
                ajax: {
                    url: '{{ env('APP_URL') }}' + '/finances/credit-notes/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: 'credit_note_number'
                    },
                    {
                        data: 'credit_note_date'
                    },
                    {
                        data: 'c_display_name'
                    },
                    {
                        data: 'homecurr_total_amount'
                    },
                    {
                        data: 'id'
                    },
                    {
                        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,
                        className: 'dt-nowrap',
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<a href="${baseUrl}finances/credit-notes/${full['uuid']}">${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') {
                                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: 3,
                        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: 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 = '';
                            // if (full['total_amount'] != 0) {
                            //     statusStr = 'Applied';
                            //     classStr = 'success';
                            // } else if (full['total_amount'] == 0) {
                            //     statusStr = 'Voided';
                            //     classStr = 'secondary';
                            // }

                            // return `
                        //     <div><span class="me-2 badge bg-label-${classStr}">${statusStr}</span>` +
                            //     `</div>`;
                            let statusStr = '';
                            let classStr = '';
                            let dueStr = '';
                            let dueClassStr = 'secondary';
                            let balanceStr = '';
                            if ((full['homecurr_total_amount'] != 0 || full['total_amount'] != 0) &&
                                (full['homecurr_balance'] ==
                                    0 || full['balance'] ==
                                    0)) {
                                statusStr = 'Applied';
                                classStr = 'success';
                            } else if (full['homecurr_total_amount'] != 0 && (full[
                                        'homecurr_balance'] !=
                                    0 || full['balance'] !=
                                    0)) {
                                statusStr = 'Open';
                                classStr = 'info';
                                // check balance
                                if (parseFloat(full['homecurr_balance']) == parseFloat(full[
                                        'homecurr_total_amount'])) {
                                    let formatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: full['currency']
                                    });
                                    let ttlB = formatter.format(full['homecurr_total_amount']);
                                    balanceStr = `Unapplied`;
                                } else {
                                    let formatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: full['currency']
                                    });
                                    let ttlB = formatter.format(full['homecurr_balance']);
                                    balanceStr = `Partially applied, ${ttlB} remaining`;
                                }
                            } else if (full['homecurr_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 badge bg-label-secondary">${balanceStr}</div>`
                                    // `<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/credit-notes/${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')