<style>
      /* Small helpers in case your css doesn't style .cards / .card */
      .header-search {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
  padding: 10px;
}
.header-search form {
  display: flex;
  align-items: center;
  gap: 0;
}
.header-search input[type="text"] {
  padding: 10px;
  border: 1px solid #ccc;
  width: 180px;
  border-radius: 0;
}
.header-search button {
  background: #009c1a;
  color: white;
  border: none;
  padding: 10px 12px;
  cursor: pointer;
  transition: 0.2s;
}
.header-search button:hover {
  background: #006d12;
}
@media (max-width: 768px) {
  .header-search {
    flex-direction: column;
    align-items: stretch;
  }
  .header-search input[type="text"] {
    width: 100%;
  }
}



.notifications {
  position: relative;
  display: inline-block;
  margin-right: 15px;
}
.notify-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  position: relative;
}
.badge {
  background: red;
  color: white;
  border-radius: 50%;
  font-size: 11px;
  padding: 2px 6px;
  position: absolute;
  top: 0px;
  right: -3px;
}
.notify-dropdown {
  display: none;
  position: absolute;
  right: 0;
  background: white;
  width: 300px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
  border-radius: 8px;
  z-index: 1000;
}
.notify-dropdown.open {
  display: block;
}
.notify-header {
  padding: 10px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}
#notifyList {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 250px;
  overflow-y: auto;
}
#notifyList li {
  padding: 10px;
  border-bottom: 1px solid #f1f1f1;
}
#notifyList li:last-child {
  border-bottom: none;
}
#notifyList li small {
  display: block;
  color: gray;
  font-size: 12px;
}
</style>



<div class="header-search">
  <!-- Customer search form -->
  <form id="customerSearchForm">
    <input type="text" id="customerSearchInput" placeholder="Search Customers">
    <button type="submit">🔎︎</button>
  </form>

  <!-- Supplier search form -->
  <form id="supplierSearchForm">
    <input type="text" id="supplierSearchInput" placeholder="Search Suppliers">
    <button type="submit">🔎︎</button>
  </form>
</div>

<!-- Notification Icon in Header -->
<div class="notifications">
  <button id="notifyBtn" class="notify-btn" aria-label="Notifications">
    🔔
    <span id="notifyCount" class="badge" style="display:none;">0</span>
  </button>
  <div id="notifyDropdown" class="notify-dropdown">
    <div class="notify-header">🔔 Due Payment Notifications</div>
    <ul id="notifyList"></ul>
  </div>
</div>



<script>
document.addEventListener("DOMContentLoaded", () => {
  const notifyBtn = document.getElementById("notifyBtn");
  const notifyDropdown = document.getElementById("notifyDropdown");
  const notifyList = document.getElementById("notifyList");
  const notifyCount = document.getElementById("notifyCount");

  notifyBtn.addEventListener("click", (e) => {
    e.stopPropagation();
    notifyDropdown.classList.toggle("open");
  });

  document.addEventListener("click", () => notifyDropdown.classList.remove("open"));

  // Fetch notifications
  fetch("notification.php")
    .then(res => res.json())
    .then(data => {
      notifyList.innerHTML = "";
      if (data.length > 0) {
        notifyCount.style.display = "inline-block";
        notifyCount.textContent = data.length;
        data.forEach(n => {
          const li = document.createElement("li");
          li.innerHTML = `
            <strong>${n.customer_name}</strong> <br>
            Invoice: ${n.invoice_no} <br>
            Due: ৳${parseFloat(n.due).toFixed(2)} 
            <small>Payment Due: ${n.payment_due_date}</small>
          `;
          notifyList.appendChild(li);
        });
      } else {
        notifyCount.style.display = "none";
        notifyList.innerHTML = `<li><small>No due payments today.</small></li>`;
      }
    })
    .catch(() => {
      notifyList.innerHTML = `<li><small>Failed to load notifications.</small></li>`;
    });
});
</script>


    <script>
document.getElementById('customerSearchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const keyword = document.getElementById('customerSearchInput').value.trim();
  if (keyword) {
    window.location.href = 'customers-ledger.php?search=' + encodeURIComponent(keyword);
  }
});

document.getElementById('supplierSearchForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const keyword = document.getElementById('supplierSearchInput').value.trim();
  if (keyword) {
    window.location.href = 'suppliers-ledger.php?search=' + encodeURIComponent(keyword);
  }
});
</script>