@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>Customers</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">Actions</th>
                <th scope="col">ListID</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">First Name</th>
                <th scope="col" class="d-none d-md-table-cell">Last Name</th>
                <th scope="col" class="d-none d-sm-table-cell">Phone</th>
                <th scope="col" class="d-none d-sm-table-cell">Alternate Phone</th>
                <th scope="col" class="d-none d-sm-table-cell">Fax</th>
                <th scope="col">Is Active</th>
                <th scope="col">Sublevel</th>
                <th scope="col">Salutation</th>
                <th scope="col">Billing Address</th>
                <th scope="col">Shipping Address</th>
                <th scope="col">Contact</th>
                <th scope="col">Customer Type</th>
                <th scope="col">Terms</th>
                <th scope="col">Sales Rep</th>
                <th scope="col">Balance</th>
                <th scope="col">Total Balance</th>
                <th scope="col">Credit Limit</th>
                <th scope="col">Job Status</th>
                <th scope="col">Price Level</th>
                <th scope="col">Time Created</th>
                <th scope="col">Time Modified</th>
                <th scope="col">Edit Sequence</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($customers as $customer)
                <tr id="{{ $customer->id }}">
                    <td>
                        <a href="{{ route('customers.edit', $customer->id) }}" data-toggle="tooltip" data-placement="left" title="Edit"><i class="fas fa-edit"></i></a>
                        <a href="{{ route('customers.show', $customer->id) }}" data-toggle="tooltip" data-placement="right" title="View"><i class="fas fa-eye"></i></a>
                    </td>
                    <td>{{ $customer->ListID }}</td>
                    <td class="d-none d-md-table-cell">{{ $customer->Name }}</td>
                    <td class="d-none d-md-table-cell">{{ $customer->FullName }}</td>
                    <td class="d-none d-md-table-cell">{{ $customer->FirstName }}</td>
                    <td class="d-none d-md-table-cell">{{ $customer->LastName }}</td>
                    <td class="d-none d-sm-table-cell">{{ $customer->Phone }}</td>
                    <td class="d-none d-sm-table-cell">{{ $customer->AltPhone }}</td>
                    <td class="d-none d-sm-table-cell">{{ $customer->Fax }}</td>
                    <td>{{ $customer->IsActive }}</td>
                    <td>{{ $customer->Sublevel }}</td>
                    <td>{{ $customer->Salutation }}</td>
                    <td>{{ $customer->BillAddress['Addr1'] }} {{ $customer->BillAddress['Addr2'] }}, {{ $customer->BillAddress['City'] }}, {{ $customer->BillAddress['State'] }} {{ $customer->BillAddress['PostalCode'] }}</td>
                    <td>{{ $customer->ShipAddress['Addr1'] }} {{ $customer->ShipAddress['Addr2'] }}, {{ $customer->ShipAddress['City'] }}, {{ $customer->ShipAddress['State'] }} {{ $customer->ShipAddress['PostalCode'] }}</td>
                    <td>{{ $customer->Contact }}</td>
                    <td>{{ $customer->CustomerTypeRef['FullName'] }}</td>
                    <td>{{ $customer->TermsRef['FullName'] }}</td>
                    <td>{{ $customer->SalesRepRef['FullName'] }}</td>
                    <td>{{ $customer->Balance }}</td>
                    <td>{{ $customer->TotalBalance }}</td>
                    <td>{{ $customer->CreditLimit }}</td>
                    <td>{{ $customer->JobStatus }}</td>
                    <td>{{ $customer->PriceLevelRef['FullName'] }}</td>
                    <td>{{ $customer->TimeCreated }}</td>
                    <td>{{ $customer->TimeModified }}</td>
                    <td>{{ $customer->EditSequence  }}</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