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() == "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/Partner Name</th>
                <th>Task Type</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><strong>PUNCH IN</strong></td>
                    <td>$!punchIn.getTaskType()</td>
                    <td><span class="label label-info">PUNCHIN</span> #if($punchIn.getAttachment() && $punchIn.getAttachment() != "")<a href="https://partners.smartdukaan.com/document/$punchIn.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; 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)
                <tr>
                    <td>$idx</td>
                    <td>$!v.getTaskName()</td>
                    <td>$!v.getTaskType()</td>
                    <td>
                        #if($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
                        <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="https://partners.smartdukaan.com/document/$v.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; 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><strong>PUNCH OUT</strong></td>
                    <td>$!punchOut.getTaskType()</td>
                    <td><span class="label label-danger">PUNCHOUT</span> #if($punchOut.getAttachment() && $punchOut.getAttachment() != "")<a href="https://partners.smartdukaan.com/document/$punchOut.getAttachment()" target="_blank" title="View Attachment"><i class="fa fa-paperclip" style="color:#e67e22; 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="5" 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"><i class="fa fa-map-marker"></i> 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" checked 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>

<script>
    $('#userDetailTable').DataTable({
        "scrollX": true,
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bInfo": true,
        "bAutoWidth": false
    });

    (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);
                }
            });
        }
    })();

    $(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 === '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="28" height="40" viewBox="0 0 28 40">' +
            '<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 + '"/>' +
            '<circle cx="14" cy="14" r="7" fill="white"/>' +
            '<text x="14" y="18" text-anchor="middle" font-size="10" 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 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
            });
        }

        if (liveTrackingMap._markers) {
            liveTrackingMap._markers.forEach(function (m) { m.setMap(null); });
        }
        if (liveTrackingMap._polyline) {
            liveTrackingMap._polyline.setMap(null);
        }
        if (liveTrackingMap._visitRoute) {
            liveTrackingMap._visitRoute.setMap(null);
        }
        if (liveTrackingMap._currentMarker) {
            liveTrackingMap._currentMarker.setMap(null);
        }
        liveTrackingMap._markers = [];

        var bounds = new google.maps.LatLngBounds();
        var hasPoints = false;
        var visitIdx = 0;

        for (var i = 0; i < visits.length; i++) {
            var v = visits[i];
            if (!v.lat || !v.lng) continue;
            var lat = parseFloat(v.lat);
            var lng = parseFloat(v.lng);
            if (isNaN(lat) || isNaN(lng) || (lat === 0 && lng === 0)) 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(28, 40),
                    anchor: new google.maps.Point(14, 40)
                },
                title: v.taskName + ' (' + v.markType + ')'
            });

            var infoContent = '<div style="font-size:13px; max-width:250px;">' +
                '<strong>' + (v.taskName || '') + '</strong><br>' +
                '<span class="label" style="background:' + getMarkerColor(v.markType) + '; color:white;">' + v.markType + '</span><br>' +
                (v.checkInTime ? '<i class="fa fa-sign-in"></i> ' + v.checkInTime + '<br>' : '') +
                (v.checkOutTime ? '<i class="fa fa-sign-out"></i> ' + v.checkOutTime + '<br>' : '') +
                (v.address ? '<i class="fa fa-map-marker"></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 visit-to-visit route (dashed line with arrows)
        var visitCoords = [];
        for (var vi = 0; vi < visits.length; vi++) {
            var vv = visits[vi];
            if (!vv.lat || !vv.lng) continue;
            var vLat = parseFloat(vv.lat);
            var vLng = parseFloat(vv.lng);
            if (isNaN(vLat) || isNaN(vLng) || (vLat === 0 && vLng === 0)) continue;
            visitCoords.push({ lat: vLat, lng: vLng });
        }
        if (visitCoords.length > 1) {
            liveTrackingMap._visitRoute = new google.maps.Polyline({
                path: visitCoords,
                geodesic: true,
                strokeColor: '#8e44ad',
                strokeOpacity: 0,
                strokeWeight: 3,
                icons: [{
                    icon: { path: 'M 0,-1 0,1', strokeOpacity: 0.6, strokeWeight: 3, scale: 3 },
                    offset: '0',
                    repeat: '16px'
                }, {
                    icon: { path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, strokeOpacity: 0.8, scale: 3 },
                    offset: '50%',
                    repeat: '200px'
                }],
                map: liveTrackingMap
            });
        }

        if (pathPoints.length > 0) {
            var pathCoords = [];
            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;
                pathCoords.push({ lat: pLat, lng: pLng });
                bounds.extend({ lat: pLat, lng: pLng });
                hasPoints = true;
            }

            if (pathCoords.length > 0) {
                liveTrackingMap._polyline = new google.maps.Polyline({
                    path: pathCoords,
                    geodesic: true,
                    strokeColor: '#3498db',
                    strokeOpacity: 0.8,
                    strokeWeight: 3,
                    map: liveTrackingMap
                });

                var lastPoint = pathCoords[pathCoords.length - 1];
                liveTrackingMap._currentMarker = new google.maps.Marker({
                    position: lastPoint,
                    map: liveTrackingMap,
                    icon: {
                        path: google.maps.SymbolPath.CIRCLE,
                        scale: 10,
                        fillColor: '#e74c3c',
                        fillOpacity: 1,
                        strokeColor: '#ffffff',
                        strokeWeight: 3
                    },
                    title: 'Last Known Location',
                    zIndex: 999
                });

                var lastTs = pathPoints[pathPoints.length - 1].timestamp || 'N/A';
                var currentIw = new google.maps.InfoWindow({
                    content: '<div style="font-size:13px;"><strong><i class="fa fa-crosshairs"></i> Last Known Location</strong><br>Time: ' + lastTs + '</div>'
                });
                liveTrackingMap._currentMarker.addListener('click', function () {
                    currentIw.open(liveTrackingMap, liveTrackingMap._currentMarker);
                });
            }
        }

        if (hasPoints) {
            liveTrackingMap.fitBounds(bounds);
        }

        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 === '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');
        $('#liveTrackingInfo').html(
            '<strong>' + username + '</strong> | ' +
            'Visits: <strong>' + totalVisits + '</strong> | ' +
            'Completed: <strong>' + completedVisits + '</strong> | ' +
            'Path Points: <strong>' + pathPoints.length + '</strong>' +
            (pathPoints.length > 0 ? ' | <span style="color:#e74c3c;"><i class="fa fa-circle"></i></span> Last Known' : '') +
            ' | <span style="color:#3498db;">━</span> GPS Path' +
            (visitCoords.length > 1 ? ' | <span style="color:#8e44ad;">┅</span> Visit Route' : '') +
            ' | <span style="color:#999;">Updated: ' + timeStr + '</span>'
        );
    }

    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&v=weekly';
        s.onload = callback;
        document.head.appendChild(s);
    }

    var liveTrackingUsername = '';

    function startAutoRefresh() {
        stopAutoRefresh();
        if ($('#autoRefreshToggle').is(':checked') && liveTrackingUserId) {
            liveTrackingInterval = setInterval(function () {
                loadLiveTracking(liveTrackingUserId, liveTrackingUsername);
            }, 30000);
        }
    }

    function stopAutoRefresh() {
        if (liveTrackingInterval) {
            clearInterval(liveTrackingInterval);
            liveTrackingInterval = null;
        }
    }

    $(document).on('click.livetrack', '.live-tracking-btn', function () {
        liveTrackingUserId = $(this).data('userid');
        liveTrackingUsername = $(this).data('username');
        $('#liveTrackingModalTitle').html('<i class="fa fa-map-marker"></i> 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);
                startAutoRefresh();
            });
        }, 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', '#autoRefreshToggle', function () {
        if ($(this).is(':checked')) {
            startAutoRefresh();
        } else {
            stopAutoRefresh();
        }
    });

    $('#liveTrackingModal').on('hidden.bs.modal', function () {
        stopAutoRefresh();
        liveTrackingUserId = null;
    });
</script>