@extends('layouts/layoutMaster')

@section('title', 'QuickBooks — Mapping')

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

@section('page-script')
    <script src="{{ asset('assets/js/api.js') }}"></script>
    <script>
        var unsavedChanges = [];
        var mappedData = [];
        var elmMale = null;
        var elmFemale = null;
        var crmData = [];
        var qbData = [];
        var crmTable = null;
        var crmStatusFilter = 2;
        var crmFinReqFilter = 1;
        var qbFilter = 2;
        var qbTable = null;
        var be = [];

        async function autoMap() {
            const req1 = axios.post(baseUrl + 'settings/quickbooks/mapping/auto-map');
            Promise.all([req1]).then((res) => {
                if (res[0].data.success) {
                    crmTable.ajax.reload();
                    qbTable.ajax.reload();
                    showToast(res[0].data.message, 'info', 1500, 0);
                } else {
                    showToast(res[0].data.message, 'error', 1500, 0);
                }
            });
        }

        function filterCrm(e) {
            crmStatusFilter = parseInt(e.value);
            crmTable.ajax.reload();
        }

        function filterFinCrm(e) {
            crmFinReqFilter = parseInt(e.value);
            crmTable.ajax.reload();
        }

        function filterQb(e) {
            qbFilter = parseInt(e.value);
            qbTable.ajax.reload();
        }

        async function populateCrmDataFiltered(filterCode) {
            $('#crm-table-body').empty();
            crmData.forEach((d) => {
                let fsElm = null;
                let fanElm = null;
                switch (filterCode) {
                    case 1:
                        // m
                        fsElm = mappedData.find((md) => md.crm_id == d.id);
                        if (fsElm) {
                            let spanStr = ``;
                            if (d.status) {
                                spanStr += (d.status == 'ACTIVE' ?
                                    `<span class="badge rounded-pill bg-success ms-2">${d.status}</span>` :
                                    `<span class="badge rounded-pill bg-warning ms-2">${d.status}</span>`);
                            }
                            let tStr = `
                            <tr>
                                <td>
                                    <input disabled id="ccb-${d.id}" data-crmid="${d.id}" class="form-check-input map-checkboxes" type="checkbox" onclick="preMap(this)" />
                                </td>
                                <td>
                                    <div>${d.name} ${spanStr}</div>
                                    <div class="text-muted small">${d.parent_name ?? ''}</div>
                                    <div class="text-success small">${fsElm.name}</div>
                                </td>
                        `;
                            tStr +=
                                `
                            <td>
                                <button class="btn btn-success btn-sm" type="button" id="button-addon2" onclick="unmap('` +
                                btoa(encodeURIComponent(JSON.stringify(fsElm))) + `')"><i class="ti ti-x"></i></button>
                            </td>
                        `;
                            tStr += `</tr>`;
                            $('#crm-table-body').append(tStr);
                        }
                        break;
                    case 2:
                        // um
                        fsElm = mappedData.find((md) => md.crm_id == d.id);
                        fanElm = unsavedChanges.find((uc) => uc.crm_id == d.id);
                        if (!fsElm) {
                            let spanStr = ``;
                            if (d.status) {
                                spanStr += (d.status == 'ACTIVE' ?
                                    `<span class="badge rounded-pill bg-success ms-2">${d.status}</span>` :
                                    `<span class="badge rounded-pill bg-warning ms-2">${d.status}</span>`);
                            }
                            let tStr = `
                            <tr>
                                <td>
                                    <input id="ccb-${d.id}" data-crmid="${d.id}" class="form-check-input map-checkboxes" type="checkbox" onclick="preMap(this)" />
                                </td>
                                <td>
                                    <div>${d.name} ${spanStr}</div>
                                    <div class="text-muted small">${d.parent_name ?? ''}</div>
                                    ${fanElm ? '<div class="text-warning small">' + fanElm.name +'</div>' :  ''}
                                </td>
                        `;
                            if (fanElm) {
                                tStr +=
                                    `
                                <td>
                                    <button class="btn btn-warning btn-sm" type="button" id="button-addon2" onclick="unmap('` +
                                    btoa(encodeURIComponent(JSON.stringify(fanElm))) + `')"><i class="ti ti-x"></i></button>
                                </td>
                                `;
                            } else {
                                tStr += `<td></td>`;
                            }
                            tStr += `</tr>`;
                            $('#crm-table-body').append(tStr);
                        }
                        break;
                    case 3:
                        // us
                        fanElm = unsavedChanges.find((uc) => uc.crm_id == d.id);
                        if (fanElm) {
                            let spanStr = ``;
                            if (d.status) {
                                spanStr += (d.status == 'ACTIVE' ?
                                    `<span class="badge rounded-pill bg-success ms-2">${d.status}</span>` :
                                    `<span class="badge rounded-pill bg-warning ms-2">${d.status}</span>`);
                            }
                            let tStr = `
                            <tr>
                                <td>
                                    <input id="ccb-${d.id}" data-crmid="${d.id}" class="form-check-input map-checkboxes" type="checkbox" onclick="preMap(this)" />
                                </td>
                                <td>
                                    <div>${d.name} ${spanStr}</div>
                                    <div class="text-muted small">${d.parent_name ?? ''}</div>
                                    <div class="text-warning small">${fanElm.name}</div>
                                </td>
                        `;
                            tStr +=
                                `
                            <td>
                                <button class="btn btn-warning btn-sm" type="button" id="button-addon2" onclick="unmap('` +
                                btoa(encodeURIComponent(JSON.stringify(fanElm))) + `')"><i class="ti ti-x"></i></button>
                            </td>
                        `;
                            tStr += `</tr>`;
                            $('#crm-table-body').append(tStr);
                        }
                        break;
                }
            });
            if (crmTable) {

            } else {
                crmTable = $("#crm-table").DataTable({
                    paging: false,
                    searching: true
                });
            }
        }

        async function populateCrmData() {
            // console.log(JSON.stringify(crmData));
            console.log('crmdata: ' + crmData.length);
            $('#crm-table-body').empty();
            crmData.forEach((d) => {
                // saved
                let sElm = mappedData.find((md) => md.crm_id == d.id);
                // unsaved
                let anElm = unsavedChanges.find((uc) => uc.crm_id == d.id);

                let spanStr = ``;
                if (d.status) {
                    spanStr += (d.status == 'ACTIVE' ?
                        `<span class="badge rounded-pill bg-success ms-2">${d.status}</span>` :
                        `<span class="badge rounded-pill bg-warning ms-2">${d.status}</span>`);
                }

                // <input ${(anElm || sElm) ? 'disabled' : ''} id="ccb-${d.id}" data-crmid="${d.id}" class="form-control map-checkboxes" type="checkbox" onclick="preMap(this)" />
                let tStr = `
                <tr>
                    <td>
                        <input id="ccb-${d.id}" data-crmid="${d.id}" class="form-check-input map-checkboxes" type="checkbox" onclick="preMap(this)" />
                    </td>
                    <td>
                        <div>${d.name} ${spanStr}</div>
                        <div class="text-muted small">${d.parent_name ?? ''}</div>
                        ${anElm ? '<div class="text-warning small">' + anElm.name +'</div>' : (sElm ? '<div class="text-success small">' + sElm.name +'</div>' : '')}
                    </td>
            `;

                if (sElm) {
                    tStr += `
                    <td>
                        <button class="btn btn-success btn-sm" type="button" id="button-addon2" onclick="unmap('` +
                        btoa(encodeURIComponent(JSON.stringify(sElm))) + `')"><i class="ti ti-x"></i></button>
                    </td>
                    `;
                } else if (anElm) {
                    tStr += `
                    <td>
                        <button class="btn btn-warning btn-sm" type="button" id="button-addon2" onclick="unmap('` +
                        btoa(encodeURIComponent(JSON.stringify(anElm))) + `')"><i class="ti ti-x"></i></button>
                    </td>
                    `;
                } else {
                    tStr += `<td></td>`;
                }

                tStr += `</tr>`;
                $('#crm-table-body').append(tStr);
            });
            if (crmTable) {

            } else {
                crmTable = $("#crm-table").DataTable({
                    paging: false,
                    searching: true
                });
            }
            console.log('done populateCrmData');
            $('#filter-container-crm').show();
        }

        // async function populateQbData() {
        //     $('#qb-table-body').empty();
        //     let tblData = '';
        //     qbData.forEach((d) => {
        //         tblData += `
        //             <tr>
        //                 <td>
        //                     <div>${d.qb_display_name}</div>
        //                 </td>
        //                 <td style="width: 30%; text-align:right;">
        //                     <div>
        //                     <span data-bs-toggle="tooltip" data-bs-html="true" title="Unmapped for: ${d.unmapped_names}" class="badge rounded-pill bg-danger">${d.unmapped_count}</span>
        //                     <span data-bs-toggle="tooltip" data-bs-html="true" title="Mapped for: ${d.mapped_names}" class="badge rounded-pill bg-success">${d.mapped_count}</span>
        //                     <button type="button" data-qbcname="${btoa(encodeURIComponent(d.qb_display_name))}" data-qbcids="${btoa(d.qb_customer_ids)}"
        //                         data-qbbeids="${btoa(d.qb_business_ids)}" onclick="map(this)" class="btn-sm btn btn-secondary map-buttons" style="display: none;">Match</button>
        //                     </div>
        //                 </td>
        //             </tr>
        //             `;
        //     });
        //     $('#qb-table-body').append(tblData);
        //     if (qbTable) {

        //     } else {
        //         qbTable = $("#qb-table").DataTable({
        //             paging: false,
        //             searching: true
        //         });
        //     }
        //     console.log('done populateQbData');
        //     $('#filter-container-qb').show();
        // }

        function preMap(e) {
            if ($(e).is(':checked')) {
                elmMale = $(e).data('crmid');
                $('.map-buttons').show();
                $(`.map-checkboxes:not(#${e.id})`).prop('checked', false);
            } else {
                elmMale = null;
                $('.map-buttons').hide();
                $(`.map-checkboxes`).prop('checked', false);
            }
        }

        function removeMapping(id){
          console.log(`deleting ${id}`);
          const req1 = axios.post(baseUrl + 'settings/quickbooks/mapping/delete', {
            id
          });
            Promise.all([req1]).then((res) => {
                if (res[0].data.success) {
                    crmTable.ajax.reload();
                    qbTable.ajax.reload();
                    showToast(res[0].data.message, 'info', 1500, 0);
                } else {
                    showToast(res[0].data.message, 'error', 1500, 0);
                }
            });
        }

        // method 2
        function map(e) {
            // clear search
            crmTable.search('');
            qbTable.search('');

            // decode
            let tCName = decodeURIComponent(atob($(e).data('qbcname')));
            let tBeIds = atob($(e).data('qbbeids'));
            let tCIds = atob($(e).data('qbcids'));

            unsavedChanges.push({
                crm_id: elmMale,
                name: tCName,
                be_id: tBeIds,
                c_id: tCIds
            });

            // qbTable.ajax.reload();
            toggleUsContainer();
        }

        function unmap(tbUm) {
            // console.log('unmapping ' + tbUm);
            let tTbum = JSON.parse(decodeURIComponent(atob(tbUm)));
            // console.log(JSON.stringify(tTbum));
            let eK = unsavedChanges.findIndex((uc) => uc.crm_id == tTbum.crm_id);
            unsavedChanges.splice(eK, 1);
            // crmStatusFilter == 0 ? populateCrmData() : populateCrmDataFiltered(crmStatusFilter);
            // populateQbData();
            toggleUsContainer();
        }

        function clearMapping() {
            unsavedChanges = [];
            toggleUsContainer();
            // crmStatusFilter == 0 ? populateCrmData() : populateCrmDataFiltered(crmStatusFilter);
            // populateQbData();
            $(`.map-checkboxes`).prop('checked', false);
        }

        function saveMapping() {
            if (unsavedChanges.length == 0) return showResponse('No changes to save', 'info');
            console.log(unsavedChanges.length);
            axios.post(baseUrl + 'settings/quickbooks/mapping/save', {
                    // mapped_data: btoa(encodeURIComponent(JSON.stringify(unsavedChanges)))
                    mapped_data: unsavedChanges
                })
                .then(async (res) => {
                    if (res.data.success) {
                        showToast(res.data.message, 'info', 500, 0);
                        // location.reload();
                        crmTable.ajax.reload();
                        qbTable.ajax.reload();
                        clearMapping();
                    } else {
                        showToast(res.data.message, 'alert', 0, 0);
                    }
                })
                .catch((err) => {
                    console.log('error fetching data');
                })
        }

        function toggleUsContainer() {
            if (unsavedChanges.length > 0) {
                $('#unsaved-count').html(unsavedChanges.length);
                $('#unsaved-container').css('display', 'flex');
            } else {
                $('#unsaved-container').css('display', 'none');
            }
        }

        async function loadCrmTable() {
            console.log('loadCrmTable');

            let sElm = null;
            let anElm = null;

            // let sElm = mappedData.find((md) => md.crm_id == d.id);
            // let anElm = unsavedChanges.find((uc) => uc.crm_id == d.id);

            // let spanStr = ``;
            // if (d.status) {
            //     spanStr += (d.status == 'ACTIVE' ?
            //         `<span class="badge rounded-pill bg-success ms-2">${d.status}</span>` :
            //         `<span class="badge rounded-pill bg-warning ms-2">${d.status}</span>`);
            // }

            crmTable = $('#crm-table').DataTable({
                processing: true,
                searching: true,
                pageLength: 25,
                lengthMenu: [
                    [25, 50, -1],
                    [25, 50, "All"]
                ],
                order: [
                    [1, 'asc']
                ],
                ajax: {
                    url: baseUrl + 'settings/quickbooks/mapping/crm-data',
                    type: 'POST',
                    data: function(d) {
                        d.crmStatusFilter = crmStatusFilter;
                        d.crmFinReqFilter = crmFinReqFilter;
                    },
                    dataSrc: function(json) {
                        // console.log(JSON.stringify(json.data.crm_companies));
                        // mappedData = json.data.mapped_companies;
                        // checkData = json.checkData;
                        // $("button.status-tabs").each(function(index, element) {
                        //     let res = json.statusData.find(i => i.id == $(this).data('status'));
                        //     if (res) $(this).text(_.capitalize(res.name) + " (" + res
                        //         .inv_count + ")");
                        // });
                        // let ttl = json.statusData.reduce((sum, item) => sum + parseInt(item.inv_count),
                        //     0);
                        // $("#status-tabs-all-button").html(_.capitalize('all') + " (" + ttl + ")");
                        console.log(json.data.crm_companies.length);
                        return json.data.crm_companies;
                    }
                },
                columns: [{
                        data: 'id'
                    },
                    {
                        data: 'name'
                    },
                    {
                        data: 'status'
                    }
                ],
                columnDefs: [{
                        targets: 0,
                        searchable: false,
                        orderable: false,
                        className: 'dt-body-left',
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<input id="ccb-${data}" data-crmid="${data}" class="form-check-input map-checkboxes" type="checkbox" onclick="preMap(this)" />`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 1,
                        searchable: true,
                        orderable: true,
                        className: 'dt-body-left',
                        render: function(data, type, full, meta) {
                            // collapsible for detail mapping
                            if (type == 'display') {
                                let rcStr = ``;
                                if(full['invoice_count'] > 0){
                                  rcStr += `<small><span data-bs-toggle="tooltip" title="Invoice request count" class="badge rounded-pill bg-secondary ms-1">${full['invoice_count']}</span></small>`;
                                }
                                if(full['credit_note_count'] > 0){
                                  rcStr += `<small><span data-bs-toggle="tooltip" title="Credit Note request count" class="badge rounded-pill bg-light text-dark ms-1">${full['credit_note_count']}</span></small>`;
                                }
                                let spanStr = `<small><span class="badge rounded-pill bg-dark ms-2">${full['status']}</span></small>`;
                                let collId = `collid-` + full['id'];
                                let collStr = `<div class="collapse" id="${collId}">`;
                                let mpArr = (typeof full['mapped_profiles'] == 'string' ? (full['mapped_profiles'].split(',')) : null);
                                console.log(mpArr);
                                if(Array.isArray(mpArr)){
                                  (mpArr).forEach((mpe) => {
                                    let mpeArr = mpe.split('#####');
                                    collStr += `<div>- ${mpeArr[1]} on ${mpeArr[2]}
                                      <small><span style="cursor: pointer" onclick="removeMapping(${mpeArr[0]})" data-bs-toggle="tooltip" title="Remove pairing" class="badge rounded-pill bg-danger ms-1">DELETE</span></small>
                                      </div>`;
                                  });
                                }
                                collStr += `</div>`;
                                return `
                                <div data-bs-toggle="collapse" href="#${collId}" role="button">
                                <div class="text-primary">${full['name']} ${spanStr} ${rcStr}</div>
                                <div class="text-muted small">${full['parent_name'] ?? ''}</div>
                                ${anElm ? '<div class="text-warning small">' + anElm.name +'</div>' : (sElm ? '<div class="text-success small">' + sElm.name +'</div>' : '')}
                                </div>
                                ${collStr}
                                `;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 2,
                        searchable: false,
                        orderable: false,
                        className: 'dt-body-right',
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                // let mappedStr = (mappedData[full['id']] ? mappedData[full['id']]['mapped_count'] : 0);
                                // return '';
                                return `<div>
            <span data-bs-toggle="tooltip" data-bs-html="true" title="Mapped profiles: ${full['mapped_profiles']}" class="badge rounded-pill bg-success">${full['mapped_count']}</span>
            </div>`;
                                //                     return `<div>
                            // <span data-bs-toggle="tooltip" data-bs-html="true" title="Mapped for: ${full['mapped_names']}" class="badge rounded-pill bg-success">${full['mapped_count']}</span>
                            // <button type="button" data-qbcname="${btoa(encodeURIComponent(full['qb_display_name']))}" data-qbcids="${btoa(full['qb_customer_ids'])}"
                            //     data-qbbeids="${btoa(full['qb_business_ids'])}" onclick="map(this)" class="btn-sm btn btn-secondary map-buttons" style="display: none;">Match</button>
                            // </div>`;
                            }
                            return data;
                        }
                    }
                ],
            });
            $('#view-filter-sel-crm').val(crmStatusFilter);
            $('#view-filter-sel-fin').val(crmFinReqFilter);
            $('#filter-container-crm').show();
        }

        async function loadQbTable(useRemoteData = true, localData = []) {
            console.log('re/load QbTable');

            qbTable = $('#qb-table').DataTable({
                processing: true,
                searching: true,
                pageLength: 25,
                lengthMenu: [
                    [25, 50, -1],
                    [25, 50, "All"]
                ],
                order: [
                    [0, 'asc']
                ],
                ajax: {
                    url: baseUrl + 'settings/quickbooks/mapping/qb-data',
                    type: 'POST',
                    data: function(d) {
                        d.qbFilter = qbFilter
                    },
                    dataSrc: function(json) {
                        // console.log(JSON.stringify(json));
                        // checkData = json.checkData;
                        // $("button.status-tabs").each(function(index, element) {
                        //     let res = json.statusData.find(i => i.id == $(this).data('status'));
                        //     if (res) $(this).text(_.capitalize(res.name) + " (" + res
                        //         .inv_count + ")");
                        // });
                        // let ttl = json.statusData.reduce((sum, item) => sum + parseInt(item.inv_count),
                        //     0);
                        // $("#status-tabs-all-button").html(_.capitalize('all') + " (" + ttl + ")");

                        return json.data.qb_companies;
                    }
                },
                columns: [{
                        data: 'qb_display_name'
                    },
                    {
                        data: 'mapped_count'
                    }
                ],
                columnDefs: [{
                        targets: 0,
                        searchable: true,
                        orderable: true,
                        className: 'dt-body-left',
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<div>${(full['qb_display_name']).toUpperCase()}</div>`;
                            }
                            return data;
                        }
                    },
                    {
                        targets: 1,
                        searchable: false,
                        orderable: false,
                        className: 'dt-nowrap dt-body-right',
                        render: function(data, type, full, meta) {
                            if (type == 'display') {
                                return `<div>
        <span data-bs-toggle="tooltip" data-bs-html="true" title="Unmapped for: ${full['unmapped_names']}" class="badge rounded-pill bg-danger">${full['unmapped_count']}</span>
        <span data-bs-toggle="tooltip" data-bs-html="true" title="Mapped for: ${full['mapped_names']}" class="badge rounded-pill bg-success">${full['mapped_count']}</span>
        <button type="button" data-qbcname="${btoa(encodeURIComponent(full['qb_display_name']))}" data-qbcids="${btoa(full['qb_customer_ids'])}"
            data-qbbeids="${btoa(full['qb_business_ids'])}" onclick="map(this)" class="btn-sm btn btn-secondary map-buttons" style="display: none;">Match</button>
        </div>`;
                            }
                            return data;
                        }
                    }
                ],
            });
            $('#view-filter-sel-qb').val(qbFilter);
            $('#filter-container-qb').show();
        }

        $(document).ready(async function() {
            console.log('js thingy');
            loadQbTable();
            loadCrmTable();
        });
    </script>
@endsection

@section('content')
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                <div>
                    <h4 class="fw-bold mb-1">QuickBooks Mapping</h4>
                    <p class="text-muted mb-0">Map a company from CRM database to a company set from QuickBooks database.</p>
                </div>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb mb-0">
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Home</a></li>
                        <li class="breadcrumb-item"><a href="javascript:void(0);">Settings</a></li>
                        <li class="breadcrumb-item"><a href="{{ route('settings.qb') }}">QuickBooks</a></li>
                        <li class="breadcrumb-item active" aria-current="page">Mapping</li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div id="unsaved-container" class="d-flex align-items-center gap-2" style="display: none;">
            <span class="text-muted small"><span id="unsaved-count"></span> unsaved changes</span>
            <a href="#" class="small" onclick="clearMapping()">Clear</a>
        </div>
        <div class="d-flex gap-2 ms-auto">
            <button type="button" class="btn btn-label-primary" onclick="autoMap()" data-bs-toggle="tooltip"
                data-bs-html="true" title="<u>Automap using exact match of company name</u>">Automap</button>
            <button type="button" class="btn btn-primary" onclick="saveMapping()">Save</button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h5 class="card-title mb-0">CRM Data</h5>
                            <small class="text-muted">Companies from CRM database.</small>
                        </div>
                        <div class="d-flex gap-2" style="display: none;" id="filter-container-crm">
                            <select class="form-select form-select-sm" id="view-filter-sel-fin" onchange="filterFinCrm(this)" style="width: auto;">
                                <option value="0">All</option>
                                <option value="1">With Financial Request Data</option>
                                <option value="2">Without Financial Request Data</option>
                            </select>
                            <select class="form-select form-select-sm" id="view-filter-sel-crm" onchange="filterCrm(this)" style="width: auto;">
                                <option value="0">All</option>
                                <option value="1">Mapped</option>
                                <option value="2">Unmapped</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0" style="overflow-y: auto; max-height: 70vh;">
                    <table id="crm-table" class="table table-sm border-top mb-0" style="width:100%">
                        <thead>
                            <tr>
                                <th></th>
                                <th>Name</th>
                                <th>Status</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>

        <div class="col-lg-6 mb-4">
            <div class="card h-100">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h5 class="card-title mb-0">QuickBooks Data</h5>
                            <small class="text-muted">Companies from QuickBooks database.</small>
                        </div>
                        <div style="display: none;" id="filter-container-qb">
                            <select class="form-select form-select-sm" id="view-filter-sel-qb" onchange="filterQb(this)" style="width: auto;">
                                <option value="0">All</option>
                                <option value="1">Mapped</option>
                                <option value="2">Unmapped</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="card-body p-0" style="overflow-y: auto; max-height: 70vh;">
                    <table id="qb-table" class="table table-sm border-top mb-0" style="width:100%">
                        <thead>
                            <tr>
                                <th class="text-start">Name</th>
                                <th class="text-end" style="width: 30%;"></th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection