{"id":26,"date":"2026-06-10T08:42:21","date_gmt":"2026-06-10T08:42:21","guid":{"rendered":"https:\/\/ssg.uatstaging.com\/?page_id=26"},"modified":"2026-06-10T08:59:01","modified_gmt":"2026-06-10T08:59:01","slug":"booking-appointment","status":"publish","type":"page","link":"https:\/\/ssg.uatstaging.com\/ms\/booking-appointment\/","title":{"rendered":"Temujanji Servis"},"content":{"rendered":"<main id='bde-main'><section class=\"bde-section-26-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h1 class=\"bde-heading-26-102 bde-heading\">\nTemujanji Servis\n<\/h1><div class=\"bde-shortcode-26-101 bde-shortcode\">\n<div class=\"container-fluid my-5 ssg-booking-wrapper\">\n    <div class=\"row justify-content-center\">\n        <div class=\"col-lg-8 col-xl-7\">\n\n            <div class=\"card border-0 shadow-sm ssg-booking-card\">\n<!--                 <div class=\"card-header bg-dark text-white py-4\">\n                    <h3 class=\"mb-1 d-flex align-items-center gap-2\">\n                        <i class=\"bi bi-calendar-check\"><\/i>\n                        SSG Appointment Booking\n                    <\/h3>\n                    <p class=\"mb-0 small text-white-50\">\n                        Book your scooter service slot with Sendayan Speed Garage.\n                    <\/p>\n                <\/div> -->\n\n                <div class=\"card-body p-4\">\n                    <div\n                        class=\"ssg-calendar-booking\"\n                        id=\"ssg_calendar_booking\"\n                        data-today=\"2026-06-12\"\n                        data-max-date=\"2026-08-12\"\n                        data-off-days=\"[]\"\n                        data-ajax-url=\"https:\/\/ssg.uatstaging.com\/wp-admin\/admin-ajax.php\"\n                        data-nonce=\"fac72f31f5\"\n                    >\n                        <div class=\"d-flex align-items-start justify-content-between gap-3 mb-3\">\n                            <div>\n                                <h4 class=\"mb-1\">Pilih Tarikh Temujanji<\/h4>\n                                <p class=\"text-muted mb-0 small\">Select a date within the next 2 months, then choose an available time slot.<\/p>\n                            <\/div>\n                            <span class=\"badge text-bg-light border\">Langkah 1<\/span>\n                        <\/div>\n\n                        <div class=\"ssg-calendar-box border rounded-3 p-3 mb-4\">\n                            <div class=\"d-flex align-items-center justify-content-between mb-3\">\n                                <button type=\"button\" class=\"btn btn-outline-dark btn-sm\" id=\"ssg_calendar_prev\">\n                                    <i class=\"bi bi-chevron-left\"><\/i>\n                                <\/button>\n                                <h5 class=\"mb-0 text-center\" id=\"ssg_calendar_month_label\">Calendar<\/h5>\n                                <button type=\"button\" class=\"btn btn-outline-dark btn-sm\" id=\"ssg_calendar_next\">\n                                    <i class=\"bi bi-chevron-right\"><\/i>\n                                <\/button>\n                            <\/div>\n\n                            <div class=\"ssg-calendar-weekdays d-grid text-center small fw-semibold text-muted mb-2\" style=\"grid-template-columns: repeat(7, 1fr); gap:6px;\">\n                                <div>Ahad<\/div>\n                                <div>Isnin<\/div>\n                                <div>Selasa<\/div>\n                                <div>Rabu<\/div>\n                                <div>Khamis<\/div>\n                                <div>Jumaat<\/div>\n                                <div>Sabtu<\/div>\n                            <\/div>\n\n                            <div class=\"ssg-calendar-days d-grid\" id=\"ssg_calendar_days\" style=\"grid-template-columns: repeat(7, 1fr); gap:6px;\"><\/div>\n                        <\/div>\n\n                        <div class=\"ssg-slot-box border rounded-3 p-3 mb-4\">\n                            <div class=\"d-flex align-items-center justify-content-between gap-3 mb-3\">\n                                <div>\n                                    <h4 class=\"mb-1\">Slot Masa<\/h4>\n                                    <p class=\"text-muted mb-0 small\" id=\"ssg_slot_status\">Pilih tarikh untuk melihat slot masa yang tersedia.<\/p>\n                                <\/div>\n                                <span class=\"badge text-bg-light border\">Langkah 2<\/span>\n                            <\/div>\n\n                            <div class=\"row g-2\" id=\"ssg_slot_buttons\">\n                                <div class=\"col-12\">\n                                    <div class=\"alert alert-light border mb-0\">Sila pilih tarikh terlebih dahulu.<\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    \n                    <form id=\"ssg-booking-form\" class=\"needs-validation\" method=\"post\" action=\"https:\/\/ssg.uatstaging.com\/ms\/ms\/wp-json\/wp\/v2\/pages\/26\" novalidate data-trp-original-action=\"https:\/\/ssg.uatstaging.com\/ms\/ms\/wp-json\/wp\/v2\/pages\/26\">\n                        <input type=\"hidden\" id=\"ssg_booking_nonce\" name=\"ssg_booking_nonce\" value=\"60fc8ee21a\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/ms\/wp-json\/wp\/v2\/pages\/26\" \/>                        <input type=\"hidden\" name=\"ssg_booking_form_submitted\" value=\"1\">\n                        <input type=\"hidden\" name=\"ssg_booking_redirect_url\" value=\"https:\/\/ssg.uatstaging.com\/ms\/ms\/wp-json\/wp\/v2\/pages\/26\">\n                        <input type=\"hidden\" id=\"ssg_booking_date\" name=\"booking_date\" value=\"\" required>\n                        <input type=\"hidden\" id=\"ssg_booking_time\" name=\"booking_time\" value=\"\" required>\n\n                        <div class=\"alert alert-light border d-flex align-items-start gap-2 mb-4\" id=\"ssg_selected_appointment_summary\">\n                            <i class=\"bi bi-calendar2-check mt-1\"><\/i>\n                            <div>\n                                <strong>Temujanji Anda<\/strong>\n                                <div class=\"small text-muted\" id=\"ssg_selected_appointment_text\">\n                                    Sila pilih tarikh dan slot masa di atas sebelum menghantar tempahan.\n                                <\/div>\n                                <div class=\"small text-muted mt-1\">\n                                    Butang hantar tempahan akan diaktifkan selepas slot masa dipilih.\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"d-flex align-items-start justify-content-between gap-3 mb-3\">\n                            <div>\n                                <h4 class=\"mb-1\">Maklumat Pelanggan<\/h4>\n                                <p class=\"text-muted mb-0 small\">Isi maklumat anda selepas memilih tarikh dan masa temujanji.<\/p>\n                            <\/div>\n                            <span class=\"badge text-bg-light border\">Langkah 3<\/span>\n                        <\/div>\n\n                        <div class=\"row g-3\">\n                            <div class=\"col-md-6\">\n                                <label for=\"ssg_customer_name\" class=\"form-label\">Nama Penuh <span class=\"text-danger\">*<\/span><\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\"><i class=\"bi bi-person\"><\/i><\/span>\n                                    <input type=\"text\" class=\"form-control\" id=\"ssg_customer_name\" name=\"customer_name\" placeholder=\"Nama Anda\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">\n                                    Please enter your full name.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"col-md-6\">\n                                <label for=\"ssg_customer_phone\" class=\"form-label\">No. Telefon <span class=\"text-danger\">*<\/span><\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\"><i class=\"bi bi-whatsapp\"><\/i><\/span>\n                                    <input type=\"tel\" class=\"form-control\" id=\"ssg_customer_phone\" name=\"customer_phone\" placeholder=\"0123456789\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">\n                                    Please enter your phone number.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"col-md-6\">\n                                <label for=\"ssg_customer_email\" class=\"form-label\">Alamat Emel <span class=\"text-danger\">*<\/span><\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\"><i class=\"bi bi-envelope\"><\/i><\/span>\n                                    <input type=\"email\" class=\"form-control\" id=\"ssg_customer_email\" name=\"customer_email\" placeholder=\"name@email.com\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">\n                                    Please enter a valid email address.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"col-md-6\">\n                                <label for=\"ssg_motorcycle_model\" class=\"form-label\">Model Motosikal <span class=\"text-danger\">*<\/span><\/label>\n                                <div class=\"input-group\">\n                                    <span class=\"input-group-text\"><i class=\"bi bi-scooter\"><\/i><\/span>\n                                    <input type=\"text\" class=\"form-control\" id=\"ssg_motorcycle_model\" name=\"motorcycle_model\" placeholder=\"Example: Sporter S\" required>\n                                <\/div>\n                                <div class=\"invalid-feedback\">\n                                    Please enter your motorcycle model.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"col-12\">\n                                <label for=\"ssg_service_id\" class=\"form-label\">Pilih Servis <span class=\"text-danger\">*<\/span><\/label>\n                                <select class=\"form-select\" id=\"ssg_service_id\" name=\"service_id\" required>\n                                    <option value=\"\">Choose a service<\/option>\n                                                                                                                    <option value=\"51\">\n                                            Basic Service &#8211; Gear Oil Change - RM25.00 - 30 min                                        <\/option>\n                                                                                                                    <option value=\"52\">\n                                            Basic Service Combo (Engine Oil + Gear Oil) - RM40.00 - 30 min                                        <\/option>\n                                                                                                                    <option value=\"50\">\n                                            Basic Service Engine Oil Change - RM15.00 - 30 min                                        <\/option>\n                                                                                                                    <option value=\"48\">\n                                            Custom Handle Installation - RM80.00 - 90 min                                        <\/option>\n                                                                                                                    <option value=\"45\">\n                                            CVT Service - RM50.00 - 90 min                                        <\/option>\n                                                                                                                    <option value=\"49\">\n                                            Flusing Coolant - RM25.00 - 90 min                                        <\/option>\n                                                                                                                    <option value=\"46\">\n                                            Full CVT Detaling - RM60.00 - 120 min                                        <\/option>\n                                                                                                                    <option value=\"47\">\n                                            Steering\/Cone Bearing Service - RM150.00 - 120 min                                        <\/option>\n                                                                    <\/select>\n                                <div class=\"invalid-feedback\">\n                                    Please select a service.\n                                <\/div>\n\n                                                            <\/div>\n\n                            <div class=\"col-12\">\n                                <label for=\"ssg_booking_notes\" class=\"form-label\">Catatan Tambahan<\/label>\n                                <textarea class=\"form-control\" id=\"ssg_booking_notes\" name=\"notes\" rows=\"4\" placeholder=\"Contoh: Gegar bila kelajuan tinggi, nak periksa CVT\u2026\"><\/textarea>\n                            <\/div>\n\n                            <div class=\"col-12\">\n                                <div class=\"alert alert-light border mb-0\">\n                                    <i class=\"bi bi-info-circle me-1\"><\/i>\n                                    Tempahan anda akan dihantar sebagai Menunggu Pengesahan. Admin SSG akan mengesahkan temujanji anda selepas semakan dibuat.\n                                <\/div>\n                            <\/div>\n\n                            <div class=\"col-12 d-grid d-md-flex justify-content-md-end\">\n                                <button type=\"submit\" class=\"btn btn-dark btn-lg px-4\" id=\"ssg_submit_booking_button\" disabled>\n                                    <i class=\"bi bi-send me-1\"><\/i>\n                                    Submit Booking\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <input type=\"hidden\" name=\"trp-form-language\" value=\"ms\"\/><\/form>\n                <\/div>\n            <\/div>\n\n        <\/div>\n    <\/div>\n<\/div><\/div><\/div>\n<\/section><\/main>","protected":false},"excerpt":{"rendered":"<p>Booking Appointment Choose Appointment Date Select a date within the next 2 months, then choose an available time slot. Step 1 Calendar Sun Mon Tue Wed Thu Fri Sat Available Time Slots Select a date to view available slots. Step 2 Please select a date first. Your Appointment Please choose a date and time slot [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-26","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/pages\/26","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/comments?post=26"}],"version-history":[{"count":3,"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/pages\/26\/revisions"}],"predecessor-version":[{"id":36,"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/pages\/26\/revisions\/36"}],"wp:attachment":[{"href":"https:\/\/ssg.uatstaging.com\/ms\/wp-json\/wp\/v2\/media?parent=26"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}