<?php
defined('ABSPATH') || exit;

$bookwellab_booking_dir = is_rtl() ? 'rtl' : 'ltr';
$bookwellab_booking_lang = str_replace('_', '-', determine_locale());
$bookwellab_booking_rtl_class = is_rtl() ? 'bw-rtl' : 'bw-ltr';
$bookwellab_popup_host = !empty($bookwellab_popup_host);
?>
<div id="bookwellab_frontend_app" v-cloak
    class="bw-app-wrapper alignwide alignfull <?php echo esc_attr($bookwellab_booking_rtl_class); ?><?php echo $bookwellab_popup_host ? ' bw-fp-popup-host' : ''; ?>"
    dir="<?php echo esc_attr($bookwellab_booking_dir); ?>"
    lang="<?php echo esc_attr($bookwellab_booking_lang); ?>"
    data-staff-id="<?php echo esc_attr($sc_staff_id); ?>"
    data-service-id="<?php echo esc_attr($sc_service_id); ?>"
    <?php echo $bookwellab_popup_host ? 'data-bw-popup-host="1"' : ''; ?>>

    <!-- Vue App Mount Point -->
    <div class="bw-frontend-wrapper bw-force-fullwidth alignwide alignfull">
        <!-- Steps Component will be rendered here -->
        <booking-wizard></booking-wizard>
    </div>
</div>

<script type="text/x-template" id="booking-wizard-template">
    <div class="bw-booking-root" :class="{ 'bw-booking-root--catalog': isCatalogMode }">

        <!-- Full Page Service List -->
        <div v-if="isCatalogMode" class="bw-fp-catalog" v-show="!catalogDialogVisible && !isPopupHost">
            <div v-if="!hideCategories" class="bw-category-filter bw-bp-category-filter bw-fp-catalog-filters">
                <button type="button" :class="{ active: activeCategory === 'all' }" @click="setCatalogCategory('all')">
                    {{ labels.all_categories }}
                </button>
                <button
                    type="button"
                    v-for="cat in categories"
                    :key="cat.bw_category_id"
                    :class="{ active: activeCategory === cat.bw_category_id }"
                    @click="setCatalogCategory(cat.bw_category_id)">
                    {{ cat.bw_category_name }}
                </button>
            </div>

            <div class="bw-fp-catalog-grid" v-if="!loadingServices && paginatedCatalogServices.length">
                <article
                    v-for="service in paginatedCatalogServices"
                    :key="service.bw_service_id"
                    class="bw-fp-service-card"
                    @click="openCatalogBooking(service)">
                    <div class="bw-fp-service-media">
                        <img
                            :src="getServiceImageSrc(service)"
                            :alt="service.bw_service_name"
                            class="bw-fp-service-img"
                            :class="{ 'bw-fp-service-img--placeholder': isServicePlaceholderImage(service) }">
                    </div>
                    <div class="bw-fp-service-body">
                        <h3 class="bw-fp-service-title">{{ service.bw_service_name }}</h3>
                        <div
                            class="bw-fp-service-meta"
                            :class="{ 'bw-fp-service-meta--bordered': !hideDescription && !!service.bw_service_description }">
                            <span class="bw-fp-service-duration">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                                    <path 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"/>
                                    <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"/>
                                </svg>
                                {{ formatDuration(service.bw_service_duration_val, service.bw_service_duration_unit) }}
                            </span>
                            <span class="bw-fp-service-price">{{ displayPrice(service.bw_service_price) }}</span>
                        </div>
                        <p
                            class="bw-fp-service-description"
                            v-if="!hideDescription && service.bw_service_description">{{ truncateCatalogDescription(service.bw_service_description) }}</p>
                    </div>
                    <button
                        type="button"
                        class="bw-fp-service-book-btn"
                        @click.stop="openCatalogBooking(service)">
                        {{ labels.book_appointment || 'Book Appointment' }}
                    </button>
                </article>
            </div>

            <div v-if="loadingServices" class="bw-loading-slots-container">
                <div class="bw-3dot-loader">
                    <div></div><div></div><div></div>
                </div>
            </div>

            <div v-else-if="!paginatedCatalogServices.length" class="bw-fp-catalog-empty">
                {{ labels.no_services }}
            </div>

            <div class="bw-fp-catalog-pagination" v-if="catalogTotalPages > 1">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="catalogTotalItems"
                    :page-size="catalogPageSize"
                    :current-page="catalogPage"
                    @current-change="onCatalogPageChange"
                ></el-pagination>
            </div>
        </div>

        <!-- Booking wizard (inline or popup) -->
        <div
            v-show="!isCatalogMode || catalogDialogVisible || forceButtonPopup"
            :class="{ 'bw-fp-booking-modal': showBookingPopup }">
            <div
                v-if="showBookingPopup"
                class="bw-fp-booking-modal__backdrop"></div>
            <div :class="{ 'bw-fp-booking-modal__panel': showBookingPopup }">
                <button
                    v-if="showBookingPopup"
                    type="button"
                    class="bw-fp-booking-modal__close"
                    @click="closeCatalogBooking"
                    :aria-label="labels.back || 'Close'">×</button>
                <div class="bw-wizard-container" :class="{ 'bw-sidebar-collapsed': isSidebarCollapsed }">
        <!-- Sidebar Progress -->
        <div class="bw-wizard-sidebar" :class="{ 'bw-sidebar-locked': isBookingConfirmed }">
    <div class="bw-sidebar-steps">
        <div class="bw-sidebar-step" :class="{ active: isStep('service'), completed: isStepCompleted('service'), locked: isBookingConfirmed }"
            v-if="showServiceStep" @click="!isBookingConfirmed && goToStep('service')">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M4 4.75A1.75 1.75 0 0 1 5.75 3h12.5A1.75 1.75 0 0 1 20 4.75v3.5A1.75 1.75 0 0 1 18.25 10H5.75A1.75 1.75 0 0 1 4 8.25v-3.5Z" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M4 14.75A1.75 1.75 0 0 1 5.75 13h12.5A1.75 1.75 0 0 1 20 14.75v3.5A1.75 1.75 0 0 1 18.25 20H5.75A1.75 1.75 0 0 1 4 18.25v-3.5Z" stroke="currentColor" stroke-width="1.7"/>
                    <circle cx="8" cy="6.5" r="1" fill="currentColor"/>
                    <circle cx="8" cy="16.5" r="1" fill="currentColor"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_service }}</div>
                <div class="bw-step-subtitle">{{ bookingData.service_id ? getServiceName(bookingData.service_id) :
                    labels.select_service }}</div>
            </div>
        </div>

        <div class="bw-sidebar-step" :class="{ active: isStep('extras'), completed: isStepCompleted('extras'), locked: isBookingConfirmed }"
            v-if="hasExtrasForService(bookingData.service_id)" @click="!isBookingConfirmed && bookingData.service_id ? goToStep('extras') : null">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M3.5 5.5h2.2l1.1 9.2a1.6 1.6 0 0 0 1.6 1.4h8.4a1.6 1.6 0 0 0 1.6-1.3l1.1-6.3H7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
                    <circle cx="9.5" cy="19" r="1.35" fill="currentColor"/>
                    <circle cx="16.5" cy="19" r="1.35" fill="currentColor"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_extras || labels.extras_label }}</div>
                <div class="bw-step-subtitle">{{ bookingData.extras && bookingData.extras.length ? (labels.extras_selected || labels.extras_available) : labels.extras_none_selected }}</div>
            </div>
        </div>

        <div class="bw-sidebar-step" :class="{ active: isStep('staff'), completed: isStepCompleted('staff'), locked: isBookingConfirmed }"
            v-if="!hasPresetStaff && !hideStaffStep" @click="!isBookingConfirmed && bookingData.service_id ? goToStep('staff') : null">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <circle cx="9" cy="8" r="2.6" stroke="currentColor" stroke-width="1.7"/>
                    <circle cx="16.2" cy="8.8" r="2.2" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M3.8 18.5c.6-2.6 2.7-4.1 5.2-4.1s4.6 1.5 5.2 4.1" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                    <path d="M13.8 14.7c.7-.4 1.6-.6 2.5-.6 2.1 0 3.8 1.2 4.3 3.2" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_staff }}</div>
                <div class="bw-step-subtitle">{{ bookingData.staff_id ? getStaffName(bookingData.staff_id) :
                    labels.any_staff }}</div>
            </div>
        </div>

        <div class="bw-sidebar-step" :class="{ active: isStep('datetime'), completed: isStepCompleted('datetime'), locked: isBookingConfirmed }"
            @click="!isBookingConfirmed && bookingData.staff_id ? goToStep('datetime') : null">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <rect x="3.5" y="5" width="17" height="15" rx="2.2" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M8 3.5v3M16 3.5v3M3.5 10h17" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                    <circle cx="8.5" cy="14" r="1" fill="currentColor"/>
                    <circle cx="12" cy="14" r="1" fill="currentColor"/>
                    <circle cx="15.5" cy="14" r="1" fill="currentColor"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_date_time }}</div>
                <div class="bw-step-subtitle">{{ bookingData.date ? formatDate(bookingData.date) + ' ' +
                    (bookingData.time ? formatTime(bookingData.time) : '') : labels.select_date }}</div>
            </div>
        </div>

        <div class="bw-sidebar-step" :class="{ active: isStep('details'), completed: isStepCompleted('details'), locked: isBookingConfirmed }"
            @click="!isBookingConfirmed && bookingData.time ? goToStep('details') : null">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M7 3.5h7.2L19 8.3V19.2A1.8 1.8 0 0 1 17.2 21H7A1.8 1.8 0 0 1 5.2 19.2V5.3A1.8 1.8 0 0 1 7 3.5Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
                    <path d="M14 3.7V8.2h4.6" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/>
                    <path d="M9 12h6M9 15.5h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_details }}</div>
                <div class="bw-step-subtitle">{{ bookingData.customer.first_name ? bookingData.customer.first_name + ' '
                    + bookingData.customer.last_name : labels.your_info }}</div>
            </div>
        </div>

        <div class="bw-sidebar-step" :class="{ active: isStep('summary') || isBookingConfirmed, completed: isStepCompleted('summary'), locked: isBookingConfirmed }"
            @click="!isBookingConfirmed && isStep('summary') ? goToStep('summary') : null">
            <div class="bw-sidebar-step-icon">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                    <path d="M8.2 4.2h7.6A1.8 1.8 0 0 1 17.6 6v1.4H6.4V6a1.8 1.8 0 0 1 1.8-1.8Z" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M6.4 7.4h11.2v11.4A1.8 1.8 0 0 1 15.8 20.6H8.2A1.8 1.8 0 0 1 6.4 18.8V7.4Z" stroke="currentColor" stroke-width="1.7"/>
                    <path d="M9.4 13.2l1.8 1.8 3.6-3.8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="bw-sidebar-step-text">
                <div class="bw-step-title">{{ labels.sidebar_summary }}</div>
                <div class="bw-step-subtitle">{{ labels.checkout }}</div>
            </div>
        </div>
    </div>


    </div>


<div class="bw-wizard-content">
    <!-- Content Header -->
    <div class="bw-wizard-content-header" v-if="isContentStep">
        <div class="bw-content-back-spacer"></div>
        <h2 class="bw-content-title">
            <span>{{ currentStepTitle }}</span>
        </h2>
    </div>

    <div class="bw-wizard-content-body">
        <div v-if="globalError" class="bw-error-msg bw-error-msg--inline" role="alert" aria-live="assertive">
            <span class="bw-error-msg-icon">!</span>
            <span class="bw-error-msg-text">{{ globalError }}</span>
            <button type="button" class="bw-error-msg-close" @click="dismissGlobalError"
                aria-label="<?php echo esc_attr__('Close error message', 'bookwellnow-appointment-booking'); ?>">×</button>
        </div>

    <!-- Step 1: Services -->
    <div v-if="isStep('service')" class="bw-step-wrapper bw-step-services bw-bp-design">
        <div v-if="!hideCategories" class="bw-category-filter bw-bp-category-filter">
            <button :class="{ active: activeCategory === 'all' }" @click="activeCategory = 'all'">
                {{ labels.all_categories }}
                <svg v-if="activeCategory === 'all'" xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                    fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"
                    style="margin-left: 4px; vertical-align: text-bottom;">
                    <path
                        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" />
                </svg>
            </button>
            <button v-for="cat in categories" :key="cat.bw_category_id"
                :class="{ active: activeCategory === cat.bw_category_id }" @click="activeCategory = cat.bw_category_id">
                {{ cat.bw_category_name }}
                <svg v-if="activeCategory === cat.bw_category_id" xmlns="http://www.w3.org/2000/svg" width="16"
                    height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16"
                    style="margin-left: 4px; vertical-align: text-bottom;">
                    <path
                        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" />
                </svg>
            </button>
        </div>

        <h3 class="bw-bp-section-title" style="margin-top: 30px;">{{ labels.select_service }}</h3>
        <div class="bw-bp-service-list">
            <div v-for="service in computedServices" :key="service.bw_service_id" class="bw-bp-service-card"
                :class="{ 'selected': bookingData.service_id === service.bw_service_id }"
                @click="selectService(service)">
                <div class="bw-bp-service-main">
                    <div class="bw-bp-service-icon">
                        <img
                            :src="getServiceImageSrc(service)"
                            :alt="service.bw_service_name"
                            class="bw-bp-service-icon-img"
                            :class="{ 'bw-bp-service-icon-img--placeholder': isServicePlaceholderImage(service) }">
                    </div>
                    <div class="bw-bp-service-info">
                        <h4 class="bw-bp-service-name">{{ service.bw_service_name }}</h4>
                        <div class="bw-bp-service-meta">
                            <span class="bw-bp-meta-duration">
                                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="currentColor"
                                    class="bi bi-clock bw-bp-meta-duration-icon" viewBox="0 0 16 16">
                                    <path
                                        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" />
                                    <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" />
                                </svg>
                                {{ formatDuration(service.bw_service_duration_val, service.bw_service_duration_unit) }}
                            </span>
                            <span class="bw-bp-price-badge">{{ displayPrice(service.bw_service_price) }}</span>
                        </div>
                    </div>
                </div>
                <p class="bw-bp-service-description" v-if="!hideDescription && service.bw_service_description">{{ service.bw_service_description }}</p>
            </div>
            <div v-if="loadingServices" class="bw-loading-slots-container">
                <div class="bw-3dot-loader">
                    <div></div><div></div><div></div>
                </div>
            </div>
            <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);">
                {{ labels.no_services }}
            </div>
        </div>

    </div>

    <div v-if="isStep('service')" class="bw-bp-nav-footer right-only">
        <button class="bw-btn-continue" @click="nextStep">{{ labels.next }}</button>
    </div>

    <div v-if="isStep('extras')" class="bw-step-wrapper bw-step-extras bw-bp-design">
        <?php do_action('bookwellab_booking_wizard_step_extras'); ?>
    </div>

    <div v-if="isStep('extras')" class="bw-nav-buttons bw-bp-nav-footer">
        <div class="bw-nav-footer-actions">
            <button class="bw-btn-back" @click="prevStep">{{ labels.back }}</button>
            <button class="bw-btn-continue" @click="nextStep">{{ labels.next }}</button>
        </div>
    </div>

    <!-- Step 2: Staff -->
    <div v-if="isStep('staff') && !hideStaffStep" class="bw-step-wrapper bw-step-staff bw-bp-design">
        <div v-if="loadingStaff" class="bw-loading-slots-container">
            <div class="bw-3dot-loader">
                <div></div><div></div><div></div>
            </div>
        </div>
        <div v-else class="bw-bp-staff-grid">
            <div v-for="s in staff" :key="s.bw_staff_id" class="bw-bp-staff-card"
                :class="{
                    'selected': bookingData.staff_id === s.bw_staff_id,
                    'has-designation': showStaffDesignation && !!s.bw_staff_position
                }"
                @click="selectStaff(s)">
                <div class="bw-bp-staff-media">
                    <img
                        v-if="!isStaffPlaceholderImage(s)"
                        :src="getStaffImageSrc(s)"
                        :alt="s.bw_staff_name"
                        class="bw-bp-staff-img">
                    <div v-else class="bw-bp-staff-media-placeholder" aria-hidden="true">
                        <svg class="bw-bp-staff-media-placeholder__avatar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" role="img">
                            <rect width="200" height="200" fill="#E8EAED"/>
                            <circle cx="100" cy="76" r="36" fill="#8E99A8"/>
                            <ellipse cx="100" cy="188" rx="72" ry="58" fill="#8E99A8"/>
                        </svg>
                    </div>
                </div>
                <h4 class="bw-bp-staff-name">{{ s.bw_staff_name }}</h4>
                <p
                    class="bw-bp-staff-designation"
                    v-if="showStaffDesignation && s.bw_staff_position">{{ s.bw_staff_position }}</p>
            </div>
        </div>
    </div>

    <div v-if="isStep('staff') && !hideStaffStep" class="bw-nav-buttons bw-bp-nav-footer">
        <div class="bw-nav-footer-actions">
        <button class="bw-btn-back" @click="prevStep">{{ labels.back }}</button>
        <button class="bw-btn-continue" @click="nextStep">{{ labels.next }}</button>
        </div>
    </div>

    <!-- Step 3: Date & Time -->
    <div v-if="isStep('datetime')" class="bw-step-wrapper bw-step-datetime">
        <div class="bw-datetime-container">
            <div class="bw-calendar-wrapper">
                <div class="bw-custom-calendar">
                    <div class="bw-calendar-header">
                        <span class="bw-cal-nav" :class="{ 'bw-cal-nav-disabled': !canGoToPreviousMonth || loadingMonthAvailability }" @click="prevMonth">&lt;</span>
                        <span class="bw-cal-title">{{ formatMonthYear }}</span>
                        <span class="bw-cal-nav" :class="{ 'bw-cal-nav-disabled': loadingMonthAvailability }" @click="nextMonth">&gt;</span>
                    </div>
                    <div class="bw-calendar-body">
                        <div v-if="loadingMonthAvailability" class="bw-loading-calendar-container">
                            <div class="bw-3dot-loader">
                                <div></div><div></div><div></div>
                            </div>
                        </div>
                        <template v-else>
                            <div class="bw-cal-weekdays">
                                <span v-for="(label, idx) in calendarWeekdayLabels" :key="'wd-' + idx">{{ label }}</span>
                            </div>
                            <div class="bw-cal-days">
                                <div v-for="(dayObj, index) in calendarDays" :key="index" class="bw-cal-day" :class="{
                                            'bw-cal-disabled': dayObj.disabled || isDateDisabled(dayObj),
                                            'bw-cal-outside': !dayObj.isCurrentMonth,
                                            'bw-cal-selected': (bookingData.date === `${dayObj.date.getFullYear()}-${String(dayObj.date.getMonth() + 1).padStart(2,'0')}-${String(dayObj.date.getDate()).padStart(2,'0')}`)
                                        }" @click="selectCustomDate(dayObj)">
                                    {{ dayObj.dayNo }}
                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>
            <div class="bw-slots-wrapper">
                <h3 class="bw-slots-title">{{ labels.time_slot }}</h3>
                <div class="bw-slots-inner">
                    <div v-if="loadingSlots" class="bw-loading-slots-container">
                        <div class="bw-3dot-loader">
                            <div></div><div></div><div></div>
                        </div>
                    </div>
                    <div v-else-if="slots.length === 0 && selectedDate" style="padding: 10px;">{{ labels.no_slots }}
                    </div>
                    <div v-else-if="!selectedDate" class="bw-date-select-first">{{ labels.please_select_date_first }}
                    </div>
                    <div v-else>
                        <div v-if="morningSlots.length > 0" class="bw-slot-group">
                            <h4>{{ labels.morning }}</h4>
                            <div class="bw-slot-list">
                                <button v-for="slot in morningSlots" :key="slot" class="bw-slot-btn"
                                    :class="{ 'selected': bookingData.time === slot }" @click="selectSlot(slot)">
                                    {{ formatSlotRange(slot) }}
                                </button>
                            </div>
                        </div>

                        <div v-if="afternoonSlots.length > 0" class="bw-slot-group mt-15">
                            <h4>{{ labels.afternoon }}</h4>
                            <div class="bw-slot-list">
                                <button v-for="slot in afternoonSlots" :key="slot" class="bw-slot-btn"
                                    :class="{ 'selected': bookingData.time === slot }" @click="selectSlot(slot)">
                                    {{ formatSlotRange(slot) }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-if="isStep('datetime')" class="bw-nav-buttons bw-bp-nav-footer">
        <div class="bw-nav-footer-actions">
        <button class="bw-btn-back" @click="prevStep">{{ labels.back }}</button>
        <button class="bw-btn-continue" @click="nextStep">{{ labels.next }}</button>
        </div>
    </div>

    <!-- Step 4: Customer Details -->
    <div v-show="isStep('details')" class="bw-step-wrapper bw-step-details">
        <el-form label-position="top">
            <template v-for="field in visibleDetailFields" :key="field.field_name">
                <el-form-item
                    v-if="field.field_name === 'phone'"
                    :label="field.label"
                    :required="field.is_required"
                    :class="[
                        { 'bw-input-error': errors.phone },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                <div class="bw-phone-container">
                    <input type="tel" id="bw-phone-input" :value="bookingData.customer.phone"
                        inputmode="numeric" pattern="[0-9]*" autocomplete="tel-national">
                </div>
            </el-form-item>

                <el-form-item
                    v-else-if="field.field_name === 'first_name'"
                    :label="field.label"
                    :required="field.is_required"
                    :class="[
                        { 'bw-input-error': errors.first_name },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                    <el-input
                        v-model="bookingData.customer.first_name"
                        :placeholder="field.placeholder"
                        @input="errors.first_name = false"
                    ></el-input>
                </el-form-item>

                <el-form-item
                    v-else-if="field.field_name === 'last_name'"
                    :label="field.label"
                    :required="field.is_required"
                    :class="[
                        { 'bw-input-error': errors.last_name },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                    <el-input
                        v-model="bookingData.customer.last_name"
                        :placeholder="field.placeholder"
                        @input="errors.last_name = false"
                    ></el-input>
            </el-form-item>

                <el-form-item
                    v-else-if="field.field_name === 'email'"
                    :label="field.label"
                    :required="field.is_required"
                    :class="[
                        { 'bw-input-error': errors.email },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                    <el-input
                        v-model="bookingData.customer.email"
                        :placeholder="field.placeholder"
                        @input="errors.email = false"
                    ></el-input>
            </el-form-item>

                <el-form-item
                    v-else-if="field.field_name === 'note'"
                    :label="field.label"
                    :required="field.is_required"
                    :class="[
                        { 'bw-input-error': errors.note },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                    <el-input
                        type="textarea"
                        v-model="bookingData.customer.note"
                        :placeholder="field.placeholder"
                        @input="errors.note = false"
                    ></el-input>
            </el-form-item>

                <el-form-item
                    v-else-if="field.field_name === 'terms_and_conditions'"
                    class="bw-terms-agree-item"
                    :class="[
                        { 'bw-input-error': errors.terms_accepted },
                        field.field_width === 'half' ? 'bw-field-width-half' : 'bw-field-width-full'
                    ]"
                >
                    <el-checkbox v-model="bookingData.terms_accepted" @change="errors.terms_accepted = false">
                        <span v-html="field.label"></span>
                    </el-checkbox>
            </el-form-item>

                <template v-else>
                    <?php
                    /**
                     * Custom / Pro form field controls for the booking details step.
                     */
                    do_action('bookwellab_frontend_booking_custom_field_html');
                    ?>
                </template>
            </template>
        </el-form>
    </div>

    <div v-show="isStep('details')" class="bw-nav-buttons bw-bp-nav-footer">
        <div class="bw-nav-footer-actions">
        <button class="bw-btn-back" @click="prevStep"> {{ labels.back }}</button>
        <button class="bw-btn-continue" @click="nextStep">{{ labels.next }}</button>
        </div>
    </div>

    <!-- Step 5: Summary -->
    <div v-show="isStep('summary')" class="bw-step-wrapper bw-step-summary-redesign">
        <div class="bw-summary-split">
            <!-- Left: Details Card -->
            <div class="bw-summary-details-column">
                <div class="bw-summary-card-v2">
                    <div class="bw-summary-item-v2" v-if="!sc_service_id">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="25" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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"/>
                            </svg>

                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.service_label }}</div>
                            <div class="bw-summary-item-value">{{ getServiceName(bookingData.service_id) }}</div>
                            <div class="bw-summary-item-subtext" v-if="bookingData.service_id">{{ getServiceDuration(bookingData.service_id) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="!hideStaffStep">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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"/>
                            </svg>

                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.staff_label }}</div>
                            <div class="bw-summary-item-value">{{ getStaffName(bookingData.staff_id) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="selectedExtrasSummary.length">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M10 0L12.2451 7.75486H20L13.8775 12.5403L16.1225 20.2951L10 15.5097L3.87745 20.2951L6.12245 12.5403L0 7.75486H7.7549L10 0Z" fill="currentColor"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.extras_label }}</div>
                            <div v-for="extra in selectedExtrasSummary" :key="extra.extra_id" class="bw-summary-extra-line">
                                <span class="bw-summary-extra-name">{{ extra.name }} &times; {{ extra.quantity }}</span>
                                <span class="bw-summary-extra-price">{{ displayPrice(extra.line_total) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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"/>
                            </svg>

                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.sidebar_date_time || 'Schedule' }}</div>
                            <div class="bw-summary-item-value">{{ formatDate(bookingData.date) }}</div>
                            <div class="bw-summary-item-subtext">{{ formatTime(bookingData.time) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="hasCustomerDisplayName">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <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"/>
                            </svg>

                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.customer_label }}</div>
                            <div class="bw-summary-item-value">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Payment & Total -->
            <div class="bw-summary-payment-column">
                <div class="bw-payment-gateways-v2" v-if="showPaymentOptions">
                    <h4 class="bw-payment-title-v2">{{ labels.payment_method }}</h4>
                    <div class="bw-payment-methods-grid">
                        <div v-for="option in paymentOptions" :key="option.value" 
                            class="bw-payment-method-card"
                            :class="{ 'selected': bookingData.payment_gateway === option.value }"
                            @click="bookingData.payment_gateway = option.value">
                            <div class="bw-payment-method-label">{{ option.label }}</div>
                            <div class="bw-payment-method-radio">
                                <div class="bw-radio-outer">
                                    <div class="bw-radio-inner" v-if="bookingData.payment_gateway === option.value"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="bw-summary-total-section">
                    <div class="bw-total-label-row">
                        <span class="bw-total-text">{{ labels.total_label }}</span>
                        <span class="bw-total-amount">{{ displayPrice(bookingTotalPrice) }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-if="isStep('summary')" class="bw-nav-buttons bw-bp-nav-footer">
        <div class="bw-nav-footer-actions">
        <button class="bw-btn-back" @click="prevStep"> {{ labels.back }}</button>
            <button v-if="!isPayPalSelected" class="bw-btn-continue bw-footer-primary-action" :class="{'is-loading': submitting}" :disabled="submitting" @click="submitBooking">
            <span v-if="!submitting">{{ labels.confirm_booking }}</span>
            <span v-else class="bw-dots-loader">
                <span></span>
                <span></span>
                <span></span>
            </span>
        </button>
            <div v-else class="bw-paypal-button-wrap bw-footer-primary-action">
                <div v-if="paypalButtonLoading" class="bw-paypal-loading">
                    <span class="bw-dots-loader"><span></span><span></span><span></span></span>
                </div>
                <div id="bw-paypal-button-container" class="bw-paypal-button-container"></div>
            </div>
        </div>
    </div>

    <!-- Step 6: Booking confirmed (same split layout as summary) -->
    <div v-if="isStep('confirmed')" class="bw-step-wrapper bw-step-success bw-step-summary-redesign">
        <div class="bw-summary-split">
            <div class="bw-summary-details-column">
                <div class="bw-summary-card-v2">
                    <div class="bw-summary-item-v2" v-if="!sc_service_id">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="25" viewBox="0 0 20 25" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <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"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.service_label }}</div>
                            <div class="bw-summary-item-value">{{ getServiceName(bookingData.service_id) }}</div>
                            <div class="bw-summary-item-subtext" v-if="bookingData.service_id">{{ getServiceDuration(bookingData.service_id) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="!hideStaffStep">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <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"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.staff_label }}</div>
                            <div class="bw-summary-item-value">{{ getStaffName(bookingData.staff_id) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="selectedExtrasSummary.length">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <path d="M10 0L12.2451 7.75486H20L13.8775 12.5403L16.1225 20.2951L10 15.5097L3.87745 20.2951L6.12245 12.5403L0 7.75486H7.7549L10 0Z" fill="currentColor"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.extras_label }}</div>
                            <div v-for="extra in selectedExtrasSummary" :key="extra.extra_id" class="bw-summary-extra-line">
                                <span class="bw-summary-extra-name">{{ extra.name }} &times; {{ extra.quantity }}</span>
                                <span class="bw-summary-extra-price">{{ displayPrice(extra.line_total) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <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"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.sidebar_date_time || 'Schedule' }}</div>
                            <div class="bw-summary-item-value">{{ formatDate(bookingData.date) }}</div>
                            <div class="bw-summary-item-subtext">{{ formatTime(bookingData.time) }}</div>
                        </div>
                    </div>

                    <div class="bw-summary-item-v2" v-if="hasCustomerDisplayName">
                        <div class="bw-summary-item-icon">
                            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                                <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"/>
                            </svg>
                        </div>
                        <div class="bw-summary-item-content">
                            <div class="bw-summary-item-label">{{ labels.customer_label }}</div>
                            <div class="bw-summary-item-value">{{ bookingData.customer.first_name }} {{ bookingData.customer.last_name }}</div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="bw-summary-payment-column bw-success-confirm-column">
                <div class="bw-success-confirm-panel">
                    <div class="bw-success-check" aria-hidden="true">
                        <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <circle cx="24" cy="24" r="24" fill="currentColor" opacity="0.12"/>
                            <path d="M14 24.5L21 31.5L34 18.5" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                        </svg>
                    </div>
                    <h3 class="bw-success-confirm-title">{{ labels.booking_confirmed_title }}</h3>
                    <p class="bw-success-confirm-message">{{ labels.booking_confirmed_msg }}</p>
                    <!--
                    <div class="bw-summary-total-section bw-success-total">
                        <div class="bw-total-label-row">
                            <span class="bw-total-text">{{ labels.total_label }}</span>
                            <span class="bw-total-amount">{{ displayPrice(bookingTotalPrice) }}</span>
                        </div>
                    </div>
                    --> 
                    <div class="bw-success-actions">
                        <button type="button" class="bw-btn-continue" @click="reset">{{ labels.book_another }}</button>
                    </div>
                    <div class="bw-add-to-calendar" v-if="canAddToCalendar">
                        <div class="bw-add-to-calendar__heading">{{ labels.add_to_calendar }}</div>
                        <div class="bw-add-to-calendar__buttons">
                            <a
                                class="bw-add-to-calendar__btn"
                                :href="googleCalendarUrl"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <span class="bw-add-to-calendar__icon" aria-hidden="true">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M15.6444 8.17812C15.6444 7.64479 15.5556 7.02257 15.4667 6.57812H8V9.68924H12.2667C12.0889 10.667 11.5556 11.467 10.6667 12.0892V14.1337H13.3333C14.8444 12.7115 15.6444 10.5781 15.6444 8.17812Z" fill="#4285F4"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99978 15.9996C10.1331 15.9996 11.9998 15.2885 13.3331 14.0441L10.6664 12.0885C9.95534 12.5329 9.06645 12.8885 7.99978 12.8885C5.95534 12.8885 4.17756 11.4663 3.55534 9.59961H0.888672V11.5552C2.13312 14.2218 4.88867 15.9996 7.99978 15.9996Z" fill="#34A853"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M3.55556 9.511C3.37778 9.06656 3.28889 8.53322 3.28889 7.99989C3.28889 7.46656 3.37778 6.93322 3.55556 6.48878V4.44434H0.888889C0.355556 5.511 0 6.75545 0 7.99989C0 9.24434 0.266667 10.4888 0.888889 11.5554L3.55556 9.511Z" fill="#FBBC05"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.99978 3.2C9.15534 3.2 10.222 3.64444 11.022 4.35556L13.3331 2.04444C11.9998 0.8 10.1331 0 7.99978 0C4.88867 0 2.13312 1.77778 0.888672 4.44444L3.55534 6.48889C4.17756 4.62222 5.95534 3.2 7.99978 3.2Z" fill="#EA4335"/>
                                    </svg>
                                </span>
                                {{ labels.google_calendar }}
                            </a>
                            <a
                                class="bw-add-to-calendar__btn"
                                :href="outlookCalendarUrl"
                                target="_blank"
                                rel="noopener noreferrer"
                            >
                                <span class="bw-add-to-calendar__icon" aria-hidden="true">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M7.57897 0H0V7.57897H7.57897V0Z" fill="#F25022"/>
                                        <path d="M7.57897 8.4209H0V15.9999H7.57897V8.4209Z" fill="#00A4EF"/>
                                        <path d="M16.0008 0H8.42188V7.57897H16.0008V0Z" fill="#7FBA00"/>
                                        <path d="M16.0008 8.4209H8.42188V15.9999H16.0008V8.4209Z" fill="#FFB900"/>
                                    </svg>
                                </span>
                                {{ labels.outlook_calendar }}
                            </a>
                            <button
                                type="button"
                                class="bw-add-to-calendar__btn"
                                @click="downloadIcalCalendar"
                            >
                                <span class="bw-add-to-calendar__icon" aria-hidden="true">
                                    <svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M7.21165 1.39313C8.26508 0.00788564 9.72934 0 9.72934 0C9.72934 0 9.94793 1.30376 8.89977 2.55758C7.78313 3.89814 6.51375 3.67734 6.51375 3.67734C6.51375 3.67734 6.2741 2.6233 7.21165 1.39313Z" fill="currentColor"/>
                                        <path fill-rule="evenodd" clip-rule="evenodd" d="M6.64714 4.59251C7.18965 4.59251 8.19568 3.84863 9.50456 3.84863C11.7589 3.84863 12.6438 5.44942 12.6438 5.44942C12.6438 5.44942 10.9109 6.33524 10.9109 8.48014C10.9109 10.901 13.0704 11.7369 13.0704 11.7369C13.0704 11.7369 11.5614 15.9794 9.52037 15.9794C8.58281 15.9794 7.85595 15.3486 6.86836 15.3486C5.86233 15.3486 4.86421 16.0031 4.21372 16.0031C2.35178 16.0004 0 11.9787 0 8.743C0 5.55982 1.99098 3.89069 3.85818 3.89069C5.07226 3.89332 6.01508 4.59251 6.64714 4.59251Z" fill="currentColor"/>
                                    </svg>
                                </span>
                                {{ labels.ical_calendar }}
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    </div><!-- /.bw-wizard-content-body -->

</div> <!-- /.bw-wizard-content -->
</div><!-- /.bw-wizard-container -->
            </div><!-- /.bw-fp-booking-modal__panel or plain -->
        </div><!-- /.bw-fp-booking-modal or wizard shell -->
    </div><!-- /.bw-booking-root -->
</script>