Subversion Repositories SmartDukaan

<style>
    table th {
        text-align: center;
    }

    #rbm-arr-table td, #rbm-arr-table th {
        padding: 0.35rem;
        font-size: 20px;
    }

    .rb-name {
        font-size: 17px;
        font-weight: bold;
    }

    #rbm-arr-table td {
        text-align: center;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        color: #000; /* Ensure text remains visible */
        font-weight: 400;
    }

</style>

<section class="wrapper">
    ##    <div class="row">
    ##        <div class="col-lg-12">
    ##            <h3 class="page-header"><i class="icon_document_alt"></i>RBM ARR</h3>
    ##            <ol class="breadcrumb">
    ##                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
    ##                <li><i class="icon_document_alt"></i>RBM Wise Today's ARR (Basis Product Movement)</li>
    ##            </ol>
    ##        </div>
    ##    </div>

    <div class="row">
        ##        <div class="col-lg-4">
        ##            <table>
        ##                <tr>
        ##                    <td><input type="date" class="form-control arr-start_date" placeholder="select date"></td>
        ##                    <td><button type="button" class="btn btn-info arr-button-mk">Submit</button></td>
        ##                </tr>
        ##            </table>
        ##        </div>
        ##        <div class="clearfix"></div>
        ##        <br>
        <div class="col-lg-12">
            <table id="rbm-arr-table" class="table table-border table-condensed table-bordered" style="width:100%">
                <thead>
                <tr>
                    <th>RBM</th>
                    <th>Total (ACH/TGT)</th>
                    <th>%</th>
                    <th>HID (ACH/TGT)</th>
                    <th>%</th>
                    <th>RUN (ACH/TGT)</th>
                    <th>%</th>
                    <th>SLOW (ACH/TGT)</th>
                    <th>%</th>
                    <th>EOL (ACH/TGT)</th>
                    <th>%</th>
                    <th>Other (ACH/TGT)</th>
                    <th>%</th>
                </tr>
                </thead>
                <tbody>
                    #foreach($target in $rbmArrViewModels)
                    <tr>
                        <td>$target.getRbmName()- $target.getWarehouseName()</td>
                        <td><span class="achieved-cell">$target.getTotalAchievedTarget()</span> / <span
                                class="target-cell">$target.getTodayTarget()</span></td>
                        <td class="total-percent"></td>
                        <td><span class="achieved-cell">$target.getTodayAchievedHidTarget()</span> / <span
                                class="target-cell">$target.getTodayHidTarget()</span></td>
                        <td class="hid-percent"></td>
                        <td><span class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</span> / <span
                                class="target-cell">$target.getTodayFastMovingTarget()</span></td>
                        <td class="run-percent"></td>
                        <td><span class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</span> / <span
                                class="target-cell">$target.getTodaySlowMovingTarget()</span></td>
                        <td class="slow-percent"></td>
                        <td><span class="achieved-cell">$target.getTodayAchievedEolTarget()</span> / <span
                                class="target-cell">$target.getTodayEolTarget()</span></td>
                        <td class="eol-percent"></td>
                        <td><span class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</span> / <span
                                class="target-cell">$target.getTodayOtherMovingTarget()</span></td>
                        <td class="other-percent"></td>
                    </tr>
                    #end
                </tbody>
            </table>
        </div>
    </div>
</section>

<script>
    function formatValueInLakh(value) {
        return (value / 100000).toFixed(1) + 'L';
    }

    function formatTargets() {
        const rows = document.querySelectorAll('#rbm-arr-table tbody tr');

        rows.forEach(row => {
            const cells = row.querySelectorAll('td');

            cells.forEach(cell => {
                const achievedSpan = cell.querySelector('.achieved-cell');
                const targetSpan = cell.querySelector('.target-cell');

                if (achievedSpan && targetSpan) {
                    const achievedValue = parseFloat(achievedSpan.textContent.replace(/[^\d.-]/g, ''));
                    const targetValue = parseFloat(targetSpan.textContent.replace(/[^\d.-]/g, ''));

                    // Format values in lakh
                    if (!isNaN(achievedValue)) achievedSpan.textContent = formatValueInLakh(achievedValue);
                    if (!isNaN(targetValue)) targetSpan.textContent = formatValueInLakh(targetValue);

                    const percentCell = cell.nextElementSibling;
                    if (percentCell && targetValue > 0) {
                        const percentage = ((achievedValue / targetValue) * 100).toFixed(1);
                        percentCell.textContent = percentage + '%';

                        // Determine background color based on percentage
                        let color;
                        if (percentage <= 40) {
                            color = '#F56983FF'; // Orange for <= 40%
                        } else if (percentage > 40 && percentage <= 75) {
                            color = '#f2c947e8'; // Yellow for 41% - 75%
                        } else {
                            color = '#82ef8299'; // Green for > 75%
                        }

                        // Apply gradient background with the color
                        percentCell.style.background = `linear-gradient(to right, ${color} ${percentage}%, transparent ${percentage}%)`;
                    } else if (percentCell) {
                        percentCell.textContent = 'N/A';
                        percentCell.style.background = 'none';
                    }
                }
            });
        });
    }

    window.onload = formatTargets;
</script>