<section class="hero">
    <div class="container">
        <h3><i class="fa-solid fa-truck-pickup"></i> &nbsp;Check Ins</h3>
        <br/>
          <table
            class="table table-bordered table-hover nowrap"
            cellspacing="0"
            width="100%"
            id="checkind_table"
            data-search="true"
            data-show-columns="true"
          ></table>
      </div>
</section>
<script>
  $(document).ready(async function() {
    // console.log("get checkings")
    const data = {
      action:"GETCHECKINS"
    }
    console.log(data)
    const checkins = await util.sendData(data)
    console.log(checkins.data)

    const checkinTable = $("#checkind_table").DataTable({
      responsive: true,
      data: checkins.data,
      // select: "multiple",
      // lengthMenu: [
      //   [5, 10, 15, -1],
      //   [5, 10, 15, 'All'],
      // ],
      columns: [        
        { title: "Order", data: "order" },
        { title: "Schedule", data: "schedule" },
        { title: "Driver", data: "driver" },
        { title: "Haulier", data: "haulier" },
        { title: "Truck", data: 'truck' },
        { title: "Purchase Order #", data: 'purchaseOrderNo' },
        { title: "Tonnage Allowed", data: "tonnageAllowed" },
      ],
      rowId: "order",
      order: [[1, "desc"]],
      stateSave: true,
      colReorder: true,
      colReorder: {
        fixedColumnsLeft: 1,
        fixedColumnsRight: 1,
      },

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

  
</script>