Subversion Repositories SmartDukaan

Rev

Rev 36112 | Rev 36123 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
    #rbm-call-target-table th, #breakTimeDetailsContent th {
        font-size: 13px;
        text-align: center;
        padding: 0.4rem;
        vertical-align: middle;
    }

    #rbm-call-target-table td, #breakTimeDetailsContent td {
        font-size: 13px;
        text-align: center;
        padding: 0.2rem;
        vertical-align: middle;
    }

    .badge {
        display: inline-block;
        padding: 4px 8px;
        font-size: 12px;
        font-weight: 600;
        border-radius: 4px;
    }

    .agent-status-cell, .time-in-status-cell {
        min-width: 80px;
    }

    #rbm-call-target-table thead th {
        background-color: #343a40;
        color: white;
        font-weight: 600;
    }

    #rbm-call-target-table tbody tr:first-child td {
        font-weight: bold;
        background-color: #00d6b2;
    }

    .highlight-target {
        background-color: #fff3cd !important;
        font-weight: bold;
    }

    .highlight-achieved {
        background-color: #d4edda !important;
    }

    .highlight-oos {
        background-color: #f8d7da !important;
    }

    .highlight-plan-today {
        background-color: #0f57a4 !important;
        color: white !important;
    }

    .highlight-carry-forward {
        background-color: #ffc107 !important;
        color: #000 !important;
    }

    .highlight-untouched {
        background-color: #dc3545 !important;
        color: white !important;
    }

    .highlight-future-plan {
        background-color: #6c757d !important;
        color: #000 !important;
    }

    .clickable {
        cursor: pointer;
        text-decoration: underline;
        color: #007bff;
    }

    .clickable:hover {
        color: #0056b3;
    }

    .modal-body table {
        width: 100%;
    }

    .modal-body table th, .modal-body table td {
        padding: 8px;
        border: 1px solid #ddd;
    }

    #oosDetailsContent table td, #oosDetailsContent table th {
        font-size: 12px;
    }

    #calledDetailsContent table td, #calledDetailsContent table th {
        font-size: 12px;
    }
</style>

<div class="container-fluid">
    <h3>RBM Call Target Summary</h3>
    <div class="row">
        <div class="col-md-7">
            <!-- Date-wise Called Partner Filter -->
            <div class="card mb-3" style="max-width: 500px;">
                <div class="card-body py-2">
                    <div class="d-flex align-items-center">
                        <label for="historyDate" class="mb-0 mr-2"
                               style="font-size: 14px; white-space: nowrap;">Date:</label>
                        <input type="date" id="historyDate" class="form-control form-control-sm mr-2"
                               style="width: 140px;">
                        <label for="historyRbm" class="mb-0 mr-2"
                               style="font-size: 14px; white-space: nowrap;">RBM:</label>
                        <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
                            <option value="">Select RBM</option>
                            #foreach($model in $rbmCallTargetModels)
                                <option value="$model.getAuthId()">$model.getRbmName()</option>
                            #end
                        </select>
                        <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">
                            View
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-5">
            <!-- Download All Call Data by Date -->
            <div class="card mb-3" style="max-width: 450px;">
                <div class="card-body py-2">
                    <div class="d-flex align-items-center">
                        <label for="downloadDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Download
                            Call Data:</label>
                        <input type="date" id="downloadDate" class="form-control form-control-sm mr-2"
                               style="width: 140px;">
                        <button type="button" class="btn btn-success btn-sm" onclick="downloadCallData()">Download CSV
                        </button>
                    </div>
                </div>
            </div>

        </div>
    </div>


    <table id="rbm-call-target-table" class="table table-bordered table-striped">
        <thead>
        <tr>
            <th colspan="2">RBM Name</th>
            <th style="background-color: #ffc107; color: black;">Rating</th>
            <th style="background-color: #17a2b8; color: white;">Agent Status</th>
            <th style="background-color: #17a2b8; color: white;">Time in Status</th>
            <th>Partner Count</th>
            <th>(Ach/Tgt)</th>
            <th>Calling Target</th>
            <th>Called</th>
            <th class="highlight-plan-today">Plan Today</th>
            <th class="highlight-carry-forward">Carry Forward</th>
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
            <th class="highlight-untouched">Untouched</th>
            <th class="highlight-future-plan">Future Plan</th>
            <th>Normal</th>
            <th style="background-color: #c0392b;">Out of Sequence</th>
            <th>Download</th>
        </tr>
        </thead>
        <tbody>
            #set($totalPartnerCount = 0)
            #set($totalTodayTarget = 0)
            #set($totalValueAchieved = 0)
            #set($totalMovedToFuture = 0)
            #set($totalPlanToday = 0)
            #set($totalCarryForward = 0)
            #set($totalZeroBilling = 0)
            #set($totalUntouched = 0)
            #set($totalFuturePlan = 0)
            #set($totalNormal = 0)
            #set($totalOutOfSequence = 0)
            #set($totalL2CallingList = 0)
            #set($totalArrAchieved = 0)
            #set($totalArrTarget = 0)

            ## Total row first
            #foreach($model in $rbmCallTargetModels)
                #if(!$model.isL2Position())
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
                #end
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
                #set($totalNormal = $totalNormal + $model.getNormal())
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
                #end
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
                #end
            #end

            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)

        <tr>
            <td colspan="2"><strong>TOTAL</strong></td>
            <td>-</td>
            <td>-</td>
            <td>-</td>
            <td><strong>$totalPartnerCount</strong></td>
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
            </td>
            <td class="highlight-target"><strong>$adjustedTotalTarget</strong></td>
            <td class="highlight-achieved currency"><strong>$adjustedTotalAchieved</strong></td>
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
            <td><strong>$totalZeroBilling</strong></td>
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
            <td><strong>$totalNormal</strong></td>
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
            <td></td>
        </tr>

            #foreach($model in $rbmCallTargetModels)
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
                #set($agentStatus = $agentStatusByAuthId.get($model.getAuthId()))
            <tr>
                <td>
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
                    #if($rank == 1)
                        <img src="../../../resources/images/king.png" style="width: 35px;">
                    #elseif($rank == 2)
                        <img src="../../../resources/images/trophy-cup.png" style="width: 35px;">
                    #elseif($rank == 3)
                        <img src="../../../resources/images/bronze-medal.png" style="width: 35px;">
                    #elseif($rank == 4)
                        <img src="../../../resources/images/star-badge.png" style="width: 35px;">
                    #elseif($rank && $rank > 4)
                        <img src="../../../resources/images/clock.png" style="width: 35px;">
                    #else
                        <img src="../../../resources/images/clock.png" style="width: 35px;">
                    #end
                </td>
                <td>$model.getRbmName()</td>
                <td>
                    #set($ratingData = $rbmNameToRatingMap.get($model.getRbmName()))
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
                    #if($ratingData && $ratingData.getRating())
                        #set($rating = $ratingData.getRating())
                        <div style="line-height: 1.2;">
                            #if($rating && $rating > 0 && $rating <= 1)
                                <b style="color: goldenrod; font-size: 12px;">&#9733;</b>
                            #elseif($rating && $rating > 1 && $rating <= 2)
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;</b>
                            #elseif($rating && $rating > 2 && $rating <= 3)
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;</b>
                            #elseif($rating && $rating > 3 && $rating <= 4)
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;</b>
                            #elseif($rating && $rating > 4 && $rating <= 5)
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;&#9733;</b>
                            #end
                            <br>
                            <span style="font-size: 10px; color: #555;">#$rank | $ratingData.getPartnerCount() rated</span>
                        </div>
                    #else
                        -
                    #end
                </td>
                <td class="agent-status-cell" data-authid="$model.getAuthId()">
                    #if($agentStatus && $agentStatus.getAgentStatus())
                        #if($agentStatus.getAgentStatus() == "On Call")
                            <span class="badge" style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
                        #elseif($agentStatus.getAgentStatus() == "Available")
                            <span class="badge"
                                  style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
                        #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
                            <span class="badge"
                                  style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
                        #elseif($agentStatus.getAgentStatus() == "Logged Out")
                            <span class="badge"
                                  style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
                        #elseif($agentStatus.getAgentStatus() == "Trying")
                            <span class="badge"
                                  style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
                        #else
                            <span class="badge" style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
                        #end
                    #else
                        <span class="badge" style="background-color: #6c757d; color: white;">-</span>
                    #end
                </td>
                <td class="time-in-status-cell" data-authid="$model.getAuthId()">
                    #if($agentStatus && $agentStatus.getTimeInStatus())
                        $agentStatus.getTimeInStatus()
                    #else
                        -
                    #end
                </td>
                <td>$model.getPartnerCount()</td>
                <td>
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
                    #else
                        0
                    #end
                    /
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
                    #else
                        0
                    #end
                </td>
                <td class="highlight-target">$rowTarget</td>
                <td class="highlight-achieved currency">
                    <span class="clickable"
                          onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">$rowAchieved</span>
                </td>
                <td class="highlight-plan-today">$model.getPlanToday()</td>
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
                <td>$model.getZeroBilling()</td>
                <td class="highlight-untouched">$model.getUntouched()</td>
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
                <td>$model.getNormal()</td>
                <td class="highlight-oos" style="color: red;">
                    #if($model.getOutOfSequenceCount() > 0)
                        <span class="clickable" style="color: #e80404"
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
                    #else
                        0
                    #end
                </td>
                <td>
                    <a href="/indent/rbm_call_target/download_raw_data?authId=$model.getAuthId()" target="_blank"
                       class="btn btn-sm btn-outline-success">CSV</a>
                </td>
            </tr>
            #end
        </tbody>
    </table>
</div>

<!-- Modal for Called Partner Details with Tabs -->
<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: 90%;">
        <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">
                <!-- Tabs Navigation -->
                <ul class="nav nav-tabs" id="calledModalTabs" role="tablist">
                    <li class="nav-item">
                        <a class="nav-link active" id="called-tab" data-toggle="tab" href="#calledTabContent"
                           role="tab">
                            Called Partners
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" id="break-time-tab" data-toggle="tab" href="#breakTimeTabContent"
                           role="tab">
                            Break Time
                        </a>
                    </li>
                </ul>
                <!-- Tabs Content -->
                <div class="tab-content mt-3" id="calledModalTabContent">
                    <div class="tab-pane fade show active" id="calledTabContent" role="tabpanel">
                        <div id="calledDetailsContent">
                            <p>Loading...</p>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="breakTimeTabContent" role="tabpanel">
                        <div id="breakTimeDetailsContent">
                            <p>Click on Break Time tab to load data.</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

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

<script type="text/javascript">
    // Store current authId and agentName for break time loading
    var currentModalAuthId = null;
    var currentModalDate = null;
    var currentModalAgentName = null;

    document.addEventListener('DOMContentLoaded', function () {
        var elems = document.querySelectorAll('.lakh');
        for (var i = 0; i < elems.length; i++) {
            var val = parseInt(elems[i].textContent.trim());
            if (!isNaN(val)) {
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
            }
        }
    });

    function showOutOfSequenceDetails(authId, rbmName) {
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
        $('#oosModal').modal('show');

        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    if (data && data.length > 0) {
                        var html = '<table class="table table-bordered table-sm"><thead><tr><th>S.No</th><th>Party Name</th><th>Code</th><th>Time</th></tr></thead><tbody>';
                        for (var i = 0; i < data.length; i++) {
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
                        }
                        html += '</tbody></table>';
                        document.getElementById('oosDetailsContent').innerHTML = html;
                    } else {
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
                    }
                })
                .catch(function () {
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
                });
    }

    function showCalledPartnerDetails(authId, rbmName) {
        // Store authId and agentName for break time tab
        currentModalAuthId = authId;
        currentModalDate = null;
        currentModalAgentName = rbmName;

        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName;
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';

        // Reset to Called tab
        $('#called-tab').tab('show');

        $('#calledModal').modal('show');

        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName))
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    if (data && data.length > 0) {
                        var html = '<table class="table table-bordered table-sm"><thead><tr><th>S.No</th><th style="width: 200px;">Party Name</th><th>Code</th><th style="width: 350px;">Remark</th><th>Call Status</th><th>Call Duration</th><th>Call Date/Time</th><th>Recording</th></tr></thead><tbody>';
                        for (var i = 0; i < data.length; i++) {
                            var rowStyle = '';
                            var recordingHtml = '-';

                            // Check if this is a break log entry
                            if (data[i].breakLog) {
                                var status = (data[i].breakStatus || '').toLowerCase();
                                if (status.indexOf('available') >= 0) {
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
                                } else if (status.indexOf('trying') >= 0) {
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
                                } else if (status.indexOf('break') >= 0) {
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
                                } else {
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
                                }
                                var timeRange = data[i].callDateTime || '-';
                                if (data[i].breakEndTime) {
                                    // Extract just the time part from callDateTime and show range
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
                                }
                                html += '<tr ' + rowStyle + '><td>' + (i + 1) + '</td><td colspan="4"><i class="fa fa-coffee"></i> ' + (data[i].breakStatus || 'On Break') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + timeRange + '</td><td>-</td></tr>';
                            } else {
                                if (data[i].recordingUrl) {
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
                                }
                                html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].remark + '- &nbsp;' + (data[i].message || '-') + '</td><td>' + (data[i].callStatus || '-') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + (data[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
                            }
                        }
                        html += '</tbody></table>';
                        document.getElementById('calledDetailsContent').innerHTML = html;
                    } else {
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
                    }
                })
                .catch(function () {
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
                });
    }

    // Load break time data when tab is clicked
    document.addEventListener('DOMContentLoaded', function () {
        var breakTimeTab = document.getElementById('break-time-tab');
        if (breakTimeTab) {
            breakTimeTab.addEventListener('shown.bs.tab', loadBreakTimeData);
            breakTimeTab.addEventListener('click', function () {
                // For Bootstrap 4 compatibility
                setTimeout(loadBreakTimeData, 100);
            });
        }
    });

    function loadBreakTimeData() {
        if (!currentModalAuthId) {
            return;
        }

        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Loading break time data...</p>';

        var url = '/indent/rbm_call_target/break_time_details?authId=' + currentModalAuthId;
        if (currentModalDate) {
            url += '&date=' + currentModalDate;
        }
        if (currentModalAgentName) {
            url += '&agentName=' + encodeURIComponent(currentModalAgentName);
        }

        fetch(url)
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    var html = '';

                    // 4 Summary boxes in a row
                    html += '<div class="row">';

                    // Available Box - Green
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
                    html += '<div class="card text-white bg-success">';
                    html += '<div class="card-body text-center">';
                    html += '<h5 class="card-title">Available</h5>';
                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
                    html += '<small>(' + (data.availableCount || 0) + ' times)</small>';
                    html += '</div></div></div>';

                    // Trying Box - Yellow
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
                    html += '<div class="card text-dark bg-warning">';
                    html += '<div class="card-body text-center">';
                    html += '<h5 class="card-title">Trying</h5>';
                    html += '<h3 class="mb-0">' + (data.totalTryingTime || '0h 0m 0s') + '</h3>';
                    html += '<small>(' + (data.tryingCount || 0) + ' times)</small>';
                    html += '</div></div></div>';

                    // Logged Out Box - Red/Grey
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
                    html += '<div class="card text-white bg-secondary">';
                    html += '<div class="card-body text-center">';
                    html += '<h5 class="card-title">Logged Out</h5>';
                    html += '<h3 class="mb-0">' + (data.totalLoggedOutTime || '0h 0m 0s') + '</h3>';
                    html += '<small>(' + (data.loggedOutCount || 0) + ' times)</small>';
                    html += '</div></div></div>';

                    // Break Box - Orange
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
                    html += '<div class="card text-dark" style="background-color: #fd7e14;">';
                    html += '<div class="card-body text-center">';
                    html += '<h5 class="card-title">Break</h5>';
                    html += '<h3 class="mb-0">' + (data.totalBreakTime || '0h 0m 0s') + '</h3>';
                    html += '<small>(' + (data.breakCount || 0) + ' times)</small>';
                    html += '</div></div></div>';

                    html += '</div>';

                    // Check if no data
                    if ((data.totalAvailableSeconds || 0) + (data.totalTryingSeconds || 0) +
                            (data.totalLoggedOutSeconds || 0) + (data.totalBreakSeconds || 0) === 0) {
                        html += '<p class="text-muted text-center mt-3">No break time data available for this date.</p>';
                    }

                    document.getElementById('breakTimeDetailsContent').innerHTML = html;
                })
                .catch(function (err) {
                    console.error('Error loading break time:', err);
                    document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Error loading break time data. Please try again.</p>';
                });
    }

    // Date-wise Called Partner History
    function showHistoryCalledPartners() {
        var selectedDate = document.getElementById('historyDate').value;
        var selectedRbm = document.getElementById('historyRbm');
        var authId = selectedRbm.value;
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;

        if (!selectedDate) {
            alert('Please select a date');
            return;
        }
        if (!authId) {
            alert('Please select an RBM');
            return;
        }

        // Store authId, date and agentName for break time tab
        currentModalAuthId = authId;
        currentModalDate = selectedDate;
        currentModalAgentName = rbmName;

        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName + ' (' + selectedDate + ')';
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';

        // Reset to Called tab
        $('#called-tab').tab('show');

        $('#calledModal').modal('show');

        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate + '&agentName=' + encodeURIComponent(rbmName))
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    if (data && data.length > 0) {
                        var html = '<table class="table table-bordered table-sm"><thead><tr><th>S.No</th><th style="width: 200px;">Party Name</th><th>Code</th><th style="width: 350px;">Remark</th><th>Call Status</th><th>Call Duration</th><th>Call Date/Time</th><th>Recording</th></tr></thead><tbody>';
                        for (var i = 0; i < data.length; i++) {
                            var rowStyle = '';
                            var recordingHtml = '-';

                            // Check if this is a break log entry
                            if (data[i].breakLog) {
                                var status = (data[i].breakStatus || '').toLowerCase();
                                if (status.indexOf('available') >= 0) {
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
                                } else if (status.indexOf('trying') >= 0) {
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
                                } else if (status.indexOf('break') >= 0) {
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
                                } else {
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
                                }
                                var timeRange = data[i].callDateTime || '-';
                                if (data[i].breakEndTime) {
                                    // Extract just the time part from callDateTime and show range
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
                                }
                                html += '<tr ' + rowStyle + '><td>' + (i + 1) + '</td><td colspan="4"><i class="fa fa-coffee"></i> ' + (data[i].breakStatus || 'On Break') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + timeRange + '</td><td>-</td></tr>';
                            } else {
                                if (data[i].recordingUrl) {
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
                                }
                                html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].remark + '- &nbsp;' + (data[i].message || '-') + '</td><td>' + (data[i].callStatus || '-') + '</td><td>' + (data[i].callDuration || '-') + '</td><td>' + (data[i].callDateTime || '-') + '</td><td>' + recordingHtml + '</td></tr>';
                            }
                        }
                        html += '</tbody></table>';
                        document.getElementById('calledDetailsContent').innerHTML = html;
                    } else {
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
                    }
                })
                .catch(function () {
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
                });
    }

    // Auto-refresh agent status every 30 seconds
    function refreshAgentStatus() {
        fetch('/indent/rbm_call_target/get_agent_statuses')
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    if (data && data.length > 0) {
                        for (var i = 0; i < data.length; i++) {
                            var agent = data[i];
                            var statusCell = document.querySelector('.agent-status-cell[data-authid="' + agent.authId + '"]');
                            var timeCell = document.querySelector('.time-in-status-cell[data-authid="' + agent.authId + '"]');

                            if (statusCell) {
                                var statusHtml = getStatusBadge(agent.agentStatus);
                                statusCell.innerHTML = statusHtml;
                            }
                            if (timeCell) {
                                timeCell.textContent = agent.timeInStatus || '-';
                            }
                        }
                    }
                })
                .catch(function (err) {
                    console.error('Error refreshing agent status:', err);
                });
    }

    function getStatusBadge(status) {
        if (!status) return '<span class="badge" style="background-color: #6c757d; color: white;">-</span>';

        var bgColor = '#6c757d';
        var textColor = 'white';
        var lowerStatus = status.toLowerCase();

        if (status === 'On Call') {
            bgColor = '#28a745';
        } else if (status === 'Available') {
            bgColor = '#dc3545';
        } else if (lowerStatus.indexOf('break') !== -1) {
            bgColor = '#fd7e14';  // Orange for break
        } else if (status === 'Logged Out') {
            bgColor = '#6c757d';  // Grey for logged out
        } else if (status === 'Trying') {
            bgColor = '#ffc107';  // Yellow for trying
            textColor = 'black';
        }

        return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
    }

    // Refresh every 10 seconds
    setInterval(refreshAgentStatus, 10000);

    // Initial refresh after page load
    setTimeout(refreshAgentStatus, 2000);

    // Download All Call Data by Date
    function downloadCallData() {
        var selectedDate = document.getElementById('downloadDate').value;
        if (!selectedDate) {
            alert('Please select a date');
            return;
        }
        window.location.href = '/indent/rbm_call_target/download_call_data?date=' + selectedDate;
    }
</script>