@extends('layouts.master')

@section('title', 'Reports')

<style type="text/css">
    .excel_to_report_btn{padding-bottom: 15px;}
    body { margin: 0; }
    
    .modal-body {
        max-height: calc(120vh - 130px);
        overflow-y: auto;
    }    
</style>

@section('breadcrumb')

<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Administrative settings</a></li>        
        <li class="breadcrumb-item active" aria-current="page">Event Report</li>
    </ol>
</nav>
 @endsection
 
@section('content')

            <!-- Page Content -->
            <div class="report-content-wrapper">
                <div class="container-fluid">
                  
                    <!-- Report Wrapper -->
                    <div class="report-wrapper toggled">
                        <div class="row">
                            <div class="col">
                                
                                @include ('report.side_bar') 
                                
                                <!-- Reports Content Wrapper -->
                                <div class="report-content-wrapper">
                                    <div class="report-box">
                                        <!-- Sub Header -->
                                        <div class="sub-header mt-0 mb-2">
                                            <h4><a href="#menu-toggle" id="report-toggle"><span class="c-red"><i class="fa fa-angle-double-right"></i></span></a> Event Report </h4>
                                        </div>
                                        <!-- /#Sub Header -->
                                        <!-- Report Filters -->
                                        <div class="pista-wrapper">                 
                                            <div class="row excel_to_report_btn ">                                               
                                                <div class="col-6">
                                                    <div class="form-group row">
                                                        <label for="inputEmail3" class="col-4 col-form-label">Select Date & Time:</label>
                                                        <div class="col-7">
                                                            <div class="input-group mb-2">
                                                                <input type="text" name="datefilter" value="" id="select_date_range" class="form-control select_date_range" />
                                                                <div class="input-group-append">
                                                                    <div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                     <input type="hidden" name="start_date" id="start_date" value="08/15/2026 03:01 AM">
                                                     <input type="hidden" name="end_date" id="end_date" value="08/16/2026 03:01 AM">
                                                </div>  
                                                <div class="col-6 text-right">
                                                    <button type="button" id='export_excel' class="btn btn-outline-primary float-right"><i class="fa fa-file-excel"></i> Export to Excel</button>
                                                </div>
                                            </div>
                                            
                                            <div class="row ">                                                                                             
                                                <div class="col-6 after">
                                                    <div class="form-group row">
                                                        <label for="group_id" class="col-4  col-form-label">Select Group:</label>
                                                        <div class="col-7">
                                                            {{ Form::select('group_id',$groupData, null ,array('class' => 'form-control groupClass', 'placeholder'=>"-- Select Group --", 'id'=>'group_id', 'onchange'=>"load_data(this)")) }}                                                            
                                                        </div>
                                                    </div>
                                                </div>           
                                                                                            
                                                <div class="col-6">
                                                    <div class="form-group row">
                                                        <label for="unit" class="col-4 offset-1 col-form-label">Select Unit Name:</label>
                                                        <div class="col-7">
                                                            {{ Form::select('unit',$unitData, (isset($unit) ? $unit : '') ,array('class' => 'form-control unitClass', 'placeholder'=>"-- All Units --", 'id'=>'unit_id', 'onchange'=>"load_data(this)")) }}                                                            
                                                        </div>
                                                    </div>
                                                </div>                                                
                                            </div>                                            
                                          
                                        </div>
                                        <!-- /#Report Filters -->
                                        <!-- Reports View -->
                                        <div class="report-view">
                                               <div class="detailed-info-table">                                                   
                                                    <div class="info-table">
                                                         <table  class="table table-striped data-table">
                                                            <thead class="thead-dark">
                                                                <tr>     
                                                                    <th>#</th>      
                                                                    <th>Unitname</th>  
                                                                    <th>Ignition On</th>
                                                                    <th>Ignition Off</th>
                                                                    <th>Idle Time</th>                                                                    
                                                                    <th>Travel Time</th>                                                                    
                                                                    <th>Stop Duration</th>                                                                    
                                                                    <th>Total Time</th>                                                                    
                                                                    <th>Total Distance</th>                                                      
                                                                    <th>Drivers Rating</th>               
                                                                </tr>                                                                
                                                            </thead>
                                                            <tbody class="tbody searchable">

                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                        </div>
                                        <!-- /#Reports View -->
                                    </div>
                                </div>
                                <!-- /#Reports Content Wrapper -->
                            </div>
                        </div>
                    </div>
                    <!-- /#Report Wrapper Header -->
                </div>
            </div>
            <!-- /#page-content-wrapper -->
        </main>
        <!-- /#main content -->
    </div>
    <div class="modal-container"></div>   
 @endsection

 @section('script')
 <script type="text/javascript">
  var modal = $('#wireless_telematics_modal'); 
  
     $(document).ready(function()
     {

    $('#select_date_range').daterangepicker({
    "timePicker": true,
    "timePicker12Hour": true,
    "timePickerSeconds":false,
    "ranges": {
      'Today': [moment().startOf("day"), moment()],
           'Yesterday': [moment().subtract(1, 'days').startOf("day"), moment().subtract(1, 'days').endOf('day')],
           'Last 7 Days': [moment().subtract(6, 'days').startOf("day"), moment().endOf('day')],
           'Last 30 Days': [moment().subtract(29, 'days'), moment().endOf('day')],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').endOf('day')]
    },
    "locale": {
        "format": 'MM/DD/YYYY hh:mm A'
    },
    "startDate": '08/15/2026 03:01 AM', 
    "endDate": "08/16/2026 03:01 AM"
}, function(t, e, n) {
        $("#start_date").val(t.format("MM/DD/YYYY hh:mm A"));
        $("#end_date").val(e.format("MM/DD/YYYY hh:mm A"));        
        load_data('');
    });
     });
 </script>
<script>
    $(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});

load_data('');
var unit_id= '';
 function load_data(currentObj){
     

     startLoading();
    var _reload=      (function reload_datatable(){

    if(currentObj != "" && $(currentObj).hasClass('groupClass') && $(currentObj).val() != "") {
        $("#unit_id").val("");
    } else if(currentObj != "" && $(currentObj).hasClass('unitClass') && $(currentObj).val() != "") {
        $("#group_id").val("");        
    }    
    
    $.ajax({
      type: "GET",
      url : "{{ url('/reports/getReport') }}",
      dataType: "JSON",
      data: { 
        _token : '{{ csrf_token() }}',
         'unit'         : $("#unit_id").val(),
        'start'         : $("#start_date").val(),
        'end'         : $("#end_date").val(),                            
        'group'         : $("#group_id").val(),                            
         'type'         : "",
         'eventReport'  : "yes"
         },
      success: function(data)
      {
        var _dataset = [];
        //var _data = data.dataset;
        var _i = 1;        
        $(data).each(function(idx,dataset){            

          var _j                = _i+'.';
          var _unitname   = ""
              + "<a href='javascript:void(0)' title='View Report' id='"+data[idx].device_id+"' class='openUnitDialog' customType='eventType'>"
              + data[idx].unitname
              + "</a>";
          if(typeof data[idx].ignitionOff != "undefined") {
              var _ignitionOff   = data[idx].ignitionOff                    
          } else {
              var _ignitionOff           = '';
          }
          
          if(typeof data[idx].ignitionOn != "undefined") {
              var _ignitionOn   = data[idx].ignitionOn                    
          } else {
              var _ignitionOn           = '';
          }
          
          if(typeof data[idx].totalIdleTime != "undefined") {
              var _totalIdleTime   = data[idx].totalIdleTime                    
          } else {
              var _totalIdleTime           = '';
          }          
          if(typeof data[idx].totalTravelTime != "undefined") {
              var _totalTravelTime   = data[idx].totalTravelTime;                
          } else {
              var _totalTravelTime           = '';
          }
          
          if(typeof data[idx].totalStopTime != "undefined") {
              var _totalStopTime   = data[idx].totalStopTime;                
          } else {
              var _totalStopTime           = '';
          }
          
          if(typeof data[idx].totalTime != "undefined") {
              var _totalTime   = data[idx].totalTime;                
          } else {
              var _totalTime           = '';
          }
          
          if(typeof data[idx].totalDistanceTravelled != "undefined") {
              var _totalDistanceTravelled   = data[idx].totalDistanceTravelled;                
          } else {
              var _totalDistanceTravelled           = '';
          }
          if(typeof data[idx].drivers_rating != "undefined") {
              var _drivers_rating   = data[idx].drivers_rating;   
                 
              if (data[idx].drivers_rating != '' && data[idx].drivers_rating <= 100) {
                var rating = data[idx].drivers_rating;
                var _drivers_rating = ""
                + "<a href='javascript:void(0)' title='View Drivers Rating Report' id='"+data[idx].device_id+"|"+rating+"' class='openDriverRatingDialog' customType='eventType'>"
                + data[idx].drivers_rating
                + "</a>";
              } else {
                var _drivers_rating = data[idx].drivers_rating;  
              }

          } else {
              var _drivers_rating           = '';
          }
          
          _dataset.push([_j, _unitname,_ignitionOn, _ignitionOff, _totalIdleTime, _totalTravelTime, _totalStopTime, _totalTime, _totalDistanceTravelled, _drivers_rating]);
          _i = _i+1;
        });
        
        var startStopDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              processing: true,
                              paging: true,                              
                              searchable: true,
                              pageLength: 50,
                              data : _dataset,
                              bAutoWidth:false,
                              columnDefs: [],
                              dom: 'Bfrtip',
                              select: {
                                    style:    'os',
                                    selector: 'td:first-child'
                                },
                                buttons: [ {
                                    extend: 'excelHtml5',
                                    text: 'Excel',
                                    className: 'inline-export',
                                    style: 'display:none'
                                } ],                                
                                rowReorder: {                                
                                update: true
                                },

        });  
        
        stopLoading();
        if(unit_id!='')
          $('#'+unit_id).click();
      }
    });

    return reload_datatable; //return the function itself to reference

    }());    
 }
 

        $('.data-table tbody').on('click', 'td a.openUnitDialog', function () {      
            startLoading();
            var deviceID = $(this).attr("id");            
            $('.modal-container').load("{{ url('/getEventTrack') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'start'         : $("#start_date").val(),
                    'end'         : $("#end_date").val(),                   
                    'freshLoad'         : '1'                   
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#gridModal').modal({show:true});     
            });
        });

        $('.data-table tbody').on('click', 'td a.openDriverRatingDialog', function () {      
            startLoading();
            var deviceID = $(this).attr("id");            
            $('.modal-container').load("{{ url('/getDriversRatingDetails') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'start'         : $("#start_date").val(),
                    'end'         : $("#end_date").val(),                   
                                
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#gridModal').modal({show:true});     
            });
        });

        
        
    $("#export_excel").click(function (){        
      $('.inline-export').click();
    });        
        
</script>

@endsection