<?php
require "db.php";

/* =========================
   FETCH CUSTOMERS WITH SALE + CNIC
========================= */
$customers = mysqli_query($conn,"
    SELECT DISTINCT 
        c.id,
        c.name,
        c.cnic,
        s.sale_ref
    FROM hps_customers c
    LEFT JOIN hps_sales s ON s.customer_id = c.id
    ORDER BY c.name
");
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Customer Statement</title>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

<style>
body{
    background:#f1f3f5;
}

/* Dropdown Search Box */
.search-box{
    border:1px solid #ccc;
    border-radius:6px;
    padding:5px;
    width:100%;
}

/* Dropdown List */
.custom-dropdown{
    max-height:250px;
    overflow-y:auto;
    border:1px solid #ccc;
    border-radius:6px;
    margin-top:5px;
    display:none;
    background:#fff;
}

.custom-dropdown div{
    padding:6px 10px;
    cursor:pointer;
    border-bottom:1px solid #eee;
    font-size:13px;
}

.custom-dropdown div:hover{
    background:#e9ecef;
}

.selected-box{
    border:1px solid #ccc;
    padding:6px;
    border-radius:6px;
    font-size:13px;
    background:#fff;
}
</style>

</head>

<body>

<div class="container py-5">
<div class="card shadow-lg p-4 mx-auto" style="max-width:600px;border-radius:15px">

<h4 class="mb-3">Customer Statement</h4>

<form method="get" action="hps_customer_statement.php">

<!-- =========================
     CUSTOM SEARCH DROPDOWN
========================= -->
<div class="mb-2">
<label class="small">Customer</label>

<input type="hidden" name="customer_id" id="customer_id" required>

<input type="text" id="searchInput" class="form-control form-control-sm" placeholder="Search Name / CNIC / Sale Ref">

<div id="dropdownList" class="custom-dropdown">
<?php while($c=mysqli_fetch_assoc($customers)): 

    $text = $c['name'] . " | CNIC: " . ($c['cnic'] ?? '-') . " | Sale: " . ($c['sale_ref'] ?? '-');
?>
<div 
    data-id="<?=$c['id']?>" 
    data-text="<?=htmlspecialchars($text)?>"
>
    <?=$text?>
</div>
<?php endwhile; ?>
</div>

<div id="selectedBox" class="selected-box mt-1" style="display:none;"></div>

</div>

<!-- =========================
     DATE FILTER
========================= -->
<div class="row g-2">
<div class="col-md-6">
<label class="small">From Date</label>
<input type="date" name="from" class="form-control form-control-sm">
</div>

<div class="col-md-6">
<label class="small">To Date</label>
<input type="date" name="to" class="form-control form-control-sm">
</div>
</div>

<!-- =========================
     BUTTONS
========================= -->
<div class="text-end mt-3">
<button class="btn btn-primary btn-sm">
View Statement →
</button>

<a href="hps_customer_payment.php" class="btn btn-success btn-sm">
💳 Receive Installment
</a>
</div>

</form>

</div>
</div>

<script>

/* =========================
   ELEMENTS
========================= */
const input = document.getElementById("searchInput");
const dropdown = document.getElementById("dropdownList");
const hidden = document.getElementById("customer_id");
const selectedBox = document.getElementById("selectedBox");

/* =========================
   SHOW DROPDOWN
========================= */
input.addEventListener("focus", () => {
    dropdown.style.display = "block";
});

/* =========================
   LIVE SEARCH FILTER
========================= */
input.addEventListener("keyup", function(){
    let filter = this.value.toLowerCase();
    let items = dropdown.querySelectorAll("div");

    items.forEach(item => {
        let text = item.innerText.toLowerCase();
        item.style.display = text.includes(filter) ? "block" : "none";
    });
});

/* =========================
   SELECT ITEM
========================= */
dropdown.addEventListener("click", function(e){
    if(e.target && e.target.matches("div")){
        let id = e.target.getAttribute("data-id");
        let text = e.target.getAttribute("data-text");

        hidden.value = id;
        selectedBox.innerText = text;
        selectedBox.style.display = "block";

        input.value = text;
        dropdown.style.display = "none";
    }
});

/* =========================
   HIDE DROPDOWN OUTSIDE CLICK
========================= */
document.addEventListener("click", function(e){
    if(!e.target.closest(".mb-2")){
        dropdown.style.display = "none";
    }
});

</script>

</body>
</html>