@extends('layouts.app')

@section('content')
<style>
  table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  }

  th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
  }

  th:first-child, td:first-child {
    border-left: 1px solid #ddd;
  }

  th:last-child, td:last-child {
    border-right: 1px solid #ddd;
  }

  tr:hover {
    background-color: #f5f5f5;
  }
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="container">
<!-- Add a table with Bootstrap classes -->
<h1>Items</h1>

<div class="container">
      <div class="row mb-3">
        <div class="col-md-6">
          <form action="{{ route('customers.index') }}" method="GET" role="search">
            <div class="input-group">
              <input type="text" class="form-control" id="search-input" name="search" placeholder="Search..." onkeyup="searchTable()">
              <span class="input-group-btn">
                <button class="btn btn-secondary" type="submit"><i class="fas fa-search"></i></button>
              </span>
            </div>
          </form>
        </div>
      </div>
  </div>
<div class="table-responsive">
  <table class="table table-striped table-hover" id="myTable">
    <thead class="sticky-top">
            <tr>
                <th scope="col">ListID</th>
                <th scope="col">TimeCreated</th>
                <th scope="col">TimeModified</th>
                <th scope="col">EditSequence</th>
                <th scope="col" class="d-none d-md-table-cell">Name</th>
                <th scope="col" class="d-none d-md-table-cell">Full Name</th>
                <th scope="col" class="d-none d-md-table-cell">Is Active</th>
                <th scope="col" class="d-none d-md-table-cell">Sublevel</th>
                <th scope="col" class="d-none d-md-table-cell">Is Tax Included</th>
                <th scope="col" class="d-none d-md-table-cell">Sales Tax Code Ref</th>
                <th scope="col">Price</th>
                <th scope="col">Account Ref</th>
                <th scope="col">Type</th>
                <th scope="col">Parent List ID</th>
                <th scope="col">Parent Full Name</th>
                <th scope="col">Sales Price</th>
                <th scope="col">Sales Description</th>
                <th scope="col">Purchase Cost</th>
                <th scope="col">Purchase Description</th>
                <th scope="col">Tax Vendor Ref List ID</th>
                <th scope="col">Tax Vendor Ref Full Name</th>
                <th scope="col">Quantity On Hand</th>
                <th scope="col">Average Cost</th>
                <th scope="col">Quantity On Order</th>
                <th scope="col">Quantity On Sales Order</th>
                <th scope="col">Tax Rate</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($items as $item)
                <tr id="{{ $item->id }}">
                    <td>{{ $item->ListID }}</td>
                    <td>{{ $item->TimeCreated }}</td>
                    <td>{{ $item->TimeModified }}</td>
                    <td>{{ $item->EditSequence }}</td>
                    <td>{{ $item->Name }}</td>
                    <td>{{ $item->FullName }}</td>
                    <td>{{ $item->IsActive }}</td>
                    <td>{{ $item->Sublevel }}</td>
                    <td>{{ $item->IsTaxIncluded }}</td>
                    <td>{{ $item->SalesTaxCodeRef["FullName"] }}</td>
                    <td>{{ $item->Price }}</td>
                    <td>{{ $item->AccountRef["FullName"] }}</td>
                    <td>{{ $item->Type }}</td>
                    <td>{{ $item->Parent_ListID }}</td>
                    <td>{{ $item->Parent_FullName }}</td>
                    <td>{{ $item->SalesPrice }}</td>
                    <td>{{ $item->SalesDesc }}</td>
                    <td>{{ $item->PurchaseCost }}</td>
                    <td>{{ $item->PurchaseDesc }}</td>
                    <td>{{ $item->TaxVendorRef_ListID }}</td>
                    <td>{{ $item->TaxVendorRef_FullName }}</td>
                    <td>{{ $item->QuantityOnHand }}</td>
                    <td>{{ $item->AverageCost }}</td>
                    <td>{{ $item->QuantityOnOrder }}</td>
                    <td>{{ $item->QuantityOnSalesOrder }}</td>
                    <td>{{ $item->TaxRate }}</td>
                <tr>
            @endforeach
        </tbody>
</table>
</div>
<nav id="myTablePagination" aria-label="Table navigation">
  <ul class="pagination">
    <!-- Render pagination links here -->
  </ul>
</nav>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // Define the number of records per page
  var pageSize = 20;

  // Calculate the total number of pages based on the number of records
  var pageCount = Math.ceil($('#myTable tbody tr').length / pageSize);

  // Render the pagination links
  for (var i = 1; i <= pageCount; i++) {
    $('#myTablePagination .pagination').append('<li class="page-item"><a class="page-link" href="#" data-page="' + i + '">' + i + '</a></li>');
  }

  // Set the current page to 1
  var currentPage = 1;

  // Define a function to display a subset of the records
  function displayRecords(startIndex, endIndex) {
    $('#myTable tbody tr').hide();
    $('#myTable tbody tr').slice(startIndex, endIndex).show();
  }

  // Display the first page of records
  displayRecords(0, pageSize);

  // Attach event listeners to the pagination links
  $('#myTablePagination .pagination a').click(function(e) {
    e.preventDefault();
    currentPage = $(this).data('page');
    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = startIndex + pageSize;
    displayRecords(startIndex, endIndex);
  });
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/js/all.min.js" integrity="sha512-2bMhOkE/ACz21dJT8zBOMgMecNxx0d37NND803ExktKiKdSzdwn+L7i9fdccw/3V06gM/DBWKbYmQvKMdAA9Nw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
function searchTable() {
  // Declare variables
  var input, filter, table, tr, td, i, j, txtValue;
  input = document.getElementById("search-input");
  filter = input.value.toUpperCase();
  table = document.getElementById("myTable");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those that don't match the search query
  for (i = 0; i < tr.length; i++) {
    // Loop through all table columns for each row
    for (j = 0; j < tr[i].cells.length; j++) {
      td = tr[i].getElementsByTagName("td")[j];
      if (td) {
        txtValue = td.textContent || td.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
          break; // Break out of the column loop if a match is found
        } else {
          tr[i].style.display = "none";
        }
      }
    }
  }
}
</script>


@endsection