<!-- HTML для виджета Elementor -->
<div class="options-container">
    <div class="option">Разработка веб-сайтов</div>
    <div class="option">Контекстная реклама</div>
    <div class="option">SEO</div>
    <div class="option">SMM</div>
    <div class="option">Регистрация торговой марки</div>
    <div class="option">Копирайтинг</div>
</div>
<div class="extra-options-container" style="display: none;">
    <div class="option">Видеотрансляции и видеомонтаж</div>
    <div class="option">Дизайн любой сложности</div>
    <div class="option">Разработка логотипов и фирменного стиля</div>
    <div class="option">Брендирование автотранспорта</div>
    <div class="option">Сувенирная продукция</div>
    <div class="option">Фотосессии</div>
    <div class="option">Наружная реклама</div>
    <div class="option">Реклама на ТВ и Радио по Северо-Западу РФ</div>
    <div class="option">Реклама на крупных автоспортивных мероприятиях</div>
</div>
<div class="show-more">Показать ещё</div>

<!-- Скрытое поле для передачи данных -->
<input type="hidden" id="selected-services" name="custom_selected_services">

<style>
    .options-container, .extra-options-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .option {
        width: 32%;
        padding: 10px;
        background: #FDFDFD;
        border-radius: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        color: #1A2529;
        font-size: 20px;
        font-family: Nunito, sans-serif;
        font-weight: 600;
        margin-bottom: 10px;
        box-sizing: border-box;
        cursor: pointer;
        transition: background 0.2s, color 0.2s;
    }

    .option:hover, .option.active {
        background: #25C484;
        color: #FDFDFD;
    }

    .show-more {
        text-align: center;
        color: #1A2529;
        font-size: 20px;
        font-family: Nunito, sans-serif;
        font-weight: 600;
        text-decoration: underline;
        cursor: pointer;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    @media (max-width: 768px) {
        .option {
            width: 48%;
        }
    }

    @media (max-width: 480px) {
        .option {
            width: 100%;
        }
    }
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const showMoreBtn = document.querySelector('.show-more');
    const extraOptions = document.querySelector('.extra-options-container');
    const options = document.querySelectorAll('.option');
    const hiddenInput = document.getElementById('selected-services');
    const debugOutput = document.getElementById('debug-selected-services');
    const elementorForm = document.querySelector('.elementor-form');

    showMoreBtn.addEventListener('click', () => {
        if (extraOptions.style.display === 'none' || extraOptions.style.display === '') {
            extraOptions.style.display = 'flex';
            showMoreBtn.textContent = 'Скрыть';
        } else {
            extraOptions.style.display = 'none';
            showMoreBtn.textContent = 'Показать ещё';
        }
    });

    options.forEach(option => {
        option.addEventListener('click', () => {
            option.classList.toggle('active');
            updateSelectedServices();
        });
    });

    function updateSelectedServices() {
        const selectedOptions = [];
        document.querySelectorAll('.option.active').forEach(option => {
            selectedOptions.push(option.textContent.trim());
        });
        hiddenInput.value = selectedOptions.join(', ');
        debugOutput.textContent = hiddenInput.value;
        
        // Обновляем поле формы Elementor, если оно существует
        if (elementorForm) {
            let elementorField = elementorForm.querySelector('input[name="form_fields[selected_services]"]');
            if (!elementorField) {
                elementorField = document.createElement('input');
                elementorField.type = 'hidden';
                elementorField.name = 'form_fields[selected_services]';
                elementorForm.appendChild(elementorField);
            }
            elementorField.value = selectedOptions.join(', ');
        }
    }

    // Обновляем значения при загрузке страницы
    updateSelectedServices();

    // Добавляем обработчик отправки формы
    if (elementorForm) {
        elementorForm.addEventListener('submit', function(e) {
            // Обновляем значения перед отправкой формы
            updateSelectedServices();
        });
    }
});
</script>






<p id="debug-selected-services"></p>