@extends('layouts.master')
@section('title', 'Alerts')
@section('breadcrumb')
<nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="#">Alerts Management</a></li>
                        </ol>
                    </nav>
 @endsection

@include('layouts.includes.alert')
@section('content')
<style>
  .newfontsize {
    font-size: 11px;
    
  }
  body { margin: 0; }
    .modal-body {
        max-height: calc(120vh - 130px) !important;
        overflow-y: auto;
    } 
  </style>

<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" autocomplete="off" />
                      <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="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>

<div class="pista-wrapper mb-3">
                        <div class="row">
                            <div class="col-8">
                                <form class="form-inline">
                                    <div class="input-group search-box mr-3">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text"><i class="fa fa-search"></i></div>
                                        </div>
                                        <input type="text" class="form-control" id="users_search" placeholder="Search" aria-label="Search">
                                        <div class="input-group-append">
                                            <button title="Comming Soon" class="btn btn-outline-secondary" type="button"><i class="fa fa-microphone"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="col-4 text-right">
                              <button type="button" id="clear_filter" class="btn btn-outline-primary float-right"><i class="fa fa-filter-slash"></i> Clear Filter</button>
                          </div>
                        </div>
                    </div>
<div class="detailed-info-table">
                        <div class="info-table">
                             <table id="" class="table table-striped data-table">
                                <thead class="thead-dark">
                                    <tr>            
                                        <th>#</th>
                                        <th>Date</th>                            
                                        <th>Unit Name</th>                    
                                        <th>Alert Type</th>
                                        <th># Alerts</th>
                                        <th>Emails</th>                                        
                                        <th>Duration</th>
                                        <th>Phone</th> 
                                        <th style='font-size: 14px !important'>Location</th>                                                           
                                        <th class="text-center">Actions</th>
                                    </tr>
                                    
                                </thead>
                                <tbody class="tbody searchable">

                                </tbody>
                            </table>


                        </div>
</div>

<div class="modal-container"></div>  
    <div class="speeding-container"></div>

@endsection

@section('script')
<script>
  
  
load_data('');
function load_data(currentObj){
  var _reload = (function reload_datatable(){
    startLoading();
    $.ajax({
      type: "GET",
      url : "{{ url('ajax-getalerts') }}",
      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)
      {
        stopLoading();
        var _dataset = [];
        var _data = data.dataset;
        var _i = 1;
        $(_data).each(function(idx,dataset){
          if (_data[idx].dateTimeAddress != null) {
            var dateTimeAddress = _data[idx].dateTimeAddress;
            var dateTimeAddress1 = dateTimeAddress.split('|');
            var dateTime = dateTimeAddress1[1];
            var fulladdress = dateTimeAddress1[0];  
          } else {
            var dateTime = '';
            var fulladdress = '';
          }
          var _j            = _i+'.';
          var _id           = _data[idx].id;
          var _dateTime     = ""
          + "<a href='javascript:void(0)' title='View Report' id='"+_data[idx].alertUnitIdPop+"' class='openUnitDialog' customType='alertType'>"
          + dateTime
          + "</a>";
          
          
          
          var _unitname     = _data[idx].unitname;
          var _alertype     = _data[idx].alert_type;
          var _noAlerts     = _data[idx].noAlerts;
          var _email  = _data[idx].emails_list;
          var _duration     = _data[idx].duration;
          var _phone = _data[idx].phone;   
          var _fulladdress = '<a href="javascript:void(0);" class="report_address newfontsize">'+fulladdress+'</a>';          
          var chang_color='red';
          var status_title="inactive";
          if(_data[idx].is_active==1){
            chang_color='green';
            status_title='active';
          }
          var deleteID = _data[idx].alertUnitIdPop;
          //alert(deleteID);
          var _action   = ""        
          //+ "<input id='delete_"+idx+"' value="+deleteID+" /><a href='javascript:void(0)' title='Delete' class=''>"
          +"<button type='button' class='btn btn-link action c-red ml-3 deletebtn' title='delete' value='"+deleteID+"'>"
          +"<i class='fa fa-trash'></i>"          
          + "</button>"
          //+ "</a>";
          _dataset.push([_j,_dateTime,_unitname,_alertype,_noAlerts,_email,_duration,_phone,_fulladdress,_action]);
          _i = _i+1;
        });
        // console.log(_dataset);
        var alertsDataT  =   $(".data-table").DataTable({
                              destroy: true,
                              paging: true,
                              searching: true,
                              pageLength: 100,
                              data : _dataset,
                              bAutoWidth:false,
                              dom: 'Bfrtip',
                              columnDefs: [
                                { className: "text-center", "targets": [ 0 ],"bSortable": false },
                                { className: "text-left", "targets": [ 1 ] },
                                { className: "text-left", "targets": [ 2 ] },
                                { className: "text-left", "targets": [ 3 ] },
                                { className: "text-center", "targets": [ 4 ] },
                                { className: "text-left", "targets": [ 5 ] },
                                { className: "text-center", "targets": [ 6 ] },
                                { className: "text-left", "targets": [ 7 ] },
                                { className: "text-left", "targets": [ 8 ] },
                                { className: "text-center", "targets": [ 9 ] ,"bSortable": false},            
                              ],
                              buttons: [ {
                                    extend: 'excelHtml5',
                                    text: 'Excel',
                                    className: 'inline-export',
                                    style: 'display:none'
                                } ], 
                            });

        $(".dataTables_filter").css("display","none");
        $(".dataTables_length").css("display","none");
        $('#users_search').on( 'keyup click', function () {   // for text boxes
            var v =$(this).val();  // getting search input value
            alertsDataT.search(v).draw();
        }); 

      }
    });

    return reload_datatable; //return the function itself to reference

  }());
}

//onClick=ajax_delete('"+deleteID+/"'); return false;


  function ajax_delete(_id){
    bootbox.confirm("Are you sure you want to Delete!", function(result){
      if(result==true){
        startLoading('Please wait....');
      $.ajax({
        type: "DELETE",
        url : "alert/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
             startLoading('Alert Deleted Successfully.')
             load_data('');
          }else{
              bootbox.alert('There is error to delete record, Try again.');
          }
        }
      });
    }
  });
    }
    function change_status(_id){
      bootbox.confirm("Are you sure you want to change status!", function(result){
   
      if(result==true){
     //if (confirm('Are you sure you want to change status?')) {
      $.ajax({
        type: "POST",
        url : "{{ url('/users/changestatus') }}/"+_id,
        dataType: "JSON",
        data : {"_token": "{{ csrf_token() }}"},
        success: function(data)
        {
          if(data.status === true){  
              alert('Status changed Successfully.');
              load_data('');
          }else{
              alert('There is error while changing status.');
          }         
        }
      });
      }
    });
    }
    

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


  $(document).ready(function(){

    $(document).on('click', ".deletebtn", function () {
      var delid=$(this).val();
      //alert(delid); return false;
      ajax_delete(delid);
      
    });

    $("#clear_filter").click(function(){
          location.reload(true);
      });

    var modal = $('#wireless_telematics_modal'); 
    $(document).on('click', ".report_address", function () { 
      $("tr:odd").css("background-color","");
        $("tr:even").css("background-color","");
        var $tr = $(this).closest('tr'); 
        $tr.css('background-color', '#A9A9A9'); 

        var embed ="<div style='width: 100%; height: 400px;'><iframe width='100%' height='600' frameborder='0' scrolling='no' style='border:0;' marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe><div>";
             //$(this).html(embed);
             modal.find('.modal-dialog').css("left","10%");
             modal.find('.modal-dialog').css("top","50px");
             modal.find('.modal-title').text('Google Map Location');
             modal.find('.modal-body').html(embed);
             modal.modal('show');
       

    });  

    $('#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"));    
       this.element.val(t.format("MM/DD/YYYY hh:mm A")+' - '+e.format("MM/DD/YYYY hh:mm A"));    
        load_data('');
    });
     

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