<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /* Custom CSS for full height and center alignment of span */
        .vertical-divider {
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
        }

        .vertical-divider span {
            display: inline-block;
            width: 1px;
            background-color: #dee2e6;
            height: 100%; /* Take full height of the parent div */
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <table th:if="${#lists.size(transactions) !=  0 && #lists != null }" class="table table-bordered font-sm mb-4" data-account-tables>
                <thead>
                <tr>
                    <th>ID</th>
                    <th>Item ID</th>
                    <th>SKU</th>
                    <th>QR Code</th>
                    <th>Created By</th>
                    <th>Created At</th>
                    <th>Bundle Id</th>
                    <th>QA Status</th>
                </tr>
                </thead>
                <tbody>
                <tr  th:each="transaction : ${transactions}" th:object="${transaction}">
                    <td th:text="*{id}"></td>
                    <td th:text="*{itemId}"></td>
                    <td th:text="*{sku}"></td>
                    <td th:text="*{barcode}"></td>
                    <td th:text="*{createdBy}"></td>
                    <td th:text="*{createdAt}"></td>
                    <td th:text="*{bundleId}"></td>
                    <td>
                        <span th:if="*{ not isQa}" class="badge badge-danger">NOT PERFORMED</span>
                        <div th:if="*{isQa}">
                            <span class="badge badge-APPROVED">PERFORMED</span>
                        </div>
                    </td>
                </tr>
                <!-- More rows as needed -->
                </tbody>
            </table>

            <h5 th:if="${#lists.size(transactions) == 0}" class="mt-2">No Inventory Transactions found.</h5>
        </div>
    </div>
</div>
<div th:replace="_fragments :: page-footer-scripts"></div>
<script th:inline="javascript">

    // Initialize DataTables for each individual table
  $('table[data-account-tables]').each(function () {
      const $table = $(this);

      // Prevent reinitializing if already done
      if (!$.fn.DataTable.isDataTable($table)) {
          $table.DataTable({
              pageLength: 5,
              searching: true,
              lengthChange: false,
              processing: false,
              dom: `
                 <'row'<'col-sm-5'B><'col-sm-7'f>>
                 <'row'<'col-sm-12't>>
                 <'row'<'col-sm-5'i><'col-sm-7'p>>`,
              buttons: [{
                  extend: 'excel',
                  text: '',
                  className: 'bi bi-file-earmark-spreadsheet btn-sm d-none' // Keep it hidden
              }]
          });
      }
  });


     (async function () {
         const $selectAllCheckBox = $('[data-checkbox-all]');

         $selectAllCheckBox.change(function () {
             if ($selectAllCheckBox.prop('checked')) {
                 // When parent checkbox is checked, check all child checkboxes
                 $('[name="parent-doc-type-ids"]').each(function () {
                     let $this = $(this);
                     $this.prop('checked', true);
                 });
             } else {
                 // When parent checkbox is unchecked, uncheck all child checkboxes
                 $('[name="parent-doc-type-ids"]').each(function () {
                     let $this = $(this);
                     $this.prop('checked', false);
                 });
             }
         });
     })(jQuery)
</script>

</body>
</html>