@extends('layouts.blank')

<div class="modal fade" id="gridModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg-long" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">
            @if(!empty($isSpeed) && $speedEventsOnly == "true")            
                {{$unitName}}Speed Report - Events Only
            @elseif(!empty($isSpeed))                
                {{$unitName}}Speed Report
            @elseif($type == "startStopType")
                {{$unitName}}Start-Stop Report
            @elseif(empty($type))
                {{$unitName}}Activity Report
             @elseif($type == "idleType")   
                {{$unitName}}Idle Report
             @elseif($type == "stopType")   
                {{$unitName}}Stop Report             
             @elseif($type == "totalS1On")   
                {{$unitName}} PTO Report
             @endif  
        </h5>
        <div class="row excel_to_report_btn ">                                               
            <div class="col-6"></div>
            <div class="col-6 text-right">
                <button type="button" id='export_excelPopup' class="btn btn-outline-primary float-right"><i class="fa fa-file-excel"></i> Export to Excel</button>
            </div>
        </div>           
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>        
      <div class="modal-body"> 
      <div style="display:none" id="parse_data">{{$unitTrackingData}}</div>        
        <div class="detailed-info-table">
                        <div class="info-table">
                             <table  class="table table-striped data-table-grid table-responsive">
                                <thead class="thead-dark">
                                    <tr>     
                                        <th>#</th>                                              
                                        @if(empty($isSpeed))
                                            @if($type != "totalS1On")  
                                              <th>Start Date</th>                         
                                              <th>End Date</th>
                                            @else
                                            <th>Date</th>                               
                                            @endif
                                            @if(empty($type) || $type == "stopType" )
                                                <th class="show_stop_sum_duration">Stop Duration</th>
                                               
                                            @endif
                                            @if($type == "startStopType")
                                                <th class="show_duration">Duration</th>
                                              
                                            @endif    
                                            @if($type == "startStopType")
                                                <th >Ignition</th>
                                              
                                            @endif                                         
                                            @if(empty($type))
                                                <th class="show_sum_motion_duration" >Travel Duration</th>
                                            @endif
                                            @if(empty($type) || $type == "idleType")
                                                <th class="show_sum_ideal_duration">Idle Duration</th>
                                            @endif
                                             
                                            @if(empty($type))
                                                <th class="sum">Distance Traveled(M)</th>
                                            @endif                                            
                                            <th>Status</th> 
                                        @else
                                            <th>Date</th>  
                                        @endif
                                        @if($type == "totalS1On")
                                                <th>Landmark</th>
                                            @endif
                                        <th>Address</th>    
                                        @if(!empty($isSpeed) && $speedEventsOnly == "true")
                                            <th>Event</th>                                            
                                        @endif    
                                        @if(!empty($isSpeed))
                                            <th class="show_speed">Speed</th>                                            
                                            <th>Direction</th>                                            
                                        @endif    
                                      <th class="stop_sum_duration">stop_duration_intval</th>
                                      <th class="sum_ideal_duration">ideal_duration_intval</th>
                                      <th class="sum_motion_duration">motion_duration_intval</th>
                                      <th class="sum_duration">sum_duration_intval</th> 
                                    </tr>
                                    
                                </thead>
                                <tfoot>
            <tr>
                <th></th>
                 @if(empty($isSpeed))
                <th></th>
                <th></th>
                @if(empty($type) || $type == "stopType" )
                  <th></th>                       
                @endif
                @if($type == "startStopType")
                  <th></th><th></th>
                @endif                                            
                @if(empty($type))
                  <th></th>
                @endif
                @if(empty($type) || $type == "idleType")
                  <th ></th>
                @endif
                
                @if(empty($type))
                  <th ></th>
                @endif                                            
                <th></th> 
                @else
                  <th></th>  
                @endif    
                  <th></th>    
                @if(!empty($isSpeed) && $speedEventsOnly == "true")
                  <th></th>                                            
                @endif    
                @if(!empty($isSpeed))
                  <th ></th>                                            
                  <th></th>                                            
                @endif 
                <th></th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
                                <tbody class="tbody searchable">                                    
                                </tbody>
                            </table>
                        </div>
                    </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary btn-sm" data-dismiss="modal">Close</button>
        <!-- <button type="button" class="btn btn-outline-primary btn-sm">Save changes</button> -->
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">

///$(".data-table-grid").DataTable({});

$(document).ready(function() { 
    
    @if(!empty($unitTrackingData))
        var _data =JSON.parse($('#parse_data').html());
    @else
        var _data =[];    
    @endif    
   
    var _dataset=[];
    var _i = 1;

 $(_data).each(function(idx,dataset){ 
            
            var stop_duration_intval =  _data[idx].stop_duration_intval?_data[idx].stop_duration_intval:0;
                var ideal_duration_intval=_data[idx].idle_duration_intval?_data[idx].idle_duration_intval:0;
                var motion_duration_intval = _data[idx].motion_duration_intval?_data[idx].motion_duration_intval:0;
                 var duration_intval = _data[idx].duration_intval?_data[idx].duration_intval:0;
                 
            @if(!empty($isSpeed))
                var _j                = _i+'.';
                var _date     = _data[idx].event_date;                
                var _addr     =  '<a href="javascript:void(0);" class="report_address">'+_data[idx].addr+'</a>';  
                var _speed     = _data[idx].speed;                  
                var _veh_orient     = _data[idx].veh_orient;

                @if(!empty($isSpeed) && $speedEventsOnly == "true")
                    if(_data[idx].events == "SPEEDING_START") {
                        var _event     = "Start Speeding";  
                    } else {
                        var _event     = "End Speeding";  
                    }
                @endif    
                                
                @if(!empty($isSpeed) && $speedEventsOnly == "true")
                    _dataset.push([_j,_date,_addr,_event,_speed, _veh_orient,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);                 
                @else    
                    _dataset.push([_j,_date,_addr,_speed, _veh_orient,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);                 
                @endif                       
                 _i = _i+1;                
            @else
                var _j                = _i+'.';
                var _start_date     = _data[idx].start_date;
                var _end_date  = _data[idx].end_date;    
                var _status     = _data[idx].status;         
                var _addr     = '<a href="javascript:void(0);" class="report_address">'+_data[idx].addr+'</a>';             
                
                @if(empty($type) || $type == "stopType")
                    var _stop_duration     = _data[idx].stop_duration;  
                @endif
                @if($type == "startStopType")
                    var _duration     = _data[idx].duration;
                    var _event_startstop  = _data[idx].events;                  
                @endif    
                @if(empty($type))
                    var _motion_duration     = _data[idx].motion_duration;  
                    var _distance_travelled     = _data[idx].distance_travelled;  
                @endif
                @if(empty($type) || $type == "idleType")
                    var _idle_duration     = _data[idx].idle_duration;     
                @endif
                @if(empty($type) || $type == "totalS1On")
                    var _s1on_duration     = _data[idx].idle_duration;
                    var _landmark =_data[idx].landmark;
                @endif        

                @if(empty($type))
                    _dataset.push([_j,_start_date,_end_date,_stop_duration,_motion_duration,_idle_duration,_distance_travelled, _status, _addr,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);
                 @elseif($type == "idleType")   
                    _dataset.push([_j,_start_date,_end_date,_idle_duration, _status, _addr,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);
                 @elseif($type == "stopType")   
                    _dataset.push([_j,_start_date,_end_date,_stop_duration,_status, _addr,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);
                 @elseif($type == "startStopType")   
                    _dataset.push([_j,_start_date,_end_date,_duration,_event_startstop,_status, _addr,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);
                 @elseif($type == "totalS1On")   
                    _dataset.push([_j,_start_date, _status,_landmark, _addr,stop_duration_intval,ideal_duration_intval,motion_duration_intval,duration_intval]);
                 @endif                       
                 _i = _i+1;                
            @endif                
        });
        
    $(".data-table-grid").DataTable({
            destroy: true,
            processing: true,
            paging: true,                              
            searchable: true,
            pageLength: 50,
            data : _dataset,
            bAutoWidth:false,
            columnDefs: [
             {
                "targets": [ -1 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ -2 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ -3 ],
                "visible": false,
                "searchable": false
            },
            {
                "targets": [ -4 ],
                "visible": false,
                "searchable": false
            },
            ],
            dom: 'Bfrtip',
            select: {
                  style:    'os',
                  selector: 'td:first-child'
              },
              buttons: [ {
                  extend: 'excelHtml5',
                  text: 'Excel',
                  className: 'inline-exportPopup',
                  style: 'display:none'
              } ],                                
              rowReorder: {                                
              update: true
              },
              footerCallback: function (row, data, start, end, display) {
                    var api = this.api(), data;
                   
                    // Remove the formatting to get integer data for summation
                    var intVal = function (i) {
                        return typeof i === 'string' ?
                            i.replace(/[\$,]/g, '') * 1 :
                            typeof i === 'number' ?
                            i : 0;
                    };

                    // Total over this page
                    //console.log(api.column('.sum').data().length);
                    var pageTotal=0;
                    var sumStopDurationTotal=0;
                    var sumIdealDurationTotal=0;
                    var sumMotionDurationTotal=0;
                    var sumDurationTotal=0;
                    var sumSpeedTotal=0;
                    if (api.column('.sum').data()){
                    pageTotal = api
                        .column('.sum', { page: 'current' })
                        .data()
                        .reduce(function (a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);
                      }
                     if (api.column('.stop_sum_duration').data()){ 
                    sumStopDurationTotal = api
                        .column('.stop_sum_duration', { page: 'current' })
                        .data()
                        .reduce(function (a, b) { 
                            return intVal(a) + intVal(b);
                          
                        }, 0);
                      }
                      if (api.column('.sum_ideal_duration').data()){ 
                    sumIdealDurationTotal = api
                        .column('.sum_ideal_duration', { page: 'current' })
                        .data()
                        .reduce(function (a, b) { 
                            return intVal(a) + intVal(b);
                          
                        }, 0);
                      }
                      if (api.column('.sum_motion_duration').data()){ 
                    sumMotionDurationTotal = api
                        .column('.sum_motion_duration', { page: 'current' })
                        .data()
                        .reduce(function (a, b) { 
                            return intVal(a) + intVal(b);
                          
                        }, 0); 
                      }
                      if (api.column('.sum_duration').data()){
                    sumDurationTotal = api
                        .column('.sum_duration', { page: 'current' })
                        .data()
                        .reduce(function (a, b) { 
                            return intVal(a) + intVal(b);
                          
                        }, 0);       
                        }
                         if (api.column('.show_speed').data()){
                    sumSpeedTotal = api
                        .column('.show_speed', { page: 'current' })
                        .data()
                        .reduce(function (a, b) { 
                            return intVal(a) + intVal(b);
                          
                        }, 0);       
                        }
                        
                    // Update footer
                     $(api.column('.show_speed').footer()).html(sumSpeedTotal);
                     $(api.column('.show_duration').footer()).html(secondsToHms(sumDurationTotal));
                    $(api.column('.show_sum_motion_duration').footer()).html(secondsToHms(sumMotionDurationTotal));
                    $(api.column('.show_sum_ideal_duration').footer()).html(secondsToHms(sumIdealDurationTotal));
                    $(api.column('.show_stop_sum_duration').footer()).html(secondsToHms(sumStopDurationTotal));
                    $(api.column('.sum').footer()).html(pageTotal);
                }
        });
            
 });
 function secondsToHms(d) {
    d = Number(d);
    var h = Math.floor(d / 3600);
    var m = Math.floor(d % 3600 / 60);
    var s = Math.floor(d % 3600 % 60);
    return ('0' + h).slice(-2) + ":" + ('0' + m).slice(-2) + ":" + ('0' + s).slice(-2);
}
$("#export_excelPopup").click(function (){        
 $('.inline-exportPopup').click();
}); 
if($(".dt-buttons").length > 0) {
    $(".dt-buttons").hide();
}
var modal = $('#wireless_telematics_modal'); 
 $(".report_address").click(function (){

        $("tr:odd").css("background-color","");
        $("tr:even").css("background-color","");
        var $tr = $(this).closest('tr'); 
        $tr.css('background-color', '#A9A9A9'); 

        var embed ="<div style='width: 100%; height: 400px;'><iframe width='100%' height='600' frameborder='0' scrolling='no' style='border:0; margin-top: -150px;' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe><div>";
             //$(this).html(embed);
             modal.find('.modal-dialog').css("left","10%");
             modal.find('.modal-dialog').css("top","50px");
             modal.find('.modal-title').text('Google Map Location');
             modal.find('.modal-body').html(embed);
             modal.modal('show');

    });    
</script>