

<!--

    Author: Yong Jun
    Template Version: 1.0.9
    Created At: Jan 8 2026
    Last Updated: 2026-07-06
    changelog:
    - v1.0.9 (2026-07-06, in-place): showMessage() icon centering — render the injected Material Symbol
      as a block with line-height:1 (was inline, sitting on the baseline and appearing high in the
      cream badge). Pairs with the same fix in head_v1.0.6. Visual-only.
    - v1.0.9 (2026-07-02, in-place): #canvasMessage overlay z-[1050] -> z-[2000] — page modals
      (addresses #addressModal/#deleteModal, my-orders pay chooser) also sit at z-[1050] and appear
      LATER in the DOM, so an equal-z showMessage rendered BEHIND an open modal (same fix as
      head_v1.0.6). Alert layer must top everything.
    - v1.0.9 (2026-06-22): i18n the #canvasMessage CLOSE button — static "Close" -> server-side
      OK (active-language, CSS still uppercases). Dropped the
      dead data-lang="M00111" (legacy translations[] applier no longer wired on these pages). Pairs
      with sharejs_v1.0.6 (window.t bridge) + general_v3.0.3.js (modal title via window.t). Markup
      otherwise byte-identical to v1.0.8.
    - v1.0.8 (2026-06-18, in-place): Themed the #canvasMessage success/error modal to the MrFlower
      brand (was generic): card -> rounded-[20px] + token border/bg + soft shadow; Close button
      gray -> olive var(--signin-btn-bg-color) square uppercase; close-icon hover blue -> var(--primary-color).
      Pairs with general_v3.0.2.js showMessage() icon colors now reading --success-color/--warning-color
      (token + hex soft-fallback). Modal is what verify-otp shows on verify success/failure.
      STANDARDIZED (3rd pass, /ui-ux-pro-max): tightened to a centered max-w-[420px] alert card (was
      40vw), brand ink scrim rgba(42,40,32,0.55) (was black/80), spring entrance (vo-modal-pop, 0.24s,
      reduced-motion guarded), consistent px-8 spacing, comfortable min-w-[160px] CLOSE, focus-visible
      olive rings on both close affordances + cursor-pointer. All showMessage hooks preserved.
      CONTENT brand idiom (2nd pass): #canvasIcon is now a cream circular badge (60px, #F0EDD0) with
      the injected Material Symbol shrunk 54px->30px via scoped !important to fit; #canvasTitle is
      serif Quinstory olive (was bold-black); message uses --primary-text-color. Matches the
      verify-otp / reset-password modal badges.
    - v1.0.8 (2026-06-18): Redesigned the #toast-container .toast to the MrFlower brand (replaces the
      bootstrap-green toast). success accent -> var(--color-brand-primary) #6B6437 (olive); error ->
      var(--error-color); warning amber. Icon now sits in a soft CREAM circular badge
      (.toast-left = 34px round, --color-bg-cream-subtle bg). Width is CONTENT-FIT and capped to
      min(400px, 100vw-40px) so it can NEVER overflow the viewport right edge (fixes the prior
      off-alignment). Radius 14px, warm olive-tinted shadow, msg weight 500. Spring entry
      (translateY/X+scale, cubic-bezier), exit faster than enter, prefers-reduced-motion honored.
      Container gets role=status aria-live=polite (a11y). STRUCTURE UNCHANGED
      (.toast/.toast-left/center/right/progress + .show/.hide/.success/.error/.warning) so
      general_v3.0.2 showToast() is unaffected. Forked from head_v1.0.7. Consumers: product-detail.php,
      favourite.php (others remain on v1.0.7 until rolled forward).
      [2026-06-18 follow-up] Toast repositioned + recolored (operator request). Position:
      TOP-RIGHT (top:20px; align-items:flex-end), slides in from the top-right. Color: now
      GREEN-dominant — solid --color-brand-primary (#6B6437 olive) field, white text/close,
      translucent-white icon badge, white progress bar. error/warning override the field
      (red / amber) to stay semantic. CSS-only; structure + showToast() contract unchanged.
      Applies to both consumers identically.
    - v1.0.7 (2026-06-15): SEO meta block reads FLAT $seoData['key'] instead of the legacy nested
      $seoData['key'][0]['text']. Aligns member with the centralized SEO pipeline
      (class.general_v2.0.x loadSeoData + build-seo.php generated seo.php both emit flat strings)
      and the seller head (flat since head_v1.0.3). Forked from head_v1.0.6 — ONLY the 28 SEO echoes
      changed; canvasMessage modal, toast mount + styles, and CSS links are byte-identical. Consumers
      must set $seoData['key'] as flat scalars (e.g. product-detail.php v1.0.17). reset-password.php
      stays on head_v1.0.6 (no $seoData assignment → renders empty either way).
    - v1.0.6 (2026-06-10): showToast() mount point. Adds a pre-rendered
      <div id="toast-container"> after #canvasMessage + a scoped <style> with the
      .toast component rules (ported from seller/css/main_v1.0.1.css — member's
      main.min.css only carries the legacy toastr classes, not this component).
      Fixes: general_v3.0.2 showToast() does document.getElementById('toast-container')
      .appendChild() with NO null guard — on member pages the container never existed,
      so any success callback calling showToast() (e.g. reset-password sendResetCode)
      THREW, which also skipped jQuery's complete handler, leaving every <button>
      disabled (ajaxSend disables all buttons during a request and re-enables them in
      complete). Forked from head_v1.0.5 (otherwise unchanged).
    - v1.0.5 (2026-06-05): centered the #canvasMessage modal — overlay gains items-center
      justify-center (active once showMessage adds `flex`); top offsets (pt-10 / mt-10) dropped,
      so the popup sits dead-center instead of top-aligned. Forked from head_v1.0.4 (otherwise
      unchanged). Pairs with general_v3.0.2 (Tailwind showMessage) via sharejs_v1.0.4.
    - Use tailwind.ss
    - Not using bootstrap, custom_v1.0.0.css and general_v1.0.0.css
    - Updated canvas message
    - 2026-05-21: Wired theme_member_v1.0.0.css (V6 brand tokens + Tier-2/Tier-3
                  helpers including .si-* for sign-in) + Inter Google Fonts
                  (weights 400-900). Affects consumers: index.php, product.php,
                  index-shop.php, index-new.php, sign-in.php. Pages on the older
                  member/head.php chain (homepage.php, sign-up.php, checkout.php,
                  etc.) still load the legacy theme_v1.0.0.css and are NOT yet
                  on the new palette.
    - 2026-05-28: Added <link> to /css/theme_v1.0.0.css so pages on the
                  Tailwind+tokens paradigm can read project-wide palette
                  tokens (--primary-text-color, --btn-primary-bg-color,
                  --input-bg-color, etc.) via arbitrary-value syntax:
                      bg-[var(--btn-primary-bg-color)]
                      text-[var(--primary-text-color)]
                  theme_member_v1.0.0.css still loads (after theme_v1.0.0)
                  for pages still on the .si-* / .gs-* class system. Editing
                  theme_v1.0.0.css now changes the palette for any page on
                  the new paradigm. In-place edit (no version bump) —
                  sign-in.php is the first page on the new paradigm and
                  fresh project means no other live consumer is on a newer
                  head version.
    - 2026-05-28: Removed <link> to /css/theme_member_v1.0.0.css and deleted
                  the file. Audit showed all .si-* / .gs-* classes and
                  --gs-* tokens are unreferenced across the 5 pages on
                  head_v1.0.4 (index, index-shop, product, index-new,
                  sign-in). The only living dependency was the global
                  html/body baseline (cream bg + ink text + Inter font),
                  reproduced here via Tailwind utility classes on the
                  <html> tag (bg/color/font cascade down to body).
                  Values stay V6-design-hex for now; can be promoted to
                  theme_v1.0.0.css tokens later if a wider palette flip
                  is wanted.
-->
<!DOCTYPE html>

<html lang="en" class="bg-[#F4F1EA] text-[#1B1F2A] font-sans">
<!-- begin::Head -->
<head>

	<meta charset="utf-8"/>
    <title>Track Your Order — Mr Flower</title>
    <link rel="shortcut icon" href="/images/project/MF-Logo-tm-ori-fav.webp" />
    <meta name="description" content="Track your Mr Flower order — enter your order number and phone to see live status, from processing to delivery.">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="author" content="Mr Flower">
    <link rel="canonical" href="https://www.mrflower.com.my/track-order">
    <meta property="og:title" content="Track Your Order — Mr Flower">
    <meta property="og:description" content="Track your Mr Flower order — enter your order number and phone to see live status, from processing to delivery.">
    <meta property="og:url" content="https://www.mrflower.com.my/track-order">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Mr Flower">
    <meta property="og:locale" content="en_MY">
    <meta property="og:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:video" content="">
    <meta property="og:video:width" content="">
    <meta property="og:video:height" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Mr Flower — Same-Day Flower Delivery in Klang Valley">
    <meta name="twitter:description" content="Fresh, handcrafted flower bouquets with same-day delivery across the Klang Valley. Mr Flower — crafted with love and care for every moment.">
    <meta name="twitter:image" content="https://www.mrflower.com.my/images/project/mr-flower-og-1200x630.jpg">
    <meta name="twitter:site" content="">
    <meta name="twitter:creator" content="">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" href="">
    <meta name="robots" content="">
    <!-- SEO Meta - End -->

   <link href="/css/style.css?v=1783607734" rel="stylesheet" type="text/css" />
   <link rel="preload" href="/css/fonts/googleIcon.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="/css/main_v1.0.0.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript>
      <link rel="stylesheet" href="/css/main_v1.0.0.css">
   </noscript>

   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
   <!--
     theme_v1.0.0.css — project-wide palette tokens (--primary-text-color,
     --btn-*-color, --input-*-color, …). Pages on the Tailwind+tokens paradigm
     read these via arbitrary values: bg-[var(--btn-primary-bg-color)]
   -->
   <link href="/css/theme_v1.0.0.css?v=1783479160" rel="stylesheet" type="text/css">
</head>
<!-- end::Head -->
<div id="canvasLoader" class="hidden fixed inset-0 bg-black/80 flex items-center justify-center z-50">
    <div id="canvasLoaderContainer" class="flex items-center justify-center">
        <span class="material-symbols-outlined animate-spin text-9xl text-white" style="font-size:70px;">
            progress_activity
        </span>
    </div>
</div>

<div class="fixed inset-0 z-[2000] hidden items-center justify-center p-5 bg-[rgba(42,40,32,0.55)] outline-none transition-opacity duration-300" id="canvasMessage" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-modal="true" data-keyboard="false" data-backdrop="static">
   <div class="relative mx-auto w-full max-w-[420px] pointer-events-none">
      <div class="vo-modal-pop relative flex w-full flex-col pointer-events-auto rounded-[20px] border border-[color:var(--primary-border-color)] bg-[color:var(--default-bg-color)] shadow-[0_24px_60px_rgba(0,0,0,0.25)] outline-none overflow-hidden">
         <div class="flex items-start justify-end px-4 pt-4">
               <button type="button" class="inline-flex items-center justify-center w-9 h-9 rounded-full bg-transparent text-gray-300 hover:text-[color:var(--primary-color)] hover:bg-black/[0.04] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" id="canvasCloseIconBtn" onclick="closeCanvasModal()" aria-label="Close">
                  <span class="sr-only">Close</span>
                  <i class="material-symbols-outlined" aria-hidden="true">close</i>
               </button>
         </div>
         <div class="relative flex-auto px-8 pb-2 flex flex-col items-center text-center">
               <div id="canvasIcon" class="w-[60px] h-[60px] mx-auto rounded-full bg-[#F0EDD0] flex items-center justify-center"></div>
               <div id="canvasTitle" class="mt-4 text-[length:var(--fs-22,22px)] leading-none font-normal text-[color:var(--primary-color)] font-['Quinstory',Georgia,serif] w-full"></div>
               <div id="canvasAlertMessage" class="mt-2 text-[length:var(--md-text-size,14px)] leading-relaxed text-[color:var(--primary-text-color)]"></div>
         </div>
         <div class="flex flex-wrap items-center justify-center gap-2.5 px-8 pt-5 pb-8 modal-footer">
               <button id="canvasCloseBtn" type="button" class="min-w-[160px] inline-flex items-center justify-center rounded-[6px] bg-[color:var(--signin-btn-bg-color)] px-6 h-12 text-[length:var(--btn-font-size,13px)] font-bold uppercase tracking-[0.06em] text-white hover:bg-[color:var(--signin-btn-hover-bg-color)] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[color:var(--primary-color)] transition-colors cursor-pointer" onclick="closeCanvasModal()">
                  OK               </button>
         </div>
      </div>
   </div>
</div>

<!-- showToast() mount point (general_v3.0.2 appendChild's into this with no null guard —
     it must exist on first paint). Component styles scoped here because member's
     main.min.css only carries the legacy toastr classes, not this .toast component
     (rules ported verbatim from seller/css/main_v1.0.1.css / admin_ui_v1.0.2.css). -->
<div id="toast-container" role="status" aria-live="polite" aria-atomic="true"></div>
<style>
/* #canvasMessage icon: showMessage() injects a 54px Material Symbol with an inline font-size.
   Shrink it to sit inside the cream circular badge (#canvasIcon), matching the brand modal idiom
   (verify-otp / reset-password badges). !important overrides the inline style.
   Render the glyph as a block with line-height:1 so it centres geometrically in the flex badge
   instead of sitting on the text baseline (which pushed it visibly high). */
#canvasMessage #canvasIcon { line-height:1; }
#canvasMessage #canvasIcon .material-symbols-outlined { font-size:30px !important; line-height:1 !important; display:block; }

/* #canvasMessage entrance — spring pop+fade, runs each time the modal is shown (showMessage adds
   .flex). Exit is the existing opacity transition. Respects reduced-motion. */
@keyframes vo-modal-pop { from { opacity:0; transform:scale(0.96) translateY(8px); } to { opacity:1; transform:none; } }
#canvasMessage.flex .vo-modal-pop { animation: vo-modal-pop 0.24s cubic-bezier(0.34,1.3,0.64,1); }
@media (prefers-reduced-motion: reduce) { #canvasMessage.flex .vo-modal-pop { animation: none; } }

/* Toast — MrFlower brand. Content-fit width capped to the viewport so it can
   never overflow the right edge (the old off-alignment bug). Icon sits in a soft
   cream circular badge; spring entry; exit faster than enter. */
/* Container SPANS the full viewport (left:0; right:0) with 20px gutters and
   right-aligns the toast at the TOP edge. Full-width padded box guarantees no
   overflow — the toast physically cannot pass either edge. z-index 9999 keeps
   it above the sticky header. */
#toast-container {
    position: fixed; top: 20px; left: 0; right: 0; z-index: 9999;
    display: flex; flex-direction: column; align-items: flex-end;
    padding: 0 20px; pointer-events: none;
}
/* ID-scoped (#toast-container ...) so these always beat any legacy .toast /
   .toast-success rule (e.g. Metronic main.min.css #1dc9b7 teal) regardless of
   load order — the toast can never render teal or overflow again. */
#toast-container .toast {
    position: relative; display: flex; align-items: center; gap: 2px;
    background: var(--color-brand-primary, #6B6437);
    width: auto; min-width: 0; max-width: min(400px, 100%); box-sizing: border-box;
    padding: 13px 14px; pointer-events: auto; font-size: 14px;
    border: 1px solid var(--color-brand-primary-dark, #4E4A28);
    border-radius: 14px; box-shadow: 0 14px 34px -10px rgba(78,74,40,.45); margin-bottom: 12px;
    overflow: hidden; opacity: 0; transform: translateY(-10px) translateX(14px) scale(.97);
    transition: opacity .3s ease, transform .3s cubic-bezier(.22,1,.36,1);
    backdrop-filter: none; color: #fff;
}
#toast-container .toast.show { opacity: 1; transform: translateY(0) translateX(0) scale(1); }
#toast-container .toast.hide { opacity: 0; transform: translateX(14px) scale(.97); transition: opacity .2s ease, transform .2s ease; }
#toast-container .toast-left  { width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 18px; }
#toast-container .toast-center { flex: 1; padding: 0 10px; line-height: 1.45; word-break: break-word; font-size: 14px; font-weight: 500; color: #fff; }
#toast-container .toast-right { width: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
#toast-container .toast-close { cursor: pointer; font-size: 18px; line-height: 1; color: rgba(255,255,255,.7); transition: color .2s; }
#toast-container .toast-close:hover { color: #fff; }
#toast-container .toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; transform-origin: left; opacity: .9; }
/* Green-dominant by default (success). Icon sits in a translucent-white badge on the
   green field; progress bar is white. error/warning override the field to stay semantic. */
#toast-container .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.success .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.error   { background: var(--error-color, #FD397A); border-color: #d62a64; }
#toast-container .toast.error   .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.error   .toast-progress { background: rgba(255,255,255,.9); }
#toast-container .toast.warning { background: #B7791F; border-color: #9c6717; }
#toast-container .toast.warning .toast-left { color: #fff; background: rgba(255,255,255,.22); }
#toast-container .toast.warning .toast-progress { background: rgba(255,255,255,.9); }
@media (prefers-reduced-motion: reduce) {
    #toast-container .toast { transition: opacity .2s ease; transform: none; }
    #toast-container .toast.show { transform: none; }
    #toast-container .toast.hide { transform: none; }
}
</style>

<style>
    /* Header promo strip — running/marquee ticker (mirrors the live mrflower.com.my behavior;
       previously rendered static, see v1.0.2/v1.0.13 changelog). Two copies of the message render
       side by side in an inline-flex track (auto-sized to content, so its width is exactly 2x one
       copy); scrolling translateX(-50%) lands exactly on the seam between the two copies, so the
       loop is gapless. */
    .gs-marquee-track { display: inline-flex; white-space: nowrap; animation: gs-marquee 18s linear infinite; }
    .gs-marquee-item { display: inline-block; padding-right: 3rem; }
    @keyframes gs-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
    .gs-marquee-track:hover { animation-play-state: paused; }
    @media (prefers-reduced-motion: reduce) { .gs-marquee-track { animation: none; } }
</style>

<section class="sticky top-0 z-30 w-full bg-[color:var(--default-bg-color)] shadow-[0_2px_6px_rgba(0,0,0,0.06)]">

    <!-- Announcement / promo strip — CONFIGURABLE SLOT (no hardcoded/time-bound copy).
         Renders whenever header.promo.text is non-empty. (Was ALSO gated on
         $pageSetting['header_promo_enabled'] — removed in v1.0.13: that check compared a flat
         key against $pageSetting, which is actually shaped {microservice => [setting rows]}
         (class.general_v2.0.4's absorbMsSettingResults()), so it could never be true, and no
         setting named header_promo_enabled exists in any settings source file either — the gate
         was structurally broken from day one, not an unset toggle. To hide the strip now, blank
         out header.promo.text in lang/en.php.)
         Copy -> lang/en.php (header.promo.text). -->
        <div class="w-full overflow-hidden bg-[color:var(--header-promo-bg-color,#007514)] text-[color:var(--header-promo-text-color,#fff)] text-[length:var(--sm-text-size)] py-2 leading-snug">
        <div class="gs-marquee-track">
            <span class="gs-marquee-item">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
            <span class="gs-marquee-item" aria-hidden="true">Welcome to Mr Flower - Craft with passion. Designed for you.</span>
        </div>
    </div>
    
    <div class="max-w-[1380px] mx-auto px-4 sm:px-6 md:px-12 h-[72px] flex items-center gap-3 lg:gap-4">

        <!-- Logo -->
        <a href="/" class="flex-shrink-0 inline-flex items-center no-underline mr-auto lg:mr-0" aria-label="Mr Flower homepage">
            <img src="/images/project/MF-Logo-tm-ori.webp" width="200" height="66" class="h-9 lg:h-[58px] w-auto block" alt="Mr Flower" fetchpriority="high">
        </a>

        <!-- Desktop nav (centered) -->
        <nav class="hidden lg:flex items-center gap-7 mx-auto">
            <a href="/" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Home</a>
            <a href="/products" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
            <a href="/about-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
            <a href="/contact-us" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
            <a href="/track-order" class="text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b-2 border-transparent pb-0.5 hover:text-[color:var(--primary-color)] hover:border-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        </nav>

        <!-- Right icons -->
        <div class="flex items-center gap-1 lg:gap-2 flex-shrink-0">

            <!-- Search (icon toggles the input row below) -->
            <button type="button" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Search products"
                    aria-controls="headerSearch" onclick="toggleHeaderSearch(event)">
                <span class="material-symbols-outlined" aria-hidden="true">search</span>
            </button>

            <!-- Account: profile dropdown when logged in, Sign In + Sign Up when anon (master auth/anon pattern) -->
                            <a href="/sign-in" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="Sign In">
                    <span class="material-symbols-outlined" aria-hidden="true">person</span>
                </a>
            
            <!-- Favourite (before Cart — per design action order). Wrapped in a hidden/lg:flex
                 container (NOT a class on the <a>, because $gsIconBtn carries inline-flex which
                 would override `hidden`) so it leaves the mobile action row entirely, keeping the
                 44px controls inside a 360px viewport. Surfaced as a drawer row instead (below). -->
            <span class="hidden lg:flex">
                <a href="/favourite" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" aria-label="View favourite products">
                    <span class="material-symbols-outlined" aria-hidden="true">favorite_border</span>
                </a>
            </span>

            <!-- Cart -->
                        <a href="/cart" class="inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0 relative" aria-label="View shopping cart">
                <span class="material-symbols-outlined" aria-hidden="true">shopping_cart</span>
                <span id="headerCartBadge" data-cart-badge class="absolute -top-0.5 -right-0.5 bg-[color:var(--btn-primary-bg-color)] text-white rounded-full w-4 h-4 text-[length:var(--fs-10)] flex items-center justify-center font-bold hidden" aria-hidden="true">0</span>
            </a>

            <!-- Mobile hamburger — LAST action icon (per design); toggles the dropdown panel below. -->
            <button type="button" class="lg:hidden inline-flex items-center justify-center w-11 h-11 rounded-full text-[color:var(--primary-color)] hover:opacity-70 cursor-pointer bg-transparent border-0" onclick="toggleMobileNavPublic(event)"
                    aria-label="Menu" aria-expanded="false" aria-controls="mobileNavPanel">
                <span class="material-symbols-outlined" aria-hidden="true">menu</span>
            </button>
        </div>
    </div>

    <!-- Search input row (toggled by the search icon) -->
    <!-- Search overlay (design Wa9KQo5O .mf-search-*): drops full-width below the header, pill field
         + arrow submit + close ×; slide-down via data-[open]; closes on backdrop / Esc / × . -->
    <div id="headerSearch" data-open="false" role="dialog" aria-label="Search products"
         class="absolute top-full left-0 right-0 z-30 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_18px_40px_rgba(42,40,32,0.13)] -translate-y-full opacity-0 invisible transition-all duration-300 ease-out data-[open=true]:translate-y-0 data-[open=true]:opacity-100 data-[open=true]:visible">
        <div class="max-w-[1280px] mx-auto px-4 lg:px-8 py-6 lg:py-8">
            <div class="flex items-center gap-4">
                <form action="/products" method="get" class="flex-1 min-w-0 flex items-center gap-3 rounded-full border border-[color:var(--primary-border-color)] bg-[color:var(--default-secondary-bg-color)] px-5 py-3 transition-colors focus-within:border-[color:var(--primary-color)]">
                    <span class="material-symbols-outlined text-[color:var(--primary-color)]" aria-hidden="true">search</span>
                    <input type="text" name="q" id="headerSearchInput" autocomplete="off"
                           class="flex-1 min-w-0 bg-transparent border-0 outline-none text-[length:var(--md-text-size)] text-[color:var(--primary-text-color)] placeholder:text-[color:var(--input-placeholder-color)]"
                           placeholder="Search for flowers, bouquets…" value="">
                    <button type="submit" class="flex items-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-color)] hover:opacity-70" aria-label="Search products">
                        <span class="material-symbols-outlined" aria-hidden="true">arrow_forward</span>
                    </button>
                </form>
                <button type="button" onclick="closeHeaderSearch()" aria-label="Close search"
                        class="shrink-0 w-10 h-10 inline-flex items-center justify-center bg-transparent border-0 cursor-pointer text-[color:var(--primary-text-color)] hover:text-[color:var(--primary-color)] hover:rotate-90 transition-transform">
                    <span class="material-symbols-outlined" aria-hidden="true">close</span>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile nav dropdown (design pattern): full-width panel dropping below the header,
         toggled by the hamburger, closed on outside-click / Esc. Hidden by default + always
         hidden at lg (desktop uses the inline nav). Replaces the v1.0.7 left slide-in drawer. -->
    <nav id="mobileNavPanel" aria-label="Menu"
         class="hidden lg:!hidden absolute top-full left-0 right-0 z-40 bg-[color:var(--default-bg-color)] border-b border-[color:var(--primary-border-color)] shadow-[0_10px_28px_rgba(0,0,0,0.10)] px-6 pb-1">
        <a href="/"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Home</a>
        <a href="/products"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Shop</a>
        <a href="/about-us"     class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">About Us</a>
        <a href="/contact-us"   class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Contact Us</a>
        <a href="/track-order"  class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Track Order</a>
        <!-- Favourite kept in the menu (not the mobile action row) — operator decision (44px touch / no 360 overflow). -->
        <a href="/favourite"    class="flex items-center gap-3 py-3.5 text-[length:var(--sm-text-size)] font-semibold uppercase tracking-[0.06em] text-[color:var(--primary-text-color)] border-b border-[color:var(--primary-border-color)] last:border-b-0 hover:text-[color:var(--primary-color)] transition-colors no-underline">Favourite</a>
        <!-- Cart removed from the drawer (v1.0.13f) — redundant: the cart icon is always visible in the
             mobile action row. Favourite stays: its icon is hidden < lg, so the drawer is its only access. -->
        <!-- Logged-in profile block intentionally NOT repeated here: the account-icon dropdown
             (#topBarDropdown, shown on mobile too) already carries name + Account/Orders/Rewards/Sign Out. -->
    </nav>
</section>

<!-- Search backdrop (dims the page below the header while the search overlay is open). -->
<div id="headerSearchBackdrop" onclick="closeHeaderSearch()" class="hidden fixed inset-0 z-20 bg-black/30"></div>

<script>
// Search overlay (v1.0.10) — drops below the header, closes on backdrop / Esc / × .
function openHeaderSearch(e){ if(e) e.preventDefault();
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='true'; if(b) b.classList.remove('hidden'); if(t) t.setAttribute('aria-expanded','true');
  var i=document.getElementById('headerSearchInput'); if(i) setTimeout(function(){ i.focus(); }, 220);
}
function closeHeaderSearch(){
  var o=document.getElementById('headerSearch'), b=document.getElementById('headerSearchBackdrop'), t=document.querySelector('[aria-controls="headerSearch"]');
  if(o) o.dataset.open='false'; if(b) b.classList.add('hidden'); if(t) t.setAttribute('aria-expanded','false');
}
function toggleHeaderSearch(e){ if(e){ e.preventDefault(); e.stopPropagation(); } var o=document.getElementById('headerSearch'); if(!o) return; o.dataset.open==='true' ? closeHeaderSearch() : openHeaderSearch(); }
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeHeaderSearch(); });

// Self-contained mobile-nav toggle (v1.0.8). The legacy openMobileMenuPublic/closeMobileMenuPublic
// were undefined on the live page (general_v1.0.2.js no longer loaded), so define them here +
// keep the names. They drive #mobileNavPanel (show = remove 'hidden').
function openMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.remove('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','true'); } }
function closeMobileMenuPublic(){ var p=document.getElementById('mobileNavPanel'); if(p){ p.classList.add('hidden'); var b=document.querySelector('[aria-controls="mobileNavPanel"]'); if(b) b.setAttribute('aria-expanded','false'); } }
function toggleMobileNavPublic(e){ if(e) e.stopPropagation(); var p=document.getElementById('mobileNavPanel'); if(!p) return; p.classList.contains('hidden') ? openMobileMenuPublic() : closeMobileMenuPublic(); }
document.addEventListener('click', function(e){
    var p=document.getElementById('mobileNavPanel');
    if(!p || p.classList.contains('hidden')) return;
    var hdr=p.parentElement;                       // the sticky <section>
    if(hdr && !hdr.contains(e.target)) closeMobileMenuPublic();
});
document.addEventListener('keydown', function(e){ if(e.key==='Escape') closeMobileMenuPublic(); });

// Cart badge live-update — single source of truth for #headerCartBadge. Pages call
// applyHeaderCartBadge(n) after a cart mutation (PDP add, cart.php qty/remove) so the
// count updates without a reload. Hidden when 0. Mirrors the favourite-heart pattern.
window.applyHeaderCartBadge = function(count){
    var el = document.getElementById('headerCartBadge');
    if(!el) return;
    var n = parseInt(count, 10); if(isNaN(n) || n < 0) n = 0;
    el.textContent = n;
    el.classList.toggle('hidden', n <= 0);
};
</script>

<!-- (v1.0.8) The left slide-in drawer + overlay were removed — replaced by #mobileNavPanel inside
     the header section above. $gsMobileLink retained in the bundle list in case other pages reference it. -->

<!--------------------------------------------------------Start of HTML block (start)-------------------------------------------------------->
<body class="min-h-screen flex flex-col bg-[color:var(--color-bg-white)] text-[color:var(--primary-text-color)] overflow-x-hidden">
    <main class="flex-1 flex flex-col">

        <!-- Track panel — centered column over a faint, grayscaled flower backdrop (design parity). -->
        <section class="relative flex-1 overflow-hidden bg-[color:var(--color-bg-white)] flex flex-col items-center px-6 pt-14 pb-24 sm:pt-20 sm:pb-40 min-h-[560px]">
            <img src="/images/project/bg-flowers-hero.webp" alt="" aria-hidden="true"
                 class="absolute inset-0 w-full h-full object-cover opacity-[0.07] grayscale pointer-events-none select-none">

            <div class="relative z-10 w-full max-w-[440px] flex flex-col items-center">
                <h1 class="font-['Quinstory',Georgia,serif] font-normal text-[34px] sm:text-[46px] leading-[1.1] text-[color:var(--primary-color)] text-center mb-3">
                    Track Order                </h1>
                <p class="text-[14px] text-[color:var(--primary-text-color)] text-center leading-normal mb-8">
                    Stay updated on your order&#039;s latest status.                </p>

                <!-- data-error-anchor: the shared errorDisplay()/showCustomErrorField() (general_v3.0.2)
                     mounts a per-field .invalid-feedback message inside this wrapper, matching sign-up. -->
                                <div class="w-full mb-4" data-error-anchor>
                    <input type="text" id="orderInput" autocomplete="off" value=""
                           placeholder="Order no. (Example S00000)"
                           class="w-full border border-[color:var(--color-border-default)] rounded-[var(--input-border-radius)] px-[18px] py-3.5 text-[length:var(--default-text-size)] text-[color:var(--primary-text-color)] bg-white outline-none transition-[border-color,box-shadow] focus:border-[color:var(--primary-color)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--primary-color)_12%,transparent)] placeholder:text-[color:var(--input-placeholder-color)]">
                </div>

                <div class="w-full mb-4" data-error-anchor>
                    <input type="text" id="phoneInput" inputmode="numeric" maxlength="4" autocomplete="off" value=""
                           placeholder="Last 4 digits of phone number"
                           class="w-full border border-[color:var(--color-border-default)] rounded-[var(--input-border-radius)] px-[18px] py-3.5 text-[length:var(--default-text-size)] text-[color:var(--primary-text-color)] bg-white outline-none transition-[border-color,box-shadow] focus:border-[color:var(--primary-color)] focus:shadow-[0_0_0_2px_color-mix(in_srgb,var(--primary-color)_12%,transparent)] placeholder:text-[color:var(--input-placeholder-color)]">
                </div>

                <button type="button" id="trackBtn"
                        class="w-full flex items-center justify-center gap-2 bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white border-0 rounded-[var(--input-border-radius)] py-3.5 text-[13px] font-bold tracking-[0.1em] uppercase cursor-pointer transition-colors">
                    Track Now                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"></circle><path d="m20 20-3.5-3.5"></path></svg>
                </button>

                <!-- Result area — populated by trackOrder(); status-only, no PII. -->
                <div id="trackResult" class="hidden w-full mt-8"></div>
            </div>
        </section>
    </main>

    <!-- Retry-payment method chooser — same markup + token classes as my-orders.php. Opened by the
         Retry Payment action on an awaiting-payment order; the manual-transfer Upload Receipt path
         skips it (method is locked server-side). -->
    <div id="payModal" class="hidden fixed inset-0 z-50 items-center justify-center p-4 bg-black/40">
        <div class="bg-white rounded-[14px] w-full max-w-[420px] p-6">
            <div class="flex items-center justify-between mb-4">
                <div class="text-[length:var(--md-text-size)] font-bold text-[color:var(--primary-text-color)]">Choose Payment Method</div>
                <button type="button" id="payModalClose" class="cursor-pointer text-[color:var(--color-text-muted)] hover:text-[color:var(--primary-text-color)] text-[length:var(--xl-text-size)] leading-none">&times;</button>
            </div>
            <div id="payMethodList" class="flex flex-col gap-2 mb-3"></div>
            <div id="payBankWrap" class="hidden mb-3">
                <label class="block text-[length:var(--xs-text-size)] text-[color:var(--color-text-muted)] mb-1">Select Bank</label>
                <select id="payBankSelect" class="w-full border border-[color:var(--color-border-warm)] rounded-[var(--input-border-radius)] px-3 py-2.5 text-[length:var(--sm-text-size)] bg-white outline-none focus:border-[color:var(--primary-color)]"></select>
            </div>
            <button type="button" id="payConfirmBtn" class="w-full cursor-pointer bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white rounded-[8px] py-3 text-[length:var(--sm-text-size)] font-bold uppercase tracking-[0.08em] transition-colors disabled:opacity-50">
                Pay Now            </button>
        </div>
    </div>

    
<footer class="w-full bg-[color:var(--footer-bg-color)] text-[color:var(--footer-text-color)]">
    <div class="max-w-[1380px] mx-auto px-6 md:px-12 py-10 md:py-12">

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

            <!-- Brand + social + language switcher -->
            <div>
                <a href="/" class="inline-block no-underline" aria-label="Mr Flower">
                    <img src="/images/project/MF-Logo-tm-ori-white.webp" alt="Mr Flower" width="250" height="82" class="h-[67px] w-auto block">
                </a>
                <div class="flex items-center gap-3 mt-4">
                    <a href="https://www.facebook.com/mrflowermy" target="_blank" rel="noopener noreferrer" aria-label="Facebook" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07c0 6.02 4.39 11.01 10.13 11.93v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.69.24 2.69.24v2.97h-1.52c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.08 24 18.09 24 12.07z"/></svg>
                    </a>
                    <a href="https://www.instagram.com/mrflower_my/?hl=en" target="_blank" rel="noopener noreferrer" aria-label="Instagram" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.43.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.43.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.43-.36-1.06-.41-2.23-.06-1.27-.07-1.65-.07-4.85s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.43-.16 1.06-.36 2.23-.41 1.27-.06 1.65-.07 4.85-.07zm0 2.76a5.46 5.46 0 1 0 0 10.92 5.46 5.46 0 0 0 0-10.92zm0 9a3.54 3.54 0 1 1 0-7.08 3.54 3.54 0 0 1 0 7.08zm6.95-9.22a1.27 1.27 0 1 1-2.55 0 1.27 1.27 0 0 1 2.55 0z"/></svg>
                    </a>
                    <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" aria-label="WhatsApp" class="inline-flex items-center justify-center w-11 h-11 rounded-full border border-white/40 text-[color:var(--footer-text-color)] hover:opacity-80">
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
                    </a>
                </div>

                <!-- Language switcher (globe + EN/中文/BM; ?lang= resolved by entry_v*.php) -->
                <div class="relative inline-block" data-footer-lang>
                    <button type="button" data-footer-lang-trigger class="inline-flex items-center gap-2 mt-6 px-3.5 py-2 rounded-full border border-white/25 bg-transparent cursor-pointer text-[length:var(--sm-text-size)] font-medium text-[color:var(--footer-text-color)] hover:border-white/50"
                            aria-label="Change language" aria-haspopup="true">
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">language</span>
                        <span>EN</span>
                        <span class="material-symbols-outlined text-[length:var(--fs-16)] leading-none" aria-hidden="true">expand_more</span>
                    </button>
                    <div class="hidden absolute bottom-[calc(100%_+_10px)] left-0 min-w-[184px] bg-[color:var(--default-bg-color)] rounded-xl shadow-[0_-8px_32px_rgba(0,0,0,0.28)] overflow-hidden py-2 z-[9999]" data-footer-lang-menu>
                                                    <a href="/track-order?lang=en" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] font-bold">EN</a>
                                                    <a href="/track-order?lang=zh-cn" class="block px-4 py-2.5 text-[length:var(--sm-text-size)] no-underline text-[color:var(--primary-text-color)] hover:bg-[color:var(--secondary-bg-color)] ">中文</a>
                                            </div>
                </div>
            </div>

            <!-- Our Store -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Our Store</h2>
                <a href="/" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Home</a>
                <a href="/products" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Shop</a>
                <a href="/about-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">About Us</a>
            </div>

            <!-- Quick Links -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Quick Links</h2>
                <a href="/contact-us" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Contact Us</a>
                <a href="/track-order" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Track Order</a>
                <a href="/terms-and-conditions" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Terms &amp; Conditions</a>
                <a href="/privacy-policy" class="block text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] hover:opacity-80 mb-2 no-underline">Privacy Policy</a>
            </div>

            <!-- Get In Touch -->
            <div>
                <h2 class="text-[length:var(--md-text-size)] font-bold text-[color:var(--footer-text-color)] mb-3 uppercase tracking-wide">Get In Touch</h2>
                <a href="https://maps.app.goo.gl/FvJDWtvKT3mVR63B7" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">location_on</i>
                    <span class="whitespace-pre-line">22, Jalan Sentosa,
Taman Chi Leong,
42000 Pelabuhan Klang,
Selangor.</span>
                </a>
                <a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">call</i>
                    <span>+6016-203 9516</span>
                </a>
                <a href="/cdn-cgi/l/email-protection#d1b2bebfa5b0b2a591bca3b7bdbea6b4a3ffb2bebcffbca8" class="flex items-start gap-3 text-[length:var(--sm-text-size)] text-[color:var(--footer-text-color)] mb-3 hover:opacity-80 no-underline">
                    <i class="material-symbols-outlined text-[length:var(--lg-text-size)] leading-tight" aria-hidden="true">mail</i>
                    <span><span class="__cf_email__" data-cfemail="c3a0acadb7a2a0b783aeb1a5afacb4a6b1eda0acaeedaeba">[email&#160;protected]</span></span>
                </a>
            </div>

        </div>

        <!-- Bottom bar: copyright + powered-by -->
        <div class="mt-10 pt-5 border-t border-[color:var(--footer-border-color,rgba(255,255,255,.2))] text-center">
            <p class="m-0 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Copyright &copy; 2026 Mr Flower Sdn Bhd (1015322 T). All Rights Reserved.            </p>
            <p class="m-0 mt-1 text-[length:var(--xs-text-size)] text-[color:var(--footer-text-color)]">
                Powered by                <a href="https://365production.net/" target="_blank" rel="noopener noreferrer" class="font-bold no-underline text-[color:var(--footer-text-color)] hover:opacity-80">365Production.net</a>
            </p>
        </div>

    </div>

    <!-- Footer language-switcher dropdown: toggle + click-outside (scoped) -->
    <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script><script>
    (function () {
        var wrap = document.querySelector('[data-footer-lang]');
        if (!wrap) return;
        var trigger = wrap.querySelector('[data-footer-lang-trigger]');
        var menu    = wrap.querySelector('[data-footer-lang-menu]');
        if (!trigger || !menu) return;
        trigger.addEventListener('click', function (e) { e.stopPropagation(); menu.classList.toggle('hidden'); });
        document.addEventListener('click', function (e) { if (!wrap.contains(e.target)) menu.classList.add('hidden'); });
    })();
    </script>
</footer>

<!-- Floating WhatsApp CTA — matches the live production site (mrflower.com.my): fixed bottom-right,
     opens a WhatsApp chat with the same prefilled message as the footer's own WhatsApp icon/contact
     row above ($_gs_whatsapp, already computed). WhatsApp's brand green (#25D366) is a fixed
     third-party mark, not a themeable design-system color, so it's intentionally hardcoded here
     rather than mapped to a --color-* token. -->
<a href="https://api.whatsapp.com/send?phone=60162039516&amp;text=Hi%20Mr%20Flower%2C%20I%27m%20browsing%20your%20website%20and%20have%20some%20questions.%20Can%20you%20help%20me%3F" target="_blank" rel="noopener noreferrer"
   aria-label="Contact us on WhatsApp"
   class="fixed right-5 bottom-6 z-50 w-14 h-14 rounded-2xl bg-[#25D366] text-white shadow-lg flex items-center justify-center transition-transform hover:scale-105">
    <svg width="30" height="30" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M.05 24l1.69-6.16a11.87 11.87 0 0 1-1.6-5.95C.14 5.34 5.5 0 12.08 0a11.82 11.82 0 0 1 8.42 3.49 11.74 11.74 0 0 1 3.5 8.41c0 6.55-5.36 11.89-11.95 11.89a12 12 0 0 1-5.72-1.45L.05 24zm6.6-3.81c1.68 1 3.28 1.6 5.42 1.6 5.45 0 9.9-4.42 9.9-9.88a9.8 9.8 0 0 0-2.9-6.98 9.9 9.9 0 0 0-6.99-2.9c-5.46 0-9.9 4.43-9.9 9.88 0 2.24.65 3.91 1.74 5.66l-1 3.65 3.73-1.03zm11.39-5.55c-.07-.12-.27-.2-.57-.35-.3-.15-1.76-.87-2.03-.97-.27-.1-.47-.15-.67.15-.2.3-.77.96-.94 1.16-.17.2-.35.22-.64.07-.3-.15-1.25-.46-2.38-1.47-.88-.78-1.47-1.75-1.65-2.05-.17-.3-.02-.46.13-.6.13-.13.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.37-.02-.52-.08-.15-.67-1.62-.92-2.22-.24-.58-.49-.5-.67-.51l-.57-.01c-.2 0-.52.07-.8.37-.27.3-1.04 1.02-1.04 2.49 0 1.47 1.07 2.89 1.22 3.09.15.2 2.11 3.22 5.11 4.51.71.31 1.27.49 1.71.63.72.23 1.37.2 1.88.12.57-.09 1.76-.72 2.01-1.42.25-.7.25-1.29.17-1.42z"/></svg>
</a>

    <!--
 @author Evan
@version 1.0.5
@created Jan 14 2026

Changelog:
- v1.0.5 (2026-06-18 in-place patch): library.min.js src made absolute (/js/library.min.js) — carries
  forward the v1.0.3/v1.0.4 fix this version forked before (v1.0.5 branched 06-10; v1.0.4's absolute
  patch landed 06-11, so it never reached here). The relative path broke on pages served at a deep
  URL (e.g. product-detail/<slug>/<pid>): the browser resolved it against the page dir and nginx's
  ^~ /product-detail/ block returned 404. Same fix goshopping/master applied to v1.0.3/v1.0.4.
- v1.0.5 (2026-06-10): added the inline checkPhoneNumber() helper (canonical 601… normalizer,
  same one goshopping's sharejs carries) — member/verify-otp.php's addphone/changephone flows
  call it before requesting the SMS OTP; member's chain had no definition (only admin's
  shareJs2 and a page-local copy in index.php). Referenced by verify-otp.php + verify-link.php;
  pages on v1.0.4 are unchanged.
- v1.0.4 (2026-06-05): bumped the general loader /share_js/general_v3.0.0.js -> general_v3.0.2.js
  (the Tailwind-modal general for member: closeCanvasModal + Tailwind showMessage/Material Symbols
  + catalog-driven validateInput + error-color). The window.__validationRules block below now
  actually drives field validation (v3.0.2 reads it; v3.0.0 did not). Pair with head_v1.0.5
  (centered Tailwind modal) + member/sign-in.php.
- v1.0.3 (2026-05-28): migrated general.js loader from legacy /js/general_v1.0.2.js
  to canonical /share_js/general_v3.0.0.js. Added filemtime-based ?v= cache busting
  so the browser re-fetches the JS whenever its mtime changes, but reuses the
  cached copy across page refreshes when unchanged. v1.0.2 line kept commented
  out for rollback reference. NOTE: path appears twice on the script line (once
  in src URL, once in filemtime call) — when bumping general_v*.js, update BOTH
  literals. The static URL form is required so the bump-includes skill can
  statically detect the dependency.
- v1.0.2 (2026-05-14 in-place patch): slow-page reporting upgraded to LCP trigger,
  matching seller/sharejs_v1.0.5 mechanism.
  • Bot detection ($isBot) skips Telegram alerts for bot/crawler traffic.
  • PerformanceObserver(__vmLcp) captures Largest Contentful Paint early.
  • collectPerfBreakdown() packs nav/paint/resource summary + top-5-slowest into
    queryTime.perfBreakdown. Backend reads this when simpleDebugLoadTime=0.
  • window.onload trigger changed from `totalPageLoadTime > 3` to LCP/TTFB-based:
      - $pageConfig['slowLcpMs']  default 3000 (Web Vitals "needs improvement")
      - $pageConfig['slowTtfbMs'] default 1500 (backend-regression safety net)
  • val993 header value = LCP-with-fallback (was onload totalPageLoadTime, noisy
    due to slow async resources users don't perceive).
  • Pair with entry_v1.0.2.php's existing `simpleNotification` wiring — set
    `$pageConfig['simpleDebugLoadTime'] => 0` per page for the full breakdown.
- v1.0.1: change the page url to use origin + path name instead of full url for slow page
-->


<!-- begin::Global Config(global config for global JS sciprts) -->
<!--begin:: Standard Member Platform JS -->
<script src="/js/library.min.js?v=2" type="text/javascript"></script>
<!-- <script src="js/general_v1.0.0.js" type="text/javascript"></script> -->
<!-- <script src="js/general_v1.0.2.js" type="text/javascript"></script> --> <!-- v1.0.3: superseded by /share_js/general_v3.0.2.js below -->
<!-- Shared input-validation catalog (window.__validationRules) — same source class.validator.php
     reads, so JS + PHP can't drift. MUST load before general.js. Defensive: {} if file absent.
     (general.js is v3.0.2 here, which READS this catalog to drive validateInput.) -->
<script>
window.__validationRules = {"types":{"text":{"pattern":"^[\\s\\S]*$","check":null,"messageKey":"validation.text","message":"Invalid input."},"alphabet":{"pattern":"^[a-zA-Z]*$","check":null,"messageKey":"validation.alphabet","message":"Please enter letters only."},"alphabetWithSpace":{"pattern":"^[a-zA-Z ]*$","check":null,"messageKey":"validation.alphabetWithSpace","message":"Please enter letters and spaces only."},"alphanumeric":{"pattern":"^[a-zA-Z0-9 ]*$","check":null,"messageKey":"validation.alphanumeric","message":"Please enter letters, numbers and spaces only."},"alphanumericExtend":{"pattern":"^[a-zA-Z0-9&@*._,!?\\-:;\\/\\\\+~^|$%#\"(){}`§¶…†‡•·°™®©€£¥ \\n]*$","check":null,"messageKey":"validation.alphanumericExtend","message":"Only letters, numbers, and common symbols are allowed."},"bcrypt":{"pattern":"^\\$2[aby]\\$\\d{2}\\$[./A-Za-z0-9]{53}$","check":null,"messageKey":"validation.bcrypt","message":"Please enter a valid bcrypt hash (starts with $2y$, $2a$ or $2b$)."},"numeric":{"pattern":"^[-+]?\\d+$","check":null,"messageKey":"validation.numeric","message":"Please enter a whole number."},"decimal":{"pattern":"^[-+]?\\d*\\.?\\d*$","check":null,"messageKey":"validation.decimal","message":"Please enter a valid number."},"email":{"pattern":"^[a-zA-Z0-9_.\\-@]+$","check":"email","messageKey":"validation.email","message":"Please enter a valid email address."},"url":{"pattern":"^[a-zA-Z0-9_~:\\/?\\#.\\[\\]@$&()*+,;=%!'-]*$","check":"url","messageKey":"validation.url","message":"Please enter a valid URL."},"phone":{"pattern":"^[0-9+\\-() ]{0,15}$","check":null,"messageKey":"validation.phone","message":"Please enter a valid phone number."},"emailOrPhone":{"pattern":"^[a-zA-Z0-9_.\\-@+]+$","check":"emailOrPhone","messageKey":"validation.emailOrPhone","message":"Please enter a valid email or phone number."},"date":{"pattern":"^\\d{4}-\\d{2}-\\d{2}$","check":"date","messageKey":"validation.date","message":"Please enter a valid date (YYYY-MM-DD)."},"datetime":{"pattern":"^\\d{4}-\\d{2}-\\d{2}[ T]\\d{2}:\\d{2}(:\\d{2})?$","check":"datetime","messageKey":"validation.datetime","message":"Please enter a valid date and time."}},"constraints":{"required":{"messageKey":"validation.required","message":"This field is required."},"min":{"messageKey":"validation.min","message":"Please enter at least :min characters."},"max":{"messageKey":"validation.max","message":"Please enter no more than :max characters."},"range":{"messageKey":"validation.range","message":"Please enter a value between :min and :max."}}};
</script>
<script src="/share_js/general_v3.0.2.js?v=1782988382" type="text/javascript"></script>
<!-- <script src="/js/responsive-table.js?" type="text/javascript"></script> -->

<script type="text/javascript">

  function changeLanguage(newLanguage) {
    document.cookie = `langCode=${newLanguage}; path=/`;
    window.location.reload();
  }
  
  var pageName = "track-order.php";
  var isBot    = true;

  // ─── Slow-page debug: LCP observer + perf breakdown ─────────────────────
  // LCP requires PerformanceObserver — not available retroactively. Set up
  // early so we capture the LCP element before window.onload.
  var __vmLcp = 0;
  if (typeof PerformanceObserver !== 'undefined') {
      try {
          new PerformanceObserver(function (list) {
              list.getEntries().forEach(function (e) { __vmLcp = Math.round(e.startTime); });
          }).observe({ type: 'largest-contentful-paint', buffered: true });
      } catch (ex) { /* unsupported — skip */ }
  }

  // Aggregates everything the W3C Performance API tells us about the page load
  // into a compact JSON suitable for inclusion in the slow-page Telegram report.
  function collectPerfBreakdown() {
      try {
          var nav = (performance.getEntriesByType && performance.getEntriesByType('navigation') || [])[0] || {};
          var paint = {};
          (performance.getEntriesByType && performance.getEntriesByType('paint') || []).forEach(function (p) {
              if (p.name === 'first-paint')            paint.fp  = Math.round(p.startTime);
              if (p.name === 'first-contentful-paint') paint.fcp = Math.round(p.startTime);
          });
          if (__vmLcp) paint.lcp = __vmLcp;

          var resourceEntries = (performance.getEntriesByType && performance.getEntriesByType('resource')) || [];
          var byType = {};
          // Dedupe slowest by URL: multiple PerformanceResourceTiming entries for
          // the same URL keep only the entry with the largest duration. byType
          // totals still count every entry.
          var slowestByUrl = {};
          resourceEntries.forEach(function (r) {
              var type = r.initiatorType || 'other';
              if (!byType[type]) byType[type] = { count: 0, durationMs: 0, transferKB: 0 };
              byType[type].count++;
              byType[type].durationMs += r.duration;
              byType[type].transferKB += (r.transferSize || 0) / 1024;

              var prev = slowestByUrl[r.name];
              if (!prev || r.duration > prev.duration) {
                  slowestByUrl[r.name] = { url: r.name, duration: r.duration, type: type };
              }
          });
          var slowest = Object.keys(slowestByUrl).map(function (k) { return slowestByUrl[k]; });
          Object.keys(byType).forEach(function (k) {
              byType[k].durationMs = Math.round(byType[k].durationMs);
              byType[k].transferKB = Math.round(byType[k].transferKB);
          });
          slowest.sort(function (a, b) { return b.duration - a.duration; });

          return {
              nav: {
                  dns:      Math.round((nav.domainLookupEnd      || 0) - (nav.domainLookupStart   || 0)),
                  tcp:      Math.round((nav.connectEnd           || 0) - (nav.connectStart        || 0)),
                  tls:      nav.secureConnectionStart ? Math.round((nav.connectEnd || 0) - nav.secureConnectionStart) : 0,
                  ttfb:     Math.round((nav.responseStart        || 0) - (nav.requestStart        || 0)),
                  download: Math.round((nav.responseEnd          || 0) - (nav.responseStart       || 0)),
                  domParse: Math.round((nav.domInteractive       || 0) - (nav.responseEnd         || 0)),
                  domReady: Math.round( nav.domContentLoadedEventEnd || 0),
                  load:     Math.round((nav.loadEventEnd > 0) ? nav.loadEventEnd : performance.now())
              },
              paint: paint,
              resources: {
                  totalCount: resourceEntries.length,
                  byType:     byType
              },
              slowestResources: slowest.slice(0, 5).map(function (r) {
                  var url = String(r.url || '');
                  if (url.length > 200) url = url.substring(0, 200) + '...';
                  return { url: url, durationMs: Math.round(r.duration), type: r.type };
              })
          };
      } catch (ex) {
          return { error: String(ex) };
      }
  }

  $(document).ready(function() {

    if(pageName == '404') {
      return true
    }
    
    $(".changeLanguage").click(function(){
      changeLanguage($(this).attr("language"));
    });
    
    window.ajaxEnabled = true;
  });

// window.onload = function () { 
//         var pageName = 'track-order';
//         var phpStartTime = '';
//         var jsStartTime = '';
//         var jsEndTime = new Date().getTime() / 1000;
//         var jsLoadTime = jsEndTime - jsStartTime;
//         var totalPageLoadTime = jsEndTime - phpStartTime;
//         //var phpEndTime = '';
//         //var phpLoadTime = ''; 
//         var queryTime = {"getClientIpInfo":{"totalTime":0.045869999999999994,"count":1,"lastExecuted":"2026-07-11 03:18:23"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":45.87,"executionTimeSec":0.0459,"accumulatedTimeMs":45.87,"accumulatedTimeSec":0.0459,"timestamp":"2026-07-11 03:18:23"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":249.05,"executionTimeSec":0.2491,"accumulatedTimeMs":294.92,"accumulatedTimeSec":0.2949,"timestamp":"2026-07-11 03:18:23"}],"accumulatedTimeMs":294.92,"bootstrapSession":{"totalTime":0.24905000000000002,"count":1,"lastExecuted":"2026-07-11 03:18:23"}};
//         var phpLoadTime = queryTime['accumulatedTimeMs']/1000;

//         if(totalPageLoadTime > 3){
//         //if(true){
//             var url = '/track-order'; 
//             var method = 'POST';
//             var debug = 0; 
//             var bypassBlocking = 0; 
//             var bypassLoading = 0; 
//             var fCallback = '';
//             var formData = {
//                 predefined992: "mEpvPk0NND+1dcztKLNwLrVmi2K8invcHt6NXHaCrDLkzpfnTnUG8Pz+NmRPQYVicaY2QGr2a8\/vTgy\/GYo6G9Pyfq0g0PgJ1nXdEn1OTb4ADfLtuNfEZ6\/Q3GL5s+nhv9rrJWnzvGlEaXxw+3dptacd\/mdnfQLcITUHv+oca9UBIp2CC3HjGX0ZITUTV15nr13EsgHU446hEfE+6PaiRIAo\/sECsy7GO7WsaQfD+p14AMukdOoT\/QymtwpXrCl35YZZiclsOaeF5741TjUlrtwOtnvXYfMrCOQB\/GBeAIfTodV6NknzntCLhU80KgnrHIJRsYvC+YTAc2bnX7RgQw==",
//                 predefined993: "i1mDQszkjdWpFX67xyGOQko8kP\/oUeO+teZd\/BXkIgwJ7Id4t\/FTJR9jkTusAtmWQPv8kjo8iMlJIUe456qEZLT2CpZZJhgNZJUdj8pWdnPd4yjrXP0GSwBjMYrJ6HKj5Y1cIDsyH92dIimSOrhiTK\/XAdFUX9sCbK8hw89nWoNEoxAhI59LKX4Xq0OzG0fcTniar\/85E\/FUdwubgm4HknnqV1iPm9O6IdXsvPJ2PvRLZa8l6VzCCGh0X8zRnXTcST1KTqITd7kAfRKLB+GbxfpXLpipOfL7VdpMKvYM6msW9bUqjYBX1BqxweVprUoG\/Z76XokMi1vBp8SpbLn\/PA==",
//                 val993: [pageName, window.location.origin + window.location.pathname, totalPageLoadTime, queryTime, '216.73.216.193', 'United States'] 
//             };   

//             ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
//         }    
//     };  
  
    window.onload = function () {
        window.ajaxEnabled = true;
        var pageName = 'track-order';
        // 2026-05-21: auto-fire of `command: 'checkPickup'` disabled.
        // entry_v1.0.2.php's case "checkPickup" branch tries $general->checkPickup()
        // but class.general_v1.0.1.php (the General version v1.0.2 loads) doesn't
        // define that method, causing a PHP fatal 500 on every page load. Until
        // either (a) checkPickup() is re-added to class.general_v1.0.1.php or
        // (b) the case branch in entry_v1.0.2.php is removed, this auto-fire is
        // gated off with `false &&` so the block stays as code (not commented
        // out / deleted) and can be re-enabled by flipping the guard back.
        if(false && pageName != 'Collect Item' && pageName != 'Thank You'){
              var url = '/track-order' + window.location.search;;
              var method = 'POST';
              var debug = 0;
              var bypassBlocking = 0;
              var bypassLoading = 0;
              var fCallback = promptPickup;
              var formData = {
                  command: 'checkPickup',
                  params: {
                        'storageID': ''
                    }
              };
              ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
	}
	// ─── Slow-page reporting: LCP-based trigger ─────────────────────────
	// Skip bots so Telegram alerts don't spam from Google Ads / crawlers.
	if (isBot) {
	    return;
	}

	var pageName = 'track-order';
        var phpStartTime = '';
        var jsStartTime = '';
        var jsEndTime = new Date().getTime() / 1000;
        var jsLoadTime = jsEndTime - jsStartTime;
        var totalPageLoadTime = jsEndTime - phpStartTime;
        var queryTime = {"getClientIpInfo":{"totalTime":0.045869999999999994,"count":1,"lastExecuted":"2026-07-11 03:18:23"},"sequence":[{"step":1,"query":"getClientIpInfo","type":"getClientIpInfo","executionTimeMs":45.87,"executionTimeSec":0.0459,"accumulatedTimeMs":45.87,"accumulatedTimeSec":0.0459,"timestamp":"2026-07-11 03:18:23"},{"step":2,"query":"parallel batch (1 calls)","type":"bootstrapSession","executionTimeMs":249.05,"executionTimeSec":0.2491,"accumulatedTimeMs":294.92,"accumulatedTimeSec":0.2949,"timestamp":"2026-07-11 03:18:23"}],"accumulatedTimeMs":294.92,"bootstrapSession":{"totalTime":0.24905000000000002,"count":1,"lastExecuted":"2026-07-11 03:18:23"}};
        var phpLoadTime = queryTime['accumulatedTimeMs']/1000;
        // Attach browser-side perf breakdown. Backend reads queryTime.perfBreakdown
        // when simpleDebugLoadTime=0 to render the "Slow Page Load Debug" template.
        try { queryTime.perfBreakdown = collectPerfBreakdown(); } catch (ex) {}

        var debugLoadTime = 0 == 1;
        // ─── Trigger thresholds ─────────────────────────────────────────
        // Primary: LCP (user-perceived page-loaded). Safety: TTFB (catches
        // backend-only regressions). Both overridable per page via
        // $pageConfig['slowLcpMs'] / ['slowTtfbMs'].
        var slowLcpMs  = 3000;
        var slowTtfbMs = 1500;
        var lcpMs      = (queryTime.perfBreakdown && queryTime.perfBreakdown.paint && queryTime.perfBreakdown.paint.lcp)  || 0;
        var ttfbMs     = (queryTime.perfBreakdown && queryTime.perfBreakdown.nav   && queryTime.perfBreakdown.nav.ttfb)   || 0;
        var shouldReport = debugLoadTime && (
            (lcpMs  > 0 && lcpMs  > slowLcpMs)  ||
            (ttfbMs > 0 && ttfbMs > slowTtfbMs)
        );

        if (shouldReport) {
            var url = '/track-order';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = '';
            // Header "Total Load Time" value = LCP (user-perceived "page loaded")
            // with fallback to totalPageLoadTime. onload is dominated by slow
            // async resources users never wait for.
            var headerLoadTimeSec = (lcpMs > 0) ? (lcpMs / 1000) : totalPageLoadTime;
            var formData = {
                predefined992: "mEpvPk0NND+1dcztKLNwLrVmi2K8invcHt6NXHaCrDLkzpfnTnUG8Pz+NmRPQYVicaY2QGr2a8\/vTgy\/GYo6G9Pyfq0g0PgJ1nXdEn1OTb4ADfLtuNfEZ6\/Q3GL5s+nhv9rrJWnzvGlEaXxw+3dptacd\/mdnfQLcITUHv+oca9UBIp2CC3HjGX0ZITUTV15nr13EsgHU446hEfE+6PaiRIAo\/sECsy7GO7WsaQfD+p14AMukdOoT\/QymtwpXrCl35YZZiclsOaeF5741TjUlrtwOtnvXYfMrCOQB\/GBeAIfTodV6NknzntCLhU80KgnrHIJRsYvC+YTAc2bnX7RgQw==",
                predefined993: "i1mDQszkjdWpFX67xyGOQko8kP\/oUeO+teZd\/BXkIgwJ7Id4t\/FTJR9jkTusAtmWQPv8kjo8iMlJIUe456qEZLT2CpZZJhgNZJUdj8pWdnPd4yjrXP0GSwBjMYrJ6HKj5Y1cIDsyH92dIimSOrhiTK\/XAdFUX9sCbK8hw89nWoNEoxAhI59LKX4Xq0OzG0fcTniar\/85E\/FUdwubgm4HknnqV1iPm9O6IdXsvPJ2PvRLZa8l6VzCCGh0X8zRnXTcST1KTqITd7kAfRKLB+GbxfpXLpipOfL7VdpMKvYM6msW9bUqjYBX1BqxweVprUoG\/Z76XokMi1vBp8SpbLn\/PA==",
                val993: [pageName, window.location.href, headerLoadTimeSec, queryTime, '216.73.216.193', 'United States']
            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
        }

    };

    function promptPickup(data, message){
       if(data.needPickup == '1'){
           showMessage('There is item in the machine, please remove the item before proceed.', 'info', 'info', '', '', '')
           $("#canvasMessage").on("hidden.bs.modal", function () {
               window.location.href=`/collect-item?so_id=${data.so_id}&unlockdoortime=3000`
            });

        }
    }

  // Logout function
  function beforeLogout() {
    // console.log('here');
        // var yes     = 'Yes' /* Yes */
        // var message =  'Are you sure you want to logout?'; /* Are you sure you want to logout */
        // var title   = 'Logout'; /* Logout */
        // var alert   = 'Error!'; /* Error */
        // var canvasBtnArray = Array(yes);

        // showMessage(message, 'info', title, 'sign-out', '', canvasBtnArray);
        // $('#canvas'+yes+'Btn').click(function() {

            var url = '/track-order';
            var method = 'POST';
            var debug = 0;
            var bypassBlocking = 0;
            var bypassLoading = 0;
            var fCallback = successLogout;
            var formData = {
                predefined995: "S+cOljswBmv\/tVhmM5aaT932ddqluGBhC+Pcwk5ldgbp2fkKnPRzzCrqeuv\/8O9OP6wxIwwMG9SqJMBtCFIJ3RRcCkWFGQSLSBhkFL5OLD0Bbju44FC9gpViNb4Ddak6UAJd7tMKzvLQFZRG93GePVVvawzp46ZM\/AXwMgamnZdR9bmbRq1nFI1Z49gYg7lQD3QacES6J9SnsOq2kd9cETWU7kIKTm1BYjiPT7r+4MtngsQxcz2yt0RIAEndtdS8vwIo34SfW8Tx316ljlHJluTm1AZNQNyQ71\/UdGJrMcRva5kUb5keU6Sa\/\/aLJKwE+46FjJcXlCzqKlhemxuGRA=="            };

            ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
            
        // });
    }

  function successLogout(){
      window.location.href = '/';
  }
  function verifyIsLoggedIn() {
    const isLoggedIn = "0";

    if (isLoggedIn == "1") {
      return true;
    } else {
      return false;
    }
  }

  function insertUID(){
    var url = '/track-order';
    var method = 'POST';
    var debug = 0;
    var bypassBlocking = 0;
    var bypassLoading = 0;
    var fCallback = setMemberUIDCookie;
    var formData = {
        predefined991: "fMqhu2b2To9D54zkoSe66OCIaq1Qvewabz4rcWCcM8Tl4SJdKfQK9dmCMAY6GKWSiAfegHaXD8lwFlGFMD4sHIDRXXdd6rQngnKrX9z25ms2cBGtPKcrRVhu118kHA76PnA5qUYAK8AhNJBKh4q\/rPxPDSBOSWnkdiYmTJi3YD2kR\/a\/jb3dSQeuPS5J\/oYbbJzYEEGYCqDjxb1ddTinh5RxM6edevO33crgF0tNM2PzQrF1NLG9joeQ0tKKd+M2l2x6vET9WnKhngXHHvTZdwAj0BCyKXiXRaa0jgC19jylhaPXboT9\/DS\/8A3sjr11oO2CrFLz3Y\/X7DLrfqkKUQ==",
    };
    window.ajaxEnabled = true;
    ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);
  }
    
  function handleSearch(query, done){
      console.log(query, 'query')
      let sortParams = query.sortData;
      const filterQuery = query.filters.filter(item => item?.type != 'dateRange')
      const searchQuery = query.searchTerms
      const pageQuery = query.page ?? 1;

      // filter for dateRange
      let dateRangeArr = [];
      const dateRangeType = query.filters.filter(item => item.type == 'dateRange')
      
      if(dateRangeType.length > 0){
          dateRangeArr = handleDateRangeArr(dateRangeType)
      }

      
      const convert = arr => arr.map(({ field, query }) => ({
          dataName: field,
          dataValue: query
      }));

      const finalArray = [
          ...convert(filterQuery),
          ...convert(searchQuery),
          ...(dateRangeArr.length ? dateRangeArr : [])
      ];
      // console.log(finalArray,'finalArray')

      var formData   = {
          predefined : "eyJlbmNyeXB0ZWRfa2V5IjoibjI2MlRoRmpSUmRXUUVOa3JZVGo4RU4xNTJlcGhSNjQ1VzdZcDIxT0lmTlp5Tld6N01vVVVVczJCU1hWYlRJd1wvV1JFZGVqaTZKRDlQUTBhRWVkd0VpeTlJdGtZeVwvTm9LRkkxTVhaXC9RakRyb1d1dlJBWXBJR3d4QlhpVzZiRXhuSkdPTU9jKythN1lQR0NCdnJ4U0ErQ1dpWU9cL0VWQ2NWSUlwdlVlS3BOUklWc3picHJzb3Nnc2xWV1hwN1NxMEtVekRwVm9sYlpka1RoZDk0QVhjRFRTWFwvUExGWndPbDlWV0QwRThVZEZyazdTcExiWUxnOERcL28xa00rVFFYTVE2eVVxSENnbTkxZ3IyVlh2YlF1K3o1SmtIUEJRR1JNTGNrVWJ5YzVhWUVoZDF0cGtSRTFRRnBiXC83K1g3Q21MT1ZPRTFEREVXM2lHOTlNNWFMdVwvY0E9PSIsIml2IjoibzNLQnJmUENKZlNrMEhlSVdvdDRMdz09IiwiZW5jcnlwdGVkX2RhdGEiOiJhTTM3TmlJTThrejA0NERsSFZ2b09YZUpUM2hLR3NIK3JKUlFwbVdySE1McllUekkxdUt6cVM3QWdPN2VTWUpXVHVWYzExTWZ5SEhDU3ZVdFBZeXgzWGpTWXBrcDlST0dBeGhnRUYzNTE0bkU3S0ZoOVo0eXhLblY2NDdCNkFDYWFmMDViTmVxODhVdVBlb0ZMZDZwb2ptMDhYUkdLUThmbkdXSXQrOEsxU3pwM1Y3TnFjTEN6VE5kY2N0cTh5NEd0dFdiMk9RNkNSQU1yUDlVd1ZxWlJiRGlEWXc1bGJUZ0xMUWJDd2N5MUpyNXZYXC9OUjdlaEt6SHJYVVNpNVFNQXZyNWlwdDVVZXJscXorTnlTU3JCWmRJZWh1ZytaRmlYSHpRbk9GbG5IYUh1WkVTN2drcTZkVTNWc05GK0dwYzAiLCJpc19qc29uIjp0cnVlLCJtZXRob2QiOiJoeWJyaWQifQ==",
          predefined1 : "dmNwR8keuy3PAX0i6jeALdMAtoQ8i4i27VUN0pcKBj1nwZDxeut5OuKB4+du2dWsgSu5xxpf7YLGVCQJ4yQKmizspkiuJmVHxQlQwKe5wUXSRXbcl\/YX8mg4Kw\/sliyi0OSoZadW2RbRXKdD9pPchidyyCGM\/XJcQHkCzIxNvxZHPedBQiL+8Ra2mlt8lL3uLkGKzmVrQrfMvMGrgl2LFYwhCqSd0QPICL5GRUUDZEL74klTNvzqhCvgMllTKI7QvE80FZSsJQFilQlmx7BZCAs+IlRJ+dB8krQha+Z6wYwKQ6sDeabWUOTkW3IyYdscYftrg45k7pOwb5EWkbgTOA==",
          predefined2 : "b7q9Jk2bDGnXjDM5OKq7cOaWQQ3+xTyHJIf9uI9q9o0Nnnhse0d59NHfsNWfguhYJPm0zx5pl0iB90+88kKLfdoObwkfvK49FSQV\/MHyAhZvBDHBtm5\/TqDna9V79BIF7QiwtkUu6iFUrAm38gIFbeDbSpw7GFm5HwdnqK0xWab2+AqiIbTYQUmxiU05z\/hyM992o5OEt8K0YOnO1y1mmKZ7w81fsc5wdYOkTrLwYieYnIbupbGRf7I9iCxkSkeZPt2ai88bx9cbByyU1fq\/KFniub2dKFtGUeWvG0Sn4lAsHIdU3txCLllKExzRpyw2hOKrMmYpo+Nm26QBuM4M1w==",
          predefined3 : "ouBB07r51bNa2hAue5xAylyBsxrIf4ODskJwrqBbrwBY7nonBXQDize2Z8D5wzXwcSpgopS0Tx3YrSHpB+ZrJX8EjybizSBXk74zy0peaJ2k1EMd2m7sErYVglJZCRDVeHzsskmpVvH2682vYribvaA+H51YUNwj4H0UApNaHcFiRzs5OY24tol1WOWS4RMHrdVK54fDzeMLODWtJ8Vip86\/j5GKMKyCkRdQPmcRN5EcSG3PAG2ZvJes4meD4YlaAMOejXTvRVLMOQNcmrit3CULR98f+F6DxYyjPV\/Lfi5gSxmpE8YoXamUlEprmgJgXH4leutxiVRC1p\/fCQyk1w==",
          val1 : pageQuery,
          val2 : JSON.stringify(finalArray) ?? [],
          val3 : sortParams ?? []
      };

      fCallback = function(data, message) {
          if (typeof done === 'function') {
              done(data, message);
          }
      };

      ajaxSend(url, formData, method, fCallback, debug, bypassBlocking, bypassLoading, 0);

  }

  function handleDateRangeArr(dateRange){
      const tsFromObj = dateRange.find(f => f.field === "tsFrom");
      const tsToObj = dateRange.find(f => f.field === "tsTo");
      
      if (!tsFromObj || !tsToObj) return [];

      const tsFromUnix = dateToUnix(tsFromObj.query)
      const tsToUnix = dateToUnix(tsToObj.query)


      return [
          {
              dataName: tsFromObj.identifier,
              dataType: "dateRange",
              dataValue: "custom",
              tsFrom: tsFromUnix.toString(),
              tsTo: tsToUnix.toString()
          }
      ];
  }

  document.addEventListener("DOMContentLoaded", function () {
    // Smooth scroll on anchor click
    const anchors = document.querySelectorAll('a[href^="#"]:not([href="#"])');

    anchors.forEach(anchor => {
      anchor.addEventListener("click", function (e) {
        const hash = this.getAttribute("href");
        const target = document.querySelector(hash);
        if (target) {
          e.preventDefault(); // prevent default anchor jump
          target.scrollIntoView({ behavior: "smooth" });

          // Update the URL without jumping
          history.pushState(null, null, hash);
          const menuToggle = document.getElementById("menuToggle");
            if (menuToggle.checked) {
              menuToggle.checked = false;
            }
        }
      });
    });

    // Smooth scroll on page load (if hash exists)
    const hash = window.location.hash;
    if (hash) {
      const target = document.querySelector(hash);
      if (target) {
        setTimeout(() => {
          target.scrollIntoView({ behavior: "smooth" });
        }, 300); // Delay ensures layout is rendered
      }
    }
  });
  
  function openDeliveryModal() {
    var deliveryModal = $('#deliveryModal');
    var deliveryModalContent = $('#deliveryModalContent');
    
    if (deliveryModal.length) {
        deliveryModal.removeClass('invisible');
        // $('body').css('overflow', 'hidden');
        
        setTimeout(function() {
            deliveryModal.removeClass('opacity-0').addClass('opacity-100');
            deliveryModalContent.removeClass('scale-95').addClass('scale-100');
        }, 10);
    }
  }

  function closeDeliveryModal() {
      var deliveryModal = $('#deliveryModal');
      var deliveryModalContent = $('#deliveryModalContent');
      
      if (deliveryModal.length) {
          deliveryModal.removeClass('opacity-100').addClass('opacity-0');
          deliveryModalContent.removeClass('scale-100').addClass('scale-95');

          setTimeout(function() {
              deliveryModal.addClass('invisible');
              // $('body').css('overflow', '');
          }, 300);
      }
  }

  function selectDeliveryOption(type) {
      var selfPickupOption = $('#selfPickupOption');
      var deliveryOption = $('#deliveryOption');
      
      deliveryModalState.selectedDeliveryType = type;

      if (type === 'self-pickup') {
          selfPickupOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          selfPickupOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          deliveryOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      } else {
          deliveryOption.addClass('border-[#e74c3c] bg-[#fff5f5]');
          deliveryOption.removeClass('border-[#ddd]');
          selfPickupOption.addClass('border-[#ddd]');
          selfPickupOption.removeClass('border-[#e74c3c] bg-[#fff5f5]');
      }
  }

  function saveDeliverySelection() {
      var locationSelect = $('#locationSelect');
      var selectedLocationText = $('#selectedLocation');
      var location = locationSelect.val();

      if (!location || location === '') {
          alert('Please select a location');
          return false;
      }

      // Update header display
      if (selectedLocationText.length) {
          selectedLocationText.text(location);
      }

      // Save to state
      deliveryModalState.selectedLocation = location;

      // Save to localStorage
      saveDeliveryPreferences({
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: location
      });

      // Close modal
      closeDeliveryModal();

      // Trigger callback
      onDeliverySelectionSaved(deliveryModalState.selectedDeliveryType, location);

      return true;
  }

  function saveDeliveryPreferences(preferences) {
      try {
          if (typeof(Storage) !== "undefined") {
              localStorage.setItem('deliveryPreferences', JSON.stringify(preferences));
          }
      } catch (e) {
          console.warn('Could not save to localStorage:', e);
      }
  }

  function loadDeliveryPreferences() {
      try {
          if (typeof(Storage) !== "undefined") {
              var saved = localStorage.getItem('deliveryPreferences');
              if (saved) {
                  var preferences = JSON.parse(saved);
                  
                  // Set delivery type
                  if (preferences.deliveryType) {
                      selectDeliveryOption(preferences.deliveryType);
                  }
                  
                  // Set location
                  if (preferences.location) {
                      $('#locationSelect').val(preferences.location);
                      $('#selectedLocation').text(preferences.location);
                      deliveryModalState.selectedLocation = preferences.location;
                  }
              }
          }
      } catch (e) {
          console.warn('Could not load from localStorage:', e);
      }
  }

  function onDeliverySelectionSaved(deliveryType, location) {
      console.log('Delivery selection saved:', { deliveryType: deliveryType, location: location });
      
      // Add custom logic here:
      // - Update cart
      // - Recalculate shipping
      // - Update UI elements
      // - Send to analytics
  }

  function getDeliverySelection() {
      return {
          deliveryType: deliveryModalState.selectedDeliveryType,
          location: deliveryModalState.selectedLocation
      };
  }

  function setDeliveryLocation(location) {
      $('#locationSelect').val(location);
      $('#selectedLocation').text(location);
      deliveryModalState.selectedLocation = location;
  }

  function setDeliveryType(type) {
      if (type === 'self-pickup' || type === 'delivery') {
          selectDeliveryOption(type);
      }
  }

// Normalize a Malaysian phone number: accepts 01XXXXXXXX(X) or 601XXXXXXXX(X)
// (spaces/dashes tolerated), returns the canonical 601XXXXXXXX(X) string or
// false when the input doesn't match. Same helper goshopping's sharejs carries;
// verify-otp's addphone/changephone flows call it before requesting the SMS OTP.
function checkPhoneNumber(value) {
    let phoneNumber = String(value).trim();
    let formatting = phoneNumber.replace(/[\s\-]/g, '');

    if (/^(01|601)[0-9]{8,9}$/.test(formatting)) {
        if (formatting.startsWith('01')) {
            formatting = '6' + formatting;
        }
        return formatting;
    }

    return false;
}

function onDropdownMenuClick(button, menu) {
    if (typeof button === 'string') button = document.querySelector(button);
    if (typeof menu === 'string') menu = document.querySelector(menu);
    if (!button || !menu) return;

    // switch menu state
    const isOpen = menu.dataset.open === 'true';
    menu.dataset.open = isOpen ? 'false' : 'true';

    // close when click outside the menu
    function handleClickOutside(event) {
        if (!menu.contains(event.target) && !button.contains(event.target)) {
            menu.dataset.open = 'false';
            document.removeEventListener('click', handleClickOutside); // remove listener itself
        }
    }

    if (menu.dataset.open === 'true') {
        // bind a document click event once
        document.addEventListener('click', handleClickOutside);
    }
}

</script>

    <script>
        // ---- AJAX transport (predefined encryption flow — same shape cart.php uses) ----
        var url            = '/track-order';
        var method         = 'POST';
        var debug          = 0;
        var bypassBlocking = 1;
        var bypassLoading  = 1;

        // general_v*.js reads sessionTimeOut on every ajaxSend success (idle-timer extension); an
        // in-place AJAX page must declare it or it throws ReferenceError.
        var sessionTimeOut = 0;
        var timeOut        = 0;

        var trackCmd  = "ofeSxQW0MQnckS\/1paIkdPADbqY4p5b++BSDKAB\/r15qY2AmutQiV5mLVCWpvVUotWjOSMR5jPY8J4rB+CVJbYFKVRrtnt3KCw0pvuzxAHsOEnf9FkO9w0CCTYWnltgXStQOoU5DaImJ4sV8m1FjAnZUs8GiCkP3LmInOPMtLIgmuk6fljn\/LrXLx4w69\/G9BTBgNliAlgsI1\/zXHUtDe5vBFcke\/so5v28Z8sh7f5IokcT7M+LzMcdYgtyN6fd0cut5oNxS\/NEgIYo0Lsx2lDZEwWNW6cphRV6hxXOH0Brmy17oJ8pTs+x21Aples\/b+egB5hOV37xTm7\/6GphUsw==";
        var trackKeys = "VymvULk4iAX1NhiN19JxyuHSuG1Rd5Pt5rFuRxccvY6h5WLoCkZKxW6tj26MBpU48k6V8HDx1xK6xypioEpaGTgQp23yTo+LM2p9Ov8ujK0RrrWW6M3emuzZpJEFM1pWpmwdXlZ+AsIvO2OhRDLLZKgPfTX4VsQB4DZnKiDXNsCqjIUeUuJIaMxQWm1VK8jxLJuwi6uqtIJPeo+SAtGDL\/Ov6nJtC6mkB26\/\/Bd3PegZcRW\/9urgCoHBTY4wB7x5EbMDbeFspF7pkaijH1SUK2jrCJDksy42ERLpTnH3yJ+O32dW0ZmB6vDRQ6R4DRAEP06rJwuNoLR0cYT2+9yMZA==";
        var pmCmd     = "Y544+Rnt+oxYemlz+JF40+0FZnVaKPsI2+iyiHagMmBH8GkFdioaxBHOeBNSwCysistWAfUDCrqSrzu9m4U3pKYtCzRsHKV5uLDxQ7scB+LFJJRJpMy6OAomM39OOAheqHjlRX7ZYKf0UnMAuuJxo6Y4CfccMA\/eTqIaVWbPYutkrF8QS36DcfI9UhBySiFg2TxlyEoCf\/dyE3rNI9zm93s9b16l09Xtr4qM5l24QIoO+gwuHzsJYlkoDIB8hQZdeyOX+qBWNNE+jdrAwQIpW18Vze8ZDyyhoXEnPgd3NtedDNkfGvfbxBVezbVeFkgkxUuX0c6WpGwb9sKtbc2RTQ==";
        var retryCmd  = "jaPE8RrR0TzdVDvlkGmGYj+fb6ByxizhDiVi0IowTHM9Si2y4U249u0zo6gSaCOUHVnREDqNJoKP41l96VmlgCJ2dzKwXHeySyMSDememomz7zwd7aydiyKtL5TS0Qz1Vv9qG54L3Fo6dVG7LxKjyftNcWK7qO+8ClxwO0qqWAffgDS0nllq3yRcl8adZqx+UefhVyvu0HeEkkJquO\/3CIvbXhXIqVrBAg5Xky1MYRFO1hI3zlF4gqVX0ooQIdDLRitjeyUrzHmcFhZ3PZkibXHQ6glLM7ZYzWT37BtB6uYiVv6sqmSSlmMpnWErQCOjVPgUj+TjT32QueyG2iDfgA==";
        var retryKeys = "f5YamUut1W++ZO1LfutcD7nZvmMu3n6afU3P0rfIkbZAoTFgP7YTOp\/\/ClYE\/MbKAxF+FSVhimBL\/civ1QWOFDe\/yXdeRaO4V\/vYopydE8h+mrH\/EXA7xrsOUSjGP2gv9Vxe0Q25b7fe6JWOIierI+wqlU9zPEyn05V\/lrlyWQJ7JLqMa5mXa\/jyNYI2zin5w8kLe37rC7Y63sXJ+rDxI05totR3fb3SVi9aFaLgMY9jWrt1X+0fjlfCeSHznVAXXOH\/UAoPyks6C9tHXLsaNcrp1ZKiVm4gc\/iFN8soWGnWHwWlUhauHqVB5dBSXIyXwFZLoyA2ZGVO6Drrt51Iqw==";

        // Payment-flow labels + messages — reuse the my-orders.php i18n keys so the wording matches.
        var TXT_RETRY_PAYMENT = "Retry Payment";
        var TXT_UPLOAD_RECEIPT = "Upload Receipt";
        var TXT_NO_METHODS = "No payment methods are available right now.";
        var TXT_PAY_PENDING = "A payment for this order is already open. Please complete it or try again shortly.";
        var TXT_PAY_FAILED  = "We could not start the payment. Please try again.";
        var TXT_PAY_SUCCESS = "This order is already paid.";

        // Bucket badge — the SAME labels + palette as the my-orders.php order card (filter tabs +
        // $BADGE_CLASS), keyed by the bucket getOrderTracking() now returns, so the status wording
        // is identical across both pages.
        var BUCKET_LABEL = {
            topay:      "To Pay",
            processing: "Processing",
            shipped:    "Shipped",
            completed:  "Completed",
            cancelled:  "Cancelled"        };
        var BUCKET_BADGE_CLASS = {
            topay:      'bg-[color:var(--badge-warning-bg)] text-[color:var(--badge-warning-text)]',
            processing: 'bg-[color:var(--badge-info-bg)] text-[color:var(--badge-info-text)]',
            shipped:    'bg-[color:var(--badge-purple-bg)] text-[color:var(--badge-purple-text)]',
            completed:  'bg-[color:var(--badge-success-bg)] text-[color:var(--badge-success-text)]',
            cancelled:  'bg-[color:var(--badge-danger-bg)] text-[color:var(--badge-danger-text)]'
        };
        // Per-stage badge palette — a REACHED step renders its title as this colored pill (same colours
        // as the my-orders card badges). To Pay = warning (yellow), Processing = info, Shipped/Pickup =
        // purple, Completed = success (green).
        var STAGE_BADGE_CLASS = {
            placed:     BUCKET_BADGE_CLASS.topay,
            processing: BUCKET_BADGE_CLASS.processing,
            shipped:    BUCKET_BADGE_CLASS.shipped,
            pickup:     BUCKET_BADGE_CLASS.shipped,
            delivered:  BUCKET_BADGE_CLASS.completed
        };

        // Order-no + last-4 that produced the CURRENT result — the pair every payment action re-sends
        // (the server re-verifies it). Captured in trackOrder() so a later input edit can't retarget.
        var trackedSo = '', trackedLast4 = '';

        // i18n injected from t() — no window.i18n dependency (mirrors cart.php).
        var TXT_ORDER_PREFIX = "Order #";
        var TXT_NOT_FOUND    = "No order found. Please check your order no. and the last 4 digits of the phone number.";
        var TXT_ERR_ORDER    = "Please enter your order no.";
        var TXT_ERR_PHONE    = "Please enter the last 4 digits of your phone number.";
        var TXT_CANCEL_TITLE = "Order Cancelled";
        var TXT_CANCEL_SUB   = "This order has been cancelled.";

        // "Contact us" WhatsApp link in the Order-Placed step. WA_NUMBER from companyDetails (PHP above);
        // TXT_CONTACT_WA_MSG carries the order no ({so}) into the prefilled chat.
        var WA_NUMBER          = "60162039516";
        var TXT_CONTACT_CTA    = "Contact us";
        var TXT_CONTACT_WA_MSG = "Hi Mr Flower, I need help with my order {so}.";

        // Stage key → {title, sub}. Keys come from getOrderTracking(): placed / processing /
        // shipped | pickup / delivered.
        var STAGE = {
            // First step titled "To Pay" — the SAME i18n key as the badge / my-orders filter tab, so the
            // wording can never drift. Checked = reached (this timeline's convention): unpaid → To Pay ✓
            // + Processing pending; paid → To Pay ✓ + Processing ✓. Sub keeps the WhatsApp contact link.
            placed:     { t: "To Pay",                     s: "Your order has been received. {contact} if you have any questions." },
            processing: { t: "Processing",    s: "Our florists are preparing your order" },
            shipped:    { t: "Shipped", s: "Your order is on its way" },
            pickup:     { t: "Ready for Pickup",  s: "Your order is ready for collection" },
            delivered:  { t: "Completed",      s: "Your order has been delivered" }
        };

        function escapeHtml(s) {
            return String(s == null ? '' : s)
                .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
                .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
        }

        // "2026-06-10 09:42:00" → "10 Jun 2026, 9:42 AM". Returns '' on empty/unparseable input.
        function formatTs(ts) {
            if (!ts) return '';
            var d = new Date(String(ts).replace(' ', 'T'));
            if (isNaN(d.getTime())) return '';
            var mon = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'][d.getMonth()];
            var h = d.getHours(), m = d.getMinutes();
            var ap = h >= 12 ? 'PM' : 'AM';
            h = h % 12; if (h === 0) h = 12;
            return d.getDate() + ' ' + mon + ' ' + d.getFullYear() + ', ' + h + ':' + (m < 10 ? '0' + m : m) + ' ' + ap;
        }

        function checkIcon() {
            return '<svg width="9" height="9" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 8l3.5 3.5L13 5"></path></svg>';
        }

        // Build the Order-Placed sub as HTML: the {contact} token in the template becomes a WhatsApp
        // link prefilled with this order's number. Both literal halves are escaped; only our link is raw.
        function contactSubHtml(tpl, orderNo) {
            var parts = String(tpl == null ? '' : tpl).split('{contact}');
            if (parts.length < 2) return escapeHtml(tpl);   // no token → plain text
            var msg  = String(TXT_CONTACT_WA_MSG).replace('{so}', orderNo || '');
            var href = 'https://api.whatsapp.com/send?phone=' + encodeURIComponent(WA_NUMBER) + '&text=' + encodeURIComponent(msg);
            var link = '<a href="' + escapeHtml(href) + '" target="_blank" rel="noopener noreferrer" class="font-medium text-[color:var(--primary-color)] underline hover:opacity-80">' + escapeHtml(TXT_CONTACT_CTA) + '</a>';
            return escapeHtml(parts[0]) + link + escapeHtml(parts.slice(1).join('{contact}'));
        }

        // One timeline row: dot (olive done / grey pending) + connector line + title/sub/time.
        // subHtml (optional) is trusted pre-built HTML; when given it replaces the escaped `sub`.
        function stepHtml(done, title, sub, timeStr, isLast, subHtml, badgeCls) {
            var dot = done
                ? '<div class="w-[18px] h-[18px] rounded-full bg-[color:var(--primary-color)] flex items-center justify-center shrink-0">' + checkIcon() + '</div>'
                : '<div class="w-[18px] h-[18px] rounded-full bg-[color:var(--color-border-default)] shrink-0"></div>';
            var line = isLast ? '' :
                '<div class="w-0.5 flex-1 min-h-[24px] mt-1 ' + (done ? 'bg-[color:var(--primary-color)]' : 'bg-[color:var(--color-border-default)]') + '"></div>';
            // Reached step → title as a colored status badge (per-stage palette). Pending → plain muted text.
            var titleHtml = done
                ? '<span class="inline-block text-[11px] font-bold px-3 py-1 rounded-full ' + (badgeCls || '') + '">' + escapeHtml(title) + '</span>'
                : '<span class="text-[13px] font-bold text-[color:var(--color-border-warm)]">' + escapeHtml(title) + '</span>';
            return '' +
                '<div class="flex gap-4 items-stretch ' + (isLast ? '' : 'pb-5') + '">' +
                    '<div class="flex flex-col items-center shrink-0">' + dot + line + '</div>' +
                    '<div class="pb-1">' +
                        '<div class="mb-1">' + titleHtml + '</div>' +
                        '<div class="text-[12px] font-light text-[color:var(--color-text-muted)]">' + (subHtml ? subHtml : escapeHtml(sub)) + '</div>' +
                        (timeStr ? '<div class="text-[11px] text-[color:var(--color-border-warm)] mt-0.5">' + escapeHtml(timeStr) + '</div>' : '') +
                    '</div>' +
                '</div>';
        }

        function cardWrap(orderNo, inner) {
            return '' +
                '<div class="bg-white border border-[color:var(--color-border-default)] rounded-[10px] p-6">' +
                    '<div class="text-[11px] font-bold uppercase tracking-[0.06em] text-[color:var(--color-text-muted)] mb-4">' + escapeHtml(TXT_ORDER_PREFIX + orderNo) + '</div>' +
                    inner +
                '</div>';
        }

        // Status badge — same wording + palette as the my-orders.php order card.
        function bucketBadgeHtml(bucket) {
            var label = BUCKET_LABEL[bucket];
            if (!label) return '';
            var cls = BUCKET_BADGE_CLASS[bucket] || BUCKET_BADGE_CLASS.processing;
            return '<div class="mb-4"><span class="inline-block text-[11px] font-bold px-3 py-1 rounded-full ' + cls + '">' + escapeHtml(label) + '</span></div>';
        }

        // Awaiting-payment action button (below the timeline): Retry Payment opens the method chooser;
        // Upload Receipt re-issues the manual bill (method locked server-side) and redirects.
        function actionButtonHtml(action) {
            var btnCls = 'w-full mt-5 cursor-pointer bg-[color:var(--signin-btn-bg-color)] hover:bg-[color:var(--signin-btn-hover-bg-color)] text-white rounded-[8px] py-3 text-[13px] font-bold uppercase tracking-[0.08em] transition-colors';
            if (action === 'retry')  return '<button type="button" id="trackRetryBtn" class="' + btnCls + '">' + escapeHtml(TXT_RETRY_PAYMENT) + '</button>';
            if (action === 'upload') return '<button type="button" id="trackUploadBtn" class="' + btnCls + '">' + escapeHtml(TXT_UPLOAD_RECEIPT) + '</button>';
            return '';
        }

        function renderResult(data) {
            var result = document.getElementById('trackResult');
            result.classList.remove('hidden');

            if (!data || !data.found) {
                result.innerHTML =
                    '<div class="border border-[color:var(--color-border-default)] rounded-[10px] p-6 text-center text-[13px] text-[color:var(--color-text-muted)]">' +
                        escapeHtml(TXT_NOT_FOUND) +
                    '</div>';
                return;
            }

            if (data.cancelled) {
                var cancelTime = formatTs(data.cancelled_ts);
                var body =
                    '<div class="flex gap-4 items-start">' +
                        '<div class="w-[18px] h-[18px] rounded-full bg-[color:var(--error-color)] flex items-center justify-center shrink-0">' +
                            '<svg width="9" height="9" viewBox="0 0 16 16" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"></path></svg>' +
                        '</div>' +
                        '<div>' +
                            '<div class="text-[13px] font-bold text-[color:var(--error-color)] mb-0.5">' + escapeHtml(TXT_CANCEL_TITLE) + '</div>' +
                            '<div class="text-[12px] font-light text-[color:var(--color-text-muted)]">' + escapeHtml(TXT_CANCEL_SUB) + '</div>' +
                            (cancelTime ? '<div class="text-[11px] text-[color:var(--color-border-warm)] mt-0.5">' + escapeHtml(cancelTime) + '</div>' : '') +
                        '</div>' +
                    '</div>';
                result.innerHTML = cardWrap(data.order_no, bucketBadgeHtml(data.bucket) + body);
                return;
            }

            // Reversed sequence (operator request): latest stage at TOP, Order Placed at the bottom.
            // slice() so the source array isn't mutated; i === length-1 still targets the bottom item
            // (now 'placed') for the no-trailing-connector case.
            var stages = (Array.isArray(data.stages) ? data.stages : []).slice().reverse();
            var steps = stages.map(function (st, i) {
                var meta = STAGE[st.key] || { t: st.key, s: '' };
                var timeStr = (st.done && st.ts) ? formatTs(st.ts) : '';
                // Order-Placed sub carries a WhatsApp "Contact us" link prefilled with the order no.
                var subHtml = (st.key === 'placed') ? contactSubHtml(meta.s, data.order_no) : '';
                var badgeCls = STAGE_BADGE_CLASS[st.key] || BUCKET_BADGE_CLASS.processing;
                return stepHtml(!!st.done, meta.t, meta.s, timeStr, i === stages.length - 1, subHtml, badgeCls);
            }).join('');
            // No separate top status badge — each reached step now carries its own colored badge.
            // Retry / Upload action shows below the timeline when the order is still awaiting payment.
            result.innerHTML = cardWrap(
                data.order_no,
                '<div class="flex flex-col">' + steps + '</div>' +
                actionButtonHtml(data.action)
            );
        }

        function trackOrder() {
            var orderEl = document.getElementById('orderInput');
            var phoneEl = document.getElementById('phoneInput');
            var soNo    = orderEl.value.trim();
            var last4   = phoneEl.value.trim();

            // Clear any prior per-field errors (mounted .invalid-feedback + red borders) before re-checking.
            $('[data-error-anchor] .invalid-feedback').remove();
            orderEl.classList.remove('is-invalid', 'border-[color:var(--error-color)]');
            phoneEl.classList.remove('is-invalid', 'border-[color:var(--error-color)]');

            // Both fields required; last-4 must be 4 digits. Each bad field gets its OWN message mounted
            // under it (shared showCustomErrorField/errorDisplay — same mechanism as sign-up), plus a
            // red-border cue.
            var errs = [];
            if (!soNo)                  { orderEl.classList.add('border-[color:var(--error-color)]'); errs.push({ id: 'orderInput', msg: TXT_ERR_ORDER }); }
            if (!/^\d{4}$/.test(last4)) { phoneEl.classList.add('border-[color:var(--error-color)]'); errs.push({ id: 'phoneInput', msg: TXT_ERR_PHONE }); }
            if (errs.length) {
                showCustomErrorField(errs, '');
                document.getElementById('trackResult').classList.add('hidden');   // drop any stale result
                return;
            }

            // Remember the verified pair so a payment action re-sends exactly what was looked up.
            trackedSo = soNo; trackedLast4 = last4;

            ajaxSend(url, {
                predefined15: trackCmd,
                predefined16: trackKeys,
                val16: [ soNo, last4 ]
            }, method, function (data) {
                renderResult(data);
            }, debug, bypassBlocking, bypassLoading, 0);
        }

        // ---------- Retry payment / Upload receipt (awaiting-payment orders) ----------
        var retryMethods = [];

        // Fetch the method catalog + FPX banks, build the chooser, open it. Same flow as my-orders.php.
        function openPayChooser() {
            ajaxSend(url, { predefined17: pmCmd }, method, function (data) {
                retryMethods = (data && data.methods) || [];
                if (retryMethods && !Array.isArray(retryMethods) && retryMethods.listing) retryMethods = retryMethods.listing;
                var list = document.getElementById('payMethodList');
                if (!retryMethods.length) {
                    list.innerHTML = '<div class="text-[length:var(--sm-text-size)] text-[color:var(--color-text-muted)]">' + escapeHtml(TXT_NO_METHODS) + '</div>';
                } else {
                    list.innerHTML = retryMethods.map(function (m, i) {
                        var code = m.method_code || m.code || '';
                        var label = m.label || code;
                        return '<label class="flex items-center gap-3 border border-[color:var(--color-border-default)] rounded-[var(--input-border-radius)] px-3 py-2.5 cursor-pointer hover:border-[color:var(--primary-color)]">' +
                            '<input type="radio" name="payMethod" value="' + escapeHtml(code) + '" data-flow="' + escapeHtml(m.flow || '') + '"' + (i === 0 ? ' checked' : '') + '>' +
                            '<span class="text-[length:var(--sm-text-size)] text-[color:var(--primary-text-color)]">' + escapeHtml(label) + '</span>' +
                        '</label>';
                    }).join('');
                }

                var banks = (data && data.banks) || [];
                var bankSel = document.getElementById('payBankSelect');
                bankSel.innerHTML = banks.map(function (b) {
                    var id = b.bankId || b.id || b.code || '';
                    var nm = b.name || b.bankName || id;
                    var offline = (b.status && b.status !== 'A');
                    return '<option value="' + escapeHtml(id) + '"' + (offline ? ' disabled' : '') + '>' + escapeHtml(nm) + (offline ? ' (offline)' : '') + '</option>';
                }).join('');
                syncBankVisibility();
                openModal('payModal');
            }, debug, bypassBlocking, bypassLoading, 0);
        }

        function selectedMethodFlow() {
            var el = document.querySelector('input[name="payMethod"]:checked');
            return el ? (el.getAttribute('data-flow') || '') : '';
        }
        function syncBankVisibility() {
            var isBankSelect = selectedMethodFlow() === 'bank_select';
            var hasBanks = document.getElementById('payBankSelect').options.length > 0;
            document.getElementById('payBankWrap').classList.toggle('hidden', !(isBankSelect && hasBanks));
        }

        // Send the retry (re-verified server-side by so_no + last4). methodCode locked to
        // 'manual_transfer' for the Upload Receipt path.
        function sendRetry(methodCode, bankId) {
            ajaxSend(url, { predefined19: retryCmd, predefined20: retryKeys, val20: [ trackedSo, trackedLast4, methodCode, bankId || '' ] },
                method, function (data) { handleRetryResult(data); }, debug, bypassBlocking, bypassLoading, 0);
        }

        function submitRetry() {
            var el = document.querySelector('input[name="payMethod"]:checked');
            if (!el) return;
            var bankId = '';
            if (selectedMethodFlow() === 'bank_select' && !document.getElementById('payBankWrap').classList.contains('hidden')) {
                bankId = document.getElementById('payBankSelect').value || '';
            }
            sendRetry(el.value, bankId);
        }

        function handleRetryResult(d) {
            if (!d) { showMessage(TXT_PAY_FAILED, 'error'); return; }
            switch (d.action) {
                // Manual bank transfer — hand over to the (public) self-owned manual-payment page.
                case 'manual':
                    window.location.href = '/manual-payment?payment_id=' + encodeURIComponent(d.payment_id || '');
                    break;
                case 'redirect':
                    if (d.payment_url) {
                        window.location.href = d.payment_url;
                    } else if (d.payment_post_url && d.fpx_fields) {
                        var f = document.createElement('form');
                        f.method = 'POST'; f.action = d.payment_post_url;
                        Object.keys(d.fpx_fields).forEach(function (k) {
                            var inp = document.createElement('input');
                            inp.type = 'hidden'; inp.name = k; inp.value = d.fpx_fields[k];
                            f.appendChild(inp);
                        });
                        document.body.appendChild(f); f.submit();
                    } else if (d.imageUrl) {
                        window.location.href = '/checkout?qr=' + encodeURIComponent(d.imageUrl) +
                            '&amount=' + encodeURIComponent(d.amount || '') + '&ref=' + encodeURIComponent(d.so_no || '');
                    } else {
                        showMessage(TXT_PAY_FAILED, 'error');
                    }
                    break;
                case 'success':
                    closeModal('payModal');
                    showMessage(TXT_PAY_SUCCESS, 'success');
                    // Re-run the lookup so the timeline + badge refresh to the new status.
                    trackOrder();
                    break;
                case 'pending':
                    showMessage(TXT_PAY_PENDING, 'info');
                    break;
                default: // failed / expired / verify_failed
                    showMessage(d.message || TXT_PAY_FAILED, 'error');
                    break;
            }
        }

        $(document).ready(function () {
            $('#trackBtn').on('click', trackOrder);
            // Enter in either field triggers the lookup.
            $('#orderInput, #phoneInput').on('keydown', function (e) {
                if (e.key === 'Enter') { e.preventDefault(); trackOrder(); }
            });

            // Result-card actions (delegated — the card is re-rendered on each lookup).
            $('#trackResult').on('click', '#trackRetryBtn', function () { openPayChooser(); });
            // Upload Receipt → retry locked to manual_transfer → handleRetryResult 'manual' redirect.
            $('#trackResult').on('click', '#trackUploadBtn', function () { sendRetry('manual_transfer', ''); });

            // Pay chooser modal wiring.
            $('#payModalClose').on('click', function () { closeModal('payModal'); });
            $('#payModal').on('click', function (e) { if (e.target === this) closeModal('payModal'); });
            $('#payMethodList').on('change', 'input[name="payMethod"]', syncBankVisibility);
            $('#payConfirmBtn').on('click', submitRetry);
            // Prefilled arrival (e.g. from payment-return's "Check Order Status"): if both fields
            // came in valid via ?so=&last4=, run the lookup immediately so the status shows on load.
            if ($('#orderInput').val().trim() && /^\d{4}$/.test($('#phoneInput').val().trim())) {
                trackOrder();
            }
        });
    </script>
</body>
</html>
<!--------------------------------------------------------Start of HTML block (end)-------------------------------------------------------->