{"id":16536,"date":"2026-08-18T11:06:39","date_gmt":"2026-08-18T03:06:39","guid":{"rendered":"https:\/\/tmmotoworld.com\/?page_id=16536"},"modified":"2026-08-18T11:12:16","modified_gmt":"2026-08-18T03:12:16","slug":"test-ride-form","status":"publish","type":"page","link":"https:\/\/tmmotoworld.com\/ms\/test-ride-form\/","title":{"rendered":"Test Ride Form"},"content":{"rendered":"\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Barlow+Condensed:wght@600;700;800&#038;family=Barlow:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n<style>\n#tmtr{\n    \/* TM Motoworld brand palette *\/\n    --navy:#002F79;\n    --navy-dark:#00224F;\n    --gold:#D39D00;\n    --gold-dark:#B08300;\n    --gold-soft:#FFF6E1;\n    --ink:#152238;\n    --paper:#F6F8FB;\n    --card:#FFFFFF;\n    --steel:#5F6B80;\n    --line:#DCE3EC;\n    --green:#1F8A4C;\n    --danger:#C0261C;\n    --danger-soft:#FFF4F3;\n    --amber:#FFF6E1;\n    --radius:14px;\n    --font-display:\"Barlow Condensed\",\"Arial Narrow\",Arial,sans-serif;\n    --font-body:\"Barlow\",-apple-system,\"Segoe UI\",Arial,sans-serif;\n  }\n#tmtr,#tmtr *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}\n#tmtr{background:var(--paper)}\n#tmtr{font-family:var(--font-body);color:var(--ink);font-size:16px;line-height:1.45}\n#tmtr .wrap{max-width:480px;margin:0 auto;padding-bottom:56px}\n\n\/* ---------- Header ---------- *\/\n#tmtr header{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:22px 20px 26px}\n#tmtr header::after{\n    content:\"\";position:absolute;right:-30px;top:0;bottom:0;width:120px;\n    background:repeating-linear-gradient(-55deg,var(--gold) 0 14px,transparent 14px 28px);\n    opacity:.85;\n  }\n#tmtr .brand{font-family:var(--font-display);font-weight:800;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:#fff}\n#tmtr .brand em{color:var(--gold);font-style:normal}\n#tmtr h1{font-family:var(--font-display);font-weight:800;font-size:38px;line-height:1;letter-spacing:.01em;text-transform:uppercase;margin-top:8px}\n#tmtr .branch-pill{\n    display:inline-flex;align-items:center;gap:7px;margin-top:12px;\n    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);\n    padding:6px 14px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.04em;position:relative;z-index:1\n  }\n#tmtr .branch-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--gold)}\n\n\/* Demo branch picker (only when no ?branch= param) *\/\n#tmtr .demo-picker{background:var(--gold-soft);border-bottom:1px solid #EFDCB0;padding:12px 20px}\n#tmtr .demo-picker p{font-size:12px;color:#8A6A12;font-weight:600;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px}\n#tmtr .demo-chips{display:flex;gap:8px;flex-wrap:wrap}\n#tmtr .chip{\n    border:1.5px solid var(--line);background:#fff;border-radius:99px;\n    padding:7px 14px;font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--steel);cursor:pointer\n  }\n#tmtr .chip.on{border-color:var(--navy);color:var(--navy);background:#EDF2FB}\n\n\/* ---------- Gear stepper ---------- *\/\n#tmtr .gears{display:flex;align-items:center;gap:0;padding:20px 20px 4px}\n#tmtr .gear{display:flex;flex-direction:column;align-items:center;gap:5px;flex:0 0 auto}\n#tmtr .gear .num{\n    width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:#fff;\n    display:flex;align-items:center;justify-content:center;\n    font-family:var(--font-display);font-weight:800;font-size:19px;color:var(--steel)\n  }\n#tmtr .gear .lbl{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--steel)}\n#tmtr .gear.done .num{background:var(--navy);border-color:var(--navy);color:#fff}\n#tmtr .gear.now .num{background:var(--gold);border-color:var(--gold-dark);color:var(--navy)}\n#tmtr .gear.now .lbl,#tmtr .gear.done .lbl{color:var(--navy)}\n#tmtr .gear-link{flex:1;height:2px;background:var(--line);margin:0 6px 18px}\n#tmtr .gear-link.done{background:var(--navy)}\n\n\/* ---------- Sections ---------- *\/\n#tmtr section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin:14px 16px 0;padding:20px 18px}\n#tmtr .sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}\n#tmtr .sec-head h2{font-family:var(--font-display);font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.02em}\n#tmtr .sec-head span{font-size:12.5px;color:var(--steel);font-weight:500}\n#tmtr label{display:block;font-size:13px;font-weight:700;letter-spacing:.03em;margin:14px 0 6px;color:var(--ink)}\n#tmtr label small{font-weight:500;color:var(--steel)}\n#tmtr input[type=text],#tmtr input[type=tel],#tmtr select{\n    width:100%;padding:13px 14px;font-family:var(--font-body);font-size:16px;color:var(--ink);\n    border:1.5px solid var(--line);border-radius:10px;background:#fff;appearance:none;outline:none\n  }\n#tmtr input:focus,#tmtr select:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(0,47,121,.12)}\n#tmtr input.err,#tmtr select.err,#tmtr .sig-box.err{border-color:var(--danger)!important;background:var(--danger-soft)}\n#tmtr .field-err{display:none;font-size:12.5px;color:var(--danger);font-weight:600;margin-top:5px}\n#tmtr .err + .field-err,#tmtr .field-err.show{display:block}\n#tmtr .select-holder{position:relative}\n#tmtr .select-holder::after{\n    content:\"\";position:absolute;right:15px;top:50%;transform:translateY(-30%) rotate(45deg);\n    width:8px;height:8px;border-right:2px solid var(--steel);border-bottom:2px solid var(--steel);pointer-events:none\n  }\n#tmtr .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}\n#tmtr .risk-note{\n    margin-top:16px;background:var(--gold-soft);border:1.5px solid #EFD9A0;border-left:5px solid var(--gold);\n    border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.55;color:#5E4A10\n  }\n#tmtr .risk-note b{display:block;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:#8A6A12;margin-bottom:4px}\n#tmtr .risk-note span{color:#83702F;font-size:12.5px}\n\n\/* ---------- Route map ---------- *\/\n#tmtr .route-wrap{margin-top:4px}\n#tmtr .route-img{\n    width:100%;border:1.5px solid var(--line);border-radius:10px;display:block;cursor:zoom-in\n  }\n#tmtr .route-empty{\n    border:1.5px dashed #C3CCDA;border-radius:10px;background:#F7F9FC;\n    padding:26px 16px;text-align:center;color:var(--steel);font-size:13.5px;line-height:1.6\n  }\n#tmtr .route-empty b{display:block;font-size:15px;color:var(--ink);margin-bottom:4px}\n#tmtr .route-tip{font-size:12px;color:var(--steel);margin-top:7px}\n#tmtr .route-zoom{\n    display:none;position:fixed;inset:0;background:rgba(0,18,45,.93);z-index:99;\n    align-items:center;justify-content:center;padding:16px;cursor:zoom-out\n  }\n#tmtr .route-zoom.show{display:flex}\n#tmtr .route-zoom img{max-width:100%;max-height:92vh;border-radius:8px}\n\n\/* ---------- Waiver ---------- *\/\n#tmtr .lang-toggle{display:flex;border:1.5px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:12px}\n#tmtr .lang-toggle button{\n    flex:1;padding:9px 0;border:0;background:#fff;font-family:var(--font-body);\n    font-size:13.5px;font-weight:700;color:var(--steel);cursor:pointer\n  }\n#tmtr .lang-toggle button.on{background:var(--navy);color:#fff}\n#tmtr .waiver{\n    border:1.5px solid var(--line);border-radius:10px;background:#F7F9FC;\n    max-height:190px;overflow-y:auto;padding:14px;font-size:13.5px;color:#33405A;line-height:1.55\n  }\n#tmtr .waiver strong{display:block;margin-bottom:6px;font-size:13px;letter-spacing:.04em;text-transform:uppercase}\n#tmtr .waiver ol{padding-left:18px;margin-top:4px}\n#tmtr .waiver li{margin-bottom:7px}\n#tmtr .consent{display:flex;gap:11px;align-items:flex-start;margin-top:14px;cursor:pointer}\n#tmtr .consent input{width:22px;height:22px;accent-color:var(--navy);margin-top:1px;flex:0 0 auto}\n#tmtr .consent span{font-size:14px;font-weight:500}\n\n\/* ---------- Signature ---------- *\/\n#tmtr .sig-box{\n    border:1.5px dashed #C3CCDA;border-radius:10px;background:#fff;position:relative;\n    height:170px;touch-action:none;overflow:hidden\n  }\n#tmtr .sig-box canvas{width:100%;height:100%;display:block}\n#tmtr .sig-hint{\n    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;\n    color:#9BA6B8;font-size:14px;font-weight:500;pointer-events:none\n  }\n#tmtr .sig-base{position:absolute;left:14px;right:14px;bottom:30px;border-bottom:1.5px solid var(--line);pointer-events:none}\n#tmtr .sig-tools{display:flex;justify-content:space-between;align-items:center;margin-top:8px}\n#tmtr .sig-tools p{font-size:12.5px;color:var(--steel)}\n#tmtr .btn-clear{\n    border:1.5px solid var(--line);background:#fff;border-radius:8px;padding:7px 14px;\n    font-family:var(--font-body);font-size:13px;font-weight:700;color:var(--steel);cursor:pointer\n  }\n\n\/* ---------- Submit ---------- *\/\n#tmtr .submit-zone{padding:20px 16px 0}\n#tmtr .btn-go{\n    width:100%;border:0;border-radius:12px;padding:17px 0;cursor:pointer;\n    background:var(--gold);color:var(--navy);font-family:var(--font-display);\n    font-size:22px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;\n    box-shadow:0 4px 14px rgba(211,157,0,.35)\n  }\n#tmtr .btn-go:active{background:var(--gold-dark)}\n#tmtr .top-err{display:none;margin:12px 16px 0;background:var(--danger-soft);border:1.5px solid #F0BEB9;border-radius:10px;padding:12px 14px;font-size:14px;font-weight:600;color:var(--danger)}\n#tmtr .top-err.show{display:block}\n\n\/* ---------- Success ---------- *\/\n#tmtr .success{display:none;padding:20px 16px}\n#tmtr .success.show{display:block}\n#tmtr .ok-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px;text-align:center}\n#tmtr .ok-flag{\n    width:64px;height:64px;margin:0 auto 14px;border-radius:16px;background:var(--green);\n    display:flex;align-items:center;justify-content:center\n  }\n#tmtr .ok-flag svg{width:32px;height:32px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}\n#tmtr .ok-card h2{font-family:var(--font-display);font-weight:800;font-size:30px;text-transform:uppercase}\n#tmtr .ok-card .ref{\n    margin:12px auto 4px;display:inline-block;background:var(--navy);color:#fff;\n    font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:.1em;\n    padding:8px 18px;border-radius:8px\n  }\n#tmtr .ok-card p{color:var(--steel);font-size:14px;margin-top:10px}\n#tmtr .ok-summary{margin-top:18px;text-align:left;border-top:1px solid var(--line);padding-top:14px}\n#tmtr .ok-summary div{display:flex;justify-content:space-between;padding:7px 0;font-size:14px;border-bottom:1px dashed var(--line)}\n#tmtr .ok-summary div b{font-weight:700}\n#tmtr .ok-summary div span:first-child{color:var(--steel)}\n#tmtr .btn-again{\n    margin-top:18px;width:100%;border:1.5px solid var(--navy);background:#fff;border-radius:12px;\n    padding:14px 0;font-family:var(--font-display);font-size:19px;font-weight:800;\n    letter-spacing:.05em;text-transform:uppercase;color:var(--navy);cursor:pointer\n  }\n#tmtr .payload{margin-top:8px;background:#EFF2F7;border-radius:10px;padding:12px;font-size:11.5px;font-family:ui-monospace,Menlo,monospace;color:#45526B;white-space:pre-wrap;word-break:break-all;text-align:left;max-height:180px;overflow:auto}\n#tmtr .payload-lbl{margin-top:16px;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--steel);text-align:left}\n#tmtr footer{padding:26px 20px 0;text-align:center;color:#94A0B4;font-size:11.5px;letter-spacing:.04em}\n@media (prefers-reduced-motion:no-preference){#tmtr section{animation:rise .35s ease both}\n@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}\n\n\/* ===== Theme-override armour (Elementor \/ WordPress) ===== *\/\n#tmtr{max-width:100%;font-size:16px!important;line-height:1.45!important;letter-spacing:normal!important;text-align:left!important;--wp--preset--color--foreground:inherit}\n#tmtr *,#tmtr *::before,#tmtr *::after{box-sizing:border-box}\n#tmtr h1,#tmtr h2,#tmtr h3,#tmtr p,#tmtr div,#tmtr span,#tmtr label,#tmtr b,#tmtr strong,#tmtr li,#tmtr ol{margin:0;padding:0;text-shadow:none}\n#tmtr header h1{color:#fff!important;font-family:var(--font-display)!important;font-size:38px!important;line-height:1!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.01em!important;margin-top:8px!important;word-break:normal!important;overflow-wrap:normal!important}\n#tmtr header .brand{color:#fff!important;font-size:15px!important;line-height:1.2!important}\n#tmtr header .brand em{color:var(--gold)!important}\n#tmtr header .branch-pill{color:#fff!important}\n#tmtr .sec-head h2{color:var(--ink)!important;font-family:var(--font-display)!important;font-size:24px!important;line-height:1.1!important;font-weight:800!important;text-transform:uppercase!important;margin:0!important}\n#tmtr .ok-card h2{color:var(--ink)!important;font-family:var(--font-display)!important;font-size:30px!important;line-height:1.1!important;margin:0!important}\n#tmtr .ok-card .ref{color:#fff!important}\n#tmtr label{display:block!important;font-family:var(--font-body)!important;font-size:13px!important;line-height:1.35!important;color:var(--ink)!important;text-transform:none!important}\n#tmtr label small{font-size:12.5px!important;color:var(--steel)!important}\n#tmtr input[type=text],#tmtr input[type=tel],#tmtr select{\n  width:100%!important;height:auto!important;min-height:0!important;max-width:none!important;\n  font-family:var(--font-body)!important;font-size:16px!important;line-height:1.3!important;\n  color:var(--ink)!important;background:#fff!important;background-image:none!important;\n  border:1.5px solid var(--line)!important;border-radius:10px!important;padding:13px 14px!important;\n  box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important;\n  -webkit-appearance:none!important;appearance:none!important\n}\n#tmtr input.err,#tmtr select.err{border-color:var(--danger)!important;background:var(--danger-soft)!important}\n#tmtr input[type=text]:focus,#tmtr input[type=tel]:focus,#tmtr select:focus{border-color:var(--navy)!important;outline:none!important;box-shadow:0 0 0 3px rgba(0,47,121,.12)!important}\n#tmtr input[type=checkbox]{width:22px!important;height:22px!important;min-height:0!important;padding:0!important;border-radius:4px!important;accent-color:var(--navy)!important;-webkit-appearance:auto!important;appearance:auto!important}\n#tmtr button{width:auto;font-family:var(--font-body);text-transform:none;box-shadow:none;transition:none}\n#tmtr .btn-go{\n  width:100%!important;background:var(--gold)!important;color:var(--navy)!important;\n  font-family:var(--font-display)!important;font-size:22px!important;line-height:1.1!important;font-weight:800!important;\n  text-transform:uppercase!important;letter-spacing:.06em!important;border:0!important;border-radius:12px!important;\n  padding:17px 0!important;box-shadow:0 4px 14px rgba(211,157,0,.35)!important\n}\n#tmtr .btn-again{width:100%!important;background:#fff!important;color:var(--navy)!important;font-family:var(--font-display)!important;font-size:19px!important;text-transform:uppercase!important;border:1.5px solid var(--navy)!important;border-radius:12px!important;padding:14px 0!important}\n#tmtr .lang-toggle button{font-family:var(--font-body)!important;font-size:13.5px!important;border-radius:0!important;padding:9px 0!important}\n#tmtr .chip,#tmtr .btn-clear{font-family:var(--font-body)!important;text-transform:none!important}\n#tmtr .gear .num{font-family:var(--font-display)!important;font-size:19px!important;line-height:1!important}\n#tmtr .waiver ol{padding-left:18px!important;margin-top:4px!important;list-style:decimal outside!important}\n#tmtr .waiver li{margin-bottom:7px!important;list-style:decimal outside!important}\n#tmtr canvas{display:block!important;max-width:none!important;width:100%!important;height:100%!important}\n#tmtr a{text-decoration:none}\n\n<\/style>\n\n<div id=\"tmtr\">\n<div class=\"wrap\">\n\n  <header>\n    <div class=\"brand\">TM <em>MOTOWORLD<\/em><\/div>\n    <h1>Test Ride<br>Registration<\/h1>\n    <div class=\"branch-pill\"><span class=\"dot\"><\/span><span id=\"branchName\">Select branch<\/span><\/div>\n  <\/header>\n\n  <div id=\"formView\">\n\n    <div class=\"gears\">\n      <div class=\"gear now\" id=\"g1\"><div class=\"num\">1<\/div><div class=\"lbl\">Rider<\/div><\/div>\n      <div class=\"gear-link\" id=\"l1\"><\/div>\n      <div class=\"gear\" id=\"g2\"><div class=\"num\">2<\/div><div class=\"lbl\">Machine<\/div><\/div>\n      <div class=\"gear-link\" id=\"l2\"><\/div>\n      <div class=\"gear\" id=\"g3\"><div class=\"num\">3<\/div><div class=\"lbl\">Sign<\/div><\/div>\n    <\/div>\n\n    <div class=\"top-err\" id=\"topErr\">Please complete the highlighted fields before starting your ride.<\/div>\n\n    <!-- GEAR 1 : RIDER -->\n    <section id=\"sec1\">\n      <div class=\"sec-head\"><h2>Rider Details<\/h2><span>Butiran penunggang<\/span><\/div>\n\n      <label for=\"fName\">Full name <small>\/ Nama penuh<\/small><\/label>\n      <input type=\"text\" id=\"fName\" autocomplete=\"name\" placeholder=\"As per IC\">\n      <div class=\"field-err\">Full name is required<\/div>\n\n      <label for=\"fIC\">IC number <small>\/ No. K\/P<\/small><\/label>\n      <input type=\"tel\" id=\"fIC\" inputmode=\"numeric\" placeholder=\"e.g. 900101-10-1234\">\n      <div class=\"field-err\">Enter a valid IC number<\/div>\n\n      <label for=\"fPhone\">Phone <small>\/ Telefon<\/small><\/label>\n      <input type=\"tel\" id=\"fPhone\" autocomplete=\"tel\" placeholder=\"01X-XXXXXXX\">\n      <div class=\"field-err\">Valid phone required<\/div>\n\n      <label for=\"fArea\">Your location <small>\/ Kawasan anda<\/small><\/label>\n      <input type=\"text\" id=\"fArea\" placeholder=\"e.g. Meru, Klang \/ Setia Alam\">\n      <div class=\"field-err\">Please fill in your location<\/div>\n\n      <div class=\"row2\">\n        <div>\n          <label for=\"fLicClass\">License class <small>\/ Kelas lesen<\/small><\/label>\n          <div class=\"select-holder\">\n            <select id=\"fLicClass\">\n              <option value=\"\">\u2014 Select \u2014<\/option>\n              <option>B Full<\/option>\n              <option>B<\/option>\n              <option value=\"No License\">No License \/ Tiada Lesen<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"field-err\">Please select license class<\/div>\n        <\/div>\n        <div>\n          <label for=\"fLic\">License no. <small>\/ No. lesen<\/small><\/label>\n          <input type=\"text\" id=\"fLic\" placeholder=\"Riding license\">\n          <div class=\"field-err\">License no. required<\/div>\n        <\/div>\n      <\/div>\n\n      <div id=\"approvalWrap\" style=\"display:none\">\n        <div class=\"risk-note\">\n          <b>\u26a0 No license \u2014 test ride not allowed<\/b>\n          Test ride requires a valid riding license. Please speak to our salesman.<br>\n          <span>Uji tunggang memerlukan lesen menunggang yang sah. Sila rujuk jurujual kami.<\/span>\n        <\/div>\n        <label for=\"fApprover\">Staff use only \u2014 Approved by Sales Leader<\/label>\n        <input type=\"text\" id=\"fApprover\" placeholder=\"Filled by staff\">\n        <div class=\"field-err\">Sales Leader name is required for no-license test ride<\/div>\n      <\/div>\n    <\/section>\n\n    <!-- GEAR 2 : MACHINE -->\n    <section id=\"sec2\">\n      <div class=\"sec-head\"><h2>Machine &amp; Crew<\/h2><span>Model &amp; salesman<\/span><\/div>\n\n      <div class=\"row2\">\n        <div>\n          <label for=\"fModel\">Model to test ride <small>\/ Tulis model<\/small><\/label>\n          <input type=\"text\" id=\"fModel\" placeholder=\"e.g. Zontes 368G\">\n          <div class=\"field-err\">Please write the model<\/div>\n        <\/div>\n        <div>\n          <label for=\"fPlate\">Plate number <small>\/ No. plat<\/small><\/label>\n          <input type=\"text\" id=\"fPlate\" placeholder=\"e.g. BPC 1234\" style=\"text-transform:uppercase\">\n          <div class=\"field-err\">Plate number required<\/div>\n        <\/div>\n      <\/div>\n\n      <label for=\"fIns\">Insurance covered? <small>\/ Ada insurans? \u2014 as informed by salesman<\/small><\/label>\n      <div class=\"select-holder\">\n        <select id=\"fIns\">\n          <option value=\"\">\u2014 Select \u2014<\/option>\n          <option>Yes<\/option>\n          <option>No<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"field-err\">Please confirm insurance status with salesman<\/div>\n\n      <div class=\"risk-note\">\n        <b>\u26a0 Know the risk \/ Fahami risiko<\/b>\n        You must understand the risks of test riding. If any accident, damage or loss happens during the test ride, the cost must be borne by the rider.<br>\n        <span>Anda mesti memahami risiko uji tunggang. Sekiranya berlaku kemalangan, kerosakan atau kerugian semasa uji tunggang, kos mesti ditanggung oleh penunggang.<\/span>\n      <\/div>\n\n      <div class=\"row2\">\n        <div>\n          <label for=\"fBranch\">Branch <small>\/ Cawangan<\/small><\/label>\n          <div class=\"select-holder\">\n            <select id=\"fBranch\">\n              <option value=\"\">\u2014 Select \u2014<\/option>\n              <option value=\"kapar\">HQ Kapar<\/option>\n              <option value=\"honda-kapar\">Honda Kapar<\/option>\n              <option value=\"lambretta-selangor\">Lambretta Selangor<\/option>\n              <option value=\"zontes-sa\">Zontes Shah Alam<\/option>\n              <option value=\"lambretta-sa\">Lambretta Shah Alam<\/option>\n              <option value=\"ktm-sa\">KTM Shah Alam<\/option>\n            <\/select>\n          <\/div>\n          <div class=\"field-err\">Please select the branch<\/div>\n        <\/div>\n        <div>\n          <label for=\"fSales\">Attended by salesman<\/label>\n          <div class=\"select-holder\">\n            <select id=\"fSales\"><option value=\"\">\u2014 Select branch \u2014<\/option><\/select>\n          <\/div>\n          <div class=\"field-err\">Please select the salesman<\/div>\n        <\/div>\n      <\/div>\n      <p style=\"font-size:12px;color:var(--steel);margin-top:6px\">Not sure? Ask our salesman \/ Tak pasti? Tanya jurujual kami.<\/p>\n    <\/section>\n\n    <!-- ROUTE MAP -->\n    <section id=\"secRoute\">\n      <div class=\"sec-head\"><h2>Test Ride Route<\/h2><span>Laluan uji tunggang<\/span><\/div>\n      <div class=\"route-wrap\" id=\"routeWrap\">\n        <div class=\"route-empty\">\n          <b>Select branch to view route<\/b>\n          Pilih cawangan untuk lihat laluan uji tunggang.\n        <\/div>\n      <\/div>\n      <p class=\"route-tip\">Follow this route only. Ask our salesman if unsure \/ Ikut laluan ini sahaja. Tanya jurujual jika tidak pasti.<\/p>\n    <\/section>\n\n    <!-- GEAR 3 : SIGN -->\n    <section id=\"sec3\">\n      <div class=\"sec-head\"><h2>Waiver &amp; Signature<\/h2><span>Pelepasan &amp; tandatangan<\/span><\/div>\n\n      <div class=\"lang-toggle\">\n        <button id=\"langBM\" class=\"on\" type=\"button\">Bahasa Malaysia<\/button>\n        <button id=\"langEN\" type=\"button\">English<\/button>\n      <\/div>\n\n      <div class=\"waiver\" id=\"waiverBM\">\n        <strong>Perjanjian Pelepasan Tanggungan Uji Tunggang<br>TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd<\/strong>\n        Dengan menandatangani borang ini, saya mengesahkan dan bersetuju bahawa:\n        <ol>\n          <li>Kelas lesen yang saya isytiharkan di atas adalah benar. Sekiranya saya tiada lesen yang sah, saya faham uji tunggang hanya dibenarkan dengan kelulusan Sales Leader, terhad kepada kawasan yang ditetapkan oleh kakitangan, dan saya menanggung tanggungjawab penuh.<\/li>\n          <li>Status perlindungan insurans motosikal adalah seperti yang dimaklumkan oleh jurujual. Sekiranya motosikal tidak dilindungi insurans, sebarang kos akibat kemalangan, kerosakan atau kerugian mesti ditanggung sepenuhnya oleh saya.<\/li>\n          <li>Saya menunggang atas risiko saya sendiri. TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd, pengarah, dan kakitangannya tidak bertanggungjawab atas sebarang kecederaan, kemalangan, atau kerosakan harta benda semasa uji tunggang.<\/li>\n          <li>Saya bertanggungjawab sepenuhnya atas sebarang kerosakan pada motosikal akibat kecuaian saya, termasuk kos pembaikan dan saman trafik yang dikeluarkan sepanjang tempoh uji tunggang.<\/li>\n          <li>Saya akan mematuhi semua undang-undang jalan raya, memakai topi keledar yang disediakan\/dibawa, dan mengikut laluan serta arahan kakitangan.<\/li>\n          <li>Saya bersetuju maklumat peribadi saya disimpan oleh TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd untuk tujuan rekod uji tunggang dan susulan jualan, selaras dengan PDPA 2010.<\/li>\n        <\/ol>\n      <\/div>\n\n      <div class=\"waiver\" id=\"waiverEN\" style=\"display:none\">\n        <strong>Test Ride Indemnity &amp; Release Agreement<br>TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd<\/strong>\n        By signing this form, I confirm and agree that:\n        <ol>\n          <li>The license class I declared above is true. If I do not hold a valid riding license, I understand the test ride is only permitted with Sales Leader approval, limited to the area designated by staff, and I bear full responsibility.<\/li>\n          <li>The motorcycle&#8217;s insurance coverage status is as informed by the salesman. If the motorcycle is not covered by insurance, any cost arising from accident, damage or loss must be fully borne by me.<\/li>\n          <li>I ride entirely at my own risk. TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd, its directors and staff shall not be liable for any injury, accident, or property damage during the test ride.<\/li>\n          <li>I am fully responsible for any damage to the motorcycle caused by my negligence, including repair costs and any traffic summons issued during the test ride period.<\/li>\n          <li>I will obey all traffic laws, wear the helmet provided\/brought, and follow the designated route and staff instructions.<\/li>\n          <li>I consent to TM Motoworld Sdn Bhd \/ TM Motoworld (Klang) Sdn Bhd storing my personal data for test ride records and sales follow-up, in line with PDPA 2010.<\/li>\n        <\/ol>\n      <\/div>\n\n      <label class=\"consent\" for=\"fAgree\" style=\"font-weight:500\">\n        <input type=\"checkbox\" id=\"fAgree\">\n        <span>I have read, understood, and agree to the terms above \/ Saya telah membaca, memahami dan bersetuju dengan terma di atas.<\/span>\n      <\/label>\n      <div class=\"field-err\" id=\"agreeErr\">You must agree to the waiver to proceed<\/div>\n\n      <label class=\"consent\" for=\"fDeposit\" style=\"font-weight:500\">\n        <input type=\"checkbox\" id=\"fDeposit\">\n        <span>I will hand my IC &amp; riding license to the salesman before the test ride, to be returned after the ride \/ Saya akan serahkan IC &amp; lesen kepada jurujual sebelum uji tunggang, dan akan dipulangkan selepas selesai.<\/span>\n      <\/label>\n      <div class=\"field-err\" id=\"depositErr\">IC &amp; license must be handed to the salesman before riding<\/div>\n\n      <label style=\"margin-top:18px\">Signature <small>\/ Tandatangan<\/small><\/label>\n      <div class=\"sig-wrap\">\n        <div class=\"sig-box\" id=\"sigBox\">\n          <canvas id=\"sigPad\"><\/canvas>\n          <div class=\"sig-hint\" id=\"sigHint\">Sign here with your finger<\/div>\n          <div class=\"sig-base\"><\/div>\n        <\/div>\n        <div class=\"field-err\" id=\"sigErr\">Signature is required<\/div>\n      <\/div>\n      <div class=\"sig-tools\">\n        <p id=\"todayLine\"><\/p>\n        <button class=\"btn-clear\" id=\"btnClear\" type=\"button\">Clear<\/button>\n      <\/div>\n    <\/section>\n\n    <div class=\"submit-zone\">\n      <button class=\"btn-go\" id=\"btnGo\" type=\"button\">Start My Ride \u2192<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- SUCCESS -->\n  <div class=\"success\" id=\"successView\">\n    <div class=\"ok-card\">\n      <div class=\"ok-flag\"><svg viewBox=\"0 0 24 24\"><polyline points=\"4 13 9 18 20 6\"\/><\/svg><\/div>\n      <h2>You&#8217;re cleared to ride<\/h2>\n      <div class=\"ref\" id=\"refNo\">\u2014<\/div>\n      <p>Show this reference to our crew.<br>Tunjukkan rujukan ini kepada kakitangan kami.<\/p>\n      <div class=\"risk-note\" style=\"text-align:left;margin-top:14px\">\n        <b>\u2611 Salesman checklist<\/b>\n        Collect the customer&#8217;s <u>IC &amp; riding license<\/u> and keep safely before releasing the bike. Return after the ride.<br>\n        <span>Jurujual: Ambil IC &amp; lesen pelanggan dan simpan dengan selamat sebelum uji tunggang. Pulangkan selepas selesai.<\/span>\n      <\/div>\n      <div class=\"ok-summary\" id=\"okSummary\"><\/div>\n      <div class=\"payload-lbl\">Webhook payload (\u2192 Lark Base, prototype preview)<\/div>\n      <div class=\"payload\" id=\"payloadBox\"><\/div>\n      <button class=\"btn-again\" id=\"btnAgain\" type=\"button\">New Test Ride<\/button>\n    <\/div>\n  <\/div>\n\n  <div class=\"route-zoom\" id=\"routeZoom\"><img id=\"routeZoomImg\" alt=\"Test ride route\"><\/div>\n\n  <footer>TM MOTOWORLD SDN BHD \/ TM MOTOWORLD (KLANG) SDN BHD \u00b7 HQ KAPAR \u00b7 HONDA KAPAR \u00b7 LAMBRETTA SELANGOR \u00b7 ZONTES SHAH ALAM \u00b7 LAMBRETTA SHAH ALAM \u00b7 KTM SHAH ALAM<br>v4 \u2014 submissions relayed to Lark Base via WordPress<\/footer>\n<\/div>\n<\/div>\n\n<script>\n(function(){\n  \/* ---------------- Branch + salesman data ---------------- *\/\n  var BRANCHES = {\n    \"kapar\":        { name:\"HQ Kapar\",            code:\"KPR\", sales:[\"Adib\",\"Shahrin\",\"Fazwan\",\"Fitri\",\"Raja Azrul\",\"Ikhwan\",\"Amir\"] },\n    \"honda-kapar\":  { name:\"Honda Kapar\",         code:\"HKP\", sales:[\"Bela\",\"Anis\",\"Syaza\",\"Zeera\",\"Syafa\"] },\n    \"lambretta-selangor\": { name:\"Lambretta Selangor\", code:\"LSG\", sales:[\"Nabil\",\"Jebat\",\"Allysa\",\"Jue\"] },\n    \"zontes-sa\":    { name:\"Zontes Shah Alam\",    code:\"ZSA\", sales:[\"Amirul\",\"Nazrin\",\"Aso\",\"Roy\"] },\n    \"lambretta-sa\": { name:\"Lambretta Shah Alam\", code:\"LSA\", sales:[\"Amirul\",\"Nazrin\",\"Aso\",\"Roy\"] },\n    \"ktm-sa\":       { name:\"KTM Shah Alam\",       code:\"KSA\", sales:[\"Amirul\",\"Nazrin\",\"Aso\",\"Roy\"] }\n  };\n\n  \/* =====================================================\n     ROUTE MAPS \u2014 for Harith:\n     paste each branch's route map image URL between the quotes.\n     Any image link works (Lark Drive public link, Google Drive\n     direct link, or hosted image). Leave \"\" to show the\n     \"coming soon\" placeholder for that branch.\n     ===================================================== *\/\n  var ROUTE_MAPS = {\n    \"kapar\":              \"\",\n    \"honda-kapar\":        \"\",\n    \"lambretta-selangor\": \"\",\n    \"zontes-sa\":          \"\",\n    \"lambretta-sa\":       \"\",\n    \"ktm-sa\":             \"\"\n  };\n\n  \/* =====================================================\n     SUBMIT ENDPOINT \u2014 this posts to WordPress on the SAME\n     domain, which then relays server-to-server to Lark.\n     The Lark webhook URL now lives in the PHP snippet only,\n     so it is no longer visible in page source.\n     Leave \"\" for prototype mode (screen only, sent nowhere).\n     ===================================================== *\/\n  var SUBMIT_URL = \"\/wp-json\/tmw\/v1\/submit-test-ride\";\n  var WAIVER_VERSION = \"v1-2026-08\";\n\n  var branchKey = null;\n  var params = new URLSearchParams(location.search);\n  var qb = (params.get(\"branch\")||\"\").toLowerCase();\n\n  var branchName = document.getElementById(\"branchName\");\n  var salesSel = document.getElementById(\"fSales\");\n  var branchSel = document.getElementById(\"fBranch\");\n  var urlBranch = BRANCHES[qb] ? qb : null;\n\n  function setBranch(key){\n    if(!BRANCHES[key]){\n      branchKey=null;\n      branchName.textContent=\"Select branch\";\n      salesSel.innerHTML='<option value=\"\">\u2014 Select branch \u2014<\/option>';\n      updateRoute(\"\");\n      return;\n    }\n    branchKey = key;\n    branchSel.value = key;\n    branchName.textContent = BRANCHES[key].name;\n    var opts = '<option value=\"\">\u2014 Select salesman \u2014<\/option>';\n    BRANCHES[key].sales.forEach(function(s){ opts += '<option>'+s+'<\/option>'; });\n    salesSel.innerHTML = opts;\n    branchSel.classList.remove(\"err\");\n    updateRoute(key);\n  }\n\n  function updateRoute(key){\n    var w = document.getElementById(\"routeWrap\");\n    var url = key ? (ROUTE_MAPS[key]||\"\") : \"\";\n    if(!key){\n      w.innerHTML = '<div class=\"route-empty\"><b>Select branch to view route<\/b>Pilih cawangan untuk lihat laluan uji tunggang.<\/div>';\n    } else if(url){\n      w.innerHTML = '<img decoding=\"async\" class=\"route-img\" id=\"routeImg\" src=\"'+url+'\" alt=\"'+BRANCHES[key].name+' test ride route\">';\n      document.getElementById(\"routeImg\").addEventListener(\"click\", function(){\n        document.getElementById(\"routeZoomImg\").src = url;\n        document.getElementById(\"routeZoom\").classList.add(\"show\");\n      });\n    } else {\n      w.innerHTML = '<div class=\"route-empty\"><b>'+BRANCHES[key].name+' route map coming soon<\/b>Our salesman will show you the test ride route.<br>Jurujual kami akan tunjukkan laluan uji tunggang.<\/div>';\n    }\n  }\n  document.getElementById(\"routeZoom\").addEventListener(\"click\", function(){\n    this.classList.remove(\"show\");\n  });\n\n  if(urlBranch){ setBranch(urlBranch); }\n  branchSel.addEventListener(\"change\", function(){ setBranch(this.value); });\n\n  \/* ---------------- Language toggle ---------------- *\/\n  var bBM=document.getElementById(\"langBM\"), bEN=document.getElementById(\"langEN\");\n  var wBM=document.getElementById(\"waiverBM\"), wEN=document.getElementById(\"waiverEN\");\n  bBM.onclick=function(){bBM.classList.add(\"on\");bEN.classList.remove(\"on\");wBM.style.display=\"\";wEN.style.display=\"none\";};\n  bEN.onclick=function(){bEN.classList.add(\"on\");bBM.classList.remove(\"on\");wEN.style.display=\"\";wBM.style.display=\"none\";};\n\n  \/* ---------------- Date line ---------------- *\/\n  var now=new Date();\n  document.getElementById(\"todayLine\").textContent =\n    \"Date: \" + now.toLocaleDateString(\"en-MY\",{day:\"2-digit\",month:\"short\",year:\"numeric\"});\n\n  \/* ---------------- Signature pad ---------------- *\/\n  var box=document.getElementById(\"sigBox\"), cv=document.getElementById(\"sigPad\"),\n      hint=document.getElementById(\"sigHint\"), ctx=cv.getContext(\"2d\"),\n      drawing=false, hasInk=false, last=null;\n\n  function fitCanvas(){\n    var r=box.getBoundingClientRect(), d=window.devicePixelRatio||1;\n    if(r.width===0) return;\n    var img=hasInk?cv.toDataURL():null;\n    cv.width=r.width*d; cv.height=r.height*d;\n    ctx.setTransform(d,0,0,d,0,0);\n    ctx.lineWidth=2.4; ctx.lineCap=\"round\"; ctx.lineJoin=\"round\"; ctx.strokeStyle=\"#152238\";\n    if(img){ var im=new Image(); im.onload=function(){ctx.drawImage(im,0,0,r.width,r.height);}; im.src=img; }\n  }\n  fitCanvas(); window.addEventListener(\"resize\",fitCanvas);\n\n  function pt(e){\n    var r=cv.getBoundingClientRect();\n    return {x:e.clientX-r.left, y:e.clientY-r.top};\n  }\n  cv.addEventListener(\"pointerdown\",function(e){\n    e.preventDefault(); cv.setPointerCapture(e.pointerId);\n    drawing=true; last=pt(e); hasInk=true; hint.style.display=\"none\";\n    box.classList.remove(\"err\"); document.getElementById(\"sigErr\").classList.remove(\"show\");\n    ctx.beginPath(); ctx.moveTo(last.x,last.y); ctx.lineTo(last.x+0.1,last.y+0.1); ctx.stroke();\n  });\n  cv.addEventListener(\"pointermove\",function(e){\n    if(!drawing) return;\n    var p=pt(e);\n    ctx.beginPath(); ctx.moveTo(last.x,last.y); ctx.lineTo(p.x,p.y); ctx.stroke();\n    last=p;\n  });\n  [\"pointerup\",\"pointercancel\",\"pointerleave\"].forEach(function(ev){\n    cv.addEventListener(ev,function(){drawing=false;});\n  });\n  document.getElementById(\"btnClear\").onclick=function(){\n    ctx.clearRect(0,0,cv.width,cv.height); hasInk=false; hint.style.display=\"flex\";\n  };\n\n  \/* ---------------- Validation + submit ---------------- *\/\n  function bad(el){ el.classList.add(\"err\"); }\n  function clean(el){ el.classList.remove(\"err\"); }\n  [\"fName\",\"fIC\",\"fPhone\",\"fArea\",\"fLic\",\"fModel\",\"fPlate\"].forEach(function(id){\n    document.getElementById(id).addEventListener(\"input\",function(){clean(this);});\n  });\n  [\"fLicClass\",\"fIns\",\"fSales\"].forEach(function(id){\n    document.getElementById(id).addEventListener(\"change\",function(){clean(this);});\n  });\n\n  \/* No License => license number not required *\/\n  var licClassSel = document.getElementById(\"fLicClass\");\n  var licInput = document.getElementById(\"fLic\");\n  function noLic(){ return licClassSel.value === \"No License\"; }\n  var approvalWrap = document.getElementById(\"approvalWrap\");\n  var approverInput = document.getElementById(\"fApprover\");\n  licClassSel.addEventListener(\"change\", function(){\n    if(noLic()){\n      licInput.value=\"\"; licInput.disabled=true;\n      licInput.placeholder=\"Not required\"; clean(licInput);\n      approvalWrap.style.display=\"\";\n    }else{\n      licInput.disabled=false; licInput.placeholder=\"Riding license\";\n      approvalWrap.style.display=\"none\";\n      approverInput.value=\"\"; clean(approverInput);\n    }\n  });\n  approverInput.addEventListener(\"input\",function(){clean(this);});\n  document.getElementById(\"fAgree\").addEventListener(\"change\",function(){\n    document.getElementById(\"agreeErr\").classList.remove(\"show\");\n  });\n  document.getElementById(\"fDeposit\").addEventListener(\"change\",function(){\n    document.getElementById(\"depositErr\").classList.remove(\"show\");\n  });\n\n  \/* Placeholder only \\u2014 WordPress assigns the real, collision-free ref\n     and returns it in the response. Never shown unless in prototype mode. *\/\n  var counter = 0;\n  function makeRef(){\n    counter++;\n    var code = branchKey ? BRANCHES[branchKey].code : \"TMW\";\n    var d = new Date(), ymd = d.getFullYear().toString()\n      + String(d.getMonth()+1).padStart(2,\"0\") + String(d.getDate()).padStart(2,\"0\");\n    return code + \"-\" + ymd + \"-\" + String(counter).padStart(3,\"0\");\n  }\n\n  function updateGears(){\n    var name=document.getElementById(\"fName\").value.trim(),\n        ic=document.getElementById(\"fIC\").value.trim(),\n        ph=document.getElementById(\"fPhone\").value.trim(),\n        area=document.getElementById(\"fArea\").value.trim(),\n        licC=document.getElementById(\"fLicClass\").value,\n        lic=document.getElementById(\"fLic\").value.trim(),\n        model=document.getElementById(\"fModel\").value.trim(),\n        plate=document.getElementById(\"fPlate\").value.trim(),\n        ins=document.getElementById(\"fIns\").value,\n        sm=document.getElementById(\"fSales\").value;\n    var g1ok = name && ic && ph && area && licC && (lic || noLic());\n    var g2ok = model && plate && ins && sm && branchKey;\n    document.getElementById(\"g1\").className = \"gear \" + (g1ok?\"done\":\"now\");\n    document.getElementById(\"l1\").className = \"gear-link\" + (g1ok?\" done\":\"\");\n    document.getElementById(\"g2\").className = \"gear \" + (g2ok?\"done\":(g1ok?\"now\":\"\"));\n    document.getElementById(\"l2\").className = \"gear-link\" + (g2ok?\" done\":\"\");\n    document.getElementById(\"g3\").className = \"gear \" + ((g1ok&&g2ok)?\"now\":\"\");\n  }\n  document.querySelectorAll(\"input,select\").forEach(function(el){\n    el.addEventListener(\"input\",updateGears); el.addEventListener(\"change\",updateGears);\n  });\n\n  document.getElementById(\"btnGo\").onclick=function(){\n    var ok=true;\n    var f = {\n      name: document.getElementById(\"fName\"),\n      ic: document.getElementById(\"fIC\"),\n      phone: document.getElementById(\"fPhone\"),\n      area: document.getElementById(\"fArea\"),\n      licClass: document.getElementById(\"fLicClass\"),\n      lic: document.getElementById(\"fLic\"),\n      model: document.getElementById(\"fModel\"),\n      plate: document.getElementById(\"fPlate\"),\n      ins: document.getElementById(\"fIns\"),\n      sales: document.getElementById(\"fSales\")\n    };\n    if(!f.name.value.trim()){bad(f.name);ok=false;}\n    if(f.ic.value.replace(\/\\D\/g,\"\").length < 12){bad(f.ic);ok=false;}\n    if(f.phone.value.replace(\/\\D\/g,\"\").length < 9){bad(f.phone);ok=false;}\n    if(!f.area.value.trim()){bad(f.area);ok=false;}\n    if(!f.licClass.value){bad(f.licClass);ok=false;}\n    if(!noLic() &#038;&#038; !f.lic.value.trim()){bad(f.lic);ok=false;}\n    if(noLic() &#038;&#038; !approverInput.value.trim()){bad(approverInput);ok=false;}\n    if(!f.model.value.trim()){bad(f.model);ok=false;}\n    if(!f.plate.value.trim()){bad(f.plate);ok=false;}\n    if(!f.ins.value){bad(f.ins);ok=false;}\n    if(!f.sales.value){bad(f.sales);ok=false;}\n    if(!document.getElementById(\"fAgree\").checked){\n      document.getElementById(\"agreeErr\").classList.add(\"show\");ok=false;\n    }\n    if(!document.getElementById(\"fDeposit\").checked){\n      document.getElementById(\"depositErr\").classList.add(\"show\");ok=false;\n    }\n    if(!hasInk){\n      box.classList.add(\"err\");\n      document.getElementById(\"sigErr\").classList.add(\"show\");ok=false;\n    }\n    if(!branchKey){ bad(branchSel); ok=false; }\n\n    var topErr=document.getElementById(\"topErr\");\n    if(!ok){\n      topErr.classList.add(\"show\");\n      topErr.scrollIntoView({behavior:\"smooth\",block:\"center\"});\n      return;\n    }\n    topErr.classList.remove(\"show\");\n\n    var ref = makeRef();\n    var record = {\n      ref: ref,\n      branch: BRANCHES[branchKey].name,\n      branch_code: BRANCHES[branchKey].code,\n      salesman: f.sales.value,\n      customer_name: f.name.value.trim(),\n      ic_no: f.ic.value.trim(),\n      phone: f.phone.value.trim(),\n      customer_area: f.area.value.trim(),\n      license_class: f.licClass.value,\n      license_no: noLic() ? \"N\/A\" : f.lic.value.trim(),\n      no_license_approved_by: noLic() ? approverInput.value.trim() : \"\",\n      model: f.model.value.trim(),\n      plate_no: f.plate.value.trim().toUpperCase(),\n      insurance_covered: f.ins.value,\n      risk_acknowledged: true,\n      ic_license_deposit_agreed: true,\n      consent: true,\n      waiver_version: WAIVER_VERSION,\n      signature_png: cv.toDataURL(\"image\/png\"),\n      submitted_at: new Date().toISOString()\n    };\n\n    submitRecord(record);\n  };\n\n  function showSuccess(record){\n    var ref = record.ref;\n    document.getElementById(\"refNo\").textContent = ref;\n    var s = document.getElementById(\"okSummary\");\n    s.innerHTML =\n      \"<div><span>Branch<\/span><b>\"+record.branch+\"<\/b><\/div>\"+\n      \"<div><span>Rider<\/span><b>\"+record.customer_name+\"<\/b><\/div>\"+\n      \"<div><span>License<\/span><b>\"+record.license_class+\"<\/b><\/div>\"+\n      \"<div><span>Model<\/span><b>\"+record.model+\"<\/b><\/div>\"+\n      \"<div><span>Plate<\/span><b>\"+record.plate_no+\"<\/b><\/div>\"+\n      \"<div><span>Insurance<\/span><b>\"+record.insurance_covered+\"<\/b><\/div>\"+\n      \"<div><span>Salesman<\/span><b>\"+record.salesman+\"<\/b><\/div>\";\n    var preview = JSON.parse(JSON.stringify(record));\n    preview.signature_png = preview.signature_png.slice(0,60) + \"\u2026(stored as PNG by WordPress, URL sent to Lark)\";\n    document.getElementById(\"payloadBox\").textContent = JSON.stringify(preview,null,2);\n\n    document.getElementById(\"formView\").style.display=\"none\";\n    document.getElementById(\"successView\").classList.add(\"show\");\n    window.scrollTo({top:0,behavior:\"smooth\"});\n  }\n\n  \/* ---- Send via the WordPress relay; never lose data on failure ---- *\/\n  function submitRecord(record){\n    var btn = document.getElementById(\"btnGo\");\n    var topErr = document.getElementById(\"topErr\");\n\n    if(!SUBMIT_URL){                  \/* prototype mode *\/\n      showSuccess(record);\n      return;\n    }\n\n    btn.disabled = true;\n    var originalLabel = \"Start My Ride \\u2192\";\n\n    function attempt(n){\n      btn.textContent = n===1 ? \"Submitting\\u2026\" : \"Retrying\\u2026 (\"+n+\"\/3)\";\n      fetch(SUBMIT_URL, {\n        method:\"POST\",\n        headers:{\"Content-Type\":\"application\/json\"},\n        body: JSON.stringify(record)\n      })\n      .then(function(r){\n        return r.text().then(function(txt){\n          var body = {};\n          try { body = JSON.parse(txt); } catch(e){ body = {raw: txt}; }\n          \/* Only a 2xx WITH success:true counts. WordPress returns\n             success:false when Lark itself rejected the record, so a\n             silent failure can no longer look like a win. *\/\n          if(!r.ok || body.success !== true){\n            throw new Error(\"HTTP \"+r.status+\" \"+txt.slice(0,300));\n          }\n          return body;\n        });\n      })\n      .then(function(body){\n        if(body.ref){ record.ref = body.ref; }            \/* server-assigned, collision-free *\/\n        if(body.signature_url){ record.signature_url = body.signature_url; }\n        btn.disabled=false; btn.textContent=originalLabel;\n        topErr.classList.remove(\"show\");\n        showSuccess(record);\n      })\n      .catch(function(err){\n        if(window.console) console.error(\"[TMW] submit failed:\", err);\n        if(n < 3){\n          setTimeout(function(){ attempt(n+1); }, n*1500);\n        }else{\n          btn.disabled=false;\n          btn.textContent=\"Try Again \\u2192\";\n          topErr.textContent=\"Connection problem \\u2014 your form is NOT lost. Check internet and press Try Again. \/ Masalah sambungan \\u2014 borang anda TIDAK hilang. Semak internet dan tekan Try Again.\";\n          topErr.classList.add(\"show\");\n          topErr.scrollIntoView({behavior:\"smooth\",block:\"center\"});\n        }\n      });\n    }\n    attempt(1);\n  }\n\n  document.getElementById(\"btnAgain\").onclick=function(){\n    var b=document.getElementById(\"btnGo\"); b.disabled=false; b.textContent=\"Start My Ride \u2192\";\n    var te=document.getElementById(\"topErr\");\n    te.textContent=\"Please complete the highlighted fields before starting your ride.\";\n    te.classList.remove(\"show\");\n    [\"fName\",\"fIC\",\"fPhone\",\"fArea\",\"fLic\",\"fModel\",\"fPlate\"].forEach(function(id){document.getElementById(id).value=\"\";});\n    [\"fLicClass\",\"fIns\"].forEach(function(id){document.getElementById(id).value=\"\";});\n    if(urlBranch){ setBranch(urlBranch); salesSel.value=\"\"; }\n    else { branchSel.value=\"\"; setBranch(\"\"); }\n    licInput.disabled=false; licInput.placeholder=\"Riding license\";\n    approverInput.value=\"\"; approvalWrap.style.display=\"none\";\n    document.getElementById(\"fAgree\").checked=false;\n    document.getElementById(\"fDeposit\").checked=false;\n    ctx.clearRect(0,0,cv.width,cv.height); hasInk=false; hint.style.display=\"flex\";\n    document.getElementById(\"successView\").classList.remove(\"show\");\n    document.getElementById(\"formView\").style.display=\"\";\n    updateGears();\n    window.scrollTo({top:0,behavior:\"smooth\"});\n    setTimeout(fitCanvas,60);\n  };\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>TM MOTOWORLD Test RideRegistration Select branch 1 Rider 2 Machine 3 Sign Please complete the highlighted fields before starting your [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_thinkrank_schema_form_data":"","_thinkrank_selected_schema_type":"","_thinkrank_additional_schemas":"","_thinkrank_canonical_url":"","_thinkrank_og_title":"","_thinkrank_og_description":"","_thinkrank_og_image":"","_thinkrank_twitter_title":"","_thinkrank_twitter_description":"","_thinkrank_twitter_image":"","_thinkrank_imported_from":"","_thinkrank_focus_keywords":[],"_thinkrank_focus_keyword":"","_thinkrank_robots_meta_enabled":0,"_thinkrank_robots_meta":"[]","_thinkrank_advanced_robots_meta":"[]","_thinkrank_primary_category":0,"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-16536","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/pages\/16536","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/comments?post=16536"}],"version-history":[{"count":2,"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/pages\/16536\/revisions"}],"predecessor-version":[{"id":16538,"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/pages\/16536\/revisions\/16538"}],"wp:attachment":[{"href":"https:\/\/tmmotoworld.com\/ms\/wp-json\/wp\/v2\/media?parent=16536"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}