
(function () {
  const DEMO = {
    "SKY-123456": [
      { date: "2026-07-15 09:12", status: "Shipment Created", by: "Skynex System" },
      { date: "2026-07-15 14:40", status: "Picked Up", by: "TCS" },
      { date: "2026-07-16 11:05", status: "In Transit - Lahore Hub", by: "TCS" },
      { date: "2026-07-17 08:22", status: "Out for Delivery", by: "TCS" },
      { date: "2026-07-17 16:10", status: "Delivered", by: "TCS Courier" }
    ],
    "DEMO001": [
      { date: "2026-07-14 10:00", status: "Shipment Created", by: "Skynex System" },
      { date: "2026-07-14 18:30", status: "Picked Up", by: "Leopard" },
      { date: "2026-07-16 12:15", status: "In Transit - Karachi", by: "Leopard" }
    ]
  };

  function qs(name) {
    const u = new URL(window.location.href);
    return (u.searchParams.get(name) || "").trim();
  }

  function render(trackingNo) {
    const bodyCard = document.querySelector(".animate-fade-up-4 .rounded-2xl");
    if (!bodyCard) return;
    const input = document.querySelector('input[name="trackingno"]');
    if (input && trackingNo) input.value = trackingNo;

    const key = Object.keys(DEMO).find(
      (k) => k.toLowerCase() === trackingNo.toLowerCase()
    );
    const rows = key ? DEMO[key] : null;

    let html = "";
    html += '<div class="grid grid-cols-4 px-8 py-4" style="background:rgba(15,15,15,0.85);border-bottom:1px solid rgba(255,255,255,0.1)">';
    html += '<span class="text-xs font-bold tracking-[.18em] uppercase text-white/60 flex items-center gap-2"><i data-lucide="calendar" class="w-3.5 h-3.5" style="color:#f03a3b"></i> Date</span>';
    html += '<span class="text-xs col-span-2 font-bold tracking-[.18em] uppercase text-white/60 text-center flex items-center justify-center gap-2"><i data-lucide="activity" class="w-3.5 h-3.5" style="color:#f03a3b"></i> Status</span>';
    html += '<span class="text-xs font-bold tracking-[.18em] uppercase text-white/60 text-right flex items-center justify-end gap-2"><i data-lucide="user" class="w-3.5 h-3.5" style="color:#f03a3b"></i> By</span>';
    html += "</div>";

    if (!trackingNo) {
      html += '<div class="flex flex-col items-center justify-center py-14 px-8"><div class="w-14 h-14 rounded-2xl flex items-center justify-center mb-4" style="background:rgba(255,255,255,0.45);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.8)"><i data-lucide="package-search" class="w-6 h-6" style="color:rgba(223,10,11,0.5)"></i></div><p class="text-sm font-medium" style="color:rgba(120,40,10,0.4)">Enter a tracking ID to see shipment history</p><p class="text-xs mt-2" style="color:rgba(120,40,10,0.35)">Try demo: <b>SKY-123456</b> or <b>DEMO001</b></p></div>';
    } else if (!rows) {
      html += '<div class="flex flex-col items-center justify-center py-14 px-8"><p class="text-sm font-semibold" style="color:#df0a0b">No shipment found for "' + trackingNo.replace(/[<>&]/g, "") + '"</p><p class="text-xs mt-2" style="color:rgba(120,40,10,0.4)">Try demo numbers: SKY-123456 or DEMO001</p></div>';
    } else {
      rows.forEach(function (r, i) {
        const bg = i % 2 === 0 ? "rgba(255,255,255,0.55)" : "rgba(255,247,237,0.55)";
        html += '<div class="grid grid-cols-4 px-8 py-4 items-center" style="background:' + bg + ';border-bottom:1px solid rgba(223,10,11,0.08)">';
        html += '<span class="text-sm font-medium text-gray-700">' + r.date + "</span>";
        html += '<span class="col-span-2 text-sm font-semibold text-center" style="color:#df0a0b">' + r.status + "</span>";
        html += '<span class="text-sm text-right text-gray-600">' + r.by + "</span>";
        html += "</div>";
      });
    }

    bodyCard.innerHTML = html;
    if (window.lucide) lucide.createIcons();
  }

  document.addEventListener("DOMContentLoaded", function () {
    const no = qs("trackingno");
    render(no);
    const form = document.querySelector('form[action*="tracking"]');
    if (form) {
      form.addEventListener("submit", function (e) {
        // Allow normal GET navigation; also support hash-less local
      });
    }
  });
})();
