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;

    }

</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 style="margin-right: 10px;"><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="col-lg-8"></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 rowspan="2" class="text-left">RBM</th>

                    <th colspan="2" class="text-center">HID</th>

                    <th colspan="2">RUN</th>

                    <th colspan="2">SLOW</th>

                    <th colspan="2">EOL</th>

                    <th colspan="2">Other</th>

                    <th colspan="2">Total</th>

                </tr>

                <tr>

                    <th>TGT</th>

                    <th>ACH</th>

                    <th>TGT</th>

                    <th>ACH</th>

                    <th>TGT</th>

                    <th>ACH</th>

                    <th>TGT</th>

                    <th>ACH</th>

                    <th>TGT</th>

                    <th>ACH</th>

                    <th>TGT</th>

                    <th>ACH</th>

                </tr>

                </thead>

                #foreach($target in $rbmArrViewModels)

                    <tbody>

                    <tr>

                        <td class="rb-name">$target.getRbmName()- $target.getWarehouseName()</td>

                        <td class="target-cell">$target.getTodayHidTarget()</td>

                        <td class="achieved-cell">$target.getTodayAchievedHidTarget()</td>

                        <td class="target-cell">$target.getTodayFastMovingTarget()</td>

                        <td class="achieved-cell">$target.getTodayAchievedFastMovingTarget()</td>

                        <td class="target-cell">$target.getTodaySlowMovingTarget()</td>

                        <td class="achieved-cell">$target.getTodayAchievedSlowMovingTarget()</td>

                        <td class="target-cell">$target.getTodayEolTarget()</td>

                        <td class="achieved-cell">$target.getTodayAchievedEolTarget()</td>

                        <td class="target-cell">$target.getTodayOtherMovingTarget()</td>

                        <td class="achieved-cell">$target.getTodayAchievedOtherMovingTarget()</td>

                        <td class="target-cell">$target.getTodayTarget()</td>

                        <td class="achieved-cell">$target.getTotalAchievedTarget()</td>

                    </tr>

                    </tbody>

                #end

            </table>

        </div>

    </div>

</section>

<script>

    // Function to format the numbers with appropriate abbreviations

    function formatValue(value) {

        if (value >= 10000000) {  // 1 Crore and above

            return (value / 10000000).toFixed(1) + 'Cr'; // 1 Cr = 10,000,000

        } else if (value >= 100000) {  // 1 Lakh and above

            return (value / 100000).toFixed(1) + 'L'; // 1 Lakh = 100,000

        } else if (value >= 1000) {  // 1 Thousand and above

            return (value / 1000).toFixed(1) + 'K'; // 1K = 1,000

        } else {

            return value.toFixed(1); // Show decimals for values below 1000

        }

    }

    // Function to format all target and achieved values in the table and apply color conditionally

    function formatTargets() {

        // Select all rows to compare target and achieved cells

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

        rows.forEach(row => {

            // Get all target and achieved cells in the current row

            const targetCells = row.querySelectorAll('.target-cell');

            const achievedCells = row.querySelectorAll('.achieved-cell');

            targetCells.forEach((targetCell, index) => {

                // Convert text content to numeric values

                let targetValue = parseFloat(targetCell.textContent.replace(/[^\d.-]/g, ''));

                let achievedValue = parseFloat(achievedCells[index].textContent.replace(/[^\d.-]/g, ''));

                // Format both cells with the abbreviated units

                if (!isNaN(targetValue)) targetCell.textContent = formatValue(targetValue);

                if (!isNaN(achievedValue)) achievedCells[index].textContent = formatValue(achievedValue);

                // Apply green background if achieved value is greater than or equal to target

                if (!isNaN(targetValue) && !isNaN(achievedValue) && achievedValue >= targetValue) {

                    achievedCells[index].style.backgroundColor = '#abf2abd4';

                }

            });

        });

    }

    // Run the function when the page loads or after data is dynamically added to the table

    window.onload = formatTargets;  // Call when the page is loaded

</script>