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>

    <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">

                <!-- 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>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">

                <!-- 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 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;

            }

            // Toggle the brand-wise row

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

                brandWiseRow.style.display = '';

                doGetAjaxRequestHandler(

                        `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.setAttribute('data-brand', item.brand);

                                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 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=' + 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.modelName + item.modelNumber + '</td>' +

                                                                '<td>' + 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>