@extends('administrative.layouts.main')
@section('title', 'Alerts')
@section('content')
  <x-breadcrumb />

  <div class="flex justify-between items-center mt-5">
    <div>
      <h4 class="text-2xl font-semibold">Alerts List</h4>
    </div>
  </div>

  <div class="mt-6 rounded-lg bg-white p-4 shadow-[0_0_10px_0_rgba(183,192,206,0.2)]">
    <table id="datatables" class="table">
      <thead>
        <tr>
          <th>SL</th>
          <th>Bst Id</th>
          <th>Vrn</th>
          <th>Disconnect</th>
          <th>Engine On</th>
          <th>Engine Off</th>
          <th>Panic</th>
          <th>Harsh Break</th>
          <th>Overspeed</th>
          <th>Parking Exit</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
@endsection
@section('pageScripts')
  <script>
    $(document).ready(function() {
      $('#datatables').DataTable({
        layout: {
          topEnd: {
            search: {
              placeholder: 'Search...'
            }
          }
        },
        lengthMenu: [10, 25, 50, {
          label: 'All',
          value: -1
        }],
        pageLength: 25,
        language: {
          search: ""
        },
        scrollX: true,
        processing: true,
        serverSide: true,
        ajax: '{{ route('administrative.alert.index') }}',
        columns: [{
            data: 'DT_RowIndex',
            name: 'DT_RowIndex',
          },
          {
            data: 'bst_id',
            name: 'bst_id'
          },
          {
            data: 'vrn',
            name: 'vrn'
          },
          {
            data: 'disconnect',
            name: 'disconnect'
          },
          {
            data: 'engine_on',
            name: 'engine_on'
          },
          {
            data: 'engine_off',
            name: 'engine_off'
          },
          {
            data: 'panic',
            name: 'panic'
          },
          {
            data: 'harsh_break',
            name: 'harsh_break'
          },
          {
            data: 'overspeed',
            name: 'overspeed'
          },
          {
            data: 'parking_exit',
            name: 'parking_exit'
          },
        ]
      });
    });
  </script>
@endsection