@extends('layouts/layoutMaster')

@section('title', $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') }}">
    <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">Summary</div>
                    </div>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="current-due-label"></span>
                            </div>
                            <div class="text-muted small">Current due</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="to-30-due-label"></span>
                            </div>
                            <div class="text-muted small">1-30 days past due</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="to-60-due-label"></span>
                            </div>
                            <div class="text-muted small">31-60 days past due</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="to-90-due-label"></span>
                            </div>
                            <div class="text-muted small">61-90 days past due</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="past-90-due-label"></span>
                            </div>
                            <div class="text-muted small">90+ days past due</div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-sm-12 mb-2">
                    <div class="card p-3" style="min-height: 100px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.1rem">
                                <span id="total-due-label"></span>
                            </div>
                            <div class="text-muted small">Total due</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('companies.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="p-client-list-table" class="table border-top">
                                <thead>
                                    <tr>
                                        {{-- <th class="cell-fit">
                                            <input type="checkbox" id="checkAll" onchange="checkAllCbListener(this)">
                                        </th> --}}
                                        <th>Client</th>
                                        <th class="cell-fit text-end">Open Balance</th>
                                        <th class="cell-fit">Status</th>
                                        <th class="cell-fit">Actions</th>
                                    </tr>
                                </thead>
                            </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>
        var dt_pclient,
            defFilterStatus = null,
            totalSelected = 0;

        function dl(decObj) {
            let eObj = JSON.parse(atob(decObj));
            console.log(eObj);
            // window.location.href = `${baseUrl}finances/invoices/${id}/download`;
        }

        async function loadTable() {
            console.log('triggered');
            dt_pclient.ajax.reload();
        }

        async function populateFilters() {
            console.log('pf');
            axios.post('{{ env('APP_URL') }}' + '/clients/filters')
                .then((res) => {
                    defFilterStatus = res.data.data.default.filter_status;
                    let allYears = res.data.data.all_years;
                    if (res.data.data.summary) {
                        let formatter = new Intl.NumberFormat('en-MY', {
                            style: 'currency',
                            currency: '{{ $provider->qb_currency }}'
                        });
                        $("#current-due-label").html(res.data.data.summary && res.data.data.summary.current_due ?
                            formatter.format(res.data.data.summary.current_due) : '--');
                        $("#to-30-due-label").html(res.data.data.summary && res.data.data.summary.to_30_due ?
                            formatter.format(res.data.data.summary.to_30_due) : '--');
                        $("#to-60-due-label").html(res.data.data.summary && res.data.data.summary.to_60_due ?
                            formatter.format(res.data.data.summary.to_60_due) : '--');
                        $("#to-90-due-label").html(res.data.data.summary && res.data.data.summary.to_90_due ?
                            formatter.format(res.data.data.summary.to_90_due) : '--');
                        $("#past-90-due-label").html(res.data.data.summary && res.data.data.summary.past_90_due ?
                            formatter.format(res.data.data.summary.past_90_due) : '--');
                        $("#total-due-label").html(res.data.data.summary && res.data.data.summary.total_due ?
                            formatter.format(res.data.data.summary.total_due) : '--');
                        // $("#summ-remark").html(res.data.data.summary_remark);
                    } else {
                        $("#current-due-label").html('--');
                        $("#to-30-due-label").html('--');
                        $("#to-60-due-label").html('--');
                        $("#to-90-due-label").html('--');
                        $("#past-90-due-label").html('--');
                        $("#total-due-label").html('--');
                    }
                    $('#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");
                })
                .catch((err) => {
                    console.log(err);
                });

        }

        $(function() {
            $("#custom-date-container").hide();
            $("#ivew-status-container").hide();

            populateFilters();

            $('#p-client-list-table').DataTable().destroy();
            dt_pclient = $('#p-client-list-table').DataTable({
                // dom: 'Blfrtip',
                sDom: 'B<"clear">lfrtip',
                buttons: [{
                    extend: 'print',
                    className: 'btn btn-primary',
                    title: 'Clients',
                    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],
                        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: [
                    [0, 'asc']
                ],
                ajax: {
                    url: '{{ env('APP_URL') }}' + '/clients/all',
                    type: 'POST',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function(d) {
                        d.filter_status = defFilterStatus;
                    }
                },
                columns: [{
                        data: 'client_name'
                    },
                    {
                        data: 'homecurr_total_due'
                    },
                    {
                        data: 'homecurr_total_overdue_due'
                    },
                    {
                        data: 'client_id'
                    },
                ],
                columnDefs: [{
                        targets: 0,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                let contentStr =
                                    `<div><a href="${baseUrl}clients/${full['client_id']}">${full['client_name']}</a></div>`;
                                return contentStr;
                            }
                            return full['client_name'];
                        }
                    },
                    {
                        // open balance
                        targets: 1,
                        className: 'dt-right',
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                if (!full['qb_customer_id']) {
                                    return `--`;
                                } else {
                                    let homeFomatter = new Intl.NumberFormat('en-MY', {
                                        style: 'currency',
                                        currency: '{{ $provider->qb_currency }}'
                                    });
                                    let httlA = homeFomatter.format(full['homecurr_total_due'])
                                    return `<span>${httlA}</span>`;
                                }

                            }
                            return full['homecurr_total_due'];
                        }
                    },
                    {
                        // status
                        targets: 2,
                        className: 'dt-nowrap',
                        render: function(data, type, full, meta) {
                            let statusStr = '';
                            let overDue = '';
                            let currentDue = '';
                            let classStr = '';
                            let dueStr = '';
                            let dueClassStr = 'secondary';
                            let balanceStr = '';
                            if (!full['qb_customer_id']) {
                                statusStr =
                                    `<span class="badge badge-center rounded-pill bg-label-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="No financial data found"><i class="ti ti-exclamation-mark"></i></span>`;
                                classStr = 'warning';
                            } else {
                                if (parseFloat(full['homecurr_total_current_due']) == 0 &&
                                    parseFloat(
                                        full['homecurr_total_overdue_due']) == 0) {
                                    statusStr =
                                        `<span class="badge badge-center rounded-pill bg-label-success"><i class="ti ti-check"></i></span>`;
                                    classStr = 'success';
                                } else if (parseFloat(full['homecurr_total_current_due']) != 0 ||
                                    parseFloat(full['homecurr_total_overdue_due']) !=
                                    0) {
                                    statusStr =
                                        `<span class="me-2 badge bg-label-info">Open</span>`;
                                    classStr = 'info';
                                    if (parseFloat(full['homecurr_total_current_due']) != 0) {
                                        let homeFomatter = new Intl.NumberFormat('en-MY', {
                                            style: 'currency',
                                            currency: '{{ $provider->qb_currency }}'
                                        });
                                        currentDue = homeFomatter.format(full[
                                            'homecurr_total_current_due']);
                                    }
                                    if (parseFloat(full['homecurr_total_overdue_due']) != 0) {
                                        let homeFomatter = new Intl.NumberFormat('en-MY', {
                                            style: 'currency',
                                            currency: '{{ $provider->qb_currency }}'
                                        });
                                        overDue = homeFomatter.format(full[
                                            'homecurr_total_overdue_due']);
                                    }
                                }
                            }

                            return (statusStr == '' ? '' :
                                    statusStr
                                ) +
                                (overDue == '' ? '' :
                                    `<span class="me-2 badge bg-label-warning" data-bs-toggle="tooltip" data-bs-placement="top" title="Overdue: ${overDue}">${overDue}</span>`
                                ) +
                                (currentDue == '' ? '' :
                                    `<span class="mx-1 small text-muted" data-bs-toggle="tooltip" data-bs-placement="top" title="Not due: ${currentDue}">${currentDue}</span>`
                                );
                        }
                    },
                    {
                        targets: 3,
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            return (
                                '<div class="d-flex align-items-center">' +
                                `<a href="${baseUrl}clients/${full['client_id']}" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="View Client"><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 onclick="dl(${btoa(JSON.stringify(full))})" type="button" class="dropdown-item client-stmt-btn">Statement</button>` +
                                // '</div>' +
                                '</div>'
                            );
                        }
                    },
                ],
                // 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();
            });

        });
    </script>
@endsection