{"id":26,"date":"2026-07-05T07:19:08","date_gmt":"2026-07-05T07:19:08","guid":{"rendered":"http:\/\/localhost\/ltd\/tracking\/track-form\/"},"modified":"2026-07-05T08:34:28","modified_gmt":"2026-07-05T08:34:28","slug":"track-form","status":"publish","type":"page","link":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/","title":{"rendered":"Track"},"content":{"rendered":"\n\n    <div id=\"nhil-cargo-wrapper\" class=\"nhil-container\">\n        <header class=\"nhil-header\">\n            <div class=\"brand\">\n                <div class=\"logo\">\n                                        <img decoding=\"async\" src=\"\" style=\"margin: 0 auto;\">\n                <\/div>\n                <div>\n                    <h1 style=\"font-size: 30px;\">Nova Horizon Investment Limited<\/h1>\n                    <p class=\"lead\">Shipment tracking<\/p>\n                <\/div>\n            <\/div>\n        <\/header>\n\n        <div style=\"margin: 20px 0\">\n            <form id=\"trackForm\" class=\"form-row\">\n\n                <div class=\"input\" aria-hidden=\"false\">\n                  <label for=\"tracking_input\">Tracking Number<\/label>\n                  <input id=\"tracking_input\" name=\"tracking\" type=\"text\" placeholder=\"e.g., AWB123456789\" autocomplete=\"off\" \/>\n                <\/div>\n\n                <div>\n                    <button id=\"trackBtn\" class=\"primary-btn\" type=\"submit\">Track<\/button>\n                <\/div>\n            <\/form>\n        <\/div>\n\n        <div class=\"card\">\n            <div id=\"results-area\" class=\"results-wrapper\">\n                <div class=\"muted-msg\">Enter a tracking number and click \"Track\".<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <style>\n        :root { --p-acc: #1c1d3b; --p-mut: #6b7280; --p-suc: #16a34a; --p-dan: #8b5717; --max-width:920px; }\n        .nhil-container { width:95%; max-width:var(--max-width); margin: 0 auto; padding: 40px 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;}\n        .nhil-header { display:flex; align-items:center; gap:16px; margin-bottom:24px; }\n        .nhil-container .logo { width: 80px; height: 80px; background: transparent; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: bold; font-size: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.06) }\n        .nhil-container h1 { margin: 0; font-size: 22px; font-weight: 700; }\n        .nhil-container .card { background: #fff; border-radius: 12px; border: none; }\n        .nhil-container .form-row { display:flex; gap:12px; margin-top:18px} \n        .nhil-container .input { flex:1; display:flex; flex-direction: row; gap:8px; align-items:center; border:1px solid #e6e9ef; padding:10px 12px; border-radius:10px; background:linear-gradient(180deg, #fff, #8b571733); }\n        .nhil-container .input input { border:0; outline:0; width:80%; font-size:25px; color:#081028;font-weight: 600;background:transparent; padding:0px }\n        .nhil-container .primary-btn { background: var(--p-dan); color: #fff; border: 0; padding: 16px 16px; border-radius: 10px; font-weight: bold; cursor: pointer; }\n        .nhil-container button.primary-btn[disabled]{opacity:0.6; cursor:default}\n\n        .results-wrapper{ }\n        .nhil-container .status-bar { padding: 20px; background: #fbfdff; border-radius: 10px; margin: 25px 0; border: 1px solid #eef2ff; }\n        .status { display:flex; align-items:center; gap:12px; padding:14px; border-radius:10px; border:1px solid #8b5717; background:llinear-gradient(180deg,#8b571733,#ffffff); }\n        .nhil-container .dot { width: 12px; height: 12px; border-radius: 50%; }\n        .status-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; border-top: 1px solid #edf2f7; margin-top: 10px; padding-top: 15px; }\n        .meta-label { font-size: 11px; text-transform: uppercase; color: var(--p-mut); letter-spacing: 0.5px; font-weight: 700; }\n        .meta-value { font-size: 14px; font-weight: 600; color: var(--p-acc); }\n\n        .nhil-container .timeline { border-left: 2px solid #8b5717; margin-left: 10px; padding-left: 25px; margin-top: 30px; }\n        .nhil-container .event { position: relative; margin-bottom: 25px; }\n        .nhil-container .event::before { content: ''; position: absolute; left: -36px; top: 5px; width: 9px; height: 9px; background: #fff; border-radius: 50%; z-index: 2; border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 12px solid #8b5717;}\n        .nhil-container .event-time { font-size: 15px; color: var(--p-mut); margin-bottom: 4px; }\n        .nhil-container .event-desc { font-weight: 600; font-size: 15px; color: var(--p-acc); }\n        .msg { color: var(--p-mut); }\n        .muted-msg { text-align: center; padding: 40px 0; color: var(--p-mut);font-size:20px; }\n        .brand { display:flex; align-items:center; gap:12px; }\n        p.lead{margin:0; color:var(--muted); font-size:14px}\n        .nhil-container h1{margin:0; font-size:20px;}\n\n        .nhil-cargo {align-items: center; padding: 14px; border-radius: 10px; border: 2px solid #000; margin-bottom: 30px; }\n        .nhil-cargo { font-size: 13px; }\n        .nhil-container .cargo { display: flex; width: 100%; gap: 30px; }\n        .nhil-container .cargo .shipper , \n        .nhil-container .cargo .consignee { flex:1; }\n        .nhil-container .shipper-info, \n        .nhil-container .consignee-info { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ccc; }\n        .nhil-container .other-info{ border-top: 1px solid #ccc; border-bottom: 1px dashed #ccc; padding: 10px 0; margin: 10px 0; }\n        \n        .nhil-container table { width: 100%; border-collapse: collapse; }\n        .nhil-container th { padding: 10px 10px; text-align: left; border: 1px solid #ccc; }\n        .nhil-container td { padding: 5px 15px; text-align: left; border: 1px solid #ccc; }\n        p.title { margin: 0;}\n        .title {\n            color: var(--p-mut);\n        }\n        .arrow { padding: 0 30px;  color: #ccc; font-size: 16px; font-weight: 800;}\n        .arrow::after { content: \"\\2192\"; }\n\n        .nhil-cargo .packages { display: flex; gap: 30px; }\n        .nhil-cargo b { font-size: 22px; }\n        .nhil-cargo .routing { display: flex; flex-direction: row; margin-bottom: 15px; }\n        .current-status { display: flex; flex-direction: row; }\n        .ml-50 {  margin-left: 50px; }\n        .shipment-status { font-weight: 500; font-size: 14px; background: #8b5717; padding: 2px 20px; border-top-left-radius: 20px; border-bottom-left-radius: 0px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; color: #fff; text-transform: uppercase; }\n\n        \/* Responsive *\/\n        @media (max-width:560px){\n            .nhil-container .form-row{flex-direction:column}\n            .nhil-header{flex-direction:column; align-items:flex-start; gap:8px}\n            .nhil-container .card { padding: 20px; }\n            .nhil-cargo .routing { flex-direction: column; }\n            .nhil-container .cargo { flex-direction: column; }\n            .current-status { flex-direction: column; }\n            .nhil-container .input { flex-direction: column }\n            .arrow::after { content: \"\\2193\"; }\n            .ml-50 {  margin-left: 0px; }\n            .nhil-container .input input { text-align: center; }\n            .nhil-container .primary-btn { width: 100%; }\n        }\n    <\/style>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function() {\n        const trackForm = document.getElementById('trackForm');\n        const resultsArea = document.getElementById('results-area');\n\n        const trackingInput = document.getElementById('tracking_input');\n\n        const urlParams = new URLSearchParams(window.location.search);\n        const trackingValue = urlParams.get('tracking_no');\n\n\n        if (trackingValue) {\n            trackingInput.value = trackingValue.trim();\n            setTimeout(() => {\n                trackForm.requestSubmit(); \n            }, 100);\n        }\n\n        trackForm.addEventListener('submit', async (e) => {\n            e.preventDefault();\n            const btn = document.getElementById('trackBtn');\n            const input = document.getElementById('tracking_input');\n            \n            btn.disabled = true;\n            btn.textContent = 'Tracking...';\n            resultsArea.innerHTML = '<div class=\"muted-msg\">Loading...<\/div>';\n\n            const formData = new FormData();\n            formData.append('action', 'nhil_fetch_track');\n            formData.append('number', input.value.trim());\n\n            try {\n                const response = await fetch('http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-admin\/admin-ajax.php', {\n                    method: 'POST',\n                    body: formData\n                });\n                const res = await response.json();\n\n                if (!res.success) {\n                    resultsArea.innerHTML = `<div class=\"muted-msg\" style=\"color:var(--p-dan)\">${res.data.message}<\/div>`;\n                } else {\n                    \/\/ SLICE(1) removes the first (latest) event from the timeline list\n                    const timelineEvents = res.data.events.slice(1);\n                    let historyHtml = timelineEvents.map(ev => `\n                        <div class=\"event\">\n                            <div class=\"event-time\">Date: ${ev.date} ${ev.time} \u2014 ${ev.location}<\/div>\n                            <div class=\"desc\" style=\"font-size:20px;font-weight: 600;\">${ev.status}<\/div>\n                            <div class=\"event-desc\">${ev.remarks}<\/div>\n                        <\/div>\n                    `).join('');\n\n                    resultsArea.innerHTML = `\n                        <div class=\"nhil-cargo\">\n                            <div class=\"cargo\">\n                                <div class=\"shipper\">\n                                    <p class=\"title\">\n                                        Shipper Information\n                                    <\/p>\n                                    <div class=\"shipper-info\">\n                                        <p>\n                                            <b>${res.data.shipper_name}<\/b> <br> \n                                            ${res.data.shipper_address} <br> \n                                            ${res.data.shipper_phone} ${res.data.shipper_phone !== '' ? '<br> ' : ''}\n                                            ${res.data.shipper_email} ${res.data.shipper_email !== '' ? '<br> ' : ''}\n                                        <\/p>\n                                    <\/div>\n                                <\/div>\n                                <div class=\"consignee\">\n                                    <p class=\"title\">\n                                        Receiver Information\n                                    <\/p>\n                                    <div class=\"consignee-info\">\n                                        <p>\n                                            <b>${res.data.receiver_name}<\/b> <br> \n                                            ${res.data.receiver_address} <br> \n                                            ${res.data.receiver_phone} ${res.data.receiver_phone !== '' ? '<br> ' : ''}\n                                            ${res.data.receiver_email} ${res.data.receiver_email !== '' ? '<br> ' : ''}\n                                        <\/p>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"other-info\">\n                                <p>${res.data.shipment_comments}<\/p>\n                            <\/div>\n                            <div class=\"routing\">\n                                <span>\n                                    <span class=\"title\">Origin:<\/span>\n                                    <b>${res.data.shipment_origin}<\/b>\n                                <\/span>\n\n                                <span class=\"arrow\"><\/span>\n\n                                <span>\n                                    <span class=\"title\">Destination:<\/span>\n                                    <b>${res.data.shipment_destination}<\/b>\n                                <\/span>\n                                <br>\n                            <\/div>\n\n                            <div class=\"packages\">\n                                <div>\n                                    <span class=\"title\">Package:<\/span>\n                                    <b>${res.data.shipment_packages}<\/b>\n                                <\/div>\n\n                                <div>\n                                    Qty: \n                                    <b>1<\/b>\n                                <\/div>\n\n                                <div>\n                                    <span class=\"title\">Product:<\/span>\n                                    <b>${res.data.shipment_product}<\/b>\n                                <\/div>\n\n                                <div>\n                                    Weight: <b>${res.data.shipment_weight}<\/b> \n                                <\/div>\n                            <\/div>\n\n                            <div>\n                                <span class=\"title\">Declared value:<\/span>\n                                 <b>${res.data.shipment_total_freight}<\/b>\n                            <\/div>\n                            <div>\n                                <span class=\"title\">Expected Delivery Date:<\/span>\n                                <b>${res.data.delivery_date}<\/b>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"status\">\n                            <div class=\"dot\" style=\"background:${res.data.status === 'Delivered' ? 'var(--p-suc)' : 'var(--p-acc)'}\"><\/div>\n                            <div class=\"info\">\n                                <div class=\"shipment-status\">Shipment Status:  ${res.data.status}<\/div>\n                                <div class=\"muted\" style=\"font-size:15px;\">\n                                    Location: <b>${res.data.location || '-'}<\/b> <br>\n                                    <span class=\"current-status\">\n                                        <span>\n                                            <span style=\"font-size:12;\">Date:<\/span> ${res.data.date} \n                                        <\/span>\n                                        <span>\n                                            <span style=\"font-size:12;\" class=\"ml-50\">Time:<\/span> ${res.data.time}\n                                        <\/span>\n                                    <\/span>\n                                <\/div>\n                                <div class=\"muted\" style=\"font-size:15px; color: #0000FF\"><b>${res.data.remarks}<\/b><\/div>\n                            <\/div>\n                        <\/div>\n                        <div class=\"timeline\">${historyHtml || '<div class=\"muted-msg\">No history records found.<\/div>'}<\/div>\n                    `;\n                }\n            } catch (err) {\n                resultsArea.innerHTML = '<div class=\"muted-msg\">Error loading data.<\/div>';\n            } finally {\n                btn.disabled = false;\n                btn.textContent = 'Track';\n            }\n        });\n    });\n    <\/script>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":1,"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":33,"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/pages\/26\/revisions\/33"}],"wp:attachment":[{"href":"http:\/\/novahorizoninvestmentlimited.com\/tracking\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}