@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">Speed 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> Speed 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 after">
                                                        <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 mb-2', '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 class="row "> 
                                                <div class="col-6">
                                                    <div class="form-group row">
                                                        <label for="duration" class="col-4  col-form-label">Speed:</label>
                                                        <div class="col-7">
                                                            {{ Form::number('duration', 5, array('class' => 'form-control mb-2','placeholder'=>'mph', 'id'=>'duration','onblur'=>"load_data('')")) }}                    
                                                        </div>
                                                    </div>
                                                </div>  
                                                
                                                <div class="col-6">
                                                    <div class="form-group row">                       
                                                        
                                                            <div class="col-12 offset-1">
                                                                <div class="col-7">
                                                                    <div class="row">
                                                                        <div class="form-check form-check-inline mt-2">
                                                                            {{ Form::checkbox('speeding_events', '0', false, array('class' => 'form-check-input mr-2', 'style'=>'position: relative;top: -4px;','id'=>'speeding_events','onclick'=>"load_data('')")) }}                                                                                                 
                                                                            <label for="speeding_events" style="vertical-align: middle;">Speeding Events Only</label>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                                <!-- <div class="col-5"><div  class="row"><a href="javascript:void(0);" id="speeding_alers">Send Speeding Alerts</a></div></div> -->
                                                            </div>                                                           
                                                    </div>
                                                </div>
                                                                                                                                            
                                            </div>    
                                            <div class="row "> 
                                                <div class="col-12">
                                                    <div class="form-group row">
                                                        <label style="color:#555555" for="duration" class="col-12 col-form-label">[Note: For the Duration input, please do tab to get the desired result.]</label>                                                        
                                                    </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_speeding_alerts">SMS Speeding Alerts</a>
                                                </div>
                                                <div class="col-6"><a href="javascript:void(0);" id="email_speeding_alerts">Email Speeding 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>Min Speed</th>
                                                                    <th>Max Speed</th>
                                                                    <th>Avg. Speed</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: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(),         
         'isSpeed'           : "yes",
         'duration'          :$("#duration").val(),
         'speed_events_only' :$('input[name="speeding_events"]:checked').is(':checked')
         },
      success: function(data)
      {
        var _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='idleType'>"
              + data[idx].unitname
              + "</a>";
      
          if(typeof data[idx].minSpeed != "undefined") {
              var _minSpeed           = data[idx].minSpeed;              
          } else {
              var _minSpeed           = '0';
          }    
          if(typeof data[idx].maxSpeed != "undefined") {
              var _maxSpeed           = data[idx].maxSpeed;              
          } else {
              var _maxSpeed           = '0';
          }    
          if(typeof data[idx].avgSpeed != "undefined") {
              var _avgSpeed           = data[idx].avgSpeed;              
          } else {
              var _avgSpeed           = '0';
          }    
          
          _dataset.push([_j, _unitname, _minSpeed,_maxSpeed, _avgSpeed]);
          _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('/getUnitTrack') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'start'         : $("#start_date").val(),
                    'end'         : $("#end_date").val(),                   
                    'isSpeed'           : "yes",
                    'duration'          :$("#duration").val(),
                    'speed_events_only' :$('input[name="speeding_events"]:checked').is(':checked')
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#gridModal').modal({show:true});     
            });
        });
        
    $("#export_excel").click(function (){        
      $('.inline-export').click();
    });        
    /*$("#speeding_alers").click(function (){
       startLoading();
            var deviceID =  $("#unit_id").val();            
            $('.speeding-container').load("{{ url('/createSpeedingAlert') }}",
                { 
                    _token : '{{ csrf_token() }}',
                    'unit'         :  deviceID,
                    'isSpeed'           : "yes",
                    'duration'          :$("#duration").val(),
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#alertModal').modal({show:true});     
            });
    });*/

    $("#sms_speeding_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,
                    'isSpeed'           :"yes",
                    'duration'          :$("#duration").val(),
                    'alert_type': 'sms'
                }
                ,function(result){
                    stopLoading();
                //modal.find('.modal-body').html(result);   
                $('#alertModal').modal({show:true});     
            });
          }
        });

    });

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

    });
        
</script>

@endsection