@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">Activity 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> Activity 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'=>"loadAjax(1,'','')")) }}                                                            
                                                        </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, null ,array('class' => 'form-control unitClass', 'placeholder'=>"-- All Units --", 'id'=>'unit_id', 'onchange'=>"loadAjax(1,'','')")) }}                                                            
                                                        </div>
                                                    </div>
                                                </div>                                                
                                            </div>
                                          
                                        </div>
                                        <!-- /#Report Filters -->
                                        <!-- Reports View -->
                                        <div class="report-view">
                                               <div class="detailed-info-table">
                                                    <div class="info-table ajaxUpdate">
                                                         <table  class="table table-striped data-table">
                                                            <thead class="thead-dark">
                                                                <tr>     
                                                                    <th>#</th>      
                                                                    <th>Unitname</th>  
                                                                    <th>Stop(s)</th>
                                                                    <th>Stop Time</th>
                                                                    <th>Travel Time</th>
                                                                    <th>Idle(s)</th>
                                                                    <th>Idle Time</th>
                                                                    <th>Total Time</th>
                                                                    <th>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>   
 @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) {
        //console.log("New date range selected: " + t.format("MM/DD/YYYY") + " to " + e.format("MM/DD/YYYY") + " (predefined range: " + 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('');
         if (t && e) {
          var diff = datediff(parseDate(t.format("MM/DD/YYYY")), parseDate(e.format("MM/DD/YYYY")));
          if(diff>30){
            bootbox.alert('Pl. select date less than 30 days');
            return false;
          }
            loadAjax(1);
            }
    });

     });
 </script>
<script>
    $(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

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

//load_data('');
loadAjax(1,'','');
function loadAjax(page, field, order){        
     
        var params = "{{url('/reports/showReport/')}}" + '?unit='+$("#unit_id").val()+'&start='+$("#start_date").val()+'&end='+$("#end_date").val()+'&group='+$("#group_id").val();
        if(page != "CLEAR") {
            params = params +'&search='+$("#searchTxt").val();                                  
            if(page != "") {
                params = params +'&page='+page;
            }
        
           if(field != "" && order != "") {
               params = params +'&field='+field +'&order='+order;  
           }           
        }  else if(page == "CLEAR") {
            $("#searchTxt").val(''); 
        }              
        params=params +'&which_report=activityReport';
        //$('.loading').show();
        startLoading();
        $.ajax({
            type: "GET",
            url: params,
            contentType: false,
            success: function (data) {
                $(".ajaxUpdate").html(data);
                stopLoading();
                //$('.loading').hide();
            },
            error: function (xhr, status, error) {
                //alert(xhr.responseText);
            }
        });
    } 
 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/showReport') }}",
      dataType: "JSON",
      data: { 
        _token : '{{ csrf_token() }}',
         'unit'         : $("#unit_id").val(),
         'start'         : $("#start_date").val(),
         'group'         : $("#group_id").val(),         
         'end'         : $("#end_date").val(),
         'which_report': 'activityReport'
         },
      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=''>"
              + 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].totalIdleTimeCount != "undefined") {
              var _totalIdleTimeCount   = ""
                + "<a href='javascript:void(0)' title='View Report' id='"+data[idx].device_id+"' class='openUnitDialog' customType='idleType'>"
                + data[idx].totalIdleTimeCount
                + "</a>";              
          } else {
              var _totalIdleTimeCount           = '';
          }          
          if(typeof data[idx].totalIdleTime != "undefined") {
              var _totalIdleTime   = data[idx].totalIdleTime;                
          } else {
              var _totalIdleTime           = '';
          }
          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           = '';
          }
                    
          _dataset.push([_j, _unitname, _totalStopTimeCount,_totalStopTime,_totalTravelTime,_totalIdleTimeCount,_totalIdleTime,_totalTime, _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();
      }
    });

    return reload_datatable; //return the function itself to reference

    }());    
 }
 

        $('.data-table tbody').on('click', 'td a.openUnitDialog', function () {      
            startLoading();
            var dateRange =$("#select_date_range").val().split("-");
            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();
          var params = "{{url('/reports/exportReport/')}}" + '?unit='+$("#unit_id").val()+'&start='+$("#start_date").val()+'&end='+$("#end_date").val()+'&group='+$("#group_id").val();
        params=params +'&which_report=activityReport&doExport=1';
        
        window.location.href = params;
        });         
        
</script>

@endsection