{"id":10,"date":"2026-05-26T09:31:53","date_gmt":"2026-05-26T09:31:53","guid":{"rendered":"https:\/\/demo.digitalcardcreator.com\/?page_id=10"},"modified":"2026-05-26T09:31:53","modified_gmt":"2026-05-26T09:31:53","slug":"booking-page","status":"publish","type":"page","link":"https:\/\/demo.digitalcardcreator.com\/index.php\/booking-page\/","title":{"rendered":"Booking Page"},"content":{"rendered":"<div id=\"bookwellab_frontend_app\" v-cloak\n    class=\"bw-app-wrapper alignwide alignfull bw-ltr\"\n    dir=\"ltr\"\n    lang=\"en-US\"\n    data-staff-id=\"\"\n    data-service-id=\"\"\n    style=\"width: 100%; max-width: 100%;\">\n\n    <!-- Vue App Mount Point -->\n    <div class=\"bw-frontend-wrapper bw-force-fullwidth alignwide alignfull\" style=\"width: 100%; max-width: 100%;\">\n        <!-- Steps Component will be rendered here -->\n        <booking-wizard><\/booking-wizard>\n    <\/div>\n<\/div>\n\n<script type=\"text\/x-template\" id=\"booking-wizard-template\">\n    <div class=\"bw-wizard-container\" :class=\"{ 'bw-sidebar-collapsed': isSidebarCollapsed }\">\n        <!-- Sidebar Progress -->\n        <div class=\"bw-wizard-sidebar\">\n    <div class=\"bw-sidebar-steps\">\n        <div class=\"bw-sidebar-step\" :class=\"{ active: currentStep === 1, completed: currentStep > 1 }\"\n            v-if=\"!sc_service_id\" @click=\"currentStep = 1\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"14\" height=\"17\" viewBox=\"0 0 14 17\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                <path d=\"M11.6797 3.32031H10C10 1.48438 8.51562 0 6.67969 0C4.84375 0 3.35938 1.48438 3.35938 3.32031H1.67969C0.78125 3.32031 0 4.0625 0 5V15C0 15.8984 0.78125 16.6406 1.67969 16.6406H11.6797C12.5781 16.6406 13.3594 15.8984 13.3594 15V5C13.3594 4.0625 12.5781 3.32031 11.6797 3.32031ZM5 6.64062C5 7.10938 4.64844 7.5 4.17969 7.5C3.71094 7.5 3.35938 7.10938 3.35938 6.64062V5H5V6.64062ZM6.67969 1.64062C7.57812 1.64062 8.35938 2.42188 8.35938 3.32031H5C5 2.42188 5.78125 1.64062 6.67969 1.64062ZM10 6.64062C10 7.10938 9.64844 7.5 9.17969 7.5C8.71094 7.5 8.35938 7.10938 8.35938 6.64062V5H10V6.64062Z\" fill=\"white\"\/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_service }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.service_id ? getServiceName(bookingData.service_id) :\n                    labels.select_service }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: currentStep === 2, completed: currentStep > 2 }\"\n            v-if=\"!sc_staff_id && !hideStaffStep\" @click=\"bookingData.service_id ? currentStep = 2 : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path\n                        d=\"M6.67969 6.67969C8.51562 6.67969 10 5.19531 10 3.35938C10 1.52344 8.51562 0 6.67969 0C4.84375 0 3.35938 1.52344 3.35938 3.35938C3.35938 5.19531 4.84375 6.67969 6.67969 6.67969ZM6.67969 8.35938C4.45312 8.35938 0 9.45312 0 11.6797V12.5C0 12.9688 0.390625 13.3594 0.859375 13.3594H12.5C12.9688 13.3594 13.3594 12.9688 13.3594 12.5V11.6797C13.3594 9.45312 8.90625 8.35938 6.67969 8.35938Z\" \/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_staff }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.staff_id ? getStaffName(bookingData.staff_id) :\n                    labels.any_staff }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: currentStep === 3, completed: currentStep > 3 }\"\n            @click=\"bookingData.staff_id ? currentStep = 3 : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"17\" height=\"19\" viewBox=\"0 0 17 19\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path\n                        d=\"M15 1.67969H14.1406V0.859375C14.1406 0.390625 13.7891 0 13.3203 0C12.8516 0 12.5 0.390625 12.5 0.859375V1.67969H4.14062V0.859375C4.14062 0.390625 3.78906 0 3.32031 0C2.85156 0 2.5 0.390625 2.5 0.859375V1.67969H1.64062C0.742188 1.67969 0 2.42188 0 3.35938V16.6797C0 17.5781 0.742188 18.3594 1.64062 18.3594H15C15.8984 18.3594 16.6406 17.5781 16.6406 16.6797V3.35938C16.6406 2.42188 15.8984 1.67969 15 1.67969ZM14.1406 16.6797H2.5C2.03125 16.6797 1.64062 16.2891 1.64062 15.8594V5.85938H15V15.8594C15 16.2891 14.6094 16.6797 14.1406 16.6797Z\" \/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_date_time }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.date ? formatDate(bookingData.date) + ' ' +\n                    (bookingData.time ? formatTime(bookingData.time) : '') : labels.select_date }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: currentStep === 4, completed: currentStep > 4 }\"\n            @click=\"bookingData.time ? currentStep = 4 : null\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path\n                        d=\"M6.67969 1.60156C7.65625 1.60156 8.4375 2.38281 8.4375 3.35938C8.4375 4.29688 7.65625 5.07812 6.67969 5.07812C5.70312 5.07812 4.92188 4.29688 4.92188 3.35938C4.92188 2.38281 5.70312 1.60156 6.67969 1.60156ZM6.67969 9.10156C9.14062 9.10156 11.7578 10.3125 11.7578 10.8594V11.7578H1.60156V10.8594C1.60156 10.3125 4.21875 9.10156 6.67969 9.10156ZM6.67969 0C4.84375 0 3.35938 1.52344 3.35938 3.35938C3.35938 5.19531 4.84375 6.67969 6.67969 6.67969C8.51562 6.67969 10 5.19531 10 3.35938C10 1.52344 8.51562 0 6.67969 0ZM6.67969 7.5C4.45312 7.5 0 8.63281 0 10.8594V12.5C0 12.9688 0.390625 13.3594 0.859375 13.3594H12.5C12.9688 13.3594 13.3594 12.9688 13.3594 12.5V10.8594C13.3594 8.63281 8.90625 7.5 6.67969 7.5Z\" \/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_details }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ bookingData.customer.first_name ? bookingData.customer.first_name + ' '\n                    + bookingData.customer.last_name : labels.your_info }}<\/div>\n            <\/div>\n        <\/div>\n\n        <div class=\"bw-sidebar-step\" :class=\"{ active: currentStep === 5, completed: currentStep > 5 }\"\n            @click=\"currentStep === 5\">\n            <div class=\"bw-sidebar-step-icon\">\n                <svg width=\"14\" height=\"17\" viewBox=\"0 0 14 17\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path\n                        d=\"M8.82812 0.46875C8.51562 0.15625 8.08594 0 7.65625 0H1.67969C0.78125 0 0 0.742188 0 1.64062V15C0 15.8984 0.742188 16.6406 1.67969 16.6406H11.6797C12.5781 16.6406 13.3594 15.8984 13.3594 15V5.66406C13.3594 5.23438 13.1641 4.80469 12.8516 4.49219L8.82812 0.46875ZM9.17969 13.3203H4.17969C3.71094 13.3203 3.35938 12.9297 3.35938 12.5C3.35938 12.0312 3.71094 11.6406 4.17969 11.6406H9.17969C9.64844 11.6406 10 12.0312 10 12.5C10 12.9297 9.64844 13.3203 9.17969 13.3203ZM9.17969 10H4.17969C3.71094 10 3.35938 9.60938 3.35938 9.14062C3.35938 8.71094 3.71094 8.32031 4.17969 8.32031H9.17969C9.64844 8.32031 10 8.71094 10 9.14062C10 9.60938 9.64844 10 9.17969 10ZM7.5 5V1.25L12.1094 5.82031H8.35938C7.89062 5.82031 7.5 5.42969 7.5 5Z\" \/>\n                <\/svg>\n            <\/div>\n            <div class=\"bw-sidebar-step-text\">\n                <div class=\"bw-step-title\">{{ labels.sidebar_summary }}<\/div>\n                <div class=\"bw-step-subtitle\">{{ labels.checkout }}<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n\n    <\/div>\n\n\n<div class=\"bw-wizard-content\">\n    <!-- Content Header -->\n    <div class=\"bw-wizard-content-header\" v-if=\"currentStep <= 6\">\n        <div class=\"bw-content-back-spacer\"><\/div>\n        <h2 class=\"bw-content-title\">\n            <span v-if=\"currentStep === 1\">{{ labels.service_content_title }}<\/span>\n            <span v-if=\"currentStep === 2\">{{ labels.staff_content_title }}<\/span>\n            <span v-if=\"currentStep === 3\">{{ labels.date_content_title }}<\/span>\n            <span v-if=\"currentStep === 4\">{{ labels.details_content_title }}<\/span>\n            <span v-if=\"currentStep === 5\">{{ labels.summary_content_title }}<\/span>\n            <span v-if=\"currentStep === 6\">{{ labels.booking_confirmed_title }}<\/span>\n        <\/h2>\n    <\/div>\n\n    <div class=\"bw-wizard-content-body\">\n        <div v-if=\"globalError\" class=\"bw-error-msg bw-error-msg--inline\" role=\"alert\" aria-live=\"assertive\">\n            <span class=\"bw-error-msg-icon\">!<\/span>\n            <span class=\"bw-error-msg-text\">{{ globalError }}<\/span>\n            <button type=\"button\" class=\"bw-error-msg-close\" @click=\"dismissGlobalError\"\n                aria-label=\"Close error message\">\u00d7<\/button>\n        <\/div>\n\n    <!-- Step 1: Services -->\n    <div v-if=\"currentStep === 1\" class=\"bw-step-wrapper bw-step-services bw-bp-design\">\n        <div v-if=\"!hideCategories\" class=\"bw-category-filter bw-bp-category-filter\">\n            <button :class=\"{ active: activeCategory === 'all' }\" @click=\"activeCategory = 'all'\">\n                {{ labels.all_categories }}\n                <svg v-if=\"activeCategory === 'all'\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\"\n                    fill=\"currentColor\" class=\"bi bi-check-circle-fill\" viewBox=\"0 0 16 16\"\n                    style=\"margin-left: 4px; vertical-align: text-bottom;\">\n                    <path\n                        d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\" \/>\n                <\/svg>\n            <\/button>\n            <button v-for=\"cat in categories\" :key=\"cat.bw_category_id\"\n                :class=\"{ active: activeCategory === cat.bw_category_id }\" @click=\"activeCategory = cat.bw_category_id\">\n                {{ cat.bw_category_name }}\n                <svg v-if=\"activeCategory === cat.bw_category_id\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\"\n                    height=\"16\" fill=\"currentColor\" class=\"bi bi-check-circle-fill\" viewBox=\"0 0 16 16\"\n                    style=\"margin-left: 4px; vertical-align: text-bottom;\">\n                    <path\n                        d=\"M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z\" \/>\n                <\/svg>\n            <\/button>\n        <\/div>\n\n        <h3 class=\"bw-bp-section-title\" style=\"margin-top: 30px;\">{{ labels.select_service }}<\/h3>\n        <div class=\"bw-bp-service-list\">\n            <div v-for=\"service in computedServices\" :key=\"service.bw_service_id\" class=\"bw-bp-service-card\"\n                :class=\"{ 'selected': bookingData.service_id === service.bw_service_id }\"\n                @click=\"selectService(service)\">\n                <div class=\"bw-bp-service-icon\">\n                    <img v-if=\"service.bw_service_image\" :src=\"service.bw_service_image\" class=\"bw-bp-service-icon-img\"\n                        alt=\"Service Image\">\n                    <svg v-else xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"28\" height=\"28\" fill=\"#a0aec0\"\n                        viewBox=\"0 0 16 16\">\n                        <path d=\"M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0\" \/>\n                        <path\n                            d=\"M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2h-12zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1h12z\" \/>\n                    <\/svg>\n                <\/div>\n                <div class=\"bw-bp-service-info\">\n                    <h4 class=\"bw-bp-service-name\">{{ service.bw_service_name }}<\/h4>\n                    <div class=\"bw-bp-service-meta\">\n                        <span class=\"bw-bp-meta-duration\">\n                            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"14\" height=\"14\" fill=\"currentColor\"\n                                class=\"bi bi-clock bw-bp-meta-duration-icon\" viewBox=\"0 0 16 16\">\n                                <path\n                                    d=\"M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z\" \/>\n                                <path d=\"M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0\" \/>\n                            <\/svg>\n                            {{ formatDuration(service.bw_service_duration_val, service.bw_service_duration_unit) }}\n                        <\/span>\n                        <span class=\"bw-bp-price-badge\">{{ displayPrice(service.bw_service_price) }}<\/span>\n                    <\/div>\n                    <p class=\"bw-bp-service-description\" v-if=\"service.bw_service_description\">{{ service.bw_service_description }}<\/p>\n                <\/div>\n            <\/div>\n            <div v-if=\"loadingServices\" class=\"bw-loading-slots-container\">\n                <div class=\"bw-3dot-loader\">\n                    <div><\/div><div><\/div><div><\/div>\n                <\/div>\n            <\/div>\n            <div v-else-if=\"computedServices.length === 0\" style=\"text-align:center; width:100%; padding: 20px; color: var(--bw-subtitle-color); font-size: var(--bw-subtitle-size);\">\n                {{ labels.no_services }}\n            <\/div>\n        <\/div>\n\n    <\/div>\n\n    <div v-if=\"currentStep === 1\" class=\"bw-bp-nav-footer right-only\">\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n    <\/div>\n\n    <!-- Step 2: Staff -->\n    <div v-if=\"currentStep === 2 && !hideStaffStep\" class=\"bw-step-wrapper bw-step-staff bw-bp-design\">\n        <div v-if=\"loadingStaff\" class=\"bw-loading-slots-container\">\n            <div class=\"bw-3dot-loader\">\n                <div><\/div><div><\/div><div><\/div>\n            <\/div>\n        <\/div>\n        <div v-else class=\"bw-bp-staff-grid\">\n            <div v-for=\"s in staff\" :key=\"s.bw_staff_id\" class=\"bw-bp-staff-card\"\n                :class=\"{ 'selected': bookingData.staff_id === s.bw_staff_id }\" @click=\"selectStaff(s)\">\n                <img :src=\"s.bw_staff_image || 'placeholder.jpg'\" alt=\"\" class=\"bw-bp-staff-img\">\n                <h4 class=\"bw-bp-staff-name\">{{ s.bw_staff_name }}<\/h4>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"currentStep === 2 && !hideStaffStep\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\">{{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n    <\/div>\n\n    <!-- Step 3: Date & Time -->\n    <div v-if=\"currentStep === 3\" class=\"bw-step-wrapper bw-step-datetime\">\n        <div class=\"bw-datetime-container\">\n            <div class=\"bw-calendar-wrapper\">\n                <div class=\"bw-custom-calendar\">\n                    <div class=\"bw-calendar-header\">\n                        <span class=\"bw-cal-nav\" :class=\"{ 'bw-cal-nav-disabled': !canGoToPreviousMonth || loadingMonthAvailability }\" @click=\"prevMonth\">&lt;<\/span>\n                        <span class=\"bw-cal-title\">{{ formatMonthYear }}<\/span>\n                        <span class=\"bw-cal-nav\" :class=\"{ 'bw-cal-nav-disabled': loadingMonthAvailability }\" @click=\"nextMonth\">&gt;<\/span>\n                    <\/div>\n                    <div class=\"bw-calendar-body\">\n                        <div v-if=\"loadingMonthAvailability\" class=\"bw-loading-calendar-container\">\n                            <div class=\"bw-3dot-loader\">\n                                <div><\/div><div><\/div><div><\/div>\n                            <\/div>\n                        <\/div>\n                        <template v-else>\n                            <div class=\"bw-cal-weekdays\">\n                                <span>Mon<\/span><span>Tue<\/span><span>Wed<\/span><span>Thu<\/span><span>Fri<\/span><span>Sat<\/span><span>Sun<\/span>\n                            <\/div>\n                            <div class=\"bw-cal-days\">\n                                <div v-for=\"(dayObj, index) in calendarDays\" :key=\"index\" class=\"bw-cal-day\" :class=\"{\n                                            'bw-cal-disabled': dayObj.disabled || isDateDisabled(dayObj),\n                                            'bw-cal-outside': !dayObj.isCurrentMonth,\n                                            'bw-cal-selected': (bookingData.date === `${dayObj.date.getFullYear()}-${String(dayObj.date.getMonth() + 1).padStart(2,'0')}-${String(dayObj.date.getDate()).padStart(2,'0')}`)\n                                        }\" @click=\"selectCustomDate(dayObj)\">\n                                    {{ dayObj.dayNo }}\n                                <\/div>\n                            <\/div>\n                        <\/template>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"bw-slots-wrapper\">\n                <h3 class=\"bw-slots-title\">{{ labels.time_slot }}<\/h3>\n                <div class=\"bw-slots-inner\">\n                    <div v-if=\"loadingSlots\" class=\"bw-loading-slots-container\">\n                        <div class=\"bw-3dot-loader\">\n                            <div><\/div><div><\/div><div><\/div>\n                        <\/div>\n                    <\/div>\n                    <div v-else-if=\"slots.length === 0 && selectedDate\" style=\"padding: 10px;\">{{ labels.no_slots }}\n                    <\/div>\n                    <div v-else-if=\"!selectedDate\" class=\"bw-date-select-first\">{{ labels.please_select_date_first }}\n                    <\/div>\n                    <div v-else>\n                        <div v-if=\"morningSlots.length > 0\" class=\"bw-slot-group\">\n                            <h4>{{ labels.morning }}<\/h4>\n                            <div class=\"bw-slot-list\">\n                                <button v-for=\"slot in morningSlots\" :key=\"slot\" class=\"bw-slot-btn\"\n                                    :class=\"{ 'selected': bookingData.time === slot }\" @click=\"selectSlot(slot)\">\n                                    {{ formatSlotRange(slot) }}\n                                <\/button>\n                            <\/div>\n                        <\/div>\n\n                        <div v-if=\"afternoonSlots.length > 0\" class=\"bw-slot-group mt-15\">\n                            <h4>{{ labels.afternoon }}<\/h4>\n                            <div class=\"bw-slot-list\">\n                                <button v-for=\"slot in afternoonSlots\" :key=\"slot\" class=\"bw-slot-btn\"\n                                    :class=\"{ 'selected': bookingData.time === slot }\" @click=\"selectSlot(slot)\">\n                                    {{ formatSlotRange(slot) }}\n                                <\/button>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"currentStep === 3\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\">{{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n    <\/div>\n\n    <!-- Step 4: Customer Details -->\n    <div v-show=\"currentStep === 4\" class=\"bw-step-wrapper bw-step-details\">\n        <el-form label-position=\"top\">\n            <el-form-item :label=\"labels.phone\" required :class=\"{ 'bw-input-error': errors.phone }\">\n                <div class=\"bw-phone-container\">\n                    <input type=\"tel\" id=\"bw-phone-input\" :value=\"bookingData.customer.phone\"\n                        inputmode=\"numeric\" pattern=\"[0-9]*\" autocomplete=\"tel-national\">\n                <\/div>\n            <\/el-form-item>\n            <el-form-item :label=\"labels.first_name\" required :class=\"{ 'bw-input-error': errors.first_name }\">\n                <el-input v-model=\"bookingData.customer.first_name\" @input=\"errors.first_name = false\"><\/el-input>\n            <\/el-form-item>\n            <el-form-item :label=\"labels.last_name\" required :class=\"{ 'bw-input-error': errors.last_name }\">\n                <el-input v-model=\"bookingData.customer.last_name\" @input=\"errors.last_name = false\"><\/el-input>\n            <\/el-form-item>\n            <el-form-item :label=\"labels.email\" required :class=\"{ 'bw-input-error': errors.email }\">\n                <el-input v-model=\"bookingData.customer.email\" @input=\"errors.email = false\"><\/el-input>\n            <\/el-form-item>\n            <el-form-item :label=\"labels.notes\">\n                <el-input type=\"textarea\" v-model=\"bookingData.customer.note\"><\/el-input>\n            <\/el-form-item>\n        <\/el-form>\n    <\/div>\n\n    <div v-show=\"currentStep === 4\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\"> {{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" @click=\"nextStep\">{{ labels.next }}<\/button>\n    <\/div>\n\n    <!-- Step 5: Summary -->\n    <div v-show=\"currentStep === 5\" class=\"bw-step-wrapper bw-step-summary-redesign\">\n        <div class=\"bw-summary-split\">\n            <!-- Left: Details Card -->\n            <div class=\"bw-summary-details-column\">\n                <div class=\"bw-summary-card-v2\">\n                    <div class=\"bw-summary-item-v2\" v-if=\"!sc_service_id\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"25\" viewBox=\"0 0 20 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M16.8817 4.79915H14.4539C14.4539 2.1455 12.3084 0 9.65476 0C7.00112 0 4.85561 2.1455 4.85561 4.79915H2.42781C1.12921 4.79915 0 5.8719 0 7.22696V21.6809C0 22.9795 1.12921 24.0522 2.42781 24.0522H16.8817C18.1803 24.0522 19.3095 22.9795 19.3095 21.6809V7.22696C19.3095 5.8719 18.1803 4.79915 16.8817 4.79915ZM9.65476 2.37135C10.9534 2.37135 12.0826 3.50056 12.0826 4.79915H7.22696C7.22696 3.50056 8.35617 2.37135 9.65476 2.37135ZM16.8817 21.6809H2.42781V7.22696H4.85561V9.5983C4.85561 10.2758 5.36376 10.8404 6.04129 10.8404C6.71881 10.8404 7.22696 10.2758 7.22696 9.5983V7.22696H12.0826V9.5983C12.0826 10.2758 12.5907 10.8404 13.2682 10.8404C13.9458 10.8404 14.4539 10.2758 14.4539 9.5983V7.22696H16.8817V21.6809Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.service_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getServiceName(bookingData.service_id) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\" v-if=\"bookingData.service_id\">{{ getServiceDuration(bookingData.service_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"!hideStaffStep\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M9.6378 2.42354C10.9341 2.42354 12.0613 3.49441 12.0613 4.84708C12.0613 6.14339 10.9341 7.21426 9.6378 7.21426C8.34148 7.21426 7.21426 6.14339 7.21426 4.84708C7.21426 3.49441 8.34148 2.42354 9.6378 2.42354ZM9.6378 14.4285C12.9068 14.4285 16.6266 16.0066 16.8521 16.8521H2.42354C2.70535 16.0066 6.4252 14.4285 9.6378 14.4285ZM9.6378 0C6.98881 0 4.84708 2.19809 4.84708 4.84708C4.84708 7.49606 6.98881 9.6378 9.6378 9.6378C12.2868 9.6378 14.4285 7.49606 14.4285 4.84708C14.4285 2.19809 12.2868 0 9.6378 0ZM9.6378 12.0613C6.4252 12.0613 0 13.6395 0 16.8521V19.2756H19.2756V16.8521C19.2756 13.6395 12.8504 12.0613 9.6378 12.0613Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.staff_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getStaffName(bookingData.staff_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M17.2181 1.92806H16.2316V0H14.3484V1.92806H4.7529V0H2.86968V1.92806H1.88323C0.851935 1.92806 0 2.78 0 3.85613V19.1461C0 20.1774 0.851935 21.0742 1.88323 21.0742H17.2181C18.2494 21.0742 19.1013 20.1774 19.1013 19.1461V3.85613C19.1013 2.78 18.2494 1.92806 17.2181 1.92806ZM17.2181 19.1461H1.88323V8.60903H17.2181V19.1461ZM17.2181 6.72581H1.88323V3.85613H17.2181V6.72581Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.sidebar_date_time || 'Schedule' }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ formatDate(bookingData.date) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\">{{ formatTime(bookingData.time) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <path d=\"M9.6378 0C4.29855 0 0 4.29855 0 9.6378C0 14.977 4.29855 19.2756 9.6378 19.2756C14.977 19.2756 19.2756 14.977 19.2756 9.6378C19.2756 4.29855 14.977 0 9.6378 0ZM5.15826 15.9272C6.4252 15.0223 7.96362 14.4793 9.6378 14.4793C11.312 14.4793 12.8504 15.0223 14.1173 15.9272C12.8504 16.8322 11.312 17.3752 9.6378 17.3752C7.96362 17.3752 6.4252 16.8322 5.15826 15.9272ZM15.5653 14.5698C13.9363 13.3029 11.8549 12.5337 9.6378 12.5337C7.42065 12.5337 5.33925 13.3029 3.71033 14.5698C2.57913 13.2576 1.90041 11.5382 1.90041 9.6378C1.90041 5.3845 5.3845 1.90041 9.6378 1.90041C13.8911 1.90041 17.3752 5.3845 17.3752 9.6378C17.3752 11.5382 16.6965 13.2576 15.5653 14.5698ZM9.6378 3.84607C7.78263 3.84607 6.24421 5.33925 6.24421 7.23966C6.24421 9.09482 7.78263 10.588 9.6378 10.588C11.493 10.588 13.0314 9.09482 13.0314 7.23966C13.0314 5.33925 11.493 3.84607 9.6378 3.84607ZM9.6378 8.68759C8.82333 8.68759 8.18986 8.00887 8.18986 7.23966C8.18986 6.4252 8.82333 5.79173 9.6378 5.79173C10.4523 5.79173 11.0857 6.4252 11.0857 7.23966C11.0857 8.00887 10.4523 8.68759 9.6378 8.68759Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.customer_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <!-- Right: Payment & Total -->\n            <div class=\"bw-summary-payment-column\">\n                <div class=\"bw-payment-gateways-v2\" v-if=\"paymentOptions.length > 0\">\n                    <h4 class=\"bw-payment-title-v2\">{{ labels.payment_method }}<\/h4>\n                    <div class=\"bw-payment-methods-grid\">\n                        <div v-for=\"option in paymentOptions\" :key=\"option.value\" \n                            class=\"bw-payment-method-card\"\n                            :class=\"{ 'selected': bookingData.payment_gateway === option.value }\"\n                            @click=\"bookingData.payment_gateway = option.value\">\n                            <div class=\"bw-payment-method-label\">{{ option.label }}<\/div>\n                            <div class=\"bw-payment-method-radio\">\n                                <div class=\"bw-radio-outer\">\n                                    <div class=\"bw-radio-inner\" v-if=\"bookingData.payment_gateway === option.value\"><\/div>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <div class=\"bw-summary-total-section\">\n                    <div class=\"bw-total-label-row\">\n                        <span class=\"bw-total-text\">{{ labels.total_label }}<\/span>\n                        <span class=\"bw-total-amount\">{{ displayPrice(bookingData.service_price) }}<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div v-if=\"currentStep === 5\" class=\"bw-nav-buttons bw-bp-nav-footer\">\n        <button class=\"bw-btn-back\" @click=\"prevStep\"> {{ labels.back }}<\/button>\n        <button class=\"bw-btn-continue\" :class=\"{'is-loading': submitting}\" :disabled=\"submitting\" @click=\"submitBooking\">\n            <span v-if=\"!submitting\">{{ labels.confirm_booking }}<\/span>\n            <span v-else class=\"bw-dots-loader\">\n                <span><\/span>\n                <span><\/span>\n                <span><\/span>\n            <\/span>\n        <\/button>\n    <\/div>\n\n    <!-- Step 6: Booking confirmed (same split layout as summary) -->\n    <div v-if=\"currentStep === 6\" class=\"bw-step-wrapper bw-step-success bw-step-summary-redesign\">\n        <div class=\"bw-summary-split\">\n            <div class=\"bw-summary-details-column\">\n                <div class=\"bw-summary-card-v2\">\n                    <div class=\"bw-summary-item-v2\" v-if=\"!sc_service_id\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"25\" viewBox=\"0 0 20 25\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M16.8817 4.79915H14.4539C14.4539 2.1455 12.3084 0 9.65476 0C7.00112 0 4.85561 2.1455 4.85561 4.79915H2.42781C1.12921 4.79915 0 5.8719 0 7.22696V21.6809C0 22.9795 1.12921 24.0522 2.42781 24.0522H16.8817C18.1803 24.0522 19.3095 22.9795 19.3095 21.6809V7.22696C19.3095 5.8719 18.1803 4.79915 16.8817 4.79915ZM9.65476 2.37135C10.9534 2.37135 12.0826 3.50056 12.0826 4.79915H7.22696C7.22696 3.50056 8.35617 2.37135 9.65476 2.37135ZM16.8817 21.6809H2.42781V7.22696H4.85561V9.5983C4.85561 10.2758 5.36376 10.8404 6.04129 10.8404C6.71881 10.8404 7.22696 10.2758 7.22696 9.5983V7.22696H12.0826V9.5983C12.0826 10.2758 12.5907 10.8404 13.2682 10.8404C13.9458 10.8404 14.4539 10.2758 14.4539 9.5983V7.22696H16.8817V21.6809Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.service_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getServiceName(bookingData.service_id) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\" v-if=\"bookingData.service_id\">{{ getServiceDuration(bookingData.service_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\" v-if=\"!hideStaffStep\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M9.6378 2.42354C10.9341 2.42354 12.0613 3.49441 12.0613 4.84708C12.0613 6.14339 10.9341 7.21426 9.6378 7.21426C8.34148 7.21426 7.21426 6.14339 7.21426 4.84708C7.21426 3.49441 8.34148 2.42354 9.6378 2.42354ZM9.6378 14.4285C12.9068 14.4285 16.6266 16.0066 16.8521 16.8521H2.42354C2.70535 16.0066 6.4252 14.4285 9.6378 14.4285ZM9.6378 0C6.98881 0 4.84708 2.19809 4.84708 4.84708C4.84708 7.49606 6.98881 9.6378 9.6378 9.6378C12.2868 9.6378 14.4285 7.49606 14.4285 4.84708C14.4285 2.19809 12.2868 0 9.6378 0ZM9.6378 12.0613C6.4252 12.0613 0 13.6395 0 16.8521V19.2756H19.2756V16.8521C19.2756 13.6395 12.8504 12.0613 9.6378 12.0613Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.staff_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ getStaffName(bookingData.staff_id) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"22\" viewBox=\"0 0 20 22\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M17.2181 1.92806H16.2316V0H14.3484V1.92806H4.7529V0H2.86968V1.92806H1.88323C0.851935 1.92806 0 2.78 0 3.85613V19.1461C0 20.1774 0.851935 21.0742 1.88323 21.0742H17.2181C18.2494 21.0742 19.1013 20.1774 19.1013 19.1461V3.85613C19.1013 2.78 18.2494 1.92806 17.2181 1.92806ZM17.2181 19.1461H1.88323V8.60903H17.2181V19.1461ZM17.2181 6.72581H1.88323V3.85613H17.2181V6.72581Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.sidebar_date_time || 'Schedule' }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ formatDate(bookingData.date) }}<\/div>\n                            <div class=\"bw-summary-item-subtext\">{{ formatTime(bookingData.time) }}<\/div>\n                        <\/div>\n                    <\/div>\n\n                    <div class=\"bw-summary-item-v2\">\n                        <div class=\"bw-summary-item-icon\">\n                            <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n                                <path d=\"M9.6378 0C4.29855 0 0 4.29855 0 9.6378C0 14.977 4.29855 19.2756 9.6378 19.2756C14.977 19.2756 19.2756 14.977 19.2756 9.6378C19.2756 4.29855 14.977 0 9.6378 0ZM5.15826 15.9272C6.4252 15.0223 7.96362 14.4793 9.6378 14.4793C11.312 14.4793 12.8504 15.0223 14.1173 15.9272C12.8504 16.8322 11.312 17.3752 9.6378 17.3752C7.96362 17.3752 6.4252 16.8322 5.15826 15.9272ZM15.5653 14.5698C13.9363 13.3029 11.8549 12.5337 9.6378 12.5337C7.42065 12.5337 5.33925 13.3029 3.71033 14.5698C2.57913 13.2576 1.90041 11.5382 1.90041 9.6378C1.90041 5.3845 5.3845 1.90041 9.6378 1.90041C13.8911 1.90041 17.3752 5.3845 17.3752 9.6378C17.3752 11.5382 16.6965 13.2576 15.5653 14.5698ZM9.6378 3.84607C7.78263 3.84607 6.24421 5.33925 6.24421 7.23966C6.24421 9.09482 7.78263 10.588 9.6378 10.588C11.493 10.588 13.0314 9.09482 13.0314 7.23966C13.0314 5.33925 11.493 3.84607 9.6378 3.84607ZM9.6378 8.68759C8.82333 8.68759 8.18986 8.00887 8.18986 7.23966C8.18986 6.4252 8.82333 5.79173 9.6378 5.79173C10.4523 5.79173 11.0857 6.4252 11.0857 7.23966C11.0857 8.00887 10.4523 8.68759 9.6378 8.68759Z\" fill=\"currentColor\"\/>\n                            <\/svg>\n                        <\/div>\n                        <div class=\"bw-summary-item-content\">\n                            <div class=\"bw-summary-item-label\">{{ labels.customer_label }}<\/div>\n                            <div class=\"bw-summary-item-value\">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}<\/div>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"bw-summary-payment-column bw-success-confirm-column\">\n                <div class=\"bw-success-confirm-panel\">\n                    <div class=\"bw-success-check\" aria-hidden=\"true\">\n                        <svg width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                            <circle cx=\"24\" cy=\"24\" r=\"24\" fill=\"currentColor\" opacity=\"0.12\"\/>\n                            <path d=\"M14 24.5L21 31.5L34 18.5\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                        <\/svg>\n                    <\/div>\n                    <h3 class=\"bw-success-confirm-title\">{{ labels.booking_confirmed_title }}<\/h3>\n                    <p class=\"bw-success-confirm-message\">{{ labels.booking_confirmed_msg }}<\/p>\n                    <div class=\"bw-success-actions\">\n                        <button type=\"button\" class=\"bw-btn-continue\" @click=\"reset\">{{ labels.book_another }}<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <\/div><!-- \/.bw-wizard-content-body -->\n\n<\/div> <!-- \/.bw-wizard-content -->\n<\/div>\n<\/script>\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-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":1,"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/pages\/10\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/demo.digitalcardcreator.com\/index.php\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}