const locations = ['Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile'];
const days = ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

function generateDayTable(day, events) {
    let table = `<table id="${day}" class="day-table"><tr><th>Time</th>`;

    for (let location of locations) {
        table += `<th>${location}</th>`;
    }

    table += '</tr>';

    for (let hour = 10; hour <= 20; hour += 2) {
        table += '<tr><td>' + (hour < 10 ? '0' + hour : hour) + ':00' + '</td>';
        for (let location of locations) {
            // Check if there is an event at this location and time
            let event = events[day] && events[day][hour] && events[day][hour][location] ? events[day][hour][location] : '';
            table += '<td>';
            if (event) {
                table += `<button class="event-button" data-day="${day}" data-hour="${hour}" data-location="${location}">${event.event}</button>`;
            }
            table += '</td>';
        }
        table += '</tr>';
    }

    table += '</table>';

    return table;
}

// Doing the overlay shit
function showDescription(day, hour, location) {
    
    let event = eventData[day][hour][location];
    let description = event.description;

    let overlay = document.getElementById('overlay');
    overlay.style.display = 'block';

    let content = document.createElement('div');
    content.id = 'overlay-content';

    let descriptionElement = document.createElement('p');
    descriptionElement.innerText = description;

    let closeButton = document.createElement('button');
    closeButton.innerText = 'Close';
    closeButton.addEventListener('click', hideOverlay);

    content.appendChild(descriptionElement);
    content.appendChild(closeButton);
    overlay.appendChild(content);
}


function hideOverlay() {
    let overlay = document.getElementById('overlay');
    overlay.style.display = 'none';
    overlay.innerHTML = '';
}

document.addEventListener('DOMContentLoaded', (event) => {
    let tablesContainer = document.getElementById('tables-container');
    for (let day of days) {
        tablesContainer.innerHTML += generateDayTable(day, eventData);
    }

    let slider = document.getElementById('slider');
    let sliderDay = document.getElementById('slider-day');

    slider.addEventListener('input', (event) => {
        for (let day of days) {
            document.getElementById(day).style.display = 'none';
        }

        document.getElementById(days[event.target.value]).style.display = 'table';


        sliderDay.innerText = days[event.target.value];
    });


    tablesContainer.addEventListener('click', (event) => {
        if (event.target.matches('.event-button')) {
            let day = event.target.getAttribute('data-day');
            let hour = event.target.getAttribute('data-hour');
            let location = event.target.getAttribute('data-location');
            showDescription(day, hour, location);
        }
    });

    // show the first table initially
    slider.dispatchEvent(new Event('input'));
});