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 {
        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;
    }

    /* Add striped styling for nested tables */
    .nested-table-striped tbody tr:nth-of-type(odd) {
        background-color: rgba(0, 0, 0, 0.05);
    }

    .nested-table-striped tbody tr:hover {
        background-color: rgba(0, 0, 0, 0.075);
    }
</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>
    #macro(safe $val)
        #if($val && $val != "null")
            $val
        #else
            -
        #end
    #end

    <tbody id="monthSalesBody">
        #set($start = 0)
        #set($end = 6)
        #set($range = [$start..$end])
        #foreach($i in $range)
        <tr class="clickable-row cursor-pointer" data-month="$i">
            <td><b>#safe($monthSales.get($i).getMonth())</b></td>
            <td>#safe($monthSales.get($i).getMonthlySales())</td>
            <td>#safe($monthSales.get($i).getMtdSales())</td>
            <td>#safe($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">
                <!-- Added table-striped and nested-table-striped classes -->
                <table class="table table-striped nested-table-striped brand-wise-table">
                    <thead>
                    <tr>
                        <th>Brand</th>
                        <th class="lmtdHead">LMTD</th>
                        <th class="mtdHead">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">
                <!-- Added table-striped and nested-table-striped classes -->
                <table class="table table-striped nested-table-striped brand-wise-table">
                    <thead>
                    <tr>
                        <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';
                    const brandItemRows = otherRow.parentNode.querySelectorAll('.brand-item-wise-sale-row');
                    brandItemRows.forEach(itemRow => itemRow.style.display = 'none');
                }
            });

            let minusmonth = row.getAttribute('data-month');

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

            // Toggle the brand-wise row
            if (brandWiseRow.style.display === 'none') {
                brandWiseRow.style.display = '';

                doGetAjaxRequestHandler(
                        `getBrandwisePartnerSale?month=${minusmonth}`,
                        function (response) {
                            let currentDate = new Date();
                            let selectedMonth = new Date();
                            selectedMonth.setMonth(currentDate.getMonth() - minusmonth);

                            let prevMonth = new Date();
                            prevMonth.setMonth(selectedMonth.getMonth() - 1);

                            const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

                            brandWiseRow.querySelector(".lmtdHead").innerText = "LMTD (" + monthNames[prevMonth.getMonth()] + ")";
                            brandWiseRow.querySelector(".mtdHead").innerText = "MTD (" + monthNames[selectedMonth.getMonth()] + ")";

                            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.setAttribute('data-brand', item.brand);
                                brandRow.innerHTML =
                                        '<td><b>' + safe(item.brand) + '</b></td>' +
                                        '<td>' + safe(item.lmtd) + '</td>' +
                                        '<td>' + safe(item.mtd) + '</td>' +
                                        '<td>' + safe(item.mtdQty) + '</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>';

                                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.style.display = 'none';
                                        brandItemWiseRow.innerHTML = `
                <td colspan="6">
                    <table class="table table-striped nested-table-striped brand-wise-table">
                        <thead>
                            <tr>
                                <th>Model</th>
                                <th>Quantity</th>
                            </tr>
                        </thead>
                        <tbody class="brandItemWiseBody"></tbody>
                    </table>
                </td>
            `;
                                        brandRow.insertAdjacentElement('afterend', brandItemWiseRow);
                                    }

                                    // Hide all other brand-item-wise rows
                                    const allBrandItemWiseRows = document.querySelectorAll('.brand-item-wise-sale-row');
                                    allBrandItemWiseRows.forEach(function (otherRow) {
                                        if (otherRow !== brandItemWiseRow) {
                                            otherRow.style.display = 'none';
                                        }
                                    });

                                    // Toggle current row - same logic as month rows
                                    if (brandItemWiseRow.style.display === 'none') {
                                        brandItemWiseRow.style.display = '';
                                        doGetAjaxRequestHandler(
                                                'getBrandItemwisePartnerSale?month=' + minusmonth + '&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.modelName + item.modelNumber + '</td>' +
                                                                '<td>' + safe(item.quantity) + " pcs" + '</td>';
                                                        tbody.appendChild(tr);
                                                    });
                                                }
                                        );
                                    } else {
                                        brandItemWiseRow.style.display = 'none';
                                    }
                                });

                                brandBody.appendChild(brandRow);
                            });
                        }
                );
            } else {
                brandWiseRow.style.display = 'none';
                const brandItemRows = brandWiseRow.parentNode.querySelectorAll('.brand-item-wise-sale-row');
                brandItemRows.forEach(itemRow => itemRow.style.display = 'none');
            }
        });
    });
</script>