{*<!--
 /*+*******************************************************************************
 * The content of this file is subject to the CRMTiger Pro license.
 * ("License"); You may not use this file except in compliance with the License
 * The Initial Developer of the Original Code is vTiger
 * The Modified Code of the Original Code owned by https://crmtiger.com/
 * Portions created by CRMTiger.com are Copyright(C) CRMTiger.com
 * All Rights Reserved.
  ***************************************************************************** */
-->*}

{literal}
<style>
#result ul{ 
   list-style: none;
   width: 210px;
   padding-right: 0%;
   position: absolute;
   left:3%;
   padding-left: 0px;
   border: 1px solid #d7d1d1 !important;
   margin-top: 2px;
   margin-left: -11px;
   z-index: 1;	
   backgound:#fff;
}
#result ul li{ 
  
   padding: 4px;
   margin-bottom: 1px;
}
#result ul li:hover{ 
   cursor: pointer; 
}
.ctlefthideessentials-toggle,.ctleftshowessentials-toggle{
 	background-color: white;
    font-weight: bold;
    padding: 5px 2px !important;
    position: absolute;
    top: 90px !important;
    left: 49%;
    cursor: pointer;
    width: 14px;
    border: 1px solid #DDDDDD;
    /*border-left: 0;*/
    display: inline-block;
 }

.ctrighthideessentials-toggle,.ctrightshowessentials-toggle{
 	background-color: white;
    font-weight: bold;
    padding: 5px 2px !important;
    position: absolute;
    top: 90px !important;
    left: 51%;
    cursor: pointer;
    width: 14px;
    border: 1px solid #DDDDDD;
    /*border-left: 0;*/
    display: inline-block;
 }
.listtimeline table { border-collapse: collapse;
border-collapse: separate;
border-spacing: 0 1em;
}


#tbltimeline tr{ /*outline: thin solid black;*/
	background-color: #f5f5f5;
box-shadow: 8px 7px 4px gray;
}
#tbltimeline td{
	padding: 2px 20px;
	box-sizing:border-box;
}

#tbltimeline tr {
    outline: none; 
    background-color: transparent;
    box-shadow: none; 
    margin-left: 3em;
    min-height: 50px;
    border-left: 1px dashed #3d8bcf;
    padding: 0 0 0px 25px;
    position: relative;
    display: inline-block;
    float: left;
    width:90%;
}

#tbltimeline tr::before {
    position: absolute;
    left: -10px;
    top: 20px;
    content: " ";
    border: 6px solid #333;
    border-radius: 500%;
    background: #3d8bcf;
    height: 6px !important;
    width: 6px !important;
    transition: all 500ms ease-in-out;
}
#tbltimeline tr:hover::before {
    border-color: #fbfbfb;
    transition: all 1000ms ease-in-out;
}
form#downloadForm button.btn.btn-success.btn-sm {
    padding: 5px 10px;
}
form#downloadForm .timeLineViewButton,form#downloadForm .listViewButton,form#downloadForm .saveButton{
	background: transparent !important;
	padding: 0;
    border: 1px solid transparent;
    border-radius:0;
    outline:0;
    margin: 0 10px !important;
}
form#downloadForm .col-lg-4.col-md-4.col-sm-4 .btn img{
	width:36px !important;
}
form#downloadForm .col-lg-4.col-md-4.col-sm-4 {
    float: right;
    text-align: right;
}
.main_div .btn-success:hover, .main_div .btn-success:active, .main_div .btn-success.active, .main_div .open>.dropdown-toggle.btn-success{
	box-shadow: none;
}
.main_div .btn:focus, .btn:active:focus,.main_div .btn.active:focus, .btn.focus,.main_div .btn:active.focus, .main_div .btn.active.focus{
	outline:0;
}

#tbltimeline td:nth-child(1), #tbltimeline td:nth-child(4) { 
    width: 25%; 
}

#tbltimeline td:nth-child(2) { 
    width: 10%; 
}

#tbltimeline td:nth-child(3) { 
	width: 40%; 
}

#tbltimeline td img {
	max-width: 32px;
}

table tr {
    cursor: pointer;
}
</style>

	
	<script type="text/javascript" src="layouts/vlayout/modules/CTMobileSettings/resources/moment.min.js"></script>
	<script type="text/javascript" src="layouts/vlayout/modules/CTMobileSettings/resources/daterangepicker.min.js"></script>
	
	<link rel="stylesheet" type="text/css" href="layouts/vlayout/modules/CTMobileSettings/daterangepicker.css" />

	<link rel="stylesheet" type="text/css" href="layouts/vlayout/modules/CTMobileSettings/dataTables.bootstrap.min.css" />
	<script type="text/javascript" src="layouts/vlayout/modules/CTMobileSettings/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="layouts/vlayout/modules/CTMobileSettings/dataTables.bootstrap.min.js"></script>

	<script type="text/javascript">
		
		jQuery(document).ready(function() {
			jQuery("#listmapUserRoute").on("click",".ctlefthideessentials-toggle",function(){
				if(jQuery('#mapuserroute').css('display') == 'none') {
					jQuery('#listuserroute').show();
					jQuery('#mapuserroute').show();
					jQuery('.ctrightshowessentials-toggle').removeClass('ctrightshowessentials-toggle').addClass('ctrighthideessentials-toggle');
					jQuery('.ctrighthideessentials-toggle').find('span').removeClass('icon-chevron-left').addClass('icon-chevron-right');
					jQuery('#mapuserroute').removeClass('span12').addClass('span6');
					jQuery('#listuserroute').removeClass('span12').addClass('span6');
				}else{
					jQuery(this).removeClass('ctlefthideessentials-toggle').addClass('ctleftshowessentials-toggle');
					jQuery(this).find('span').removeClass('icon-chevron-left').addClass('icon-chevron-right');
					jQuery('#listuserroute').hide();
					jQuery('#mapuserroute').removeClass('span6').addClass('span12');
				}
			});


			jQuery("#listmapUserRoute").on("click",".ctleftshowessentials-toggle", function(){
				jQuery(this).removeClass('ctleftshowessentials-toggle').addClass('ctlefthideessentials-toggle');
				jQuery(this).find('span').removeClass('icon-chevron-right').addClass('icon-chevron-left');
				jQuery('#listuserroute').show();
				jQuery('#mapuserroute').removeClass('span12').addClass('span6');
			});

			jQuery("#listmapUserRoute").on("click",".ctrighthideessentials-toggle",function(){
				if(jQuery('#listuserroute').css('display') == 'none') {
					jQuery('#listuserroute').show();
					jQuery('#mapuserroute').show();
					jQuery('.ctleftshowessentials-toggle').removeClass('ctleftshowessentials-toggle').addClass('ctlefthideessentials-toggle');
					jQuery('.ctlefthideessentials-toggle').find('span').removeClass('icon-chevron-right').addClass('icon-chevron-left');
					jQuery('#mapuserroute').removeClass('span12').addClass('span6');
					jQuery('#listuserroute').removeClass('span12').addClass('span6');
				}else{
					jQuery(this).removeClass('ctrighthideessentials-toggle').addClass('ctrightshowessentials-toggle');
					jQuery(this).find('span').removeClass('icon-chevron-right').addClass('icon-chevron-left');
					jQuery('#mapuserroute').hide();
					jQuery('#listuserroute').removeClass('span6').addClass('span12');
				}
			});

			jQuery("#listmapUserRoute").on("click",".ctrightshowessentials-toggle", function(){
				jQuery(this).removeClass('ctrightshowessentials-toggle').addClass('ctrighthideessentials-toggle');
				jQuery(this).find('span').removeClass('icon-chevron-left').addClass('icon-chevron-right');
				jQuery('#mapuserroute').show();
				jQuery('#listuserroute').removeClass('span12').addClass('span6');
			});

			jQuery('.span2.row-fluid').remove();

			jQuery('.contentsDiv').removeClass('span10').addClass('span12');

			jQuery('#searchbox').focusout(function(){
				setTimeout(function(){ 
					jQuery('#result ul').empty();
				}, 200);
			});

			jQuery('#exportascsv').on('click',function(){
	            var daterange = jQuery('#daterange').val();
	            var listUsers = jQuery('#routeUser').val();
	            var searchbox = jQuery('#searchbox').val();
	            var params = {
	                module: 'CTMobileSettings',
	                action: 'getUserLatLong',
	                mode: 'ExportDataCount',
	                user_id:listUsers,
	                daterange:daterange,
	                searchbox:searchbox
	            
	            };
	            var progressIndicatorElement = jQuery.progressIndicator({
	              'position' : 'html',
	              'blockInfo' : {
	               'enabled' : true
	              }
	            });
	            AppConnector.request(params).then(function (res) {
	                progressIndicatorElement.progressIndicator({'mode' : 'hide'});
	                if(res.result['success'] > 0){
	                    jQuery('#type').val('csv');
	                    jQuery('#downloadForm').submit();
	                }else{
	                    var pparams = {
			                title : app.vtranslate('Error'),
			                text: app.vtranslate('No Data Available.'),
			                animation: 'show',
			                type: 'error'
			            };
			          	Vtiger_Helper_Js.showPnotify(pparams);   
	                }
	            
	            });  
	            
	        });

	         jQuery('#exportasexcel').on('click',function(){
	            var daterange = jQuery('#daterange').val();
	            var listUsers = jQuery('#routeUser').val();
	            var searchbox = jQuery('#searchbox').val();
	            var params = {
	                module: 'CTMobileSettings',
	                action: 'getUserLatLong',
	                mode: 'ExportDataCount',
	                user_id:listUsers,
	                daterange:daterange,
	                searchbox:searchbox
	            
	            };
	            var progressIndicatorElement = jQuery.progressIndicator({
	              'position' : 'html',
	              'blockInfo' : {
	               'enabled' : true
	              }
	            });
	            AppConnector.request(params).then(function (res) {
	                progressIndicatorElement.progressIndicator({'mode' : 'hide'});
	                if(res.result['success'] > 0){
	                    jQuery('#type').val('excel');
	                    jQuery('#downloadForm').submit();
	                }else{
	                	var pparams = {
			                title : app.vtranslate('Error'),
			                text: app.vtranslate('No Data Available.'),
			                animation: 'show',
			                type: 'error'
			            };
			          	Vtiger_Helper_Js.showPnotify(pparams);
	                }
	            
	            });  
	            
	        });
		});
	</script>

	{/literal}

	{if $API_KEY neq ''}
			<script async defer
			src="https://maps.googleapis.com/maps/api/js?key={$API_KEY}&language={$MAP_LANGUAGE}&callback=initMap">
			</script>
			{literal}
					<script type='text/javascript'>
					var flightPath;
					var map;
					var markers = [];
					var flightPlanCoordinates = [];
					var viewtype='list';
					function initMap() {
						map = new google.maps.Map(document.getElementById('map'), {
						  zoom: 3,
						  center: {lat: 0, lng: -180},
						  mapTypeId: 'terrain'
						});

						var flightPlanCoordinates = [
						  {lat: 37.772, lng: -122.214},
						  {lat: 21.291, lng: -157.821},
						  {lat: -18.142, lng: 178.431},
						  {lat: -27.467, lng: 153.027}
						];
						flightPath = new google.maps.Polyline({
						  path: flightPlanCoordinates,
						  geodesic: true,
						  strokeColor: '#FF0000',
						  strokeOpacity: 1.0,
						  strokeWeight: 2
						});

						flightPath.setMap(null);

						//jQuery('.timeLineViewButton').trigger('click');
					}
					
				jQuery(document).ready(function () {
					
					setTimeout(function(){ 
						jQuery('.timeLineViewButton').trigger('click');
					}, 500);

					jQuery('#example1 tbody').on('click', 'tr', function () {
						var index = jQuery(this).index();
						for (var i = 0; i < markers.length; i++) {
							google.maps.event.trigger(markers[i], 'click');
						}
						google.maps.event.trigger(markers[index], 'mouseover');
					});
				
				/*jQuery('#routeUser').on('change',function(){
					
					var mainmodule = app.getModuleName();
					var parentmodule  = app.getParentModuleName();
					var action = 'getUserLatLong';
					var user_id = jQuery(this).val();
					var daterange = jQuery('input[name="daterange"]').val();
					//var checkmodule  = jQuery('#sourceModule').val();
					var searchtext = jQuery("#searchbox").val();
					if(searchtext == ""){
						jQuery("#hiddensearchval").val('');
					}
					var searchid = jQuery("#hiddensearchval").val();
					if(viewtype == 'list'){
						var mode = 'ServerSideAjax';
						getUserDataWithAPIServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);	
					}
					else if(viewtype == 'timeline'){
						var mode = 'timeline';
						getUserDataWithAPITimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);		
					}
				});

				jQuery('#daterange').on('change',function(){
					
					var mainmodule = app.getModuleName();
					var parentmodule = app.getParentModuleName();
					var action = 'getUserLatLong';
					var user_id = jQuery('#routeUser').val();
					var daterange = jQuery(this).val();
					
					var searchtext = jQuery("#searchbox").val();
					if(searchtext == ""){
						jQuery("#hiddensearchval").val('');
					}
					var searchid = jQuery("#hiddensearchval").val();
					if(viewtype == 'list'){
						var mode = 'ServerSideAjax';
						getUserDataWithAPIServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);	
					}
					else if(viewtype == 'timeline'){
						var mode = 'timeline';
						getUserDataWithAPITimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);		
					}
				});*/

				$("#searchbox").keyup(function() {
					      
			        var searchvalue = $('#searchbox').val();
			        if (searchvalue == "") {
				    	$("#result ul").empty();
			        }
			        else {
						var daterange = jQuery('input[name="daterange"]').val();
						  	var postData = {
							"module": app.getModuleName(),
							"parent": app.getParentModuleName(),
							"action": 'getUserLatLong',
							"mode":'getLabelRecord',
							"user_id":jQuery('#routeUser').val(),
							"daterange": daterange,
							"checkmodule":'',
							"searchvalue":searchvalue
						};
				
						AppConnector.request(postData).then(function(response){
							var len = response.result.length;
							$("#result ul").empty();
						    for( var i = 0; i<len; i++){
						    	$("#result ul").append("<li value='"+response.result[i]['id']+"'>"+response.result[i]['text']+"</li>");
						    }
						    // binding click event to li
						    $("#result li").bind("click",function(){
								setText(this);
						    });
						});
						
			        }
				});	

				jQuery('.listViewButton').on('click',function(){
					var params = {};
		        	jQuery('.listtableview').show();
					jQuery('.listtimeline').hide();
					viewtype='list';	

					var mainmodule = app.getModuleName();
					var parentmodule  = app.getParentModuleName();
					var action = 'getUserLatLong';
					var user_id = jQuery('#routeUser').val();
					var daterange = jQuery('input[name="daterange"]').val();
					var mode = 'ServerSideAjax';
					var searchtext = jQuery("#searchbox").val();

					getUserDataWithAPIServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);	

				});

				jQuery('.timeLineViewButton').on('click',function(){
		        	var params = {};
		        	jQuery('.listtableview').hide();
					jQuery('.listtimeline').show();
					viewtype='timeline';
		            var modulenm = app.getModuleName();
					var parent  = app.getParentModuleName();
					var action = 'getUserLatLong';
					var user_id = jQuery('#routeUser').val();
					var daterange = jQuery('input[name="daterange"]').val();
					//var checkmodule = jQuery('#sourceModule').val();
					var mode = 'timeline';
					var searchtext = jQuery("#searchbox").val();
					if(searchtext == ""){
						jQuery("#hiddensearchval").val('');
					}
					var searchid = jQuery("#hiddensearchval").val();
					getUserDataWithAPITimeline(modulenm,parent,action,user_id,daterange,mode,searchtext);	
					
	        	});

		        jQuery('#tbltimeline tbody').on('click', 'tr', function () {
					var index = jQuery(this).index();
					for (var i = 0; i < markers.length; i++) {
						google.maps.event.trigger(markers[i], 'click');
					}
					google.maps.event.trigger(markers[index], 'mouseover');
				});

		        jQuery('#searchbtn').on('click',function(){
					var mainmodule = app.getModuleName();
				    var parentmodule = app.getParentModuleName();
				    var action = 'getUserLatLong';
				    var user_id = jQuery('#routeUser').val();
				    var daterange = jQuery('input[name="daterange"]').val();
				   	var searchtext = jQuery("#searchbox").val();
				    
				    if(viewtype == 'list'){
				    	var mode = 'ServerSideAjax';
				    	getUserDataWithAPIServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);	
				    }else if(viewtype == 'timeline'){
						var mode = 'timeline';
						getUserDataWithAPITimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);		
					}
				});
			 });

			function setText(element){
				var recordid = $(element).val();
			    var value = $(element).text();
			    $("#searchbox").val(value);
			    $("#result ul").empty();
			    
			    //used when view change list to timeline or vice versa
			    $('#hiddensearchval').val(recordid);
			}

			function getUserDataWithAPIServerSide(mainmodule,parentmodule,action,userid,daterange,mode,searchvalue){

				var url = "index.php?module="+mainmodule+"&parent="+parentmodule+"&action="+action+"&mode="+mode+"&user_id="+userid+"&daterange="+daterange+"&searchvalue="+searchvalue;

				if ( $.fn.dataTable.isDataTable( '#example1' ) ) {
				   table.destroy();
				}
				
				table = jQuery('#example1').DataTable({
		          'paging'      : true,
		          'lengthChange': false,
		          'searching'   : false,
		          'ordering'    : false,
		          'info'        : true,
		          'autoWidth'   : false,
		          'pageLength' : 20,
		          'processing': true,
			      'serverSide': true,
			      'serverMethod': 'post',
			      'destroy': true,
			      'ajax': {
			          'url':url
			      },
			      "language": {
			          "sProcessing": app.vtranslate('Processing'),
			          "sEmptyTable": app.vtranslate('No data available in table'),
			          "sInfo": app.vtranslate('Showing')+" _START_ "+app.vtranslate('to')+" _END_ "+app.vtranslate('of')+" _TOTAL_ "+app.vtranslate('entries'),
			          "sInfoEmpty": app.vtranslate('Showing')+" 0 "+app.vtranslate('to')+" 0 "+app.vtranslate('of')+" 0 "+app.vtranslate('entries'),
			          "oPaginate": {
			              "sFirst": app.vtranslate('First'),   
			              "sLast": app.vtranslate('Last'),  
			              "sNext":   app.vtranslate('Next'), 
			              "sPrevious": app.vtranslate('Previous'),
			          },
			      },
			      "columns": [
		            { "data": "username" },
		            { "data": "record_label" },
		            { "data": "datetime" },
		            { "data": "action" },
		            { "data": "view_details" }
		          ],
			      "drawCallback": function( settings ) {

				        var data = settings.json.data;
						initMap();
						markers = [];
				        jQuery.each(data, function( index, value ) {
							map.setCenter({lat:value.lat, lng:value.lng});
							map.setZoom(20);
							var infowindow = new google.maps.InfoWindow();
							var marker, i;
							i = index;
							
							  marker = new google.maps.Marker({
								position: new google.maps.LatLng(value.lat, value.lng),
								map: map,
							  });
							
							  google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
								return function() {
								  infowindow.setContent(value.label);
								  infowindow.open(map, marker);
								}
							  })(marker, i));

							  google.maps.event.addListener(marker, 'click', (function(marker, i) {
								return function() {
								  infowindow.close();
								}
							  })(marker, i));
							  markers[i] = marker;	
						});
				   }
		        });
			}	

			function getUserDataWithAPITimeline(mainmodule,parentmodule,action,userid,daterange,mode,searchvalue){
				
				var url = "index.php?module="+mainmodule+"&parent="+parentmodule+"&action="+action+"&mode="+mode+"&user_id="+userid+"&daterange="+daterange+"&searchvalue="+searchvalue;

				if ( $.fn.dataTable.isDataTable( '#tbltimeline' ) ) {
				   table.destroy();
				}

				table = jQuery('#tbltimeline').DataTable({
					'paging'      : true,
					'lengthChange': false,
					'searching'   : false,
					'ordering'    : false,
					'info'        : true,
					'autoWidth'   : false,
					'pageLength' : 10,
					'processing': true,
					'serverSide': true,
					'serverMethod': 'post',
					'destroy': true,
					'ajax': {
					  'url':url
					},
					"language": {
				          "sProcessing": app.vtranslate('Processing'),
				          "sEmptyTable": app.vtranslate('No data available in table'),
				          "sInfo": app.vtranslate('Showing')+" _START_ "+app.vtranslate('to')+" _END_ "+app.vtranslate('of')+" _TOTAL_ "+app.vtranslate('entries'),
				          "sInfoEmpty": app.vtranslate('Showing')+" 0 "+app.vtranslate('to')+" 0 "+app.vtranslate('of')+" 0 "+app.vtranslate('entries'),
				          "oPaginate": {
				              "sFirst": app.vtranslate('First'),   
				              "sLast": app.vtranslate('Last'),  
				              "sNext":   app.vtranslate('Next'), 
				              "sPrevious": app.vtranslate('Previous'),
				          },
				    },
					"columns": [
					{ "data": "activitytime" },
					{ "data": "moduleimg" },
					{ "data": "action" },
					{ "data": "modifiedby" },
					],
					"drawCallback": function( settings ) {
						var data = settings.json.data;
						
						initMap();
						markers = [];
				        jQuery.each(data, function( index, value ) {
							map.setCenter({lat:value.lat, lng:value.lng});
							map.setZoom(20);
							var infowindow = new google.maps.InfoWindow();
							var marker, i;
							i = index;
							
							marker = new google.maps.Marker({
								position: new google.maps.LatLng(value.lat, value.lng),
								map: map,
							});

							google.maps.event.addListener(marker, 'mouseover', (function(marker, i) {
								return function() {
							  		infowindow.setContent(value.label);
							  		infowindow.open(map, marker);
								}
							})(marker, i));

							google.maps.event.addListener(marker, 'click', (function(marker, i){
									return function() {
							  		infowindow.close();
								}
							})(marker, i));
							markers[i] = marker;	
						});
					}
			    });
			}	
			</script>
		   {/literal}
    {else}
		 <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
		 <link href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css" rel="stylesheet"/>
		{literal}
				<script type='text/javascript'>
				
					var markers = [];
					var myMap = '';
					var flightPlanCoordinates = [];
					var viewtype='list';
					function initOpenMap() {
					 	var element = document.getElementById('map');
						//element.style = 'height:300px;';
						myMap = L.map(element);

						// Add OSM tile leayer to the Leaflet map.
						var mylayer = L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
						    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
						}).addTo(myMap);
					 }
					jQuery(document).ready(function () { 
						initOpenMap();
						setTimeout(function(){ 
							jQuery('.timeLineViewButton').trigger('click');
						}, 500);

						jQuery('.listViewButton').on('click',function(){
							var params = {};
				        	jQuery('.listtableview').show();
							jQuery('.listtimeline').hide();
							viewtype='list';	

							var mainmodule = app.getModuleName();
							var parentmodule  = app.getParentModuleName();
							var action = 'getUserLatLong';
							var user_id = jQuery('#routeUser').val();
							var daterange = jQuery('input[name="daterange"]').val();
							var mode = 'ServerSideAjax';
							var searchtext = jQuery("#searchbox").val();

							getUserDataServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);	

						});

						jQuery('#example1 tbody').on('click', 'tr', function () {
							var index = jQuery(this).index();
							// var info = table.page.info();
							// index = index + info.start;
							for (var i = 0; i < markers.length; i++) {
								markers[index].openPopup();
							}
							
						});

						/*jQuery('#routeUser').on('change',function(){
							
							var mainmodule = app.getModuleName();
							var parentmodule = app.getParentModuleName();
							var action = 'getUserLatLong';
							var user_id = jQuery(this).val();
							var daterange = jQuery('input[name="daterange"]').val();
							var searchtext = jQuery("#searchbox").val();
							if(searchtext == ""){
								jQuery("#hiddensearchval").val('');
							}
							var searchid = jQuery("#hiddensearchval").val();
							
							if(viewtype == 'list'){
								var mode = 'ServerSideAjax';
								getUserDataServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);	
							}
							else if(viewtype == 'timeline'){
								var mode = 'timeline';
								getUserDataTimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);		
							}
						});

						jQuery('#daterange').on('change',function(){
								
							var mainmodule = app.getModuleName();
							var parentmodule = app.getParentModuleName();
							var action = 'getUserLatLong';
							var user_id = jQuery('#routeUser').val();
							var daterange = jQuery(this).val();
							var searchtext = jQuery("#searchbox").val();
							if(searchtext == ""){
								jQuery("#hiddensearchval").val('');
							}
							var searchid = jQuery("#hiddensearchval").val();
							if(viewtype == 'list'){
								var mode = 'ServerSideAjax';
								getUserDataServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);	
							}
							else if(viewtype == 'timeline'){
								var mode = 'timeline';
								getUserDataTimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchid);		
							}
						});*/

						$("#searchbox").keyup(function() {
					      
					    	var searchvalue = $('#searchbox').val();
					       	if (searchvalue == "") {
						   		$("#display").html("");
					       	}
					       	else {
								var daterange = jQuery('input[name="daterange"]').val();
							  	var postData = {
									"module": app.getModuleName(),
									"parent": app.getParentModuleName(),
									"action": 'getUserLatLong',
									"mode":'getLabelRecord',
									"user_id":jQuery('#routeUser').val(),
									"daterange": daterange,
									"checkmodule":'',
									"searchvalue":searchvalue
								};
						
								AppConnector.request(postData).then(
									function(response){
						
							    	var len = response.result.length;
							    	$("#result ul").empty();
							    	for( var i = 0; i<len; i++){
										$("#result ul").append("<li value='"+response.result[i]['id']+"'>"+response.result[i]['text']+"</li>");
							    	}
								    // binding click event to li
								    $("#result li").bind("click",function(){
										setText(this);
								    });
								});
								
					        }
					   	});	
						
						jQuery('.timeLineViewButton').on('click',function(){
				        	var params = {};
				        	jQuery('.listtableview').hide();
							jQuery('.listtimeline').show();
							viewtype ='timeline';
				            var modulenm = app.getModuleName();
							var parent  = app.getParentModuleName();
							var action = 'getUserLatLong';
							var user_id = jQuery('#routeUser').val();
							var daterange = jQuery('input[name="daterange"]').val();
							var mode = 'timeline';
							var searchtext = jQuery("#searchbox").val();
							if(searchtext == ""){
								jQuery("#hiddensearchval").val('');
							}
							//var searchid = jQuery("#hiddensearchval").val();
							getUserDataTimeline(modulenm,parent,action,user_id,daterange,mode,searchtext);	
							
			        	});

				        jQuery('#tbltimeline tbody').on('click', 'tr', function () {
							var index = jQuery(this).index();
							for (var i = 0; i < markers.length; i++) {
								markers[index].openPopup();
							}
						}); 

						jQuery('#searchbtn').on('click',function(){
							var mainmodule = app.getModuleName();
						    var parentmodule = app.getParentModuleName();
						    var action = 'getUserLatLong';
						    var user_id = jQuery('#routeUser').val();
						    var daterange = jQuery('input[name="daterange"]').val();
						   	var searchtext = jQuery("#searchbox").val();
						    
						    if(viewtype == 'list'){
						    	var mode = 'ServerSideAjax';
						    	getUserDataServerSide(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);	
						    }else if(viewtype == 'timeline'){
								var mode = 'timeline';
								getUserDataTimeline(mainmodule,parentmodule,action,user_id,daterange,mode,searchtext);		
							}
						});
						
					});

					function setText(element){
					    var recordid = $(element).val();	
					    var value = $(element).text();

					    $("#searchbox").val(value);
					    $("#result ul").empty();

					    //used when go in timeline view
					    $('#hiddensearchval').val(recordid);
					
					}
					function getUserDataServerSide(modulename,parentmodule,action,userid,daterange,mode,searchvalue){
						
						var url = "index.php?module="+modulename+"&parent="+parentmodule+"&action="+action+"&mode="+mode+"&user_id="+userid+"&daterange="+daterange+"&searchvalue="+searchvalue;

						if ( $.fn.dataTable.isDataTable( '#example1' ) ) {
						   table.destroy();
						}

						table = jQuery('#example1').DataTable({
							'paging'      : true,
							'lengthChange': false,
							'searching'   : false,
							'ordering'    : false,
							'info'        : true,
							'autoWidth'   : false,
							'pageLength' : 20,
							'processing': true,
							'serverSide': true,
							'serverMethod': 'post',
							'destroy': true,
							'ajax': {
							  'url':url
							},
							"language": {
					          "sProcessing": app.vtranslate('Processing'),
					          "sEmptyTable": app.vtranslate('No data available in table'),
					          "sInfo": app.vtranslate('Showing')+" _START_ "+app.vtranslate('to')+" _END_ "+app.vtranslate('of')+" _TOTAL_ "+app.vtranslate('entries'),
					          "sInfoEmpty": app.vtranslate('Showing')+" 0 "+app.vtranslate('to')+" 0 "+app.vtranslate('of')+" 0 "+app.vtranslate('entries'),
					          "oPaginate": {
					              "sFirst": app.vtranslate('First'),   
					              "sLast": app.vtranslate('Last'),  
					              "sNext":   app.vtranslate('Next'), 
					              "sPrevious": app.vtranslate('Previous'),
					          },
					        },
							"columns": [
								{ "data": "username" },
								{ "data": "record_label" },
								{ "data": "datetime" },
								{ "data": "action" },
								{ "data": "view_details" }
							],
							"drawCallback": function( settings ) {
								
								var result2 = settings.json.data;
								if(result2.length != 0){
									for (var i = 0; i < markers.length; i++) {
										myMap.removeLayer(markers[i]);
									}
									
									markers = [];
									var target = L.latLng(result2[0].lat,result2[0].lng);

									// Set map's center to target with zoom 14.
									myMap.setView(target, 20);

									jQuery.each(result2, function(index, item) {
										i =index;
										marker = new L.marker([item.lat, item.lng])
									    .bindPopup(item.label)
									    .addTo(myMap);
									    marker.on('mouseover', function(event){
										  marker.openPopup();
										});
										markers[i] = marker;
									});
								}
							}
		        		});	
					}

					function getUserDataTimeline(modulename,parentmodule,action,userid,daterange,mode,searchvalue){

						var url = "index.php?module="+modulename+"&parent="+parentmodule+"&action="+action+"&mode="+mode+"&user_id="+userid+"&daterange="+daterange+"&searchvalue="+searchvalue;

						if ( $.fn.dataTable.isDataTable( '#tbltimeline' ) ) {
						   table1.destroy();
						}

						table1 = jQuery('#tbltimeline').DataTable({
							'paging'      : true,
							'lengthChange': false,
							'searching'   : false,
							'ordering'    : false,
							'info'        : true,
							'autoWidth'   : false,
							'pageLength' : 10,
							'processing': true,
							'serverSide': true,
							'serverMethod': 'post',
							'destroy': true,
							'ajax': {
							  'url':url
							},
							"language": {
						          "sProcessing": app.vtranslate('Processing'),
						          "sEmptyTable": app.vtranslate('No data available in table'),
						          "sInfo": app.vtranslate('Showing')+" _START_ "+app.vtranslate('to')+" _END_ "+app.vtranslate('of')+" _TOTAL_ "+app.vtranslate('entries'),
						          "sInfoEmpty": app.vtranslate('Showing')+" 0 "+app.vtranslate('to')+" 0 "+app.vtranslate('of')+" 0 "+app.vtranslate('entries'),
						          "oPaginate": {
						              "sFirst": app.vtranslate('First'),   
						              "sLast": app.vtranslate('Last'),  
						              "sNext":   app.vtranslate('Next'), 
						              "sPrevious": app.vtranslate('Previous'),
						          },
						     },
							"columns": [
							{ "data": "activitytime" },
							{ "data": "moduleimg" },
							{ "data": "action" },
							{ "data": "modifiedby" },
							],
							"drawCallback": function( settings ) {
								var result2 = settings.json.data;
								if(result2.length != 0){

									for (var i = 0; i < markers.length; i++) {
										myMap.removeLayer(markers[i]);
									}
									
									markers = [];
									var target = L.latLng(result2[0].lat,result2[0].lng);

									// Set map's center to target with zoom 14.
									myMap.setView(target, 20);

									//var tabledata = [];
									jQuery.each(result2, function(index, item) {
										i =index;
										marker = new L.marker([item.lat, item.lng])
									    .bindPopup(item.label)
									    .addTo(myMap);
									    marker.on('mouseover', function(event){
										  marker.openPopup();
										});
										markers[i] = marker;
										
									});
								}
							}
					    });
					}	
						
				</script>
	   {/literal}
   {/if}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="layouts/vlayout/modules/CTMobileSettings/CustomStyle.css" rel="stylesheet" type="text/css">
<button type="button" class="btn btn-info pull-right" style="background:#287DF2 !important;" onclick='window.location.href="{CTMobileSettings_Module_Model::$CTMOBILE_DETAILVIEW_URL}"'>{vtranslate('Go To CRMTiger Settings',$MODULE)}</button>
<label style="font:24px solid black;margin-left:20px;margin-top:10px;">{vtranslate("CRMTiger Mobile Apps - Team Activities",$MODULE)}</label>
<hr>
<div class="">
  	<div class="container-fluid">
    	<div class="row-fluid">
    		<div class="main_div">
				<div class="box2">
					<form class="form-horizontal recordEditView" id="downloadForm" name="edit" method="post" action="index.php" enctype="multipart/form-data">
						<div class="row">
						<input type="hidden" name="module" value="CTMobileSettings" />
		                <input type="hidden" name="action" value="getUserLatLong" />
		                <input type="hidden" name="mode" value="ExportData" />
						<!-- code by sapna -->
							<div class="" style="width: 25%;float: left;">
								<div class="search-link hidden-xs" style="margin-top:0px; height:30px;">
									<span class="fa fa-search" aria-hidden="true"></span>
									<input type="hidden" id="searchtextvalue" name="searchtextvalue"/>
									<input type="text" class="keyword-input" id="searchbox" name="searchbox" placeholder="{vtranslate('LBL_TYPE_SEARCH')} {vtranslate('LBL_RECORD')}" 	style="height:24px;color:black;"/>
					     				 <div id="result"><ul></ul></div>
								
								</div>
							</div>
							<!-- code by sapna end-->
							<div class="" style="width: 15%;float: left;margin-right: 35px;">
							<select data-fieldname="routeUser" name="user_id" id="routeUser" data-fieldtype="picklist" class="chzn-select chzn-done" style="margin-left:1%;width:100%;">
							<option value="">{vtranslate('All user',$MODULE)}</option>
							{foreach item=PICKLIST_VALUE key=PICKLIST_NAME from=$ROUTE_USER}
							<option value="{$PICKLIST_VALUE['id']}">{$PICKLIST_VALUE['name']}</option>
							{/foreach}
							</select>
							</div>
							<div class="" style="width: 22%;float: left;">
							<input type="text" class="inputElement" id="daterange" name="daterange" value="" style="display: inline!important;margin-left:1%;width:70%;"/>
							</div>

							<button type="button" class="btn btn-success btn-sm" id="searchbtn">{vtranslate('Search',$MODULE)}</button>

							<button type='button' class='btn btn-success timeLineViewButton' name="view" value="csv" style="display: inline!important;margin-left:1%;" title="{vtranslate('TimeLine View', $MODULE)}"><img style="height:25px;" src="layouts/vlayout/modules/CTMobileSettings/icon/timeline-icon.png"/></button>

							<button type='button' class='btn btn-success listViewButton' name="view" value="csv" style="display: inline!important;margin-left:1%;" title="{vtranslate('List View', $MODULE)}"><img style="height:25px;" src="layouts/vlayout/modules/CTMobileSettings/icon/map-view.png"/></button>
							<input type="hidden" id="type" name="type" value="csv"/>
							<button type='button' id="exportascsv" class='btn btn-success saveButton' style="display: inline!important;margin-left:1%;" title="{vtranslate('EXPORT AS CSV', $MODULE)}"><img style="height:25px;" src="layouts/vlayout/modules/CTMobileSettings/icon/export-csv.png"/></button>

				            <button type='button' id="exportasexcel" class='btn btn-success saveButton' style="display: inline!important;margin-left:1%;" title="{vtranslate('EXPORT AS EXCEL', $MODULE)}"><img style="height:25px;" src="layouts/vlayout/modules/CTMobileSettings/icon/export-excel.png"/></button>

						</div>
					</form>

					<input type="hidden" name="hiddensearchval" id="hiddensearchval" value="" />
				  	<div class="row-fluid" id="listmapUserRoute">
				  		<div class="span6" id="listuserroute" style="margin-top: 30px;float:left;">
				  			<div class="listtimeline">
				  				<table id="tbltimeline" style="width: 100%;">
				  					<thead style="display: none;">
				                        <tr>
				                        	<th style="width:25%;"></th>
				                        	<th style="width:25%;"></th>
				                        	<th style="width:30%;"></th>
				                        	<th style="width:10%;"></th>
				                        </tr>
				                    </thead>
				                    <tbody>
				                    </tbody>
				  				</table>
				  			</div>
				  			<div class="listtableview">
				                <table id="example1" class='table table-bordered table-striped'>
				                    <thead>
				                        <tr><th style="width:15%;"> {vtranslate('User Name','CTMobileSettings')} </th><th style="width:25%;"> {vtranslate('Record Label','CTMobileSettings')} </th><th style="width:30%;"> {vtranslate('Date Time','CTMobileSettings')} </th><th style="width:10%;"> {vtranslate('Action','CTMobileSettings')} </th><th style="width:20%;"></th></tr>
				                    </thead>
				                    <tbody>
				                    </tbody>
				                </table>
			            	</div>
			                <div class="ctlefthideessentials-toggle" title="Listing Panel Show/Hide">
								<span class="essentials-toggle-ma
								rker fa cursorPointer icon-chevron-left"></span>
							</div>
			            </div>
			            <div class="span6" id="mapuserroute" style="margin-top: 30px;">	

							<div class="ctrighthideessentials-toggle" title="Map Panel Show/Hide">
								<span class="essentials-toggle-marker fa cursorPointer icon-chevron-right"></span>
							</div>   		                   	
							<div id='map' style="width:100%;min-height: 730px; margin: 0; padding: 0; margin-top: 10px;"></div>
						</div>
		            </div>  			
				</div>
			</div>
		</div>
  	</div>
</div>
	
