<?php
require_once __DIR__ . '/../include/db.php';

$res = $conn->query("
    SELECT id, order_date, buyer_name, style_no, po_no, total_qty, status
    FROM orders
    WHERE status = 'delivered'
    ORDER BY id DESC
");
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Delivery History</title>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>

<body class="bg-light">

<div class="container mt-3">

    <div class="d-flex justify-content-between align-items-center mb-1">
        <h4>📦 Delivery History (Ask & Task)  <p style="font-size:14px; color:green;">You'll get all the delivery information from date of (01-01-2026)</p></h4>
      
    </div>

    <div class="card">
        <div class="card-body table-responsive">
            <div class="row mb-3">
              <div class="col-md-4">
                <input type="text" id="styleSearch" class="form-control"
                       placeholder="🔍 Search by Style Number Or Po...">
              </div>
            </div>

          <table class="table table-bordered table-hover" id="deliveryTable">

                <thead class="table-dark">
                <tr>
                    
                    <th>Delivery Date</th>
                    <th>Buyer</th>
                    <th>Style</th>
                    <th>Po</th>
                    <th>Total Qty</th>
                    <th>Status</th>
                    <th>Challan</th>
                </tr>
                </thead>

                <tbody>
                <?php if($res->num_rows == 0): ?>
                    <tr>
                        <td colspan="7" class="text-center text-muted">
                            No delivered orders found
                        </td>
                    </tr>
                <?php endif; ?>

                <?php while($r = $res->fetch_assoc()): ?>
                <tr>
                    
                    <td><?= $r['order_date'] ?></td>
                    <td><?= htmlspecialchars($r['buyer_name']) ?></td>
                    <td><?= htmlspecialchars($r['style_no']) ?></td>
                    <td><?= htmlspecialchars($r['po_no']) ?></td>
                    <td><?= $r['total_qty'] ?></td>
                    <td>
                        <span class="badge bg-success">
                            Delivered
                        </span>
                    </td>
                    <td>
                        <a href="view_delivery_info.php?order_id=<?= $r['id'] ?>"
                           class="btn btn-sm btn-primary">
                            View Challan
                        </a>
                    </td>
                </tr>
                <?php endwhile; ?>
                </tbody>

            </table>

        </div>
    </div>

</div>
// <script>
// document.getElementById("styleSearch").addEventListener("keyup", function () {
//     let filter = this.value.toUpperCase();
//     let table = document.getElementById("deliveryTable");
//     let tr = table.getElementsByTagName("tr");

//     for (let i = 1; i < tr.length; i++) {
//         let td = tr[i].getElementsByTagName("td")[2]; // Style column (index 2)
//         if (td) {
//             let txtValue = td.textContent || td.innerText;
//             if (txtValue.toUpperCase().indexOf(filter) > -1) {
//                 tr[i].style.display = "";
//             } else {
//                 tr[i].style.display = "none";
//             }
//         }
//     }
// });
// </script>
<script>
document.getElementById("styleSearch").addEventListener("keyup", function () {
    let filter = this.value.toUpperCase();
    let table = document.getElementById("deliveryTable");
    let tr = table.getElementsByTagName("tr");

    for (let i = 1; i < tr.length; i++) {
        let styleTd = tr[i].getElementsByTagName("td")[2]; // Style
        let poTd    = tr[i].getElementsByTagName("td")[3]; // PO

        if (styleTd || poTd) {
            let styleText = styleTd ? styleTd.textContent.toUpperCase() : '';
            let poText    = poTd ? poTd.textContent.toUpperCase() : '';

            if (styleText.indexOf(filter) > -1 || poText.indexOf(filter) > -1) {
                tr[i].style.display = "";
            } else {
                tr[i].style.display = "none";
            }
        }
    }
});
</script>

</body>
</html>
