Subversion Repositories SmartDukaan

Rev

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

Rev Author Line No. Line
36645 vikas 1
<script>
2
    if (!window.google || !window.google.maps) {
3
        var s = document.createElement('script');
36693 vikas 4
        s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly';
36645 vikas 5
        document.head.appendChild(s);
6
    }
7
</script>
8
 
9
<div class="col-lg-12">
36712 vikas 10
    <table class="table table-border table-condensed table-bordered table-hover" id="beatReportTable" style="width:100%">
36645 vikas 11
        <thead>
12
        <tr>
13
            <th>User Name</th>
36761 ranu 14
            <th>Beat</th>
15
            <th>Day</th>
16
            <th>Planned</th>
36709 vikas 17
            <th>Punch In/Out</th>
36645 vikas 18
            <th>Total Visits</th>
19
            <th>Completed Visits</th>
20
            <th>Pending Visits</th>
21
            <th>Deferred</th>
36761 ranu 22
            <th>Action</th>
36645 vikas 23
        </tr>
24
        </thead>
25
        <tbody>
26
        #set($rowIndex = 0)
27
        #foreach($row in $reportRows)
28
            <tr>
29
                <td><a href="javascript:void(0);" class="beat-user-detail-link" data-userid="$row.get('userId')" style="color:#2c3e50; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("username")</a></td>
36761 ranu 30
                #set($userBeats = $row.get("beats"))
31
                #if($userBeats && $userBeats.size() > 0)
32
                    <td>
33
                        #foreach($b in $userBeats)
34
                            <span style="display:inline-block;width:8px;height:8px;border-radius:2px;background:#if($b.get(
35
                                'beatColor'))$b.get('beatColor')#else#3498db#end;margin-right:5px;"></span>$b.get(
36
                            "beatName")<br>
37
                        #end
38
                    </td>
39
                    <td>
40
                        #foreach($b in $userBeats)
41
                            $b.get("dayNumber")<br>
42
                        #end
43
                    </td>
44
                    <td>
45
                        #foreach($b in $userBeats)
46
                            <strong>$b.get("totalCount")</strong><br>
47
                        #end
48
                    </td>
49
                #else
50
                    <td colspan="3" style="color:#999; text-align:center; font-style:italic;">No beat scheduled</td>
51
                #end
36709 vikas 52
                <td>
53
                    #if($row.get("punchInTime") != "")<span class="label label-success">$row.get("punchInTime")</span>#else<span style="color:#ccc;">--</span>#end
54
                    #if($row.get("punchOutTime") != "")<span class="label label-danger">$row.get("punchOutTime")</span>#else<span style="color:#ccc;">--</span>#end
55
                </td>
36645 vikas 56
                <td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="total" style="color:#1abc9c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("total")</a></td>
57
                <td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="completed" style="color:#1abc9c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("completed")</a></td>
58
                <td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="pending" style="color:#e67e22; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("pending")</a></td>
59
                <td><a href="javascript:void(0);" class="beat-detail-link" data-row="$rowIndex" data-type="deferred" style="color:#e74c3c; font-weight:bold; text-decoration:underline; cursor:pointer;">$row.get("deferred")</a></td>
36761 ranu 60
                <td style="white-space:nowrap;">
61
                    <a href="javascript:void(0);" class="beat-map-link" data-row="$rowIndex" title="Map"
62
                       style="cursor:pointer; margin-right:6px;"><i class="fa fa-map-marker"
63
                                                                    style="color:#1abc9c; font-size:18px;"></i></a>
64
                    #if($userBeats && $userBeats.size() > 0)
65
                        #foreach($b in $userBeats)
66
                            <button class="btn btn-xs btn-info beat-view-calendar" title="View Calendar"
67
                                    data-userid="$b.get('authUserId')"
68
                                    data-username="$row.get('username').replace('"', '\"')"><i class="fa fa-eye"></i>
69
                            </button>
70
                            <button class="btn btn-xs btn-warning beat-edit-on-date" title="Edit Beat"
71
                                    data-userid="$b.get('authUserId')"
72
                                    data-username="$row.get('username').replace('"', '\"')"
73
                                    data-beatid="$b.get('beatId')"
74
                                    data-date="$b.get('scheduleDate')"><i class="fa fa-edit"></i></button>
75
                            <button class="btn btn-xs btn-success beat-assign-visit" title="Assign Visit"
76
                                    data-userid="$b.get('authUserId')"
77
                                    data-username="$row.get('username').replace('"', '\"')"
78
                                    data-beatid="$b.get('beatId')"
79
                                    data-date="$b.get('scheduleDate')"><i class="fa fa-plus-circle"></i></button>
80
                            <br>
81
                        #end
82
                    #end
83
                </td>
36645 vikas 84
            </tr>
85
 
86
            <script>
87
                window.beatReportData = window.beatReportData || {};
88
                window.beatReportData[$rowIndex] = {
89
                    username: "$row.get('username').replace('"', '\"')",
90
                    total: [
91
                        #foreach($lt in $row.get("totalList"))
92
                        { taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
93
                        #end
94
                    ],
95
                    completed: [
96
                        #foreach($lt in $row.get("completedList"))
97
                        { taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
98
                        #end
99
                    ],
100
                    pending: [
101
                        #foreach($lt in $row.get("pendingList"))
102
                        { taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
103
                        #end
104
                    ],
105
                    deferred: [
106
                        #foreach($lt in $row.get("deferredList"))
107
                        { taskName: "$!lt.getTaskName().replace('"', '\"')", markType: "$!lt.getMarkType()", address: "$!lt.getAddress().replace('"', '\"').replace("'", "\'")", checkInTime: "$!lt.getCheckInTime()", checkOutTime: "$!lt.getCheckOutTime()", timeSpent: "$!lt.getTimeSpent()", taskType: "$!lt.getTaskType()", visitLocation: "$!lt.getVisitLocation()", checkInLatLng: "$!lt.getCheckInLatLng()", taskDescription: "$!lt.getTaskDescription().replace('"', '\"')", attachment: "$!lt.getAttachment()" },
108
                        #end
109
                    ]
110
                };
111
            </script>
112
            #set($rowIndex = $rowIndex + 1)
113
        #end
114
        </tbody>
115
    </table>
116
</div>
117
 
118
<!-- Map Modal -->
119
<div class="modal fade" id="beatMapModal" tabindex="-1" role="dialog">
120
    <div class="modal-dialog modal-lg" role="document" style="width:90%;">
121
        <div class="modal-content">
122
            <div class="modal-header" style="background:#1abc9c; color:white;">
123
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
124
                <h4 class="modal-title" id="beatMapModalTitle">Visit Locations</h4>
125
            </div>
126
            <div class="modal-body" style="padding:0;">
127
                <div id="beatMapContainer" style="height:500px; width:100%;"></div>
128
                <div id="beatMapInfo" style="padding:6px 15px; background:#fff3cd; border-top:1px solid #ddd; color:#856404; display:none;"></div>
129
                <div style="padding:8px 15px; background:#f5f5f5; border-top:1px solid #ddd;">
130
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#4285F4;"></i> Check In</span>
131
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#0F9D58;"></i> Completed</span>
132
                    <span style="margin-right:15px;"><i class="fa fa-circle" style="color:#F4B400;"></i> Pending</span>
133
                    <span><i class="fa fa-circle" style="color:#DB4437;"></i> Deferred</span>
134
                </div>
135
            </div>
136
            <div class="modal-footer">
137
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
138
            </div>
139
        </div>
140
    </div>
141
</div>
142
 
143
<!-- Detail Popup Modal -->
144
<div class="modal fade" id="beatDetailModal" tabindex="-1" role="dialog">
145
    <div class="modal-dialog modal-lg" role="document">
146
        <div class="modal-content">
147
            <div class="modal-header" style="background:#1abc9c; color:white;">
148
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
149
                <h4 class="modal-title" id="beatDetailModalTitle">Visit Details</h4>
150
            </div>
151
            <div class="modal-body">
152
                <table class="table table-bordered table-condensed table-striped" id="beatDetailTable" style="width:100%">
153
                    <thead>
154
                    <tr>
155
                        <th>#</th>
36669 vikas 156
                        <th>Agenda/Partner Name</th>
36645 vikas 157
                        <th>Type</th>
158
                        <th>Status</th>
159
                        <th>Address</th>
160
                        <th>Check In</th>
161
                        <th>Check Out</th>
162
                        <th>Time Spent</th>
163
                        <th>Description</th>
36736 ranu 164
                        <th>ETA</th>
36645 vikas 165
                        <th>Attachment</th>
166
                    </tr>
167
                    </thead>
168
                    <tbody id="beatDetailTableBody"></tbody>
169
                </table>
170
            </div>
171
            <div class="modal-footer">
172
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
173
            </div>
174
        </div>
175
    </div>
176
</div>
177
 
178
<script>
179
    $('#beatReportTable').DataTable({
180
        "scrollX": true,
36685 vikas 181
        "pageLength": 50,
36645 vikas 182
        "bPaginate": true,
183
        "bLengthChange": true,
184
        "bFilter": true,
185
        "bInfo": true,
186
        "bAutoWidth": false
187
    });
188
 
189
    var beatMapMarkerColors = {
190
        'PENDING': '#F4B400',
191
        'DEFERRED': '#DB4437',
192
        'CHECKIN': '#4285F4',
36783 vikas 193
        'CHECKIN_CHECKOUT': '#0F9D58',
36645 vikas 194
        'CHECKIN-CHECKOUT': '#0F9D58',
195
        'CHECKOUT': '#0F9D58'
196
    };
197
 
198
    function getMarkerColor(markType) {
199
        return beatMapMarkerColors[markType] || '#999999';
200
    }
201
 
202
    function createColoredMarkerIcon(color, label) {
203
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="42" viewBox="0 0 32 42">' +
204
            '<path d="M16 0C7.2 0 0 7.2 0 16c0 12 16 26 16 26s16-14 16-26C32 7.2 24.8 0 16 0z" fill="' + color + '"/>' +
205
            '<circle cx="16" cy="15" r="10" fill="white"/>' +
206
            '<text x="16" y="20" text-anchor="middle" font-size="12" font-weight="bold" fill="' + color + '">' + label + '</text>' +
207
            '</svg>';
208
        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
209
    }
210
 
211
    function getLatLng(item) {
212
        var loc = item.visitLocation || item.checkInLatLng || '';
213
        if (!loc || loc === '0.0000,0.0000') return null;
214
        var parts = loc.split(',');
215
        if (parts.length !== 2) return null;
216
        var lat = parseFloat(parts[0].trim());
217
        var lng = parseFloat(parts[1].trim());
218
        if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) return null;
219
        return { lat: lat, lng: lng };
220
    }
221
 
222
    $(document).on('click', '.beat-map-link', function () {
223
        var rowIndex = $(this).data('row');
224
        var data = window.beatReportData[rowIndex];
225
        if (!data) return;
226
 
227
        var items = data.total || [];
228
        var username = data.username;
229
        $('#beatMapModalTitle').text(username + ' - Visit Locations (' + items.length + ')');
230
 
231
        if (typeof google === 'undefined' || !google.maps) {
232
            alert('Google Maps is still loading. Please try again in a moment.');
233
            return;
234
        }
235
 
236
        $('#beatMapModal').modal('show');
237
 
238
        setTimeout(function () {
239
            var mapDiv = document.getElementById('beatMapContainer');
240
            var bounds = new google.maps.LatLngBounds();
241
            var hasMarkers = false;
242
 
243
            var map = new google.maps.Map(mapDiv, {
244
                zoom: 10,
245
                center: { lat: 20.5937, lng: 78.9629 },
246
                mapTypeId: 'roadmap'
247
            });
248
 
249
            var infoWindow = new google.maps.InfoWindow();
250
 
251
            for (var i = 0; i < items.length; i++) {
252
                var item = items[i];
253
                var pos = getLatLng(item);
254
                if (!pos) continue;
255
 
256
                hasMarkers = true;
257
                bounds.extend(pos);
258
 
259
                var color = getMarkerColor(item.markType);
260
                var marker = new google.maps.Marker({
261
                    position: pos,
262
                    map: map,
263
                    title: item.taskName || item.markType,
264
                    icon: {
265
                        url: createColoredMarkerIcon(color, (i + 1)),
266
                        scaledSize: new google.maps.Size(32, 42),
267
                        anchor: new google.maps.Point(16, 42)
268
                    }
269
                });
270
 
271
                (function (m, itm, idx) {
272
                    google.maps.event.addListener(m, 'click', function () {
273
                        var content = '<div style="min-width:200px;">' +
274
                            '<strong>' + (idx + 1) + '. ' + (itm.taskName || '--') + '</strong><br>' +
275
                            '<b>Status:</b> ' + (itm.markType || '--') + '<br>' +
276
                            '<b>Address:</b> ' + (itm.address || '--') + '<br>' +
277
                            '<b>Check In:</b> ' + (itm.checkInTime || '--') + '<br>' +
278
                            '<b>Check Out:</b> ' + (itm.checkOutTime || '--') + '<br>' +
279
                            '<b>Time Spent:</b> ' + (itm.timeSpent || '--') +
280
                            '</div>';
281
                        infoWindow.setContent(content);
282
                        infoWindow.open(map, m);
283
                    });
284
                })(marker, item, i);
285
            }
286
 
287
            var markerCount = 0;
288
            for (var j = 0; j < items.length; j++) { if (getLatLng(items[j])) markerCount++; }
289
 
290
            var infoDiv = document.getElementById('beatMapInfo');
291
            if (markerCount < items.length) {
292
                infoDiv.innerHTML = '<i class="fa fa-exclamation-triangle"></i> Showing ' + markerCount + ' of ' + items.length + ' visits on map. ' + (items.length - markerCount) + ' visits have no location data.';
293
                infoDiv.style.display = 'block';
294
            } else {
295
                infoDiv.style.display = 'none';
296
            }
297
 
298
            if (hasMarkers) {
299
                map.fitBounds(bounds);
300
                if (markerCount === 1) {
301
                    map.setZoom(14);
302
                }
303
            }
304
        }, 400);
305
    });
306
 
307
    $(document).on('click', '.beat-detail-link', function () {
308
        var rowIndex = $(this).data('row');
309
        var type = $(this).data('type');
310
        var data = window.beatReportData[rowIndex];
311
        if (!data) return;
312
 
313
        var items = data[type] || [];
314
        var username = data.username;
315
 
316
        var typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
317
        $('#beatDetailModalTitle').text(username + ' - ' + typeLabel + ' Visits (' + items.length + ')');
318
 
319
        var tbody = '';
320
        for (var i = 0; i < items.length; i++) {
321
            var item = items[i];
322
            tbody += '<tr>' +
323
                '<td>' + (i + 1) + '</td>' +
324
                '<td>' + (item.taskName || '--') + '</td>' +
325
                '<td>' + (item.taskType || '--') + '</td>' +
326
                '<td>' + (item.markType || '--') + '</td>' +
327
                '<td>' + (item.address || '--') + '</td>' +
328
                '<td>' + (item.checkInTime || '--') + '</td>' +
329
                '<td>' + (item.checkOutTime || '--') + '</td>' +
330
                '<td>' + (item.timeSpent || '--') + '</td>' +
331
                '<td>' + (item.taskDescription || '--') + '</td>' +
36666 vikas 332
                '<td>' + (item.estimatedTime || '--') + '</td>' +
36645 vikas 333
                '<td>' + (item.attachment ? '<a href="https://partners.smartdukaan.com/document/' + item.attachment + '" target="_blank"><i class="fa fa-paperclip"></i> View</a>' : '--') + '</td>' +
334
                '</tr>';
335
        }
336
        if (items.length === 0) {
337
            tbody = '<tr><td colspan="10" class="text-center">No records found</td></tr>';
338
        }
339
        $('#beatDetailTableBody').html(tbody);
340
        $('#beatDetailModal').modal('show');
341
    });
36693 vikas 342
 
36696 vikas 343
    // --- Live Tracking ---
344
    var dataLiveMap = null;
345
    var dataLiveUserId = null;
346
    var dataLiveUsername = '';
347
    var dataLiveInterval = null;
348
 
349
    function dataGetMarkerColor(markType) {
36783 vikas 350
        if (markType === 'CHECKIN-CHECKOUT' || markType === 'CHECKIN_CHECKOUT' || markType === 'CHECKOUT') return '#0F9D58';
36696 vikas 351
        if (markType === 'PENDING' || markType === 'CHECKIN') return '#4285F4';
352
        if (markType === 'DEFERRED') return '#DB4437';
353
        if (markType === 'PUNCHIN') return '#1abc9c';
354
        if (markType === 'PUNCHOUT') return '#e74c3c';
355
        return '#F4B400';
356
    }
357
 
358
    function dataCreateMarkerIcon(color, label) {
359
        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="28" height="40" viewBox="0 0 28 40">' +
360
            '<path d="M14 0C6.268 0 0 6.268 0 14c0 10.5 14 26 14 26s14-15.5 14-26C28 6.268 21.732 0 14 0z" fill="' + color + '"/>' +
361
            '<circle cx="14" cy="14" r="7" fill="white"/>' +
362
            '<text x="14" y="18" text-anchor="middle" font-size="10" font-weight="bold" fill="' + color + '">' + label + '</text></svg>';
363
        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);
364
    }
365
 
366
    function dataFormatEpoch(ts) {
367
        if (!ts) return 'N/A';
368
        var n = parseFloat(ts);
369
        if (isNaN(n)) return ts;
370
        if (n < 1e12) n = n * 1000;
371
        var d = new Date(n);
372
        return d.getHours().toString().padStart(2,'0') + ':' + d.getMinutes().toString().padStart(2,'0') + ':' + d.getSeconds().toString().padStart(2,'0');
373
    }
374
 
375
    function dataFormatDuration(ms) {
376
        var sec = Math.floor(ms / 1000);
377
        var h = Math.floor(sec / 3600);
378
        var m = Math.floor((sec % 3600) / 60);
379
        var s = sec % 60;
380
        if (h > 0) return h + 'h ' + m + 'm';
381
        if (m > 0) return m + 'm ' + s + 's';
382
        return s + 's';
383
    }
384
 
385
    function dataHaversine(lat1, lon1, lat2, lon2) {
386
        var R = 6371000;
387
        var dLat = (lat2 - lat1) * Math.PI / 180;
388
        var dLon = (lon2 - lon1) * Math.PI / 180;
389
        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
390
                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
391
                Math.sin(dLon/2) * Math.sin(dLon/2);
392
        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
393
    }
394
 
395
    function dataDetectStops(points, radiusM, minTimeMs) {
396
        var stops = [];
397
        var i = 0;
398
        while (i < points.length) {
399
            var cluster = [points[i]];
400
            var cLat = points[i].lat, cLng = points[i].lng;
401
            var j = i + 1;
402
            while (j < points.length) {
403
                if (dataHaversine(cLat, cLng, points[j].lat, points[j].lng) <= radiusM) {
404
                    cluster.push(points[j]);
405
                    j++;
406
                } else {
407
                    break;
408
                }
409
            }
410
            if (cluster.length >= 2) {
411
                var t0 = parseFloat(cluster[0].ts);
412
                var t1 = parseFloat(cluster[cluster.length - 1].ts);
413
                if (t0 < 1e12) t0 *= 1000;
414
                if (t1 < 1e12) t1 *= 1000;
415
                var duration = t1 - t0;
416
                if (duration >= minTimeMs) {
417
                    var avgLat = 0, avgLng = 0;
418
                    cluster.forEach(function(p) { avgLat += p.lat; avgLng += p.lng; });
419
                    stops.push({
420
                        lat: avgLat / cluster.length, lng: avgLng / cluster.length,
421
                        startTime: t0, endTime: t1, duration: duration, pointCount: cluster.length
422
                    });
423
                }
424
            }
425
            i = j;
426
        }
427
        return stops;
428
    }
429
 
430
    function dataClearOverlays() {
431
        if (!dataLiveMap) return;
432
        if (dataLiveMap._markers) dataLiveMap._markers.forEach(function(m) { m.setMap(null); });
433
        if (dataLiveMap._polyline) dataLiveMap._polyline.setMap(null);
434
        if (dataLiveMap._gpsDots) dataLiveMap._gpsDots.forEach(function(m) { m.setMap(null); });
435
        if (dataLiveMap._stopMarkers) dataLiveMap._stopMarkers.forEach(function(m) { m.setMap(null); });
436
        if (dataLiveMap._currentMarker) dataLiveMap._currentMarker.setMap(null);
437
        if (dataLiveMap._directionsRenderer) dataLiveMap._directionsRenderer.setMap(null);
438
        dataLiveMap._markers = [];
439
        dataLiveMap._gpsDots = [];
440
        dataLiveMap._stopMarkers = [];
441
    }
442
 
443
    function dataLoadLiveTracking(userId, username) {
444
        var selectedDate = $('#beat-report-date').val();
445
        $.ajax({
446
            url: context + "/beat-report/live-tracking",
447
            type: "GET", dataType: "json",
448
            data: { userId: userId, date: selectedDate },
449
            success: function(data) { dataRenderMap(data, username); },
450
            error: function() { $('#dataLiveInfo').html('<span style="color:red;">Failed to load tracking data.</span>'); }
451
        });
452
    }
453
 
454
    function dataRenderMap(data, username) {
455
        var visits = data.visits || [];
456
        var pathPoints = data.pathPoints || [];
457
 
458
        if (!dataLiveMap) {
459
            dataLiveMap = new google.maps.Map(document.getElementById('dataLiveMap'), {
460
                zoom: 12, center: { lat: 20.5937, lng: 78.9629 },
461
                mapTypeControl: true, streetViewControl: false
462
            });
463
        }
464
        dataClearOverlays();
465
 
466
        var bounds = new google.maps.LatLngBounds();
467
        var hasPoints = false;
468
        var visitIdx = 0;
469
        var visitCoords = [];
470
 
471
        for (var i = 0; i < visits.length; i++) {
472
            var v = visits[i];
473
            if (!v.lat || !v.lng) continue;
474
            var lat = parseFloat(v.lat), lng = parseFloat(v.lng);
475
            if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) continue;
476
            hasPoints = true;
477
            var pos = { lat: lat, lng: lng };
478
            bounds.extend(pos);
479
            visitCoords.push(pos);
480
            var label = v.markType === 'PUNCHIN' ? 'P' : (v.markType === 'PUNCHOUT' ? 'X' : String(++visitIdx));
481
            var marker = new google.maps.Marker({
482
                position: pos, map: dataLiveMap,
483
                icon: { url: dataCreateMarkerIcon(dataGetMarkerColor(v.markType), label), scaledSize: new google.maps.Size(28, 40), anchor: new google.maps.Point(14, 40) },
484
                title: v.taskName + ' (' + v.markType + ')', zIndex: 100
485
            });
486
            var infoContent = '<div style="font-size:13px; max-width:280px;">' +
487
                '<strong>' + (v.taskName || '') + '</strong><br>' +
488
                '<span class="label" style="background:' + dataGetMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span>' +
489
                (v.taskType ? ' <span class="label label-default">' + v.taskType + '</span>' : '') + '<br>' +
490
                (v.checkInTime ? '<i class="fa fa-sign-in" style="color:#27ae60;"></i> In: <strong>' + v.checkInTime + '</strong><br>' : '') +
491
                (v.checkOutTime ? '<i class="fa fa-sign-out" style="color:#e74c3c;"></i> Out: <strong>' + v.checkOutTime + '</strong><br>' : '') +
492
                (v.timeSpent ? '<i class="fa fa-clock-o" style="color:#f39c12;"></i> Time Spent: <strong>' + v.timeSpent + '</strong><br>' : '') +
493
                (v.transitTime ? '<i class="fa fa-car" style="color:#3498db;"></i> Transit: <strong>' + v.transitTime + '</strong><br>' : '') +
494
                (v.totalDistance && v.totalDistance !== '0.0' ? '<i class="fa fa-road" style="color:#8e44ad;"></i> Distance: <strong>' + v.totalDistance + ' km</strong><br>' : '') +
495
                (v.address ? '<i class="fa fa-map-marker" style="color:#e74c3c;"></i> ' + v.address : '') + '</div>';
496
            (function(m, c) {
497
                var iw = new google.maps.InfoWindow({ content: c });
498
                m.addListener('click', function() { iw.open(dataLiveMap, m); });
499
            })(marker, infoContent);
500
            dataLiveMap._markers.push(marker);
501
        }
502
 
503
        if (visitCoords.length >= 2) {
504
            var origin = visitCoords[0], destination = visitCoords[visitCoords.length - 1];
505
            var waypoints = [];
506
            for (var wi = 1; wi < visitCoords.length - 1; wi++) waypoints.push({ location: visitCoords[wi], stopover: true });
507
            var ds = new google.maps.DirectionsService();
508
            var dr = new google.maps.DirectionsRenderer({
509
                map: dataLiveMap, suppressMarkers: true,
510
                polylineOptions: { strokeColor: '#8e44ad', strokeOpacity: 0.7, strokeWeight: 4 },
511
                preserveViewport: true
512
            });
513
            dataLiveMap._directionsRenderer = dr;
514
            ds.route({ origin: origin, destination: destination, waypoints: waypoints, travelMode: google.maps.TravelMode.DRIVING, optimizeWaypoints: false },
515
                function(result, status) { if (status === 'OK') dr.setDirections(result); });
516
        }
517
 
518
        var totalGpsDistanceM = 0, accuracySum = 0, accuracyCount = 0, stopsDetected = [];
519
        if (pathPoints.length > 0) {
520
            var validPoints = [];
521
            for (var j = 0; j < pathPoints.length; j++) {
522
                var pt = pathPoints[j];
523
                var pLat = parseFloat(pt.lat), pLng = parseFloat(pt.lng);
524
                if (isNaN(pLat) || isNaN(pLng) || (pLat === 0 && pLng === 0)) continue;
525
                var acc = parseFloat(pt.accuracy);
526
                if (!isNaN(acc)) { accuracySum += acc; accuracyCount++; }
527
                validPoints.push({ lat: pLat, lng: pLng, ts: pt.timestamp, accuracy: pt.accuracy });
528
                bounds.extend({ lat: pLat, lng: pLng });
529
                hasPoints = true;
530
            }
531
            for (var d = 1; d < validPoints.length; d++) {
532
                totalGpsDistanceM += dataHaversine(validPoints[d-1].lat, validPoints[d-1].lng, validPoints[d].lat, validPoints[d].lng);
533
            }
534
            if (validPoints.length > 0) {
535
                var pathCoords = validPoints.map(function(p) { return { lat: p.lat, lng: p.lng }; });
536
                dataLiveMap._polyline = new google.maps.Polyline({
537
                    path: pathCoords, geodesic: true, strokeColor: '#e74c3c', strokeOpacity: 0.7, strokeWeight: 3, zIndex: 50, map: dataLiveMap
538
                });
539
                dataLiveMap._gpsDots = [];
540
                for (var gi = 0; gi < validPoints.length; gi++) {
541
                    var gp = validPoints[gi];
542
                    var heading = 0;
543
                    if (gi < validPoints.length - 1) {
544
                        heading = google.maps.geometry.spherical.computeHeading(
545
                            new google.maps.LatLng(gp.lat, gp.lng), new google.maps.LatLng(validPoints[gi+1].lat, validPoints[gi+1].lng));
546
                    } else if (gi > 0) {
547
                        heading = google.maps.geometry.spherical.computeHeading(
548
                            new google.maps.LatLng(validPoints[gi-1].lat, validPoints[gi-1].lng), new google.maps.LatLng(gp.lat, gp.lng));
549
                    }
550
                    var dot = new google.maps.Marker({
551
                        position: { lat: gp.lat, lng: gp.lng }, map: dataLiveMap,
552
                        icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, scale: 3, fillColor: '#e74c3c', fillOpacity: 1, strokeColor: '#b71c1c', strokeWeight: 1, rotation: heading },
553
                        zIndex: 80
554
                    });
555
                    (function(marker, point, idx) {
556
                        var iw = new google.maps.InfoWindow({
557
                            content: '<div style="font-size:12px;"><strong>GPS Point #' + (idx+1) + '</strong><br>' +
558
                                '<i class="fa fa-clock-o"></i> ' + dataFormatEpoch(point.ts) + '<br>' +
559
                                '<i class="fa fa-crosshairs"></i> Accuracy: ' + (point.accuracy || 'N/A') + 'm<br>' +
560
                                '<i class="fa fa-map-marker"></i> ' + point.lat.toFixed(6) + ', ' + point.lng.toFixed(6) + '</div>'
561
                        });
562
                        marker.addListener('click', function() { iw.open(dataLiveMap, marker); });
563
                    })(dot, gp, gi);
564
                    dataLiveMap._gpsDots.push(dot);
565
                }
566
                stopsDetected = dataDetectStops(validPoints, 50, 5 * 60 * 1000);
567
                dataLiveMap._stopMarkers = [];
568
                for (var si = 0; si < stopsDetected.length; si++) {
569
                    var stop = stopsDetected[si];
570
                    var sm = new google.maps.Marker({
571
                        position: { lat: stop.lat, lng: stop.lng }, map: dataLiveMap,
572
                        icon: { path: google.maps.SymbolPath.CIRCLE, scale: 14, fillColor: '#f39c12', fillOpacity: 0.9, strokeColor: '#e67e22', strokeWeight: 2 },
573
                        label: { text: dataFormatDuration(stop.duration), fontSize: '9px', fontWeight: 'bold', color: '#000' },
574
                        title: 'Stopped for ' + dataFormatDuration(stop.duration), zIndex: 200
575
                    });
576
                    (function(marker, s) {
577
                        var iw = new google.maps.InfoWindow({
578
                            content: '<div style="font-size:13px;"><strong><i class="fa fa-pause-circle" style="color:#f39c12;"></i> Stationary Stop</strong><br>' +
579
                                '<i class="fa fa-clock-o"></i> Duration: <strong>' + dataFormatDuration(s.duration) + '</strong><br>' +
580
                                '<i class="fa fa-sign-in"></i> From: <strong>' + new Date(s.startTime).toLocaleTimeString() + '</strong><br>' +
581
                                '<i class="fa fa-sign-out"></i> To: <strong>' + new Date(s.endTime).toLocaleTimeString() + '</strong><br>' +
582
                                '<i class="fa fa-map-marker"></i> ' + s.lat.toFixed(6) + ', ' + s.lng.toFixed(6) + '<br>' +
583
                                '<i class="fa fa-dot-circle-o"></i> Points in cluster: ' + s.pointCount + '</div>'
584
                        });
585
                        marker.addListener('click', function() { iw.open(dataLiveMap, marker); });
586
                    })(sm, stop);
587
                    dataLiveMap._stopMarkers.push(sm);
588
                }
589
                var lastPoint = pathCoords[pathCoords.length - 1];
590
                dataLiveMap._currentMarker = new google.maps.Marker({
591
                    position: lastPoint, map: dataLiveMap,
592
                    icon: { url: '${rc.contextPath}/resources/images/Bike-Icon-SD.png', scaledSize: new google.maps.Size(40, 40), anchor: new google.maps.Point(20, 20) },
593
                    title: 'Last Known Location', zIndex: 999
594
                });
595
                var lastGp = validPoints[validPoints.length - 1];
596
                var curIw = new google.maps.InfoWindow({
597
                    content: '<div style="font-size:13px;"><strong><i class="fa fa-crosshairs" style="color:#27ae60;"></i> Last Known Location</strong><br>' +
598
                        '<i class="fa fa-clock-o"></i> Time: ' + dataFormatEpoch(lastGp.ts) + '<br>' +
599
                        '<i class="fa fa-crosshairs"></i> Accuracy: ' + (lastGp.accuracy || 'N/A') + 'm</div>'
600
                });
601
                dataLiveMap._currentMarker.addListener('click', function() { curIw.open(dataLiveMap, dataLiveMap._currentMarker); });
602
            }
603
        }
604
 
605
        if (hasPoints) dataLiveMap.fitBounds(bounds);
606
 
607
        var totalVisits = visits.filter(function(v) { return v.markType !== 'PUNCHIN' && v.markType !== 'PUNCHOUT'; }).length;
36783 vikas 608
        var completedVisits = visits.filter(function(v) { return v.markType === 'CHECKIN-CHECKOUT' || v.markType === 'CHECKIN_CHECKOUT' || v.markType === 'CHECKOUT'; }).length;
36696 vikas 609
        var now = new Date();
610
        var timeStr = now.getHours().toString().padStart(2,'0') + ':' + now.getMinutes().toString().padStart(2,'0') + ':' + now.getSeconds().toString().padStart(2,'0');
611
        var avgAccuracy = accuracyCount > 0 ? (accuracySum / accuracyCount).toFixed(0) : null;
612
        var accuracyLabel = '', accuracyBadge = '';
613
        if (avgAccuracy) {
614
            if (avgAccuracy <= 10) { accuracyLabel = 'High'; accuracyBadge = 'background:#27ae60;'; }
615
            else if (avgAccuracy <= 30) { accuracyLabel = 'Good'; accuracyBadge = 'background:#2ecc71;'; }
616
            else if (avgAccuracy <= 100) { accuracyLabel = 'Average'; accuracyBadge = 'background:#f39c12;'; }
617
            else { accuracyLabel = 'Low'; accuracyBadge = 'background:#e74c3c;'; }
618
        }
619
        var totalGpsKm = (totalGpsDistanceM / 1000).toFixed(2);
620
        var infoHtml = '<strong>' + username + '</strong> | Visits: <strong>' + totalVisits + '</strong> | Completed: <strong>' + completedVisits + '</strong>';
621
        if (pathPoints.length > 0) {
622
            infoHtml += ' | GPS Distance: <strong>' + totalGpsKm + ' km</strong>';
623
            infoHtml += ' | Points: <strong>' + pathPoints.length + '</strong>';
624
            if (accuracyLabel) infoHtml += ' | Accuracy: <span class="label" style="' + accuracyBadge + ' color:white; padding:2px 8px; border-radius:3px; font-size:11px;">' + accuracyLabel + '</span> (' + avgAccuracy + 'm)';
625
            if (stopsDetected.length > 0) infoHtml += ' | <span style="color:#f39c12;"><i class="fa fa-pause-circle"></i></span> Stops: <strong>' + stopsDetected.length + '</strong>';
626
            infoHtml += ' | <img src="${rc.contextPath}/resources/images/Bike-Icon-SD.png" style="height:16px; vertical-align:middle;"> Last Known';
627
        } else {
628
            infoHtml += ' | <span style="color:#999;"><i class="fa fa-exclamation-triangle"></i> No GPS data yet</span>';
629
        }
630
        infoHtml += ' | <span style="color:#e74c3c;"><i class="fa fa-arrow-right" style="font-size:10px;"></i></span> GPS Trail';
631
        if (visitCoords.length > 1) infoHtml += ' | <span style="background:#8e44ad; display:inline-block; width:14px; height:3px; vertical-align:middle; margin:0 2px;"></span> Route';
632
        var locToggle = data.locationToggleCount || 0;
633
        if (locToggle > 0) infoHtml += ' | <span class="label" style="background:#e74c3c; color:white; padding:2px 8px; border-radius:3px; font-size:11px;"><i class="fa fa-power-off"></i> Loc Off: ' + locToggle + '</span>';
634
        infoHtml += ' | <span style="color:#999;">Updated: ' + timeStr + '</span>';
635
        $('#dataLiveInfo').html(infoHtml);
636
        if (pathPoints.length > 0 && pathPoints.length < 10) {
637
            $('#dataLiveInfo').append(
638
                '<div style="margin-top:4px; padding:4px 8px; background:#fff3cd; border:1px solid #ffc107; border-radius:3px; font-size:11px; color:#856404;">' +
639
                '<i class="fa fa-exclamation-triangle"></i> Received less data points from device due to: Low Battery level, GPS/location switched off, or phone automatically switched off the location service.</div>');
640
        }
641
    }
642
 
643
    function dataStartAutoRefresh() {
644
        dataStopAutoRefresh();
645
        if ($('#dataAutoRefresh').is(':checked') && dataLiveUserId) {
646
            dataLiveInterval = setInterval(function() { dataLoadLiveTracking(dataLiveUserId, dataLiveUsername); }, 30000);
647
        }
648
    }
649
    function dataStopAutoRefresh() {
650
        if (dataLiveInterval) { clearInterval(dataLiveInterval); dataLiveInterval = null; }
651
    }
652
 
653
    $(document).on('click', '.data-live-tracking-btn', function() {
654
        dataLiveUserId = $(this).data('userid');
655
        dataLiveUsername = $(this).data('username');
656
        $('#dataLiveTitle').html('<img src="${rc.contextPath}/resources/images/Bike-Icon-SD.png" style="height:24px; vertical-align:middle; margin-right:6px;"> Live Tracking - ' + dataLiveUsername);
657
        $('#dataLiveInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');
658
        $('#dataLiveModal').modal('show');
659
        setTimeout(function() {
660
            dataLiveMap = null;
661
            if (window.google && window.google.maps) {
662
                dataLoadLiveTracking(dataLiveUserId, dataLiveUsername);
663
                dataStartAutoRefresh();
664
            } else {
665
                var s = document.createElement('script');
666
                s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly';
667
                s.onload = function() { dataLoadLiveTracking(dataLiveUserId, dataLiveUsername); dataStartAutoRefresh(); };
668
                document.head.appendChild(s);
669
            }
670
        }, 300);
671
    });
672
 
673
    $(document).on('click', '#dataRefreshBtn', function() {
674
        if (dataLiveUserId) {
675
            $('#dataLiveInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Refreshing...</div>');
676
            dataLoadLiveTracking(dataLiveUserId, dataLiveUsername);
677
        }
678
    });
679
    $(document).on('change', '#dataAutoRefresh', function() {
680
        $(this).is(':checked') ? dataStartAutoRefresh() : dataStopAutoRefresh();
681
    });
682
    $('#dataLiveModal').on('hidden.bs.modal', function() { dataStopAutoRefresh(); dataLiveUserId = null; });
36645 vikas 683
</script>
36696 vikas 684
 
685
<!-- Live Tracking Modal -->
686
<div class="modal fade" id="dataLiveModal" tabindex="-1" role="dialog">
687
    <div class="modal-dialog modal-lg" role="document" style="width:90%;">
688
        <div class="modal-content">
689
            <div class="modal-header" style="background:#27ae60; color:white;">
690
                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>
691
                <h4 class="modal-title" id="dataLiveTitle"><img src="${rc.contextPath}/resources/images/Bike-Icon-SD.png" style="height:24px; vertical-align:middle; margin-right:6px;"> Live Tracking</h4>
692
            </div>
693
            <div class="modal-body" style="padding:0;">
694
                <div id="dataLiveInfo" style="padding:8px 15px; background:#f8f9fa; border-bottom:1px solid #ddd; font-size:13px;"></div>
695
                <div id="dataLiveMap" style="height:500px; width:100%;"></div>
696
            </div>
697
            <div class="modal-footer">
698
                <label style="float:left; margin-top:7px; font-weight:normal; font-size:13px;">
699
                    <input type="checkbox" id="dataAutoRefresh" checked style="margin-right:5px;"> Auto-refresh (30s)
700
                </label>
701
                <button type="button" class="btn btn-primary" id="dataRefreshBtn"><i class="fa fa-refresh"></i> Refresh</button>
702
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
703
            </div>
704
        </div>
705
    </div>
706
</div>
36761 ranu 707
 
708
<!-- Beat calendar modal (iframe loads /beatPlanWindow with auto-selected user) -->
709
<div class="modal fade" id="reportBeatCalendarModal" tabindex="-1" style="overflow-y:auto;">
710
    <div class="modal-dialog" style="width:95%; max-width:1300px; margin-top:20px;">
711
        <div class="modal-content">
712
            <div class="modal-header">
713
                <button type="button" class="close" data-dismiss="modal"
714
                        onclick="$('#reportBeatCalendarFrame').attr('src','');">&times;
715
                </button>
716
                <h4 class="modal-title" id="reportBeatCalendarTitle">Calendar</h4>
717
            </div>
718
            <div class="modal-body" style="padding:0;">
719
                <iframe id="reportBeatCalendarFrame" style="width:100%; height:80vh; border:none;"></iframe>
720
            </div>
721
        </div>
722
    </div>
723
</div>
724
 
725
<script>
726
    $(document).on('click', '.beat-view-calendar', function () {
727
        var userId = $(this).data('userid');
728
        var userName = $(this).data('username') || '';
729
        var url = context + '/beatPlanWindow?autoUserId=' + userId
730
                + '&autoUserName=' + encodeURIComponent(userName);
731
        $('#reportBeatCalendarTitle').text('Calendar - ' + userName);
732
        $('#reportBeatCalendarFrame').attr('src', url);
733
        $('#reportBeatCalendarModal').modal('show');
734
    });
735
 
736
    $(document).on('click', '.beat-edit-on-date', function () {
737
        var userId = $(this).data('userid');
738
        var userName = $(this).data('username') || '';
739
        var beatId = $(this).data('beatid');
740
        var date = $(this).data('date');
741
        var url = context + '/beatPlanWindow?autoUserId=' + userId
742
                + '&autoUserName=' + encodeURIComponent(userName)
743
                + '&editBeatId=' + beatId + '&editDate=' + date;
744
        $('#reportBeatCalendarTitle').text('Edit Beat - ' + userName + ' on ' + date);
745
        $('#reportBeatCalendarFrame').attr('src', url);
746
        $('#reportBeatCalendarModal').modal('show');
747
    });
748
 
749
    // ---------- ASSIGN VISIT (mirrors Beat Day View; IDs/classes prefixed with `r` to avoid collisions) ----------
750
    var rAvContext = {authUserId: null, userName: '', date: '', beatId: null, allParties: [], agendaOptions: []};
751
 
752
    var R_AGENDA_MULTISELECT_OPTS = {
753
        includeSelectAllOption: false,
754
        maxHeight: 220,
755
        buttonWidth: '240px',
756
        numberDisplayed: 2,
757
        nonSelectedText: 'Pick agenda(s)',
758
        nSelectedText: ' agendas',
759
        allSelectedText: 'All agendas',
760
        enableFiltering: true,
761
        enableCaseInsensitiveFiltering: true
762
    };
763
 
764
    function rAgendaSelectHtml(p) {
765
        var preset = {};
766
        (p.existingAgendas || []).forEach(function (a) {
767
            preset[a] = true;
768
        });
769
        var html = '<select multiple class="r-av-party-agenda" data-fofoid="' + p.fofoStoreId + '">';
770
        rAvContext.agendaOptions.forEach(function (opt) {
771
            html += '<option value="' + opt + '"' + (preset[opt] ? ' selected' : '') + '>' + opt + '</option>';
772
        });
773
        html += '</select>';
774
        return html;
775
    }
776
 
777
    function rRebuildDefaultAgenda() {
778
        var $sel = $('#rAvDefaultAgenda');
779
        try {
780
                $sel.multiselect('destroy');
781
        } catch (e) {
782
        }
783
        var html = '';
784
        rAvContext.agendaOptions.forEach(function (opt) {
785
            html += '<option value="' + opt + '">' + opt + '</option>';
786
        });
787
            $sel.html(html);
788
        var defaultOpts = $.extend({}, R_AGENDA_MULTISELECT_OPTS);
789
        defaultOpts.nonSelectedText = 'Pick agenda(s) to apply';
790
            $sel.multiselect(defaultOpts);
791
    }
792
 
793
    function rInitRowMultiselects() {
794
        $('.r-av-party-agenda').each(function () {
795
            var $sel = $(this);
796
            try {
797
                    $sel.multiselect('destroy');
798
            } catch (e) {
799
            }
800
                $sel.multiselect(R_AGENDA_MULTISELECT_OPTS);
801
        });
802
    }
803
 
804
    function rUpdateAvSelectedCount() {
805
        var n = $('.r-av-party-chk:checked').length;
806
        $('#rAvSelectedCount').text(n + ' selected');
807
        $('#rAvSubmit').prop('disabled', n === 0);
808
    }
809
 
810
    function rRenderAvParties(list) {
811
        if (!list || list.length === 0) {
812
            $('#rAvPartyList').html('<div style="padding:20px; color:#999; text-align:center;">No parties found.</div>');
813
            return;
814
        }
815
        var html = '<table class="table table-condensed table-hover" style="margin-bottom:0; font-size:13px;">';
816
        html += '<thead><tr>'
817
                + '<th style="width:30px;"><input type="checkbox" id="rAvSelectAll" title="Select all"></th>'
818
                + '<th>Code</th><th>Outlet</th><th>City</th>'
819
                + '<th style="width:260px;">Agenda</th>'
820
                + '<th style="width:260px;">Description</th>'
821
                + '</tr></thead><tbody>';
822
        list.forEach(function (p) {
823
            var safeName = (p.outletName || '').replace(/"/g, '&quot;');
824
            var existingDesc = (p.existingDescription || '').replace(/"/g, '&quot;');
825
            html += '<tr>'
826
                    + '<td><input type="checkbox" class="r-av-party-chk" '
827
                    + 'data-fofoid="' + p.fofoStoreId + '" '
828
                    + 'data-name="' + safeName + '" '
829
                    + 'data-lat="' + (p.latitude || '') + '" '
830
                    + 'data-lng="' + (p.longitude || '') + '"></td>'
831
                    + '<td>' + (p.code || '') + '</td>'
832
                    + '<td>' + (p.outletName || '') + '</td>'
833
                    + '<td>' + (p.city || '') + '</td>'
834
                    + '<td>' + rAgendaSelectHtml(p) + '</td>'
835
                    + '<td><textarea class="form-control input-sm r-av-party-desc"'
836
                    + ' data-fofoid="' + p.fofoStoreId + '"'
837
                    + ' rows="2" placeholder="Optional notes..."'
838
                    + ' style="resize:vertical; min-height:34px;">' + existingDesc + '</textarea></td>'
839
                    + '</tr>';
840
        });
841
        html += '</tbody></table>';
842
        $('#rAvPartyList').html(html);
843
        rInitRowMultiselects();
844
        rUpdateAvSelectedCount();
845
    }
846
 
847
    $(document).on('click', '.beat-assign-visit', function () {
848
        rAvContext.authUserId = $(this).data('userid');
849
        rAvContext.userName = $(this).data('username') || '';
850
        rAvContext.date = $(this).data('date');
851
        rAvContext.beatId = $(this).data('beatid');
852
        rAvContext.allParties = [];
853
 
854
        $('#rAvTitle').text('Assign Visit - ' + rAvContext.userName + ' on ' + rAvContext.date);
855
        $('#rAvSearch').val('');
856
        $('#rAvPartyList').html('<div style="padding:20px; color:#999; text-align:center;">Loading parties...</div>');
857
        $('#rAvMsg').text('');
858
        $('#rAvSelectedCount').text('0 selected');
859
        $('#rAvSubmit').prop('disabled', true);
860
        $('#rAssignVisitModal').modal('show');
861
 
862
        $.get(context + '/beatPlan/assignVisit/parties', {
863
            authUserId: rAvContext.authUserId,
864
            date: rAvContext.date,
865
            beatId: rAvContext.beatId
866
        }).done(function (r) {
867
            var data = r.response || r;
868
            rAvContext.allParties = (data.parties || []).filter(function (p) {
869
                return !p.inBeat;
870
            });
871
            rAvContext.agendaOptions = data.agendaOptions || [];
872
            if (!data.dtrUserId) {
873
                $('#rAvPartyList').html('<div style="padding:20px; color:#c62828; text-align:center;">'
874
                        + 'This user has no dtr.users record (cannot create visit tasks).</div>');
875
                return;
876
            }
877
            rRebuildDefaultAgenda();
878
            rRenderAvParties(rAvContext.allParties);
879
        }).fail(function (xhr) {
880
            $('#rAvPartyList').html('<div style="padding:20px; color:#c62828; text-align:center;">'
881
                    + 'Error loading parties: ' + (xhr.responseText || xhr.statusText) + '</div>');
882
        });
883
    });
884
 
885
    $(document).on('input', '#rAvSearch', function () {
886
        var q = $(this).val().toLowerCase().trim();
887
        if (!q) {
888
            rRenderAvParties(rAvContext.allParties);
889
            return;
890
        }
891
        var filtered = rAvContext.allParties.filter(function (p) {
892
            return (p.code || '').toLowerCase().indexOf(q) !== -1
893
                    || (p.outletName || '').toLowerCase().indexOf(q) !== -1
894
                    || (p.city || '').toLowerCase().indexOf(q) !== -1;
895
        });
896
        rRenderAvParties(filtered);
897
    });
898
 
899
    $(document).on('change', '#rAvSelectAll', function () {
900
        $('.r-av-party-chk').prop('checked', this.checked);
901
        rUpdateAvSelectedCount();
902
    });
903
    $(document).on('change', '.r-av-party-chk', rUpdateAvSelectedCount);
904
 
905
    $(document).on('click', '#rAvApplyAgenda', function () {
906
        var defValues = $('#rAvDefaultAgenda').val() || [];
907
        if (defValues.length === 0) {
908
            alert('Pick at least one agenda above first');
909
            return;
910
        }
911
        $('.r-av-party-chk:checked').each(function () {
912
            var fid = $(this).data('fofoid');
913
            var $sel = $('.r-av-party-agenda[data-fofoid="' + fid + '"]');
914
            var existing = $sel.val() || [];
915
            var merged = existing.slice();
916
            defValues.forEach(function (v) {
917
                if (merged.indexOf(v) === -1) merged.push(v);
918
            });
919
                $sel.val(merged);
920
            try {
921
                    $sel.multiselect('refresh');
922
            } catch (e) {
923
            }
924
        });
925
    });
926
 
927
    $(document).on('click', '#rAvSubmit', function () {
928
        var picks = [];
929
        var missing = 0;
930
        $('.r-av-party-chk:checked').each(function () {
931
            var fid = parseInt($(this).data('fofoid'));
932
            var agendas = $('.r-av-party-agenda[data-fofoid="' + fid + '"]').val() || [];
933
            var description = ($('.r-av-party-desc[data-fofoid="' + fid + '"]').val() || '').trim();
934
            if (agendas.length === 0) missing++;
935
            picks.push({
936
                fofoStoreId: fid,
937
                outletName: $(this).data('name'),
938
                latitude: $(this).data('lat') ? String($(this).data('lat')) : null,
939
                longitude: $(this).data('lng') ? String($(this).data('lng')) : null,
940
                agendas: agendas,
941
                description: description
942
            });
943
        });
944
        if (picks.length === 0) return;
945
        if (missing > 0) {
946
            if (!confirm(missing + ' selected row(s) have no agenda. Submit anyway with default "Visit"?')) return;
947
        }
948
        var btn = $(this);
949
        btn.prop('disabled', true).text('Assigning...');
950
        $('#rAvMsg').text('');
951
        $.ajax({
952
            url: context + '/beatPlan/assignVisit/submit',
953
            type: 'POST',
954
            contentType: 'application/json',
955
            data: JSON.stringify({
956
                authUserId: rAvContext.authUserId,
957
                planDate: rAvContext.date,
958
                parties: picks
959
            }),
960
            success: function (r) {
961
                var d = r.response || r;
962
                $('#rAvMsg').html('<span style="color:#2e7d32;">' + (d.message || 'Saved') + '</span>');
963
                btn.prop('disabled', false).text('Save Assignments');
964
                setTimeout(function () {
965
                    $('#rAssignVisitModal').modal('hide');
966
                }, 1500);
967
            },
968
            error: function (xhr) {
969
                var msg = 'Failed';
970
                try {
971
                    msg = (JSON.parse(xhr.responseText).response.message) || msg;
972
                } catch (e) {
973
                }
974
                $('#rAvMsg').html('<span style="color:#c62828;">' + msg + '</span>');
975
                btn.prop('disabled', false).text('Save Assignments');
976
            }
977
        });
978
    });
979
</script>
980
 
981
<!-- Assign Visit Modal (mirrors Beat Day View; prefixed IDs to avoid collisions) -->
982
<div class="modal fade" id="rAssignVisitModal" tabindex="-1" style="overflow-y:auto;">
983
    <div class="modal-dialog" style="width:90%; max-width:900px; margin-top:30px;">
984
        <div class="modal-content">
985
            <div class="modal-header">
986
                <button type="button" class="close" data-dismiss="modal">&times;</button>
987
                <h4 class="modal-title" id="rAvTitle">Assign Visit</h4>
988
            </div>
989
            <div class="modal-body">
990
                <div style="display:flex; gap:10px; align-items:flex-start; margin-bottom:10px;">
991
                    <div style="flex:1;">
992
                        <label style="font-size:11px; color:#666; font-weight:normal; margin-bottom:2px;">
993
                            Agenda - applies to selected rows
994
                        </label>
995
                        <select id="rAvDefaultAgenda" multiple></select>
996
                    </div>
997
                    <button type="button" class="btn btn-default btn-sm" id="rAvApplyAgenda" style="margin-top:18px;"
998
                            title="Add the picked agendas into all selected rows (merges with existing)">
999
                        Apply to Selected
1000
                    </button>
1001
                </div>
1002
                <div style="display:flex; gap:10px; align-items:center; margin-bottom:10px;">
1003
                    <input type="text" id="rAvSearch" class="form-control input-sm"
1004
                           placeholder="Search by code, outlet name or city..." style="flex:1;">
1005
                    <span id="rAvSelectedCount" style="font-size:12px; color:#666;">0 selected</span>
1006
                </div>
1007
                <div id="rAvPartyList"
1008
                     style="max-height:50vh; overflow-y:auto; border:1px solid #e5e5e5; border-radius:4px;"></div>
1009
                <div id="rAvMsg" style="margin-top:10px; font-size:12px;"></div>
1010
            </div>
1011
            <div class="modal-footer">
1012
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
1013
                <button type="button" class="btn btn-success" id="rAvSubmit" disabled>Save Assignments</button>
1014
            </div>
1015
        </div>
1016
    </div>
1017
</div>