Subversion Repositories SmartDukaan

Rev

Rev 36057 | Rev 36097 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
35631 ranu 1 
<style>
35953 ranu 2 
    #rbm-call-target-table td, #rbm-call-target-table th, #breakTimeDetailsContent td, #breakTimeDetailsContent th {
35631 ranu 3 
        font-size: 14px;
4 
        text-align: center;
5 
        padding: 0.4rem;
6 
        vertical-align: middle;
7 
    }
8 
 
35852 ranu 9 
    .badge {
10 
        display: inline-block;
11 
        padding: 4px 8px;
12 
        font-size: 12px;
13 
        font-weight: 600;
14 
        border-radius: 4px;
15 
    }
16 
 
17 
    .agent-status-cell, .time-in-status-cell {
18 
        min-width: 80px;
19 
    }
20 
 
35631 ranu 21 
    #rbm-call-target-table thead th {
22 
        background-color: #343a40;
23 
        color: white;
24 
        font-weight: 600;
25 
    }
26 
 
27 
    #rbm-call-target-table tbody tr:first-child td {
28 
        font-weight: bold;
29 
        background-color: #00d6b2;
30 
    }
31 
 
32 
    .highlight-target {
33 
        background-color: #fff3cd !important;
34 
        font-weight: bold;
35 
    }
36 
 
37 
    .highlight-achieved {
38 
        background-color: #d4edda !important;
39 
    }
40 
 
41 
    .highlight-oos {
42 
        background-color: #f8d7da !important;
43 
    }
44 
 
45 
    .highlight-plan-today {
46 
        background-color: #0f57a4 !important;
47 
        color: white !important;
48 
    }
49 
 
50 
    .highlight-carry-forward {
51 
        background-color: #ffc107 !important;
52 
        color: #000 !important;
53 
    }
54 
 
55 
    .highlight-untouched {
56 
        background-color: #dc3545 !important;
57 
        color: white !important;
58 
    }
59 
 
60 
    .highlight-future-plan {
61 
        background-color: #6c757d !important;
62 
        color: #000 !important;
63 
    }
64 
 
65 
    .clickable {
66 
        cursor: pointer;
67 
        text-decoration: underline;
68 
        color: #007bff;
69 
    }
70 
 
71 
    .clickable:hover {
72 
        color: #0056b3;
73 
    }
74 
 
75 
    .modal-body table {
76 
        width: 100%;
77 
    }
78 
 
79 
    .modal-body table th, .modal-body table td {
80 
        padding: 8px;
81 
        border: 1px solid #ddd;
82 
    }
35654 ranu 83 
 
84 
    #oosDetailsContent table td, #oosDetailsContent table th {
85 
        font-size: 12px;
86 
    }
35670 ranu 87 
 
88 
    #calledDetailsContent table td, #calledDetailsContent table th {
89 
        font-size: 12px;
90 
    }
35631 ranu 91 
</style>
92 
 
93 
<div class="container-fluid">
94 
    <h3>RBM Call Target Summary</h3>
35852 ranu 95 
    <div class="row">
96 
        <div class="col-md-7">
97 
            <!-- Date-wise Called Partner Filter -->
98 
            <div class="card mb-3" style="max-width: 500px;">
99 
                <div class="card-body py-2">
100 
                    <div class="d-flex align-items-center">
101 
                        <label for="historyDate" class="mb-0 mr-2"
102 
                               style="font-size: 14px; white-space: nowrap;">Date:</label>
103 
                        <input type="date" id="historyDate" class="form-control form-control-sm mr-2"
104 
                               style="width: 140px;">
105 
                        <label for="historyRbm" class="mb-0 mr-2"
106 
                               style="font-size: 14px; white-space: nowrap;">RBM:</label>
107 
                        <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
108 
                            <option value="">Select RBM</option>
109 
                            #foreach($model in $rbmCallTargetModels)
110 
                                <option value="$model.getAuthId()">$model.getRbmName()</option>
111 
                            #end
112 
                        </select>
113 
                        <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">
114 
                            View
115 
                        </button>
116 
                    </div>
117 
                </div>
35730 ranu 118 
            </div>
119 
        </div>
35852 ranu 120 
        <div class="col-md-5">
121 
            <!-- Download All Call Data by Date -->
122 
            <div class="card mb-3" style="max-width: 450px;">
123 
                <div class="card-body py-2">
124 
                    <div class="d-flex align-items-center">
125 
                        <label for="downloadDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Download
126 
                            Call Data:</label>
127 
                        <input type="date" id="downloadDate" class="form-control form-control-sm mr-2"
128 
                               style="width: 140px;">
129 
                        <button type="button" class="btn btn-success btn-sm" onclick="downloadCallData()">Download CSV
130 
                        </button>
131 
                    </div>
132 
                </div>
133 
            </div>
134 
 
135 
        </div>
35730 ranu 136 
    </div>
137 
 
35852 ranu 138 
 
35631 ranu 139 
    <table id="rbm-call-target-table" class="table table-bordered table-striped">
140 
        <thead>
141 
        <tr>
142 
            <th>RBM Name</th>
35879 ranu 143 
            <th style="background-color: #17a2b8; color: white;">Agent Status</th>
144 
            <th style="background-color: #17a2b8; color: white;">Time in Status</th>
35631 ranu 145 
            <th>Partner Count</th>
35645 ranu 146 
            <th>(Ach/Tgt)</th>
35631 ranu 147 
            <th>Calling Target</th>
148 
            <th>Called</th>
149 
            <th class="highlight-plan-today">Plan Today</th>
150 
            <th class="highlight-carry-forward">Carry Forward</th>
151 
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
152 
            <th class="highlight-untouched">Untouched</th>
153 
            <th class="highlight-future-plan">Future Plan</th>
154 
            <th>Normal</th>
155 
            <th style="background-color: #c0392b;">Out of Sequence</th>
35645 ranu 156 
            <th>Download</th>
35631 ranu 157 
        </tr>
158 
        </thead>
159 
        <tbody>
160 
            #set($totalPartnerCount = 0)
161 
            #set($totalTodayTarget = 0)
162 
            #set($totalValueAchieved = 0)
163 
            #set($totalMovedToFuture = 0)
164 
            #set($totalPlanToday = 0)
165 
            #set($totalCarryForward = 0)
166 
            #set($totalZeroBilling = 0)
167 
            #set($totalUntouched = 0)
168 
            #set($totalFuturePlan = 0)
169 
            #set($totalNormal = 0)
170 
            #set($totalOutOfSequence = 0)
171 
            #set($totalL2CallingList = 0)
172 
            #set($totalArrAchieved = 0)
173 
            #set($totalArrTarget = 0)
174 
 
175 
            ## Total row first
176 
            #foreach($model in $rbmCallTargetModels)
35662 ranu 177 
                #if(!$model.isL2Position())
178 
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
179 
                #end
35631 ranu 180 
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
181 
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
182 
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
183 
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
184 
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
185 
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
186 
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
187 
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
188 
                #set($totalNormal = $totalNormal + $model.getNormal())
189 
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
190 
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
191 
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
192 
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
193 
                #end
194 
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
195 
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
196 
                #end
197 
            #end
198 
 
199 
            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
200 
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)
201 
 
202 
        <tr>
203 
            <td><strong>TOTAL</strong></td>
35879 ranu 204 
            <td>-</td>
205 
            <td>-</td>
35631 ranu 206 
            <td><strong>$totalPartnerCount</strong></td>
35636 ranu 207 
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
35631 ranu 208 
            </td>
209 
            <td class="highlight-target"><strong>$adjustedTotalTarget</strong></td>
210 
            <td class="highlight-achieved currency"><strong>$adjustedTotalAchieved</strong></td>
211 
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
212 
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
213 
            <td><strong>$totalZeroBilling</strong></td>
214 
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
215 
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
216 
            <td><strong>$totalNormal</strong></td>
217 
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
35645 ranu 218 
            <td></td>
35631 ranu 219 
        </tr>
220 
 
221 
            #foreach($model in $rbmCallTargetModels)
222 
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
223 
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
35852 ranu 224 
                #set($agentStatus = $agentStatusByAuthId.get($model.getAuthId()))
35631 ranu 225 
            <tr>
226 
                <td>$model.getRbmName()</td>
35879 ranu 227 
                <td class="agent-status-cell" data-authid="$model.getAuthId()">
35852 ranu 228 
                    #if($agentStatus && $agentStatus.getAgentStatus())
229 
                        #if($agentStatus.getAgentStatus() == "On Call")
230 
                            <span class="badge" style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
231 
                        #elseif($agentStatus.getAgentStatus() == "Available")
35994 ranu 232 
                            <span class="badge"
233 
                                  style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
234 
                        #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
235 
                            <span class="badge"
36057 ranu 236 
                                  style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
35852 ranu 237 
                        #elseif($agentStatus.getAgentStatus() == "Logged Out")
36057 ranu 238 
                            <span class="badge"
239 
                                  style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
35852 ranu 240 
                        #elseif($agentStatus.getAgentStatus() == "Trying")
36057 ranu 241 
                            <span class="badge"
242 
                                  style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
35852 ranu 243 
                        #else
244 
                            <span class="badge" style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
245 
                        #end
246 
                    #else
247 
                        <span class="badge" style="background-color: #6c757d; color: white;">-</span>
248 
                    #end
249 
                </td>
250 
                <td class="time-in-status-cell" data-authid="$model.getAuthId()">
251 
                    #if($agentStatus && $agentStatus.getTimeInStatus())
252 
                        $agentStatus.getTimeInStatus()
253 
                    #else
254 
                        -
255 
                    #end
35879 ranu 256 
                </td>
35631 ranu 257 
                <td>$model.getPartnerCount()</td>
258 
                <td>
259 
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
35636 ranu 260 
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
35631 ranu 261 
                    #else
262 
 
263 
                    #end
264 
                    /
265 
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
35636 ranu 266 
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
35631 ranu 267 
                    #else
268 
 
269 
                    #end
270 
                </td>
271 
                <td class="highlight-target">$rowTarget</td>
35670 ranu 272 
                <td class="highlight-achieved currency">
35953 ranu 273 
                    <span class="clickable"
274 
                          onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">$rowAchieved</span>
35670 ranu 275 
                </td>
35631 ranu 276 
                <td class="highlight-plan-today">$model.getPlanToday()</td>
277 
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
278 
                <td>$model.getZeroBilling()</td>
279 
                <td class="highlight-untouched">$model.getUntouched()</td>
280 
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
281 
                <td>$model.getNormal()</td>
282 
                <td class="highlight-oos" style="color: red;">
283 
                    #if($model.getOutOfSequenceCount() > 0)
284 
                        <span class="clickable" style="color: #e80404"
285 
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
286 
                    #else
287 
 
288 
                    #end
289 
                </td>
35645 ranu 290 
                <td>
291 
                    <a href="/indent/rbm_call_target/download_raw_data?authId=$model.getAuthId()" target="_blank"
292 
                       class="btn btn-sm btn-outline-success">CSV</a>
293 
                </td>
35631 ranu 294 
            </tr>
295 
            #end
296 
        </tbody>
297 
    </table>
298 
</div>
299 
 
35953 ranu 300 
<!-- Modal for Called Partner Details with Tabs -->
301 
<div class="modal fade" id="calledModal" tabindex="-1" role="dialog" aria-labelledby="calledModalLabel"
302 
     aria-hidden="true">
303 
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
304 
        <div class="modal-content">
305 
            <div class="modal-header">
306 
                <h5 class="modal-title" id="calledModalLabel">Called Partners</h5>
307 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
308 
                    <span aria-hidden="true">&times;</span>
309 
                </button>
310 
            </div>
311 
            <div class="modal-body">
312 
                <!-- Tabs Navigation -->
313 
                <ul class="nav nav-tabs" id="calledModalTabs" role="tablist">
314 
                    <li class="nav-item">
315 
                        <a class="nav-link active" id="called-tab" data-toggle="tab" href="#calledTabContent"
316 
                           role="tab">
317 
                            Called Partners
318 
                        </a>
319 
                    </li>
320 
                    <li class="nav-item">
321 
                        <a class="nav-link" id="break-time-tab" data-toggle="tab" href="#breakTimeTabContent"
322 
                           role="tab">
323 
                            Break Time
324 
                        </a>
325 
                    </li>
326 
                </ul>
327 
                <!-- Tabs Content -->
328 
                <div class="tab-content mt-3" id="calledModalTabContent">
329 
                    <div class="tab-pane fade show active" id="calledTabContent" role="tabpanel">
330 
                        <div id="calledDetailsContent">
331 
                            <p>Loading...</p>
332 
                        </div>
333 
                    </div>
334 
                    <div class="tab-pane fade" id="breakTimeTabContent" role="tabpanel">
335 
                        <div id="breakTimeDetailsContent">
336 
                            <p>Click on Break Time tab to load data.</p>
337 
                        </div>
338 
                    </div>
339 
                </div>
340 
            </div>
341 
            <div class="modal-footer">
342 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
343 
            </div>
344 
        </div>
345 
    </div>
346 
</div>
347 
 
348 
<!-- Modal for Out of Sequence Details -->
349 
<div class="modal fade" id="oosModal" tabindex="-1" role="dialog" aria-labelledby="oosModalLabel"
350 
     aria-hidden="true">
351 
    <div class="modal-dialog modal-lg" role="document">
352 
        <div class="modal-content">
353 
            <div class="modal-header">
354 
                <h5 class="modal-title" id="oosModalLabel">Out of Sequence Calls</h5>
355 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
356 
                    <span aria-hidden="true">&times;</span>
357 
                </button>
358 
            </div>
359 
            <div class="modal-body">
360 
                <div id="oosDetailsContent">
361 
                    <p>Loading...</p>
362 
                </div>
363 
            </div>
364 
            <div class="modal-footer">
365 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
366 
            </div>
367 
        </div>
368 
    </div>
369 
</div>
370 
 
35631 ranu 371 
<script type="text/javascript">
35984 ranu 372 
    // Store current authId and agentName for break time loading
35953 ranu 373 
    var currentModalAuthId = null;
374 
    var currentModalDate = null;
35984 ranu 375 
    var currentModalAgentName = null;
35953 ranu 376 
 
35638 ranu 377 
    document.addEventListener('DOMContentLoaded', function () {
378 
        var elems = document.querySelectorAll('.lakh');
379 
        for (var i = 0; i < elems.length; i++) {
380 
            var val = parseInt(elems[i].textContent.trim());
35636 ranu 381 
            if (!isNaN(val)) {
35638 ranu 382 
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
35636 ranu 383 
            }
35638 ranu 384 
        }
35636 ranu 385 
    });
386 
 
35631 ranu 387 
    function showOutOfSequenceDetails(authId, rbmName) {
388 
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
389 
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
390 
        $('#oosModal').modal('show');
391 
 
392 
        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
393 
                .then(function (response) {
394 
                    return response.json();
395 
                })
396 
                .then(function (data) {
397 
                    if (data && data.length > 0) {
398 
                        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>';
399 
                        for (var i = 0; i < data.length; i++) {
400 
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
401 
                        }
402 
                        html += '</tbody></table>';
403 
                        document.getElementById('oosDetailsContent').innerHTML = html;
404 
                    } else {
405 
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
406 
                    }
407 
                })
408 
                .catch(function () {
409 
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
410 
                });
411 
    }
35670 ranu 412 
 
413 
    function showCalledPartnerDetails(authId, rbmName) {
35984 ranu 414 
        // Store authId and agentName for break time tab
35953 ranu 415 
        currentModalAuthId = authId;
416 
        currentModalDate = null;
35984 ranu 417 
        currentModalAgentName = rbmName;
35953 ranu 418 
 
419 
        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName;
35670 ranu 420 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 421 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
422 
 
423 
        // Reset to Called tab
424 
        $('#called-tab').tab('show');
425 
 
35670 ranu 426 
        $('#calledModal').modal('show');
427 
 
35984 ranu 428 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName))
35670 ranu 429 
                .then(function (response) {
430 
                    return response.json();
431 
                })
432 
                .then(function (data) {
433 
                    if (data && data.length > 0) {
35763 ranu 434 
                        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>';
35670 ranu 435 
                        for (var i = 0; i < data.length; i++) {
35984 ranu 436 
                            var rowStyle = '';
35703 ranu 437 
                            var recordingHtml = '-';
35984 ranu 438 
 
439 
                            // Check if this is a break log entry
440 
                            if (data[i].breakLog) {
441 
                                rowStyle = 'style="background-color: #f8d7da; color: #721c24; font-weight: bold;"';
35994 ranu 442 
                                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>' + (data[i].callDateTime || '-') + '</td><td>-</td></tr>';
35984 ranu 443 
                            } else {
444 
                                if (data[i].recordingUrl) {
445 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
446 
                                }
447 
                                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>';
35703 ranu 448 
                            }
35670 ranu 449 
                        }
450 
                        html += '</tbody></table>';
451 
                        document.getElementById('calledDetailsContent').innerHTML = html;
452 
                    } else {
453 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
454 
                    }
455 
                })
456 
                .catch(function () {
457 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
458 
                });
459 
    }
35730 ranu 460 
 
35953 ranu 461 
    // Load break time data when tab is clicked
462 
    document.addEventListener('DOMContentLoaded', function () {
463 
        var breakTimeTab = document.getElementById('break-time-tab');
464 
        if (breakTimeTab) {
465 
            breakTimeTab.addEventListener('shown.bs.tab', loadBreakTimeData);
466 
            breakTimeTab.addEventListener('click', function () {
467 
                // For Bootstrap 4 compatibility
468 
                setTimeout(loadBreakTimeData, 100);
469 
            });
470 
        }
471 
    });
472 
 
473 
    function loadBreakTimeData() {
474 
        if (!currentModalAuthId) {
475 
            return;
476 
        }
477 
 
478 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Loading break time data...</p>';
479 
 
480 
        var url = '/indent/rbm_call_target/break_time_details?authId=' + currentModalAuthId;
481 
        if (currentModalDate) {
482 
            url += '&date=' + currentModalDate;
483 
        }
35984 ranu 484 
        if (currentModalAgentName) {
485 
            url += '&agentName=' + encodeURIComponent(currentModalAgentName);
486 
        }
35953 ranu 487 
 
488 
        fetch(url)
489 
                .then(function (response) {
490 
                    return response.json();
491 
                })
492 
                .then(function (data) {
493 
                    var html = '';
494 
 
36086 ranu 495 
                    // 4 Summary boxes in a row
496 
                    html += '<div class="row">';
35953 ranu 497 
 
36086 ranu 498 
                    // Available Box - Green
499 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
500 
                    html += '<div class="card text-white bg-success">';
501 
                    html += '<div class="card-body text-center">';
502 
                    html += '<h5 class="card-title">Available</h5>';
503 
                    html += '<h3 class="mb-0">' + (data.totalAvailableTime || '0h 0m 0s') + '</h3>';
504 
                    html += '<small>(' + (data.availableCount || 0) + ' times)</small>';
505 
                    html += '</div></div></div>';
35953 ranu 506 
 
36086 ranu 507 
                    // Trying Box - Yellow
508 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
509 
                    html += '<div class="card text-dark bg-warning">';
510 
                    html += '<div class="card-body text-center">';
511 
                    html += '<h5 class="card-title">Trying</h5>';
512 
                    html += '<h3 class="mb-0">' + (data.totalTryingTime || '0h 0m 0s') + '</h3>';
513 
                    html += '<small>(' + (data.tryingCount || 0) + ' times)</small>';
514 
                    html += '</div></div></div>';
35953 ranu 515 
 
36086 ranu 516 
                    // Logged Out Box - Red/Grey
517 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
518 
                    html += '<div class="card text-white bg-secondary">';
519 
                    html += '<div class="card-body text-center">';
520 
                    html += '<h5 class="card-title">Logged Out</h5>';
521 
                    html += '<h3 class="mb-0">' + (data.totalLoggedOutTime || '0h 0m 0s') + '</h3>';
522 
                    html += '<small>(' + (data.loggedOutCount || 0) + ' times)</small>';
523 
                    html += '</div></div></div>';
524 
 
525 
                    // Break Box - Orange
526 
                    html += '<div class="col-md-3 col-sm-6 mb-3">';
527 
                    html += '<div class="card text-dark" style="background-color: #fd7e14;">';
528 
                    html += '<div class="card-body text-center">';
529 
                    html += '<h5 class="card-title">Break</h5>';
530 
                    html += '<h3 class="mb-0">' + (data.totalBreakTime || '0h 0m 0s') + '</h3>';
531 
                    html += '<small>(' + (data.breakCount || 0) + ' times)</small>';
532 
                    html += '</div></div></div>';
533 
 
534 
                    html += '</div>';
535 
 
536 
                    // Check if no data
537 
                    if ((data.totalAvailableSeconds || 0) + (data.totalTryingSeconds || 0) +
538 
                            (data.totalLoggedOutSeconds || 0) + (data.totalBreakSeconds || 0) === 0) {
539 
                        html += '<p class="text-muted text-center mt-3">No break time data available for this date.</p>';
35953 ranu 540 
                    }
541 
 
542 
                    document.getElementById('breakTimeDetailsContent').innerHTML = html;
543 
                })
544 
                .catch(function (err) {
545 
                    console.error('Error loading break time:', err);
546 
                    document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Error loading break time data. Please try again.</p>';
547 
                });
548 
    }
549 
 
35730 ranu 550 
    // Date-wise Called Partner History
551 
    function showHistoryCalledPartners() {
552 
        var selectedDate = document.getElementById('historyDate').value;
553 
        var selectedRbm = document.getElementById('historyRbm');
554 
        var authId = selectedRbm.value;
555 
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;
556 
 
557 
        if (!selectedDate) {
558 
            alert('Please select a date');
559 
            return;
560 
        }
561 
        if (!authId) {
562 
            alert('Please select an RBM');
563 
            return;
564 
        }
565 
 
35984 ranu 566 
        // Store authId, date and agentName for break time tab
35953 ranu 567 
        currentModalAuthId = authId;
568 
        currentModalDate = selectedDate;
35984 ranu 569 
        currentModalAgentName = rbmName;
35953 ranu 570 
 
571 
        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName + ' (' + selectedDate + ')';
35730 ranu 572 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 573 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
574 
 
575 
        // Reset to Called tab
576 
        $('#called-tab').tab('show');
577 
 
35730 ranu 578 
        $('#calledModal').modal('show');
579 
 
35984 ranu 580 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate + '&agentName=' + encodeURIComponent(rbmName))
35730 ranu 581 
                .then(function (response) {
582 
                    return response.json();
583 
                })
584 
                .then(function (data) {
585 
                    if (data && data.length > 0) {
35763 ranu 586 
                        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>';
35730 ranu 587 
                        for (var i = 0; i < data.length; i++) {
35984 ranu 588 
                            var rowStyle = '';
35730 ranu 589 
                            var recordingHtml = '-';
35984 ranu 590 
 
591 
                            // Check if this is a break log entry
592 
                            if (data[i].breakLog) {
593 
                                rowStyle = 'style="background-color: #f8d7da; color: #721c24; font-weight: bold;"';
35994 ranu 594 
                                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>' + (data[i].callDateTime || '-') + '</td><td>-</td></tr>';
35984 ranu 595 
                            } else {
596 
                                if (data[i].recordingUrl) {
597 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
598 
                                }
599 
                                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>';
35730 ranu 600 
                            }
601 
                        }
602 
                        html += '</tbody></table>';
603 
                        document.getElementById('calledDetailsContent').innerHTML = html;
604 
                    } else {
605 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
606 
                    }
607 
                })
608 
                .catch(function () {
609 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
610 
                });
611 
    }
35852 ranu 612 
 
613 
    // Auto-refresh agent status every 30 seconds
614 
    function refreshAgentStatus() {
615 
        fetch('/indent/rbm_call_target/get_agent_statuses')
35879 ranu 616 
                .then(function (response) {
617 
                    return response.json();
618 
                })
619 
                .then(function (data) {
620 
                    if (data && data.length > 0) {
621 
                        for (var i = 0; i < data.length; i++) {
622 
                            var agent = data[i];
623 
                            var statusCell = document.querySelector('.agent-status-cell[data-authid="' + agent.authId + '"]');
624 
                            var timeCell = document.querySelector('.time-in-status-cell[data-authid="' + agent.authId + '"]');
35852 ranu 625 
 
35879 ranu 626 
                            if (statusCell) {
627 
                                var statusHtml = getStatusBadge(agent.agentStatus);
628 
                                statusCell.innerHTML = statusHtml;
629 
                            }
630 
                            if (timeCell) {
631 
                                timeCell.textContent = agent.timeInStatus || '-';
632 
                            }
35852 ranu 633 
                        }
634 
                    }
35879 ranu 635 
                })
636 
                .catch(function (err) {
637 
                    console.error('Error refreshing agent status:', err);
638 
                });
35852 ranu 639 
    }
640 
 
641 
    function getStatusBadge(status) {
642 
        if (!status) return '<span class="badge" style="background-color: #6c757d; color: white;">-</span>';
643 
 
644 
        var bgColor = '#6c757d';
645 
        var textColor = 'white';
35994 ranu 646 
        var lowerStatus = status.toLowerCase();
35852 ranu 647 
 
648 
        if (status === 'On Call') {
649 
            bgColor = '#28a745';
650 
        } else if (status === 'Available') {
35994 ranu 651 
            bgColor = '#dc3545';
652 
        } else if (lowerStatus.indexOf('break') !== -1) {
36057 ranu 653 
            bgColor = '#fd7e14';  // Orange for break
35852 ranu 654 
        } else if (status === 'Logged Out') {
36057 ranu 655 
            bgColor = '#6c757d';  // Grey for logged out
35852 ranu 656 
        } else if (status === 'Trying') {
36057 ranu 657 
            bgColor = '#ffc107';  // Yellow for trying
658 
            textColor = 'black';
35852 ranu 659 
        }
660 
 
661 
        return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
662 
    }
663 
 
36057 ranu 664 
    // Refresh every 10 seconds
665 
    setInterval(refreshAgentStatus, 10000);
35852 ranu 666 
 
667 
    // Initial refresh after page load
668 
    setTimeout(refreshAgentStatus, 2000);
669 
 
670 
    // Download All Call Data by Date
671 
    function downloadCallData() {
672 
        var selectedDate = document.getElementById('downloadDate').value;
673 
        if (!selectedDate) {
674 
            alert('Please select a date');
675 
            return;
676 
        }
677 
        window.location.href = '/indent/rbm_call_target/download_call_data?date=' + selectedDate;
678 
    }
35631 ranu 679 
</script>