/**
 * CMSXL and Application User Interface Soft Touch Buttons.
 * Copyright (c) 2023 Anthony Albit. All rights reserved.
 *
 * For more information, please contact:
 * Email: anthony.albit@wayovermedia.com
 * Website: https://cmsxl.com
 *
 * Calendar types:
 *
 * Admin calendar:
 * Showing list of events: $noEvents = false,
 * generateCalendar(year, month, events, false, true);

 * Scheduling calendar:
 * Showing no events: $noEvents = true
 * generateCalendar(year, month, events, true, true);
 *
 * Booking calendar
 * Showing no events $noEvents = true
 * generateCalendar(year, month, events, true, false);
 *
 */
let calendarCabinet = null;

let newBooking = {}; // Объект для хранения данных
// Функция для обновления объекта newBooking
function updateBooking(key, value) {
    newBooking[key] = value;
    // console.log(`Обновлено: ${key} = ${value}`);
    // console.log(newBooking); // Выводим обновленный объект в консоль
}

// Функция для генерации календаря
function generateCalendar(year, month, events, cabinet = null, noEvents = true, duration = 30, calendarContainer = 'calendar-container') {
    if (!window.location.pathname.includes('/scp') &&
        !window.location.pathname.includes('/acp') &&
        !window.location.pathname.includes('/mcp')) {
        noEvents = true;
    }
    const daysInMonth = new Date(year, month, 0).getDate(); // Количество дней в месяце
    const firstDay = new Date(year, month - 1, 1).getDay(); // День недели для первого числа
    // console.log(cabinet);
    const today = new Date();
    const currentDay = today.getDate();
    const currentMonth = today.getMonth() + 1;
    const currentYear = today.getFullYear();

    let daysOff = []; // Дни, которые должны быть отключены
    if (cabinet && cabinet.days_off) {
        daysOff = cabinet.days_off;
    }

    let timeOpen = '1000-1700';
    if (cabinet && cabinet.time_open && cabinet.time_close) {
        timeOpen = cabinet.time_open + '-' + cabinet.time_close;
    }

    const formattedTimeZone = formatTimeZone(siteTimeZone);
    $('#qraway-booking-vendorzone').html(formattedTimeZone);

    let calendar = '';
    calendar += `<table class="calendar bottom no-highlights">`;

    // Генерация строки с днями недели
    calendar += '<tr>';
    let daysOfWeek = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
    daysOfWeek.forEach(day => {
        calendar += `<th><ul class="interface line"><li class="btn xl info disabled flat dark"><div><span>${day}</span></div></li></ul></th>`;
    });
    calendar += '</tr>';

    calendar += '<tr>';
    // Пустые ячейки до первого дня месяца
    for (let i = 0; i < (firstDay === 0 ? 6 : firstDay - 1); i++) {
        calendar += '<td><ul class="interface line"><li class="menu light xl disabled shade bg-transparent"></li></ul></td>';
    }

    // Генерация ячеек для дней месяца
    for (let day = 1; day <= daysInMonth; day++) {
        const dateKey = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}`;
        const dayOfWeek = new Date(year, month - 1, day).getDay(); // День недели для конкретного числа месяца
        const dayName = daysOfWeek[dayOfWeek === 0 ? 6 : dayOfWeek - 1]; // Получаем название дня недели

        // Считаем количество событий для текущего дня
        let dayEvents = events.filter(event => event.start_date === dateKey);
        let eventCount = dayEvents.length;

        // Добавляем класс "active", если есть события
        let activeClass;
        if (!noEvents) {
            activeClass = eventCount > 0 ? 'success calendar-event-count' : 'light calendar-event-new';
        }
        else {
            activeClass = 'light calendar-event-add';
        }

        // Проверка, является ли день выходным или относится к прошлым месяцам и годам
        let offDayClass = '';

        // Получаем формат даты в виде YYYYMMDD для сравнения с daysOff
        const formattedDate = `${year}${month.toString().padStart(2, '0')}${day.toString().padStart(2, '0')}`;

        // Условие проверки: выходные, даты, прошедшие месяцы и годы, или конкретные даты day off
        if (
            daysOff.includes(dayName) ||
            daysOff.includes(formattedDate) ||
            year < currentYear ||
            (year === currentYear && month < currentMonth) ||
            (year === currentYear && month === currentMonth && day < currentDay)
        ) {
            offDayClass = 'muted disabled'; // Класс, отключающий день
        }

        if ((firstDay + day - 2) % 7 === 0) {
            calendar += '</tr><tr>';
        }
        calendar += `<td><ul class="interface line"><li class="btn flip xl tarmac ${activeClass} ${offDayClass}" data-day="${day}" data-month="${month}" data-year="${year}" data-open="${timeOpen}"><div><span>${day}</span>`;

        // Показываем количество событий или оставляем пустым, если noEvents == false
        if (eventCount > 0 && !noEvents) {
            calendar += `<ins><i>${eventCount}</i></ins>`;
        }
        else {
            calendar += `<ins></ins>`; // Пустой ins, если событий нет или noEvents == true
        }
        calendar += '</div></li></ul></td>';
    }

    // Пустые ячейки в конце месяца, чтобы календарь занимал полный ряд
    const lastDayOfMonth = new Date(year, month - 1, daysInMonth).getDay(); // День недели для последнего числа месяца
    for (let i = lastDayOfMonth; i < 7 && lastDayOfMonth !== 0; i++) {
        calendar += '<td><ul class="interface line"><li class="menu light xl disabled shade bg-transparent"></li></ul></td>';
    }
    calendar += '</tr>';
    calendar += '</table>';
    calendar += '<div class="wheelscroll" id="calendar-time-container"></div>';
    calendar += generateCalendarHeader(year, month, noEvents, duration, calendarContainer); // Генерация заголовка с кнопками

    if (!noEvents) {
        calendar += '<div class="interface-holder flat-top" id="calendar-events"></div>';
    }

    $('#' + calendarContainer).html(calendar); // Вставляем сгенерированный календарь в DOM

    // Генерация блока событий или букинга
    let eventsActions;
    if (!noEvents) {
        eventsActions = '<div class="descriprion"><p>Click on a day or month to view a list of scheduled events.</p></div>';
    }
    else {
        const timeRow = generateTimeRow([], true, timeOpen); // Пустая строка времени
        $('#calendar-time-container').html(timeRow); // Вставляем строку времени в контейнер
        eventsActions = '<ul class="interface line"><li class="btn xs xl commmon disabled shade" id="acp-calendar-booking-button"><figure class="svg-icon svg-clone" data-icon="clock"></figure><div><span>Schedule</span><ins id="calendar-new-booking-time">Select date and time first</ins></div></li></ul>';
    }
    $('#calendar-events').html(eventsActions);
    Global.svg_replace();

    $('.wheelscroll').on('wheel', function (e) {
        e.preventDefault();
        let speed = 75;
        let ul = $(this).find('ul'); // Find the child <ul> element
        const scrollAmount = e.originalEvent.deltaY > 0 ? speed : (speed * -1); // Adjust the scroll speed here
        ul.scrollLeft(ul.scrollLeft() + scrollAmount);
    });
}

// Функция для генерации заголовка с кнопками
function generateCalendarHeader(year, month, noEvents, duration, calendarContainer) {
    const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    const currentMonthName = monthNames[month - 1];

    const today = new Date();
    const currentMonth = today.getMonth() + 1;
    const currentYear = today.getFullYear();

    let noEventsID = noEvents ? 'no-events' : '';
    let noEventsClass = noEvents ? 'disabled' : 'calendar-event-count';

    // Определяем, должна ли кнопка "Prev" быть неактивной
    let disablePrev = (year < currentYear || (year === currentYear && month <= currentMonth)) &&
                      !window.location.pathname.includes('/scp') &&
                      !window.location.pathname.includes('/acp') &&
                      !window.location.pathname.includes('/mcp');

    let header = `<table class="calendar top no-highlights ${noEventsID}" id="acp-calendar-app" data-container="${calendarContainer}" data-duration="${duration}"><tr><th><ul class="interface line">`;
    header += `<li class="btn boom dark flip dollar xl xs ${noEventsClass}" data-year="${year}" data-month="${month}"><figure class="svg-icon svg-clone" data-icon="calendar"></figure><div><span id="qraway-booking-selected">${currentMonthName}</span><ins id="qraway-booking-local">${year}</ins></div></li>`;
    header += `<li class="btn boom dark flip ${disablePrev ? 'common disabled shade' : 'dollar calendar-nav'}" id="calendar-prev" data-year="${year}" data-month="${month - 1}"><figure class="svg-icon svg-clone" data-icon="arrow-left"></figure></li>`; // Кнопка
    // "Предыдущий"
    header += `<li class="btn boom dark flip dollar calendar-nav" id="calendar-next" data-year="${year}" data-month="${month + 1}"><figure class="svg-icon svg-clone" data-icon="arrow-right"></figure></li>`; // Кнопка "Следующий"
    header += '</ul></th></tr></table>';
    return header;
}

// *********************************************************************

$(document).on('click', '#acp-calendar-booking-button', function () {
    let button = $(this);
    if (button.hasClass('disabled')) {
        return;
    }
    const email = $('#acp-join-emailzzz').val();
    const phone = $('#acp-join-phone').val();
    updateBooking('email', email);
    updateBooking('phone', phone);

    Global.spinner_slider('add', 'acp-join-spinner-holder-3');
    // AJAX-запрос для получения событий нового месяца
    let uploadURL = '/api/book';
    $.ajax({
        url:      uploadURL,
        method:   'post',
        data:     newBooking,
        dataType: 'json',
        success:  function (response) {
            if (response.errors) {
                response.errors.forEach(error => {
                    Errors.html(error);
                });
            }
            else {
                // console.log(response);
                $('#acp-calendar-booking-done-token').removeAttr('href').attr('href', response.booking.token);
                $('#acp-calendar-booking-done-date').text(response.booking.start_date + ' (' + response.booking.start_time + ' - ' + response.booking.end_time + ')');
                $('#acp-calendar-booking-done-title').text(response.booking.title);
                $('#acp-calendar-booking-done-email').text(email);
                $('#acp-calendar-booking-done-phone').text(phone);

                $('.acp-slide-button-next').first().trigger('click');
                Body.controlsItemOut(true);
            }
            Global.spinner_slider('remove', 'acp-join-spinner-holder-3');
        },
    });
});

$(document).on('click', '.acp-calendar-booking-card', function () {
    let button = $(this);
    $('.acp-calendar-booking-card').removeClass('acp-calendar-card-selected');
    button.addClass('acp-calendar-card-selected');
    calendarCabinet = button.data('cabinet');
    const card = button.data('card');
    const duration = button.data('duration');
    const price = button.data('price');
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth() + 1;

    // generateCalendar(year, month, events, false, duration, 'booking-calendar-holder');

    Body.fix();
    let menuOpen = $('#app-panel').hasClass('visible-important');
    if (!menuOpen) {
        // Body.controlsOut();
    }
    Body.controlsOverlayDo('calendar');
    Body.controlsOverlayIn();
    overover_overlay.show();
    overover_overlay.css('z-index', '9');
    app_panel_overlay.show();

    $('#dataOverlay').addClass('on');
    Global.spinner_overlay('append', 'body', cooldown, true);

    let uploadURL = '/api/calendar';
    // console.log(calendarCabinet);
    if (calendarCabinet) {
        uploadURL = uploadURL + '/' + calendarCabinet;
    }
    // AJAX-запрос для получения событий нового месяца
    $.ajax({
        url:      uploadURL, // Здесь укажи реальный путь
        method:   'GET',
        data:     {
            year:  year,
            month: month,
        },
        dataType: 'json',
        success:  function (newCalendar) {
            events = newCalendar.events;
            generateCalendar(year, month, events, newCalendar.cabinet, false, duration, 'booking-calendar-holder'); // Генерация нового календаря
            $('#acp-interface-calendar').show();
            Global.spinner_overlay('remove', 'body', cooldown, true);
            // Global.spinner_overlay('remove');
        },
    });
});

// Обработчик навигации по месяцам
$(document).on('click', '.calendar-nav', function (e) {
    e.preventDefault();
    let newYear = $(this).data('year');
    let newMonth = $(this).data('month');

    // Обрабатываем переходы между годами
    if (newMonth === 0) {
        newMonth = 12;
        newYear--;
    }
    else if (newMonth === 13) {
        newMonth = 1;
        newYear++;
    }

    const noEvents = $('#acp-calendar-app').hasClass('no-events');
    const calendarContainer = $('#acp-calendar-app').data('container');
    const duration = $('#acp-calendar-app').data('duration');

    Global.spinner_overlay('append', 'body', cooldown, true);

    let uploadURL;
    if (!window.location.pathname.includes('/scp') &&
        !window.location.pathname.includes('/acp') &&
        !window.location.pathname.includes('/mcp')) {
        uploadURL = '/api/calendar';
    }
    else {
        uploadURL = SUA + 'calendar';
    }
    // console.log(calendarCabinet);
    if (calendarCabinet) {
        uploadURL = uploadURL + '/' + calendarCabinet;
    }
    // AJAX-запрос для получения событий нового месяца
    $.ajax({
        url:      uploadURL, // Здесь укажи реальный путь
        method:   'GET',
        data:     {
            year:  newYear,
            month: newMonth,
        },
        dataType: 'json',
        success:  function (newCalendar) {
            events = newCalendar.events;
            generateCalendar(newYear, newMonth, events, newCalendar.cabinet, noEvents, duration, calendarContainer); // Генерация нового календаря
            Global.spinner_overlay('remove', 'body', cooldown, true);
        },
    });
});

// *********************************************************************

// Обработчик клика на "calendar-event-count"
$(document).on('click', '.calendar-event-count', function () {
    $('.calendar-event-new').addClass('tarmac').removeClass('dollar');
    $('.calendar-event-count').addClass('tarmac').removeClass('dollar');
    $(this).removeClass('tarmac').addClass('dollar');
    const day = $(this).data('day');
    const month = $(this).data('month');
    const year = $(this).data('year');

    showEvents(day, month, year); // Вызываем функцию для отображения событий
});

// Обработчик клика на "calendar-event-new"
$(document).on('click', '.calendar-event-new', function () {
    $('.calendar-event-count').addClass('tarmac').removeClass('dollar');
    $('.calendar-event-new').addClass('tarmac').removeClass('dollar');
    $(this).removeClass('tarmac').addClass('dollar');
    const day = $(this).data('day');
    const month = $(this).data('month');
    const year = $(this).data('year');

    showEvents(day, month, year); // Вызываем функцию для отображения событий
});

// Функция для отображения событий на выбранный день с использованием шаблонов
function showEvents(day, month, year) {
    // pp(day, month, year);
    // Форматируем день и месяц в строку нужного формата "YYYYMMDD"
    const formattedDay = day ? `${year}${String(month).padStart(2, '0')}${String(day).padStart(2, '0')}` : null;
    const formattedMonth = `${year}${String(month).padStart(2, '0')}`;

    // Фильтруем события для указанного дня или месяца
    const filteredEvents = events.filter(event => {
        return formattedDay ? event.start_date === formattedDay : event.start_date.startsWith(formattedMonth);
    });
    // pp(filteredEvents);
    // Получаем шаблоны для списка событий и элемента события
    const eventAddTemplate = document.getElementById('event-add-template').innerHTML;
    const eventListTemplate = document.getElementById('event-list-template').innerHTML;
    const eventHeaderTemplate = document.getElementById('event-header-template').innerHTML;
    const eventItemTemplate = document.getElementById('event-item-template').innerHTML;
    const noEventsTemplate = document.getElementById('no-events-template').innerHTML;

    let eventAddHtml = ''; // Переменная для хранения кнопки добавления
    let eventListHtml = ''; // Переменная для хранения списка событий
    let eventHeaderHtml = ''; // Переменная для хранения заголовка
    let finalHtml = ''; // Переменная для хранения финального HTML

    // Если есть события, создаем элементы событий
    if (filteredEvents.length > 0) {
        filteredEvents.forEach(event => {
            const startTime = event.start_time.replace(/(\d{2})(\d{2})/, '$1:$2');
            const endTime = event.end_time.replace(/(\d{2})(\d{2})/, '$1:$2');

            // Получаем год события
            const eventYear = event.start_date.substring(0, 4);
            const eventMonth = event.start_date.substring(4, 6);
            const eventDay = event.start_date.substring(6, 8);

            const url = SUA + 'events/' + event.id;
            // Заполняем шаблон события данными
            let eventHtml = eventItemTemplate;
            eventHtml = eventHtml.replace(/{{url}}/g, url);
            eventHtml = eventHtml.replace(/{{title}}/g, event.title);
            eventHtml = eventHtml.replace(/{{time}}/g, `${startTime} – ${endTime}`);

            eventListHtml += eventHtml; // Добавляем событие в общий список
        });

        // Если день выбран, форматируем дату события как "September 07", если нет, только месяц "September"
        let headerDate = day
            ? new Date(year, month - 1, day).toLocaleDateString('en-US', {month: 'long', day: '2-digit'})
            : new Date(year, month - 1).toLocaleDateString('en-US', {month: 'long'});

        // Заполняем шаблон заголовка
        eventHeaderHtml = eventHeaderTemplate;
        eventHeaderHtml = eventHeaderHtml.replace(/{{eventDate}}/g, headerDate);
        eventHeaderHtml = eventHeaderHtml.replace(/{{eventYear}}/g, year);

        if (typeof day !== 'number') {
            const today = new Date();
            const currentDay = today.getDate();
            headerDate = new Date(year, month - 1, currentDay).toLocaleDateString('en-US', {month: 'long', day: '2-digit'});
        }
        // Заполняем кнопку добавления.
        eventAddHtml = eventAddTemplate;
        eventAddHtml = eventAddHtml.replace(/{{eventDate}}/g, headerDate + ', ' + year);

        // Вставляем события в общий шаблон списка
        finalHtml = eventListTemplate;
        finalHtml = finalHtml.replace(/{{eventHeader}}/g, eventHeaderHtml);
        finalHtml = finalHtml.replace(/{{eventList}}/g, eventListHtml);
        finalHtml = finalHtml.replace(/{{eventAdd}}/g, eventAddHtml);
    }
    else {
        const headerDate = new Date(year, month - 1, day).toLocaleDateString('en-US', {month: 'long', day: '2-digit'});
        // Заполняем кнопку добавления.
        eventAddHtml = eventAddTemplate;
        eventAddHtml = eventAddHtml.replace(/{{eventDate}}/g, headerDate + ', ' + year);

        // Если событий нет, показываем шаблон "No events"
        finalHtml = noEventsTemplate;
        finalHtml = finalHtml.replace(/{{eventAdd}}/g, eventAddHtml);
    }
    // pp(finalHtml);
    // Обновляем HTML-контент
    $('#calendar-events').html(finalHtml);
    Global.svg_replace();
}


// *********************************************************************

// Обработчик для "calendar-event-add" (отображение таймлайна)
$(document).on('click', '.calendar-event-add', function (e) {
    if ($(this).hasClass('disabled')) {
        return;
    }
    // $('#calendar-new-booking-time').text('Select date and time first');
    // $('#acp-calendar-booking-button').addClass('disabled shade').removeClass('success');
    $('#qraway-date-button').addClass('common disabled').removeClass('dollar');

    $('.calendar-event-add').addClass('light tarmac').removeClass('dollar acp-calendar-booking-date');
    $(this).addClass('dollar acp-calendar-booking-date').removeClass('light tarmac');
    const day = $(this).data('day').toString().padStart(2, '0');
    const month = $(this).data('month').toString().padStart(2, '0');
    const year = $(this).data('year').toString();
    const timeOpen = $(this).data('open').toString();

    updateBooking('day', day);
    updateBooking('month', month);
    updateBooking('year', year);

    const selectedDate = `${year}${month}${day}`; // Формируем дату в формате YYYYMMDD

    // Получаем события для выбранного дня
    const dayEvents = getDayEvents(selectedDate);

    // Генерируем строку времени
    const timeRow = generateTimeRow(dayEvents, false, timeOpen);
    $('#calendar-time-container').html(timeRow); // Вставляем строку времени в контейнер
});

// Функция для получения событий на выбранный день
function getDayEvents(selectedDate) {
    return events.filter(event => {
        // Сравниваем дату события с выбранной датой
        return event.start_date === selectedDate;
    });
}

// Функция для генерации строки времени с учётом длительности
function generateTimeRow(events, empty = false, timeRange = '0800-2030') {
    let duration = $('#acp-calendar-app').data('duration') || 30;
    // pp(duration);
    // Разбиваем строку диапазона на начало и конец
    const [startTime, endTime] = timeRange.split('-');
    let timeSlots = ''; // Переменная для хранения всех слотов времени
    let hours = [
        '0700', '0730', '0800', '0830', '0900', '0930', '1000', '1030',
        '1100', '1130', '1200', '1230', '1300', '1330', '1400', '1430',
        '1500', '1530', '1600', '1630', '1700', '1730', '1800', '1830',
        '1900', '1930', '2000', '2030', '2100', '2130', '2200', '2230',
    ];

    hours.forEach((hour, index) => {
        // Проверяем, входит ли текущий час в диапазон времени
        if (hour >= startTime && hour <= endTime) {
            // Определяем, занято ли время
            let isTaken = isTimeTaken(events, hour);

            // Проверяем, хватает ли свободного времени до конца диапазона или следующего занятого слота
            let activeClass = 'cream'; // Свободный слот

            if (empty) {
                activeClass = 'light disabled shade empty-date-slot'; // Пустой слот
            }
            else if (isTaken) {
                activeClass = 'light disabled shade'; // Занятый слот
            }
            else if (!isEnoughTimeAvailable(hours, index, events, duration) || !fitsWithinEndTime(hour, endTime, duration)) {
                activeClass = 'light disabled shade'; // Недостаточно времени для выбранной длительности
            }


            // Форматируем время
            let formattedTime = `${hour.slice(0, 2)}:${hour.slice(2)}`;
            // Формируем данные для передачи в шаблон
            const slotData = {
                'activeClass':   activeClass,
                'hour':          hour,
                'formattedTime': formattedTime,
            };

            // Используем view для заполнения шаблона
            timeSlots += view('time-slot-template', slotData); // Добавляем слот в общий список
        }
    });

    // Вставляем слоты в общий шаблон строки времени
    return view('time-row-template', {timeSlots: timeSlots}); // Возвращаем сгенерированную строку времени
}

// Обновлённая функция для проверки, укладывается ли duration до endTime
function fitsWithinEndTime(startTime, endTime, duration) {
    const startMinutes = timeToMinutes(startTime);
    const endMinutes = timeToMinutes(endTime) + 30;

    // Вычисляем максимальное возможное время начала события
    const latestStartTime = endMinutes - duration;

    return startMinutes <= latestStartTime;
}

// Вспомогательная функция для преобразования времени в минуты (например, '1830' -> 1110 минут)
function timeToMinutes(time) {
    const hours = parseInt(time.slice(0, 2), 10);
    const minutes = parseInt(time.slice(2), 10);
    return hours * 60 + minutes;
}

// Функция для проверки, достаточно ли времени для выбранной длительности
function isEnoughTimeAvailable(hours, startIndex, events, duration) {
    const requiredSlots = duration / 30; // Количество слотов, необходимых для данной длительности

    for (let i = 0; i < requiredSlots; i++) {
        const currentSlot = hours[startIndex + i];
        if (!currentSlot || isTimeTaken(events, currentSlot)) {
            return false; // Нет достаточного количества свободных слотов
        }
    }
    return true; // Достаточно свободного времени
}

// Функция для проверки, занято ли время (в диапазоне полчаса)
function isTimeTaken(events, hourSlot) {
    // Пробегаем по событиям и проверяем, попадает ли событие в данный слот
    return events.some(event => {
        const startSlot = parseInt(event.start_time, 10); // Время начала события
        const endSlot = parseInt(event.end_time, 10); // Время окончания события

        // Время считается занятым, если оно попадает в диапазон слота (полчаса)
        return startSlot <= hourSlot && endSlot > hourSlot;
    });
}

// *********************************************************************

// Обработчик кликов по временным слотам
$(document).on('click', '.calendar-time-slot', function (e) {
    if ($(this).hasClass('empty-date-slot')) {
        Errors.html('Please select the date first.', 'Error', 'common', 'bug');
        return;
    }

    if ($(this).hasClass('disabled')) {
        Errors.html('This slot is taken. Selection is not possible.', 'Sorry', 'common');
        return;
    }

    updateBooking('time', $(this).data('time'));

    // Снимаем выделение со всех временных слотов
    $('.calendar-time-slot').removeClass('primary acp-calendar-booking-time').addClass('cream');
    // Выделяем только текущий слот
    $(this).addClass('primary acp-calendar-booking-time').removeClass('cream');

    updateSelectedTime(true); // Обновляем отображение времени
});


// Функция для обновления текста с выбранной датой и временем
function updateSelectedTime() {
    const selectedSlot = $('.acp-calendar-booking-time').first();

    if (selectedSlot.length > 0) {
        let startTime = String(selectedSlot.data('time'));
        startTime = `${startTime.slice(0, 2)}:${startTime.slice(2)}`;

        const selectedDay = $('.acp-calendar-booking-date').data('day');
        const selectedMonth = $('.acp-calendar-booking-date').data('month');
        const selectedYear = $('.acp-calendar-booking-date').data('year');

        const formattedDate = `${getMonthName(selectedMonth)} ${selectedDay}, ${selectedYear}`;
        const displayText = `${formattedDate}, ${startTime}`;

        const result = convertTimeToUserZone(selectedYear, selectedMonth, selectedDay, startTime, siteTimeZone);
        $('#qraway-booking-selected').text(result.siteTime);
        $('#qraway-booking-local').text("Your local time");
        $('#qraway-date-button').removeClass('common disabled').addClass('dollar');
    }
}

function formatTimeZone(timeZone) {
    const now = new Date();

    // Создаем объект в нужной временной зоне
    const options = {
        timeZone,
        timeZoneName: 'long',
    };

    // Форматируем имя временной зоны
    const timeZoneName = new Intl.DateTimeFormat('en-US', options).formatToParts(now).find(part => part.type === 'timeZoneName').value;

    // Вычисляем смещение
    const formatter = new Intl.DateTimeFormat('en-US', {
        timeZone,
        hour:   'numeric',
        hour12: false,
    });

    const utcFormatter = new Intl.DateTimeFormat('en-US', {
        timeZone: 'UTC',
        hour:     'numeric',
        hour12:   false,
    });

    // Получаем часы в зоне и UTC
    const timeZoneHour = parseInt(formatter.format(now), 10);
    const utcHour = parseInt(utcFormatter.format(now), 10);

    // Рассчитываем смещение
    let offset = timeZoneHour - utcHour;

    // Учитываем переход через границу дня
    if (offset < -12) {
        offset += 24;
    }
    if (offset > 12) {
        offset -= 24;
    }

    // Преобразуем смещение в строку UTC±N
    const utcOffset = `UTC${offset >= 0 ? '+' : ''}${offset}`;

    // Возвращаем результат
    return `${timeZoneName} <b>(${utcOffset})</b>`;
}

function convertTimeToUserZone(year, month, day, time, siteTimeZone) {
    const [hours, minutes] = time.split(':').map(Number);

    // Создаём дату с временной зоной сайта
    const siteDateTime = new Date(`${year}-${String(month).padStart(2, '0')}-${String(day).padStart(2, '0')}T${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:00`);

    // Определяем временную зону пользователя
    const userTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    // Форматируем в 24-часовом формате (военный формат)
    const siteTime = new Intl.DateTimeFormat('en-US', {
        timeZone: siteTimeZone,
        hour:     '2-digit',
        minute:   '2-digit',
        hour12:   false,
        month:    'long',
        day:      '2-digit',
    }).format(siteDateTime);

    const userTime = new Intl.DateTimeFormat('en-US', {
        timeZone: userTimeZone,
        hour:     '2-digit',
        minute:   '2-digit',
        hour12:   false,
        month:    'long',
        day:      '2-digit',
    }).format(siteDateTime);

    return {siteTime, userTime};
}


// Вспомогательная функция для получения названия месяца
function getMonthName(month) {
    const monthNames = [
        'January', 'February', 'March', 'April', 'May', 'June',
        'July', 'August', 'September', 'October', 'November', 'December',
    ];
    return monthNames[month - 1];
}