@extends('layouts/layoutMaster')

@section('title', $page_title)

@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">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Start Date</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-12">
                    <input type="text" class="form-control" value="{{ $cod }}" id="soa-bf-custom-date-inp" />
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <div class="divider text-secondary">
                        <div class="divider-text">Actions</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-12">
                    <button class="btn btn-label-primary d-grid w-100 mb-2" id="soa-bf-custom-date-dl"
                        @if (!$statement_data || count($statement_data) == 0) disabled @endif>
                        Download
                    </button>
                </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" style="margin-top: 38px;">
                <div class="col-lg-12 col-sm-12 mb-4">
                    <div class="card">
                        <div class="card-body">
                            <div class="row mb-4">
                                <div class="col text-center">
                                    <img class="img-fluid w-25" src="{{ asset('assets/images/app-logo-slim-dark.svg') }}"
                                        alt="logo" />
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-12 d-flex justify-content-start">
                                    <span class="text-primary h2">{{ $statement_type }}</span>
                                </div>
                            </div>
                            <div class="row mb-2">
                                <div class="col-4 text-wrap">
                                    <div class="fw-bold">TO</div>
                                    <div>{{ Str::upper($consumer['name']) }}</div>
                                    <div>{{ Str::upper($consumer['address']) }}</div>
                                    <div>{{ Str::upper($consumer['state']) }}</div>
                                    <div>{{ Str::upper($consumer['country']) }}</div>
                                </div>
                                <div class="col-4 text-wrap">
                                </div>
                                <div class="col-4 text-wrap">
                                    <div class="row">
                                        <div class="col-4 text-end">
                                            <div class="fw-bold">DATE</div>
                                        </div>
                                        <div class="col-4 text-start">
                                            <div>{{ $statement_date }}</div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-4 text-end">
                                            <div class="fw-bold">TOTAL DUE ENCLOSED</div>
                                        </div>
                                        <div class="col-4 text-start">
                                            <div>{{ number_format($statement_total_due, 2, '.', ',') }}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @php
                                $nope = 0;
                            @endphp
                            @forelse ($statement_data as $sd)
                                @php
                                    if (floatval($sd->customer_outstanding) == 0 && count($sd->transactions) == 0) {
                                        $nope++;
                                        continue;
                                    }
                                @endphp
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-header fw-bold">
                                                <a
                                                    href="{{ url("entities/$sd->provider_uuid") }}">{{ Str::upper($sd->provider_name) }}</a>
                                            </div>
                                            <div class="card-body">
                                                <table class="table mb-4">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th scope="col" class="cell-fit">Date</th>
                                                            <th scope="col">Description</th>
                                                            <th scope="col" class="cell-fit">Amount</th>
                                                            <th scope="col" class="cell-fit">Balance</th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        @php
                                                            $bal = $sd->balance_forward;
                                                            // bf_end_date
                                                            // $bfDate = date_format(
                                                            //     date_sub(
                                                            //         date_create($cod),
                                                            //         date_interval_create_from_date_string('1 days'),
                                                            //     ),
                                                            //     'd.m.Y',
                                                            // );
                                                        @endphp
                                                        <tr>
                                                            <td scope="row">
                                                                {{ date_format($bf_end_date, 'd.m.Y') }}
                                                            </td>
                                                            <td>Balance Forward</td>
                                                            <td class="text-end"></td>
                                                            <td class="text-end">
                                                                {{ number_format($bal, 2, '.', ',') }}</td>
                                                        </tr>
                                                        @forelse ($sd->transactions as $tx)
                                                            @php
                                                                $bal += $tx->item_amount;
                                                            @endphp
                                                            <tr>
                                                                <td scope="row">
                                                                    {{ date_format(date_create($tx->item_date), 'd.m.Y') }}
                                                                </td>
                                                                <td><a
                                                                        href="{{ url("finances/$tx->item_type/$tx->uuid") }}">{{ $tx->item_ref_number }}</a>
                                                                </td>
                                                                <td class="text-end">
                                                                    {{ number_format($tx->item_amount, 2, '.', ',') }}</td>
                                                                <td class="text-end">
                                                                    {{ number_format($bal, 2, '.', ',') }}</td>
                                                            </tr>
                                                        @empty
                                                            <tr>
                                                                <td colspan="4">{{ '--' }}</td>
                                                            </tr>
                                                        @endforelse
                                                    </tbody>
                                                </table>

                                                <table class="table">
                                                    <thead class="table-light">
                                                        <tr>
                                                            <th scope="col" class="cell-fit">
                                                                <div>Current</div>
                                                                <div>Due</div>
                                                            </th>
                                                            <th scope="col" class="cell-fit">
                                                                <div>1-30 Days</div>
                                                                <div>Past Due</div>
                                                            </th>
                                                            <th scope="col" class="cell-fit">
                                                                <div>31-60 Days</div>
                                                                <div>Past Due</div>
                                                            </th>
                                                            <th scope="col" class="cell-fit">
                                                                <div>61-90 Days</div>
                                                                <div>Past Due</div>
                                                            </th>
                                                            <th scope="col" class="cell-fit">
                                                                <div>90+ Days</div>
                                                                <div>Past Due</div>
                                                            </th>
                                                            <th scope="col" class="cell-fit text-end">
                                                                <div>Amount</div>
                                                                <div>Due</div>
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr>
                                                            <td scope="row" class="text-start">
                                                                {{ number_format($sd->aging->current_due ?? 0, 2, '.', ',') }}
                                                            </td>
                                                            <td scope="row" class="text-start">
                                                                {{ number_format($sd->aging->to_30_due ?? 0, 2, '.', ',') }}
                                                            </td>
                                                            <td scope="row" class="text-start">
                                                                {{ number_format($sd->aging->to_60_due ?? 0, 2, '.', ',') }}
                                                            </td>
                                                            <td scope="row" class="text-start">
                                                                {{ number_format($sd->aging->to_90_due ?? 0, 2, '.', ',') }}
                                                            </td>
                                                            <td scope="row" class="text-start">
                                                                {{ number_format($sd->aging->past_90_due ?? 0, 2, '.', ',') }}
                                                            </td>
                                                            <td scope="row" class="text-end">
                                                                <span class="me-1">{{ $sd->customer_currency }}
                                                                </span>
                                                                {{ number_format($sd->customer_outstanding, 2, '.', ',') }}
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="row mt-3">
                                    <div class="col-12">
                                        <div class="card">
                                            <div class="card-body">
                                                No statements to display
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforelse
                            {{-- @foreach ($statement_data as $sd)
                            @endforeach --}}
                        </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;

        $("#soa-bf-custom-date-dl").on("click", function() {
            let cod = '{{ $cod }}';
            window.location.href = `${baseUrl}finances/account-statement/download?cod=` + moment(cod).format(
                'YYYY-MM-DD');
        });

        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: 'payment_method'
                    },
                    {
                        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'] == 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['outstanding_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));
            });
        });

        $('#soa-bf-custom-date-inp').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: {{ $min_year }},
            locale: {
                format: "DD.MM.YYYY",
                separator: " - ",
            },
            startDate: '{{ $cod }}',
            maxYear: parseInt(moment().format('YYYY'), 10)
        }, function(start, end, label) {
            let coDate = start.format('YYYY-MM-DD');
            window.location.href = `${baseUrl}finances/account-statement?cod=${coDate}`;
        });
    </script>
@endsection

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