{"id":2113,"date":"2024-02-08T18:18:33","date_gmt":"2024-02-08T18:18:33","guid":{"rendered":"https:\/\/cialpt.schools.consulting\/courses\/booking\/"},"modified":"2025-01-27T22:17:50","modified_gmt":"2025-01-27T22:17:50","slug":"booking","status":"publish","type":"page","link":"https:\/\/cial.pt\/en\/courses\/booking\/","title":{"rendered":"Booking"},"content":{"rendered":"<style>.kb-row-layout-id2113_bd89b3-e4 > .kt-row-column-wrap{align-content:start;}:where(.kb-row-layout-id2113_bd89b3-e4 > .kt-row-column-wrap) > .wp-block-kadence-column{justify-content:start;}.kb-row-layout-id2113_bd89b3-e4 > .kt-row-column-wrap{column-gap:var(--global-kb-gap-md, 2rem);row-gap:var(--global-kb-gap-md, 2rem);max-width:var( --global-content-width, 1290px );padding-left:var(--global-content-edge-padding);padding-right:var(--global-content-edge-padding);padding-top:0px;padding-bottom:0px;grid-template-columns:minmax(0, 1fr);}.kb-row-layout-id2113_bd89b3-e4{background-color:#f5f5f5;}.kb-row-layout-id2113_bd89b3-e4 > .kt-row-layout-overlay{opacity:0.30;}@media all and (max-width: 1024px){.kb-row-layout-id2113_bd89b3-e4 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}@media all and (max-width: 767px){.kb-row-layout-id2113_bd89b3-e4 > .kt-row-column-wrap{grid-template-columns:minmax(0, 1fr);}}<\/style><div class=\"kb-row-layout-wrap kb-row-layout-id2113_bd89b3-e4 alignfull kt-row-has-bg wp-block-kadence-rowlayout\"><div class=\"kt-row-column-wrap kt-has-1-columns kt-row-layout-equal kt-tab-layout-inherit kt-mobile-layout-row kt-row-valign-top kb-theme-content-width\">\n<style>.kadence-column2113_30e74e-e8 > .kt-inside-inner-col,.kadence-column2113_30e74e-e8 > .kt-inside-inner-col:before{border-top-left-radius:0px;border-top-right-radius:0px;border-bottom-right-radius:0px;border-bottom-left-radius:0px;}.kadence-column2113_30e74e-e8 > .kt-inside-inner-col{column-gap:var(--global-kb-gap-sm, 1rem);}.kadence-column2113_30e74e-e8 > .kt-inside-inner-col{flex-direction:column;}.kadence-column2113_30e74e-e8 > .kt-inside-inner-col > .aligncenter{width:100%;}.kadence-column2113_30e74e-e8 > .kt-inside-inner-col:before{opacity:0.3;}.kadence-column2113_30e74e-e8{position:relative;}@media all and (max-width: 1024px){.kadence-column2113_30e74e-e8 > .kt-inside-inner-col{flex-direction:column;}}@media all and (max-width: 767px){.kadence-column2113_30e74e-e8 > .kt-inside-inner-col{flex-direction:column;}}<\/style>\n<div class=\"wp-block-kadence-column kadence-column2113_30e74e-e8\"><div class=\"kt-inside-inner-col\"><script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/@alpinejs\/persist@3.x.x\/dist\/cdn.min.js\"><\/script>\n<script defer src=\"https:\/\/cdn.jsdelivr.net\/npm\/alpinejs@3.x.x\/dist\/cdn.min.js\"><\/script>\n<script src=\"https:\/\/momentjs.com\/downloads\/moment-with-locales.min.js\"><\/script>\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/mattkingshott\/iodine@3\/dist\/iodine.min.js\" defer><\/script>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\" \/>\n\n<script>\n    document.addEventListener('alpine:init', () => {\n        Alpine.data('quoteBuilder', () => ({\n            \/**\n             * eventListeners - Defines event listeners that will run on certain custom events:\n             * \n             * @campusSelected - Runs when the campus is selected. Gets campus ID and name from event detail.\n             * @serviceSelected - Runs when a service is selected. Gets service object from event detail. \n             * @variationSelected - Runs when a variation is selected. Gets variation and object from event detail.\n             * @initDatePicker - Runs to initialize the date picker.\n             *\/\n            eventListeners: {\n                ['@campusSelected.window'](event) {\n                    let campusId = event.detail.campusId;\n                    let campusName = event.detail.campusName;\n                    this.selectCampus(campusId, campusName);\n                },\n                ['@serviceSelected.window'](event) {\n                    let object = event.detail.object;\n                    let service = event.detail.service;\n                    this.selectService(object, service);\n                },\n                ['@variationSelected.window'](event) {\n                    let variation = event.detail.variation;\n                    let object = event.detail.object;\n                    let request = (event.detail.request) ? event.detail.request : {};\n                    this.selectVariation(object, variation, request);\n                },\n                ['@initDatePicker.window'](event) {\n                    this.initializeFlatpickr();\n                },\n                ['@dateSelected.window'](event) {\n                    let variation = event.detail.variation;\n                    let object = event.detail.object;\n                    let request = (event.detail.request) ? event.detail.request : {};\n                    this.selectStartDate(object, variation, request);\n                },\n\n                ['@calculateEndDate.window'](event) {\n                    let variation = event.detail.variation;\n                    let object = event.detail.object;\n                    let request = (event.detail.request) ? event.detail.request : {};\n                    let weeks = event.detail.weeks;\n\n                    this.selectEndDate(object, variation, request, weeks);\n                },\n            },\n            \/**\n             * Initializes the component.\n             * Sets up watchers for quote configuration changes and keeps quote totals in sync.\n             * Contact info is only persisted when user proceeds to booking confirmation.\n             *\/\n            init: function() {\n                this.getQuoteById('presential-quote', 'Presential');\n                this.$watch('bookingDetails.quotePrice', (value) => {\n                    this.storeQuote();\n                    this.checkValidity(value);\n                });\n\n                this.$watch('bookingDetails.request_confirmation_letter', () => {\n                    this.syncConfirmationLetterAddon();\n                    this.storeQuote();\n                });\n\n                \/\/ get the booking details if the booking ID is set\n                if (false) {\n                    this.getBookingDetails();\n                }\n            },\n            lang: \"en\",\n            currentPage: 1,\n            getProgress: function(step) {\n                return this.currentPage >= step;\n            },\n            getStep: function() {\n                return 'step' + this.currentPage;\n            },\n            isValid: function() {\n                if (this.currentPage == 1) {\n                    return this.isCourseConfigurationValid;\n                }\n                if (this.currentPage == 2) {\n                    return this.isPersonalInformationValid;\n                }\n                return true;\n            },\n            isCourseConfigurationValid: false,\n            isPersonalInformationValid: true,\n            initialStep: 1,\n            currency: \"\u20ac\",\n            dueToday: 0.0,\n            confirmationLetterAddon: {\n                id: '__cial_confirmation_letter__',\n                productId: '__cial_confirmation_letter_product__',\n                invoiceableId: 2000009,\n                title: \"Confirmation Letter\",\n                description: \"Confirmation letter for visa purposes.\",\n                price: 800.00\n            },\n            variationRequestCounter: {\n                courses: 0,\n                accommodations: 0,\n                transfers: 0,\n                addons: 0\n            },\n            variationLoading: {\n                courses: false,\n                accommodations: false,\n                transfers: false,\n                addons: false\n            },\n            activeVariationField: {\n                courses: null,\n                accommodations: null,\n                transfers: null,\n                addons: null\n            },\n\n            getBookingDetails: function() {\n                let bookingId = null;\n\n                if (!bookingId) {\n                    return;\n                }\n\n                fetch(`${this.baseUrl}\/bookings\/${bookingId}`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            with: [\"quotation\", \"application\"]\n                        })\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n\n                        \/\/this.bookingDetails = data;\n                    });\n            },\n\n            originalQuote: {\n                id: 1,\n                application_id: 1,\n                title: \"Presential\",\n                slug: \"presential-quote\",\n                description: \"Presential Quote\",\n                properties: {\n                    layout: \"external\",\n                    primary_color: \"#33cc66\",\n                    secondary_color: \"#ffffff\",\n                    campuses: {\n                        enable: \"1\",\n                        campuses: [],\n                        title: \"School\",\n                        sub_title: null,\n                        instructions: null\n                    },\n                    courses: {\n                        enable: \"1\",\n                        courses: [],\n                        title: \"Course\",\n                        sub_title: null,\n                        instructions: null\n                    },\n                    accommodation: {\n                        enable: \"1\",\n                        title: \"Accommodation\",\n                        sub_title: null,\n                        instructions: null,\n                        accommodations: []\n                    },\n                    transfer: {\n                        enable: \"1\",\n                        title: \"Other\",\n                        sub_title: null,\n                        instructions: null,\n                        transfers: []\n                    },\n                    addons: {\n                        title: null,\n                        sub_title: null,\n                        instructions: null\n                    },\n                    finance: {\n                        schema: \"value\",\n                        schema_value: \"150\",\n                        quotation_validity: \"25\"\n                    },\n                    orders: \"\",\n                    booking_thank_you_html: \"\",\n                    from_name: null,\n                    from_email: null,\n                    thank_you_subject: null,\n                    thank_you_email: null\n                },\n                application: {\n                    id: null\n                },\n                steps: {\n                    campuses: {},\n                    courses: {},\n                    accommodation: {},\n                    transfer: {},\n                    summary: {}\n                },\n                services: {\n                    courses: [],\n                    accommodations: [],\n                    transfers: []\n                },\n                variations: {\n                    courses: [],\n                    accommodations: [],\n                    transfers: [],\n                    addons: []\n                },\n                ui: {\n                    primary_color: \"#fff\",\n                    secondary_color: \"#ccc\",\n                    loading: true,\n                    clicked: false,\n                    verified: false,\n                    refreshing: false\n                }\n            },\n            bookingDetails: {\n                filterBy: '',\n                contact: {\n                    first_name: \"\",\n                    last_name: \"\",\n                    email: \"\",\n                    phone: \"\",\n                    disclaimer_accepted: false,\n                    card: {\n                        number: \"\",\n                        expiry: \"\",\n                        name: \"\",\n                        cvv: \"\",\n                        amount: \"\"\n                    }\n                },\n                quotePrice: {\n                    campus: {\n                        campus: \"\",\n                        campusId: 0\n                    },\n                    duration: {\n                        start_date: \"\",\n                        end_date: \"\"\n                    },\n                    courses: {\n                        courses: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    accommodations: {\n                        accommodations: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    transfers: {\n                        transfers: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    addons: {\n                        addons: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    currentStep: {},\n                    totalPrice: 0.00,\n                    hash: 'BFFG4t5K'\n                },\n                quotId: null,\n                request_confirmation_letter: false,\n                hash: 'BFFG4t5K',\n                no_email: true,\n                booking: {}\n            },\n            token: 'Warning: Trying to access array offset on value of type bool in \/home\/cialptschools\/public_html\/wp-content\/plugins\/hemspqb\/admin\/partials\/hemspqb-admin-display.php on line 29',\n            baseUrl: 'https:\/\/hemsp.com\/cial\/v2\/api',\n            isCialConfirmationLetterEnabled: function() {\n                const baseUrl = String(this.baseUrl || '').toLowerCase();\n                const host = String(window.location.hostname || '').toLowerCase();\n\n                return baseUrl.includes('\/cial\/') || host.includes('cial');\n            },\n            getAddonsTotal: function() {\n                return parseFloat(this.bookingDetails?.quotePrice?.addons?.total || 0);\n            },\n            createConfirmationLetterAddonEntry: function() {\n                return {\n                    id: this.confirmationLetterAddon.id,\n                    title: this.confirmationLetterAddon.title,\n                    variations: []\n                };\n            },\n            createConfirmationLetterAddonProduct: function() {\n                return {\n                    id: this.confirmationLetterAddon.productId,\n                    invoiceable_id: this.confirmationLetterAddon.invoiceableId,\n                    label: this.confirmationLetterAddon.title,\n                    description: this.confirmationLetterAddon.description,\n                    quantity: 1,\n                    price: parseFloat(this.confirmationLetterAddon.price)\n                };\n            },\n            syncConfirmationLetterAddon: function() {\n                if (!this.isCialConfirmationLetterEnabled()) {\n                    this.dueToday = this.calculateDueToday();\n                    return;\n                }\n\n                const addonState = this.bookingDetails.quotePrice?.addons || {\n                    addons: [],\n                    start_date: \"\",\n                    end_date: \"\",\n                    products: [],\n                    total: 0.00\n                };\n                const existingAddons = Array.isArray(addonState.addons) ? addonState.addons : [];\n                const existingProducts = Array.isArray(addonState.products) ? addonState.products : [];\n                const hasConfirmationLetterAddon = existingAddons.some((item) => String(item?.id) === this.confirmationLetterAddon.id);\n                const hasConfirmationLetterProduct = existingProducts.some((item) => String(item?.id) === this.confirmationLetterAddon.productId);\n                const baseAddons = existingAddons.filter((item) => String(item?.id) !== this.confirmationLetterAddon.id);\n                const baseProducts = existingProducts.filter((item) => String(item?.id) !== this.confirmationLetterAddon.productId);\n                const baseTotal = Math.max(\n                    parseFloat(addonState.total || 0) - ((hasConfirmationLetterAddon || hasConfirmationLetterProduct) ? parseFloat(this.confirmationLetterAddon.price) : 0),\n                    0\n                );\n\n                if (this.bookingDetails.request_confirmation_letter) {\n                    baseAddons.push(this.createConfirmationLetterAddonEntry());\n                    baseProducts.push(this.createConfirmationLetterAddonProduct());\n                }\n\n                this.bookingDetails.quotePrice.addons = {\n                    ...addonState,\n                    addons: baseAddons,\n                    products: baseProducts,\n                    total: baseTotal + (this.bookingDetails.request_confirmation_letter ? parseFloat(this.confirmationLetterAddon.price) : 0)\n                };\n\n                this.calculateTotal();\n            },\n            emptyQuotePrice: function() {\n                return {\n                    campus: {\n                        campus: \"\",\n                        campusId: 0\n                    },\n                    duration: {\n                        start_date: \"\",\n                        end_date: \"\"\n                    },\n                    courses: {\n                        courses: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    accommodations: {\n                        accommodations: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    transfers: {\n                        transfers: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    addons: {\n                        addons: [],\n                        start_date: \"\",\n                        end_date: \"\",\n                        products: [],\n                        total: 0.00\n                    },\n                    currentStep: {},\n                    totalPrice: 0.00,\n                    hash: this.bookingDetails.hash\n                };\n            },\n            resetQuoteSelectionState: function() {\n                this.bookingDetails.quotePrice = this.emptyQuotePrice();\n                this.originalQuote.services = {\n                    courses: [],\n                    accommodations: [],\n                    transfers: [],\n                    addons: []\n                };\n                this.originalQuote.variations = {\n                    courses: [],\n                    accommodations: [],\n                    transfers: [],\n                    addons: []\n                };\n                this.variationRequestCounter = {\n                    courses: 0,\n                    accommodations: 0,\n                    transfers: 0,\n                    addons: 0\n                };\n                this.variationLoading = {\n                    courses: false,\n                    accommodations: false,\n                    transfers: false,\n                    addons: false\n                };\n                this.activeVariationField = {\n                    courses: null,\n                    accommodations: null,\n                    transfers: null,\n                    addons: null\n                };\n\n                if (this.bookingDetails.request_confirmation_letter) {\n                    this.syncConfirmationLetterAddon();\n                    return;\n                }\n\n                this.calculateTotal();\n            },\n            storeQuote: function(options = {}) {\n                const includeContact = options?.includeContact === true;\n                const payload = JSON.parse(JSON.stringify(this.bookingDetails));\n\n                if (includeContact) {\n                    payload.contact = payload.contact || {};\n                    payload.contact.utm_source = 'Website';\n                    payload.contact.request_type = 'Book Now Form';\n                } else {\n                    delete payload.contact;\n                }\n\n                \/\/ send POST request to \"quotations\/store\" endpoint\n                fetch(`${this.baseUrl}\/quotations\/store`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            \/\/ add Bearer token to header\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify(payload)\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n                        this.bookingDetails.booking = data;\n                    });\n            },\n            getQuote: function(e) {\n                let quoteSlug = e.target.value;\n                let quoteName = e.target.options[e.target.selectedIndex].text;\n\n                if (!quoteSlug || quoteSlug == 0) {\n                    this.resetQuoteSelectionState();\n                    this.bookingDetails.quotId = null;\n                    this.bookingDetails.filterBy = \"\";\n                    return;\n                }\n\n                this.getQuoteById(quoteSlug, quoteName);\n            },\n            getQuoteById: function(quoteSlug, quoteName) {\n                this.resetQuoteSelectionState();\n                this.bookingDetails.quotId = null;\n                this.bookingDetails.filterBy = quoteName;\n\n                fetch(`${this.baseUrl}\/quotations\/${quoteSlug}`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            with: [\"steps\", \"application\", \"application.fields\", \"services\"]\n                        })\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n\n                        this.originalQuote = data.quotation;\n\n                        \/\/ update quoteId in the bookingDetails\n                        this.bookingDetails.quotId = data.quotation.id;\n\n\n                        \/\/populate bookingDetails.contact object with the fields from the application.fields\n                        if (data.quotation.application.fields.length) {\n                            data.quotation.application.fields.forEach(field => {\n                                const fieldKey = this.getPersonalInfoFieldKey(field);\n                                if (fieldKey && typeof this.bookingDetails.contact[fieldKey] === 'undefined') {\n                                    this.bookingDetails.contact[fieldKey] = \"\";\n                                }\n                            });\n                        }\n\n                        \/\/ if data.quotation.steps.campuses not defined, set campusId to null\n                        if (!data.quotation.steps.campuses) {\n                            this.bookingDetails.quotePrice.campus.campusId = null;\n                            let campusId = null;\n                            let campusName = null;\n                            this.selectCampus(campusId, campusName);\n                        }\n                    })\n            },\n            selectCampus: function(campusId, campusName) {\n                this.resetQuoteSelectionState();\n                this.bookingDetails.quotePrice.campus.campusId = campusId;\n                this.bookingDetails.quotePrice.campus.campus = (campusId === null) ? \"Online\" : ((campusId == 0) ? \"\" : campusName);\n\n                this.originalQuote.services = {\n                    courses: [],\n                    accommodations: [],\n                    transfers: [],\n                    addons: []\n                };\n\n                \/\/ abort the request if service is null or  = 0\n                if (campusId == 0) {\n                    return;\n                }\n\n                let filters = {\n                    \"quote\": this.originalQuote.id,\n                };\n\n                if (campusId != null) {\n                    filters.campusId = [campusId];\n                }\n\n                fetch(`${this.baseUrl}\/services`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            \"hydrate\": true,\n                            \"filters\": filters,\n                            \"with\": [\"variations\", \"template\", \"category\", \"campuses\", \"category\"],\n                            \"groupBy\": \"categoryName\"\n                        })\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n\n                        const groupedData = Object.values(data.services).reduce((result, item) => {\n                            const category = item[0].educational_service_category.object;\n\n                            if (!result[category]) {\n                                result[category] = [];\n                            }\n                            result[category].push(item);\n                            return result;\n                        }, {});\n                        this.originalQuote.services = groupedData;\n                    })\n            },\n            selectService: function(object, service) {\n                this.variationLoading[object] = false;\n\n                \/\/ reset object's  Service and variations\n                this.bookingDetails.quotePrice[object] = {\n                    products: [],\n                    start_date: \"\",\n                    end_date: \"\",\n                    total: 0.00\n                };\n                this.bookingDetails.quotePrice[object][object] = [];\n\n                \/\/ reset variations in the originalQuote by object\n                this.originalQuote.variations[object] = [];\n\n                \/\/ abort the request if service is null or  = 0\n                if (service == null || service == 0) {\n                    if (object === 'addons') {\n                        this.syncConfirmationLetterAddon();\n                    } else {\n                        this.calculateTotal();\n                    }\n                    return;\n                }\n\n                fetch(`${this.baseUrl}\/services\/${service}`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            \"all_dates_prices\": false,\n                            \"start_date\": this.bookingDetails.quotePrice.duration.start_date,\n                            \"end_date\": this.bookingDetails.quotePrice.duration.end_date,\n                            \"with\": [\"template\", \"variations\", \"dates\", \"pricing\"]\n                        })\n                    })\n                    .then(response => response.json())\n\n                    .then(data => {\n\n\n\n\n\n                        let serviceDetails = {\n                            id: data.service.id,\n                            title: data.service.name,\n                            variations: []\n                        };\n\n                        \/\/@todo  get allowMultiple from the API\n                        let allowMultiple = false;\n                        if (allowMultiple) {\n                            this.bookingDetails.quotePrice[object][object].push(serviceDetails);\n                        } else {\n                            this.bookingDetails.quotePrice[object][object] = [serviceDetails];\n                        }\n                        let template = data.service.template;\n                        if (template.price_now) {\n                            this.addToBag(\n                                data.service.template.price_now.duration,\n                                data.service.template.price_now.price.summary.total_price,\n                                data.service.template.price_now.charges,\n                                data.service.template.price_now.price.products,\n                                object\n                            );\n                            \/\/ since we have price we need to reset the service variations to [] in the originalquote\n                            this.originalQuote.services[object][0] = [];\n                        }\n                        \/\/ load variation's template's fields\n                        if (template.fields) {\n\n\n                            \/******  IMPORTANT NOTE: *******\n                                \/\/ Special Workaround for CIAL to avoid showing date selection for accommodation services\n                                \/\/ and use the date from the course selection instead.\n                                \/\/ to remove this workaround, we need to remove the if statment\n                             *\/\n\n                            if (object == 'accommodations') {\n                                const accommodationDates = this.getAccommodationDatesFromCourse();\n                                const accommodationStart = accommodationDates.start_date;\n                                const accommodationEnd = accommodationDates.end_date;\n\n                                \/\/ arrival is the day before course start, departure is the day after course end\n                                this.bookingDetails.quotePrice.accommodations.start_date = accommodationStart;\n                                this.bookingDetails.quotePrice.accommodations.end_date = accommodationEnd;\n\n                                let variation = data.service.variations[0];\n                                let request = {\n                                    start_date: accommodationStart,\n                                    end_date: accommodationEnd,\n                                }\n                                this.selectVariation(object, variation.id, request);\n\n                            } else {\n\n                                this.originalQuote.variations[object] = [template.fields];\n                            }\n\n\n\n\n                            this.calculateTotal();\n                        }\n                    })\n            },\n            findParentId: function(variations, variationID) {\n                for (const item of variations) {\n                    const key = Object.keys(item)[0];\n                    const dataElements = item[key].data;\n                    for (const element of dataElements) {\n                        if (element.id === parseInt(variationID)) {\n                            return element.parent_id;\n                        }\n                    }\n                }\n                return null;\n            },\n            getAccommodationDatesFromCourse: function() {\n                const courseStart = this.bookingDetails.quotePrice.courses.start_date;\n                const courseEnd = this.bookingDetails.quotePrice.courses.end_date;\n\n                if (!courseStart || !courseEnd) {\n                    return {\n                        start_date: \"\",\n                        end_date: \"\",\n                    };\n                }\n\n                return {\n                    start_date: moment(courseStart).subtract(1, 'days').format('YYYY-MM-DD'),\n                    end_date: moment(courseEnd).add(1, 'days').format('YYYY-MM-DD'),\n                };\n            },\n            normalizeISODate: function(dateValue) {\n                if (!dateValue || dateValue === 'Invalid date') {\n                    return \"\";\n                }\n\n                const parsed = moment(dateValue, 'YYYY-MM-DD', true);\n                if (!parsed.isValid()) {\n                    return \"\";\n                }\n\n                return parsed.format('YYYY-MM-DD');\n            },\n            resetAccommodationSelection: function() {\n                const accommodationState = this.bookingDetails.quotePrice.accommodations || {};\n                const hasAccommodationSelection = accommodationState.accommodations?.length;\n                const hasAccommodationDates = accommodationState.start_date || accommodationState.end_date;\n                const hasAccommodationProducts = accommodationState.products?.length;\n                const hasAccommodationTotal = parseFloat(accommodationState.total || 0) > 0;\n\n                if (!hasAccommodationSelection && !hasAccommodationDates && !hasAccommodationProducts && !hasAccommodationTotal) {\n                    return;\n                }\n\n                this.bookingDetails.quotePrice.accommodations = {\n                    accommodations: [],\n                    start_date: \"\",\n                    end_date: \"\",\n                    products: [],\n                    total: 0.00\n                };\n                this.originalQuote.variations.accommodations = [];\n                this.calculateTotal();\n            },\n            isSelectedAccommodationValidForCurrentCourse: function() {\n                const selectedAccommodation = this.bookingDetails.quotePrice.accommodations.accommodations?.[0];\n                if (!selectedAccommodation?.id) {\n                    return false;\n                }\n\n                const availableAccommodationServices = this.originalQuote.services?.accommodations?.[0] || [];\n                const selectedService = availableAccommodationServices.find((service) => parseInt(service.id) === parseInt(selectedAccommodation.id));\n\n                if (!selectedService) {\n                    return false;\n                }\n\n                return !this.isDisabledAccommodation(selectedService);\n            },\n            syncAccommodationDatesFromCourse: function() {\n                if (!this.isSelectedAccommodationValidForCurrentCourse()) {\n                    this.resetAccommodationSelection();\n                    return;\n                }\n\n                const selectedAccommodation = this.bookingDetails.quotePrice.accommodations.accommodations[0];\n                const accommodationDates = this.getAccommodationDatesFromCourse();\n                this.bookingDetails.quotePrice.accommodations.start_date = accommodationDates.start_date;\n                this.bookingDetails.quotePrice.accommodations.end_date = accommodationDates.end_date;\n\n                if (!accommodationDates.start_date || !accommodationDates.end_date) {\n                    return;\n                }\n\n                const selectedVariation = selectedAccommodation.variations?.length ?\n                    selectedAccommodation.variations[selectedAccommodation.variations.length - 1] :\n                    null;\n\n                if (!selectedVariation?.id) {\n                    return;\n                }\n\n                this.selectVariation('accommodations', selectedVariation.id, {\n                    start_date: accommodationDates.start_date,\n                    end_date: accommodationDates.end_date,\n                });\n            },\n            resetCourseDates: function() {\n                this.bookingDetails.quotePrice.courses.date = \"\";\n                this.bookingDetails.quotePrice.courses.start_date = \"\";\n                this.bookingDetails.quotePrice.courses.end_date = \"\";\n                this.resetAccommodationSelection();\n\n                queueMicrotask(() => {\n                    document.querySelectorAll('.datepicker-booking[data-object=\"courses\"]').forEach((input) => {\n                        if (input.offsetParent === null) {\n                            return;\n                        }\n                        if (input._flatpickr) {\n                            input._flatpickr.clear(false);\n                        } else {\n                            input.value = \"\";\n                        }\n                    });\n                    document.querySelectorAll('.weeks[data-object=\"courses\"]').forEach((select) => {\n                        if (select.offsetParent === null) {\n                            return;\n                        }\n                        select.value = \"0\";\n                    });\n                });\n            },\n            removeVariationBranch: function(variations, rootId) {\n                if (!rootId) {\n                    return variations;\n                }\n\n                const idsToRemove = new Set([String(rootId)]);\n                let hasChanges = true;\n\n                while (hasChanges) {\n                    hasChanges = false;\n\n                    variations.forEach((item) => {\n                        if (!item?.id || !item?.parent_id) {\n                            return;\n                        }\n\n                        if (idsToRemove.has(String(item.parent_id)) && !idsToRemove.has(String(item.id))) {\n                            idsToRemove.add(String(item.id));\n                            hasChanges = true;\n                        }\n                    });\n                }\n\n                return variations.filter((item) => !idsToRemove.has(String(item.id)));\n            },\n            getVariationRenderKey: function(object, variation) {\n                const variationKey = Object.keys(variation || {})[0] || \"\";\n                const field = variationKey ? (variation[variationKey] || {}) : {};\n                const optionIds = Array.isArray(field.data) ? field.data.map((item) => item.id).join('-') : \"\";\n                const settings = field.settings || {};\n                const dates = field.dates || {};\n\n                return [\n                    object,\n                    variationKey,\n                    field.name || \"\",\n                    settings.type || \"\",\n                    settings.date || \"\",\n                    optionIds,\n                    dates.from || \"\",\n                    dates.to || \"\"\n                ].join('|');\n            },\n            getCourseDetailsRenderKey: function(course, index = 0) {\n                const variations = Array.isArray(course?.variations) ? course.variations : [];\n                const variationKeys = variations.map((variation) => this.getSelectedVariationRenderKey(variation)).join('|');\n\n                return [\n                    course?.id || 'course',\n                    course?.title || index,\n                    variationKeys\n                ].join('|');\n            },\n            getSelectedVariationRenderKey: function(variation) {\n                return [\n                    variation?.field_key || \"\",\n                    variation?.parent_id || \"\",\n                    variation?.id || \"\",\n                    variation?.title || \"\"\n                ].join('|');\n            },\n            getBookingDurationWeeks: function(object) {\n                const startDate = this.normalizeISODate(this.bookingDetails?.quotePrice?.[object]?.start_date);\n                const endDate = this.normalizeISODate(this.bookingDetails?.quotePrice?.[object]?.end_date);\n\n                if (!startDate || !endDate) {\n                    return null;\n                }\n\n                const durationInWeeks = Math.round(moment(endDate).diff(moment(startDate), 'weeks', true));\n\n                return durationInWeeks >= 1 ? durationInWeeks : null;\n            },\n            formatBookingWeeksLabel: function(weeks) {\n                if (!weeks) {\n                    return \"\";\n                }\n\n                return `${weeks} ${weeks === 1 ? 'Week' : 'Weeks'}`;\n            },\n            getCartVariationTitle: function(object, variation) {\n                const title = String(variation?.title || '').trim();\n\n                if (object === 'accommodations' && \/^weeks?$\/i.test(title)) {\n                    const durationInWeeks = this.getBookingDurationWeeks(object);\n\n                    return durationInWeeks ? this.formatBookingWeeksLabel(durationInWeeks) : title;\n                }\n\n                return title;\n            },\n            getSelectedVariationValue: function(object, fieldKey) {\n                const selectedService = this.bookingDetails.quotePrice?.[object]?.[object]?.[0];\n                const selectedVariations = Array.isArray(selectedService?.variations) ? selectedService.variations : [];\n                const selectedVariation = selectedVariations.find((variation) => variation?.field_key === fieldKey);\n\n                return selectedVariation?.id ? String(selectedVariation.id) : \"0\";\n            },\n            hasSelectedChildVariation: function(object, parentVariationId) {\n                const selectedService = this.bookingDetails.quotePrice?.[object]?.[object]?.[0];\n                const selectedVariations = Array.isArray(selectedService?.variations) ? selectedService.variations : [];\n\n                return selectedVariations.some((item) => String(item?.parent_id) === String(parentVariationId));\n            },\n            getActiveListFieldSelect: function(object, fieldKey) {\n                const selects = Array.from(document.querySelectorAll(`select[data-object=\"${object}\"][data-field-key=\"${fieldKey}\"]`));\n\n                if (!selects.length) {\n                    return null;\n                }\n\n                return selects.find((select) => select.offsetParent !== null) || selects[0];\n            },\n            isCurrentListFieldSelection: function(object, fieldKey, variationId) {\n                if (!fieldKey) {\n                    return true;\n                }\n\n                const activeSelect = this.getActiveListFieldSelect(object, fieldKey);\n                if (!activeSelect) {\n                    return true;\n                }\n\n                return String(activeSelect.value) === String(variationId);\n            },\n            findExistingSelectedVariation: function(variations, variationDetails) {\n                if (!Array.isArray(variations) || !variationDetails) {\n                    return null;\n                }\n\n                if (variationDetails.field_key) {\n                    const byFieldKey = variations.find((item) => item.field_key && item.field_key === variationDetails.field_key);\n                    if (byFieldKey) {\n                        return byFieldKey;\n                    }\n                }\n\n                if (!variationDetails.parent_id) {\n                    return null;\n                }\n\n                return variations.find((item) => String(item.parent_id) === String(variationDetails.parent_id)) || null;\n            },\n            setSelectedServiceVariation: function(object, serviceId, variationDetails) {\n                const selectedServices = Array.isArray(this.bookingDetails.quotePrice[object]?.[object]) ? [...this.bookingDetails.quotePrice[object][object]] : [];\n\n                const serviceIndex = selectedServices.findIndex((service) => String(service.id) === String(serviceId));\n                if (serviceIndex === -1) {\n                    return;\n                }\n\n                const selectedService = selectedServices[serviceIndex];\n                let nextVariations = Array.isArray(selectedService.variations) ? [...selectedService.variations] : [];\n\n                const existingVariation = this.findExistingSelectedVariation(nextVariations, variationDetails);\n\n                if (!variationDetails.parent_id && !variationDetails.field_key) {\n                    nextVariations = [];\n                } else if (existingVariation?.id) {\n                    nextVariations = this.removeVariationBranch(nextVariations, existingVariation.id);\n                }\n\n                nextVariations.push(variationDetails);\n                selectedServices[serviceIndex] = {\n                    ...selectedService,\n                    variations: nextVariations\n                };\n\n                this.bookingDetails.quotePrice[object] = {\n                    ...this.bookingDetails.quotePrice[object],\n                    [object]: selectedServices\n                };\n            },\n            clearSelectedServiceVariation: function(object, serviceId, parentId = null, fieldKey = null) {\n                const selectedServices = Array.isArray(this.bookingDetails.quotePrice[object]?.[object]) ? [...this.bookingDetails.quotePrice[object][object]] : [];\n\n                const serviceIndex = selectedServices.findIndex((service) => String(service.id) === String(serviceId));\n                if (serviceIndex === -1) {\n                    return;\n                }\n\n                const selectedService = selectedServices[serviceIndex];\n                let nextVariations = Array.isArray(selectedService.variations) ? [...selectedService.variations] : [];\n\n                const existingVariation = this.findExistingSelectedVariation(nextVariations, {\n                    parent_id: parentId,\n                    field_key: fieldKey\n                });\n\n                if (!parentId && !fieldKey) {\n                    nextVariations = [];\n                } else if (existingVariation?.id) {\n                    nextVariations = this.removeVariationBranch(nextVariations, existingVariation.id);\n                }\n\n                selectedServices[serviceIndex] = {\n                    ...selectedService,\n                    variations: nextVariations\n                };\n\n                this.bookingDetails.quotePrice[object] = {\n                    ...this.bookingDetails.quotePrice[object],\n                    [object]: selectedServices\n                };\n            },\n            selectVariation: function(object, variation, request) {\n\n                let serviceId = this.bookingDetails.quotePrice[object][object][0].id;\n                let parentId = this.findParentId(this.originalQuote.variations[object], variation);\n\n                if ((variation == null || variation == 0) && Object.prototype.hasOwnProperty.call(request, 'parentId')) {\n                    parentId = request.parentId;\n                }\n\n                if (request?.source === 'list') {\n                    this.variationLoading[object] = true;\n\n                    if (request?.fieldKey) {\n                        const listFieldIndex = this.originalQuote.variations[object].findIndex((item) => Object.keys(item)[0] === request.fieldKey);\n                        if (listFieldIndex !== -1) {\n                            this.originalQuote.variations[object] = this.originalQuote.variations[object].slice(0, listFieldIndex + 1);\n                        }\n                    }\n\n                    queueMicrotask(() => {\n                        document.querySelectorAll(`.datepicker-booking[data-object=\"${object}\"]`).forEach((input) => {\n                            if (input._flatpickr && input._flatpickr.isOpen) {\n                                input._flatpickr.close();\n                            }\n                        });\n                    });\n                }\n\n                \/\/RESET START and END DATER\n                if (object === 'courses' && request?.source === 'list') {\n                    this.resetCourseDates();\n                }\n\n                \/\/ reset object's  Service and variations\n                this.bookingDetails.quotePrice[object].total = 0;\n                this.bookingDetails.quotePrice[object].products = [];\n                this.calculateTotal();\n\n                if (request?.source === 'list') {\n                    if (variation == null || variation == 0) {\n                        this.clearSelectedServiceVariation(object, serviceId, parentId, request?.fieldKey ?? null);\n                    } else if (request?.title) {\n                        this.setSelectedServiceVariation(object, serviceId, {\n                            id: variation,\n                            title: request.title,\n                            parent_id: parentId,\n                            field_key: request?.fieldKey ?? null\n                        });\n                    }\n                }\n\n\n                \/\/ abort the request if service is null or  = 0\n                if (variation == null || variation == 0) {\n                    this.variationLoading[object] = false;\n                    if (object === 'addons') {\n                        this.syncConfirmationLetterAddon();\n                    } else {\n                        this.calculateTotal();\n                    }\n                    return;\n                }\n\n                if (Object.prototype.hasOwnProperty.call(request, 'start_date')) {\n                    this.bookingDetails.quotePrice[object].start_date = this.normalizeISODate(request.start_date);\n                }\n                if (Object.prototype.hasOwnProperty.call(request, 'end_date')) {\n                    this.bookingDetails.quotePrice[object].end_date = this.normalizeISODate(request.end_date);\n                }\n\n                const startDate = this.normalizeISODate(this.bookingDetails.quotePrice[object].start_date);\n                const endDate = this.normalizeISODate(this.bookingDetails.quotePrice[object].end_date);\n                this.bookingDetails.quotePrice[object].start_date = startDate;\n                this.bookingDetails.quotePrice[object].end_date = endDate;\n\n                if (\n                    object === 'courses' &&\n                    this.bookingDetails.quotePrice.courses.start_date &&\n                    this.bookingDetails.quotePrice.courses.end_date &&\n                    moment(this.bookingDetails.quotePrice.courses.end_date).isSameOrAfter(this.bookingDetails.quotePrice.courses.start_date)\n                ) {\n                    this.syncAccommodationDatesFromCourse();\n                }\n\n                if (startDate && !endDate) {\n                    this.variationLoading[object] = false;\n                    return;\n                }\n\n                this.variationRequestCounter[object] = (this.variationRequestCounter[object] || 0) + 1;\n                const requestCounter = this.variationRequestCounter[object];\n\n                fetch(`${this.baseUrl}\/services\/${serviceId}\/variations\/${variation}`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            \"all_dates_prices\": false,\n                            \"start_date\": startDate,\n                            \"end_date\": endDate,\n                            \"parent_id\": parentId,\n                            \"with\": [\"template\", \"variations\"]\n                        })\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n                        if (requestCounter !== this.variationRequestCounter[object]) {\n                            return;\n                        }\n\n                        let variation = data.variation;\n\n                        let template = variation.template;\n\n                        let variationType = data.variation.type;\n                        const responseFieldKey = request?.fieldKey || variationType;\n\n                        \/\/ reset variations list remove the sub variations\n                        const index = this.originalQuote.variations[object].findIndex(item => Object.keys(item)[0] === variationType)\n                        if (index !== -1) {\n                            this.originalQuote.variations[object] = this.originalQuote.variations[object].slice(0, index + 1)\n                        }\n\n\n                        if (template.price_now) {\n\n                            this.addToBag(\n                                data.variation.template.price_now.duration,\n                                data.variation.template.price_now.summary.total_price,\n                                data.variation.template.price_now.charges,\n                                data.variation.template.price_now.products,\n                                object\n                            );\n\n                        }\n\n                        if (template.fields) {\n\n                            const templateFieldName = Object.keys(template.fields)[0]\n                            const field = template.fields[templateFieldName];\n\n                            const index = this.originalQuote.variations[object].findIndex(item => item[templateFieldName] && item[templateFieldName].name === template.fields[templateFieldName].name);\n\n\n                            if (index !== -1) {\n                                this.originalQuote.variations[object][index] = template.fields;\n                            } else {\n                                this.originalQuote.variations[object].push(template.fields);\n                            }\n                        }\n\n                        let title = request?.title || variation.title || template?.price_now?.summary?.label;\n                        const serviceVariation = {\n                            id: variation.id,\n                            title: (title) ? title : variation.title,\n                            parent_id: variation.parent_id,\n                            field_key: responseFieldKey\n                        };\n                        this.setSelectedServiceVariation(object, variation.educational_service_id, serviceVariation);\n\n                    })\n                    .catch(() => {})\n                    .finally(() => {\n                        if (requestCounter === this.variationRequestCounter[object]) {\n                            this.variationLoading[object] = false;\n                        }\n                    });\n            },\n\n            selectStartDate: function(object, variation, request) {\n\n                if (request.date) {\n                    this.bookingDetails.quotePrice[object].date = request.date;\n                    let products = this.bookingDetails.quotePrice[object].products;\n\n                    let product = products.find(product => product.id == variation);\n\n                    \/\/ check if the product properties object contains week value\n                    if (product?.properties && product?.properties.weeks) {\n                        \/\/ get the week value from the product properties object\n                        let weeks = parseInt(product.properties.weeks);\n                        \/\/ convert weeks to integer\n\n                        \/\/ get the Friday date after number of weeks of the start date\n                        let end_date = this.normalizeISODate(moment(request.date).add(weeks - 1, 'weeks').add(4, 'days').format('YYYY-MM-DD'));\n\n\n                        this.bookingDetails.quotePrice[object].start_date = this.normalizeISODate(request.date);\n                        this.bookingDetails.quotePrice[object].end_date = end_date;\n\n                        if (object === 'courses') {\n                            this.syncAccommodationDatesFromCourse();\n                        }\n                    }\n\n                }\n\n            },\n            selectEndDate: function(object, variation, request, weeks) {\n                const parsedWeeks = parseInt(weeks, 10);\n                let start_date = this.normalizeISODate(this.bookingDetails.quotePrice[object].date);\n                let end_date = \"\";\n                if (start_date && parsedWeeks >= 1) {\n                    end_date = this.normalizeISODate(moment(start_date).add(parsedWeeks - 1, 'weeks').add(4, 'days').format('YYYY-MM-DD'));\n                }\n                this.bookingDetails.quotePrice[object].start_date = start_date;\n                this.bookingDetails.quotePrice[object].end_date = end_date;\n\n                if (object === 'courses' && parsedWeeks < 1) {\n                    this.resetAccommodationSelection();\n                }\n\n                \/\/ dispatch variationSelected event \n                this.$dispatch('variationSelected', {\n                    variation: variation,\n                    object: object,\n                    request: request\n                });\n            },\n            updateStep: function(template, variations, dates, pricing, object) {\n                this.originalQuote.steps = this.originalQuote.steps.map((step) => {\n                    if (step.object === object) {\n                        step.template = template;\n                        step.variations = variations;\n                        step.dates = dates;\n                        step.pricing = pricing;\n                    }\n                    return step;\n                })\n            },\n            addToBag: function(duration, totalPrice, charges, products, object) {\n                \/\/ reset products\n                this.bookingDetails.quotePrice[object].products = [];\n\n                if (typeof duration !== 'undefined') {\n                    this.bookingDetails.quotePrice.duration = duration;\n                }\n\n                \/\/ The placement fee (charges) must be a one-off cost, but the API returns\n                \/\/ total_price with charges multiplied by weeks. Subtract the extra weeks.\n                let adjustedTotalPrice = parseFloat(totalPrice);\n                let adjustedProducts = Array.isArray(products) ? JSON.parse(JSON.stringify(products)) : products;\n                if (object === 'accommodations') {\n                    \/\/ Get effective charges: prefer top-level charges param, fall back to products[0].extra.charges\n                    const effectiveCharges = (typeof charges !== 'undefined' && parseFloat(charges) > 0)\n                        ? parseFloat(charges)\n                        : (Array.isArray(products) && products.length && products[0]?.extra?.charges ? parseFloat(products[0].extra.charges) : 0);\n\n                    if (effectiveCharges > 0) {\n                        \/\/ Prefer accommodation dates; fall back to course dates if not yet set\n                        const startDate = this.bookingDetails.quotePrice.accommodations.start_date\n                            || this.bookingDetails.quotePrice.courses.start_date;\n                        const endDate = this.bookingDetails.quotePrice.accommodations.end_date\n                            || this.bookingDetails.quotePrice.courses.end_date;\n\n                        if (startDate && endDate) {\n                            const weeks = Math.round(moment(endDate).diff(moment(startDate), 'weeks', true));\n                            if (weeks > 1) {\n                                const reduction = effectiveCharges * (weeks - 1);\n                                adjustedTotalPrice -= reduction;\n                                \/\/ Also adjust the product price so the invoice line items are correct.\n                                \/\/ Find the first product that carries the placement fee and reduce its price.\n                                if (Array.isArray(adjustedProducts) && adjustedProducts.length) {\n                                    const feeProductIndex = adjustedProducts.findIndex(p => parseFloat(p?.extra?.charges) > 0);\n                                    const targetIndex = feeProductIndex !== -1 ? feeProductIndex : 0;\n                                    adjustedProducts[targetIndex] = {\n                                        ...adjustedProducts[targetIndex],\n                                        price: parseFloat(adjustedProducts[targetIndex].price) - reduction\n                                    };\n                                }\n                            }\n                        }\n                    }\n                }\n\n                \/\/ set bookingDetails.total\n                this.bookingDetails.quotePrice[object].total = adjustedTotalPrice;\n\n                if (typeof charges !== 'undefined') {\n                    this.bookingDetails.quotePrice[object].charges = parseFloat(charges);\n                }\n                this.bookingDetails.quotePrice[object].products = adjustedProducts;\n\n                if (object === 'addons') {\n                    this.syncConfirmationLetterAddon();\n                    return;\n                }\n\n                this.calculateTotal();\n\n            },\n            isDisabledAccommodation: function(service) {\n                if (service.educational_service_category.object != 'accommodations') {\n                    return false;\n                }\n                if (typeof service.properties.from_date == 'undefined' && typeof service.properties.to_date == 'undefined') {\n                    return false;\n                }\n\n\n                let start_date = this.bookingDetails.quotePrice.courses.start_date;\n                let end_date = this.bookingDetails.quotePrice.courses.end_date;\n\n                let min_duration = service.properties.min_duration || 1000;\n\n\n                let durationInWeeks = moment(end_date).diff(moment(start_date), 'weeks');\n\n                if (durationInWeeks < (min_duration - 1)) {\n                    return true;\n                }\n\n                let from_date = moment(service.properties.from_date);\n                let to_date = moment(service.properties.to_date);\n\n                let isStartDateWithin = moment(start_date).isBetween(from_date, to_date, null, '[]');\n                let isEndDateWithin = moment(end_date).isBetween(from_date, to_date, null, '[]');\n\n                if (!isStartDateWithin || !isEndDateWithin) {\n                    return true;\n                }\n                return false;\n            },\n            proceedToPersonalInfo: function() {\n                \/\/ fetch the application\n                this.currentPage = 2;\n                \/\/scroll to a div with ID PersonalInformation\n                let divPersonalInformation = document.getElementById(\"PersonalInformation\");\n                if (divPersonalInformation) {\n                    window.scrollTo({\n                        top: divPersonalInformation.offsetTop,\n                        behavior: 'smooth'\n                    });\n                }\n\n            },\n            proceedToBookingConfirmation: function() {\n                if (!this.checkApplicationValidity()) {\n                    return;\n                }\n\n                this.storeQuote({\n                    includeContact: true\n                });\n\n                this.currentPage = 3;\n                \/\/window.scrollTo(0, 0);\n\n                \/\/scroll to div#BookingSummary\n                let divBookingSummary = document.getElementById(\"BookingSummary\");\n                if (divBookingSummary) {\n                    window.scrollTo({\n                        top: divBookingSummary.offsetTop,\n                        behavior: 'smooth'\n                    });\n                }\n\n            },\n\n            proceedToPayment: function() {\n\n\n                let details = this.bookingDetails;\n\n                let products = details.quotePrice.accommodations.products.concat(details.quotePrice.transfers.products, details.quotePrice.courses.products, details.quotePrice.addons.products);\n\n                let items = products.map(function(product) {\n                    return {\n                        \"uid\": \"754599\",\n                        \"title\": product.label,\n                        \"properties\": {\n                            \"description\": product.description,\n                            \"taxable\": false,\n                        },\n                        \"invoiceable_id\": product.invoiceable_id ?? null,\n                        \"student_id\": details.booking.student.student_id,\n                        'rate': product.price \/ product.quantity,\n                        \"quantity\": product.quantity,\n                        'amount': product.price\n                    }\n                });\n\n                \/\/ Create Invoice\n                fetch(`${this.baseUrl}\/invoices\/create`, {\n                        method: 'POST',\n                        headers: {\n                            'Content-Type': 'application\/json',\n                            'Authorization': 'Bearer ' + this.token\n                        },\n                        body: JSON.stringify({\n                            update_exist: true,\n                            payment_gateway: \"paypal\",\n                            booking_id: details.booking.booking_id,\n                            student_id: details.booking.student.id,\n                            uid: \"734521\",\n                            total: parseFloat(this.calculateDueToday()),\n                            due_date: new Date(new Date().getTime() + 1000 * 60 * 60 * 24 * 7).toISOString().slice(0, 10),\n                            items: items,\n                        })\n                    })\n                    .then(response => response.json())\n                    .then(data => {\n                        window.location.href = data.invoice.public_url;\n                    });\n            },\n            calculateTotal: function() {\n                let total = parseFloat(0);\n                \/\/ loop through quotePrice objects and sum total\n                for (const [key, value] of Object.entries(this.bookingDetails.quotePrice)) {\n                    if (typeof value.total !== 'undefined') {\n                        total += parseFloat(value.total);\n                    }\n                }\n                \/\/ set TotalPrice\n                this.bookingDetails.quotePrice.totalPrice = parseInt(total).toFixed(2);\n                this.dueToday = this.calculateDueToday();\n            },\n            calculateDueToday: function() {\n                const addonsTotal = this.isCialConfirmationLetterEnabled() ? this.getAddonsTotal() : 0;\n                const totalPrice = parseFloat(this.bookingDetails.quotePrice.totalPrice || 0);\n                const depositBaseTotal = Math.max(totalPrice - addonsTotal, 0);\n\n                if (totalPrice === 0) {\n                    return 0.0;\n                }\n\n                let baseDeposit = 0;\n                switch (this.originalQuote?.properties?.finance?.schema) {\n\n                    case \"rate\":\n                        baseDeposit = (parseFloat(this.originalQuote?.properties?.finance?.schema_value || 0) \/ 100) * depositBaseTotal;\n                        break;\n\n                    case \"value\":\n                        baseDeposit = parseFloat(this.originalQuote.properties?.finance?.schema_value || 0);\n                        break;\n\n                    default:\n                        baseDeposit = depositBaseTotal;\n                        break;\n                }\n\n                return (baseDeposit + addonsTotal).toFixed(2);\n            },\n            initializeFlatpickr: function() {\n                queueMicrotask(() => {\n                    jQuery(\".datepicker-booking\").each(function() {\n                        if (this._flatpickr) {\n                            return;\n                        }\n\n                        let options = {\n                            onChange: function(selectedDates, dateStr, instance) {\n                                let element = instance.element;\n                                if (!element || element.offsetParent === null) {\n                                    return;\n                                }\n                                if (!dateStr) {\n                                    return;\n                                }\n\n                                let object = element.dataset.object;\n\n                                let request = {\n                                    object: object\n                                };\n                                let field = element.dataset.field;\n                                let variation = element.dataset.variation;\n                                let fieldKey = element.dataset.fieldKey || null;\n\n                                \/\/check if the element has class \"week-selector\"\n                                if (element.classList.contains(\"week-selector\")) {\n                                    const variationBlock = element.closest('.variationBlock');\n                                    const weeksSelect = variationBlock ? variationBlock.querySelector(`select.weeks[data-object=\"${object}\"]`) : null;\n                                    if (weeksSelect) {\n                                        weeksSelect.value = \"0\";\n                                    }\n\n                                    \/\/ dispatch calculateEndDate event\n                                    window.dispatchEvent(new CustomEvent('calculateEndDate', {\n                                        detail: {\n                                            weeks: -1,\n                                            variation: variation,\n                                            object: object,\n                                            request: {\n                                                source: 'week-selector-reset',\n                                                fieldKey: fieldKey\n                                            }\n                                        }\n                                    }));\n\n                                }\n\n                                request[field] = dateStr;\n                                request.fieldKey = fieldKey;\n\n                                \/\/ For Start Date Only\n                                if (field == 'date') {\n\n                                    \/\/For Start date and End date\n                                    window.dispatchEvent(new CustomEvent('dateSelected', {\n                                        detail: {\n                                            object: object,\n                                            variation: variation,\n                                            request: request,\n                                        }\n                                    }));\n\n                                } else {\n                                    \/\/For Start date and End date\n                                    window.dispatchEvent(new CustomEvent('variationSelected', {\n                                        detail: {\n                                            object: object,\n                                            variation: variation,\n                                            request: request,\n                                        }\n                                    }));\n\n                                }\n\n\n                            },\n                        };\n                        let dates = jQuery(this).data(\"dates\");\n                        \/\/ if dates are defined, set them as options\\\n                        if (dates) {\n                            options.enable = dates;\n                            options.minDate = dates[0];\n                        } else {\n                            \/\/ set min date to tomorrow\n                            options.minDate = new Date().fp_incr(1);\n                        }\n\n                        let from = jQuery(this).data(\"from\");\n                        let to = jQuery(this).data(\"to\");\n                        if (typeof from !== 'undefined' && typeof to !== 'undefined' && from && to) {\n                            options.minDate = from;\n                            options.maxDate = to;\n                        }\n                        let calendar = jQuery(this).flatpickr(options);\n                    });\n                    jQuery(\".application-datepicker-booking\").flatpickr({\n                        onChange: function(selectedDates, dateStr, instance) {\n                            let element = instance.element;\n                        },\n                    });\n                });\n            },\n            navigateBack: function() {\n                if (this.currentPage == 1) {\n                    return;\n                }\n                this.currentPage = this.currentPage - 1;\n            },\n            checkValidity: function(value) {\n\n                if (value.courses.total > 0) {\n                    this.isCourseConfigurationValid = true;\n                }\n                if (value.accommodations.accommodations.length > 0 && value.accommodations.total == 0) {\n                    this.isCourseConfigurationValid = false;\n                }\n                if (value.transfers.transfers.length > 0 && value.transfers.total == 0) {\n                    this.isCourseConfigurationValid = false;\n                }\n                if (value.addons.addons.length > 0 && value.addons.total == 0) {\n                    this.isCourseConfigurationValid = false;\n                }\n            },\n            checkApplicationValidity: function() {\n                this.errors = {};\n\n                const fields = Array.isArray(this.originalQuote?.application?.fields) ? this.originalQuote.application.fields : [];\n                let isValid = true;\n\n                fields.forEach((field) => {\n                    const fieldKey = this.getPersonalInfoFieldKey(field);\n                    if (!this.isVisiblePersonalInfoField(field)) {\n                        if (fieldKey) {\n                            delete this.errors[fieldKey];\n                        }\n                        return;\n                    }\n\n                    if (!this.validateField(field)) {\n                        isValid = false;\n                    }\n                });\n\n                if (!this.bookingDetails?.contact?.disclaimer_accepted) {\n                    this.errors.disclaimer_accepted = \"Please accept the disclaimer.\";\n                    isValid = false;\n                }\n\n                return isValid;\n            },\n            normalizePersonalInfoFieldType: function(field) {\n                console.log(field)\n                return String(field?.properties?.type || field?.properties?.input_type || field?.type || '').trim().toLowerCase();\n            },\n            getPersonalInfoFieldKey: function(field) {\n                return String(field?.name || field?.custom_field || '').trim();\n            },\n            normalizePersonalInfoFieldName: function(field) {\n                return this.getPersonalInfoFieldKey(field).toLowerCase();\n            },\n            normalizePersonalInfoFieldLabel: function(field) {\n                return this.getPersonalInfoFieldLabel(field).trim().toLowerCase();\n            },\n            getPersonalInfoFieldLabel: function(field) {\n                return this.getLocalizedPersonalInfoText(field?.label ?? field?.label_text ?? field?.placeholder ?? field?.name ?? field?.custom_field ?? '');\n            },\n            isVatNumberPersonalInfoField: function(field) {\n                const name = this.normalizePersonalInfoFieldName(field);\n                const label = this.normalizePersonalInfoFieldLabel(field);\n\n                return ['vat', 'vat number', 'nif'].some((needle) => name.includes(needle) || label.includes(needle));\n            },\n            isSecondaryAddressPersonalInfoField: function(field) {\n                const name = this.normalizePersonalInfoFieldName(field);\n                const label = this.normalizePersonalInfoFieldLabel(field);\n                const secondaryAddressPattern = \/\\b(address([\\s_-]*line)?[\\s_-]*2|line[\\s_-]*2)\\b\/;\n\n                return secondaryAddressPattern.test(name) || secondaryAddressPattern.test(label);\n            },\n            isPersonalInfoFieldRequired: function(field) {\n                return this.isVisiblePersonalInfoField(field) &&\n                    !this.isVatNumberPersonalInfoField(field) &&\n                    !this.isSecondaryAddressPersonalInfoField(field);\n            },\n            getPersonalInfoFieldValidationRules: function(field) {\n                const validationRules = field?.properties?.validation;\n                const rules = (validationRules && typeof validationRules === 'object') ? {\n                    ...validationRules\n                } : {};\n\n                if (this.isPersonalInfoFieldRequired(field)) {\n                    rules.required = rules.required || {\n                        message: \"This field is required.\"\n                    };\n                } else {\n                    delete rules.required;\n                }\n\n                return rules;\n            },\n            getLocalizedPersonalInfoText: function(value) {\n                if (value === null || typeof value === 'undefined') {\n                    return '';\n                }\n\n                if (typeof value === 'string') {\n                    const trimmed = value.trim();\n\n                    if (!trimmed.length) {\n                        return '';\n                    }\n\n                    if ((trimmed.startsWith('{') && trimmed.endsWith('}')) || (trimmed.startsWith('[') && trimmed.endsWith(']'))) {\n                        try {\n                            const parsed = JSON.parse(trimmed);\n                            return this.getLocalizedPersonalInfoText(parsed);\n                        } catch (e) {\n                            return trimmed;\n                        }\n                    }\n\n                    return trimmed;\n                }\n\n                if (Array.isArray(value)) {\n                    return value.map((item) => this.getLocalizedPersonalInfoText(item)).filter(Boolean).join(', ');\n                }\n\n                if (typeof value === 'object') {\n                    const lang = this.lang || 'en';\n                    if (typeof value[lang] === 'string' && value[lang].trim().length) {\n                        return value[lang].trim();\n                    }\n                    if (typeof value.en === 'string' && value.en.trim().length) {\n                        return value.en.trim();\n                    }\n                    if (typeof value.pt === 'string' && value.pt.trim().length) {\n                        return value.pt.trim();\n                    }\n\n                    const firstText = Object.values(value).find((item) => typeof item === 'string' && item.trim().length);\n                    return firstText ? firstText.trim() : '';\n                }\n\n                return String(value);\n            },\n            getPersonalInfoFieldPlaceholder: function(field) {\n                const placeholder = this.getLocalizedPersonalInfoText(field?.properties?.placeholder ?? field?.placeholder ?? '');\n                const label = this.getLocalizedPersonalInfoText(field?.label ?? field?.label_text ?? '');\n\n                return placeholder || label || '';\n            },\n            getPersonalInfoOptionLabel: function(option, fallbackValue = '') {\n                if (option === null || typeof option === 'undefined') {\n                    return String(fallbackValue || '');\n                }\n\n                if (typeof option === 'string') {\n                    return option;\n                }\n\n                if (typeof option === 'object') {\n                    if (typeof option.title !== 'undefined') {\n                        const titleText = this.getLocalizedPersonalInfoText(option.title);\n                        if (titleText) {\n                            return titleText;\n                        }\n                    }\n\n                    if (typeof option.label !== 'undefined') {\n                        const labelText = this.getLocalizedPersonalInfoText(option.label);\n                        if (labelText) {\n                            return labelText;\n                        }\n                    }\n\n                    const localized = this.getLocalizedPersonalInfoText(option);\n                    if (localized) {\n                        return localized;\n                    }\n                }\n\n                return String(fallbackValue || '');\n            },\n            isPhoneLikePersonalInfoField: function(field) {\n                const type = this.normalizePersonalInfoFieldType(field);\n                const name = this.normalizePersonalInfoFieldName(field);\n                const label = this.normalizePersonalInfoFieldLabel(field);\n\n                return ['phone', 'tel', 'mobile', 'telephone', 'whatsapp'].some((needle) => type.includes(needle) || name.includes(needle) || label.includes(needle));\n            },\n            isPersonalInfoDateField: function(field) {\n                const type = this.normalizePersonalInfoFieldType(field);\n                return type === 'date' || type.includes('date');\n            },\n            isPersonalInfoListField: function(field) {\n                const type = this.normalizePersonalInfoFieldType(field);\n                const hasOptions = Array.isArray(field?.data) && field.data.length > 0;\n\n                if (this.isPhoneLikePersonalInfoField(field)) {\n                    return false;\n                }\n\n                if (\n                    type === 'list' ||\n                    type === 'select' ||\n                    type === 'dropdown' ||\n                    type.includes('select') ||\n                    type.includes('dropdown') ||\n                    type.includes('country')\n                ) {\n                    return true;\n                }\n\n                return hasOptions && !this.isPersonalInfoDateField(field);\n            },\n            isPersonalInfoInputField: function(field) {\n                const type = this.normalizePersonalInfoFieldType(field);\n                const name = this.normalizePersonalInfoFieldName(field);\n                const properties = field?.properties || {};\n                const isPhoneLikeField = this.isPhoneLikePersonalInfoField(field);\n\n                if (!this.getPersonalInfoFieldKey(field)) {\n                    return false;\n                }\n\n                if (this.isPersonalInfoDateField(field) || this.isPersonalInfoListField(field)) {\n                    return false;\n                }\n\n                const nonInputTypes = [\n                    'hidden',\n                    'checkbox',\n                    'radio',\n                    'group',\n                    'section',\n                    'heading',\n                    'title',\n                    'paragraph',\n                    'html',\n                    'content',\n                    'divider',\n                    'separator',\n                    'file',\n                    'image',\n                    'signature',\n                    'button',\n                    'submit'\n                ];\n\n                if (properties?.hidden === true || properties?.visible === false) {\n                    if (isPhoneLikeField) {\n                        return true;\n                    }\n                    return false;\n                }\n\n                if (nonInputTypes.includes(type)) {\n                    return false;\n                }\n\n                if (!type) {\n                    return true;\n                }\n\n                return true;\n            },\n            getPersonalInfoInputType: function(field) {\n                const type = this.normalizePersonalInfoFieldType(field);\n                const explicitType = String(field?.properties?.type || field?.properties?.input_type || field?.type || '').trim().toLowerCase();\n                const name = this.normalizePersonalInfoFieldName(field);\n                const label = this.normalizePersonalInfoFieldLabel(field);\n\n                if (type.includes('email') || explicitType.includes('email') || name.includes('email') || label.includes('email')) {\n                    return 'email';\n                }\n\n                if (this.isPhoneLikePersonalInfoField(field)) {\n                    return 'tel';\n                }\n\n                if (['number', 'numeric', 'integer', 'digit'].some((needle) => type === needle || explicitType === needle || type.includes(`${needle}_`) || explicitType.includes(`${needle}_`))) {\n                    return 'number';\n                }\n\n                return 'text';\n            },\n            isVisiblePersonalInfoField: function(field) {\n                if (!this.getPersonalInfoFieldKey(field)) {\n                    return false;\n                }\n\n                return this.isPersonalInfoDateField(field) || this.isPersonalInfoListField(field) || this.isPersonalInfoInputField(field);\n            },\n            errors: {},\n            validateField: function(field) {\n                const fieldKey = this.getPersonalInfoFieldKey(field);\n\n                if (!fieldKey) {\n                    return true;\n                }\n\n                let lang = this.lang;\n                let errors = this.errors;\n                let validationRules = this.getPersonalInfoFieldValidationRules(field);\n\n                if (!validationRules || typeof validationRules !== 'object' || !Object.keys(validationRules).length) {\n                    delete errors[fieldKey];\n                    return true;\n                }\n\n                const rules = Object.keys(validationRules);\n                const value = this.bookingDetails.contact[fieldKey];\n                let fieldIsValid = true;\n                let message = \"\";\n\n                for (const rule of rules) {\n                    const ruleConfig = validationRules[rule];\n                    let ruleIsValid = true;\n\n                    if (rule === 'required') {\n                        ruleIsValid = Iodine.isRequired(value, rules);\n                    } else if (rule === 'email') {\n                        ruleIsValid = !value || Iodine.isEmail(value, rules);\n                    } else if (rule === 'mindate') {\n                        ruleIsValid = true;\n                    } else {\n                        continue;\n                    }\n\n                    if (!ruleIsValid) {\n                        fieldIsValid = false;\n\n                        if (ruleConfig && typeof ruleConfig === 'object' && ruleConfig.message) {\n                            if (typeof ruleConfig.message === 'string') {\n                                try {\n                                    const parsedMessage = JSON.parse(ruleConfig.message);\n                                    message = parsedMessage?.[lang] || ruleConfig.message;\n                                } catch (e) {\n                                    message = ruleConfig.message;\n                                }\n                            } else {\n                                message = String(ruleConfig.message);\n                            }\n                        } else if (typeof ruleConfig === 'string') {\n                            message = ruleConfig;\n                        } else {\n                            message = 'Invalid field';\n                        }\n\n                        break;\n                    }\n                }\n\n                if (!fieldIsValid) {\n                    errors[fieldKey] = message;\n                    return false;\n                }\n\n                delete errors[fieldKey];\n                return true;\n            }\n        }))\n    })\n\n    \/\/ listen to variation-selected event\n<\/script>\n\n<div class=\"main\" style=\"background-color: #F5F5F5; padding-top:20px\" x-data=\"quoteBuilder\" x-bind=\"eventListeners\">\n    <!-- <p>Original Quote<\/p>\n    <p x-text=\"JSON.stringify(originalQuote)\"><\/p> -->\n\n    <div class=\" divHeadBooking\">\n        <ul>\n            <li>Course Configuration<\/li>\n            <li>Personal Information<\/li>\n            <li>Confirm Booking<\/li>\n        <\/ul>\n        <div class=\"nav\">\n            <div class=\"completion-bar\" x-bind:class=\"getStep()\">&nbsp;<\/div>\n            <div class=\"stepItem left \" x-bind:class=\"getProgress(1) ? ' active' : ''\"><span>01<\/span><\/div>\n            <div class=\"stepItem center\" x-bind:class=\"getProgress(2) ? ' active' : ''\"><span>02<\/span><\/div>\n            <div class=\"stepItem right\" x-bind:class=\"getProgress(3) ? ' active' : ''\"><span>03<\/span><\/div>\n        <\/div>\n    <\/div>\n\n    <form class=\"frmCourseBooking frmCourseBookingStep1 frmCourseBookingPresential\" action=\"\" method=\"post\" onsubmit=\"\">\n        <div class=\"colunasBooking\">\n            <!-- Course Configuration -->\n            <div id=\"CourseConfiguration\" x-show=\"currentPage == 1\">\n                    <div class=\"linhasBooking\">\n        <h5>\n            <span class=\"stepNumber\">1<\/span>\n            <span>Select Type of study?<\/span>\n            <span class=\" new\">Check out our new online courses<\/span>\n        <\/h5>\n        <span class=\"styled-select\">\n            <select class=\"field mandatory select-initial\" name=\"id_tipologia\" tabindex=\"1\" @change=\"getQuote\">\n                <option value=\"0\">&#8211; Select &#8211;<\/option>\n                                    <option value=\"presential-quote\" selected=\"selected\">Presential<\/option>\n                                    <option value=\"online\" >Online<\/option>\n                            <\/select>\n        <\/span>\n    <\/div>\n<!-- Select School -->\n<template x-if=\"originalQuote.steps.campuses?.options\">\n    <div x-data=\"{\n                    title: originalQuote.steps.campuses.title,\n                    options: originalQuote.steps.campuses.options,\n                    }\">\n        <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"initialStep + 1\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" @change=\"$dispatch('campusSelected' , {campusId: $event.target.value , campusName: $event.target.options[$event.target.selectedIndex].text})\">\n            <option value=\"0\">&#8211; Select &#8211;<\/option>\n            <template x-for=\"(option , id) in options\" :key=\"id\">\n                <option x-text=\"option.title\" x-bind:value=\"option.id\"><\/option>\n            <\/template>\n        <\/select>\n    <\/span>\n<\/div>\n    <\/div>\n<\/template>\n<!-- SELECT COURSES -->\n<template x-if=\"originalQuote.services.courses &#038;&#038; originalQuote.services.courses.length\">\n    <div>\n        <div x-data=\"{\n                title: originalQuote.steps.courses.title,\n                object: 'courses',\n                services: originalQuote.services.courses[0],\n                order:initialStep + 2\n            }\">\n            <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" @change=\"$dispatch('serviceSelected', { object: object , service: $event.target.value })\" x-bind:disabled=\"services.length == 0\">\n            \n            <template x-if=\"object == 'accommodations'\">\n                <option value=\"0\">No Accommodation<\/option>\n            <\/template>\n            \n            <template x-if=\"object == 'transfers'\">\n                <option value=\"0\">No Transfer<\/option>\n            <\/template>\n            \n            \n            <template x-if=\"object == 'courses'\">\n                <option value=\"0\"> &#8211; Select &#8211; <\/option>\n            <\/template>\n            \n\n            <template x-for=\"(service , id) in services\" :key=\"id\">\n                <template x-if=\"!isDisabledAccommodation(service)\">\n                    <option x-text=\"service.name\" x-bind:value=\"service.id\"><\/option>\n                <\/template>\n            <\/template>\n        <\/select>\n    <\/span>\n    <div x-show=\"originalQuote.variations[object].length\">\n        <div style=\"margin-top: 10px;\">\n            <template x-for=\"(variation,index) in originalQuote.variations[object]\" :key=\"getVariationRenderKey(object, variation)\">\n                <div>\n                    <!-- Date Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type == 'date' &#038;&#038; variation[Object.keys(variation)[0]].settings.date != 'start_date_weeks'\">\n                        \n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\">\n                                <span class=\"datepickerContainer\">\n                                    <label class=\"hidden\">Start Date<\/label>\n                                    <input \n                                        x-ref=\"startDate\" \n                                        x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                        type=\"text\" class=\" field mandatory datepicker-booking\" placeholder=\"Start Date\" x-init=\"$dispatch('initDatePicker', { })\"\n                                    x-bind:data-object=\"object\" data-field=\"start_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\"\n                                    >\n                                <\/span>\n                            <\/span>\n\n                            <span class=\"styled-select50 duracaoContainer\">\n                                <span class=\"datepickerContainer left\">\n\n                                    <label class=\"hidden\">End Date<\/label>\n\n                                    <input type=\"text\" \n\n                                    x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.end != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.end) : \"\"'\n                                    \n                                    class=\"field mandatory datepicker-booking\" placeholder=\"End Date\" x-bind:data-object=\"object\" data-field=\"end_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\">\n\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- LIST Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type=='list'\">\n\n                        <div class=\" linhasBooking variationBlock\">\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial\" name=\"\" x-bind:data-object=\"object\" x-bind:data-field-key=\"Object.keys(variation)[0]\" x-bind:value=\"getSelectedVariationValue(object, Object.keys(variation)[0])\" x-bind:disabled=\"variationLoading[object]\" @change=\"$dispatch('variationSelected', {\n                                                    variation: $event.target.value,\n                                                    object: object,\n                                                    request: {\n                                                        source: 'list',\n                                                        title: $event.target.options[$event.target.selectedIndex]?.text || '',\n                                                        parentId: variation[Object.keys(variation)[0]].data[0]?.parent_id ?? null,\n                                                        fieldKey: Object.keys(variation)[0]\n                                                    }\n                                                })\">\n                                    <option value=\"0\" x-text=\"variation[Object.keys(variation)[0]].label\"><\/option>\n                                    <template x-for=\"item in variation[Object.keys(variation)[0]].data\" :key=\"item.id\">\n                                        <option x-text=\"item.title\" x-bind:value=\"item.id\"><\/option>\n                                    <\/template>\n                                <\/select>\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n                    <!-- Start date picker only -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.start_date== true\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer left\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Start date picker and number of weeks -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.date== 'start_date_weeks'\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking week-selector\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial weeks\" name=\"\" @change=\"$dispatch('calculateEndDate', {\n                                            weeks : $event.target.value,\n                                            variation: getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id,\n                                            object: object,\n                                            request: {\n                                                source: 'weeks',\n                                                fieldKey: Object.keys(variation)[0],\n                                                title: $event.target.options[$event.target.selectedIndex]?.text || ''\n                                            }\n                                        })\"\n                                    x-bind:data-object=\"object\"\n                                    x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                    x-bind:disabled=\"variationLoading[object] || !bookingDetails.quotePrice[object].date\"\n                                >\n                                    <option value=\"0\">Number of weeks<\/option>\n                                    <template x-if=\"object !== 'accommodations'\">\n                                        <option value=\"1\">1 Week<\/option>\n                                    <\/template>\n                                    <template x-for=\"item in 35\" :key=\"item\">\n                                            <option x-text=\"`${item + 1}  Weeks`\" x-bind:value=\"`${item + 1}`\"><\/option>\n                                    <\/template>\n                                    <!-- <option value=\"2\" >2 Weeks<\/option> -->\n                                <\/select>\n                            <\/span>\n                            \n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/div>\n        <\/div>\n    <\/div>\n<\/template>\n<!-- EMPTY COURSES -->\n<template x-if=\"typeof originalQuote.services.courses == 'undefined'\">\n    <div>\n        <div x-data=\"{\n                title: originalQuote.steps.courses.title,\n                object: 'courses',\n                order:initialStep + 2\n            }\">\n            <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" disabled>\n            <option value=\"0\"> &#8211; Select &#8211; <\/option>\n        <\/select>\n    <\/span>\n    \n<\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<!-- SELECT ACCOMMODATION -->\n<template x-if=\"originalQuote.services.accommodations &#038;&#038; originalQuote.services.accommodations.length\">\n    <div x-data=\"{\n                    title: originalQuote.steps.accommodation.title,\n                    object: 'accommodations',\n                    services: originalQuote.services.accommodations[0],\n                    order:initialStep + 3\n                }\">\n        <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" @change=\"$dispatch('serviceSelected', { object: object , service: $event.target.value })\" x-bind:disabled=\"services.length == 0\">\n            \n            <template x-if=\"object == 'accommodations'\">\n                <option value=\"0\">No Accommodation<\/option>\n            <\/template>\n            \n            <template x-if=\"object == 'transfers'\">\n                <option value=\"0\">No Transfer<\/option>\n            <\/template>\n            \n            \n            <template x-if=\"object == 'courses'\">\n                <option value=\"0\"> &#8211; Select &#8211; <\/option>\n            <\/template>\n            \n\n            <template x-for=\"(service , id) in services\" :key=\"id\">\n                <template x-if=\"!isDisabledAccommodation(service)\">\n                    <option x-text=\"service.name\" x-bind:value=\"service.id\"><\/option>\n                <\/template>\n            <\/template>\n        <\/select>\n    <\/span>\n    <div x-show=\"originalQuote.variations[object].length\">\n        <div style=\"margin-top: 10px;\">\n            <template x-for=\"(variation,index) in originalQuote.variations[object]\" :key=\"getVariationRenderKey(object, variation)\">\n                <div>\n                    <!-- Date Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type == 'date' &#038;&#038; variation[Object.keys(variation)[0]].settings.date != 'start_date_weeks'\">\n                        \n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\">\n                                <span class=\"datepickerContainer\">\n                                    <label class=\"hidden\">Start Date<\/label>\n                                    <input \n                                        x-ref=\"startDate\" \n                                        x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                        type=\"text\" class=\" field mandatory datepicker-booking\" placeholder=\"Start Date\" x-init=\"$dispatch('initDatePicker', { })\"\n                                    x-bind:data-object=\"object\" data-field=\"start_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\"\n                                    >\n                                <\/span>\n                            <\/span>\n\n                            <span class=\"styled-select50 duracaoContainer\">\n                                <span class=\"datepickerContainer left\">\n\n                                    <label class=\"hidden\">End Date<\/label>\n\n                                    <input type=\"text\" \n\n                                    x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.end != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.end) : \"\"'\n                                    \n                                    class=\"field mandatory datepicker-booking\" placeholder=\"End Date\" x-bind:data-object=\"object\" data-field=\"end_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\">\n\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- LIST Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type=='list'\">\n\n                        <div class=\" linhasBooking variationBlock\">\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial\" name=\"\" x-bind:data-object=\"object\" x-bind:data-field-key=\"Object.keys(variation)[0]\" x-bind:value=\"getSelectedVariationValue(object, Object.keys(variation)[0])\" x-bind:disabled=\"variationLoading[object]\" @change=\"$dispatch('variationSelected', {\n                                                    variation: $event.target.value,\n                                                    object: object,\n                                                    request: {\n                                                        source: 'list',\n                                                        title: $event.target.options[$event.target.selectedIndex]?.text || '',\n                                                        parentId: variation[Object.keys(variation)[0]].data[0]?.parent_id ?? null,\n                                                        fieldKey: Object.keys(variation)[0]\n                                                    }\n                                                })\">\n                                    <option value=\"0\" x-text=\"variation[Object.keys(variation)[0]].label\"><\/option>\n                                    <template x-for=\"item in variation[Object.keys(variation)[0]].data\" :key=\"item.id\">\n                                        <option x-text=\"item.title\" x-bind:value=\"item.id\"><\/option>\n                                    <\/template>\n                                <\/select>\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n                    <!-- Start date picker only -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.start_date== true\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer left\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Start date picker and number of weeks -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.date== 'start_date_weeks'\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking week-selector\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial weeks\" name=\"\" @change=\"$dispatch('calculateEndDate', {\n                                            weeks : $event.target.value,\n                                            variation: getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id,\n                                            object: object,\n                                            request: {\n                                                source: 'weeks',\n                                                fieldKey: Object.keys(variation)[0],\n                                                title: $event.target.options[$event.target.selectedIndex]?.text || ''\n                                            }\n                                        })\"\n                                    x-bind:data-object=\"object\"\n                                    x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                    x-bind:disabled=\"variationLoading[object] || !bookingDetails.quotePrice[object].date\"\n                                >\n                                    <option value=\"0\">Number of weeks<\/option>\n                                    <template x-if=\"object !== 'accommodations'\">\n                                        <option value=\"1\">1 Week<\/option>\n                                    <\/template>\n                                    <template x-for=\"item in 35\" :key=\"item\">\n                                            <option x-text=\"`${item + 1}  Weeks`\" x-bind:value=\"`${item + 1}`\"><\/option>\n                                    <\/template>\n                                    <!-- <option value=\"2\" >2 Weeks<\/option> -->\n                                <\/select>\n                            <\/span>\n                            \n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/div>\n    <\/div>\n<\/template>\n<!-- EMPTY ACCOMMODATIONS -->\n<template x-if=\"typeof originalQuote.services.accommodations == 'undefined' &#038;&#038; typeof originalQuote.steps.accommodation != 'undefined'\">\n    <div>\n        <div x-data=\"{\n                title: originalQuote.steps.accommodation.title,\n                object: 'accommodations',\n                order:initialStep + 3\n            }\">\n            <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" disabled>\n            <option value=\"0\"> &#8211; Select &#8211; <\/option>\n        <\/select>\n    <\/span>\n    \n<\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n\n\n<!-- SELECT TRANSFERS -->\n<template x-if=\"originalQuote.services.transfers &#038;&#038; originalQuote.services.transfers.length\">\n    <div x-data=\"{\n                    title: originalQuote.steps.transfer.title,\n                    object: 'transfers',\n                    services: originalQuote.services.transfers[0],\n                    order:initialStep + 4\n                }\">\n        <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" @change=\"$dispatch('serviceSelected', { object: object , service: $event.target.value })\" x-bind:disabled=\"services.length == 0\">\n            \n            <template x-if=\"object == 'accommodations'\">\n                <option value=\"0\">No Accommodation<\/option>\n            <\/template>\n            \n            <template x-if=\"object == 'transfers'\">\n                <option value=\"0\">No Transfer<\/option>\n            <\/template>\n            \n            \n            <template x-if=\"object == 'courses'\">\n                <option value=\"0\"> &#8211; Select &#8211; <\/option>\n            <\/template>\n            \n\n            <template x-for=\"(service , id) in services\" :key=\"id\">\n                <template x-if=\"!isDisabledAccommodation(service)\">\n                    <option x-text=\"service.name\" x-bind:value=\"service.id\"><\/option>\n                <\/template>\n            <\/template>\n        <\/select>\n    <\/span>\n    <div x-show=\"originalQuote.variations[object].length\">\n        <div style=\"margin-top: 10px;\">\n            <template x-for=\"(variation,index) in originalQuote.variations[object]\" :key=\"getVariationRenderKey(object, variation)\">\n                <div>\n                    <!-- Date Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type == 'date' &#038;&#038; variation[Object.keys(variation)[0]].settings.date != 'start_date_weeks'\">\n                        \n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\">\n                                <span class=\"datepickerContainer\">\n                                    <label class=\"hidden\">Start Date<\/label>\n                                    <input \n                                        x-ref=\"startDate\" \n                                        x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                        type=\"text\" class=\" field mandatory datepicker-booking\" placeholder=\"Start Date\" x-init=\"$dispatch('initDatePicker', { })\"\n                                    x-bind:data-object=\"object\" data-field=\"start_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\"\n                                    >\n                                <\/span>\n                            <\/span>\n\n                            <span class=\"styled-select50 duracaoContainer\">\n                                <span class=\"datepickerContainer left\">\n\n                                    <label class=\"hidden\">End Date<\/label>\n\n                                    <input type=\"text\" \n\n                                    x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.end != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.end) : \"\"'\n                                    \n                                    class=\"field mandatory datepicker-booking\" placeholder=\"End Date\" x-bind:data-object=\"object\" data-field=\"end_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\">\n\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- LIST Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type=='list'\">\n\n                        <div class=\" linhasBooking variationBlock\">\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial\" name=\"\" x-bind:data-object=\"object\" x-bind:data-field-key=\"Object.keys(variation)[0]\" x-bind:value=\"getSelectedVariationValue(object, Object.keys(variation)[0])\" x-bind:disabled=\"variationLoading[object]\" @change=\"$dispatch('variationSelected', {\n                                                    variation: $event.target.value,\n                                                    object: object,\n                                                    request: {\n                                                        source: 'list',\n                                                        title: $event.target.options[$event.target.selectedIndex]?.text || '',\n                                                        parentId: variation[Object.keys(variation)[0]].data[0]?.parent_id ?? null,\n                                                        fieldKey: Object.keys(variation)[0]\n                                                    }\n                                                })\">\n                                    <option value=\"0\" x-text=\"variation[Object.keys(variation)[0]].label\"><\/option>\n                                    <template x-for=\"item in variation[Object.keys(variation)[0]].data\" :key=\"item.id\">\n                                        <option x-text=\"item.title\" x-bind:value=\"item.id\"><\/option>\n                                    <\/template>\n                                <\/select>\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n                    <!-- Start date picker only -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.start_date== true\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer left\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Start date picker and number of weeks -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.date== 'start_date_weeks'\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking week-selector\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial weeks\" name=\"\" @change=\"$dispatch('calculateEndDate', {\n                                            weeks : $event.target.value,\n                                            variation: getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id,\n                                            object: object,\n                                            request: {\n                                                source: 'weeks',\n                                                fieldKey: Object.keys(variation)[0],\n                                                title: $event.target.options[$event.target.selectedIndex]?.text || ''\n                                            }\n                                        })\"\n                                    x-bind:data-object=\"object\"\n                                    x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                    x-bind:disabled=\"variationLoading[object] || !bookingDetails.quotePrice[object].date\"\n                                >\n                                    <option value=\"0\">Number of weeks<\/option>\n                                    <template x-if=\"object !== 'accommodations'\">\n                                        <option value=\"1\">1 Week<\/option>\n                                    <\/template>\n                                    <template x-for=\"item in 35\" :key=\"item\">\n                                            <option x-text=\"`${item + 1}  Weeks`\" x-bind:value=\"`${item + 1}`\"><\/option>\n                                    <\/template>\n                                    <!-- <option value=\"2\" >2 Weeks<\/option> -->\n                                <\/select>\n                            <\/span>\n                            \n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/div>\n    <\/div>\n<\/template>\n<!-- EMPTY TRANSFERS -->\n<template x-if=\"typeof originalQuote.services.transfers == 'undefined'  &#038;&#038; typeof originalQuote.steps.transfer != 'undefined'\">\n    <div>\n        <div x-data=\"{\n                title: originalQuote.steps.transfer.title,\n                object: 'transfers',\n                order:initialStep + 4\n            }\">\n            <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" disabled>\n            <option value=\"0\"> &#8211; Select &#8211; <\/option>\n        <\/select>\n    <\/span>\n    \n<\/div>\n        <\/div>\n    <\/div>\n<\/template>\n\n<!-- SELECT ADDONS -->\n<template x-if=\"originalQuote.services.addons &#038;&#038; originalQuote.services.addons.length\">\n    <div x-data=\"{\n                    title: originalQuote.steps.addon.title,\n                    object: 'addons',\n                    services: originalQuote.services.addons[0],\n                    order:initialStep + 5\n                }\">\n        <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" @change=\"$dispatch('serviceSelected', { object: object , service: $event.target.value })\" x-bind:disabled=\"services.length == 0\">\n            \n            <template x-if=\"object == 'accommodations'\">\n                <option value=\"0\">No Accommodation<\/option>\n            <\/template>\n            \n            <template x-if=\"object == 'transfers'\">\n                <option value=\"0\">No Transfer<\/option>\n            <\/template>\n            \n            \n            <template x-if=\"object == 'courses'\">\n                <option value=\"0\"> &#8211; Select &#8211; <\/option>\n            <\/template>\n            \n\n            <template x-for=\"(service , id) in services\" :key=\"id\">\n                <template x-if=\"!isDisabledAccommodation(service)\">\n                    <option x-text=\"service.name\" x-bind:value=\"service.id\"><\/option>\n                <\/template>\n            <\/template>\n        <\/select>\n    <\/span>\n    <div x-show=\"originalQuote.variations[object].length\">\n        <div style=\"margin-top: 10px;\">\n            <template x-for=\"(variation,index) in originalQuote.variations[object]\" :key=\"getVariationRenderKey(object, variation)\">\n                <div>\n                    <!-- Date Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type == 'date' &#038;&#038; variation[Object.keys(variation)[0]].settings.date != 'start_date_weeks'\">\n                        \n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\">\n                                <span class=\"datepickerContainer\">\n                                    <label class=\"hidden\">Start Date<\/label>\n                                    <input \n                                        x-ref=\"startDate\" \n                                        x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                        type=\"text\" class=\" field mandatory datepicker-booking\" placeholder=\"Start Date\" x-init=\"$dispatch('initDatePicker', { })\"\n                                    x-bind:data-object=\"object\" data-field=\"start_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\"\n                                    >\n                                <\/span>\n                            <\/span>\n\n                            <span class=\"styled-select50 duracaoContainer\">\n                                <span class=\"datepickerContainer left\">\n\n                                    <label class=\"hidden\">End Date<\/label>\n\n                                    <input type=\"text\" \n\n                                    x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.end != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.end) : \"\"'\n                                    \n                                    class=\"field mandatory datepicker-booking\" placeholder=\"End Date\" x-bind:data-object=\"object\" data-field=\"end_date\" x-bind:data-variation=\"variation[Object.keys(variation)[0]].data[0].id\" x-bind:disabled=\"variationLoading[object]\">\n\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- LIST Variation -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.type=='list'\">\n\n                        <div class=\" linhasBooking variationBlock\">\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial\" name=\"\" x-bind:data-object=\"object\" x-bind:data-field-key=\"Object.keys(variation)[0]\" x-bind:value=\"getSelectedVariationValue(object, Object.keys(variation)[0])\" x-bind:disabled=\"variationLoading[object]\" @change=\"$dispatch('variationSelected', {\n                                                    variation: $event.target.value,\n                                                    object: object,\n                                                    request: {\n                                                        source: 'list',\n                                                        title: $event.target.options[$event.target.selectedIndex]?.text || '',\n                                                        parentId: variation[Object.keys(variation)[0]].data[0]?.parent_id ?? null,\n                                                        fieldKey: Object.keys(variation)[0]\n                                                    }\n                                                })\">\n                                    <option value=\"0\" x-text=\"variation[Object.keys(variation)[0]].label\"><\/option>\n                                    <template x-for=\"item in variation[Object.keys(variation)[0]].data\" :key=\"item.id\">\n                                        <option x-text=\"item.title\" x-bind:value=\"item.id\"><\/option>\n                                    <\/template>\n                                <\/select>\n                            <\/span>\n                        <\/div>\n\n                    <\/div>\n                    <!-- Start date picker only -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.start_date== true\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer left\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                        <\/div>\n                    <\/div>\n\n                    <!-- Start date picker and number of weeks -->\n                    <div x-show=\"variation[Object.keys(variation)[0]].settings.date== 'start_date_weeks'\">\n                        <div class=\"flex linhasBooking variationBlock\" style=\"display: flex;justify-content: space-between;\">\n                            <span class=\"styled-select50\" style=\"margin-top: 0;\">\n                                <span class=\"datepickerContainer\">\n                                <label class=\"hidden\">Start Date<\/label>\n                                <input type=\"text\" \n                                x-bind:data-dates='(typeof variation[Object.keys(variation)[0]]?.dates?.start != \"undefined\") ? JSON.stringify(variation[Object.keys(variation)[0]].dates.start) : \"\"'\n                                class=\"field mandatory datepicker-booking week-selector\" \n                                placeholder=\"Start Date\" \n                                x-bind:data-object=\"object\" \n                                data-field=\"date\" \n                                x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                x-bind:data-variation=\"getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id\"\n                                x-init=\"$dispatch('initDatePicker', { })\"\n                                x-bind:data-from=\"variation[Object.keys(variation)[0]].dates?.from?? null\"\n                                x-bind:data-to=\"variation[Object.keys(variation)[0]].dates?.to?? null\"\n                                x-bind:disabled=\"variationLoading[object]\"\n                                >\n                                <\/span>\n                            <\/span>\n                            <span class=\"styled-select\">\n                                <select class=\"field mandatory select-initial weeks\" name=\"\" @change=\"$dispatch('calculateEndDate', {\n                                            weeks : $event.target.value,\n                                            variation: getSelectedVariationValue(object, Object.keys(variation)[0]) !== '0' ? getSelectedVariationValue(object, Object.keys(variation)[0]) : variation[Object.keys(variation)[0]].data[0].id,\n                                            object: object,\n                                            request: {\n                                                source: 'weeks',\n                                                fieldKey: Object.keys(variation)[0],\n                                                title: $event.target.options[$event.target.selectedIndex]?.text || ''\n                                            }\n                                        })\"\n                                    x-bind:data-object=\"object\"\n                                    x-bind:data-field-key=\"Object.keys(variation)[0]\"\n                                    x-bind:disabled=\"variationLoading[object] || !bookingDetails.quotePrice[object].date\"\n                                >\n                                    <option value=\"0\">Number of weeks<\/option>\n                                    <template x-if=\"object !== 'accommodations'\">\n                                        <option value=\"1\">1 Week<\/option>\n                                    <\/template>\n                                    <template x-for=\"item in 35\" :key=\"item\">\n                                            <option x-text=\"`${item + 1}  Weeks`\" x-bind:value=\"`${item + 1}`\"><\/option>\n                                    <\/template>\n                                    <!-- <option value=\"2\" >2 Weeks<\/option> -->\n                                <\/select>\n                            <\/span>\n                            \n                        <\/div>\n                    <\/div>\n\n\n                <\/div>\n            <\/template>\n        <\/div>\n    <\/div>\n<\/div>\n    <\/div>\n<\/template>\n<!-- EMPTY ADDONS -->\n<template x-if=\"typeof originalQuote.services.addons == 'undefined' &#038;&#038; typeof originalQuote.steps.addon != 'undefined'\">\n    <div>\n        <div x-data=\"{\n                title: originalQuote.steps.addon.title,\n                object: 'addons',\n                order:initialStep + 5\n            }\">\n            <div class=\"linhasBooking\">\n    <h5>\n        <span class=\"stepNumber\" x-text=\"order\"><\/span>\n        <span x-text=\"title\"><\/span>\n    <\/h5>\n    <span class=\"styled-select\">\n        <select class=\"field mandatory select-initial\" name=\"\" disabled>\n            <option value=\"0\"> &#8211; Select &#8211; <\/option>\n        <\/select>\n    <\/span>\n    \n<\/div>\n        <\/div>\n    <\/div>\n<\/template>            <\/div>\n\n            <!-- Personal Information -->\n            <div id=\"PersonalInformation\" x-show=\"currentPage == 2\" x-cloak>\n                <template x-if=\"originalQuote.application.id\">\n    <div class=\"linhasBooking\" id=\"PersonalInformation\">\n        <div class=\"headFormBookingLeft\">\n            <h4 x-text=\"originalQuote.application.title\"><\/h4>\n            <span class=\"mb-3 d-block\" x-text=\"originalQuote.application.description\"><\/span>\n        <\/div>\n        <!-- <p x-text=\"JSON.stringify(bookingDetails.contact)\"><\/p>\n        <p x-text=\"JSON.stringify(errors)\"><\/p> -->\n        <!--   <form> -->\n    \n        <template x-for=\"(field, index) in originalQuote.application.fields\" :key=\"`${field.id || 'field'}-${getPersonalInfoFieldKey(field) || ''}-${index}`\">\n            <span class=\"styled-select\">\n                <template x-if=\"getPersonalInfoFieldKey(field) &#038;&#038; isPhoneLikePersonalInfoField(field)\">\n                    <span class=\"perc-100 marginBottom\">\n                        <span class=\"label\">\n                            <span x-text=\"getPersonalInfoFieldLabel(field)\"><\/span><span class=\"required-marker\" x-show=\"isPersonalInfoFieldRequired(field)\">*<\/span>\n                        <\/span>\n                        <input type=\"text\" inputmode=\"tel\" autocomplete=\"tel\" class=\"field\" x-bind:name=\"getPersonalInfoFieldKey(field)\" x-bind:id=\"getPersonalInfoFieldKey(field)\" x-bind:placeholder=\"getPersonalInfoFieldPlaceholder(field) || 'Phone'\" x-bind:required=\"isPersonalInfoFieldRequired(field)\" x-bind:aria-required=\"isPersonalInfoFieldRequired(field)\" x-model=\"bookingDetails.contact[getPersonalInfoFieldKey(field)]\" x-on:blur=\"validateField(field)\">\n                        <template x-if=\"errors[getPersonalInfoFieldKey(field)]\">\n                            <p class=\"field-error\" x-text=\"errors[getPersonalInfoFieldKey(field)]\"><\/p>\n                        <\/template>\n                    <\/span>\n                <\/template>\n\n                <template x-if=\"getPersonalInfoFieldKey(field) &#038;&#038; !isPhoneLikePersonalInfoField(field) &#038;&#038; isPersonalInfoInputField(field)\">\n                    <span class=\"perc-100 marginBottom\">\n                        <span class=\"label\">\n                            <span x-text=\"getPersonalInfoFieldLabel(field)\"><\/span><span class=\"required-marker\" x-show=\"isPersonalInfoFieldRequired(field)\">*<\/span>\n                        <\/span>\n                        <input x-bind:type=\"getPersonalInfoInputType(field)\" class=\"field\" x-bind:name=\"getPersonalInfoFieldKey(field)\" x-bind:id=\"getPersonalInfoFieldKey(field)\" x-bind:placeholder=\"getPersonalInfoFieldPlaceholder(field)\" x-bind:required=\"isPersonalInfoFieldRequired(field)\" x-bind:aria-required=\"isPersonalInfoFieldRequired(field)\" x-model=\"bookingDetails.contact[getPersonalInfoFieldKey(field)]\" x-on:blur=\"validateField(field)\">\n\n                        <template x-if=\"errors[getPersonalInfoFieldKey(field)]\">\n                            <p class=\"field-error\" x-text=\"errors[getPersonalInfoFieldKey(field)]\"><\/p>\n                        <\/template>\n                    <\/span>\n                <\/template>\n\n\n                <template x-if=\"getPersonalInfoFieldKey(field) &#038;&#038; isPersonalInfoDateField(field)\">\n                    <span class=\"perc-100 marginBottom\">\n                        <span class=\"label\">\n                            <span x-text=\"getPersonalInfoFieldLabel(field)\"><\/span><span class=\"required-marker\" x-show=\"isPersonalInfoFieldRequired(field)\">*<\/span>\n                        <\/span>\n                        <input type=\"text\" class=\"field application-datepicker-booking\" x-bind:name=\"getPersonalInfoFieldKey(field)\" x-bind:id=\"getPersonalInfoFieldKey(field)\" x-bind:placeholder=\"getPersonalInfoFieldPlaceholder(field)\" x-bind:required=\"isPersonalInfoFieldRequired(field)\" x-bind:aria-required=\"isPersonalInfoFieldRequired(field)\" x-model=\"bookingDetails.contact[getPersonalInfoFieldKey(field)]\" x-on:blur=\"validateField(field)\">\n                        <template x-if=\"errors[getPersonalInfoFieldKey(field)]\">\n                            <p class=\"field-error\" x-text=\"errors[getPersonalInfoFieldKey(field)]\"><\/p>\n                        <\/template>\n                    <\/span>\n                <\/template>\n                \n                <template x-if=\"getPersonalInfoFieldKey(field) &#038;&#038; !isPhoneLikePersonalInfoField(field) &#038;&#038; isPersonalInfoListField(field)\">\n                    <span class=\"perc-100 marginBottom\">\n                        <span class=\"label\">\n                            <span x-text=\"getPersonalInfoFieldLabel(field)\"><\/span><span class=\"required-marker\" x-show=\"isPersonalInfoFieldRequired(field)\">*<\/span>\n                        <\/span>\n                        <select class=\"field\" x-bind:name=\"getPersonalInfoFieldKey(field)\" x-bind:id=\"getPersonalInfoFieldKey(field)\" x-bind:required=\"isPersonalInfoFieldRequired(field)\" x-bind:aria-required=\"isPersonalInfoFieldRequired(field)\" x-model=\"bookingDetails.contact[getPersonalInfoFieldKey(field)]\">\n                            <option value=\"\" x-text=\"getPersonalInfoFieldPlaceholder(field)\"><\/option>\n                            <template x-for=\"(option,value) in field.data\" :key=\"value\">\n                                <option x-bind:value=\"value\" x-text=\"getPersonalInfoOptionLabel(option, value)\"><\/option>\n                            <\/template>\n\n                        <\/select>\n                        <template x-if=\"errors[getPersonalInfoFieldKey(field)]\">\n                            <p class=\"field-error\" x-text=\"errors[getPersonalInfoFieldKey(field)]\"><\/p>\n                        <\/template>\n                    <\/span>\n                <\/template>\n            <\/span>\n        <\/template>\n\n        <div class=\"disclaimer\">\n            <div class=\"disclaimer-title label\">Disclaimer *<\/div>\n            <input type=\"checkbox\" name=\"disclaimer\" id=\"disclaimer\" class=\"field mandatory\" value=\"1\" x-model=\"bookingDetails.contact.disclaimer_accepted\" @change=\"if (bookingDetails.contact.disclaimer_accepted) { delete errors.disclaimer_accepted }\" data-error=\"Please fill the disclaimer\">\n            <label for=\"disclaimer\"><span class=\"hidden\">Disclaimer<\/span><\/label>\n            <span class=\"disclaimer-text\">\n                I read and agree to the <a href=\"\/en\/disclaimer\/terms-and-conditions\/\">Terms and Conditions<\/a> and <a href=\"\/en\/privacy-policy-2-2\/\">Privacy Policy<\/a> and consent to the processing of my data under the conditions described. <\/span>\n            <template x-if=\"errors.disclaimer_accepted\">\n                <p class=\"field-error\" x-text=\"errors.disclaimer_accepted\"><\/p>\n            <\/template>\n        <\/div>\n        <div class=\"requiredFieldsFormBookingLeft\"><span>*<\/span> Required fields<\/div>\n\n        <!--  <\/form> -->\n\n\n        <div class=\"divBtnsBooking -button-block -button-block-left marginBottomDivBtnsBooking\">\n            <a @click.prevent=\"navigateBack()\" class=\"btnBackCourses\">\n                Back to Course Configuration            <\/a>\n        <\/div>\n\n    <\/div>\n<\/template>\n            <\/div>\n\n            <!-- Booking Confirmation -->\n            <div id=\"BookingConfirmation\" x-show=\"currentPage == 3\" x-cloak>\n                <div class=\"linhasBooking\" id=\"BookingSummary\">\n   <!--  <p x-text=\"JSON.stringify(bookingDetails)\"><\/p> -->\n    <div class=\"headFormBookingLeft\">\n        <h4>Summary<\/h4>\n        Almost there! Please check all the details of your booking before submitting.\t\t\t\n    <\/div>\n    <div class=\"resumeFormBookingLeft\">\n            <template x-for=\"(field, index) in originalQuote.application.fields\" :key=\"`${field.id || 'field'}-${getPersonalInfoFieldKey(field) || ''}-${index}`\">\n                <div>\n                    <span x-text=\"field.label\"><\/span>\n\t\t\t\t\t\t<p x-text=\"bookingDetails.contact[getPersonalInfoFieldKey(field)]\"><\/p>\n                <\/div>\n            <\/template>\n        \n        <div class=\"divBtnsBooking -button-block -button-block-left marginBottomDivBtnsBooking\">\n            <a @click.prevent=\"navigateBack()\" class=\"btnBackCourses\">\n                Back to Personal Information            <\/a>\n        <\/div>\n    <\/div>\n<\/div>\n            <\/div>\n\n            <!-- Cart Details -->\n            <div id=\"CartDetails\">\n                <h3>Your course details<\/h3>\n\n\n    <template x-if=\"bookingDetails.filterBy\">\n\n        <div class=\"linhasBookingDetails\" id=\"frmBookingSchoolDetails\">\n            <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.filterBy }\">1<\/span>Select Type of study?<\/h5>\n            <span class=\"titulo\" x-text=\"bookingDetails.filterBy\"><\/span>\n        <\/div>\n    <\/template>\n\n<template x-if=\"bookingDetails.quotePrice.campus.campusId != 0\">\n    <div class=\"linhasBookingDetails\" id=\"frmBookingSchoolDetails\">\n        <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.quotePrice.campus?.campus }\">2<\/span>Location<\/h5>\n        <span class=\"titulo\" x-text=\"bookingDetails.quotePrice.campus.campus\"><\/span><\/span>\n    <\/div>\n<\/template>\n\n<template x-if=\"bookingDetails.quotePrice.courses.courses.length != 0\">\n    <div class=\"linhasBookingDetails\" id=\"frmBookingCourseDetails\">\n        <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.quotePrice.courses?.total }\">3<\/span>Course<\/h5>\n        <template x-for=\"(course,index) in bookingDetails.quotePrice.courses.courses\" :key=\"getCourseDetailsRenderKey(course, index)\">\n            <div>\n                <span class=\" titulo\" x-text=\"course.title\"><\/span>\n                <template x-for=\"variation in course.variations\" :key=\"getSelectedVariationRenderKey(variation)\">\n                    <div>\n                        <p x-text=\"variation.title\"><\/p>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/template>\n\n        <template x-if=\"bookingDetails.quotePrice.courses.start_date\">\n            <span class=\"startDate\">Start Date                <span x-text=\"bookingDetails.quotePrice.courses.start_date\"><\/span>\n            <\/span>\n        <\/template>\n\n        <template x-if=\"bookingDetails.quotePrice.courses.end_date &#038;&#038; bookingDetails.quotePrice.campus.campusId !== null\">\n            <span class=\"endDate\">End Date                <span x-text=\"bookingDetails.quotePrice.courses.end_date\"><\/span>\n            <\/span>\n        <\/template>\n\n        <template x-if=\"bookingDetails.quotePrice.courses.date &#038;&#038; !bookingDetails.quotePrice.courses.end_date\">\n            <span class=\"startDate\">Course Date                <span x-text=\"bookingDetails.quotePrice.courses.date\"><\/span>\n            <\/span>\n        <\/template>\n\n        <h4 class=\"subTotal\">Subtotal: <span x-text=\"parseFloat(bookingDetails.quotePrice.courses.total).toFixed(2)\"><\/span><span x-text=\"currency\"><\/span><\/h4>\n    <\/div>\n<\/template>\n\n<template x-if=\"bookingDetails.quotePrice.accommodations.accommodations.length !=0\">\n    <div class=\"linhasBookingDetails\" id=\"frmBookingAccomodationDetails\">\n        <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.quotePrice.accommodations?.total}\">4<\/span>Accommodation<\/h5>\n        <template x-for=\"(accommodation,index) in bookingDetails.quotePrice.accommodations.accommodations\" :key=\"index\">\n            <div>\n                <span class=\" titulo\" x-text=\"accommodation.title\"><\/span>\n\n                <template x-for=\"variation in accommodation.variations\" :key=\"variation.id\">\n                    <div>\n                        <p x-text=\"getCartVariationTitle('accommodations', variation)\"><\/p>\n                    <\/div>\n                <\/template>\n\n            <\/div>\n        <\/template>\n\n\n        <\/p>\n        <template x-if=\"bookingDetails.quotePrice.accommodations.start_date\">\n            <span class=\"startDate\">Start Date                <span x-text=\"bookingDetails.quotePrice.accommodations.start_date\"><\/span>\n            <\/span>\n        <\/template>\n        <template x-if=\"bookingDetails.quotePrice.accommodations.end_date\">\n            <span class=\"endDate\">End Date                <span x-text=\"bookingDetails.quotePrice.accommodations.end_date\"><\/span>\n            <\/span>\n        <\/template>\n        <h4 class=\"subTotal\">Subtotal: <span x-text=\"parseFloat(bookingDetails.quotePrice.accommodations.total).toFixed(2)\"><\/span><span x-text=\"currency\"><\/span><\/h4>\n\n        <template x-if=\"typeof bookingDetails.quotePrice.accommodations.products[0] != 'undefined' &#038;&#038; bookingDetails.quotePrice.accommodations.products.length != 0 &#038;&#038; bookingDetails.quotePrice.accommodations.products[0].extra.length != 0\">\n            <div>\n                <template x-if=\"bookingDetails.quotePrice.accommodations.products[0].extra.charges == 0\">\n                    <div class=\"descritivo\">\n                        <div class=\"top\">Placement Fee <span x-text=\"bookingDetails.quotePrice.accommodations.charges\"><\/span><span><\/span><\/div>\n                        <div class=\"obs\"><span>Warning <\/span>No placement fee required. Arrival on Sunday before course start. Departure on Saturday after course end.<\/div>\n                    <\/div>\n                <\/template>\n                <template x-if=\"bookingDetails.quotePrice.accommodations.products[0].extra.charges != 0\">\n                    <div class=\"descritivo\">\n                        <div class=\"top\">\n                            <div>Placement Fee <span x-text=\"bookingDetails.quotePrice.accommodations.products[0].extra.charges\"><\/span><span x-text=\"currency\"><\/span><\/div>\n                        <\/div>\n                        <div class=\"obs\"><span>Warning <\/span> Shared Apartment  options require payment of a <span><span x-text=\"bookingDetails.quotePrice.accommodations.products[0].extra.charges\"><\/span><span x-text=\"currency\"><\/span><\/span>  placement fee. Arrival on Sunday before course start. Departure on Saturday after course end.<\/div>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/template>\n\n    <\/div>\n<\/template>\n\n<template x-if=\"bookingDetails.quotePrice.transfers.transfers.length != 0\">\n\n\n    <div class=\"linhasBookingDetails\" id=\"frmBookingExtrasDetails\">\n\n        <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.quotePrice.transfers?.total}\">5<\/span>Transfer<\/h5>\n\n        <template x-for=\"(transfer,index) in bookingDetails.quotePrice.transfers.transfers\" :key=\"index\">\n            <div>\n                <span class=\" titulo\" x-text=\"transfer.title\"><\/span>\n\n                <template x-for=\"variation in transfer.variations\" :key=\"variation.id\">\n                    <div>\n                        <p x-text=\"variation.title\"><\/p>\n                    <\/div>\n                <\/template>\n                <h4 class=\"subTotal\">Subtotal: <span x-text=\"parseFloat(bookingDetails.quotePrice.transfers.total).toFixed(2)\"><\/span><span x-text=\"currency\"><\/span><\/h4>\n            <\/div>\n        <\/template>\n\n        <div class=\"descritivo\">\n            <div>Upon arrival you will be met by a member of our staff who will take you to the chosen accomodation.<br>\n            <\/div>\n        <\/div>\n\n    <\/div>\n<\/template>\n\n<template x-if=\"bookingDetails.quotePrice.addons.addons.length != 0\">\n    <div class=\"linhasBookingDetails\" id=\"frmBookingAddonsDetails\">\n        <h5><span class=\"stepNumber\" x-bind:class=\"{ 'completed': bookingDetails.quotePrice.addons?.total}\">6<\/span>Addons<\/h5>\n\n        <template x-for=\"(addon,index) in bookingDetails.quotePrice.addons.addons\" :key=\"addon.id || index\">\n            <div>\n                <span class=\" titulo\" x-text=\"addon.title\"><\/span>\n\n                <template x-for=\"variation in addon.variations || []\" :key=\"variation.id\">\n                    <div>\n                        <p x-text=\"variation.title\"><\/p>\n                    <\/div>\n                <\/template>\n            <\/div>\n        <\/template>\n\n        <h4 class=\"subTotal\">Subtotal: <span x-text=\"parseFloat(bookingDetails.quotePrice.addons.total).toFixed(2)\"><\/span><span x-text=\"currency\"><\/span><\/h4>\n    <\/div>\n<\/template>\n\n<div class=\"linhasBookingDetailsTotal -payment\" id=\"frmBookingTotalDetails\">\n\n    <div class=\"totalWrapper\">\n        <div class=\"titulo\">\n            <h4 class=\"p-3 primary\">Total<\/h4>\n        <\/div>\n        <div class=\"flex p-3\">\n            <h2 x-text=\"bookingDetails.quotePrice.totalPrice\">\n            <\/h2>\n            <h2 x-text=\"currency\" class=\"ml-2\"><\/h2>\n        <\/div>\n    <\/div>\n\n    <div class=\"payment\">\n        <div class=\"payment-advance\">\n            <div class=\"top\">\n                <div class=\"title-container\">\n                    <h5 class=\"title\">Due Today<\/h5>\n                    <h5>\n                        <span class=\"price\" x-text=\"dueToday\"><\/span>\n                        <span x-text=\"currency\"><\/span>\n                    <\/h5>\n                <\/div>\n                <p>\n                    To confirm your application CIAL requires payment of a <span x-text=\"dueToday\"><\/span><span x-text=\"currency\"><\/span> deposit. The deposit will be deducted from the final payment.                <\/p>\n            <\/div>\n            <div class=\"visa\">\n                <input type=\"checkbox\" name=\"visto\" id=\"visto\" value=\"1\" x-model=\"bookingDetails.request_confirmation_letter\">\n                <label for=\"visto\">Request Confirmation Letter for Visa<\/label>\n                <div class=\"text\">Confirmation letters for visa purposes require a deposit of 1000\u20ac. The deposit will be deducted from the final payment.<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    <div class=\"divBtnsBooking\">\n\n\n        <template x-if=\"currentPage == 1\">\n            <button class=\" btnProceedReservation\" @click.prevent=\"proceedToPersonalInfo()\" x-bind:disabled=\"!isCourseConfigurationValid\">\n                Proceed to Personal Information            <\/button>\n        <\/template>\n\n        <template x-if=\"currentPage == 2\">\n            <div>\n                <button class=\" btnProceedReservation\" @click.prevent=\"proceedToBookingConfirmation()\">\n                    Proceed to Booking Confirmation                <\/button>\n            <\/div>\n        <\/template>\n\n\n        <template x-if=\"currentPage == 3\">\n            <div>\n                <button class=\" btnProceedReservation\" @click.prevent=\"proceedToPayment()\">\n                    Proceed to Payment                <\/button>\n            <\/div>\n        <\/template>\n\n\n\n    <\/div>\n<\/div>\n<div class=\"payment-methods\">\n    <ul>\n        <li><span class=\"paypal\">Paypal<\/span><\/li>\n        <li><span class=\"mastercard\">Mastercard<\/span><\/li>\n        <li><span class=\"visa\">Visa<\/span><\/li>\n        <li><span class=\"amex\">American Express<\/span><\/li>\n        <li><span class=\"discover\">Discover<\/span><\/li>\n    <\/ul>\n<\/div>\n<div class=\"linhasBooking\">\n    <div class=\"transport\">\n        <span class=\"img\">\n            <img decoding=\"async\" src=\"https:\/\/cial.pt\/fotos\/transportes\/icon01_easy_9046586f844ac2a4c.png\" alt=\"Plane\">\n        <\/span>\n        <span class=\"titulo\">Travelling by plane?<\/span>\n        <div class=\"descritivo\">\n            <div>CIAL is less than 20 minutes away from Lisbon and Faro international airports.<\/div>\n        <\/div>\n    <\/div>\n    <div class=\"transport\">\n        <span class=\"img\">\n            <img decoding=\"async\" src=\"https:\/\/cial.pt\/fotos\/transportes\/icon04_easy_28631586f8455a2fe9.png\" alt=\"Taxis and Uber\">\n        <\/span>\n        <span class=\"titulo\">Taxis and Uber<\/span>\n        <div class=\"descritivo\">\n            <div>Both services are available, convenient and affordable.<\/div>\n        <\/div>\n    <\/div>\n    <div class=\"transport\">\n        <span class=\"img\">\n            <img decoding=\"async\" src=\"https:\/\/cial.pt\/fotos\/transportes\/icon03_easy_20676586f845f526c6.png\" alt=\"Public Transport\">\n        <\/span>\n        <span class=\"titulo\">Public Transport<\/span>\n        <div class=\"descritivo\">\n            <div>Bus and metro (Lisbon) lines available from the airport to the city centre.<\/div>\n        <\/div>\n    <\/div>\n<\/div>\n            <\/div>\n        <\/div>\n    <\/form>\n\n    <style>\n        .datepicker-booking {\n            padding: 15px 20px !important;\n        }\n    <\/style>\n<\/div><\/div>\n\n<\/div><\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":4662,"parent":1264,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"campus":[],"class_list":["post-2113","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Booking | CIAL<\/title>\n<meta name=\"description\" content=\"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cial.pt\/en\/courses\/booking\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Booking | CIAL\" \/>\n<meta property=\"og:description\" content=\"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cial.pt\/en\/courses\/booking\/\" \/>\n<meta property=\"og:site_name\" content=\"CIAL\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/CIALcentrodelinguas\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-27T22:17:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1809\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/\",\"url\":\"https:\/\/cial.pt\/en\/courses\/booking\/\",\"name\":\"Booking | CIAL\",\"isPartOf\":{\"@id\":\"https:\/\/cial.pt\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg\",\"datePublished\":\"2024-02-08T18:18:33+00:00\",\"dateModified\":\"2025-01-27T22:17:50+00:00\",\"description\":\"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.\",\"breadcrumb\":{\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cial.pt\/en\/courses\/booking\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage\",\"url\":\"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg\",\"contentUrl\":\"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg\",\"width\":1809,\"height\":800,\"caption\":\"CIAL.pt - general Portuguese course\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cial.pt\/en\/courses\/booking\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cial.pt\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Explore Portuguese Language Courses in Portugal\",\"item\":\"https:\/\/cial.pt\/en\/courses\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Booking\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cial.pt\/en\/#website\",\"url\":\"https:\/\/cial.pt\/en\/\",\"name\":\"CIAL\",\"description\":\"Learn Portuguese in Lisbon &amp; Algarve\",\"publisher\":{\"@id\":\"https:\/\/cial.pt\/en\/#organization\"},\"alternateName\":\"CIAL\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cial.pt\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cial.pt\/en\/#organization\",\"name\":\"CIAL\",\"alternateName\":\"CIAL\",\"url\":\"https:\/\/cial.pt\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cial.pt\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cial.pt\/wp-content\/uploads\/2023\/11\/cial-svg.svg\",\"contentUrl\":\"https:\/\/cial.pt\/wp-content\/uploads\/2023\/11\/cial-svg.svg\",\"caption\":\"CIAL\"},\"image\":{\"@id\":\"https:\/\/cial.pt\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/CIALcentrodelinguas\/\",\"https:\/\/www.instagram.com\/cial_centrodelinguas\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Booking | CIAL","description":"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cial.pt\/en\/courses\/booking\/","og_locale":"en_US","og_type":"article","og_title":"Booking | CIAL","og_description":"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.","og_url":"https:\/\/cial.pt\/en\/courses\/booking\/","og_site_name":"CIAL","article_publisher":"https:\/\/www.facebook.com\/CIALcentrodelinguas\/","article_modified_time":"2025-01-27T22:17:50+00:00","og_image":[{"width":1809,"height":800,"url":"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/cial.pt\/en\/courses\/booking\/","url":"https:\/\/cial.pt\/en\/courses\/booking\/","name":"Booking | CIAL","isPartOf":{"@id":"https:\/\/cial.pt\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage"},"image":{"@id":"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage"},"thumbnailUrl":"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg","datePublished":"2024-02-08T18:18:33+00:00","dateModified":"2025-01-27T22:17:50+00:00","description":"Book your Portuguese course with CIAL today! Start your language journey and immerse yourself in Portuguese culture.","breadcrumb":{"@id":"https:\/\/cial.pt\/en\/courses\/booking\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cial.pt\/en\/courses\/booking\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cial.pt\/en\/courses\/booking\/#primaryimage","url":"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg","contentUrl":"https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min.jpg","width":1809,"height":800,"caption":"CIAL.pt - general Portuguese course"},{"@type":"BreadcrumbList","@id":"https:\/\/cial.pt\/en\/courses\/booking\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cial.pt\/en\/"},{"@type":"ListItem","position":2,"name":"Explore Portuguese Language Courses in Portugal","item":"https:\/\/cial.pt\/en\/courses\/"},{"@type":"ListItem","position":3,"name":"Booking"}]},{"@type":"WebSite","@id":"https:\/\/cial.pt\/en\/#website","url":"https:\/\/cial.pt\/en\/","name":"CIAL","description":"Learn Portuguese in Lisbon &amp; Algarve","publisher":{"@id":"https:\/\/cial.pt\/en\/#organization"},"alternateName":"CIAL","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cial.pt\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cial.pt\/en\/#organization","name":"CIAL","alternateName":"CIAL","url":"https:\/\/cial.pt\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cial.pt\/en\/#\/schema\/logo\/image\/","url":"https:\/\/cial.pt\/wp-content\/uploads\/2023\/11\/cial-svg.svg","contentUrl":"https:\/\/cial.pt\/wp-content\/uploads\/2023\/11\/cial-svg.svg","caption":"CIAL"},"image":{"@id":"https:\/\/cial.pt\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/CIALcentrodelinguas\/","https:\/\/www.instagram.com\/cial_centrodelinguas\/"]}]}},"taxonomy_info":[],"featured_image_src_large":["https:\/\/cial.pt\/wp-content\/uploads\/2024\/01\/CIAL-img-1-d-min-1024x453.jpg",1024,453,true],"author_info":{"display_name":"admin","author_link":"https:\/\/cial.pt\/en\/author\/hemadmin\/"},"comment_info":"","_links":{"self":[{"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/pages\/2113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/comments?post=2113"}],"version-history":[{"count":5,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/pages\/2113\/revisions"}],"predecessor-version":[{"id":7891,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/pages\/2113\/revisions\/7891"}],"up":[{"embeddable":true,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/pages\/1264"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/media\/4662"}],"wp:attachment":[{"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/media?parent=2113"}],"wp:term":[{"taxonomy":"campus","embeddable":true,"href":"https:\/\/cial.pt\/en\/wp-json\/wp\/v2\/campus?post=2113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}