<template>
	<div class="page" data-name="report-show">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left"></div>
                <div class="title">{{PageTitle}}</div>  
                <div class="right">
                    <a href="#" class="link popup-close" data-popup=".popup-fullscreen-report">
                        <i class="f7-icons">close</i>                                           
                    </a>
                </div>                              
            </div>
        </div>                                    
        <div class="page-content bg-color-lightgray ">
            <table id="table-report" class="mdl-data-table " style="width:100%">
                <thead>
                    <tr>


                        <!-- LOT OVERVIEW -->
                        {{#js_if " @root.Type == '10' "}} 
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG54}} </th> <!-- Group Name  -->
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG60}} </th> <!-- Total Assigned Assets  -->                            
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG61}} </th> <!-- In Lot Assets  -->
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG67}} </th> <!-- In Lot Details  --> 
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG62}} </th> <!-- Off Lot Assets  -->                           
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG68}} </th> <!-- Off Lot Details  --> 
                        {{else}}
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG84}} </th> <!-- Geofence Name  -->                        
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG60}} </th> <!-- Total Assigned Assets  -->                            
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG86}} </th> <!-- In Geofence Assets  -->
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG88}} </th> <!-- In Geofence Details  --> 
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG87}} </th> <!-- Off Geofence Assets  -->                           
                            <th> {{@global.LANGUAGE.REPORT_PANEL_MSG89}} </th> <!-- Off Geofence Details  --> 
                        {{/js_if}} 
                        
    					
                     

                    </tr>
                </thead>
                <tbody>     
                    

                    <!-- LOT OVERVIEW -->
                    {{#js_if " @root.Type == '10' "}} 
                        {{#ReportData}}
                            <tr data-item-index="{{@index}}" >                                 
                                <td><i class="f7-icons icon-admin-groups text-color-gray vertical-middle margin-right"></i> {{GroupName}}</td>       
                                <td class="text-align-center">{{TotalAsset}}</td>  
                                <td class="text-align-center">{{InArrayCount}}</td> 
                                <td><a @click="getModalWithAssets" href="#" data-type="in"  class='button button-fill button-small elevation-2 button-table color-green {{#js_if " this.InArrayCount == 0 "}} disabled {{/js_if}}'><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
                                <td class="text-align-center">{{OutArrayCount}}</td> 
                                <td><a @click="getModalWithAssets" href="#" data-type="out" class='button button-fill button-small elevation-2 button-table color-red {{#js_if " this.OutArrayCount == 0 "}} disabled {{/js_if}}' ><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
                            </tr>
                        {{/ReportData}}
                    {{else}}
                        {{#ReportData}}
                            <tr data-item-index="{{@index}}" >                                 
                                <td><i class="f7-icons icon-admin-geofences text-color-gray vertical-middle margin-right"></i> {{GroupName}}</td>       
                                <td class="text-align-center">{{TotalAsset}}</td>  
                                <td class="text-align-center">{{InArrayCount}}</td> 
                                <td><a @click="getModalWithAssets" href="#" data-type="in"  class='button button-fill button-small elevation-2 button-table color-green {{#js_if " this.InArrayCount == 0 "}} disabled {{/js_if}}'><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
                                <td class="text-align-center">{{OutArrayCount}}</td> 
                                <td><a @click="getModalWithAssets" href="#" data-type="out" class='button button-fill button-small elevation-2 button-table color-red {{#js_if " this.OutArrayCount == 0 "}} disabled {{/js_if}}' ><i class="f7-icons icon-show-assets vertical-middle margin-right"></i>{{@global.LANGUAGE.REPORT_PANEL_MSG64}}</a></td>
                            </tr>
                        {{/ReportData}}
                    {{/js_if}} 				
    				
                                      
                </tbody>
                <!-- <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot> -->
            </table>
        </div>
    </div>

</template>

<script>
  // script must return component object
    return {
        data: function () {
            var self = this;   

            var ret = {};            

            var type = self.$route.query.type;

            //console.log(self);
            var pageTitle = Protocol.Helper.getReportTypeName(type);

            var reportData = self.$app.methods.getFromStorage('reportData');

            

            if (!pageTitle) {
                pageTitle = LANGUAGE.REPORT_PANEL_MSG35;
            }
        
            ret = {
                Type: type,
                //DataTable: false,
                PageTitle: pageTitle,
                ReportData: reportData,


                DynamicMapPopup: false,
                DynamicAssetsPopup: false,
                //ReportMarkerGroup: false,
                ReportMarker: false,
                MapTrackReport: false,
                DATATABLEReportAssets: false,
                ChartInOffLot: false,
               
            };

            return ret;
        },
        methods: {
            /*showMap: function(e){
                var self = this;
                var wrapper = $$(e.target).closest('[role="row"]');
                var index = wrapper.data('item-index');
                var positionData = self.ReportData[index];

                if (!positionData.Lat || !positionData.Lng) {
                    self.$app.methods.customNotification({
                        title: positionData.AssetName ? positionData.AssetName : positionData.IMEI,
                        text: LANGUAGE.PROMPT_MSG031
                    });
                }else{
                	
                	self.showMapInModal({
                		PageTitle: self.PageTitle,
                		index: index,
                		positionData: positionData,
                		fromGroup: false,
                	});                	
				}
                            
            },*/
            showMapInModal: function(params){
            	var self = this;
           			
           			if (self.DynamicMapPopup && !self.DynamicMapPopup.destroyed) {
                		self.DynamicMapPopup.close();                		
                	}

            		setTimeout(function(){                	
                		self.DynamicMapPopup = app.popup.create({
                            backdrop: true,
                            closeByBackdropClick: false,
                            animate: false,
                            content: `
                                    <div class="popup popup-report-map" >
                                        <div class="view">
                                            <div class="page">
                                                <div class="navbar">
                                                    <div class="navbar-inner">
                                                        <div class="left"></div>
                                                        <div class="title">${ params.PageTitle }</div>  
                                                        <div class="right">
                                                            <a href="#" class="link popup-close" data-popup=".popup-report-map">
                                                                <i class="f7-icons">close</i>
                                                            </a>
                                                        </div>                              
                                                    </div>
                                                </div>                                    
                                                <div class="page-content bg-color-lightgray" >
                                                    <div id="mapReport" class="mapReport"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    `,
                                    on: {
                                        open: function (popup) { 
                                            self.MapTrackReport = Protocol.Helper.createMap({ target: 'mapReport', latLng: [params.positionData.Lat, params.positionData.Lng], zoom: 14 });

                                            self.ReportMarker = L.marker([params.positionData.Lat, params.positionData.Lng], {icon: Protocol.MarkerIcon[2]});  
                                            //self.ReportMarker.bindTooltip(params.positionData.AssetName, {permanent: false, direction: 'right'});
                                            var markerData = self.getMarkerDataTable(params.positionData, params.index);
                                            self.ReportMarker.bindPopup(markerData,{ maxWidth:self.$app.data.MaxMapPopupWidth, closeButton: false})
                                                .on('popupopen', function (marker) {  
                                                	if (params.fromGroup) { 
	                                                    if (params.fenceType == 'out') {
                                                			if (self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress) {
                                                				$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress);
                                                			}else{
                                                				Protocol.Helper.getAddressByGeocoder(this.getLatLng(),function(address){
		                                                            $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(address);
		                                                            self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress = address; 
		                                                        });
                                                			}
                                                		}else{
                                                			if (self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress) {
                                                				$$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress);
                                                			}else{
                                                				Protocol.Helper.getAddressByGeocoder(this.getLatLng(),function(address){
		                                                            $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(address);
		                                                            self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress = address; 
		                                                        });
                                                			}
                                                		}
                                                	} else {
                                                		if (params.positionData.CustomAddress) {
	                                                        $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(params.positionData.CustomAddress);
	                                                    }else{
	                                                        Protocol.Helper.getAddressByGeocoder(this.getLatLng(),function(address){
	                                                            $$('body .popup-report-map #mapReport').find('[data-popupIdAddress="'+params.index+'"]').html(address); 
	                                                            self.ReportData[params.index].CustomAddress = address;                                                   
	                                                        });
	                                                    }
                                                	}                                          
	                                                    
                                                });
                                            self.ReportMarker.addTo(self.MapTrackReport);                                               
                                        }, 
                                        closed: function(popup){ 
                                        	self.MapTrackReport.removeLayer(self.ReportMarker);
                                        	self.MapTrackReport.remove();                                       	
                                        	popup.$el.remove();
                                        	popup.destroy();                                        	
                                        },
                                    }
                        }).open();

					}, 200);
            },
            getModalWithAssets: function(e){
            	var self = this;
                var wrapper = $$(e.target).closest('[role="row"]');
                var fenceType = $$(e.target).closest('a').data('type');
                var index = wrapper.data('item-index');
                var positionData = self.ReportData[index];
                
                var tableAssetArray = fenceType == 'out' ? positionData.OutArray : positionData.InArray;
                var modalTitle = '';
                if (self.Type == '10') {
                	modalTitle = fenceType == 'out' ? LANGUAGE.REPORT_PANEL_MSG05 : LANGUAGE.REPORT_PANEL_MSG06;
                }else{
                	modalTitle = fenceType == 'out' ? LANGUAGE.REPORT_PANEL_MSG92 : LANGUAGE.REPORT_PANEL_MSG93;
                } 

                if (self.DynamicAssetsPopup && !self.DynamicAssetsPopup.destroyed) {
                	self.DynamicAssetsPopup.close();
                }

                var tableRows = '';

                if (tableAssetArray.length > 0) {
	                for (var i = tableAssetArray.length - 1; i >= 0; i--) {                	
	                	tableRows += 	`<tr data-item-index="${ i }" > 
									    	<td class="cursor-pointer text-color-red showMap"  ><i class="f7-icons icon-address"></i></td>
									        <td>${ tableAssetArray[i].Name }</td>
									        <td>${ tableAssetArray[i].IMEI }</td>  
									        <td class="white-space-normall min-width-200">
									            <a href="#" class="link showAddress">${ LANGUAGE.REPORT_PANEL_MSG63 }</a>
									        </td>                                                     
									    </tr>`;
	                }
                }

                if (!positionData.CustomAddress) {
                    positionData.CustomAddress = LANGUAGE.COM_MSG08;
                    Protocol.Helper.getAddressByGeocoder({lat: positionData.GroupLat, lng: positionData.GroupLng},function(address){ 
                        self.ReportData[index].CustomAddress = address;
                        $$('.popup-report-assets-table .customGroupAddress').html(address);
                    });
                }

                setTimeout(function(){                	
                	self.DynamicAssetsPopup = app.popup.create({
                        backdrop: true,
                        closeByBackdropClick: false,
                        animate: false,
                        content: `
                                <div class="popup popup-panel-bigger popup-report-assets-table" >
                                    <div class="view">
                                        <div class="page">
                                            <div class="navbar">
                                                <div class="navbar-inner">
                                                    <div class="left"></div>
                                                    <div class="title">${ modalTitle }</div>  
                                                    <div class="right">
                                                        <a href="#" class="link popup-close" data-popup=".popup-report-assets-table">
                                                            <i class="f7-icons">close</i>
                                                        </a>
                                                    </div>                              
                                                </div>
                                            </div>                                    
                                            <div class="page-content bg-color-lightgray" >
                                                <div class="row no-gap overflow-hidden">
                                                    <div class="col-100 tablet-70  ">
                                                        <div class="card dashboard-card-type1 elevation-3 elevation-hover-4 elevation-transition width-auto">
                                                            <div class="card-header bg-color-darkgray text-color-white">
                                                                ${ self.Type == '10' ? LANGUAGE.REPORT_PANEL_MSG70 : LANGUAGE.REPORT_PANEL_MSG85 }
                                                            </div>
                                                            <div class="card-content card-content-padding">
                                                                <div class="list no-margin">
                                                                    <ul>
                                                                        <li>
                                                                            <div class="item-content">
                                                                                <div class="item-media text-color-gray">
                                                                                    ${ self.Type == '10' ? '<i class="f7-icons icon-admin-groups "></i>' : '<i class="f7-icons icon-admin-geofences "></i>' }
                                                                                </div>
                                                                                <div class="item-inner">
                                                                                    <div class="item-title">
                                                                                        ${ positionData.GroupName }
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                        <li>
                                                                            <div class="item-content">
                                                                                <div class="item-media text-color-gray">
                                                                                    <i class="f7-icons icon-radius "></i>
                                                                                </div>
                                                                                <div class="item-inner">
                                                                                    <div class="item-title">
                                                                                        ${ positionData.GroupRadius } ${ LANGUAGE.COM_MSG58 }
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                        <li>
                                                                            <div class="item-content three-rows">
                                                                                <div class="item-media text-color-gray">
                                                                                    <i class="f7-icons icon-address "></i>
                                                                                </div>
                                                                                <div class="item-inner">
                                                                                    <div class="item-text customGroupAddress">
                                                                                        ${ positionData.CustomAddress }
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </li>
                                                                    </ul>
                                                                </div>
                                                            </div>
                                                        </div>   
                                                    </div>     
                                                    <div class="col-100 tablet-30  ">
                                                        <div class="card dashboard-card-type1 elevation-3 elevation-hover-4 elevation-transition">
                                                            <div class="card-header bg-color-darkgray text-color-white">
                                                                ${ self.Type == '10' ? LANGUAGE.REPORT_PANEL_MSG69 : LANGUAGE.REPORT_PANEL_MSG90 } - ${ positionData.TotalAsset }
                                                            </div>
                                                            <div class="card-content card-content-padding">
                                                                <div id="chart-GLotOverview"></div>
                                                            </div> 
                                                        </div>                                                                                                   
                                                    </div>         
                                                </div>
                                                <table id="table-report-assets" class="mdl-data-table tableReportAssets" style="width:100%">
            										<thead>
                										<tr>
															<th> ${ LANGUAGE.REPORT_PANEL_MSG36} </th> <!-- Map  -->
	                       									<th> ${ LANGUAGE.REPORT_PANEL_MSG37} </th> <!-- Asset Name  -->
	                       									<th> ${ LANGUAGE.REPORT_PANEL_MSG38} </th> <!-- IMEI  -->  
	                       									<th> ${ LANGUAGE.REPORT_PANEL_MSG41} </th> <!-- Address  -->
	                       								</tr>
	                       							</thead>
	                       							<tbody>
	                       							${ tableRows }
	                       							</tbody>
	                       						</table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                `,
                                on: {
                                    open: function (popup) { 
					                   
					                    self.DATATABLEReportAssets = $('#table-report-assets').DataTable({
                                            order: [[1, 'asc']],
                                            columnDefs: [{ targets: [ 0 ], orderable: false,  }],
                                            lengthMenu: [5, 10, 25],
                                            pageLength: 5,
					                    });

                                        let chartColumns = []; 
                                        if (self.Type == '10') {
                                        	chartColumns = [
	                                            [LANGUAGE.REPORT_PANEL_MSG06, positionData.InArrayCount],
	                                            [LANGUAGE.REPORT_PANEL_MSG05, positionData.OutArrayCount],
	                                        ]; 
                                        }else{
                                        	chartColumns = [
	                                            [LANGUAGE.REPORT_PANEL_MSG93, positionData.InArrayCount],
	                                            [LANGUAGE.REPORT_PANEL_MSG92, positionData.OutArrayCount],
	                                        ]; 
                                        }                                   


                                        self.ChartInOffLot = c3.generate({
                                            bindto: '#chart-GLotOverview',
                                            size: {                                
                                                height: 180,                       
                                            },
                                            color: {
                                                pattern: ['#4dc08e', '#f96868',]
                                            },
                                            data: {                                
                                                columns: chartColumns,
                                                type : 'pie',                                
                                            },
                                            pie: {
                                                label: {
                                                  format: function(value, ratio, id) {
                                                    //console.log(value, ratio, id);
                                                    return value;
                                                  }
                                                }
                                            }
                                            
                                        });

					                    popup.$el.find('.tableReportAssets').on('click', '.showMap', function(e){					                    	
					                    	var wrapper2 = $$(e.target).closest('[role="row"]');
							                var index2 = wrapper2.data('item-index');							               

					                    	self.showMapInModal({
						                		PageTitle: modalTitle + ' - ' + tableAssetArray[index2].Name,
						                		index: index2,
						                		positionData: tableAssetArray[index2],
						                		fromGroup: true,
						                		fromGroupIndex: index,
						                		fenceType: fenceType,
						                	});
					                    });

					                    popup.$el.find('.tableReportAssets').on('click', '.showAddress', function(e){		
					                    	var wrapper2 = $$(e.target).closest('[role="row"]');
							                var index2 = wrapper2.data('item-index');
							                var parent2 = $$(e.target).closest('td');

					                    	self.showAddressInTable({
					                    		index: index2,
					                    		positionData: tableAssetArray[index2],
												fromGroup: true,
						                		fromGroupIndex: index,
						                		fenceType: fenceType,
						                		parent: parent2,
					                    	});
					                    });
					                    
                                    },   
                                    close: function(popup){
                                        if (self.ChartInOffLot) {
                                            self.ChartInOffLot.destroy()
                                        }  
                                        if (self.DATATABLEReportAssets ) {
                                            self.DATATABLEReportAssets.destroy();
                                        }   
                                    },                               
                                    closed: function(popup){ 
                                                     
                                                              	                                  	
                                    	popup.$el.remove();
                                    	popup.destroy();                                        	
                                    },
                                }
                    }).open();
				}, 200);


            },
            /*getAddressInTable: function(e){
                var self = this;
                var wrapper = $$(e.target).closest('[role="row"]');
                var parent = $$(e.target).closest('td');
                var index = wrapper.data('item-index');
                var positionData = self.ReportData[index];

                if (!positionData.Lat || !positionData.Lng) {
                    self.$app.methods.customNotification({
                        title: positionData.AssetName ? positionData.AssetName : positionData.IMEI,
                        text: LANGUAGE.PROMPT_MSG031
                    });
                }else{   
                	self.showAddressInTable({
                		parent: parent,
                		index: index,
                		positionData: positionData
                	});           	
                    
                }

            },*/
            showAddressInTable: function(params){
            	var self = this;
            	
            	if (params.fromGroup) { 
            		if (params.fenceType == 'out') {
                       	if (self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress) {
                       		params.parent.html(self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress); 
                        }else{
                        	params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
                            Protocol.Helper.getAddressByGeocoder({lat: params.positionData.Lat, lng: params.positionData.Lng},function(address){		                        
		                        params.parent.html(address); 
		                        self.ReportData[params.fromGroupIndex].OutArray[params.index].CustomAddress = address; 
		                    });
                        }
                    }else{
                        if (self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress) {
                        	params.parent.html(self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress);                           
                        }else{
                        	params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
                            Protocol.Helper.getAddressByGeocoder({lat: params.positionData.Lat, lng: params.positionData.Lng},function(address){
		                        params.parent.html(address); 
		                        self.ReportData[params.fromGroupIndex].InArray[params.index].CustomAddress = address; 
		                	});
                    	}
                	}

            	}else{
            		if (!params.positionData.CustomAddress) {
                        params.parent.html('<p><span class="progressbar-infinite color-red"></span></p>');
                        Protocol.Helper.getAddressByGeocoder({lat: params.positionData.Lat, lng: params.positionData.Lng},function(address){ 
                            self.ReportData[params.index].CustomAddress = address;
                            params.parent.html(address);                                   
                        });
                    }else{
                        params.parent.html(params.positionData.CustomAddress);
                    }
                }
            },
            getMarkerDataTable: function(positionData, index){
                var markerData = '';
                markerData += '<table cellpadding="0" cellspacing="0" border="0" class="marker-data-table">';
                if (positionData.AssetName) {
                	markerData +=   '<tr>';
	                markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG37+'</td>';
	                markerData +=       '<td class="marker-data-value">'+positionData.AssetName+'</td>';
	                markerData +=   '</tr>'; 
                }
                if (positionData.Name) {
                	markerData +=   '<tr>';
	                markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG37+'</td>';
	                markerData +=       '<td class="marker-data-value">'+positionData.Name+'</td>';
	                markerData +=   '</tr>'; 
                }
                if (positionData.PositionTime) {
	                markerData +=   '<tr>';
	                markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG40+'</td>';
	                markerData +=       '<td class="marker-data-value">'+positionData.PositionTime+'</td>';
	                markerData +=   '</tr>';
               	}
                markerData +=   '<tr>';
                markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG38+'</td>';
                markerData +=       '<td class="marker-data-value">'+positionData.IMEI+'</td>';
                markerData +=   '</tr>';
                if (self.Type == '512' || self.Type == '3' ) {
                    markerData +=   '<tr>';
                    markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG39+'</td>';
                    markerData +=       '<td class="marker-data-value">'+positionData.Voltage+'</td>';
                    markerData +=   '</tr>';
                }               
                
                markerData +=   '<tr>';
                markerData +=       '<td class="marker-data-caption">'+LANGUAGE.REPORT_PANEL_MSG41+'</td>';
                if (positionData.CustomAddress) {
                    markerData +=       '<td class="marker-data-value marker-address" data-popupIdAddress="'+index+'">'+ positionData.CustomAddress+'</td>';
                }else{
                    markerData +=       '<td class="marker-data-value marker-address" data-popupIdAddress="'+index+'">'+ LANGUAGE.COM_MSG08 +'</td>';
                }
                
                markerData +=   '</tr>';
                markerData += '</table>';
                return markerData;
            },

        },
       
        on: {
            pageInit: function (e, page) { 
                var self = this; 
                if (self.Type) {
                    console.log('here');
                    /*var columnDefs = [
                        { targets: [ 0 ], orderable: false,  }
                    ];
                    var order = [[1, 'asc']];
                    if (self.Type == '5' || self.Type == '8' || self.Type == '10') {
                        columnDefs = [];
                        order = [[0, 'asc']];
                    }
                    if (self.Type == '6' || self.Type == '7') {
                        if (self.SplitBy) {
                            columnDefs = [];
                            order = [[0, 'asc']];
                        }
                    }*/

                    var columnDefs = [];
                    var order = [[0, 'asc']];
                   
                    DATATABLEReport = $('#table-report').DataTable({
                        columnDefs: columnDefs,
                        order: order,
                        /*buttons: [
                           // 'colvis',
                            'excel',
                            'print',
                            'pdf',
                        ],*/
                       /* drawCallback: function () {
                            $('.dataTables_paginate > .pagination > button.mdl-button ').addClass('ripple');
                        }*/
                    });
                }
                   
                              
                
            }, 
            pageAfterIn:function(){
                //var self = this;  
                //console.log('page in');
                
                
            }, 
            pageAfterOut: function () {
                // page has left the view
                
            },
            pageBeforeRemove: function(e, page){ 
                /*let self = this;
                if (self.) {}
                console.log('removed');*/
            },
            
        }
    };
</script>