{"id":2,"date":"2025-08-24T10:25:49","date_gmt":"2025-08-24T10:25:49","guid":{"rendered":"https:\/\/order.samuraiyakiniku.com\/?page_id=2"},"modified":"2026-01-15T13:48:18","modified_gmt":"2026-01-15T05:48:18","slug":"booking","status":"publish","type":"page","link":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/booking\/","title":{"rendered":"Booking page"},"content":{"rendered":"        <div class=\"rbs-booking-container\" data-theme=\"default\">                            <h2 class=\"rbs-form-title\">Book a Table<\/h2>\n                        \n            <form id=\"rbs-booking-form\" class=\"rbs-booking-form\" method=\"post\">\n                <input type=\"hidden\" id=\"rbs_nonce\" name=\"rbs_nonce\" value=\"bedf2739e8\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/index.php\/wp-json\/wp\/v2\/pages\/2\" \/>\n                <!-- Hidden field to store branch name from shortcode title -->\n                <input type=\"hidden\" id=\"branch_name\" name=\"branch_name\" value=\"Book a Table\">\n\n                <!-- Step 1: Booking Selection -->\n                <div id=\"rbs-step-1\" class=\"rbs-booking-step rbs-step-active\">\n                    <!-- Booking Details -->\n                    <div class=\"rbs-form-section rbs-booking-details\">\n                        <h3>Booking Details<\/h3>\n\n                        <div class=\"rbs-form-row rbs-three-columns\">\n                            <div class=\"rbs-form-field rbs-field-third\">\n                                <label for=\"party_size\">Pax Number (Adult + Child) <span class=\"required\">*<\/span><\/label>\n                                <select id=\"party_size\" name=\"party_size\" required>\n                                    <option value=\"\">Select number of pax<\/option>\n                                                                            <option value=\"1\">1 person<\/option>\n                                                                            <option value=\"2\">2 people<\/option>\n                                                                            <option value=\"3\">3 people<\/option>\n                                                                            <option value=\"4\">4 people<\/option>\n                                                                            <option value=\"5\">5 people<\/option>\n                                                                            <option value=\"6\">6 people<\/option>\n                                                                            <option value=\"7\">7 people<\/option>\n                                                                            <option value=\"8\">8 people<\/option>\n                                                                            <option value=\"9\">9 people<\/option>\n                                                                            <option value=\"10\">10 people<\/option>\n                                                                            <option value=\"11\">11 people<\/option>\n                                                                            <option value=\"12\">12 people<\/option>\n                                                                        <!-- Add option for larger groups -->\n                                    <option value=\"13\">13+ people (Contact us)<\/option>\n                                <\/select>\n\n                                <!-- Large Group Contact Option -->\n                                <div class=\"rbs-large-group-notice\" style=\"display: none;\">\n                                    <div class=\"rbs-large-group-card\">\n                                        <h4>Large Group Booking<\/h4>\n                                        <p>For parties larger than 12 people, please contact us directly to arrange your booking.<\/p>\n                                        <div class=\"rbs-contact-options\">\n                                            <a href=\"tel:+60123456789\" class=\"rbs-contact-btn rbs-phone-btn\">\n                                                <span class=\"rbs-contact-icon\">\ud83d\udcde<\/span>\n                                                Call Us                                            <\/a>\n                                            <a href=\"mailto:wan.aizuddin88@gmail.com\" class=\"rbs-contact-btn rbs-email-btn\">\n                                                <span class=\"rbs-contact-icon\">\u2709\ufe0f<\/span>\n                                                Email Us                                            <\/a>\n                                        <\/div>\n                                    <\/div>\n                                <\/div>\n\n                                <!-- Infant Selection (appears after party size is selected) -->\n                                <div class=\"rbs-infant-section\" style=\"display: none; margin-top: 10px;\">\n                                    <div class=\"rbs-checkbox-field\">\n                                        <input type=\"checkbox\" id=\"has_infants\" name=\"has_infants\" value=\"1\">\n                                        <label for=\"has_infants\">Any infants? (Under 2 years)<\/label>\n                                    <\/div>\n                                    <div class=\"rbs-infant-count-section\" style=\"display: none; margin-top: 5px;\">\n                                        <label for=\"infant_count\">Number of Infants<\/label>\n                                        <select id=\"infant_count\" name=\"infant_count\">\n                                            <option value=\"0\">0 infants<\/option>\n                                            <option value=\"1\">1 infant<\/option>\n                                            <option value=\"2\">2 infants<\/option>\n                                            <option value=\"3\">3 infants<\/option>\n                                        <\/select>\n                                        <small class=\"description\">Infants may require special seating arrangements<\/small>\n                                    <\/div>\n                                <\/div>\n                            <\/div>\n                            <div class=\"rbs-form-field rbs-field-third\">\n                                <label for=\"booking_date\">Date <span class=\"required\">*<\/span><\/label>\n                                <input type=\"date\" id=\"booking_date\" name=\"booking_date\" required\n                                       min=\"2026-04-15\"\n                                       max=\"2026-05-15\">\n                            <\/div>\n                            <div class=\"rbs-form-field rbs-field-third\">\n                                <label for=\"booking_time\">Time <span class=\"required\">*<\/span><\/label>\n                                <select id=\"booking_time\" name=\"booking_time\" required disabled>\n                                    <option value=\"\">Select date and party size first<\/option>\n                                <\/select>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                \n                                <!-- Table Selection -->\n                <div class=\"rbs-form-section rbs-table-selection\" style=\"display: none;\">\n                    <h3>Table Selection<\/h3>\n                    <div class=\"rbs-table-selector-info\">\n                        <p>Select your preferred table(s) below. This is the actual table layout in our restaurant.<\/p>\n                    <\/div>\n                    <div id=\"rbs-table-layout\" class=\"rbs-table-layout\">\n                        <div class=\"rbs-loading\">Loading available tables...<\/div>\n                    <\/div>\n                    <input type=\"hidden\" id=\"selected_tables\" name=\"selected_tables\" value=\"\">\n                    <div class=\"rbs-table-selection-summary\" style=\"display: none;\">\n                        <p><strong>Selected:<\/strong> <span id=\"selected-tables-display\"><\/span><\/p>\n                    <\/div>\n                <\/div>\n                                \n                                        <!-- Special Requests -->\n                    <div class=\"rbs-form-section rbs-special-requests\">\n                        <h3>Special Requests<\/h3>\n                        <div class=\"rbs-form-field\">\n                            <label for=\"special_requests\">Any special requests or dietary requirements?<\/label>\n                            <textarea id=\"special_requests\" name=\"special_requests\" rows=\"3\"\n                                      placeholder=\"Optional: Let us know about any special requirements, allergies, or preferences...\"><\/textarea>\n                        <\/div>\n                    <\/div>\n                    \n                    <!-- Step 1 Actions -->\n                    <div class=\"rbs-form-section rbs-step-actions\">\n                        <div class=\"rbs-form-messages\"><\/div>\n                        <button type=\"button\" id=\"rbs-continue-to-step2\" class=\"rbs-continue-btn\" disabled>\n                            <span class=\"rbs-btn-text\">Continue to Customer Details<\/span>\n                        <\/button>\n                    <\/div>\n                <\/div>\n\n                <!-- Step 2: Customer Details & Checkout -->\n                <div id=\"rbs-step-2\" class=\"rbs-booking-step rbs-step-hidden\">\n                    <!-- Booking Summary -->\n                    <div class=\"rbs-form-section rbs-booking-summary\">\n                        <h3>Booking Summary<\/h3>\n                        <div id=\"rbs-summary-content\">\n                            <!-- Will be populated by JavaScript -->\n                        <\/div>\n                    <\/div>\n\n                    <!-- Customer Information -->\n                    <div class=\"rbs-form-section rbs-customer-info\">\n                        <h3>Customer Information<\/h3>\n\n                        <div class=\"rbs-form-row\">\n                            <div class=\"rbs-form-field rbs-field-half\">\n                                <label for=\"customer_name\">Full Name <span class=\"required\">*<\/span><\/label>\n                                <input type=\"text\" id=\"customer_name\" name=\"customer_name\" required>\n                            <\/div>\n\n                            <div class=\"rbs-form-field rbs-field-half\">\n                                <label for=\"customer_email\">Email Address <span class=\"required\">*<\/span><\/label>\n                                <input type=\"email\" id=\"customer_email\" name=\"customer_email\" required>\n                            <\/div>\n                        <\/div>\n\n                        <div class=\"rbs-form-row\">\n                            <div class=\"rbs-form-field rbs-field-half\">\n                                <label for=\"customer_phone\">Phone Number <span class=\"required\">*<\/span><\/label>\n                                <input type=\"tel\" id=\"customer_phone\" name=\"customer_phone\" required>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Payment Summary -->\n                    <div class=\"rbs-form-section rbs-payment-summary\">\n                        <h3>Payment Summary<\/h3>\n                        <div class=\"rbs-payment-details\">\n                            <div class=\"rbs-payment-row\">\n                                <span class=\"rbs-payment-label\">Pax Number:<\/span>\n                                <span class=\"rbs-payment-amount\" id=\"rbs-payment-party-size\">-<\/span>\n                            <\/div>\n                            <div class=\"rbs-payment-row\">\n                                <span class=\"rbs-payment-label\">Price per person:<\/span>\n                                <span class=\"rbs-payment-amount\">RM 5.00<\/span>\n                            <\/div>\n                            <div class=\"rbs-payment-row rbs-payment-total\">\n                                <span class=\"rbs-payment-label\">Total Amount:<\/span>\n                                <span id=\"rbs-payment-total\" class=\"rbs-payment-amount\">RM 0.00<\/span>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Step 2 Actions -->\n                    <div class=\"rbs-form-section rbs-form-actions\">\n                        <div class=\"rbs-form-messages\"><\/div>\n                        <div class=\"rbs-step2-buttons\">\n                            <button type=\"button\" id=\"rbs-back-to-step1\" class=\"rbs-back-btn\">\n                                \u2190 Back to Booking Details                            <\/button>\n                            <button type=\"submit\" class=\"rbs-submit-btn\" disabled>\n                                <span class=\"rbs-btn-text\">\n                                    Complete Booking & Pay                                <\/span>\n                                <span class=\"rbs-btn-loading\" style=\"display: none;\">Processing...<\/span>\n                            <\/button>\n                        <\/div>\n\n                                                <p class=\"rbs-payment-info\">\n                            You will be redirected to complete payment after booking confirmation.                        <\/p>\n                                            <\/div>\n                <\/div>\n            <\/form>\n        <\/div>\n        \n        <!-- Booking Success Modal -->\n        <div id=\"rbs-success-modal\" class=\"rbs-modal\" style=\"display: none;\">\n            <div class=\"rbs-modal-content\">\n                <div class=\"rbs-modal-header\">\n                    <h3>Booking Confirmed!<\/h3>\n                    <span class=\"rbs-modal-close\">&times;<\/span>\n                <\/div>\n                <div class=\"rbs-modal-body\">\n                    <div class=\"rbs-success-icon\">\u2713<\/div>\n                    <div id=\"rbs-booking-details\"><\/div>\n                    <div class=\"rbs-modal-actions\">\n                                                <button id=\"rbs-proceed-payment\" class=\"rbs-btn rbs-btn-primary\">Proceed to Payment<\/button>\n                                                <button id=\"rbs-close-modal\" class=\"rbs-btn rbs-btn-secondary\">Close<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Branch Confirmation Dialog -->\n        <div id=\"rbs-branch-confirmation-modal\" class=\"rbs-modal\" style=\"display: none;\">\n            <div class=\"rbs-modal-content\">\n                <div class=\"rbs-modal-header\">\n                    <h3>Confirm Your Branch Selection<\/h3>\n                    <span class=\"rbs-modal-close\">&times;<\/span>\n                <\/div>\n                <div class=\"rbs-modal-body\">\n                    <div class=\"rbs-branch-confirmation-content\">\n                        <div class=\"rbs-branch-icon\"><\/div>\n                        <p class=\"rbs-branch-message\">\n                            You are about to make a reservation at:                        <\/p>\n                        <div class=\"rbs-selected-branch\">\n                            <strong id=\"rbs-selected-branch-name\"><\/strong>\n                        <\/div>\n                        <p class=\"rbs-branch-question\">\n                            Is this the correct branch for your reservation?                        <\/p>\n                    <\/div>\n                <\/div>\n                <div class=\"rbs-modal-footer\">\n                    <button type=\"button\" class=\"rbs-btn rbs-btn-secondary\" id=\"rbs-choose-other-branch\">\n                        Choose Other Branch                    <\/button>\n                    <button type=\"button\" class=\"rbs-btn rbs-btn-primary\" id=\"rbs-confirm-branch\">\n                        Yes, Continue Booking                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n        <p><\/p>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":1,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":103046,"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/pages\/2\/revisions\/103046"}],"wp:attachment":[{"href":"https:\/\/reserve.samuraiyakiniku.com\/index.php\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}