{"id":11,"date":"2026-07-23T11:08:03","date_gmt":"2026-07-23T11:08:03","guid":{"rendered":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/?page_id=11"},"modified":"2026-07-23T11:08:03","modified_gmt":"2026-07-23T11:08:03","slug":"booking","status":"publish","type":"page","link":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"<div class=\"abp-booking-wizard abp-fe-admin-layout\" id=\"abp-booking-wizard\"\n    data-preselected-staff=\"0\">\n\n    <!-- Header -->\n    <div class=\"abp-fe-header\">\n        <div>\n            <h1 class=\"abp-fe-title\">Appointment Booking<\/h1>\n            <p class=\"abp-fe-subtitle\">\n                Create a new booking by filling in the details below.            <\/p>\n        <\/div>\n    <\/div>\n\n    <!-- Main Content Card -->\n    <div class=\"abp-fe-card\" id=\"abp-booking-form-wrapper\">\n        <h3 class=\"abp-fe-card-heading\">\n            Appointment Application Form        <\/h3>\n\n        <!-- Row 1: Location & Department -->\n        <div class=\"abp-fe-form-row abp-fe-2col\">\n            <div class=\"abp-fe-form-group\">\n                <label>Select Location <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <select id=\"abp-form-location\" class=\"abp-fe-input abp-select-field\" required >\n                    <option value=\"\">-- Select Location --                    <\/option>\n                                                                        <option value=\"9\" >\n                                Apex Dental Care (Demo)                                ()\n                            <\/option>\n                                                    <option value=\"8\" >\n                                CareLine Healthcare (Demo)                                ()\n                            <\/option>\n                                                    <option value=\"1\" >\n                                Default Clinic Group                                ()\n                            <\/option>\n                                                            <\/select>\n            <\/div>\n            <div class=\"abp-fe-form-group\">\n                <label>Select Department <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <select id=\"abp-form-department\" class=\"abp-fe-input abp-select-field\" required disabled>\n                    <option value=\"\">-- Select Location First --<\/option>\n                                                                                                                                                                                                                                            <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Row 2: Service & Staff -->\n        <div class=\"abp-fe-form-row abp-fe-2col\">\n            <div class=\"abp-fe-form-group\">\n                <label>Select Service <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <select id=\"abp-form-service\" class=\"abp-fe-input abp-select-field\" required disabled>\n                    <option value=\"\">-- Select Department First --<\/option>\n                <\/select>\n            <\/div>\n            <div class=\"abp-fe-form-group\">\n                <label>Select Staff <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <select id=\"abp-form-staff\" class=\"abp-fe-input abp-select-field\" required disabled>\n                    <option value=\"\">-- Select Service First --<\/option>\n                <\/select>\n            <\/div>\n        <\/div>\n\n        <!-- Row 3: Date & Time Slot (Calendar) -->\n        <div class=\"abp-fe-form-row abp-fe-2col abp-fe-calendar-row\">\n            <div class=\"abp-fe-form-group abp-fe-form-group-mb0\">\n                <label>Select Date <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <div id=\"abp-fe-calendar-wrapper\" class=\"abp-fe-calendar-wrapper\">\n                    <!-- 1-Month Reschedule-style Calendar will render here -->\n                <\/div>\n            <\/div>\n            <div class=\"abp-fe-form-group abp-fe-form-group-mb0\">\n                <label>Available Time Slots <span\n                        class=\"abp-fe-required\">*<\/span><\/label>\n                <div id=\"abp-fe-slots-picker-wrapper\" class=\"abp-fe-slots-picker-wrapper\">\n                    <h4 class=\"abp-fe-slots-picker-title\">\n                        Slots for <span\n                            id=\"abp-fe-active-date-display\" class=\"abp-fe-slots-picker-date\">--<\/span>\n                    <\/h4>\n                    <div id=\"abp-fe-slots-grid\" class=\"abp-slots-grid-picker\">\n                        <div class=\"abp-fe-slots-placeholder\">\n                            Choose a date from the calendar to view slots.                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <!-- Hidden fields for checkout form -->\n        <input type=\"hidden\" id=\"abp-form-date\" value=\"\">\n        <input type=\"hidden\" id=\"abp-form-slot\" value=\"\">\n\n        <!-- Divider -->\n        <div class=\"abp-fe-divider\"><\/div>\n\n        <!-- Customer Information Section -->\n        <h3 class=\"abp-fe-card-heading\">Applicant Information<\/h3>\n\n        \n        <form id=\"abp-checkout-form\" enctype=\"multipart\/form-data\">\n\n            <!-- Row: Name, Email, Phone -->\n            <div class=\"abp-fe-form-row abp-fe-3col\">\n                <div class=\"abp-fe-form-group\">\n                    <label>Customer Name <span\n                            class=\"abp-fe-required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"abp-cust-name\" class=\"abp-fe-input\" required\n                        value=\"\">\n                <\/div>\n                <div class=\"abp-fe-form-group\">\n                    <label>Customer Email <span\n                            class=\"abp-fe-required\">*<\/span><\/label>\n                    <input type=\"email\" id=\"abp-cust-email\" class=\"abp-fe-input\" required\n                        value=\"\">\n                <\/div>\n                <div class=\"abp-fe-form-group\">\n                    <label>Customer Phone <span\n                            class=\"abp-fe-required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"abp-cust-phone\" class=\"abp-fe-input\" required\n                        value=\"\">\n                <\/div>\n            <\/div>\n\n            <!-- Row: Address, DOB, Gender -->\n            <div class=\"abp-fe-form-row abp-fe-3col\">\n                <div class=\"abp-fe-form-group\">\n                    <label>Address<\/label>\n                    <input type=\"text\" id=\"abp-cust-address\" class=\"abp-fe-input\"\n                        value=\"\">\n                <\/div>\n                <div class=\"abp-fe-form-group\">\n                    <label>Date of Birth<\/label>\n                    <input type=\"text\" id=\"abp-cust-dob\" class=\"abp-fe-input abp-date-field\" readonly\n                        value=\"\"\n                        placeholder=\"Select Date of Birth...\">\n                <\/div>\n                <div class=\"abp-fe-form-group\">\n                    <label>Gender<\/label>\n                    <select id=\"abp-cust-gender\" class=\"abp-fe-input abp-select-field\">\n                        <option value=\"\">Select Gender<\/option>\n                        <option value=\"male\" >\n                            Male                        <\/option>\n                        <option value=\"female\" >\n                            Female                        <\/option>\n                        <option value=\"other\" >\n                            Other                        <\/option>\n                    <\/select>\n                <\/div>\n            <\/div>\n\n            <!-- Row: Document Upload -->\n            <div class=\"abp-fe-form-group\">\n                <label>Upload Supporting Document<\/label>\n                <div class=\"abp-fe-file-upload-row\">\n                    <input type=\"file\" id=\"abp-cust-document\" class=\"abp-fe-input\"\n                        accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\">\n                    <input type=\"hidden\" id=\"abp-cust-document-url\" value=\"\">\n                    <span id=\"abp-cust-upload-status\" class=\"abp-fe-upload-status\">\n                                            <\/span>\n                <\/div>\n            <\/div>\n\n            <!-- Row: Notes -->\n            <div class=\"abp-fe-form-group\">\n                <label>Additional Notes<\/label>\n                <textarea id=\"abp-cust-notes\" class=\"abp-fe-input abp-fe-textarea\"\n                    placeholder=\"Please enter any specific details or preferences...\"><\/textarea>\n            <\/div>\n\n        <\/form>\n\n        <!-- Divider -->\n        <div class=\"abp-fe-divider\"><\/div>\n\n        <!-- Amount & Payment Row (like admin) -->\n        <div class=\"abp-fe-amount-row\">\n            <div class=\"abp-coupon-field\">\n                <input type=\"text\" id=\"abp-coupon-code\" class=\"abp-fe-input abp-coupon-input\"\n                    placeholder=\"Coupon Code\">\n                <button class=\"abp-btn abp-btn-secondary abp-coupon-btn\"\n                    id=\"abp-apply-coupon-btn\">Apply<\/button>\n            <\/div>\n            <div class=\"abp-fe-discount-row abp-discount-applied-container\" id=\"abp-discount-row-container\"\n                style=\"display: none;\">\n                <span>Discount:<\/span>\n                <span id=\"abp-discount-val\">-\u20b90.00<\/span>\n            <\/div>\n            <div class=\"abp-fe-total-cell\">\n                <span>Total Amount:<\/span>\n                <span id=\"abp-total-val\"\n                    class=\"abp-fe-total-amount\">\u20b90.00<\/span>\n            <\/div>\n        <\/div>\n\n        <!-- Payment Section Container -->\n        <div id=\"abp-payment-section-wrapper\" style=\"display: none;\">\n            <!-- Payment Methods Selection (Radio Buttons) -->\n            <h3 class=\"abp-fe-card-heading\">Select Payment Method                <span class=\"abp-fe-required\">*<\/span>\n            <\/h3>\n            <div class=\"abp-fe-payment-methods-selector\">\n                <label class=\"abp-fe-pay-method-label abp-payment-method-cash-label abp-fe-hide\">\n                    <input type=\"radio\" name=\"abp_payment_method\" value=\"cash\">\n                    Pay on Spot (Cash)                <\/label>\n                <label class=\"abp-fe-pay-method-label abp-payment-method-razorpay-label abp-fe-hide\">\n                    <input type=\"radio\" name=\"abp_payment_method\" value=\"razorpay\">\n                    Razorpay Online                <\/label>\n                <label class=\"abp-fe-pay-method-label abp-payment-method-bank-label abp-fe-hide\">\n                    <input type=\"radio\" name=\"abp_payment_method\" value=\"bank\">\n                    Bank Transfer                <\/label>\n                <label class=\"abp-fe-pay-method-label abp-payment-method-upi-label abp-fe-hide\">\n                    <input type=\"radio\" name=\"abp_payment_method\" value=\"upi\">\n                    UPI Payment                <\/label>\n            <\/div>\n\n            <!-- Bank Transfer Details Container (Full Width) -->\n            <div id=\"abp-bank-details-container\" class=\"abp-fe-bank-details\" style=\"display: none;\">\n                <h4>Bank Account Details<\/h4>\n                <div class=\"abp-fe-bank-info\" id=\"abp-fe-bank-info-content\"><\/div>\n                <div class=\"abp-fe-form-group abp-fe-form-group-mb20\">\n                    <label>Transaction ID \/ UTR Number <span\n                            class=\"abp-fe-required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"abp-bank-utr\" class=\"abp-fe-input\"\n                        placeholder=\"Enter Bank Transaction ID or UTR...\">\n                <\/div>\n                <div class=\"abp-fe-form-group abp-fe-form-group-mb20\">\n                    <label>Upload Payment Screenshot<\/label>\n                    <input type=\"file\" id=\"abp-bank-screenshot\" class=\"abp-fe-input\" accept=\"image\/*\">\n                    <input type=\"hidden\" id=\"abp-bank-screenshot-url\" value=\"\">\n                    <div id=\"abp-bank-screenshot-status\" class=\"abp-fe-screenshot-status\"><\/div>\n                <\/div>\n                <button type=\"button\"\n                    class=\"abp-btn abp-btn-primary abp-confirm-bank-booking-btn\">I Have Transferred - Confirm<\/button>\n            <\/div>\n\n            <!-- UPI Payment Details Container (Full Width) -->\n            <div id=\"abp-upi-details-container\" class=\"abp-fe-upi-details\" style=\"display: none;\">\n                <h4>UPI Payment Instructions<\/h4>\n                <div class=\"abp-fe-mb12\">\n                    <strong>UPI ID \/ VPA:<\/strong>\n                    <span class=\"abp-fe-upi-vpa\" id=\"abp-fe-upi-vpa-content\"><\/span>\n                <\/div>\n                <div class=\"abp-fe-upi-qr\" id=\"abp-fe-upi-qr-container\">\n                    <img decoding=\"async\" id=\"abp-fe-upi-qr-image\" src=\"\" alt=\"UPI QR\" style=\"display: none; max-width: 200px;\">\n                <\/div>\n                <div class=\"abp-fe-form-group abp-fe-form-group-mb20\">\n                    <label>Transaction ID \/ UTR Number <span\n                            class=\"abp-fe-required\">*<\/span><\/label>\n                    <input type=\"text\" id=\"abp-upi-utr\" class=\"abp-fe-input\"\n                        placeholder=\"Enter 12-digit UPI Transaction ID or UTR...\">\n                <\/div>\n                <div class=\"abp-fe-form-group abp-fe-form-group-mb20\">\n                    <label>Upload Payment Screenshot<\/label>\n                    <input type=\"file\" id=\"abp-upi-screenshot\" class=\"abp-fe-input\" accept=\"image\/*\">\n                    <input type=\"hidden\" id=\"abp-upi-screenshot-url\" value=\"\">\n                    <div id=\"abp-upi-screenshot-status\" class=\"abp-fe-screenshot-status\"><\/div>\n                <\/div>\n                <button type=\"button\"\n                    class=\"abp-btn abp-btn-primary abp-confirm-upi-booking-btn\">I Have Paid - Confirm<\/button>\n            <\/div>\n\n            <!-- Errors Display -->\n            <div id=\"abp-checkout-error-msg\" class=\"abp-fe-checkout-error-alert\" style=\"display: none;\"><\/div>\n\n            <!-- Summary Details (hidden, used by JS) -->\n            <div id=\"abp-summary-details\" style=\"display: none;\"><\/div>\n\n            <!-- Action Buttons Row (like admin) -->\n            <div class=\"abp-fe-actions-row\">\n                <div class=\"abp-fe-payment-buttons\">\n                    <button class=\"abp-btn abp-btn-primary\" id=\"abp-pay-cash\" style=\"display: none;\">\n                        Confirm Appointment (Pay on Spot)                    <\/button>\n                    <button class=\"abp-btn abp-pay-razorpay-btn\" id=\"abp-pay-razorpay\" style=\"display: none;\">\n                        <span class=\"dashicons dashicons-cart abp-pay-razorpay-icon\"><\/span>\n                        Pay &amp; Confirm (Razorpay)                    <\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <!-- Confirmation \/ Success Step -->\n    <div class=\"abp-wizard-step\" id=\"abp-step-success\" style=\"display: none;\">\n        <div class=\"abp-fe-success-container\">\n            <span class=\"dashicons dashicons-yes-alt abp-fe-success-icon\"><\/span>\n            <h2>Booking Confirmed!<\/h2>\n            <p class=\"abp-fe-success-desc\">\n                Thank you. Your appointment has been booked and slot locked successfully. Booking details have been emailed.            <\/p>\n            <div class=\"abp-fe-success-ref-box\">\n                <p class=\"abp-fe-success-ref-text\">\n                    <strong>Booking Reference:<\/strong> <span\n                        id=\"abp-conf-ref\">BK-XXXX<\/span>\n                <\/p>\n            <\/div>\n            <div>\n                <button class=\"abp-btn abp-btn-primary\"\n                    id=\"abp-btn-reload-booking\">Book Another Slot<\/button>\n            <\/div>\n        <\/div>\n    <\/div>\n\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","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-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":1,"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/pages\/11\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/demo.weblizar.com\/appointment-booking-scheduler\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}