Subversion Repositories SmartDukaan

<html lang="en">

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"

          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <style>

        html, body {

            margin-top: 10px;

            padding: 0;

        }

        td, th {

            font-size: 20px;

        }

        .table td, .table th {

            padding: 0.25rem;

        }

        tr:first-child.green td {

            font-weight: bold;

            background-color: #00d6b2;

        }

        td {

            font-size: 24px;

        }

    </style>

    <link href="../resources/css/brand-logo.css" rel="stylesheet"/>

</head>

<body>

    #if($isGtEqL2)

        #parse("rbm-today-arr.vm")

    <br>

    <div class="container-fluid mb-3">

        <select id="categoryDropdown" class="form-control mb-3"

                style="width:200px; display:inline-block;margin-right: 10px;">

            <option value="RBM">All RBMs</option>

            <option value="NSM">All NSMs</option>

            <option value="RSM">All RSMs</option>

            <option value="BM">All BMs</option>

            <option value="DM">All DMs</option>

            <option value="CM">All CMs</option>

            <option value="ASM">All ASMs</option>

        </select>

        <button class="partnerwise-billed-po btn btn-info btn-sm">Today PO and Billed (Partner

            wise)

        </button>

        <div class="purchaseMilestoneContainer">

            <!-- Initial table load -->

            #parse("today_po_table_fragment.vm")

        </div>

    </div>

    <div class="container-fluid ">

    <h3>Total Collection(Overall Collection/Limit Utilization))</h3>

    <div class="row">

        #foreach($warehouseEntry in $warehouseMap.entrySet())

            <div class="col-lg-2" style="font-size: 20px">

                $warehouseEntry.getValue() -

                #if($warehouseCollectionMap.get($warehouseEntry.getKey()))

                    <span class="currency">$warehouseCollectionMap.get($warehouseEntry.getKey())</span>

                #else

                #end

                /

                #if($warehousePgCollectionMap.get($warehouseEntry.getKey()))

                    <span class="currency">$warehousePgCollectionMap.get($warehouseEntry.getKey())</span>

                #else

                #end

            </div>

        #end

    </div>

</div>

        ##    #parse("today_target.vm")

        ## ============ RBM Performance Dashboard ============

        #if($performanceDashboard && !$performanceDashboard.isEmpty())

        <style>

            #performance-dashboard-table th {

                font-size: 13px;

                text-align: center;

                padding: 0.4rem;

                vertical-align: middle;

            }

            #performance-dashboard-table td {

                font-size: 13px;

                text-align: center;

                padding: 0.2rem;

                vertical-align: middle;

            }

        </style>

        <div class="container-fluid mb-3">

            <h3 class="mb-2">RBM Performance Dashboard (MTD)</h3>

            <div class="table-responsive">

                <table class="table table-bordered table-striped" id="performance-dashboard-table"

                       style="font-size: 13px;">

                    <thead>

                    <tr style="background-color: rgb(52,58,64); color: white; text-align: center;">

                        <th style="width: 40px;">Rank</th>

                        <th>RBM Name</th>

                        <th style="width: 80px;">Partners</th>

                        <th style="background-color: rgb(40,167,69); color: white;">Talk Time<br><small>(10%)</small>

                        </th>

                        <th style="background-color: rgb(23,162,184); color: white;">MTD

                            Achievement<br><small>(55%)</small>

                        </th>

                        <th style="background-color: rgb(253,126,20); color: white;">15 Days

                            Ageing<br><small>(2%)</small></th>

                        <th style="background-color: rgb(111,66,193); color: white;">&gt;1L

                            Partners<br><small>(29%)</small></th>

                        <th style="background-color: rgb(255,193,7); color: black;">Avg

                            Rating<br><small>(2%)</small></th>

                        <th style="background-color: rgb(230,126,34); color: white;">Partners

                            Rated<br><small>(2%)</small></th>

                        <th style="background-color: rgb(220,53,69); color: white; width: 80px;">Score</th>

                    </tr>

                    </thead>

                    <tbody>

                        #foreach($dm in $performanceDashboard)

                            #if($dm.getRank() == 1)

                                #set($rowStyle = "text-align:center; background-color: rgb(255,248,225);")

                                #set($scoreColor = "color: rgb(40,167,69);")

                            #elseif($dm.getRank() == 2)

                                #set($rowStyle = "text-align:center; background-color: rgb(245,245,245);")

                                #set($scoreColor = "color: rgb(23,162,184);")

                            #elseif($dm.getRank() == 3)

                                #set($rowStyle = "text-align:center; background-color: rgb(255,243,224);")

                                #set($scoreColor = "color: rgb(23,162,184);")

                            #else

                                #set($rowStyle = "text-align:center;")

                                #set($scoreColor = "color: rgb(51,51,51);")

                            #end

                        <tr style="$rowStyle">

                            <td>

                                #if($dm.getRank() == 1)

                                    <img src="../../../resources/images/king.png" style="width: 28px;" title="Rank 1">

                                #elseif($dm.getRank() == 2)

                                    <img src="../../../resources/images/trophy-cup.png" style="width: 24px;"

                                         title="Rank 2">

                                #elseif($dm.getRank() == 3)

                                    <img src="../../../resources/images/bronze-medal.png" style="width: 24px;"

                                         title="Rank 3">

                                #else

                                    $dm.getRank()

                                #end

                            </td>

                            <td style="text-align: left;">$dm.getRbmName()</td>

                            <td>$dm.getPartnerCount()</td>

                            <td>$dm.getTalkTimeDisplay()</td>

                            <td>$dm.getDrrAchvDisplay()</td>

                            <td>$dm.getAgingDisplay()</td>

                            <td>$dm.getAbove1LDisplay()</td>

                            <td>$dm.getAvgRatingDisplay()</td>

                            <td>$dm.getPartnersRatedDisplay()</td>

                            <td style="font-size: 14px; $scoreColor">

                                $dm.getScoreDisplay()

                            </td>

                        </tr>

                        #end

                    </tbody>

                </table>

            </div>

        </div>

        #end

        ## ============ End RBM Performance Dashboard ============

    <div id="rbm-call-target-container">

        #parse("rbm_call_target.vm")

    </div>

#end

<!-- Modal for Out of Sequence Details -->

<div class="modal fade" id="oosModal" tabindex="-1" role="dialog" aria-labelledby="oosModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="oosModalLabel">Out of Sequence Calls</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <div id="oosDetailsContent">

                    <p>Loading...</p>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

<!-- Modal for Called Partner Details -->

<div class="modal fade" id="calledModal" tabindex="-1" role="dialog" aria-labelledby="calledModalLabel"

     aria-hidden="true">

    <div class="modal-dialog modal-lg" role="document" style="max-width:max-content;">

        <div class="modal-content">

            <div class="modal-header">

                <h5 class="modal-title" id="calledModalLabel">Called Partners</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                    <span aria-hidden="true">&times;</span>

                </button>

            </div>

            <div class="modal-body">

                <div id="calledDetailsContent">

                    <p>Loading...</p>

                </div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"

        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"

        crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"

        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"

        crossorigin="anonymous"></script>

<script type="text/javascript">

    function numberToComma(x) {

        x = x.toString();

        x = x.split('.');

        var x1 = x[0];

        var x2 = x.length > 1 && x[1] != '0' ? '.' + x[1] : '';

        var lastThree = x1.substring(x1.length - 3);

        var otherNumbers = x1.substring(0, x1.length - 3);

        if (x1.charAt(x1.length - 4) == ',' || x1.charAt(x1.length - 4) == '-') {

            console.log(lastThree)

        } else {

            if (otherNumbers != '')

                lastThree = ',' + lastThree;

        }

        return otherNumbers.replace(/\B(?=(\d{2})+(?!\d))/g, ",") + (lastThree)

                + x2;

    }

    $(document).ready(function () {

        $('.currency').each(function (index, ele) {

            if (!isNaN(parseInt($(ele).html()))) {

                $(ele).html(numberToComma($(ele).html()));

            }

        });

    })

</script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

<script>

    // Initialize the date range picker

    $('input[name="rbmArrPeriod"]').daterangepicker({

        autoUpdateInput: false, // Prevent auto-filling the input with dates

        locale: {

            cancelLabel: 'Clear'

        }

    });

    // Update the input field when dates are selected

    $('input[name="rbmArrPeriod"]').on('apply.daterangepicker', function (ev, picker) {

        $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));

    });

    // Clear the input field when the user cancels

    $('input[name="rbmArrPeriod"]').on('cancel.daterangepicker', function (ev, picker) {

        $(this).val('');

    });

    // Function to get the dates from the picker

    function getDatesFromPicker(selector) {

        const pickerElement = $(selector).data('daterangepicker');

        if (!pickerElement) {

            console.error('Date Range Picker is not initialized.');

            return {startDate: null, endDate: null};

        }

        return {

            startDate: pickerElement.startDate.format('YYYY-MM-DD'),

            endDate: pickerElement.endDate.format('YYYY-MM-DD')

        };

    }

    // Button click event

    $(document).on('click', '.sold-catalog-report', function () {

        const dates = getDatesFromPicker('input[name="rbmArrPeriod"]');

        const startDate = dates.startDate;

        const endDate = dates.endDate;

        if (!startDate || !endDate) {

            alert("Start date and end date cannot be empty!!");

            return;

        }

        let endPoint = `/downloadSoldCatalogReport?startDate=${startDate}&endDate=${endDate}`;

        window.open(endPoint, '_blank');

        ;

    });

    // Button click event

    $(document).on('click', '.partnerwise-billed-po', function () {

        let endPoint = `/downloadModelBrandWisePo`;

        window.open(endPoint, '_blank');

        ;

    });

    // Button click event

    $(document).on('click', '.rbm-target-achievement', function () {

        const dates = getDatesFromPicker('input[name="rbmArrPeriod"]');

        const startDate = dates.startDate;

        const endDate = dates.endDate;

        if (!startDate || !endDate) {

            alert("Start date and end date cannot be empty!!");

            return;

        }

        let endPoint = `/getDateWiseRabmTargetAndAchievements?startDate=${startDate}&endDate=${endDate}`;

        window.open(endPoint, '_blank');

        ;

    });

    // Open the standalone DRR dashboard; forwards the picked date range if the L3-only

    // picker is present, otherwise the dashboard defaults to today.

    $(document).on('click', '.rbm-drr-dashboard', function () {

        let qs = '';

        const picker = $('input[name="rbmArrPeriod"]');

        if (picker.length && picker.data('daterangepicker')) {

            const dates = getDatesFromPicker('input[name="rbmArrPeriod"]');

            if (dates.startDate && dates.endDate) {

                qs = `?startDate=${dates.startDate}&endDate=${dates.endDate}`;

            }

        }

        window.open(`/rbm-drr${qs}`, '_blank');

    });

</script>

<script>

    function refreshTodayPOTable() {

        var selectedCategory = $('#categoryDropdown').val();

        $.ajax({

            url: "/indent/today_po_table_fragment",

            type: "GET",

            data: {categoryType: selectedCategory},

            success: function (response) {

                $('.purchaseMilestoneContainer').fadeOut(200, function () {

                    $(this).html(response).fadeIn(200);

                });

            },

            error: function (xhr, status, error) {

                console.error("Error loading table: " + error);

                alert("Failed to load table data. Please try again.");

            }

        });

    }

    // Refresh table when dropdown changes

    $('#categoryDropdown').on('change', refreshTodayPOTable);

    // Optional: load default table on page load

    $(document).ready(function () {

        refreshTodayPOTable();

    });

</script>

<script>

    // Smart page refresh - pauses when modal is open or audio is playing

    (function () {

        var REFRESH_INTERVAL = 360000; // 360 seconds = 6 minutes

        function isAnyModalOpen() {

            // Check if any Bootstrap modal is currently shown

            return $('.modal.show').length > 0 || $('.modal.in').length > 0;

        }

        function isAnyAudioPlaying() {

            // Check if any audio element is currently playing

            var audioElements = document.querySelectorAll('audio');

            for (var i = 0; i < audioElements.length; i++) {

                if (!audioElements[i].paused) {

                    return true;

                }

            }

            return false;

        }

        function canRefresh() {

            return !isAnyModalOpen() && !isAnyAudioPlaying();

        }

        function smartRefresh() {

            if (canRefresh()) {

                location.reload();

            }

            // If can't refresh now, check again in 10 seconds

            // This ensures refresh happens soon after modal closes or audio stops

        }

        // Set up the refresh interval

        setInterval(function () {

            if (canRefresh()) {

                location.reload();

            }

        }, REFRESH_INTERVAL);

    })();

</script>

</body>

</html>