@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">Idle 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> Idle 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">
                                                    <div class="form-group row">
                                                        <label for="duration" class="col-4 col-form-label">Duration:</label>
                                                        <div class="col-7">
                                                            {{ Form::number('duration', '5', array('class' => 'form-control mb-2','placeholder'=>'Minutes', 'id'=>'duration','onblur'=>"loadAjax(1,'','')")) }}                                                                                
                                                        </div>
                                                    </div>
                                                </div>
                                                 <div class="col-6">
                                                    <div class="form-group row">
                                                        <label style="color:#555555" for="duration" class="col-11 offset-1 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 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="unit" 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>Total Idle(s)</th>
                                                                    <th>Total Idle Time</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) {
        $("#start_date").val(t.format("MM/DD/YYYY hh:mm A"));
        $("#end_date").val(e.format("MM/DD/YYYY hh:mm A"));        
         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 +'&duration='+$("#duration").val()+'&type=idleType';

        params=params +'&which_report=idleReport';
        //$('.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/getReport') }}",
      dataType: "JSON",
      data: { 
        _token : '{{ csrf_token() }}',
         'unit'         : $("#unit_id").val(),
         'start'         : $("#start_date").val(),
         'end'         : $("#end_date").val(),
         'group'         : $("#group_id").val(),         
         'duration'         :$("#duration").val(),
         'type'         : "idleType"
         },
      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='idleType'>"
              + data[idx].unitname
              + "</a>";
      
          if(typeof data[idx].totalIdleTimeCount != "undefined") {
              var _totalIdleTimeCount           = data[idx].totalIdleTimeCount;              
          } else {
              var _totalIdleTimeCount           = '';
          }          
          
          if(typeof data[idx].totalIdleTime != "undefined") {
              var _totalIdleTime           = data[idx].totalIdleTime;              
          } else {
              var _totalIdleTime           = '';
          }
          
          _dataset.push([_j, _unitname, _totalIdleTimeCount,_totalIdleTime]);
          _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();
      }
    });

    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'),
                    'duration'         :$("#duration").val()
                }
                ,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()+'&duration='+$("#duration").val();
        params=params +'&type=idletype&which_report=idleReport&doExport=1';
        
        window.location.href = params;
    });        
        
</script>

@endsection