Subversion Repositories SmartDukaan

<section class="wrapper">

    <div class="row">

        <div class="col-lg-12">

            <h3 class="page-header"><i class="icon_document_alt"></i> $username - Visit Details ($reportDate)</h3>

            <ol class="breadcrumb">

                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>

                <li><a href="javascript:void(0);" class="beat-report">Beat Report</a></li>

                <li><i class="fa fa-user"></i>$username</li>

            </ol>

        </div>

    </div>

    <br>

    <div class="row col-lg-12" style="float: right;">

        <div class="col-lg-2">

            <label>Level</label>

            <select id="user-detail-level" class="form-control" data-selected="$!userLevel">

                <option value="">All Levels</option>

                #foreach($et in $escalationTypes)

                    <option value="$et" #if($et.name() == $userLevel)selected#end>$et</option>

                #end

            </select>

        </div>

        <div class="col-lg-3">

            <label>User</label>

            <select id="user-detail-user" class="form-control" data-selected-auth="$!authUserId">

                <option value="$!authUserId">$username</option>

            </select>

        </div>

        <div class="col-lg-3">

            <label>Select Date</label>

            <div class="input-group">

                <input type="date" id="user-detail-date" class="form-control" value="$reportDate" data-userid="$userId">

                <span class="input-group-btn">

                    <button type="button" class="btn btn-info user-detail-refresh" data-userid="$userId" style="margin-left:10px;">

                        <i class="fa fa-refresh"></i> Refresh

                    </button>

                    <button type="button" class="btn btn-success live-tracking-btn" data-userid="$userId" data-username="$username" style="margin-left:5px;">

                        <i class="fa fa-map-marker"></i> Live Tracking

                    </button>

                </span>

            </div>

        </div>

    </div>

    <br><br><br>

    <div class="col-lg-12">

        <div class="row" style="margin-bottom:15px;">

            <div class="col-lg-3">

                <div class="panel panel-default" style="text-align:center; padding:10px;">

                    <h4 style="margin:0; color:#1abc9c; font-weight:bold;">$visits.size()</h4>

                    <small>Total Visits</small>

                </div>

            </div>

            #set($completedCount = 0)

            #set($pendingCount = 0)

            #set($deferredCount = 0)

            #foreach($v in $visits)

                #if($v.getMarkType() == "CHECKIN-CHECKOUT" || $v.getMarkType() == "CHECKIN_CHECKOUT" || $v.getMarkType() == "CHECKOUT")

                    #set($completedCount = $completedCount + 1)

                #elseif($v.getMarkType() == "PENDING" || $v.getMarkType() == "CHECKIN")

                    #set($pendingCount = $pendingCount + 1)

                #elseif($v.getMarkType() == "DEFERRED")

                    #set($deferredCount = $deferredCount + 1)

                #end

            #end

            <div class="col-lg-3">

                <div class="panel panel-default" style="text-align:center; padding:10px;">

                    <h4 style="margin:0; color:#27ae60; font-weight:bold;">$completedCount</h4>

                    <small>Completed</small>

                </div>

            </div>

            <div class="col-lg-3">

                <div class="panel panel-default" style="text-align:center; padding:10px;">

                    <h4 style="margin:0; color:#e67e22; font-weight:bold;">$pendingCount</h4>

                    <small>Pending</small>

                </div>

            </div>

            <div class="col-lg-3">

                <div class="panel panel-default" style="text-align:center; padding:10px;">

                    <h4 style="margin:0; color:#e74c3c; font-weight:bold;">$deferredCount</h4>

                    <small>Deferred</small>

                </div>

            </div>

        </div>

        <table class="table table-border table-condensed table-bordered table-striped" id="userDetailTable" style="width:100%">

            <thead>

            <tr >

                <th>#</th>

                <th>Agenda</th>

                <th>Partner Name</th>

                <th>Description</th>

                <th>Status</th>

                <th>Address</th>

                <th>Check In Time</th>

                <th>Check Out Time</th>

                <th>Time Spent at Outlet</th>

                <th>Transit Time</th>

                <th>Distance (km)</th>

                <th>Estimated Time</th>

            </tr>

            </thead>

            <tbody>

            #if($punchIn)

                <tr style="background:#d5f5e3;">

                    <td>--</td>

                    <td>--</td>

                    <td><strong>PUNCH IN</strong></td>

                    <td>$!punchIn.getTaskDescription()</td>

                    <td><span class="label label-info">PUNCHIN</span> #if($punchIn.getAttachment() && $punchIn.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$punchIn.getAttachment()" data-checkin-latlng="$!punchIn.getCheckInLatLng()" data-visit-location="$!punchIn.getVisitLocation()" data-tracking-id="$punchIn.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#27ae60; margin-left:5px;"></i></a>#end</td>

                    <td>$!punchIn.getAddress()</td>

                    <td>$!punchIn.getCheckInTime()</td>

                    <td>--</td>

                    <td>--</td>

                    <td>--</td>

                    <td>$!punchIn.getTotalDistance()</td>

                    <td>$!punchIn.getEstimatedTime()</td>

                </tr>

            #end

            #set($idx = 1)

            #foreach($v in $visits)

                #set($tn = "$!v.getTaskName()")

                #if($tn.contains("|"))

                    #set($pipeIdx = $tn.indexOf("|"))

                    #set($afterPipe = $pipeIdx + 1)

                    #set($agendaPart = $tn.substring(0, $pipeIdx).trim())

                    #set($partnerPart = $tn.substring($afterPipe).trim())

                #else

                    #set($agendaPart = "--")

                    #set($partnerPart = $tn)

                #end

                <tr>

                    <td>$idx</td>

                    <td>$agendaPart</td>

                    <td>$partnerPart</td>

                    <td>#if($v.getTaskDescription() && $v.getTaskDescription() != "")#if($v.getTaskDescription().length() > 50)<span class="desc-short">$v.getTaskDescription().substring(0, 50)... <a href="javascript:void(0);" class="read-more-link" style="color:#3498db;">read more</a></span><span class="desc-full" style="display:none;">$v.getTaskDescription() <a href="javascript:void(0);" class="read-less-link" style="color:#3498db;">read less</a></span>#else$v.getTaskDescription()#end#else--#end</td>

                    <td>

                    #if($v.getAttachment() && $v.getAttachment() != "")

                        <img src="/download-attachment?documentId=$v.getAttachment()" class="view-attachment-link" alt="IMAGE" width="50" data-attachment="$v.getAttachment()">

                    #end

                        #if($v.getMarkType() == "CHECKIN-CHECKOUT" || $v.getMarkType() == "CHECKIN_CHECKOUT" || $v.getMarkType() == "CHECKOUT")

                            <span class="label label-success">$v.getMarkType()</span>

                        #elseif($v.getMarkType() == "PENDING" || $v.getMarkType() == "CHECKIN")

                            <span class="label label-warning">$v.getMarkType()</span>

                        #elseif($v.getMarkType() == "DEFERRED")

                            <span class="label label-danger">$v.getMarkType()</span>

                        #else

                            <span class="label label-default">$!v.getMarkType()</span>

                        #end

                        #if($v.getTaskType() == "attendance")

                            <span class="label label-success">$v.getTaskType()</span>

                        #elseif($v.getTaskType() == "lead")

                            <span class="label label-primary">$v.getTaskType()</span>

                        #else

                            <span class="label label-warning">$!v.getTaskType()</span>

                        #end

                        <a href="javascript:void(0);" class="beat-history-link" data-userid="$userId" data-taskid="$v.getTaskId()" data-tasktype="$!v.getTaskType()" data-taskname="$!v.getTaskName()" title="View History" style="margin-left:5px;"><i class="fa fa-history" style="color:#3498db; font-size:14px;"></i></a>

                        #if($v.getAttachment() && $v.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$v.getAttachment()" data-checkin-latlng="$!v.getCheckInLatLng()" data-visit-location="$!v.getVisitLocation()" data-tracking-id="$v.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#27ae60; margin-left:3px; font-size:14px;"></i></a>#end

                    </td>

                    <td>$!v.getAddress()</td>

                    <td>$!v.getCheckInTime()</td>

                    <td>$!v.getCheckOutTime()</td>

                    <td>$!v.getTimeSpent()</td>

                    <td>$!v.getTransitTime()</td>

                    <td>$!v.getTotalDistance()</td>

                    <td>$!v.getEstimatedTime()</td>

                </tr>

                #set($idx = $idx + 1)

            #end

            #if($punchOut)

                <tr style="background:#fadbd8;">

                    <td>--</td>

                    <td>--</td>

                    <td><strong>PUNCH OUT</strong></td>

                    <td>$!punchOut.getTaskDescription()</td>

                    <td><span class="label label-danger">PUNCHOUT</span> #if($punchOut.getAttachment() && $punchOut.getAttachment() != "")<a href="javascript:void(0);" class="view-attachment-link" data-attachment="$punchOut.getAttachment()" data-checkin-latlng="$!punchOut.getCheckInLatLng()" data-visit-location="$!punchOut.getVisitLocation()" data-tracking-id="$punchOut.getId()" title="View Attachment"><i class="fa fa-paperclip" style="color:#27ae60; margin-left:5px;"></i></a>#end</td>

                    <td>$!punchOut.getAddress()</td>

                    <td>$!punchOut.getCheckInTime()</td>

                    <td>--</td>

                    <td>--</td>

                    <td>--</td>

                    <td>$!punchOut.getTotalDistance()</td>

                    <td>$!punchOut.getEstimatedTime()</td>

                </tr>

            #end

            </tbody>

            <tfoot>

                <tr style="background:#f2f3f4; font-weight:bold;">

                    <td colspan="6" style="text-align:right;">Totals</td>

                    <td>--</td>

                    <td>--</td>

                    <td>$totalTimeSpentStr</td>

                    <td>$totalTransitStr</td>

                    <td>$totalDistanceStr km | Visits: $visitCount | Leads: $leadCount</td>

                    <td></td>

                </tr>

            </tfoot>

        </table>

    </div>

</section>

<!-- Task History Modal -->

<div class="modal fade" id="taskHistoryModal" tabindex="-1" role="dialog">

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

        <div class="modal-content">

            <div class="modal-header" style="background:#3498db; color:white;">

                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>

                <h4 class="modal-title" id="taskHistoryModalTitle">Task History</h4>

            </div>

            <div class="modal-body" id="taskHistoryModalBody">

                <div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i> Loading...</div>

            </div>

            <div class="modal-footer">

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

            </div>

        </div>

    </div>

</div>

<!-- Live Tracking Modal -->

<div class="modal fade" id="liveTrackingModal" tabindex="-1" role="dialog">

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

        <div class="modal-content">

            <div class="modal-header" style="background:#27ae60; color:white;">

                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>

                <h4 class="modal-title" id="liveTrackingModalTitle"><img src="${rc.contextPath}/resources/images/salesman.png" style="height:24px; vertical-align:middle; margin-right:6px;"> Live Tracking</h4>

            </div>

            <div class="modal-body" style="padding:0;">

                <div id="liveTrackingInfo" style="padding:8px 15px; background:#f8f9fa; border-bottom:1px solid #ddd; font-size:13px;"></div>

                <div id="liveTrackingMap" style="height:500px; width:100%;"></div>

            </div>

            <div class="modal-footer">

                #*<label style="float:left; margin-top:7px; font-weight:normal; font-size:13px;">

                    <input type="checkbox" id="autoRefreshToggle" style="margin-right:5px;"> Auto-refresh (30s)

                </label>*#

                <button type="button" class="btn btn-primary" id="refreshTrackingBtn"><i class="fa fa-refresh"></i> Refresh</button>

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

            </div>

        </div>

    </div>

</div>

<!-- Attachment Viewer Modal -->

<div class="modal fade" id="attachmentViewerModal" tabindex="-1" role="dialog">

    <div class="modal-dialog" role="document" style="width:600px;">

        <div class="modal-content">

            <div class="modal-header" style="background:#e67e22; color:white;">

                <button type="button" class="close" data-dismiss="modal" style="color:white;">&times;</button>

                <h4 class="modal-title"><i class="fa fa-paperclip"></i> Attachment</h4>

            </div>

            <div class="modal-body" style="text-align:center; padding:15px;">

                <img id="attachmentImage" src="" style="max-width:100%; max-height:450px; border:1px solid #ddd; border-radius:4px;" />

                <div id="attachmentDistanceInfo" style="margin-top:10px; font-size:13px;"></div>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-success" id="approveCheckinBtn" style="display:none;">

                    <i class="fa fa-check"></i> Approve

                </button>

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

            </div>

        </div>

    </div>

</div>

<script>

    $('#userDetailTable').DataTable({

        "scrollX": true,

        "pageLength": 50,

        "bPaginate": true,

        "bLengthChange": true,

        "bFilter": true,

        "bInfo": true,

        "bAutoWidth": false,

        "ordering": false

    });

    $('.view-attachment-link').each(function () {

        var checkinLatLng = $(this).data('checkin-latlng') || '';

        var visitLocation = $(this).data('visit-location') || '';

        if (checkinLatLng && visitLocation && checkinLatLng.toString().indexOf(',') > 0 && visitLocation.toString().indexOf(',') > 0) {

            var cParts = checkinLatLng.toString().split(',');

            var vParts = visitLocation.toString().split(',');

            var cLat = parseFloat(cParts[0]), cLng = parseFloat(cParts[1]);

            var vLat = parseFloat(vParts[0]), vLng = parseFloat(vParts[1]);

            if (!isNaN(cLat) && !isNaN(cLng) && !isNaN(vLat) && !isNaN(vLng) && !(cLat === 0 && cLng === 0) && !(vLat === 0 && vLng === 0)) {

                if (haversineMeters(cLat, cLng, vLat, vLng) > 50) {

                    $(this).find('i').css('color', '#e74c3c');

                }

            }

        }

    });

    (function () {

        var level = $('#user-detail-level').data('selected');

        var selectedAuth = $('#user-detail-user').data('selected-auth');

        if (level && selectedAuth) {

            $.ajax({

                url: context + "/beatPlan/getAuthUsers", type: "GET", dataType: "json",

                data: { categoryId: 4, escalationType: level },

                success: function (r) {

                    var data = r.response || r;

                    var html = '<option value="">Select User</option>';

                    data.forEach(function (u) {

                        html += '<option value="' + u.id + '"' + (u.id == selectedAuth ? ' selected' : '') + '>' + u.name + '</option>';

                    });

                    $('#user-detail-user').html(html);

                }

            });

        }

    })();

    // Fragment is re-injected with .html(), which re-runs this script; clear the

    // namespace first so handlers replace rather than stack.

    $(document).off('.beatreportuserdetail');

    $(document).on('click.beatreportuserdetail', '.read-more-link', function () {

        $(this).closest('td').find('.desc-short').hide();

        $(this).closest('td').find('.desc-full').show();

    });

    $(document).on('click.beatreportuserdetail', '.read-less-link', function () {

        $(this).closest('td').find('.desc-full').hide();

        $(this).closest('td').find('.desc-short').show();

    });

    $(document).off('click.beatdetail').off('click.livetrack');

    $(document).on('click.beatdetail', '.beat-history-link', function () {

        var userId = $(this).data('userid');

        var taskId = $(this).data('taskid');

        var taskType = $(this).data('tasktype');

        var taskName = $(this).data('taskname');

        $('#taskHistoryModalTitle').text('History - ' + taskName);

        $('#taskHistoryModalBody').html('<div class="text-center"><i class="fa fa-spinner fa-spin fa-2x"></i> Loading...</div>');

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

        doGetAjaxRequestHandler(context + "/beat-report/task-history?userId=" + userId + "&taskId=" + taskId + "&taskType=" + encodeURIComponent(taskType),

            function (response) {

                $('#taskHistoryModalBody').html(response);

            });

    });

    var liveTrackingMap = null;

    var liveTrackingUserId = null;

    var liveTrackingInterval = null;

    function getMarkerColor(markType) {

        if (markType === 'CHECKIN-CHECKOUT' || markType === 'CHECKIN_CHECKOUT' || markType === 'CHECKOUT') return '#0F9D58';

        if (markType === 'PENDING' || markType === 'CHECKIN') return '#4285F4';

        if (markType === 'DEFERRED') return '#DB4437';

        if (markType === 'PUNCHIN') return '#1abc9c';

        if (markType === 'PUNCHOUT') return '#e74c3c';

        return '#F4B400';

    }

    function createTrackingMarkerIcon(color, label) {

        var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="42" height="60" viewBox="0 0 42 60">' +

            '<path d="M21 0C9.402 0 0 9.402 0 21c0 15.75 21 39 21 39s21-23.25 21-39C42 9.402 32.598 0 21 0z" fill="' + color + '"/>' +

            '<circle cx="21" cy="21" r="10" fill="white"/>' +

            '<text x="21" y="26" text-anchor="middle" font-size="14" font-weight="bold" fill="' + color + '">' + label + '</text></svg>';

        return 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg);

    }

    function loadLiveTracking(userId, username) {

        var selectedDate = $('#user-detail-date').val();

        $.ajax({

            url: context + "/beat-report/live-tracking",

            type: "GET",

            dataType: "json",

            data: { userId: userId, date: selectedDate },

            success: function (data) {

                renderLiveTrackingMap(data, username);

            },

            error: function () {

                $('#liveTrackingInfo').html('<span style="color:red;">Failed to load tracking data.</span>');

            }

        });

    }

    function clearMapOverlays() {

        if (!liveTrackingMap) return;

        if (liveTrackingMap._markers) {

            liveTrackingMap._markers.forEach(function (m) { m.setMap(null); });

        }

        if (liveTrackingMap._polyline) {

            liveTrackingMap._polyline.setMap(null);

        }

        if (liveTrackingMap._gpsDots) {

            liveTrackingMap._gpsDots.forEach(function (m) { m.setMap(null); });

        }

        if (liveTrackingMap._stopMarkers) {

            liveTrackingMap._stopMarkers.forEach(function (m) { m.setMap(null); });

        }

        if (liveTrackingMap._currentMarker) {

            liveTrackingMap._currentMarker.setMap(null);

        }

        if (liveTrackingMap._directionsRenderer) {

            liveTrackingMap._directionsRenderer.setMap(null);

        }

        liveTrackingMap._markers = [];

        liveTrackingMap._gpsDots = [];

        liveTrackingMap._stopMarkers = [];

    }

    function formatEpoch(ts) {

        if (!ts) return 'N/A';

        var n = parseFloat(ts);

        if (isNaN(n)) return ts;

        if (n < 1e12) n = n * 1000;

        var d = new Date(n);

        return d.getHours().toString().padStart(2,'0') + ':' + d.getMinutes().toString().padStart(2,'0') + ':' + d.getSeconds().toString().padStart(2,'0');

    }

    function formatDuration(ms) {

        var sec = Math.floor(ms / 1000);

        var h = Math.floor(sec / 3600);

        var m = Math.floor((sec % 3600) / 60);

        var s = sec % 60;

        if (h > 0) return h + 'h ' + m + 'm';

        if (m > 0) return m + 'm ' + s + 's';

        return s + 's';

    }

    function haversineMeters(lat1, lon1, lat2, lon2) {

        var R = 6371000;

        var dLat = (lat2 - lat1) * Math.PI / 180;

        var dLon = (lon2 - lon1) * Math.PI / 180;

        var a = Math.sin(dLat/2) * Math.sin(dLat/2) +

                Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *

                Math.sin(dLon/2) * Math.sin(dLon/2);

        return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));

    }

    function detectStops(points, radiusM, minTimeMs) {

        var stops = [];

        var i = 0;

        while (i < points.length) {

            var cluster = [points[i]];

            var cLat = points[i].lat, cLng = points[i].lng;

            var j = i + 1;

            while (j < points.length) {

                if (haversineMeters(cLat, cLng, points[j].lat, points[j].lng) <= radiusM) {

                    cluster.push(points[j]);

                    j++;

                } else {

                    break;

                }

            }

            if (cluster.length >= 2) {

                var t0 = parseFloat(cluster[0].ts);

                var t1 = parseFloat(cluster[cluster.length - 1].ts);

                if (t0 < 1e12) t0 *= 1000;

                if (t1 < 1e12) t1 *= 1000;

                var duration = t1 - t0;

                if (duration >= minTimeMs) {

                    var avgLat = 0, avgLng = 0;

                    cluster.forEach(function(p) { avgLat += p.lat; avgLng += p.lng; });

                    stops.push({

                        lat: avgLat / cluster.length,

                        lng: avgLng / cluster.length,

                        startTime: t0,

                        endTime: t1,

                        duration: duration,

                        pointCount: cluster.length

                    });

                }

            }

            i = j;

        }

        return stops;

    }

    function renderLiveTrackingMap(data, username) {

        var visits = data.visits || [];

        var pathPoints = data.pathPoints || [];

        if (!liveTrackingMap) {

            liveTrackingMap = new google.maps.Map(document.getElementById('liveTrackingMap'), {

                zoom: 12,

                center: { lat: 20.5937, lng: 78.9629 },

                mapTypeControl: true,

                streetViewControl: false

            });

        }

        clearMapOverlays();

        var bounds = new google.maps.LatLngBounds();

        var hasPoints = false;

        var visitIdx = 0;

        // Pre-compute first/last valid path point as fallback for punch records with no coordinates

        var firstPathLat = null, firstPathLng = null;

        var lastPathLat = null, lastPathLng = null;

        for (var pi = 0; pi < pathPoints.length; pi++) {

            var ppLat = parseFloat(pathPoints[pi].lat), ppLng = parseFloat(pathPoints[pi].lng);

            if (!isNaN(ppLat) && !isNaN(ppLng) && !(ppLat === 0 && ppLng === 0)) {

                if (firstPathLat === null) { firstPathLat = ppLat; firstPathLng = ppLng; }

                lastPathLat = ppLat; lastPathLng = ppLng;

            }

        }

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

            var v = visits[i];

            var lat = v.lat ? parseFloat(v.lat) : NaN;

            var lng = v.lng ? parseFloat(v.lng) : NaN;

            if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) {

                if (v.markType === 'PUNCHIN' && firstPathLat !== null) {

                    lat = firstPathLat; lng = firstPathLng;

                } else if (v.markType === 'PUNCHOUT' && lastPathLat !== null) {

                    lat = lastPathLat; lng = lastPathLng;

                } else {

                    continue;

                }

            }

            hasPoints = true;

            var pos = { lat: lat, lng: lng };

            bounds.extend(pos);

            var label = v.markType === 'PUNCHIN' ? 'P' : (v.markType === 'PUNCHOUT' ? 'X' : String(++visitIdx));

            var marker = new google.maps.Marker({

                position: pos,

                map: liveTrackingMap,

                icon: {

                    url: createTrackingMarkerIcon(getMarkerColor(v.markType), label),

                    scaledSize: new google.maps.Size(42, 60),

                    anchor: new google.maps.Point(21, 60)

                },

                title: v.taskName + ' (' + v.markType + ')',

                zIndex: 100

            });

            var infoContent = '<div style="font-size:13px; max-width:280px;">' +

                '<strong>' + (v.taskName || '') + '</strong><br>' +

                '<span class="label" style="background:' + getMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span>' +

                (v.taskType ? ' <span class="label label-default">' + v.taskType + '</span>' : '') + '<br>' +

                (v.checkInTime ? '<i class="fa fa-sign-in" style="color:#27ae60;"></i> In: <strong>' + v.checkInTime + '</strong><br>' : '') +

                (v.checkOutTime ? '<i class="fa fa-sign-out" style="color:#e74c3c;"></i> Out: <strong>' + v.checkOutTime + '</strong><br>' : '') +

                (v.timeSpent ? '<i class="fa fa-clock-o" style="color:#f39c12;"></i> Time Spent: <strong>' + v.timeSpent + '</strong><br>' : '') +

                (v.transitTime ? '<i class="fa fa-car" style="color:#3498db;"></i> Transit: <strong>' + v.transitTime + '</strong><br>' : '') +

                (v.totalDistance && v.totalDistance !== '0.0' ? '<i class="fa fa-road" style="color:#8e44ad;"></i> Distance: <strong>' + v.totalDistance + ' km</strong><br>' : '') +

                (v.address ? '<i class="fa fa-map-marker" style="color:#e74c3c;"></i> ' + v.address : '') +

                '</div>';

            (function (m, c) {

                var iw = new google.maps.InfoWindow({ content: c });

                m.addListener('click', function () { iw.open(liveTrackingMap, m); });

            })(marker, infoContent);

            liveTrackingMap._markers.push(marker);

        }

        // Draw GPS tracked path with red dots + connecting line

        var totalGpsDistanceM = 0;

        var accuracySum = 0;

        var accuracyCount = 0;

        var stopsDetected = [];

        if (pathPoints.length > 0) {

            var validPoints = [];

            for (var j = 0; j < pathPoints.length; j++) {

                var pt = pathPoints[j];

                var pLat = parseFloat(pt.lat);

                var pLng = parseFloat(pt.lng);

                if (isNaN(pLat) || isNaN(pLng) || (pLat === 0 && pLng === 0)) continue;

                var acc = parseFloat(pt.accuracy);

                if (!isNaN(acc)) { accuracySum += acc; accuracyCount++; }

                validPoints.push({ lat: pLat, lng: pLng, ts: pt.timestamp, accuracy: pt.accuracy });

                bounds.extend({ lat: pLat, lng: pLng });

                hasPoints = true;

            }

            // Calculate total GPS distance

            for (var d = 1; d < validPoints.length; d++) {

                totalGpsDistanceM += haversineMeters(validPoints[d-1].lat, validPoints[d-1].lng, validPoints[d].lat, validPoints[d].lng);

            }

            if (validPoints.length > 0) {

                var pathCoords = validPoints.map(function(p) { return { lat: p.lat, lng: p.lng }; });

                // Blue connecting line

                liveTrackingMap._polyline = new google.maps.Polyline({

                    path: pathCoords,

                    geodesic: true,

                    strokeColor: '#e74c3c',

                    strokeOpacity: 0.7,

                    strokeWeight: 3,

                    zIndex: 50,

                    map: liveTrackingMap

                });

                // Direction arrows for each GPS point

                liveTrackingMap._gpsDots = [];

                for (var gi = 0; gi < validPoints.length; gi++) {

                    var gp = validPoints[gi];

                    var heading = 0;

                    if (gi < validPoints.length - 1) {

                        heading = google.maps.geometry.spherical.computeHeading(

                            new google.maps.LatLng(gp.lat, gp.lng),

                            new google.maps.LatLng(validPoints[gi + 1].lat, validPoints[gi + 1].lng)

                        );

                    } else if (gi > 0) {

                        heading = google.maps.geometry.spherical.computeHeading(

                            new google.maps.LatLng(validPoints[gi - 1].lat, validPoints[gi - 1].lng),

                            new google.maps.LatLng(gp.lat, gp.lng)

                        );

                    }

                    var dot = new google.maps.Marker({

                        position: { lat: gp.lat, lng: gp.lng },

                        map: liveTrackingMap,

                        icon: {

                            path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,

                            scale: 3,

                            fillColor: '#e74c3c',

                            fillOpacity: 1,

                            strokeColor: '#b71c1c',

                            strokeWeight: 1,

                            rotation: heading

                        },

                        zIndex: 80

                    });

                    (function(marker, point, idx) {

                        var iw = new google.maps.InfoWindow({

                            content: '<div style="font-size:12px;">' +

                                '<strong>GPS Point #' + (idx + 1) + '</strong><br>' +

                                '<i class="fa fa-clock-o"></i> ' + formatEpoch(point.ts) + '<br>' +

                                '<i class="fa fa-crosshairs"></i> Accuracy: ' + (point.accuracy || 'N/A') + 'm<br>' +

                                '<i class="fa fa-map-marker"></i> ' + point.lat.toFixed(6) + ', ' + point.lng.toFixed(6) +

                                '</div>'

                        });

                        marker.addListener('click', function() { iw.open(liveTrackingMap, marker); });

                    })(dot, gp, gi);

                    liveTrackingMap._gpsDots.push(dot);

                }

                // Detect stationary stops (within 50m for >5 min)

                stopsDetected = detectStops(validPoints, 50, 5 * 60 * 1000);

                liveTrackingMap._stopMarkers = [];

                for (var si = 0; si < stopsDetected.length; si++) {

                    var stop = stopsDetected[si];

                    var stopMarker = new google.maps.Marker({

                        position: { lat: stop.lat, lng: stop.lng },

                        map: liveTrackingMap,

                        icon: {

                            path: google.maps.SymbolPath.CIRCLE,

                            scale: 20,

                            fillColor: '#f39c12',

                            fillOpacity: 0.9,

                            strokeColor: '#e67e22',

                            strokeWeight: 2

                        },

                        label: { text: formatDuration(stop.duration), fontSize: '12px', fontWeight: 'bold', color: '#000' },

                        title: 'Stopped for ' + formatDuration(stop.duration),

                        zIndex: 200

                    });

                    (function(marker, s) {

                        var iw = new google.maps.InfoWindow({

                            content: '<div style="font-size:13px;">' +

                                '<strong><i class="fa fa-pause-circle" style="color:#f39c12;"></i> Stationary Stop</strong><br>' +

                                '<i class="fa fa-clock-o"></i> Duration: <strong>' + formatDuration(s.duration) + '</strong><br>' +

                                '<i class="fa fa-sign-in"></i> From: <strong>' + new Date(s.startTime).toLocaleTimeString() + '</strong><br>' +

                                '<i class="fa fa-sign-out"></i> To: <strong>' + new Date(s.endTime).toLocaleTimeString() + '</strong><br>' +

                                '<i class="fa fa-map-marker"></i> ' + s.lat.toFixed(6) + ', ' + s.lng.toFixed(6) + '<br>' +

                                '<i class="fa fa-dot-circle-o"></i> Points in cluster: ' + s.pointCount +

                                '</div>'

                        });

                        marker.addListener('click', function() { iw.open(liveTrackingMap, marker); });

                    })(stopMarker, stop);

                    liveTrackingMap._stopMarkers.push(stopMarker);

                }

                // Last known location marker (bike icon)

                var lastPoint = pathCoords[pathCoords.length - 1];

                liveTrackingMap._currentMarker = new google.maps.Marker({

                    position: lastPoint,

                    map: liveTrackingMap,

                    icon: {

                        url: '${rc.contextPath}/resources/images/salesman.png',

                        scaledSize: new google.maps.Size(56, 56),

                        anchor: new google.maps.Point(28, 28)

                    },

                    title: 'Last Known Location',

                    zIndex: 999

                });

                var lastGp = validPoints[validPoints.length - 1];

                var currentIw = new google.maps.InfoWindow({

                    content: '<div style="font-size:13px;"><strong><i class="fa fa-crosshairs" style="color:#27ae60;"></i> Last Known Location</strong><br>' +

                        '<i class="fa fa-clock-o"></i> Time: ' + formatEpoch(lastGp.ts) + '<br>' +

                        '<i class="fa fa-crosshairs"></i> Accuracy: ' + (lastGp.accuracy || 'N/A') + 'm</div>'

                });

                liveTrackingMap._currentMarker.addListener('click', function () {

                    currentIw.open(liveTrackingMap, liveTrackingMap._currentMarker);

                });

            }

        }

        if (hasPoints) {

            liveTrackingMap.fitBounds(bounds);

        }

        // Info bar

        var totalVisits = visits.filter(function (v) { return v.markType !== 'PUNCHIN' && v.markType !== 'PUNCHOUT'; }).length;

        var completedVisits = visits.filter(function (v) { return v.markType === 'CHECKIN-CHECKOUT' || v.markType === 'CHECKIN_CHECKOUT' || v.markType === 'CHECKOUT'; }).length;

        var now = new Date();

        var timeStr = now.getHours().toString().padStart(2, '0') + ':' + now.getMinutes().toString().padStart(2, '0') + ':' + now.getSeconds().toString().padStart(2, '0');

        var avgAccuracy = accuracyCount > 0 ? (accuracySum / accuracyCount).toFixed(0) : null;

        var accuracyLabel = '';

        var accuracyBadge = '';

        if (avgAccuracy) {

            if (avgAccuracy <= 10) { accuracyLabel = 'High'; accuracyBadge = 'background:#27ae60;'; }

            else if (avgAccuracy <= 30) { accuracyLabel = 'Good'; accuracyBadge = 'background:#2ecc71;'; }

            else if (avgAccuracy <= 100) { accuracyLabel = 'Average'; accuracyBadge = 'background:#f39c12;'; }

            else { accuracyLabel = 'Low'; accuracyBadge = 'background:#e74c3c;'; }

        }

        var totalGpsKm = (totalGpsDistanceM / 1000).toFixed(2);

        var punchInRecord = visits.filter(function (v) { return v.markType === 'PUNCHIN'; })[0];

        var punchOutRecord = visits.filter(function (v) { return v.markType === 'PUNCHOUT'; })[0];

        var infoHtml = '<strong>' + username + '</strong> | ';

        if (punchInRecord && punchInRecord.checkInTime) {

            infoHtml += '<i class="fa fa-sign-in" style="color:#1abc9c;"></i> In: <strong>' + punchInRecord.checkInTime + '</strong> | ';

        }

        if (punchOutRecord && punchOutRecord.checkInTime) {

            infoHtml += '<i class="fa fa-sign-out" style="color:#e74c3c;"></i> Out: <strong>' + punchOutRecord.checkInTime + '</strong> | ';

        }

        infoHtml += 'Visits: <strong>' + totalVisits + '</strong> | ' +

            'Completed: <strong>' + completedVisits + '</strong>';

        if (pathPoints.length > 0) {

            infoHtml += ' | GPS Distance: <strong>' + totalGpsKm + ' km</strong>';

            infoHtml += ' | Points: <strong>' + pathPoints.length + '</strong>';

            if (accuracyLabel) {

                infoHtml += ' | Accuracy: <span class="label" style="' + accuracyBadge + ' color:white; padding:2px 8px; border-radius:3px; font-size:11px;">' + accuracyLabel + '</span> (' + avgAccuracy + 'm)';

            }

            if (stopsDetected.length > 0) {

                infoHtml += ' | <span style="color:#f39c12;"><i class="fa fa-pause-circle"></i></span> Stops: <strong>' + stopsDetected.length + '</strong>';

            }

            infoHtml += ' | <img src="${rc.contextPath}/resources/images/salesman.png" style="height:16px; vertical-align:middle;"> Last Known';

        } else {

            infoHtml += ' | <span style="color:#999;"><i class="fa fa-exclamation-triangle"></i> No GPS data yet</span>';

        }

        infoHtml += ' | <span style="color:#e74c3c;"><i class="fa fa-arrow-right" style="font-size:10px;"></i></span> GPS Trail';

        var battery = data.batteryLevel;

        if (battery !== null && battery !== undefined) {

            var batteryColor = battery > 50 ? '#27ae60' : (battery > 20 ? '#f39c12' : '#e74c3c');

            var batteryIcon = battery > 50 ? 'fa-battery-full' : (battery > 20 ? 'fa-battery-half' : 'fa-battery-quarter');

            infoHtml += ' | <span style="color:' + batteryColor + ';"><i class="fa ' + batteryIcon + '"></i> Battery: <strong>' + battery + '%</strong></span>';

        }

        var locToggle = data.locationToggleCount || 0;

        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>';

        }

        infoHtml += ' | <span style="color:#999;">Updated: ' + timeStr + '</span>';

        $('#liveTrackingInfo').html(infoHtml);

        // Low data warning

        if (pathPoints.length > 0 && pathPoints.length < 10) {

            $('#liveTrackingInfo').append(

                '<div style="margin-top:4px; padding:4px 8px; background:#fff3cd; border:1px solid #ffc107; border-radius:3px; font-size:11px; color:#856404;">' +

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

            );

        }

    }

    function ensureGoogleMaps(callback) {

        if (window.google && window.google.maps) {

            callback();

            return;

        }

        var s = document.createElement('script');

        s.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=geometry&v=weekly';

        s.onload = callback;

        document.head.appendChild(s);

    }

    var liveTrackingUsername = '';

    $(document).on('click.livetrack', '.live-tracking-btn', function () {

        liveTrackingUserId = $(this).data('userid');

        liveTrackingUsername = $(this).data('username');

        $('#liveTrackingModalTitle').html('<img src="${rc.contextPath}/resources/images/salesman.png" style="height:24px; vertical-align:middle; margin-right:6px;"> Live Tracking - ' + liveTrackingUsername);

        $('#liveTrackingInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Loading...</div>');

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

        setTimeout(function () {

            liveTrackingMap = null;

            ensureGoogleMaps(function () {

                loadLiveTracking(liveTrackingUserId, liveTrackingUsername);

            });

        }, 300);

    });

    $(document).on('click.livetrack', '#refreshTrackingBtn', function () {

        if (liveTrackingUserId) {

            $('#liveTrackingInfo').html('<div class="text-center"><i class="fa fa-spinner fa-spin"></i> Refreshing...</div>');

            loadLiveTracking(liveTrackingUserId, liveTrackingUsername);

        }

    });

    $(document).on('change.beatreportuserdetail', '#autoRefreshToggle', function () {

        if ($(this).is(':checked')) {

            startAutoRefresh();

        } else {

            stopAutoRefresh();

        }

    });

    $('#liveTrackingModal').on('hidden.bs.modal', function () {

        stopAutoRefresh();

        liveTrackingUserId = null;

    });

    // Attachment Viewer

    $(document).on('click.beatreportuserdetail', '.view-attachment-link', function () {

        var attachment = $(this).data('attachment');

        var checkinLatLng = $(this).data('checkin-latlng') || '';

        var visitLocation = $(this).data('visit-location') || '';

        var trackingId = $(this).data('tracking-id');

        var imgUrl = context + '/download-attachment?documentId=' + attachment;

        $('#attachmentImage').attr('src', imgUrl);

        $('#approveCheckinBtn').hide().removeData('tracking-id');

        $('#attachmentDistanceInfo').html('');

        var distanceM = -1;

        if (checkinLatLng && visitLocation && checkinLatLng.indexOf(',') > 0 && visitLocation.indexOf(',') > 0) {

            var cParts = checkinLatLng.toString().split(',');

            var vParts = visitLocation.toString().split(',');

            var cLat = parseFloat(cParts[0]);

            var cLng = parseFloat(cParts[1]);

            var vLat = parseFloat(vParts[0]);

            var vLng = parseFloat(vParts[1]);

            if (!isNaN(cLat) && !isNaN(cLng) && !isNaN(vLat) && !isNaN(vLng) && !(cLat === 0 && cLng === 0) && !(vLat === 0 && vLng === 0)) {

                distanceM = haversineMeters(cLat, cLng, vLat, vLng);

            }

        }

        if (distanceM > 50) {

            $('#attachmentDistanceInfo').html(

                '<span class="label label-danger" style="font-size:12px; padding:4px 10px;">' +

                '<i class="fa fa-exclamation-triangle"></i> Checkin Distance: ' + Math.round(distanceM) + 'm (exceeds 50m radius)</span>'

            );

            $('#approveCheckinBtn').show().data('tracking-id', trackingId);

        } else if (distanceM >= 0) {

            $('#attachmentDistanceInfo').html(

                '<span class="label label-success" style="font-size:12px; padding:4px 10px;">' +

                '<i class="fa fa-check-circle"></i> Checkin Distance: ' + Math.round(distanceM) + 'm (within 50m radius)</span>'

            );

        }

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

    });

    $(document).on('click.beatreportuserdetail', '#approveCheckinBtn', function () {

        var btn = $(this);

        var trackingId = btn.data('tracking-id');

        if (!trackingId) return;

        btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Approving...');

        $.ajax({

            url: context + '/beat-report/approve-checkin',

            type: 'POST',

            data: { trackingId: trackingId },

            success: function () {

                btn.html('<i class="fa fa-check"></i> Approved').removeClass('btn-success').addClass('btn-default').prop('disabled', true);

                alert('Checkin approved successfully');

            },

            error: function () {

                btn.prop('disabled', false).html('<i class="fa fa-check"></i> Approve');

                alert('Failed to approve checkin');

            }

        });

    });

</script>