<?php
/* ============================================================
   tracking.php — Consignment Tracking Page
   Reached via GET from the "Track Shipment" modal.
   Accepts one or multiple comma-separated consignment numbers.
   ============================================================ */

// ---- Replace this with your real DB / courier-API lookup ----
function getTrackingRecord($consignmentNo) {
    // Example placeholder logic — swap with a real DB query, e.g.:
    // $stmt = $pdo->prepare("SELECT * FROM shipments WHERE awb_no = ?");
    // $stmt->execute([$consignmentNo]);
    // return $stmt->fetch(PDO::FETCH_ASSOC);

    // Demo placeholder — returns a fake record so the page is visibly testable
    if ($consignmentNo === '540169') {
        return [
            'awb_no'         => '540169',
            'booking_date'   => '30-Jun-2026',
            'consignee_name' => 'AFRIN',
            'destination'    => 'NEW DELHI',
            'status'         => 'INTRANSIT-',
            'delivery_date'  => '02/07/2026, 1:34:18 PM',
            'receiver_name'  => '',
            'forwarding_no'  => '26198100011510',
        ];
    }
    return null; // not found
}

$rawInput    = isset($_GET['consignment_no']) ? trim($_GET['consignment_no']) : '';
$hasSearched = $rawInput !== '';
$results     = [];
$notFound    = [];

if ($hasSearched) {
    $numbers = array_filter(array_map('trim', explode(',', $rawInput)));
    foreach ($numbers as $num) {
        $record = getTrackingRecord($num);
        if ($record) {
            $results[] = $record;
        } else {
            $notFound[] = $num;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
<title>Track Your Shipment</title>
<style>
  :root {
    --brand: #000;
    --text: #1a1a1a;
    --border: #e0e0e0;
    --amber: #d97706;
  }

  * { box-sizing: border-box; }

  body {
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
    background: #f7f7fb;
    color: var(--text);
  }

  .wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* ---------- top bar ---------- */
  .page-topbar {
    background: #fff;
    border-bottom: 1px solid var(--border);
    padding: 16px 0;
  }
  .page-topbar .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .page-topbar .brand {
    color: var(--brand);
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    letter-spacing: 0.02em;
  }
  .page-topbar .back-link {
    color: var(--brand);
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid var(--brand);
    padding: 6px 14px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .page-topbar .back-link:hover {
    background: var(--brand);
    color: #fff;
  }

  /* ---------- search block ---------- */
  .tracking-hero {
    padding: 40px 0 20px;
  }

  .search-card {
    background: #fff;
    border-radius: 8px;
    padding: 26px 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
  }

  .modal-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 20px;
    letter-spacing: 0.5px;
    border-left: 4px solid var(--brand);
    padding-left: 10px;
  }

  .tracking-form-layout .input-group {
    display: flex;
    gap: 12px;
  }

  .tracking-form-layout input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.04);
    outline: none;
  }

  .tracking-form-layout button {
    background: #c2492e;
    color:#fff; 
    border-color: #c2492e;
    display: inline-block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 11px 22px;
    border: 2px solid var(--ink);
    transition: all .15s ease;
  }
  .tracking-form-layout button:hover {
    background-color: #9c3a24;
  }

  .tracking-form-layout .help-text {
    margin-top: 8px;
    color: #888;
    font-size: 0.85rem;
  }

  /* ---------- result cards ---------- */
  .tracking-results {
    padding: 24px 0 60px;
  }

  .tracking-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    margin-bottom: 24px;
    padding: 20px 20px 0;
  }

  .tracking-title {
    margin: 0 0 16px;
    padding: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #111;
  }

  .tracking-table {
    border: 1px solid var(--brand);
    border-bottom: none;
    margin-bottom: 20px;
  }

  .t-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    border-bottom: 1px solid var(--brand);
  }

  .t-label {
    padding: 14px 20px;
    font-weight: 500;
    color: var(--brand);
    border-right: 1px solid var(--brand);
    background: #fff;
  }

  .t-value {
    padding: 14px 20px;
    color: var(--brand);
    font-weight: 400;
    border-right: 1px solid var(--brand);
  }

  .awb-badge {
    display: inline-block;
    background: var(--brand);
    color: #fff;
    padding: 3px 12px;
    border-radius: 3px;
    font-weight: 700;
  }

  .status-intransit { color: var(--amber); font-weight: 700; }
  .status-delivered  { color: #16a34a; font-weight: 700; }
  .status-pending    { color: #6b7280; font-weight: 700; }

  /* ---------- notices ---------- */
  .notice-card {
    background: #fff;
    border-left: 4px solid var(--brand);
    border-radius: 6px;
    padding: 18px 22px;
    margin-bottom: 20px;
    color: #444;
    font-size: 0.95rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
  .notice-card strong { color: var(--brand); }

  .empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #888;
  }
  .empty-state svg {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    opacity: 0.35;
  }

  @media (max-width: 600px) {
    .t-row { grid-template-columns: 1fr; }
    .t-label { border-right: none; border-bottom: 1px solid var(--border); }
    .tracking-form-layout .input-group { flex-direction: column; }
    .tracking-form-layout button { padding: 12px; }
  }
</style>
</head>
<body>

<div class="page-topbar">
  <div class="wrap">
    <a class="brandmark" href="index.php"> <img src="assets/img/logo1.png" alt="Chicago Parcel Service" style="width:280px; height:80px; object-fit:contain;"></a>
    <a href="index.php" class="back-link">&larr; Back to Home</a>
  </div>
</div>

<!-- ===== Search ===== -->
<section class="tracking-hero">
  <div class="wrap">
    <div class="search-card">
      <h3 class="modal-title">TRACK YOUR CONSIGNMENT</h3>
      <form action="tracking.php" method="GET" class="tracking-form-layout">
        <div class="input-group">
          <input
            type="text"
            name="consignment_no"
            placeholder="Enter Consignment No."
            value="<?php echo htmlspecialchars($rawInput); ?>"
            required>
          <button type="submit">TRACKING</button>
        </div>
        <p class="help-text">shipment no separated by a comma (eg. 123456789123, 123456789123)</p>
      </form>
    </div>
  </div>
</section>

<!-- ===== Results ===== -->
<section class="tracking-results">
  <div class="wrap">

    <?php if (!$hasSearched): ?>
      <div class="empty-state">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
          <path d="M3 7l9-4 9 4-9 4-9-4z"/>
          <path d="M3 7v10l9 4 9-4V7"/>
          <path d="M12 11v10"/>
        </svg>
        <p>Enter a consignment number above to see tracking details.</p>
      </div>

    <?php else: ?>

      <?php foreach ($results as $trackingData): ?>
        <div class="tracking-card">
          <h2 class="tracking-title">TRACKING</h2>
          <div class="tracking-table">
            <div class="t-row">
              <div class="t-label">AWB No.</div>
              <div class="t-value"><span class="awb-badge"><?php echo htmlspecialchars($trackingData['awb_no']); ?></span></div>
            </div>
            <div class="t-row">
              <div class="t-label">Booking Date</div>
              <div class="t-value"><?php echo htmlspecialchars($trackingData['booking_date']); ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Consignee Name</div>
              <div class="t-value"><?php echo htmlspecialchars($trackingData['consignee_name']); ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Destination</div>
              <div class="t-value"><?php echo htmlspecialchars($trackingData['destination']); ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Status</div>
              <?php
                $statusClass = 'status-pending';
                $statusUpper = strtoupper($trackingData['status']);
                if (strpos($statusUpper, 'INTRANSIT') !== false) $statusClass = 'status-intransit';
                if (strpos($statusUpper, 'DELIVERED') !== false) $statusClass = 'status-delivered';
              ?>
              <div class="t-value <?php echo $statusClass; ?>"><?php echo htmlspecialchars($trackingData['status']); ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Delivery Date and Time</div>
              <div class="t-value"><?php echo htmlspecialchars($trackingData['delivery_date']); ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Receiver Name</div>
              <div class="t-value"><?php echo $trackingData['receiver_name'] !== '' ? htmlspecialchars($trackingData['receiver_name']) : '&nbsp;'; ?></div>
            </div>
            <div class="t-row">
              <div class="t-label">Forwarding No.</div>
              <div class="t-value"><?php echo htmlspecialchars($trackingData['forwarding_no']); ?></div>
            </div>
          </div>
        </div>
      <?php endforeach; ?>

      <?php if (!empty($notFound)): ?>
        <div class="notice-card">
          <strong>No record found</strong> for: <?php echo htmlspecialchars(implode(', ', $notFound)); ?>.
          Please double-check the consignment number and try again.
        </div>
      <?php endif; ?>

      <?php if (empty($results) && empty($notFound)): ?>
        <div class="notice-card">
          <strong>Invalid input.</strong> Please enter at least one valid consignment number.
        </div>
      <?php endif; ?>

    <?php endif; ?>

  </div>
</section>

</body>
</html>