(function () {
    let embedToken;
    let baseUrl;
    let isPreOwned;
    let currentWeekStart = 0;
    let availableDates = [];
    let selectedServiceId = null;
    let storeCache = {};

    document.addEventListener("DOMContentLoaded", function () {
        let scriptTag = document.currentScript || [...document.querySelectorAll("script")].find(s => s.src.includes("embedbaa.js"));

        if (!scriptTag) {
            console.error("SynergyConnect: Could not find the script tag.");
            return;
        }

        let scriptSrc = scriptTag.src;
        baseUrl = new URL(scriptSrc).origin;

        // ✅ Extract embed token from URL params
        let urlParams = new URL(scriptSrc).searchParams;
        embedToken = urlParams.get("token");

        if (!embedToken) {
            console.error("SynergyConnect: No embed token provided.");
            return;
        }

        let customContainerSelector = scriptTag.getAttribute("data-container");
        let customCss = scriptTag.getAttribute("data-css") || `${baseUrl}/css/embed.css?v=${new Date().getTime()}`;

        let formContainer = customContainerSelector ? document.querySelector(customContainerSelector) : document.querySelector("#synergy-form-container");

        if (!formContainer) {
            formContainer = document.createElement("div");
            formContainer.id = "synergy-form-container";
            scriptTag.parentNode.insertBefore(formContainer, scriptTag);
        }

        let formUrl = `${baseUrl}/api/form/embed/${embedToken}`;
        let submitUrl = `${baseUrl}/api/form/submit/${embedToken}`;
        let recaptchaSiteKey = null;

        // Load CSS
        let linkTag = document.createElement("link");
        linkTag.rel = "stylesheet";
        linkTag.href = customCss;
        document.head.appendChild(linkTag);

        // Fetch Form & reCAPTCHA Site Key
        fetch(formUrl, {
            method: "GET",
            headers: { "Accept": "application/json" }
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                console.error("SynergyConnect: Error fetching form.", data.error);
                SynergyForm.showErrorMessage(formContainer, data.error || "Access denied. This form cannot be loaded.");
                return;
            }

            let { html, form_type, is_preowned, secret, recaptcha_site_key } = data;
            isPreOwned = is_preowned;
            recaptchaSiteKey = recaptcha_site_key;

            // Insert HTML
            formContainer.innerHTML = html;

            // Check for form directly after insertion
            let formElement = formContainer.querySelector("form");

            if (!formElement) {
                console.error("Form element not found after HTML insertion");
                return;
            }

            console.log("SynergyConnect: Form detected successfully!");
            formElement.setAttribute("data-secret", secret);

            // ✅ Extract Product Attributes for 'model_appointment' Form Type
            if (form_type === "model_send_message" || form_type === "model_appointment") {
                let productData = {
                    product_name: formContainer.getAttribute("data-product-name") || "",
                    product_description: formContainer.getAttribute("data-product-description") || "",
                    product_url: formContainer.getAttribute("data-product-url") || "",
                    product_sku: formContainer.getAttribute("data-product-sku") || "",
                    product_image: formContainer.getAttribute("data-product-image") || "",
                    product_message: formContainer.getAttribute("data-message") || ""
                };

                // ✅ Add product attributes to form as hidden inputs
                Object.keys(productData).forEach(key => {
                    if (productData[key]) {
                        let input = document.createElement("input");
                        input.type = "hidden";
                        input.name = key;
                        input.value = productData[key];
                        formElement.appendChild(input);
                    }
                });

                // ✅ Pre-fill Message Field if `data-message` is Provided
                if (productData.product_message) {
                    let messageField = formElement.querySelector("[name='message']");
                    if (messageField) {
                        messageField.value = productData.product_message;
                    }
                }
            }

            // ✅ Fetch services dynamically from Microsoft Bookings using global `embedToken`
            fetchServices();

            // ✅ **Load reCAPTCHA Script Dynamically**
            if (recaptchaSiteKey) {
                let recaptchaScript = document.createElement("script");
                recaptchaScript.src = `https://www.google.com/recaptcha/api.js?render=${recaptchaSiteKey}`;
                recaptchaScript.async = true;
                recaptchaScript.defer = true;
                recaptchaScript.onload = function () {
                    SynergyForm.init(formElement, submitUrl, recaptchaSiteKey);
                };
                document.head.appendChild(recaptchaScript);
            } else {
                console.warn("SynergyConnect: No reCAPTCHA key provided.");
                SynergyForm.init(formElement, submitUrl, null);
            }
        })
        .catch(error => {
            console.error("SynergyConnect: Failed to load form:", error);
            SynergyForm.showErrorMessage(formContainer, "Failed to load the form. Please try again later.");
        });
    });

    // ✅ Fetch services dynamically from the database
    function fetchServices() {
        if (!embedToken) {
            console.error("SynergyConnect: No embed token available.");
            return;
        }

        console.log("Fetching services using embedToken:", embedToken); // 🚀 DEBUG

        let servicesUrl = `${baseUrl}/api/calendar/services?token=${embedToken}`;
        fetch(servicesUrl)
            .then(response => response.json())
            .then(data => {
                let serviceContainer = document.querySelector("#service-options");
                serviceContainer.innerHTML = ""; // Clear existing content

                if (!data.success) {
                    console.error("Service API Error:", data.message);
                    serviceContainer.innerHTML = `<p class="synergy-error-text">${data.message}</p>`;
                    document.querySelector(".synergy-next").disabled = true;
                    return;
                }

                // ✅ Populate services dynamically
                data.services.forEach(service => {
                    let serviceOption = document.createElement("label");
                    serviceOption.classList.add("synergy-option-card");
                    serviceOption.dataset.value = service.id;

                    serviceOption.innerHTML = `
                        <div class="cpo-banner-img">
                            <img src="${service.desktop_image}" class="cpo-desktop-img" alt="${service.name}">
                            <img src="${service.mobile_image}" class="cpo-mobile-img" alt="${service.name}">
                        </div>
                        <div class="synergy-option-text">
                            <strong>${service.name}</strong>
                            <span>${service.description}</span>
                        </div>
                    `;

                    // ✅ Attach event listener dynamically to each service option
                    serviceOption.addEventListener("click", function () {
                        document.querySelectorAll(".synergy-option-card").forEach(btn => btn.classList.remove("selected"));
                        serviceOption.classList.add("selected");

                        selectedServiceId = serviceOption.getAttribute("data-value");
                        document.querySelector("#appointment_purpose").value = selectedServiceId;
                        document.querySelector(".synergy-next").disabled = false;
                        const serviceNoteMapping = {
                            'Rolex Watches': 'Kindly note that the availability of certain Rolex watches in our Showroom may be limited.',
                            'Rolex Servicing': 'Please note that you may visit our store directly to bring/collect your watch to/from our after-sales service.'
                        };

                        let selectedServiceNameElement = document.querySelector(".synergy-option-card.selected .synergy-option-text strong");
                        let displayedServiceName = selectedServiceNameElement ? selectedServiceNameElement.textContent.trim() : "N/A";

                        // Get the appropriate notice text from the mapping, or use a default message if not found
                        let noticeText = serviceNoteMapping[displayedServiceName] ||
                            "Kindly note that the availability of certain Rolex watches in our Showroom may be limited.";

                        document.querySelector("#synergy-appointment-notice").innerText = noticeText;
                        SynergyForm.nextStep(document.querySelector("#synergy-book-appointment-form"));
                    });

                    serviceContainer.appendChild(serviceOption);
                });
            })
            .catch(error => {
                console.error("Error fetching services:", error);
                document.querySelector("#service-options").innerHTML = `<p class="synergy-error-text">Failed to load services. Please try again later.</p>`;
            });
    }

    // ✅ Fetch stores dynamically based on the selected service
    function fetchStores(serviceId) {
        if (!embedToken) {
            console.error("SynergyConnect: No embed token available.");
            return;
        }

        console.log("Fetching stores using embedToken:", embedToken, " for service ID:", serviceId);

        let storesUrl = `${baseUrl}/api/calendar/stores?token=${embedToken}&service_id=${serviceId}`;
        fetch(storesUrl)
            .then(response => response.json())
            .then(data => {
                let storeContainer = document.querySelector(".synergy-location-container");
                storeContainer.innerHTML = ""; // Clear existing content

                if (!data.success) {
                    console.error("Store API Error:", data.message);
                    storeContainer.innerHTML = `<p class="synergy-error-text">${data.message}</p>`;
                    return;
                }

                storeCache = {};

                data.stores.forEach(store => {
                    storeCache[store.id] = store; // ✅ Store data in cache

                    let storeCard = document.createElement("div");
                    storeCard.classList.add("synergy-location-card");
                    storeCard.dataset.id = store.id;
                    storeCard.dataset.store = store.store_name;
                    storeCard.dataset.address = store.address;
                    storeCard.dataset.postcode = store.postcode;

                    storeCard.innerHTML = `
                        <h3>${isPreOwned ? 'Rolex Certified Pre-owned' : 'Official Rolex Retailer'}</h3>
                        <h2>${store.store_name}</h2>
                        <p>${store.address}<br>${store.city}<br>${store.postcode}<br>${store.country}</p>
                    `;

                    storeCard.addEventListener("click", function () {
                        document.querySelectorAll(".synergy-location-card").forEach(c => c.classList.remove("active"));
                        this.classList.add("active");

                        document.querySelector("#selected_location").value = `${store.id}`;
                        document.querySelector(".synergy-next").removeAttribute("disabled");

                        // ✅ Fetch blocked/unavailable dates now
                        resetDateTimeSlot();
                        fetchUnavailableDates(serviceId);

                    });

                    storeContainer.appendChild(storeCard);
                });
            })
            .catch(error => {
                console.error("Error fetching stores:", error);
                document.querySelector(".synergy-location-container").innerHTML = `<p class="synergy-error-text">Failed to load stores. Please try again later.</p>`;
            });
    }

    function fetchUnavailableDates(serviceId) {
        let datesUrl = `${baseUrl}/api/calendar/blocked-dates?token=${embedToken}&service_id=${serviceId}`;

        fetch(datesUrl)
            .then(response => response.json())
            .then(data => {
                if (!data.success || !data.blocked_dates || data.blocked_dates.length === 0) {
                    console.warn("No unavailable dates received. Assuming all dates are available.");
                    blockedDates = [];
                } else {
                    blockedDates = data.blocked_dates; // ✅ Store blocked dates
                }

                generateNextSixMonths(); // ✅ Refresh date display after fetching blocked dates
            })
            .catch(error => {
                console.error("Error fetching unavailable dates:", error);
                document.getElementById("date-grid").innerHTML = `<p class="synergy-error-text">Failed to load dates.</p>`;
            });
    }

    function generateNextSixMonths() {
        let today = new Date();
        let allDates = [];

        // Start from today's date
        let currentDate = new Date(today);
        // Find the Monday of the current week
        let dayOfWeek = currentDate.getDay(); // 0 = Sunday, 1 = Monday, etc.
        let daysToSubtract = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // If Sunday, go back 6 days; otherwise go back dayOfWeek-1 days
        currentDate.setDate(currentDate.getDate() - daysToSubtract); // Now currentDate is the Monday of this week
        // Generate dates starting from Monday for the next 180 days
        for (let i = 0; i < 180; i++) {
            let date = new Date(currentDate);
            date.setDate(currentDate.getDate() + i);
            let formattedDate = date.toISOString().split("T")[0]; // Format as YYYY-MM-DD
            allDates.push(formattedDate);
        }

        availableDates = allDates; // Store all dates
        currentWeekStart = 0; // Always start from the first available date (which is now guaranteed to be a Monday)
        displayDates(); // Display the dates immediately
    }

    function displayDates() {
        let dateContainer = document.getElementById("date-grid");
        dateContainer.innerHTML = ""; // Clear previous dates

        if (!availableDates || availableDates.length === 0) {
            console.warn("No dates to display.");
            dateContainer.innerHTML = `<p class="synergy-error-text">No dates available.</p>`;
            return;
        }

        // Make sure currentWeekStart is valid
        if (currentWeekStart < 0) {
            currentWeekStart = 0;
        }
        // Make sure we don't go beyond available dates
        if (currentWeekStart >= availableDates.length) {
            currentWeekStart = Math.max(0, availableDates.length - 7);
        }
        // Get visible dates for this week
        let visibleDates = availableDates.slice(currentWeekStart, currentWeekStart + 7);
        let today = new Date();
        today.setHours(0, 0, 0, 0);

        visibleDates.forEach(date => {
            let dateObj = new Date(date);
            dateObj.setHours(0, 0, 0, 0);
            let dateBtn = document.createElement("button");
            dateBtn.classList.add("date-button");
            dateBtn.innerHTML = `<b>${dateObj.getDate()}</b> ${dateObj.toLocaleString("default", { weekday: "short" })}`;
            dateBtn.dataset.date = date;

            // Check if date is in the past or blocked
            if (dateObj < today || blockedDates.includes(date)) {
                dateBtn.classList.add("unavailable");
                dateBtn.disabled = true;
            } else {
                dateBtn.classList.add("available");
            }

            dateBtn.addEventListener("click", function (event) {
                // Keep the existing event handler code
                event.preventDefault();
                resetDateTimeSlot();
                document.querySelectorAll(".date-button").forEach(btn => {
                    btn.disabled = true;
                });

                document.querySelector(".synergy-hide").style.display = "block";
                document.querySelectorAll(".date-button").forEach(btn => btn.classList.remove("selected"));
                this.classList.add("selected");
                document.getElementById("selected_date").value = date;
                checkDateTimeSelection();

                fetchTimeSlots(date)
                    .then(() => {
                        document.querySelectorAll(".date-button").forEach(btn => {
                            if (btn.classList.contains("unavailable")) {
                                btn.disabled = true;
                            } else {
                                btn.disabled = false;
                            }
                        });
                    })
                    .catch(error => {
                        console.error("Error fetching time slots:", error);
                        document.querySelectorAll(".date-button").forEach(btn => {
                            btn.disabled = false;
                        });
                    });
            });

            dateContainer.appendChild(dateBtn);
        });

        // Update navigation buttons
        document.querySelector(".synergy-date-nav.prev").disabled = currentWeekStart === 0;
        document.querySelector(".synergy-date-nav.next").disabled = currentWeekStart + 7 >= availableDates.length;
        // Update date range display
        updateDateRangeDisplay();
    }

    // reset time conatiner
    function resetDateTimeSlot() {
        document.getElementById("selected_date").value = '';
        document.getElementById("selected_time").value = '';
        let timeContainer = document.getElementById("time-options");
        timeContainer.innerHTML = "";
        document.querySelector(".synergy-hide").style.display = "none";
    }
    // display date range
    function updateDateRangeDisplay() {
        const dateCurrentElement = document.getElementById("date-current");

        if (!availableDates || availableDates.length === 0 || currentWeekStart >= availableDates.length) {
            dateCurrentElement.textContent = "No dates available";
            return;
        }

        // Make sure we don't go out of bounds
        const lastIndex = Math.min(currentWeekStart + 6, availableDates.length - 1);
        // Check if we have valid dates at these indices
        if (currentWeekStart < 0 || lastIndex < 0 || !availableDates[currentWeekStart] || !availableDates[lastIndex]) {
            dateCurrentElement.textContent = "Invalid date range";
            return;
        }
        // Get the first date in the current view
        const firstDateStr = availableDates[currentWeekStart];
        const firstDate = new Date(firstDateStr);
        // Get the last date in the current view
        const lastDateStr = availableDates[lastIndex];
        const lastDate = new Date(lastDateStr);
        // Verify both dates are valid
        if (isNaN(firstDate.getTime()) || isNaN(lastDate.getTime())) {
            dateCurrentElement.textContent = "Invalid date range";
            return;
        }
        // Format the display: "DD-DD MMM YYYY" with proper validation
        const formattedDisplay = `${firstDate.getDate()} - ${lastDate.getDate()} ${lastDate.toLocaleString("default", { month: "long" })} ${lastDate.getFullYear()}`;

        dateCurrentElement.textContent = formattedDisplay;
    }


    // Modified function to handle the initialization of the datetime step
    function initializeDateTimeStep() {
        // Check if date and time are already selected when entering the step
        const dateInput = document.querySelector("#selected_date");
        const timeInput = document.querySelector("#selected_time");
        const nextButton = document.querySelector(".synergy-step-datetime .synergy-next");

        if (nextButton) {
            // If both date and time are already selected, enable the button
            if (dateInput && timeInput && dateInput.value && timeInput.value) {
                nextButton.removeAttribute("disabled");
            } else {
                // Otherwise disable it
                nextButton.setAttribute("disabled", "disabled");
            }
        }
    }

    // The rest of the functions remain the same as in the previous solution
    function checkDateTimeSelection() {
        const dateInput = document.querySelector("#selected_date");
        const timeInput = document.querySelector("#selected_time");
        const nextButton = document.querySelector(".synergy-step-datetime .synergy-next");

        if (dateInput && timeInput && nextButton) {
            if (dateInput.value && timeInput.value) {
                nextButton.removeAttribute("disabled");
            } else {
                nextButton.setAttribute("disabled", "disabled");
            }
        }
    }


    // ✅ Fetch available time slots based on selected date
    function fetchTimeSlots(selectedDate) {
        // Show a loading indicator immediately
        let timeContainer = document.getElementById("time-options");
        timeContainer.innerHTML = "<p class='loading-slots'></p>";

        // Use the new combined endpoint
        const url = `${baseUrl}/api/calendar/all-times?token=${embedToken}&service_id=${selectedServiceId}&date=${selectedDate}`;

        // Add request timeout
        const timeoutDuration = 12000; // 12 seconds
        const timeoutPromise = new Promise((_, reject) =>
            setTimeout(() => reject(new Error('Request timed out')), timeoutDuration)
        );

        // Return the Promise with timeout
        return Promise.race([
            fetch(url).then(response => {
                if (!response.ok) {
                    throw new Error(`HTTP error! Status: ${response.status}`);
                }
                return response.json();
            }),
            timeoutPromise
        ])
            .then(data => {
                if (!data.success) {
                    throw new Error(data.message || 'Failed to load time slots');
                }

                const allTimeSlots = data.all_times || [];
                const unavailableTimeSlots = data.unavailable_times || [];

                if (allTimeSlots.length === 0) {
                    timeContainer.innerHTML = `<p>No time slots available for this date.</p>`;
                    return;
                }

                timeContainer.innerHTML = ""; // Clear loading indicator

                allTimeSlots.forEach(time => {
                    let timeBtn = document.createElement("button");
                    timeBtn.classList.add("synergy-time");
                    timeBtn.innerText = time;
                    timeBtn.dataset.time = time;

                    if (unavailableTimeSlots.includes(time)) {
                        timeBtn.classList.add("unavailable");
                        timeBtn.disabled = true;
                    } else {
                        timeBtn.classList.add("available");
                    }

                    timeBtn.addEventListener("click", function (event) {
                        event.preventDefault();
                        document.querySelectorAll(".synergy-time").forEach(btn => btn.classList.remove("selected"));
                        this.classList.add("selected");
                        document.getElementById("selected_time").value = time;
                        // Check if both date and time are selected after time selection
                        checkDateTimeSelection();
                    });

                    timeContainer.appendChild(timeBtn);
                });
            })
            .catch(error => {
                console.error("Error fetching time slots:", error);
                timeContainer.innerHTML = `<p>Error loading time slots. Please try again.</p>`;
            });
    }

    window.SynergyForm = {
        init: function (formElement, submitUrl, siteKey) {
            let secureToken = formElement.getAttribute("data-secret");

            let steps = formElement.querySelectorAll(".synergy-step");
            if (steps.length > 0) {
                steps[0].classList.add("active");
            }

            // ✅ Step 1: Clickable images for selecting appointment purpose
            /*
            document.querySelector("#service-options").addEventListener("click", function (event) {
                let serviceContainer = document.querySelector("#service-options");
                if (serviceContainer) {
                    serviceContainer.addEventListener("click", function (event) {
                        let selectedCard = event.target.closest(".synergy-option-card");
                        if (!selectedCard) return;

                        document.querySelectorAll(".synergy-option-card").forEach(btn => btn.classList.remove("selected"));
                        selectedCard.classList.add("selected");

                        selectedServiceId = selectedCard.getAttribute("data-value");
                        document.querySelector("#appointment_purpose").value = selectedServiceId;
                        document.querySelector(".synergy-next").disabled = false;

                        let noticeText = selectedServiceId === "discover"
                            ? "You have chosen to explore the Rolex collections. Our advisors will guide you through our selection."
                            : "You have chosen to bring in or collect your watch for servicing. Please ensure you bring any necessary documentation.";

                        document.querySelector("#synergy-appointment-notice").innerText = noticeText;
                        SynergyForm.nextStep(document.querySelector("#synergy-book-appointment-form"));
                    });
                }
            });
            */

            // ✅ Modify the "I Understand" button inside the Terms step to fetch stores and move to Step 3.
            document.querySelector(".synergy-next.check-icon").addEventListener("click", function () {
                if (!selectedServiceId) {
                    console.error("SynergyConnect: No service selected.");
                    return;
                }

                // ✅ Fetch stores now, instead of in `fetchServices()`
                fetchStores(selectedServiceId);

                // ✅ Move to Step 3 (Location Selection)
                //SynergyForm.nextStep(document.querySelector("#synergy-book-appointment-form"));
            });

            // ✅ Event listener for "Previous" button
            document.querySelector(".synergy-date-nav.prev").addEventListener("click", function () {
                if (currentWeekStart > 0) {
                    currentWeekStart -= 7; // Move back 7 dates
                    displayDates();
                }
            });

            // ✅ Event listener for "Next" button
            document.querySelector(".synergy-date-nav.next").addEventListener("click", function () {
                if (currentWeekStart + 7 < availableDates.length) {
                    currentWeekStart += 7; // Move forward 7 dates
                    displayDates();
                }
            });

            // ✅ Step 3: Handle Showroom Selection
            formElement.addEventListener("click", function (event) {
                if (event.target.closest(".synergy-location-card")) {
                    let selectedCard = event.target.closest(".synergy-location-card");

                    // Remove active state from all selections
                    formElement.querySelectorAll(".synergy-location-card").forEach(c => c.classList.remove("active"));

                    // Set active state
                    selectedCard.classList.add("active");

                    // Store selection in hidden input field
                    let selectedStoreId = selectedCard.getAttribute("data-id");
                    formElement.querySelector("#selected_location").value = `${selectedStoreId}`;

                    // Enable the correct "Next" button dynamically
                    let stepContainer = selectedCard.closest(".synergy-step");
                    let nextButton = stepContainer.querySelector(".synergy-next");
                    if (nextButton) {
                        nextButton.removeAttribute("disabled");
                    }
                }
            });

            // ✅ Fix for Step 3 "Next" button - Ensures it works dynamically
            formElement.addEventListener("click", function (event) {
                if (event.target.closest(".synergy-next")) {
                    let currentStep = event.target.closest(".synergy-step");
                    // check location selection
                    if (currentStep && currentStep.classList.contains("synergy-step-location")) {
                        let hiddenLocationInput = formElement.querySelector("#selected_location");
                        if (!hiddenLocationInput.value) {
                            alert("Please select a showroom before proceeding.");
                            return;
                        }
                    }
                    // Move to the next step
                    SynergyForm.nextStep(formElement);
                }
            });

            formElement.querySelectorAll(".synergy-prev").forEach(button => {
                button.addEventListener("click", function () {
                    SynergyForm.prevStep(formElement);
                });
            });

            formElement.addEventListener("submit", function (event) {
                event.preventDefault();
                SynergyForm.clearErrors(formElement);

                let activeStep = formElement.querySelector(".synergy-step.active");
                if (!SynergyForm.validateStep(activeStep)) return;

                if (!siteKey) {
                    console.error("SynergyConnect: reCAPTCHA site key is missing.");
                    SynergyForm.showErrorMessage(formElement, "reCAPTCHA verification failed. Please try again.");
                    return;
                }

                grecaptcha.ready(function () {
                    grecaptcha.execute(siteKey, { action: 'submit' }).then(function (recaptchaToken) {
                        let formData = new FormData(formElement);
                        formData.append("secure_token", secureToken);
                        formData.append("g-recaptcha-response", recaptchaToken);

                        fetch(submitUrl, {
                            method: "POST",
                            body: formData,
                            headers: { "Accept": "application/json" }
                        })
                            .then(response => response.json())
                            .then(data => {
                                if (data.success) {
                                    // ✅ Trigger Tracking After Successful Submission
                                    if (typeof _satellite !== "undefined" && typeof _satellite.track === "function") {
                                        _satellite.track("bookAppointment");
                                        // Get the service name from the selected card
                                        const serviceNameMapping = {
                                            'Rolex Watches': 'collection discovery',
                                            'Rolex Servicing': 'watch servicing'
                                        };

                                        let selectedServiceNameElement = document.querySelector(".synergy-option-card.selected .synergy-option-text strong");
                                        let displayedServiceName = selectedServiceNameElement ? selectedServiceNameElement.textContent.trim() : "N/A";

                                        // Map the displayed service name to the tracking value
                                        let serviceName = serviceNameMapping[displayedServiceName] || displayedServiceName;

                                        // Get the selected date and format it
                                        let selectedDate = document.querySelector("#selected_date").value;
                                        let dateObj = selectedDate ? new Date(selectedDate) : new Date();

                                        // Get day of week
                                        let dayOfWeek = dateObj.toLocaleString("en-GB", { weekday: "long" }); // e.g., "Monday"

                                        // Format the date as YYYY-MM-DD (already in this format in the hidden input)
                                        let formattedDate = selectedDate;

                                        // Get selected time (already in the right format in the hidden input)
                                        let selectedTime = document.querySelector("#selected_time").value || "00:00";

                                        // Create the tracking string with the specified format
                                        window.appointmentInformation = `${serviceName}|${dayOfWeek}|${formattedDate}|${selectedTime}`;

                                        // Log the tracking information (can be removed in production)
                                        console.log("Appointment tracking information:", window.appointmentInformation);
                                    }

                                    // Now show the thank you message AFTER tracking is complete
                                    SynergyForm.showThankYou(formElement);
                                } else {
                                    SynergyForm.showErrors(formElement, data.errors);
                                }
                            })
                            .catch(error => {
                                console.error("SynergyConnect: Submission failed", error);
                                alert("Error submitting form");
                            });
                    });
                });
            });
        },

        showErrorMessage: function (container, message) {
            if (!container) return;
            let errorDiv = document.createElement("div");
            errorDiv.className = "synergy-error-message-container";
            errorDiv.innerHTML = `<p class="synergy-error-text">${message}</p>`;
            container.innerHTML = "";
            container.appendChild(errorDiv);
        },

        nextStep: function (formElement) {
            let currentStep = formElement.querySelector(".synergy-step.active");
            let nextStep = currentStep.nextElementSibling;

            if (nextStep && nextStep.classList.contains("synergy-step")) {
                currentStep.classList.remove("active");
                nextStep.classList.add("active");
                // Initialize the datetime step if it becomes active
                if (nextStep.classList.contains("synergy-step-datetime")) {
                    initializeDateTimeStep();
                }
            }

            SynergyForm.scrollToElement(formElement);
        },

        prevStep: function (formElement) {
            let currentStep = formElement.querySelector(".synergy-step.active");
            let prevStep = currentStep.previousElementSibling;

            if (prevStep && prevStep.classList.contains("synergy-step")) {
                currentStep.classList.remove("active");
                prevStep.classList.add("active");
                // Initialize the datetime step if we're going back to it
                if (prevStep.classList.contains("synergy-step-datetime")) {
                    initializeDateTimeStep();
                }
            }

            SynergyForm.scrollToElement(formElement);
        },

        scrollToElement: function (targetElement, extraOffset = 20) {
            if (!targetElement) return;

            const offsetTop = targetElement.getBoundingClientRect().top + window.scrollY - extraOffset;

            window.scrollTo({
                top: offsetTop,
                behavior: "smooth"
            });
        },

        validateStep: function (stepElement) {
            let isValid = true;

            let requiredFields = {
                "appointment_purpose": "Please select an appointment purpose.",
                "location": "Please select a showroom.",
                "appointment_date": "Please select an appointment date.",
                "appointment_time": "Please select an appointment time.",
                "first_name": "Please enter your first name.",
                "last_name": "Please enter your last name.",
                "terms": "Please accept the terms and conditions."
            };

            for (let fieldName in requiredFields) {
                let field = stepElement.querySelector(`[name="${fieldName}"]`);

                if (field) {
                    let isEmpty = field.value.trim() === "";

                    // ✅ Special handling for checkboxes
                    if (field.type === "checkbox") {
                        isEmpty = !field.checked;
                    }

                    if (isEmpty) {
                        SynergyForm.setFieldError(field, requiredFields[fieldName], true);
                        isValid = false;
                    } else {
                        SynergyForm.setFieldError(field, "", false);
                    }
                }
            }

            // Email/Phone validation
            let emailField = stepElement.querySelector("#email");
            let phoneField = stepElement.querySelector("#phone");

            if (stepElement.classList.contains("synergy-step") && emailField && phoneField) {
                let email = emailField.value.trim();
                let phone = phoneField.value.trim();

                if (!email && !phone) {
                    SynergyForm.setFieldError(emailField, "Please include a valid email address and/or a phone number", true);
                    SynergyForm.setFieldError(phoneField, "", false);
                    isValid = false;
                } else {
                    SynergyForm.setFieldError(emailField, "", false);
                    SynergyForm.setFieldError(phoneField, "", false);
                }
            }

            return isValid;
        },

        setFieldError: function (field, message, isError) {
            if (!field) return;

            let errorContainer = field.parentNode.querySelector(".synergy-error-message");
            if (!errorContainer) {
                errorContainer = document.createElement("div");
                errorContainer.className = "synergy-error-message";
                field.parentNode.appendChild(errorContainer);
            }

            errorContainer.innerText = isError ? message : "";
            field.classList.toggle("synergy-input-error", isError);
        },

        clearErrors: function (formElement) {
            formElement.querySelectorAll(".synergy-error-message").forEach(error => (error.innerText = ""));
            formElement.querySelectorAll(".synergy-input-error").forEach(field => field.classList.remove("synergy-input-error"));
        },

        showThankYou: function (formElement) {
            formElement.style.display = "none";
            let thankYouElement = document.querySelector(".synergy-thank-you");

            if (thankYouElement) {
                thankYouElement.style.display = "grid";

                // ✅ Fetch the dynamic values from the form
                let selectedService = document.querySelector("#appointment_purpose").value;
                let selectedDate = document.querySelector("#selected_date").value;
                let selectedTime = document.querySelector("#selected_time").value;

                let selectedStoreId = document.querySelector("#selected_location").value;
                let selectedStore = storeCache[selectedStoreId] || { store_name: "Unknown", address: "Not Available" };

                // ✅ Get the service name from the selected option
                let selectedServiceText = document.querySelector(`.synergy-option-card[data-value="${selectedService}"] strong`)?.textContent || "N/A";

                // ✅ Format date and time
                let formattedDateTime = "Not Selected";
                if (selectedDate && selectedTime) {
                    let dateObj = new Date(selectedDate);
                    let day = dateObj.toLocaleString("en-GB", { weekday: "long" }); // Saturday
                    let dayNum = dateObj.getDate(); // 30
                    let month = dateObj.toLocaleString("en-GB", { month: "long" }); // March
                    let year = dateObj.getFullYear(); // 2024

                    // ✅ Convert time to 12-hour format with AM/PM
                    let [hour, minute] = selectedTime.split(":");
                    hour = parseInt(hour, 10);
                    let amPm = hour >= 12 ? "PM" : "AM";
                    hour = hour > 12 ? hour - 12 : hour; // Convert to 12-hour format
                    if (hour === 0) hour = 12; // Handle midnight case

                    formattedDateTime = `${day} ${dayNum} ${month} ${year} at ${hour} ${amPm}`;
                }

                // ✅ Update the confirmation message dynamically
                document.querySelector(".synergy-thank-you-purpose").innerText = selectedServiceText;
                document.querySelector(".synergy-thank-you-date").innerText = formattedDateTime;
                //document.querySelector(".synergy-thank-you-location").innerText = selectedLocation || "Not Selected";
                document.querySelector(".synergy-thank-you-location").innerText = `${selectedStore.store_name}, ${selectedStore.address}, ${selectedStore.postcode}`;

                // Scroll to the thank you message
                SynergyForm.scrollToElement(thankYouElement, window.innerWidth < 991 ? 100 : 250);
            }
        }
    };
})();