Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
36112 ranu 1 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
35631 ranu 2 
<style>
36112 ranu 3 
    #rbm-call-target-table th, #breakTimeDetailsContent th {
4 
        font-size: 13px;
35631 ranu 5 
        text-align: center;
6 
        padding: 0.4rem;
7 
        vertical-align: middle;
8 
    }
9 
 
36112 ranu 10 
    #rbm-call-target-table td, #breakTimeDetailsContent td {
11 
        font-size: 13px;
12 
        text-align: center;
13 
        padding: 0.2rem;
14 
        vertical-align: middle;
15 
    }
16 
 
35852 ranu 17 
    .badge {
18 
        display: inline-block;
19 
        padding: 4px 8px;
20 
        font-size: 12px;
21 
        font-weight: 600;
22 
        border-radius: 4px;
23 
    }
24 
 
25 
    .agent-status-cell, .time-in-status-cell {
26 
        min-width: 80px;
27 
    }
28 
 
35631 ranu 29 
    #rbm-call-target-table thead th {
30 
        background-color: #343a40;
31 
        color: white;
32 
        font-weight: 600;
33 
    }
34 
 
35 
    #rbm-call-target-table tbody tr:first-child td {
36 
        font-weight: bold;
37 
        background-color: #00d6b2;
38 
    }
39 
 
40 
    .highlight-target {
41 
        background-color: #fff3cd !important;
42 
        font-weight: bold;
43 
    }
44 
 
45 
    .highlight-achieved {
46 
        background-color: #d4edda !important;
47 
    }
48 
 
49 
    .highlight-oos {
50 
        background-color: #f8d7da !important;
51 
    }
52 
 
53 
    .highlight-plan-today {
54 
        background-color: #0f57a4 !important;
55 
        color: white !important;
56 
    }
57 
 
58 
    .highlight-carry-forward {
59 
        background-color: #ffc107 !important;
60 
        color: #000 !important;
61 
    }
62 
 
63 
    .highlight-untouched {
64 
        background-color: #dc3545 !important;
65 
        color: white !important;
66 
    }
67 
 
68 
    .highlight-future-plan {
69 
        background-color: #6c757d !important;
70 
        color: #000 !important;
71 
    }
72 
 
73 
    .clickable {
74 
        cursor: pointer;
75 
        text-decoration: underline;
76 
        color: #007bff;
77 
    }
78 
 
79 
    .clickable:hover {
80 
        color: #0056b3;
81 
    }
82 
 
83 
    .modal-body table {
84 
        width: 100%;
85 
    }
86 
 
87 
    .modal-body table th, .modal-body table td {
88 
        padding: 8px;
89 
        border: 1px solid #ddd;
90 
    }
35654 ranu 91 
 
92 
    #oosDetailsContent table td, #oosDetailsContent table th {
93 
        font-size: 12px;
94 
    }
35670 ranu 95 
 
96 
    #calledDetailsContent table td, #calledDetailsContent table th {
97 
        font-size: 12px;
98 
    }
35631 ranu 99 
</style>
100 
 
101 
<div class="container-fluid">
36234 ranu 102 
    <div class="d-flex align-items-center mb-2">
103 
        <h3 class="mb-0 mr-3">RBM Call Target Summary</h3>
104 
        <div class="d-flex align-items-center">
105 
            <label for="filterDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Date:</label>
106 
            <input type="date" id="filterDate" class="form-control form-control-sm mr-2" style="width: 150px;"
107 
                   value="$queryDate">
108 
            <button type="button" class="btn btn-primary btn-sm" onclick="filterByDate()">Go</button>
109 
        </div>
110 
    </div>
35852 ranu 111 
    <div class="row">
112 
        <div class="col-md-7">
113 
            <!-- Date-wise Called Partner Filter -->
114 
            <div class="card mb-3" style="max-width: 500px;">
115 
                <div class="card-body py-2">
116 
                    <div class="d-flex align-items-center">
117 
                        <label for="historyDate" class="mb-0 mr-2"
118 
                               style="font-size: 14px; white-space: nowrap;">Date:</label>
119 
                        <input type="date" id="historyDate" class="form-control form-control-sm mr-2"
120 
                               style="width: 140px;">
121 
                        <label for="historyRbm" class="mb-0 mr-2"
122 
                               style="font-size: 14px; white-space: nowrap;">RBM:</label>
123 
                        <select id="historyRbm" class="form-control form-control-sm mr-2" style="width: 150px;">
124 
                            <option value="">Select RBM</option>
125 
                            #foreach($model in $rbmCallTargetModels)
126 
                                <option value="$model.getAuthId()">$model.getRbmName()</option>
127 
                            #end
128 
                        </select>
129 
                        <button type="button" class="btn btn-primary btn-sm" onclick="showHistoryCalledPartners()">
130 
                            View
131 
                        </button>
132 
                    </div>
133 
                </div>
35730 ranu 134 
            </div>
135 
        </div>
35852 ranu 136 
        <div class="col-md-5">
137 
            <!-- Download All Call Data by Date -->
138 
            <div class="card mb-3" style="max-width: 450px;">
139 
                <div class="card-body py-2">
140 
                    <div class="d-flex align-items-center">
141 
                        <label for="downloadDate" class="mb-0 mr-2" style="font-size: 14px; white-space: nowrap;">Download
142 
                            Call Data:</label>
143 
                        <input type="date" id="downloadDate" class="form-control form-control-sm mr-2"
144 
                               style="width: 140px;">
145 
                        <button type="button" class="btn btn-success btn-sm" onclick="downloadCallData()">Download CSV
146 
                        </button>
147 
                    </div>
148 
                </div>
149 
            </div>
150 
 
151 
        </div>
35730 ranu 152 
    </div>
153 
 
35852 ranu 154 
 
35631 ranu 155 
    <table id="rbm-call-target-table" class="table table-bordered table-striped">
156 
        <thead>
157 
        <tr>
36112 ranu 158 
            <th colspan="2">RBM Name</th>
36101 ranu 159 
            <th style="background-color: #ffc107; color: black;">Rating</th>
35879 ranu 160 
            <th style="background-color: #17a2b8; color: white;">Agent Status</th>
161 
            <th style="background-color: #17a2b8; color: white;">Time in Status</th>
36179 ranu 162 
            <th style="background-color: #007bff; color: white;"><i class="fa fa-clock"></i> Login</th>
163 
            <th style="background-color: #28a745; color: white;"><i class="fa fa-phone"></i> On Call</th>
164 
            <th style="background-color: #dc3545; color: white;"><i class="fa fa-user-clock"></i> Idle</th>
165 
            <th style="background-color: #fd7e14; color: white;"><i class="fa fa-coffee"></i> Break</th>
35631 ranu 166 
            <th>Partner Count</th>
35645 ranu 167 
            <th>(Ach/Tgt)</th>
35631 ranu 168 
            <th>Calling Target</th>
36276 ranu 169 
            <th>Called / Rec / Unique</th>
35631 ranu 170 
            <th class="highlight-plan-today">Plan Today</th>
171 
            <th class="highlight-carry-forward">Carry Forward</th>
172 
            <th style="background-color: #1e6e0e; color: white;">Zero Billing</th>
173 
            <th class="highlight-untouched">Untouched</th>
174 
            <th class="highlight-future-plan">Future Plan</th>
175 
            <th>Normal</th>
36182 ranu 176 
            <th style="background-color: #8e44ad; color: white;">Revival</th>
35631 ranu 177 
            <th style="background-color: #c0392b;">Out of Sequence</th>
178 
        </tr>
179 
        </thead>
180 
        <tbody>
181 
            #set($totalPartnerCount = 0)
182 
            #set($totalTodayTarget = 0)
183 
            #set($totalValueAchieved = 0)
184 
            #set($totalMovedToFuture = 0)
185 
            #set($totalPlanToday = 0)
186 
            #set($totalCarryForward = 0)
187 
            #set($totalZeroBilling = 0)
188 
            #set($totalUntouched = 0)
189 
            #set($totalFuturePlan = 0)
190 
            #set($totalNormal = 0)
36182 ranu 191 
            #set($totalRevival = 0)
35631 ranu 192 
            #set($totalOutOfSequence = 0)
193 
            #set($totalL2CallingList = 0)
36210 ranu 194 
            #set($totalL3CallingList = 0)
35631 ranu 195 
            #set($totalArrAchieved = 0)
196 
            #set($totalArrTarget = 0)
36276 ranu 197 
            #set($totalRecordingCalls = 0)
198 
            #set($totalUniqueRecordingCalls = 0)
35631 ranu 199 
 
200 
            ## Total row first
201 
            #foreach($model in $rbmCallTargetModels)
36228 ranu 202 
                #if(!$model.isL3Position())
35662 ranu 203 
                    #set($totalPartnerCount = $totalPartnerCount + $model.getPartnerCount())
204 
                #end
35631 ranu 205 
                #set($totalTodayTarget = $totalTodayTarget + $model.getTodayTargetOfCall())
206 
                #set($totalValueAchieved = $totalValueAchieved + $model.getValueTargetAchieved())
207 
                #set($totalMovedToFuture = $totalMovedToFuture + $model.getMovedToFuture())
208 
                #set($totalPlanToday = $totalPlanToday + $model.getPlanToday())
209 
                #set($totalCarryForward = $totalCarryForward + $model.getCarryForward())
210 
                #set($totalZeroBilling = $totalZeroBilling + $model.getZeroBilling())
211 
                #set($totalUntouched = $totalUntouched + $model.getUntouched())
212 
                #set($totalFuturePlan = $totalFuturePlan + $model.getFuturePlan())
213 
                #set($totalNormal = $totalNormal + $model.getNormal())
36182 ranu 214 
                #set($totalRevival = $totalRevival + $model.getRevival())
35631 ranu 215 
                #set($totalOutOfSequence = $totalOutOfSequence + $model.getOutOfSequenceCount())
216 
                #set($totalL2CallingList = $totalL2CallingList + $model.getL2CallingList())
36210 ranu 217 
                #set($totalL3CallingList = $totalL3CallingList + $model.getL3CallingList())
36276 ranu 218 
                #set($totalRecordingCalls = $totalRecordingCalls + $model.getTotalRecordingCalls())
219 
                #set($totalUniqueRecordingCalls = $totalUniqueRecordingCalls + $model.getUniqueRecordingCalls())
35631 ranu 220 
                #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
221 
                    #set($totalArrAchieved = $totalArrAchieved + $arrAchievedByAuthId.get($model.getAuthId()))
222 
                #end
223 
                #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
224 
                    #set($totalArrTarget = $totalArrTarget + $arrTargetByAuthId.get($model.getAuthId()))
225 
                #end
226 
            #end
227 
 
228 
            #set($adjustedTotalTarget = $totalTodayTarget + $totalMovedToFuture)
229 
            #set($adjustedTotalAchieved = $totalValueAchieved + $totalMovedToFuture)
230 
 
231 
        <tr>
36112 ranu 232 
            <td colspan="2"><strong>TOTAL</strong></td>
35879 ranu 233 
            <td>-</td>
234 
            <td>-</td>
36101 ranu 235 
            <td>-</td>
36179 ranu 236 
            <td>-</td>
237 
            <td>-</td>
238 
            <td>-</td>
239 
            <td>-</td>
35631 ranu 240 
            <td><strong>$totalPartnerCount</strong></td>
35636 ranu 241 
            <td><strong><span class="lakh">$totalArrAchieved</span> / <span class="lakh">$totalArrTarget</span></strong>
35631 ranu 242 
            </td>
36229 ranu 243 
            <td class="highlight-target">
244 
                #if($totalL2CallingList > 0)
245 
                    #set($totalL1OwnTarget = $adjustedTotalTarget - $totalL2CallingList)
246 
                    <strong>${totalL1OwnTarget} + <span style="color: #e67e22;">$totalL2CallingList</span></strong>
247 
                #else
248 
                    <strong>$adjustedTotalTarget</strong>
249 
                #end
250 
            </td>
36276 ranu 251 
            <td class="highlight-achieved">
252 
                <strong>$adjustedTotalAchieved</strong>
253 
                / <span style="color: #28a745; font-weight: bold;">$totalRecordingCalls</span>
254 
                / <span style="color: #007bff; font-weight: bold;">$totalUniqueRecordingCalls</span>
255 
            </td>
35631 ranu 256 
            <td class="highlight-plan-today"><strong>$totalPlanToday</strong></td>
257 
            <td class="highlight-carry-forward"><strong>$totalCarryForward</strong></td>
258 
            <td><strong>$totalZeroBilling</strong></td>
259 
            <td class="highlight-untouched"><strong>$totalUntouched</strong></td>
260 
            <td class="highlight-future-plan"><strong>$totalFuturePlan</strong></td>
261 
            <td><strong>$totalNormal</strong></td>
36182 ranu 262 
            <td><strong>$totalRevival</strong></td>
35631 ranu 263 
            <td class="highlight-oos"><strong>$totalOutOfSequence</strong></td>
264 
        </tr>
265 
 
266 
            #foreach($model in $rbmCallTargetModels)
267 
                #set($rowTarget = $model.getTodayTargetOfCall() + $model.getMovedToFuture())
268 
                #set($rowAchieved = $model.getValueTargetAchieved() + $model.getMovedToFuture())
35852 ranu 269 
                #set($agentStatus = $agentStatusByAuthId.get($model.getAuthId()))
35631 ranu 270 
            <tr>
36101 ranu 271 
                <td>
36112 ranu 272 
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
273 
                    #if($rank == 1)
36122 ranu 274 
                        <img src="../../../resources/images/king.png" style="width: 35px;">
36112 ranu 275 
                    #elseif($rank == 2)
36123 ranu 276 
                        <img src="../../../resources/images/trophy-cup.png" style="width: 30px;">
36112 ranu 277 
                    #elseif($rank == 3)
36123 ranu 278 
                        <img src="../../../resources/images/bronze-medal.png" style="width: 30px;">
36112 ranu 279 
                    #elseif($rank == 4)
36123 ranu 280 
                        <img src="../../../resources/images/star-badge.png" style="width: 30px;">
36112 ranu 281 
                    #elseif($rank && $rank > 4)
36123 ranu 282 
                        <img src="../../../resources/images/clock.png" style="width: 22px;">
36101 ranu 283 
                    #else
36124 ranu 284 
                        <img src="../../../resources/images/clock.png" style="width: 22px;">
36101 ranu 285 
                    #end
286 
                </td>
36112 ranu 287 
                <td>$model.getRbmName()</td>
36101 ranu 288 
                <td>
36112 ranu 289 
                    #set($ratingData = $rbmNameToRatingMap.get($model.getRbmName()))
290 
                    #set($rank = $rbmCombinedRankMap.get($model.getRbmName()))
291 
                    #if($ratingData && $ratingData.getRating())
292 
                        #set($rating = $ratingData.getRating())
293 
                        <div style="line-height: 1.2;">
294 
                            #if($rating && $rating > 0 && $rating <= 1)
295 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;</b>
296 
                            #elseif($rating && $rating > 1 && $rating <= 2)
297 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;</b>
298 
                            #elseif($rating && $rating > 2 && $rating <= 3)
299 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;</b>
300 
                            #elseif($rating && $rating > 3 && $rating <= 4)
301 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;</b>
302 
                            #elseif($rating && $rating > 4 && $rating <= 5)
303 
                                <b style="color: goldenrod; font-size: 12px;">&#9733;&#9733;&#9733;&#9733;&#9733;</b>
304 
                            #end
305 
                            <br>
306 
                            <span style="font-size: 10px; color: #555;">#$rank | $ratingData.getPartnerCount() rated</span>
307 
                        </div>
36101 ranu 308 
                    #else
309 
                        -
310 
                    #end
311 
                </td>
35879 ranu 312 
                <td class="agent-status-cell" data-authid="$model.getAuthId()">
36234 ranu 313 
                    #if($isToday)
314 
                        #if($agentStatus && $agentStatus.getAgentStatus())
315 
                            #if($agentStatus.getAgentStatus() == "On Call")
316 
                                <span class="badge"
317 
                                      style="background-color: #28a745; color: white;">$agentStatus.getAgentStatus()</span>
318 
                            #elseif($agentStatus.getAgentStatus() == "Available")
319 
                                <span class="badge"
320 
                                      style="background-color: #dc3545; color: white;">$agentStatus.getAgentStatus()</span>
321 
                            #elseif($agentStatus.getAgentStatus().toLowerCase().contains("break"))
322 
                                <span class="badge"
323 
                                      style="background-color: #fd7e14; color: white;">$agentStatus.getAgentStatus()</span>
324 
                            #elseif($agentStatus.getAgentStatus() == "Logged Out")
325 
                                <span class="badge"
326 
                                      style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
327 
                            #elseif($agentStatus.getAgentStatus() == "Trying")
328 
                                <span class="badge"
329 
                                      style="background-color: #ffc107; color: black;">$agentStatus.getAgentStatus()</span>
330 
                            #else
331 
                                <span class="badge"
332 
                                      style="background-color: #6c757d; color: white;">$agentStatus.getAgentStatus()</span>
333 
                            #end
35852 ranu 334 
                        #else
36234 ranu 335 
                            <span class="badge" style="background-color: #6c757d; color: white;">-</span>
35852 ranu 336 
                        #end
337 
                    #else
338 
                        <span class="badge" style="background-color: #6c757d; color: white;">-</span>
339 
                    #end
340 
                </td>
341 
                <td class="time-in-status-cell" data-authid="$model.getAuthId()">
36234 ranu 342 
                    #if($isToday)
343 
                        #if($agentStatus && $agentStatus.getTimeInStatus())
344 
                            $agentStatus.getTimeInStatus()
345 
                        #else
346 
                            -
347 
                        #end
35852 ranu 348 
                    #else
349 
                        -
350 
                    #end
35879 ranu 351 
                </td>
36179 ranu 352 
                <td style="background-color: #e7f1ff;">
353 
                    #if($loginTimeByAuthId && $loginTimeByAuthId.get($model.getAuthId()))
354 
                        $loginTimeByAuthId.get($model.getAuthId())
355 
                    #else
356 
                        -
357 
                    #end
358 
                </td>
359 
                <td style="background-color: #d4edda;">
360 
                    #if($onCallTimeByAuthId && $onCallTimeByAuthId.get($model.getAuthId()))
361 
                        $onCallTimeByAuthId.get($model.getAuthId())
362 
                    #else
363 
                        -
364 
                    #end
365 
                </td>
366 
                <td style="background-color: #f8d7da;">
367 
                    #if($availableTimeByAuthId && $availableTimeByAuthId.get($model.getAuthId()))
368 
                        $availableTimeByAuthId.get($model.getAuthId())
369 
                    #else
370 
                        -
371 
                    #end
372 
                </td>
373 
                <td style="background-color: #ffe5cc;">
374 
                    #if($breakTimeByAuthId && $breakTimeByAuthId.get($model.getAuthId()))
375 
                        $breakTimeByAuthId.get($model.getAuthId())
376 
                    #else
377 
                        -
378 
                    #end
379 
                </td>
35631 ranu 380 
                <td>$model.getPartnerCount()</td>
381 
                <td>
382 
                    #if($arrAchievedByAuthId && $arrAchievedByAuthId.get($model.getAuthId()))
35636 ranu 383 
                        <span class="lakh">$arrAchievedByAuthId.get($model.getAuthId())</span>
35631 ranu 384 
                    #else
385 
 
386 
                    #end
387 
                    /
388 
                    #if($arrTargetByAuthId && $arrTargetByAuthId.get($model.getAuthId()))
35636 ranu 389 
                        <span class="lakh">$arrTargetByAuthId.get($model.getAuthId())</span>
35631 ranu 390 
                    #else
391 
 
392 
                    #end
393 
                </td>
36229 ranu 394 
                <td class="highlight-target">
395 
                    #if($model.isL2Position() && $model.getL2CallingList() > 0)
396 
                        #set($l1OwnTarget = $rowTarget - $model.getL2CallingList())
397 
                        ${l1OwnTarget} + <span style="color: #e67e22; font-weight: bold;"
398 
                                               title="L2 Escalation">$model.getL2CallingList()</span>
399 
                    #else
400 
                        $rowTarget
401 
                    #end
402 
                </td>
36276 ranu 403 
                <td class="highlight-achieved clickable"
404 
                    onclick="showCalledPartnerDetails($model.getAuthId(), '$model.getRbmName()')">
405 
                    $rowAchieved
406 
                    / <span style="color: #28a745; font-weight: bold;"
407 
                            title="Total calls with recording">$model.getTotalRecordingCalls()</span>
408 
                    / <span style="color: #007bff; font-weight: bold;"
409 
                            title="Unique numbers with recording">$model.getUniqueRecordingCalls()</span>
35670 ranu 410 
                </td>
35631 ranu 411 
                <td class="highlight-plan-today">$model.getPlanToday()</td>
412 
                <td class="highlight-carry-forward">$model.getCarryForward()</td>
413 
                <td>$model.getZeroBilling()</td>
414 
                <td class="highlight-untouched">$model.getUntouched()</td>
415 
                <td class="highlight-future-plan">$model.getFuturePlan()</td>
416 
                <td>$model.getNormal()</td>
36182 ranu 417 
                <td>$model.getRevival()</td>
35631 ranu 418 
                <td class="highlight-oos" style="color: red;">
419 
                    #if($model.getOutOfSequenceCount() > 0)
420 
                        <span class="clickable" style="color: #e80404"
421 
                              onclick="showOutOfSequenceDetails($model.getAuthId(), '$model.getRbmName()')">$model.getOutOfSequenceCount()</span>
422 
                    #else
423 
 
424 
                    #end
425 
                </td>
426 
            </tr>
427 
            #end
428 
        </tbody>
429 
    </table>
430 
</div>
431 
 
35953 ranu 432 
<!-- Modal for Called Partner Details with Tabs -->
433 
<div class="modal fade" id="calledModal" tabindex="-1" role="dialog" aria-labelledby="calledModalLabel"
434 
     aria-hidden="true">
435 
    <div class="modal-dialog modal-lg" role="document" style="max-width: 90%;">
436 
        <div class="modal-content">
437 
            <div class="modal-header">
438 
                <h5 class="modal-title" id="calledModalLabel">Called Partners</h5>
439 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
440 
                    <span aria-hidden="true">&times;</span>
441 
                </button>
442 
            </div>
443 
            <div class="modal-body">
36234 ranu 444 
                <div id="calledDetailsContent">
445 
                    <p>Loading...</p>
35953 ranu 446 
                </div>
447 
            </div>
448 
            <div class="modal-footer">
449 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
450 
            </div>
451 
        </div>
452 
    </div>
453 
</div>
454 
 
455 
<!-- Modal for Out of Sequence Details -->
456 
<div class="modal fade" id="oosModal" tabindex="-1" role="dialog" aria-labelledby="oosModalLabel"
457 
     aria-hidden="true">
458 
    <div class="modal-dialog modal-lg" role="document">
459 
        <div class="modal-content">
460 
            <div class="modal-header">
461 
                <h5 class="modal-title" id="oosModalLabel">Out of Sequence Calls</h5>
462 
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
463 
                    <span aria-hidden="true">&times;</span>
464 
                </button>
465 
            </div>
466 
            <div class="modal-body">
467 
                <div id="oosDetailsContent">
468 
                    <p>Loading...</p>
469 
                </div>
470 
            </div>
471 
            <div class="modal-footer">
472 
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
473 
            </div>
474 
        </div>
475 
    </div>
476 
</div>
477 
 
35631 ranu 478 
<script type="text/javascript">
36234 ranu 479 
    // Store globally so it persists across AJAX reloads
480 
    window.pageQueryDate = '$queryDate';
481 
    var pageQueryDate = window.pageQueryDate;
482 
 
483 
    function filterByDate() {
484 
        var date = document.getElementById('filterDate').value;
485 
        if (date) {
486 
            var container = document.getElementById('rbm-call-target-container');
487 
            if (container) {
488 
                // Update global date BEFORE AJAX so click handlers use new date
489 
                window.pageQueryDate = date;
490 
                // AJAX reload only calling target fragment
491 
                container.innerHTML = '<div class="text-center p-5"><i class="fa fa-spinner fa-spin fa-2x"></i><br/>Loading...</div>';
492 
                fetch('/indent/rbm_call_target?date=' + date)
493 
                        .then(function (response) {
494 
                            return response.text();
495 
                        })
496 
                        .then(function (html) {
497 
                            container.innerHTML = html;
498 
                            // Re-run lakh formatting
499 
                            var elems = container.querySelectorAll('.lakh');
500 
                            for (var i = 0; i < elems.length; i++) {
501 
                                var val = parseInt(elems[i].textContent.trim());
502 
                                if (!isNaN(val)) {
503 
                                    elems[i].textContent = (val / 100000).toFixed(1) + 'L';
504 
                                }
505 
                            }
506 
                        })
507 
                        .catch(function () {
508 
                            container.innerHTML = '<p class="text-danger">Error loading data. Please try again.</p>';
509 
                        });
510 
            } else {
511 
                // Standalone page — full reload
512 
                window.location.href = '/indent/rbm_call_target?date=' + date;
513 
            }
514 
        }
515 
    }
516 
 
35984 ranu 517 
    // Store current authId and agentName for break time loading
35953 ranu 518 
    var currentModalAuthId = null;
519 
    var currentModalDate = null;
35984 ranu 520 
    var currentModalAgentName = null;
35953 ranu 521 
 
35638 ranu 522 
    document.addEventListener('DOMContentLoaded', function () {
523 
        var elems = document.querySelectorAll('.lakh');
524 
        for (var i = 0; i < elems.length; i++) {
525 
            var val = parseInt(elems[i].textContent.trim());
35636 ranu 526 
            if (!isNaN(val)) {
35638 ranu 527 
                elems[i].textContent = (val / 100000).toFixed(1) + 'L';
35636 ranu 528 
            }
35638 ranu 529 
        }
35636 ranu 530 
    });
531 
 
35631 ranu 532 
    function showOutOfSequenceDetails(authId, rbmName) {
533 
        document.getElementById('oosModalLabel').textContent = 'Out of Sequence Calls - ' + rbmName;
534 
        document.getElementById('oosDetailsContent').innerHTML = '<p>Loading...</p>';
535 
        $('#oosModal').modal('show');
536 
 
537 
        fetch('/indent/rbm_call_target/oos_details?authId=' + authId)
538 
                .then(function (response) {
539 
                    return response.json();
540 
                })
541 
                .then(function (data) {
542 
                    if (data && data.length > 0) {
543 
                        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>';
544 
                        for (var i = 0; i < data.length; i++) {
545 
                            html += '<tr><td>' + (i + 1) + '</td><td>' + data[i].partyName + '</td><td>' + data[i].code + '</td><td>' + data[i].time + '</td></tr>';
546 
                        }
547 
                        html += '</tbody></table>';
548 
                        document.getElementById('oosDetailsContent').innerHTML = html;
549 
                    } else {
550 
                        document.getElementById('oosDetailsContent').innerHTML = '<p>No out of sequence calls found.</p>';
551 
                    }
552 
                })
553 
                .catch(function () {
554 
                    document.getElementById('oosDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
555 
                });
556 
    }
35670 ranu 557 
 
558 
    function showCalledPartnerDetails(authId, rbmName) {
36234 ranu 559 
        // Always use current global date (updated after AJAX reload)
560 
        var currentDate = window.pageQueryDate;
35984 ranu 561 
        // Store authId and agentName for break time tab
35953 ranu 562 
        currentModalAuthId = authId;
36234 ranu 563 
        currentModalDate = currentDate;
35984 ranu 564 
        currentModalAgentName = rbmName;
35953 ranu 565 
 
36234 ranu 566 
        document.getElementById('calledModalLabel').textContent = 'Called Partners - ' + rbmName + ' (' + currentDate + ')';
35670 ranu 567 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 568 
 
35670 ranu 569 
        $('#calledModal').modal('show');
570 
 
36234 ranu 571 
        var dateParam = currentDate ? '&date=' + currentDate : '';
572 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&agentName=' + encodeURIComponent(rbmName) + dateParam)
35670 ranu 573 
                .then(function (response) {
574 
                    return response.json();
575 
                })
576 
                .then(function (data) {
36235 ranu 577 
                    if (data && data.length > 0) {
35763 ranu 578 
                        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>';
36235 ranu 579 
                        for (var i = 0; i < data.length; i++) {
580 
                            var rowStyle = '';
35703 ranu 581 
                            var recordingHtml = '-';
36235 ranu 582 
 
583 
                            // Break log entry — show inline with calls (sorted by time)
584 
                            if (data[i].breakLog) {
585 
                                var status = (data[i].breakStatus || '').toLowerCase();
586 
                                if (status.indexOf('available') >= 0) {
587 
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
588 
                                } else if (status.indexOf('trying') >= 0) {
589 
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
590 
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
591 
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
592 
                                } else if (status.indexOf('break') >= 0) {
593 
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
594 
                                } else {
595 
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
596 
                                }
597 
                                var timeRange = data[i].callDateTime || '-';
598 
                                if (data[i].breakEndTime) {
599 
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
600 
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
601 
                                }
602 
                                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>';
603 
                            } else {
604 
                                if (data[i].recordingUrl) {
605 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
606 
                                }
607 
                                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 608 
                            }
35670 ranu 609 
                        }
610 
                        html += '</tbody></table>';
611 
                        document.getElementById('calledDetailsContent').innerHTML = html;
612 
                    } else {
613 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found.</p>';
614 
                    }
615 
                })
616 
                .catch(function () {
617 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
618 
                });
619 
    }
35730 ranu 620 
 
35953 ranu 621 
 
35730 ranu 622 
    // Date-wise Called Partner History
623 
    function showHistoryCalledPartners() {
624 
        var selectedDate = document.getElementById('historyDate').value;
625 
        var selectedRbm = document.getElementById('historyRbm');
626 
        var authId = selectedRbm.value;
627 
        var rbmName = selectedRbm.options[selectedRbm.selectedIndex].text;
628 
 
629 
        if (!selectedDate) {
630 
            alert('Please select a date');
631 
            return;
632 
        }
633 
        if (!authId) {
634 
            alert('Please select an RBM');
635 
            return;
636 
        }
637 
 
35984 ranu 638 
        // Store authId, date and agentName for break time tab
35953 ranu 639 
        currentModalAuthId = authId;
640 
        currentModalDate = selectedDate;
35984 ranu 641 
        currentModalAgentName = rbmName;
35953 ranu 642 
 
643 
        document.getElementById('calledModalLabel').textContent = 'Activity - ' + rbmName + ' (' + selectedDate + ')';
35730 ranu 644 
        document.getElementById('calledDetailsContent').innerHTML = '<p>Loading...</p>';
35953 ranu 645 
        document.getElementById('breakTimeDetailsContent').innerHTML = '<p>Click to load break time data.</p>';
646 
 
647 
        // Reset to Called tab
648 
        $('#called-tab').tab('show');
649 
 
35730 ranu 650 
        $('#calledModal').modal('show');
651 
 
35984 ranu 652 
        fetch('/indent/rbm_call_target/called_details?authId=' + authId + '&date=' + selectedDate + '&agentName=' + encodeURIComponent(rbmName))
35730 ranu 653 
                .then(function (response) {
654 
                    return response.json();
655 
                })
656 
                .then(function (data) {
657 
                    if (data && data.length > 0) {
35763 ranu 658 
                        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 659 
                        for (var i = 0; i < data.length; i++) {
35984 ranu 660 
                            var rowStyle = '';
35730 ranu 661 
                            var recordingHtml = '-';
35984 ranu 662 
 
663 
                            // Check if this is a break log entry
664 
                            if (data[i].breakLog) {
36097 ranu 665 
                                var status = (data[i].breakStatus || '').toLowerCase();
666 
                                if (status.indexOf('available') >= 0) {
36099 ranu 667 
                                    rowStyle = 'style="background-color: #f8d7da; color: #721c24;"'; // Light red
36097 ranu 668 
                                } else if (status.indexOf('trying') >= 0) {
669 
                                    rowStyle = 'style="background-color: #fff3cd; color: #856404;"'; // Light yellow
670 
                                } else if (status.indexOf('logged out') >= 0 || status.indexOf('logout') >= 0) {
671 
                                    rowStyle = 'style="background-color: #e2e3e5; color: #383d41;"'; // Light grey
672 
                                } else if (status.indexOf('break') >= 0) {
673 
                                    rowStyle = 'style="background-color: #ffe5cc; color: #c45200;"'; // Light orange
674 
                                } else {
675 
                                    rowStyle = 'style="background-color: #f8f9fa; color: #333;"'; // Default light
676 
                                }
36098 ranu 677 
                                var timeRange = data[i].callDateTime || '-';
678 
                                if (data[i].breakEndTime) {
679 
                                    // Extract just the time part from callDateTime and show range
680 
                                    var startTime = timeRange.split(' ').slice(-2).join(' '); // Get "hh:mm AM/PM"
681 
                                    timeRange = startTime + ' to ' + data[i].breakEndTime;
682 
                                }
683 
                                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>';
35984 ranu 684 
                            } else {
685 
                                if (data[i].recordingUrl) {
686 
                                    recordingHtml = '<audio controls style="width: 150px; height: 30px;"><source src="' + data[i].recordingUrl + '" type="audio/mpeg">Your browser does not support audio.</audio>';
687 
                                }
688 
                                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 689 
                            }
690 
                        }
691 
                        html += '</tbody></table>';
692 
                        document.getElementById('calledDetailsContent').innerHTML = html;
693 
                    } else {
694 
                        document.getElementById('calledDetailsContent').innerHTML = '<p>No called partners found for selected date.</p>';
695 
                    }
696 
                })
697 
                .catch(function () {
698 
                    document.getElementById('calledDetailsContent').innerHTML = '<p>Error loading details. Please try again.</p>';
699 
                });
700 
    }
35852 ranu 701 
 
702 
    // Auto-refresh agent status every 30 seconds
703 
    function refreshAgentStatus() {
704 
        fetch('/indent/rbm_call_target/get_agent_statuses')
35879 ranu 705 
                .then(function (response) {
706 
                    return response.json();
707 
                })
708 
                .then(function (data) {
709 
                    if (data && data.length > 0) {
710 
                        for (var i = 0; i < data.length; i++) {
711 
                            var agent = data[i];
712 
                            var statusCell = document.querySelector('.agent-status-cell[data-authid="' + agent.authId + '"]');
713 
                            var timeCell = document.querySelector('.time-in-status-cell[data-authid="' + agent.authId + '"]');
35852 ranu 714 
 
35879 ranu 715 
                            if (statusCell) {
716 
                                var statusHtml = getStatusBadge(agent.agentStatus);
717 
                                statusCell.innerHTML = statusHtml;
718 
                            }
719 
                            if (timeCell) {
720 
                                timeCell.textContent = agent.timeInStatus || '-';
721 
                            }
35852 ranu 722 
                        }
723 
                    }
35879 ranu 724 
                })
725 
                .catch(function (err) {
726 
                    console.error('Error refreshing agent status:', err);
727 
                });
35852 ranu 728 
    }
729 
 
730 
    function getStatusBadge(status) {
731 
        if (!status) return '<span class="badge" style="background-color: #6c757d; color: white;">-</span>';
732 
 
733 
        var bgColor = '#6c757d';
734 
        var textColor = 'white';
35994 ranu 735 
        var lowerStatus = status.toLowerCase();
35852 ranu 736 
 
737 
        if (status === 'On Call') {
738 
            bgColor = '#28a745';
739 
        } else if (status === 'Available') {
35994 ranu 740 
            bgColor = '#dc3545';
741 
        } else if (lowerStatus.indexOf('break') !== -1) {
36057 ranu 742 
            bgColor = '#fd7e14';  // Orange for break
35852 ranu 743 
        } else if (status === 'Logged Out') {
36057 ranu 744 
            bgColor = '#6c757d';  // Grey for logged out
35852 ranu 745 
        } else if (status === 'Trying') {
36057 ranu 746 
            bgColor = '#ffc107';  // Yellow for trying
747 
            textColor = 'black';
35852 ranu 748 
        }
749 
 
750 
        return '<span class="badge" style="background-color: ' + bgColor + '; color: ' + textColor + ';">' + status + '</span>';
751 
    }
752 
 
36234 ranu 753 
    // Refresh every 10 seconds (only for today's view)
754 
        #if($isToday)
36057 ranu 755 
    setInterval(refreshAgentStatus, 10000);
35852 ranu 756 
 
757 
    // Initial refresh after page load
758 
    setTimeout(refreshAgentStatus, 2000);
36234 ranu 759 
        #end
35852 ranu 760 
 
761 
    // Download All Call Data by Date
762 
    function downloadCallData() {
763 
        var selectedDate = document.getElementById('downloadDate').value;
764 
        if (!selectedDate) {
765 
            alert('Please select a date');
766 
            return;
767 
        }
768 
        window.location.href = '/indent/rbm_call_target/download_call_data?date=' + selectedDate;
769 
    }
35631 ranu 770 
</script>