<section class="hero">
    <div class="container">
        <h3><i class="fa-solid fa-road-circle-xmark"></i> &nbsp; Incidents</h3>
        <br/>
        <table
            class="table table-bordered table-hover nowrap"
            cellspacing="0"
            width="100%"
            id="incindent_table"
            data-search="true"
            data-show-columns="true"
        ></table>

      </div>
</section>
<script>
  $(document).ready(async function() {
    // console.log("get checkings")
    const data = {
      action:"GETINCIDENTS"
    }
    console.log(data)
    const incidents = await util.sendData(data)


    const checkinTable = $("#incindent_table").DataTable({
      responsive: true,
      data: incidents.data,
      // select: "multiple",
      // lengthMenu: [
      //   [5, 10, 15, -1],
      //   [5, 10, 15, 'All'],
      // ],
      columns: [        
        { title: "Incident Time", data: "incidentTime" },
        { title: "Description", data: "description" },
        { title: "Category", data: "category" },
        { title: "Who is Involved", data: "involved" },
        { title: "Resolved", data: "resolved" },
      ],
      rowId: "ticketNumber",
      order: [[1, "desc"]],
      stateSave: true,
      colReorder: true,
      colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1,
      },

      scrollX: true,
    });
  //   // checkinTable.draw();
  })

  
</script>