@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">Start-Stop 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> Start-Stop 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:34 AM">
                                                     <input type="hidden" name="end_date" id="end_date" value="08/16/2026 03:34 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="inputEmail3" 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 class="row">
                                            <div class="col-6">

                                              <div  class="form-group row">
                                                <div class="col-6"><a href="javascript:void(0);" id="sms_ignition_alerts">SMS IgntionOn Alerts</a>
                                                </div>
                                                <div class="col-6"><a href="javascript:void(0);" id="email_ignition_alerts">Email IgntionOn Alerts</a>
                                                </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>Total Stop(s)</th>
                                                                    <th>Total Stop Time</th>
                                                                    <th>Total Travel Time</th>
                                                                    <th>Total Distance Traveled</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>  
    <div class="speeding-container"></div>  
 @endsection

 @section('script')
 <script type="text/javascript">
     $(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').endOf('day')],
           '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:34 AM', 
    "endDate": "08/16/2026 03:34 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()         
         },
      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='startStopType'>"
              + data[idx].unitname
              + "</a>";
         
          if(typeof data[idx].totalStopTimeCount != "undefined") {
            var _totalStopTimeCount   = ""
                + "<a href='javascript:void(0)' title='View Report' id='"+data[idx].device_id+"' class='openUnitDialog' customType='stopType'>"
                + data[idx].totalStopTimeCount
                + "</a>";                        
          } else {
              var _totalStopTimeCount           = '';
          }
          if(typeof data[idx].totalStopTime != "undefined") {
              var _totalStopTime   = data[idx].totalStopTime;                
          } else {
              var _totalStopTime           = '';
          }
          if(typeof data[idx].totalTravelTime != "undefined") {
              var _totalTravelTime           = data[idx].totalTravelTime;
          } else {
              var _totalTravelTime           = '';
          }          
          if(typeof data[idx].totalDistanceTravelled != "undefined") {
              var _totalDistanceTravelled           = data[idx].totalDistanceTravelled;
          } else {
              var _totalDistanceTravelled           = '';
          }
                    
          _dataset.push([_j, _unitname, _totalStopTimeCount,_totalStopTime,_totalTravelTime,_totalDistanceTravelled]);
          _i = _i+1;
        });
        
        var startStopDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              processing: true,
                              paging: true,
                              dom: "Bfrtip",
                              searchable: true,
                              pageLength: 50,
                              data : _dataset,
                              bAutoWidth:false,
                              columnDefs: [],
                              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('/getUnitTrack') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'start'         : $("#start_date").val(),
                    'end'         : $("#end_date").val(),                     
                    'type'         :$(this).attr('customType')
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#gridModal').modal({show:true});     
            });
        });
        
        $("#export_excel").click(function (){        
          $('.inline-export').click();
        });         
        

        $("#sms_ignition_alerts").click(function (){
           bootbox.confirm("Additional charges will apply when using this service.", function(result){
   
      if(result==true){
       startLoading();
            var deviceID = $("#unit_id").val();            
            $('.speeding-container').load("{{ url('/createSpeedingAlert') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'isIgnition'           :1,
                    'duration'          :$("#duration").val(),
                    'alert_type': 'sms'
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#alertModal').modal({show:true});     
            });
          }
        });

    });

        $("#email_ignition_alerts").click(function (){
          bootbox.alert('Free Email Alert Service!');
         // bootbox.confirm("Free Email Alert Service.", function(result){
   
      //if(result==true){
       startLoading();
            var deviceID = $("#unit_id").val();            
            $('.speeding-container').load("{{ url('/createSpeedingAlert') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'isIgnition'           :1,                                   
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#alertModal').modal({show:true});     
            });
          //}
        //});

    });

        
</script>

@endsection