Узнать и влюбиться в Японию за неделю: древние храмы, бамбуковый лес и прекрасные сады

// Константы для настройки
const CONFIG = {
    MAX_DATES: 15,        // Максимальное количество отображаемых дат
    PERIOD_LENGTH: 5,     // Длина периода в днях (можно изменить на 5, 6 или 7 5)
    DEFAULT_PLACEHOLDER: 'Выбрать дату' // Текст плейсхолдера
};

// Проверка доступности слота
function isSlotAvailable(slot) {
    if (!slot) return false;
    if (slot.available_persons === undefined) return true;
    return slot.available_persons > 0 || 
           (slot.booked_persons !== undefined && slot.booked_persons === 0);
}

// Форматирование периода в стиле "16—20 мая (пт—вт)"
function formatDatePeriod(startDateStr) {
    const startDate = new Date(startDateStr);
    const endDate = new Date(startDate);
    endDate.setDate(startDate.getDate() + (CONFIG.PERIOD_LENGTH - 1));
    
    const months = ['янв', 'фев', 'мар', 'апр', 'мая', 'июн', 'июл', 'авг', 'сен', 'окт', 'ноя', 'дек'];
    const days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];
    
    const startDay = startDate.getDate();
    const endDay = endDate.getDate();
    const startMonth = months[startDate.getMonth()];
    const endMonth = months[endDate.getMonth()];
    const startDayName = days[startDate.getDay()];
    const endDayName = days[endDate.getDay()];
    
    if (startMonth === endMonth) {
        return `${startDay}—${endDay} ${startMonth} (${startDayName}—${endDayName})`;
    } else {
        return `${startDay} ${startMonth}—${endDay} ${endMonth} (${startDayName}—${endDayName})`;
    }
}

// Основная функция обновления селектора дат
async function updateDateSelector(experienceId) {
    try {
        console.log(`Обновление селектора дат для ID: ${experienceId}`);
        
        // Находим все формы с селектором дат
        const forms = document.querySelectorAll('form.brxe-form');
        console.log(`Найдено форм: ${forms.length}`);
        
        if (!forms.length) return;

        // Получаем данные расписания
        const response = await fetch(`https://experience.tripster.ru/api/partners/s7/experiences/${experienceId}/schedule/`);
        const data = await response.json();
        
        console.log('Данные расписания получены');

        if (!data || !data.schedule) {
            console.log('Нет данных расписания');
            return;
        }

        // Обрабатываем каждую форму
        forms.forEach((form, formIndex) => {
            const dateSelect = form.querySelector('select[name="date"]');
            console.log(`Форма ${formIndex + 1}: селектор найден: ${dateSelect ? 'Да' : 'Нет'}`);
            
            if (!dateSelect) return;

            // Очищаем текущие опции, оставляя placeholder
            const placeholder = dateSelect.querySelector('option[value=""]');
            dateSelect.innerHTML = '';
            if (placeholder) {
                dateSelect.appendChild(placeholder);
            }

            // Получаем доступные даты
            const dates = Object.keys(data.schedule).sort();
            const availableDates = [];
            
            for (const date of dates) {
                const slot = data.schedule[date][0];
                if (isSlotAvailable(slot)) {
                    availableDates.push(date);
                }
            }
            
            console.log(`Доступных дат: ${availableDates.length}`);
            
            if (availableDates.length === 0) {
                console.log('Нет доступных дат');
                return;
            }

            // Ограничиваем количество дат
            const limitedDates = availableDates.slice(0, CONFIG.MAX_DATES);
            
            // Добавляем даты с периодами в селектор
            for (const date of limitedDates) {
                const formattedDate = formatDatePeriod(date);
                
                const option = document.createElement('option');
                option.value = formattedDate;
                option.textContent = formattedDate;
                dateSelect.appendChild(option);
            }
            
            console.log(`Добавлено дат в селектор: ${limitedDates.length}`);
        });

    } catch (error) {
        console.error('Ошибка при обновлении селектора дат:', error);
    }
}

// Функция инициализации
function initDateSelector() {
    console.log('Инициализация селектора дат');
    
    // Находим ID события из ACF поля
    const experienceIdElement = document.querySelector('[data-id-event]');
    console.log(`Элемент с data-id-event найден: ${experienceIdElement ? 'Да' : 'Нет'}`);
    
    if (!experienceIdElement) return;

    const experienceId = experienceIdElement.getAttribute('data-id-event');
    console.log(`ID события: ${experienceId}`);
    
    if (!experienceId) return;

    // Обновляем селектор дат
    updateDateSelector(experienceId);
}

// Запускаем инициализацию при загрузке страницы
document.addEventListener('DOMContentLoaded', initDateSelector);