@extends('backend.layouts.admin.app')

@section('content')
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <ol class="breadcrumb">
        <li><a href="#"><svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0_664_24080)">
          <path d="M7.5 13.5L10.5 13.5" stroke="#007AFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M1.76354 9.91009C1.49878 8.18718 1.3664 7.32573 1.69212 6.56203C2.01785 5.79834 2.74052 5.27582 4.18585 4.2308L5.26574 3.45C7.06372 2.15 7.96271 1.5 9 1.5C10.0373 1.5 10.9363 2.15 12.7343 3.45L13.8141 4.2308C15.2595 5.27582 15.9821 5.79834 16.3079 6.56203C16.6336 7.32573 16.5012 8.18718 16.2365 9.91009L16.0107 11.3793C15.6353 13.8217 15.4477 15.0429 14.5717 15.7714C13.6958 16.5 12.4152 16.5 9.85411 16.5H8.14589C5.58475 16.5 4.30418 16.5 3.42825 15.7714C2.55232 15.0429 2.36465 13.8217 1.98932 11.3793L1.76354 9.91009Z" stroke="#007AFF" stroke-width="1.5" stroke-linejoin="round"/>
          </g>
          <defs>
          <clipPath id="clip0_664_24080">
          <rect width="18" height="18" fill="white"/>
          </clipPath>
          </defs>
          </svg></a></li>
        <li class=""><a href="{{ $user->isAdmin() ? route('admin.dashboard') : route('transporter.dashboard') }}">Dashboard</a></li>
        <li class="active">AI Activity & Operational Alerts</li>
      </ol>
      <div class="d-flex justify-content-between align-items-center flex-wrap">
        <h1>{{$title}}</h1>
       
      </div>
      
    </section>
    <!-- Main content -->
    <section class="content pt-2">

      
      

      
      
      <div class="box-body p-0 travel-history-table table-mb-0" style="position: relative;">
                  <!-- Custom Loader -->
                  <div id="custom-loader" class="text-center" style="display: none; position: absolute; top: 60%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: rgba(255,255,255,0.9); padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                    <div class="spinner-border text-secondary" role="status">
                      <span class="sr-only">Loading...</span>
                    </div>
                    <div class="mt-2">Loading</div>
                  </div>

                  <table class="table table-bordered table-hover" id="tbl-issue-reported" aria-describedby="index-issue-reported-list">
                    <thead>
                      <th scope="col">Transporter</th>
                      <th scope="col"></th>
                      <th scope="col" class="d-none">ID</th>
                      <th scope="col" class="d-none">Created At</th>
                    </thead>
                    <tbody></tbody>
                  </table>
                
              </div>

    </section>
    <!-- /.content -->
  <script type="text/javascript">
  $(document).ready(function() {
    $.fn.dataTable.ext.errMode = () => alert('{{__("messages.datatable_error_message")}}');
   


  var currentTypeFilter = '';
  var table = $('#tbl-issue-reported').DataTable({
       processing: false, // Disable default processing indicator
       serverSide: true,
       info: true,
       searching: true,
       ordering: false, // rely solely on server-side ordering
       order: [],
       columnDefs: [
         { targets: [2, 3], visible: false, searchable: false }
       ],
       dom: 'frt<"bottom"ipl><"clear">',
       ajax: {
         url: '{{ auth()->user()->isTransporter() ? route('transporter.recent-activity.datatable') : route('admin.recent-activity.datatable') }}',
         type: 'GET',
         data: function(d){
           // Custom filters
           d.type = currentTypeFilter;
           d.job_id = $('#jobFilter').val();
           d.transporter_id = $('#transporterFilter').length ? $('#transporterFilter').val() : '';
           var rangeVal = $('#calendar').val();
           if (rangeVal) {
             var parts = rangeVal.split(' - ');
             if (parts.length === 2) {
               d.date_from = moment(parts[0], 'DD/MM/YYYY').format('YYYY-MM-DD');
               d.date_to = moment(parts[1], 'DD/MM/YYYY').format('YYYY-MM-DD');
             }
           }
         },
         beforeSend: function() {
           $('#custom-loader').show();
           $('#tbl-issue-reported').hide();
         },
         complete: function() {
           $('#custom-loader').hide();
           $('#tbl-issue-reported').show();
         }
       },
       columns: [
         { data: 'rendered_message', orderable: false, searchable: false, className: 'text-start w-100', render: function(data, type, row){
             var created = row.created_at_display || '';
             var html = '<div class="fs-16">' + (data || '') + '</div>' +
                        '<div class="fs-14 text-gray">' + created + '</div>';
             return html;
         }},
         { data: 'mine_job_id', visible: false, searchable: false, render: function(data){
             return '<span class="d-none job-id">' + (data || '') + '</span>';
         }},
         { data: 'id', visible: false },
         { data: 'created_at_date', visible: false }
       ]
     });

  // Filters: trigger server reload on change

  $(document).on('change', '#jobFilter', function () { table.ajax.reload(); });

  // If you need transporter-based filtering later, implement similar to job filter using a data attribute
  $(document).on('change', '#transporterFilter', function () { table.ajax.reload(); });

  // Trigger redraw when calendar input changes (typing or external set)
  $(document).on('change', '#calendar', function () { table.ajax.reload(); });

  $('#tbl-issue-reported_filter input[type="search"]').attr('placeholder', 'Search');
    $('#tbl-issue-reported_filter').append(`
        <div class="d-flex justify-content-end jobs-right-filter flex-wrap">
            <div class="max-w-200">
                <select id="jobFilter" class="form-control w-100 ">
                <option value="">All Jobs</option>
                @foreach($jobs as $job)
                <option value="{{$job->id}}">Job #{{$job->id}}</option>
                @endforeach
                </select>
            </div>
            @if(auth()->user()->isAdmin())
              <div class="max-w-200">
                  <select id="transporterFilter" class="form-control w-100">
                    <option value="">Transporters</option>
                    @foreach($transporters as $u)
                    <option value="{{$u->id}}">{{$u->name}}</option>
                    @endforeach
                  </select>
              </div>
            @endif
            <div class="max-w-200">
                <select id="roleFilter" class="form-control w-100">
                <option value="">All Activities & Alerts</option>
                <option value="1">Job Started</option>
                <option value="2">Job Completed</option>
                <option value="3">Job Status Changed</option>
                <option value="4">SOS</option>
                <option value="5">Issue Reported</option>
                <option value="6">Vehicle Diverted</option>
                <option value="[7,8]">Job Assigned</option>
                <option value="[9,10,11,12]">Document Expires</option>
                <option value="[13]">Location Not Updated</option>
                </select>
            </div>
            
            <div class="max-w-250 position-relative custom-width-220">
                <input type="text" class="form-control date-picker" placeholder="Date Range" id="calendar">
                <span class="position-absolute date-picker-icon">
                    <em class="iconsax icon-292D32 fs-20" icon-name="calendar-1"></em>

                </span>
            </div>
        </div>
    `);

    // Helper to normalize any known date formats to YYYY-MM-DD for filtering
    function normalizeDateForFilter(val) {
      if (!val) return '';
      var m = moment(val, [
        'YYYY-MM-DD',
        'YYYY-MM-DD HH:mm:ss',
        'YYYY-MM-DDTHH:mm:ssZ',
        'YYYY-MM-DDTHH:mm:ss.SSSZ',
        'MMM DD | hh:mm A'
      ], true);
      if (!m.isValid()) {
        m = moment(val);
      }
      return m.isValid() ? m.format('YYYY-MM-DD') : '';
    }

    // ===== Polling for new notifications every 5 seconds =====
    var lastId = 0;
    
    // Initialize lastId from current DataTable data
    function initializeLastId() {
      var maxId = 0;
      table.rows().every(function() {
        var data = this.data();
        if (data && data.id && parseInt(data.id) > maxId) {
          maxId = parseInt(data.id);
        }
      });
      lastId = maxId;
    }
    
    // Initialize lastId after DataTable is loaded
    table.on('draw', function() {
      if (lastId === 0) {
        initializeLastId();
      }
    });

    function poll() {
      $.ajax({
        url: '{{ auth()->user()->isTransporter() ? route('transporter.recent-activity.poll') : route('admin.recent-activity.poll') }}',
        method: 'GET',
        data: { 
          last_id: lastId, 
          type: currentTypeFilter,
          job_id: $('#jobFilter').val(),
          transporter_id: $('#transporterFilter').length ? $('#transporterFilter').val() : '',
          date_from: '',
          date_to: ''
        },
        dataType: 'json'
      }).done(function(resp){
        if (resp && resp.data && resp.data.length > 0) {
          // Only reload DataTable if there's new data
          table.ajax.reload(null, false); // false = don't reset pagination
          lastId = resp.last_id || lastId;
        }
      }).fail(function(){
        // On error, still update lastId to prevent repeated failed requests
        console.log('Polling failed, will retry in 5 seconds');
      });
    }

    // Set up polling every 5 seconds
    setInterval(poll, 5000);

    // Role/type filter: reload DataTable with new filter
    $(document).on('change', '#roleFilter', function(){
      currentTypeFilter = $(this).val();
      table.ajax.reload();
    });
  });
</script>
    <script type="text/javascript">
    $(document).ready(function() {
      $('#calendar').daterangepicker({
        autoUpdateInput: false,
        locale: {
          cancelLabel: 'Clear',
          format: 'DD/MM/YYYY'
        }
      });

      $('#calendar').on('apply.daterangepicker', function (ev, picker) {
        $(this).val(picker.startDate.format('DD/MM/YYYY') + ' - ' + picker.endDate.format('DD/MM/YYYY'));
        $('#tbl-issue-reported').DataTable().draw();
      });

      $('#calendar').on('cancel.daterangepicker', function () {
        $(this).val('');
        $('#tbl-issue-reported').DataTable().draw();
      });
    }); 
</script>
@endsection