document.addEventListener('DOMContentLoaded', function() {
    // Sliding Banner
    const bannerContainer = document.getElementById('bannerContainer');
    const bannerImage = document.querySelector('.banner-image');
    const bannerText = document.querySelector('.banner-text h2');
    const bannerButton = document.querySelector('.banner-button');
    const bannerContent = document.querySelector('.banner-content');
    let currentIndex = 0;

    function switchBanner() {
        currentIndex = (currentIndex + 1) % banners.length;
        bannerContent.classList.remove('active');
        bannerContent.classList.add('hidden');

        setTimeout(() => {
            bannerContainer.style.backgroundImage = `url('${banners[currentIndex].background_image}')`;
            bannerImage.src = banners[currentIndex].banner_image;
            bannerText.textContent = banners[currentIndex].cta_text;
            // Cek apakah cta_button_text ada/null
            if (!banners[currentIndex].cta_button_text || banners[currentIndex].cta_button_text === null) {
                // Sembunyikan tombol jika tidak ada teks
                bannerButton.style.display = 'none';
            } else {
                // Tampilkan tombol dan atur teks/link jika ada
                bannerButton.style.display = '';
                bannerButton.href = banners[currentIndex].cta_button_link;
                bannerButton.textContent = banners[currentIndex].cta_button_text;
            }

            bannerContent.onclick = () => {
                // Hanya arahkan ke link jika ada
                if (banners[currentIndex].cta_button_link) {
                    window.location.href = banners[currentIndex].cta_button_link;
                }
            };

            bannerContent.classList.remove('hidden');
            bannerContent.classList.add('active');
        }, 400);
    }

    switchBanner();
    setInterval(switchBanner, 5000);
    // End of Sliding Banner

    // Profile
    const accountButton = document.getElementById('account-button');
    const overlayMenu = document.querySelector('.overlay-menu');
    const overlayCloseButton = document.querySelector('.overlay-close-button');
    const overlayLanguageButtons = document.querySelectorAll('.overlay-language-button');
    const overlayContent = document.querySelector('.overlay-menu-content');

    if (accountButton) {
        accountButton.addEventListener('click', () => {
            overlayMenu.classList.add('active');
        });
    }

    overlayCloseButton.addEventListener('click', () => {
        overlayMenu.classList.remove('active');
    });

    overlayLanguageButtons.forEach((button) => {
        button.addEventListener('click', () => {
            overlayLanguageButtons.forEach((btn) => btn.classList.remove('active'));
            button.classList.add('active');
        });
    });

    overlayMenu.addEventListener('click', (event) => {
        if (!overlayContent.contains(event.target)) {
            overlayMenu.classList.remove('active');
        }
    });
    // End of Profile


    // Language Select
    const currentFlag = document.getElementById("current-flag");
    const languageOptions = document.querySelectorAll(".language-option");

    if (currentLang === "indonesian") {
        currentFlag.src = "https://upload.wikimedia.org/wikipedia/commons/9/9f/Flag_of_Indonesia.svg";
        currentFlag.alt = "Indonesian";
    } else if (currentLang === "english") {
        currentFlag.src = "https://upload.wikimedia.org/wikipedia/en/a/ae/Flag_of_the_United_Kingdom.svg";
        currentFlag.alt = "English";
    }

    languageOptions.forEach(option => {
        option.addEventListener("click", function(e) {
            e.preventDefault();
            const lang = this.dataset.lang;
            const url = this.getAttribute("href");

            sessionStorage.setItem("ses_current_link_page", window.location.pathname);

            window.location.href = url;
        });
    });
    // End of Language Select

    // Search
    const searchInput = document.getElementById("search-input-desktop");
    const searchResults = document.getElementById("search-results-desktop");
    const searchContainer = document.querySelector(".search-container-desktop");

    let debounceTimer;

    // Debounce function
    function debounce(callback, delay) {
        return function(...args) {
            clearTimeout(debounceTimer);
            debounceTimer = setTimeout(() => callback.apply(this, args), delay);
        };
    }

    // Make sure search results are appended to search container for proper positioning
    if (searchContainer && searchResults && !searchContainer.contains(searchResults)) {
        searchContainer.appendChild(searchResults);
    }

    function positionSearchResults() {
        if (!searchInput || !searchResults || !searchContainer) return;

        // Position the search results under the search container
        searchResults.style.position = 'absolute';
        searchResults.style.top = '100%'; // Position it right at the bottom of search container
        searchResults.style.left = '50%';
        searchResults.style.transform = 'translateX(-50%)';

        // Set width based on viewport size
        if (window.innerWidth <= 768) {
            // Mobile: make sure it's centered and doesn't overflow
            searchResults.style.width = '95vw';

            // Get the container's dimensions and position
            const containerRect = searchContainer.getBoundingClientRect();
            const containerCenter = containerRect.left + (containerRect.width / 2);
            const viewportCenter = window.innerWidth / 2;

            // Adjust positioning if the container is not centered
            const offset = containerCenter - viewportCenter;
            if (Math.abs(offset) > 10) { // Only adjust if offset is significant
                searchResults.style.transform = `translateX(calc(-50% - ${offset}px))`;
            }
        } else {
            // Desktop
            searchResults.style.width = '800px';
        }

        searchResults.style.maxHeight = window.innerWidth > 768 ? '400px' : '350px';
        searchResults.style.zIndex = '2000';
        searchResults.style.marginTop = '8px';
    }

    // Position search results when showing them
    searchInput.addEventListener('focus', function() {
        positionSearchResults();
        // Only show if there are results
        if (searchResults.children.length > 0) {
            searchResults.classList.add('show');
        }
    });

    function handleSearch(query) {
        if (query.trim() === "") {
            searchResults.classList.remove("show");
            searchResults.innerHTML = "";
            return;
        }

        const url = dropdownSearchUrl + "?query=" + encodeURIComponent(query);

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                return response.json();
            })
            .then((data) => {
                if (!data.results) {
                    searchResults.innerHTML = `
                        <div class="search-result-desktop-header">Terjadi kesalahan. Coba lagi nanti.</div>
                    `;
                    searchResults.classList.add("show");
                    positionSearchResults(); // Reposition after content is added
                    return;
                }

                const {
                    products,
                    brands,
                    categories
                } = data.results;
                const hasProducts = products && products.length > 0;
                const hasBrands = brands && brands.length > 0;
                const hasCategories = categories && categories.length > 0;
                const hasResults = hasProducts || hasBrands || hasCategories;

                if (!hasResults) {
                    searchResults.innerHTML = `
                <div class="search-result-desktop-header">Tidak ada hasil untuk "${query}"</div>
            `;
                    searchResults.classList.add("show");
                    positionSearchResults(); // Reposition after content is added
                    return;
                }

                let resultsHTML = `<div class="search-result-desktop-header">Hasil pencarian untuk "${query}"</div>`;

                // Display brands if any
                if (hasBrands) {
                    resultsHTML += `
                        <div class="search-result-section-desktop">
                            <div class="search-result-section-desktop-title">Brand</div>
                            ${brands.map((item) => `
                            <div class="search-result-item-desktop" onclick="location.href='${item.url}'">
                                <div class="search-result-content-desktop">
                                <img src="${item.image}" alt="${item.brand}" class="search-result-image">
                                <div class="search-result-text-desktop-desktop">
                                    <span class="search-result-title">${item.brand}</span>
                                </div>
                                </div>
                            </div>
                            `).join("")}
                        </div>
                    `;
                }
                // Display categories if any
                if (hasCategories) {
                    resultsHTML += `
                        <div class="search-result-section-desktop">
                            <div class="search-result-section-desktop-title">Kategori</div>
                            ${categories.map((item) => `
                            <div class="search-result-item-desktop" onclick="location.href='${item.url}'">
                                <div class="search-result-content-desktop">
                                <img src="${item.image}" alt="${item.category}" class="search-result-image">
                                <div class="search-result-text-desktop-desktop">
                                    <span class="search-result-desktop-title">${item.category}</span>
                                </div>
                                </div>
                            </div>
                            `).join("")}
                        </div>
                    `;
                }

                // Display products if any
                if (hasProducts) {
                    resultsHTML += `
                        <div class="search-result-section-desktop">
                            <div class="search-result-section-desktop-title">Produk</div>
                            ${products.map((item) => `
                            <div class="search-result-item-desktop" onclick="location.href='${item.url}'">
                                <div class="search-result-content-desktop">
                                <img src="${item.image}" alt="${item.title}" class="search-result-image">
                                <div class="search-result-text-desktop">
                                    <span class="search-result-desktop-title">${item.title}</span>
                                    <span class="search-result-desktop-subtitle">${item.price ? 'IDR ' + item.price.toLocaleString() : '-'}</span>
                                </div>
                                </div>
                            </div>
                            `).join("")}
                        </div>
                    `;
                }

                searchResults.innerHTML = resultsHTML;
                searchResults.classList.add("show");
                positionSearchResults(); // Reposition after content is added
            })
            .catch((error) => {
                console.error("Error fetching search results:", error);
                searchResults.innerHTML = `
            <div class="search-result-desktop-header">Terjadi kesalahan. Coba lagi nanti.</div>
        `;
                searchResults.classList.add("show");
                positionSearchResults(); // Reposition after content is added
            });
    }

    // Reposition search results on window resize, scroll, and orientation change
    window.addEventListener('resize', positionSearchResults);
    window.addEventListener('scroll', positionSearchResults);
    window.addEventListener('orientationchange', positionSearchResults);

    // Debounced Search
    searchInput.addEventListener(
        "input",
        debounce((e) => handleSearch(e.target.value), 300)
    );

    // Close dropdown when clicking outside
    document.addEventListener("click", (e) => {
        if (!e.target.closest(".search-container")) {
            searchResults.classList.remove("show");
        }
    });

    // Form submit
    const searchForm = document.querySelector('.search-form');

    searchForm.addEventListener('submit', function(event) {
        event.preventDefault();

        const query = searchInput.value.trim();
        if (!query) return;

        const utmSource = 'website_search';
        const utmMedium = 'search';
        const timestamp = Date.now();

        const searchURL = `${searchUrl}?q=${encodeURIComponent(query)}&utm_source=${utmSource}&utm_medium=${utmMedium}&timestamp=${timestamp}`;

        window.location.href = searchURL;
    });
    // End of Search

    // Authentication
    const loginButton = document.getElementById('btn-login');
    const popupOverlay = document.getElementById('login-popup-overlay');
    const togglePasswordButton = document.querySelector(".login-popup-toggle-password");
    const passwordInput = document.querySelector("#login-popup-password");
    const togglePasswordIcon = togglePasswordButton.querySelector("img");

    if (loginButton) {
        loginButton.addEventListener('click', (e) => {
            e.preventDefault();
            popupOverlay.classList.add('active');
        });
    }

    popupOverlay.addEventListener('click', (e) => {
        if (e.target === popupOverlay) {
            popupOverlay.classList.remove('active');
        }
    });

    togglePasswordButton.addEventListener("click", function() {
        const isPasswordVisible = passwordInput.getAttribute("type") === "text";
        passwordInput.setAttribute("type", isPasswordVisible ? "password" : "text");

        togglePasswordIcon.src = isPasswordVisible ?
            "https://cdn-icons-png.flaticon.com/512/159/159604.png" :
            "https://cdn-icons-png.flaticon.com/512/565/565655.png";
    });

    document.getElementById('google-login-btn').addEventListener('click', () => {
        window.location.href = `${baseUrl}login/redirect_google`;
    });

    // End of Authentication

    // Slider
    const nextButtons = document.querySelectorAll(".next-btn");
    const prevButtons = document.querySelectorAll(".prev-btn");
    const steps = document.querySelectorAll(".step");
    let currentStep = 0;

    // Show the current step
    function showStep(stepIndex) {
        steps.forEach((step, index) => {
            step.style.display = (index === stepIndex) ? "block" : "none";
        });
    }

    // Event listener for "Next" buttons
    nextButtons.forEach(button => {
        button.addEventListener("click", function() {
            if (validateStep(currentStep)) {
                currentStep++;
                showStep(currentStep);
            }
        });
    });

    // Event listener for "Previous" buttons
    prevButtons.forEach(button => {
        button.addEventListener("click", function() {
            currentStep--;
            showStep(currentStep);
        });
    });

    // Form validation for each step
    function validateStep(stepIndex) {
        let valid = true;
        const currentStepFields = steps[stepIndex].querySelectorAll("input, select");

        currentStepFields.forEach(field => {
            const errorDiv = document.getElementById(field.id + "-error");

            if (field.required && !field.value.trim()) {
                valid = false;

                // Ensure the errorDiv exists before setting its content
                if (errorDiv) {
                    errorDiv.textContent = "This field is required";
                    errorDiv.style.display = "block";
                }
            } else {
                if (errorDiv) {
                    errorDiv.style.display = "none";
                }
            }
        });

        return valid;
    }

    // Initialize the form to show the first step
    showStep(currentStep);
    // End of Slider

    // Testimonial Card
    const bgClasses = [
      'bg-gradient-1',
      'bg-gradient-2',
      'bg-gradient-3',
      'bg-gradient-4',
      'bg-gradient-5',
      'bg-gradient-6',
      'bg-gradient-7',
      'bg-gradient-8'
    ];

    const testimonialCards = document.querySelectorAll('.testimonial-card');

    testimonialCards.forEach(card => {
      const randomBgClass = bgClasses[Math.floor(Math.random() * bgClasses.length)];

      card.classList.add(randomBgClass);
    });
    //End of Testimonial Card
});


$(document).ready(function() {
    const form = $('#login-form');
    const emailError = $('#emailError');
    const passwordError = $('#passwordError');

    function clearErrors() {
        emailError.text('').hide();
        passwordError.text('').hide();
        $('.alert').remove();
    }

    function showAlert(message, type = 'danger') {
        $('.alert').remove();
        form.before(`<div class="alert alert-${type}">${message}</div>`);
    }

    form.on('submit', function(e) {
        e.preventDefault();
        clearErrors();

        const formData = {
            login_email: $('#login-popup-email').val(),
            login_password: $('#login-popup-password').val(),
            [$('#csrf_token').attr('name')]: $('#csrf_token').val()
        }

        $.ajax({
            type: 'POST',
            url: loginPasswordUrl,
            data: formData,
            dataType: 'json',
            beforeSend: function() {
                $('button[type="submit"]').prop('disabled', true);
            },
            success: function(response) {
                if (response.success) {
                    showAlert('Login successful! Redirecting...', 'success');
                    setTimeout(() => {
                        window.location.href = response.redirect_url;
                    }, 500);
                } else {
                    if (response.errors) {
                        if (response.errors.email) {
                            emailError.text(response.errors.email).show();
                        }
                        if (response.errors.password) {
                            passwordError.text(response.errors.password).show();
                        }
                    }

                    if (response.error_message) {
                        showAlert(response.error_message);
                    }
                }
            },
            error: function(xhr, status, error) {
                let errorMessage = 'An error occurred. Please try again.';

                if (xhr.status === 422) {
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.errors) {
                            Object.keys(response.errors).forEach(field => {
                                $(`#${field}Error`).text(response.errors[field]).show();
                            });
                            return;
                        }
                    } catch (e) {
                        console.error('Error parsing validation response:', e);
                    }
                }

                if (status === 'parsererror') {
                    errorMessage = 'There was an error processing the response. Please try again later.';
                    console.error('Parser error:', xhr.responseText);
                }

                showAlert(errorMessage);
            },
            complete: function() {
                $('button[type="submit"]').prop('disabled', false);
            }
        });
    });
});


// Internet
$(document).ready(function() {
    const notyf = new Notyf({
        duration: 3000,
        position: {
            x: 'right',
            y: 'top'
        },
        types: [{
                type: 'offline',
                background: '#FF5722',
                icon: {
                    innerHTML: '<i data-feather="wifi-off" class="text-white"></i>'
                }
            },
            {
                type: 'online',
                background: '#4CAF50',
                icon: {
                    innerHTML: '<i data-feather="wifi" class="text-white"></i>'
                }
            }
        ],
    });

    let wasOffline = false;

    function handleConnectionStatus() {
        if (!navigator.onLine) {
            wasOffline = true;
            notyf.open({
                type: 'offline',
                message: "We couldn't connect to Laciasmara. Please check your network connection and try again."
            });
        } else {
            if (wasOffline) {
                notyf.open({
                    type: 'online',
                    message: "You're back online!"
                });
                wasOffline = false;
            }
        }
    }

    window.addEventListener('online', handleConnectionStatus);
    window.addEventListener('offline', handleConnectionStatus);
});

function scrollToLeft() {
    const grid = document.querySelector('.testimonial-grid');
    grid.scrollBy({
    left: -300,
    behavior: 'smooth'
    }); // Scroll ke kiri
}

// Scroll right
function scrollToRight() {
    const grid = document.querySelector('.testimonial-grid');
    grid.scrollBy({
    left: 300,
    behavior: 'smooth'
    });
}
// Brands Carousel
$(document).ready(function() {
    $('.brands-carousel').owlCarousel({
    loop: true,
    margin: 0,
    stagePadding: 0,
    nav: false,
    dots: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 1000,
    autoplayHoverPause: true,
    smartSpeed: 450,
    items: 8,
    responsive: {
        0: {
        items: 4
        },
        576: {
        items: 5
        },
        768: {
        items: 5
        },
        992: {
        items: 4
        },
        1200: {
        items: 8
        }
    }
    });
});

// Certification Carousel
$(document).ready(function() {
    $(".certification-carousel").owlCarousel({
    lazyLoad: true,
    loop: true,
    margin: 10,
    nav: false,
    dots: false,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 1000,
    autoplayHoverPause: true,
    responsive: {
        0: {
        items: 3
        },
        600: {
        items: 4
        },
    },
    });
});

// Slider Banner
$(document).ready(function() {
    $('.owl-carousel').owlCarousel({
    lazyLoad: true,
    items: 1,
    loop: true,
    margin: 0,
    autoplay: true,
    autoplayTimeout: 5000,
    autoplaySpeed: 1000,
    autoplayHoverPause: true,
    nav: true,
    dots: true,
    navText: [
        '<i class="fa fa-chevron-left"></i>',
        '<i class="fa fa-chevron-right"></i>'
    ],
    smartSpeed: 450,
    responsive: {
        0: {
        items: 1
        }
    }
    });


    const testimonialGrid = document.querySelector('.testimonial-grid');
    const scrollProgress = document.querySelector('.scroll-progress');

    if (testimonialGrid){
         testimonialGrid.addEventListener('scroll', () => {
        const scrollWidth = testimonialGrid.scrollWidth - testimonialGrid.clientWidth;
        const scrollLeft = testimonialGrid.scrollLeft;
        const progress = (scrollLeft / scrollWidth) * 100;
        scrollProgress.style.width = `${progress}%`;
    });
    }

});