@extends('layouts/layoutMaster')

@php
    $path = \Storage::path('uer/57eefb33-b9ea-40a1-bbb0-e6a7eb0c37c8/d4ec3c80-5139-4c78-8c7c-9034c4c079c7.png');
    $contents = file_get_contents($path);
    $mimeType = mime_content_type($path);
    $base64 = base64_encode($contents);
    $logo = 'data:' . $mimeType . ';base64,' . $base64;
@endphp

@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') }}">
@endsection

@section('page-style')
    <style>
        .circle-img {
            border-radius: 50%;
            overflow: hidden;
            width: 150px;
            height: 150px;
            background-color: white;
        }

        .circle-img img {
            width: 100%;
            height: 100%;
            object-fit: scale-down;
        }

        .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;
        }
    </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">{{ $provider->display_name }}</a>
                            </div>
                            <div class="text-wrap text-muted">{{ session()->get('active_company')['roc_no'] }}
                            </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 class="me-2">{{ $provider->qb_currency }}</span>
                                <span>{{ number_format($company->summary ? $company->summary->current_due : 0, 2) }}</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 class="me-2">{{ $provider->qb_currency }}</span>
                                <span>{{ number_format($company->summary ? $company->summary->to_30_due : 0, 2) }}</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 class="me-2">{{ $provider->qb_currency }}</span>
                                <span>{{ number_format($company->summary ? $company->summary->to_60_due : 0, 2) }}</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 class="me-2">{{ $provider->qb_currency }}</span>
                                <span>{{ number_format($company->summary ? $company->summary->to_90_due : 0, 2) }}</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 class="me-2">{{ $provider->qb_currency }}</span>
                                <span>{{ number_format($company->summary ? $company->summary->past_90_due : 0, 2) }}</span>
                            </div>
                            <div class="text-muted small">90+ days past 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">
                    <div class="d-flex flex-row">
                        <div class="ctaba" style="font-size: 1.2rem">
                            {{ $company->crmData['name'] }}
                        </div>
                    </div>
                    @if ($statement_enabled)
                        <div class="align-self-end d-flex flex-row my-auto d-none" id="cv-act-container">
                            <div style="width: 200px">
                                <select id="cv-act-sel" class="form-select">
                                </select>
                            </div>
                        </div>
                    @endif
                </div>
            </div>
            <div class="row mb-3 mt-4"></div>
            <div class="row mb-3">
                <div class="col-lg-10 col-sm-12">
                    <div class="card p-3" style="min-height: 220px;">
                        <div class="text-muted small">ROC No.</div>
                        <div class="text-wrap mb-3">
                            {{ $company->crmData['roc_no'] && $company->crmData['roc_no'] != '' ? $company->crmData['roc_no'] : '--' }}
                        </div>
                        <div class="text-muted small">Group</div>
                        <div class="text-wrap mb-3">
                            {{ $company->crmData['group_company'] && $company->crmData['group_company'] != '' ? Str::upper($company->crmData['group_company']) : '--' }}
                        </div>
                        <div class="text-muted small">Address</div>
                        @if (!$company->crmData['state'] && !$company->crmData['country'])
                            <div class="text-wrap">{{ Str::upper($company->crmData['address']) }}</div>
                        @else
                            <div class="text-wrap">{{ Str::upper($company->crmData['address']) }}</div>
                            <div class="text-wrap">
                                {{ $company->crmData['state'] ? Str::upper($company->crmData['state']) . ', ' : '' }}
                                {{ $company->crmData['country'] ? Str::upper($company->crmData['country']) : '' }}
                            </div>
                        @endif
                    </div>
                </div>
                <div class="col-lg-2 col-sm-12">
                    <div class="card p-3" style="min-height: 220px;">
                        <div class="my-auto">
                            <div class="text-wrap fw-bold" style="font-size: 1.2rem">
                                <span
                                    class="me-2">{{ $provider->qb_currency }}</span><span>{{ number_format($company->outstanding_amount, 2) }}</span>
                            </div>
                            <div class="text-muted small mb-3">Open balance</div>
                            <div class="text-wrap fw-bold" style="font-size: 1.2rem">
                                <span
                                    class="me-2">{{ $provider->qb_currency }}</span><span>{{ number_format($company->summary ? $company->summary->total_due : 0, 2) }}</span>
                            </div>
                            <div class="text-muted small">Overdue payment</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="px-3 pt-3 pb-0 text-muted">
                            Transactions
                        </div>
                        <div class="p-3">
                            <table class="table mb-4" id="p-tx-list-table">
                                <thead>
                                    <tr>
                                        <th class="cell-fit">Date</th>
                                        <th>Description</th>
                                        <th class="cell-fit text-end text-nowrap">Amount</th>
                                        {{-- <th class="cell-fit">Status</th> --}}
                                        <th class="cell-fit">Actions</th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @include('companies.modals.soa')
@endsection

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

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

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

        async function populateFilters() {
            axios.post('{{ env('APP_URL') }}' + '/clients/' + '{{ $company->client_id }}' + '/filters')
                .then((res) => {
                    defFilterDate = res.data.data.default.filter_date;
                    defFilterStatus = res.data.data.default.filter_status;
                    defFilterPayment = res.data.data.default.filter_payment;
                    defFilterSubmission = res.data.data.default.filter_submission;
                    defFilterView = res.data.data.default.filter_view;

                    $('#cv-act-sel').select2({
                        data: res.data.data.view_actions,
                    }).on('select2:open', function() {
                        $('.select2-search__field').remove();
                    });
                    $('#cv-act-container').removeClass('d-none');;
                })
                .catch((err) => {
                    console.log(err);
                });

        }

        function loadStmtData(coddd) {
            console.log('fetching data');
            if (coddd) {
                $("#p-soa-dl-btn").prop("disabled", true);
                $("#p-soa-c-main-container").addClass('d-none');
                $("#p-soa-c-loader").removeClass('d-none');
            }
            axios.post('{{ env('APP_URL') }}' + '/clients/' + '{{ $company->client_id }}' + '/statement', {
                    cod: (coddd ? coddd : null)
                })
                .then((res) => {
                    let hFomatter = new Intl.NumberFormat('en-MY', {
                        style: 'currency',
                        currency: '{{ $provider->qb_currency }}'
                    });
                    // info
                    $("#p-soa-c-name").html(res.data.data.consumer.name);
                    $("#p-soa-c-address").html(res.data.data.consumer.address);
                    $("#p-soa-c-state").html(res.data.data.consumer.state);
                    $("#p-soa-c-country").html(res.data.data.consumer.country);
                    $("#p-soa-c-date").html(res.data.data.statement_date);
                    $("#p-soa-c-due-total").html(hFomatter.format(res.data.data.statement_total_due));
                    // populate tx
                    $("#p-soa-c-tbl-body").empty();
                    let cumBf = parseFloat(res.data.data.statement_data.balance_forward);
                    $("#p-soa-c-tbl-body").append(`
                      <tr>
                          <td scope="row">
                              ${moment(res.data.data.bf_end_date).format('DD.MM.YYYY')}
                          </td>
                          <td>Balance Forward</td>
                          <td class="text-end"></td>
                          <td class="text-end">
                            ${hFomatter.format(cumBf)}
                          </td>
                      </tr>
                    `);
                    let allTx = res.data.data.statement_data.transactions;
                    if (allTx.length > 0) {
                        allTx.forEach((tx) => {
                            cumBf += parseFloat(tx.item_home_amount);
                            let formatter = new Intl.NumberFormat('en-MY', {
                                style: 'currency',
                                currency: tx.item_currency
                            });
                            $("#p-soa-c-tbl-body").append(`
                            <tr>
                                <td scope="row">
                                    ${moment(tx.item_date).format('DD.MM.YYYY')}
                                </td>
                                <td><a
                                  href="${baseUrl}finances/${tx.item_type}/${tx.uuid}">${tx.item_ref_number}</a>
                                </td>
                                <td class="text-end text-nowrap">
                                  <div>${hFomatter.format(tx.item_home_amount)}</div>
                                  ${tx.item_exchange_rate == 1 ? '' :
                                  '<div class="text-muted small">' + formatter.format(tx.item_amount) + '</div>'}
                                </td>
                                <td class="text-end text-nowrap">
                                  ${hFomatter.format(cumBf)}
                                </td>
                            </tr>
                          `);
                        });
                    }
                    // populate aging
                    $("#p-soa-c-tbl-due-current").html(hFomatter.format(res.data.data.statement_data.aging
                        .current_due));
                    $("#p-soa-c-tbl-due-to30").html(hFomatter.format(res.data.data.statement_data.aging.to_30_due));
                    $("#p-soa-c-tbl-due-to60").html(hFomatter.format(res.data.data.statement_data.aging.to_60_due));
                    $("#p-soa-c-tbl-due-to90").html(hFomatter.format(res.data.data.statement_data.aging.to_90_due));
                    $("#p-soa-c-tbl-due-past90").html(hFomatter.format(res.data.data.statement_data.aging.past_90_due));
                    $("#p-soa-c-tbl-due-total").html(hFomatter.format(res.data.data.statement_total_due));

                    $("#p-soa-dl-btn").prop("disabled", false);
                    $("#p-soa-c-loader").addClass('d-none');
                    $("#p-soa-c-main-container").removeClass('d-none');
                })
                .catch((err) => {
                    console.error(err);
                });
        }

        $("#p-soa-dl-btn").on("click", function() {
            console.log('dl...');
            let cod = '{{ $cod }}';
            let cid = '{{ $company->crmData['id'] }}';
            console.log(cod + ' ' + cid);
            window.location.href = `${baseUrl}clients/${cid}/statement/download?cod=` + moment(cod).format(
                'YYYY-MM-DD');
        });

        $('#p-soa-custom-date-inp').daterangepicker({
            singleDatePicker: true,
            showDropdowns: true,
            minYear: 2018,
            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');
            console.log(coDate);
            loadStmtData(coDate);
            // window.location.href = `${baseUrl}finances/account-statement?cod=${coDate}`;
        });

        $(function() {
            populateFilters();

            let cid = '{{ $company->client_id }}';
            $('#p-tx-list-table').DataTable().destroy();
            dt_ptx = $('#p-tx-list-table').DataTable({
                processing: true,
                searching: true,
                order: [
                    [0, 'desc']
                ],
                ajax: {
                    url: '{{ env('APP_URL') }}' + '/clients/' + cid +
                        '/transactions',
                    type: 'POST',
                    headers: {
                        "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr('content')
                    },
                    data: function(d) {
                        // d.filter_status = defFilterStatus;
                        // d.filter_date = defFilterDate;
                        // d.filter_payment = defFilterPayment;
                        // d.custom_start_date = customStartDate;
                        // d.custom_end_date = customEndDate;
                    }
                },
                columns: [{
                        data: 'item_date'
                    },
                    {
                        data: 'item_ref_number'
                    },
                    {
                        data: 'item_home_amount'
                    },
                    // {
                    //     data: 'item_amount'
                    // },
                    {
                        data: 'uuid'
                    }
                ],
                columnDefs: [{
                        targets: 0,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<span>${moment(data).format('DD.MM.YYYY')}</span>`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 1,
                        orderable: true,
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                let entObj = (full['item_type'] == 'invoices') ? 'invoices' :
                                    ((full['item_type'] == 'credit-notes') ? 'credit-notes' : (full[
                                        'item_type'] == 'payments' ? 'payments' : '--'));
                                return `<a href="${baseUrl}finances/${entObj}/${full['uuid']}">${data}</a>`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 2,
                        className: 'dt-right text-nowrap',
                        orderable: true,
                        render: function(data, type, full, meta) {
                            // if (type == 'display') {
                            //     let formatter = new Intl.NumberFormat('en-MY', {
                            //         style: 'currency',
                            //         currency: '{{ $provider->qb_currency }}'
                            //     });
                            //     let sym = full['item_type'] == 'invoices' ? '' : '-';
                            //     let ttlA = formatter.format(full['item_amount']);
                            //     return `<span>${ttlA}</span>`;
                            // }
                            let hFomatter = new Intl.NumberFormat('en-MY', {
                                style: 'currency',
                                currency: '{{ $provider->qb_currency }}'
                            });
                            let httlStr = hFomatter.format(full['item_home_amount']);
                            let formatter = new Intl.NumberFormat('en-MY', {
                                style: 'currency',
                                currency: full['item_currency']
                            });
                            let ttlStr = formatter.format(full['item_amount']);
                            // 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>${httlStr}</span>` + (full['item_exchange_rate'] == 1 ?
                                `` :
                                `<br><span class="text-muted small" data-bs-toggle="tooltip" data-bs-placement="top" title="Exchange rate: ${full['item_exchange_rate']}">${ttlStr}</span>`
                            );
                            return full['item_home_amount'];
                        }
                    },
                    // {
                    //     targets: 3,
                    //     className: 'dt-nowrap',
                    //     render: function(data, type, full, meta) {
                    //         // main status(paid,open,voided), due status, partial status, reminder status
                    //         let statusStr = '';
                    //         let classStr = '';
                    //         let dueStr = '';
                    //         let dueClassStr = 'secondary';
                    //         let balanceStr = '';
                    //         if (full['total_amount'] != 0 && full['outstanding_amount'] == 0) {
                    //             statusStr = 'Paid';
                    //             classStr = 'success';
                    //         } else if (full['total_amount'] != 0 && full['outstanding_amount'] !=
                    //             0) {
                    //             statusStr = 'Open';
                    //             classStr = 'info';
                    //             let duration = getDuration(full['invoice_due_date'], true);
                    //             // check due
                    //             if (duration.past) {
                    //                 dueStr = `Overdue ${Math.abs(duration.value)} ${duration.unit}`;
                    //                 dueClassStr = 'warning';
                    //             } else {
                    //                 if (Math.abs(duration.value) == 0) {
                    //                     dueStr = `Due today`;
                    //                 } else {
                    //                     dueStr =
                    //                         `Due in ${Math.abs(duration.value) + 1} ${duration.unit}`;
                    //                 }
                    //             }
                    //             // check balance
                    //             if (parseFloat(full['total_amount']) != parseFloat(full[
                    //                     'outstanding_amount'])) {
                    //                 let formatter = new Intl.NumberFormat('en-MY', {
                    //                     style: 'currency',
                    //                     currency: full['currency']
                    //                 });
                    //                 let ttlB = formatter.format(full['outstanding_amount']);
                    //                 balanceStr = `Partially paid, ${ttlB} due`;
                    //             }
                    //         } else if (full['total_amount'] == 0 && full['outstanding_amount'] ==
                    //             0) {
                    //             statusStr = 'Voided';
                    //             classStr = 'secondary';
                    //         }

                    //         return `
                //       <div><span class="me-2 badge bg-label-${classStr}">${statusStr}</span>` +
                    //             (dueStr == '' ? '' :
                    //                 `<span class="me-2 badge bg-label-${dueClassStr}">${dueStr}</span>`
                    //             ) +
                    //             `</div>` +
                    //             (balanceStr == '' ? '' :
                    //                 `<div class="mt-1 small text-muted">${balanceStr}</div>`);
                    //     }
                    // },
                    {
                        targets: 3,
                        searchable: false,
                        orderable: false,
                        render: function(data, type, full, meta) {
                            let entObj = (full['item_type'] == 'invoices') ? 'invoices' :
                                ((full['item_type'] == 'credit-notes') ? 'credit-notes' :
                                    'payments');
                            return (
                                '<div class="d-flex align-items-center">' +
                                `<a href="${baseUrl}finances/${entObj}/${full['uuid']}" data-bs-toggle="tooltip" class="text-body" data-bs-placement="top" title="View transaction"><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('${btoa(JSON.stringify(full))}')" class="dropdown-item pc-fin-dl-btn">Downloads</button>` +
                                // '<a href="' + baseUrl +
                                // 'app/invoice/edit" class="dropdown-item">Print</a>' +
                                '</div>' +
                                '</div>'
                            );
                        }
                    },
                ]
            });

            $("#cv-act-sel").on("change", function() {
                if ((actOp = $("#cv-act-sel").val()) == 0) return;
                let modalTitle = '';
                console.log(actOp);
                switch (actOp) {
                    case '1':
                        $("#c-soa-modal").modal('show');
                        break;
                }
            });
            $("#c-soa-modal").on("hide.bs.modal", function() {
                $("#cv-act-sel").val(0).trigger("change");
            });

            $("#c-soa-modal").on("show.bs.modal", function() {
                loadStmtData(null);
            });

        });
    </script>
@endsection