@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 crmFilter = 0;
        var qbTable = null;
        var be = [];
        $(async function() {
            // getMappedData();
            // getCrmData();
            // getQbData();
            getAllData();
        });

        async function autoMap() {
            const req1 = axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/auto-map');
            Promise.all([req1]).then((res) => {
                if (res[0].data.success) {
                    showToast(res[0].data.message, 'info', 500, 0);
                    location.reload();
                } else {
                    showToast(res[0].data.message, 'error', 500, 0);
                }
            });
        }

        async function getAllData() {
            const req1 = axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/mapped');
            const req2 = axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/crm-data');
            const req3 = axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/qb-data');
            Promise.all([req1, req2, req3]).then((res) => {
                if (res[0].data.success && res[1].data.success && res[2].data.success) {
                    mappedData = res[0].data.data;

                    crmData = res[1].data.data;
                    populateCrmData();
                    $('#filter-container').show();

                    qbData = res[2].data.data.qb_companies;
                    let tbe = res[2].data.data.business_entities;
                    be = [];
                    tbe.forEach((e) => {
                        be[e.id] = e;
                    });
                    populateQbData();
                } else {
                    showToast('Failed in fetching data', 'error', 500, 0);
                }
            });
        }

        function filterCrm(e) {
            console.log(e.value);
            crmFilter = parseInt(e.value);
            return (e.value == 0 ? populateCrmData() : populateCrmDataFiltered(parseInt(e.value)));
        }

        async function getMappedData() {
            axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/mapped')
                .then((res) => {
                    if (res.data.success && res.data.data.length > 0) {
                        mappedData = res.data.data;
                    } else {
                        console.error('no data');
                    }
                })
                .catch((err) => {
                    console.error('error fetching data');
                })
        }

        async function getCrmData() {
            axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/crm-data')
                .then((res) => {
                    if (res.data.success && res.data.data.length > 0) {
                        crmData = res.data.data;
                        populateCrmData();
                        $('#filter-container').show();
                    } else {
                        console.error('no data');
                    }
                })
                .catch((err) => {
                    console.error('error fetching data');
                })
        }

        async function getQbData() {
            axios.post('{{ env('APP_URL') }}' + '/apis/quickbooks/mapping/qb-data')
                .then((res) => {
                    if (res.data.success && res.data.data.qb_companies.length > 0 && res.data.data.business_entities
                        .length > 0) {
                        qbData = res.data.data.qb_companies;
                        let tbe = res.data.data.business_entities;
                        be = [];
                        tbe.forEach((e) => {
                            be[e.id] = e;
                        });
                        console.log(qbData.length);
                        console.log(tbe.length);
                        populateQbData();
                    } else {
                        console.error('no data');
                    }
                })
                .catch((err) => {
                    console.error('error fetching data');
                })
        }

        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));
            $('#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
                });
            }
        }

        async function populateQbData() {
            console.log(qbData.length);
            console.log(mappedData.length);
            console.log(unsavedChanges.length);
            $('#qb-table-body').empty();
            qbData.forEach((d) => {
                // saved
                let sElm = mappedData.find((md) => md.name == d.qb_fqn);
                let anElm = unsavedChanges.find((uc) => uc.name == d.qb_fqn);
                if (!sElm && !anElm) {
                    $('#qb-table-body').append(`
                    <tr>
                        <td>
                            <div>${d.qb_fqn}</div>
                        </td>
                        <td style="width: 20%;">
                            <button data-toggle="tooltip" title="No. of business entities with company as client" type="button" class="btn btn-info btn-sm">${d.qb_count}</button>
                            <button type="button" data-qbcname="${btoa(encodeURIComponent(d.qb_fqn))}" 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>
                        </td>
                    </tr>
                    `);
                }
            });
            if (qbTable) {

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

        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 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'));

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

            // add to left
            crmFilter == 0 ? populateCrmData() : populateCrmDataFiltered(crmFilter);

            // remove from right
            populateQbData();

            console.log('unsaved changes: ' + JSON.stringify(unsavedChanges));

            // clear and disable
            $(`#ccb-${elmMale}`).prop('disabled', true).prop('checked', false);
            elmMale = null;
            $('.map-buttons').hide();
            $(`.map-checkboxes`).prop('checked', false);
            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);
            crmFilter == 0 ? populateCrmData() : populateCrmDataFiltered(crmFilter);
            populateQbData();
            toggleUsContainer();
        }

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

        function saveMapping() {
            // confirmation
            if (unsavedChanges.length == 0) return alert('No changes to save');
            console.log(unsavedChanges.length);
            axios.post('{{ env('APP_URL') }}' + '/apis/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();
                        // getMappedData().then(() => {
                        //     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').show();
            } else {
                $('#unsaved-container').hide();
            }
        }
    </script>
@endsection

@section('content')
    <h4 class="py-3 mb-4">
        <span class="text-muted fw-light">API / QuickBooks/</span> Mapping
    </h4>
    <div class="d-flex justify-content-between mb-2">
        <div class="text-left">
            <div>Map a company from CRM database to a company sets from QuickBooks
                database</div>
        </div>
        <div class="text-right">
            <button type="button" class="btn btn-outline-primary" onclick="autoMap()">Premap</button>
            <button type="button" class="btn btn-primary" onclick="saveMapping()">Save</button>
            <div id="unsaved-container" class="float-right text-right mr-2" style="display: none;">
                <div class="text-muted small"><span id="unsaved-count"></span> unsaved changes</div>
                <div class="small"><a href="#" onclick="clearMapping()">Clear</a></div>
                {{-- <div><button type="button" class="btn btn-link btn-sm m-0 p-0">Clear</button></div> --}}
            </div>
        </div>
    </div>
    <div class="row">
        {{-- crm --}}
        <div class="col-lg-6">
            <div class="card mt-2">
                <div class="card-header d-flex justify-content-between">
                    <div class="text-left h5">
                        CRM Data
                    </div>
                    <div class="text-right">
                        <div class="form-row" style="display: none;" id="filter-container">
                            <div class="form-group">
                                <select class="form-control" id="view-filter-sel" onchange="filterCrm(this)">
                                    <option value="0">All</option>
                                    <option value="1">Mapped</option>
                                    <option value="2">Unmapped</option>
                                    <option value="3">Unsaved</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">

                        <div class="col" style="overflow-y: auto; max-height: 70vh;">
                            <table id="crm-table" class="table table-striped table-sm table-borderless" style="width:100%">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th>Name</th> {{-- name and parent --}}
                                        <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody id="crm-table-body">
                                    <tr>
                                        <td colspan="3">
                                            <div class="d-flex justify-content-center mt-2">
                                                <div class="spinner-border" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {{-- qb --}}
        <div class="col-lg-6">
            <div class="card mt-2">
                <div class="card-header d-flex justify-content-between">
                    <div class="text-left h5">
                        QuickBooks Data
                    </div>
                    {{-- <div class="text-left">
                        <div class="form-row" style="display: none;" id="filter-container">
                            <div class="col-3 form-group">
                                <label for="view-filter-sel">View</label>
                                <select class="form-control" id="qb-filter-sel" onchange="filterCrm(this)">
                                    <option value="0">All</option>
                                    <option value="1">Mapped</option>
                                    <option value="2">Unmapped</option>
                                    <option value="3">Unsaved</option>
                                </select>
                            </div>
                        </div>
                    </div> --}}
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="col" style="overflow-y: auto; max-height: 70vh;">
                            <table id="qb-table" class="table table-striped table-sm table-borderless" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th> {{-- name and business entity --}}
                                        <th style="width: 15%;"></th>
                                    </tr>
                                </thead>
                                <tbody id="qb-table-body">
                                    <tr>
                                        <td colspan="2">
                                            <div class="d-flex justify-content-center mt-2">
                                                <div class="spinner-border" role="status">
                                                    <span class="sr-only">Loading...</span>
                                                </div>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection