Subversion Repositories SmartDukaan

<section class="wrapper">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="page-header"><i class="icon_calendar"></i> Scheduled Lead Visits</h3>
            <ol class="breadcrumb">
                <li><i class="fa fa-home"></i><a href="${rc.contextPath}/dashboard">Home</a></li>
                <li><i class="icon_group"></i> Partner Acquisition</li>
                <li><i class="icon_calendar"></i> Lead Visits</li>
            </ol>
        </div>
    </div>

    #if($leadRoutes.isEmpty())
        <div class="alert alert-info">No scheduled lead visits.</div>
    #else
        <div class="table-responsive">
            <table class="table table-bordered table-striped table-hover">
                <thead>
                <tr>
                    <th>Lead ID</th>
                    <th>Partner Name</th>
                    <th>Mobile</th>
                    <th>City</th>
                    <th>Beat</th>
                    <th>Schedule Date</th>
                    <th>Stop #</th>
                    <th>Scheduled By</th>
                    <th>Created On</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                    #foreach($lr in $leadRoutes)
                        #set($lead = $leadMap.get($lr.getLeadId()))
                        #set($beat = $beatMap.get($lr.getBeatId()))
                        #set($requester = $authUserMap.get($lr.getRequestedBy()))
                    <tr>
                        <td>$lr.getLeadId()</td>
                        <td>#if($lead) $!lead.getFirstName() $!lead.getLastName() #else - #end</td>
                        <td>#if($lead) $!lead.getLeadMobile() #end</td>
                        <td>#if($lead) $!lead.getCity() #end</td>
                        <td>
                            #if($beat)
                                <a href="javascript:;" class="view-beat-on-map"
                                   data-assignedto="$beat.getAuthUserId()"
                                   data-beatdate="$!lr.getScheduleDate()"
                                   data-beatname="$!beat.getName()" style="text-decoration:none;">
                                    <span class="label label-primary" style="font-size:12px;">$!beat.getName()</span>
                                </a>
                                <br>
                                <a href="${rc.contextPath}/beatPlanWindow?authUserId=$beat.getAuthUserId()"
                                   target="_blank"
                                   class="btn btn-xs btn-default" style="margin-top:3px;">View All Beats</a>
                            #else
                                -
                            #end
                        </td>
                        <td><span class="label label-info" style="font-size:12px;">$!lr.getScheduleDate()</span></td>
                        <td>#if($lr.getSequenceOrder()) #set($stopNum = $lr.getSequenceOrder() + 1) $stopNum #else
                            - #end</td>
                        <td>#if($requester) $!requester.getFirstName() $!requester.getLastName() #end</td>
                        <td style="font-size:11px;">$!lr.getCreatedTimestamp()</td>
                        <td>
                            <span class="label label-success">Scheduled</span>
                        </td>
                    </tr>
                    #end
                </tbody>
            </table>
        </div>
    #end
</section>

<!-- Beat Route Map Modal -->
<div class="modal fade" id="beatMapModal" tabindex="-1" style="overflow-y:auto;">
    <div class="modal-dialog" style="width:90%; max-width:1200px; margin-top:30px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title" id="beatMapTitle">Beat Route</h4>
            </div>
            <div class="modal-body" style="padding:10px;">
                <div class="row">
                    <div class="col-md-4" style="max-height:500px; overflow-y:auto;">
                        <div id="beatStopsList"></div>
                    </div>
                    <div class="col-md-8">
                        <div id="beatMapContainer" style="width:100%; height:500px; border-radius:8px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAckO0y4Z6WhBOuMjNjioWLSYZDhGEvGBc&libraries=places&v=weekly"></script>
<script>
    var beatMap, beatMarkers = [], beatPolyline;

    function showBeatRoute(authUserId, planDate, title) {
        $('#beatMapTitle').text(title);
        $('#beatMapModal').modal('show');

        setTimeout(function () {
            if (!beatMap) {
                beatMap = new google.maps.Map(document.getElementById('beatMapContainer'), {
                    zoom: 10, center: {lat: 20.5937, lng: 78.9629}
                });
            }
            beatMarkers.forEach(function (m) {
                m.setMap(null);
            });
            beatMarkers = [];
            if (beatPolyline) beatPolyline.setMap(null);

            $.ajax({
                url: context + '/visit-approvals/beat-route?authUserId=' + authUserId + '&planDate=' + planDate,
                method: 'GET',
                success: function (response) {
                    var stops = response.response || response;
                    var bounds = new google.maps.LatLngBounds();
                    var path = [];
                    var listHtml = '<table class="table table-condensed table-bordered" style="font-size:12px;"><thead><tr><th>#</th><th>Name</th><th>Type</th></tr></thead><tbody>';

                    for (var i = 0; i < stops.length; i++) {
                        var stop = stops[i];
                        var isLead = stop.type === 'lead';
                        listHtml += '<tr style="' + (isLead ? 'background:#fff3cd; font-weight:bold;' : '') + '">'
                                + '<td>' + (stop.sequence + 1) + '</td>'
                                + '<td>' + (stop.name || '-') + '</td>'
                                + '<td>' + (isLead ? '<span class="label label-warning">LEAD</span>' : '<span class="label label-info">Partner</span>') + '</td>'
                                + '</tr>';

                        if (stop.lat && stop.lng) {
                            var pos = {lat: parseFloat(stop.lat), lng: parseFloat(stop.lng)};
                            path.push(pos);
                            bounds.extend(pos);
                            var marker = new google.maps.Marker({
                                position: pos, map: beatMap,
                                label: {text: '' + (stop.sequence + 1), color: '#fff', fontWeight: 'bold'},
                                icon: {
                                    path: google.maps.SymbolPath.CIRCLE, scale: 14,
                                    fillColor: isLead ? '#e67e22' : '#3498db',
                                    fillOpacity: 1, strokeColor: '#fff', strokeWeight: 2
                                },
                                title: (stop.sequence + 1) + '. ' + (stop.name || '')
                            });
                            beatMarkers.push(marker);
                        }
                    }
                    listHtml += '</tbody></table>';
                    $('#beatStopsList').html(listHtml);

                    if (path.length > 1) {
                        beatPolyline = new google.maps.Polyline({
                            path: path, geodesic: true,
                            strokeColor: '#3498db', strokeOpacity: 0.8, strokeWeight: 3, map: beatMap
                        });
                    }
                    if (path.length > 0) beatMap.fitBounds(bounds);
                }
            });
        }, 300);
    }

    $(document).on('click', '.view-beat-on-map', function () {
        var authUserId = $(this).data('assignedto');
        var beatDate = $(this).data('beatdate');
        var beatName = $(this).data('beatname');
        showBeatRoute(authUserId, beatDate, beatName + ' - ' + beatDate);
    });
</script>