import './components/preloader/Preloader';
import './components/lp/saas2/SwiperTrusted';
import './components/lp/saas2/SwiperJust';
import './components/lp/saas2/SwiperWord';
import './components/lp/saas2/SwiperBuild';
import './components/lp/saas2/SwiperAwards';
import { Tabs } from "./components/lp/saas2/Tabs";
import { Skins } from "./components/lp/saas2/Skins";
import { Modal } from "./components/modal/Modal";
import { ModalOnce } from "./components/modal/helper";
import { form } from "./components/form/Form";
import { Header } from "./components/lp/saas2/Header";
import { Lang } from "./components/lp/saas2/Lang";
import Phone from "./components/phone/Phone";
import Accordion from "./components/lp/affiliate_traffic/Accordion";
import './components/lp/affiliate_traffic/Select';
import './components/popup/PopupWebinar';

window.addEventListener('load', () => {
    let url = new URL(window.location);
    const forms = document.querySelectorAll(`[data-widget="form"]`);

    const urlParams = new URLSearchParams(window.location.search);
    const entries = urlParams.entries();
    for (const entry of entries) {
        localStorage.setItem('form__' + entry[0], entry[1]);
    }

    Tabs();
    Skins();
    Header();
    Lang();
    Phone();
    Accordion();

    Modal('saas2', url.hash === '#form');
    Modal('saas', url.hash === '#form', {
        clickOutside: true,
    });
    Modal('once', url.hash === '#form', {
        onClose: () => {localStorage.setItem('form_once_opened', 'true')},
    });
    Modal('whoAreYou', true, {
        timeout: 1000,
    });
    ModalOnce();

    if (forms.length !== 0) {
        forms.forEach(item => {
            if (item) {
                const name = item.getAttribute('data-name');
                if (name) {
                    form(name);
                }
            }
        });
    }

    const detailsBtns = document.querySelectorAll(`[data-role="plan-details"]`);
    [...detailsBtns].forEach((detailsBtn) => {
        detailsBtn.addEventListener('click', () => {
            const optionsList = detailsBtn.parentNode.querySelector('.block-plans__planOptions');
            const button = detailsBtn.querySelector('span');
            optionsList.classList.toggle('active');
            detailsBtn.classList.toggle('active');
            if (optionsList.classList.contains('active')) {
                button.innerText = 'Hide';
            } else {
                button.innerText = 'Details';
            }
        });
    })

});