Subversion Repositories SmartDukaan

<style>
    .saleTable tr th {
        color: #FFFFFF;
        padding-bottom: 6px;
    }

    .saleTable tr td {
        padding-bottom: 6px;
    }

    .blue-bg {
        box-shadow: 4px 4px 4px grey;
        background-image: linear-gradient(#57889c, #B0C4DE);
    }

    .brand-wise-table {
        /*margin-top: 10px;*/
        width: 100%;
        border-collapse: collapse;
    }

    .brand-wise-table th, .brand-wise-table td {
        border: 1px solid #ddd;
        padding: 8px;
    }

    .brand-wise-table th {
        background-color: #57889c;
        color: #fff;
    }
</style>

<table class="table table-striped saleTable" style="color:blue;">
    <thead>
    <tr class="cursor-pointer">
        <th></th>
        <th>Sales</th>
        <th>MTD</th>
        <th>Type</th>
        <th></th>
    </tr>
    </thead>

    <tbody id="monthSalesBody">
        #set($start = 1)
        #set($end = 6)
        #set($range = [$start..$end])
        #foreach($i in $range)
        <tr class="clickable-row cursor-pointer" data-month="$monthSales.get($i).getMonth()">
            <td><b>$monthSales.get($i).getMonth()</b></td>
            <td>$monthSales.get($i).getMonthlySales()</td>
            <td>$monthSales.get($i).getMtdSales()</td>
            <td>$monthSales.get($i).getPartnerType() </td>
            <td class="toggle-cell">
                <i class="fa fa-angle-down dropdown-icon"
                   style="cursor:pointer; font-size: 27px;width: 27px;height: 27px;margin-top: 0px;color: rgba(255, 255, 255, 0.75);line-height: 27px;"></i>
            </td>
        </tr>

        <tr class="brand-wise-sale-row cursor-pointer" style="display: none;">
            <td colspan="6">
                <table class="brand-wise-table">
                    <thead>
                    <tr>
                        <th>Brand</th>
                        <th>LMS</th>
                        <th>LMTD</th>
                        <th>MTD</th>
                        <th>MTDQTY</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody class="brandWiseBody">
                    </tbody>
                </table>
            </td>
        </tr>
        <tr class="brand-item-wise-sale-row cursor-pointer" style="display: none;">
            <td colspan="6">
                <table class="brand-wise-table">
                    <thead>
                    <tr>
                        <!--                                            <th>Brand</th>-->
                        <th>Model</th>
                        <th>Quantity</th>
                    </tr>
                    </thead>
                    <tbody class="brandItemWiseBody">
                    </tbody>
                </table>
            </td>
        </tr>
        #end
    </tbody>
</table>

<script>
    function getCookie(name) {
        const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
        if (match) {
            return decodeURIComponent(match[2]);
        }
        return null;
    }

    document.querySelectorAll('.clickable-row').forEach(function (row) {
        row.addEventListener('click', function () {
            const brandWiseRow = row.nextElementSibling;
            const allBrandWiseRows = document.querySelectorAll('.brand-wise-sale-row');
            const fofoId = getCookie("fofoId");
            allBrandWiseRows.forEach(function (otherRow) {
                if (otherRow !== brandWiseRow) {
                    otherRow.style.display = 'none';
                }
            });

            let monthString = row.getAttribute('data-month');
            const monthMap = {
                'Jan': 1, 'Feb': 2, 'Mar': 3, 'Apr': 4,
                'May': 5, 'Jun': 6, 'Jul': 7, 'Aug': 8,
                'Sep': 9, 'Oct': 10, 'Nov': 11, 'Dec': 12
            };

            const monthAbbr = monthString.substring(0, 3);
            const monthNumber = monthMap[monthAbbr];

            if (!monthNumber) {
                console.error('Invalid month:', monthString);
                return;
            }

            if (brandWiseRow.style.display === 'none') {
                brandWiseRow.style.display = '';

                doGetAjaxRequestHandler(
                        `${context}/getBrandwisePartnerSale?month=${monthNumber}`,
                        function (response) {
                            const brandBody = brandWiseRow.querySelector('.brandWiseBody');
                            brandBody.innerHTML = '';

                            response.forEach(function (item) {
                                const safe = (val) => (val == null || val === "null" ? 0 : val);
                                const brandRow = document.createElement('tr');
                                brandRow.classList.add('clickable-brandrow');
                                brandRow.innerHTML =
                                        '<td><b>' + safe(item.brand) + '</b></td>' +
                                        '<td>' + safe(item.lms) + '</td>' +
                                        '<td>' + safe(item.lmtd) + '</td>' +
                                        '<td>' + safe(item.mtd) + '</td>' +
                                        '<td>' + safe(item.mtdQty) + '</td>' +
                                        '<td><i class="fa fa-angle-down dropdown-icon" style="cursor:pointer; font-size: 27px;width: 27px;height: 27px;margin-top: 0px;color: rgba(255, 255, 255, 0.75);line-height: 27px;"></i></td>';
                                brandRow.addEventListener('click', function () {
                                    const brandName = item.brand;

                                    let brandItemWiseRow = brandRow.nextElementSibling;
                                    if (!brandItemWiseRow || !brandItemWiseRow.classList.contains('brand-item-wise-sale-row')) {
                                        brandItemWiseRow = document.createElement('tr');
                                        brandItemWiseRow.classList.add('brand-item-wise-sale-row');
                                        brandItemWiseRow.innerHTML = `
            <td colspan="6">
                <table class="brand-wise-table">
                    <thead>
                        <tr>
<!--                            <th>Brand</th>-->
                            <th>Model</th>
                            <th>Quantity</th>
                        </tr>
                    </thead>
                    <tbody class="brandItemWiseBody"></tbody>
                </table>
            </td>
        `;
                                        // insert right after the clicked brand row
                                        brandRow.insertAdjacentElement('afterend', brandItemWiseRow);
                                    }

                                    // toggle visibility
                                    const isHidden = brandItemWiseRow.style.display === 'none' || brandItemWiseRow.style.display === '';
                                    document.querySelectorAll('.brand-item-wise-sale-row').forEach(r => r.style.display = 'none');

                                    if (isHidden) {
                                        brandItemWiseRow.style.display = '';
                                        doGetAjaxRequestHandler(
                                                context + '/getBrandItemwisePartnerSale?month=' + monthNumber + '&brand=' + encodeURIComponent(brandName) + '&fofoId=' + encodeURIComponent(fofoId),
                                                function (response) {
                                                    const tbody = brandItemWiseRow.querySelector('.brandItemWiseBody');
                                                    tbody.innerHTML = '';
                                                    response.forEach(item => {
                                                        const tr = document.createElement('tr');
                                                        tr.innerHTML =
                                                                // '<td>' + item.brand + '</td>' +
                                                                '<td>' + item.modelNumber + '</td>' +
                                                                '<td>' + item.quantity + '</td>';
                                                        tbody.appendChild(tr);
                                                    });
                                                }
                                        );
                                    }
                                });


                                brandBody.appendChild(brandRow);
                            });
                        }
                );
            } else {
                brandWiseRow.style.display = 'none';
            }
        });
    });
</script>