document.addEventListener('DOMContentLoaded', function() {
    const jsonUrl = 'https://datorhjalp.se/openstatus/json'; // Ange rätt URL till ditt skript
    const color = "yellow"; // Standardfärgen är gul
    fetchAndDisplayOpenTimes(jsonUrl, color);
});

function fetchAndDisplayOpenTimes(jsonUrl, highlightColor) {
    fetch(jsonUrl)
    .then(response => response.json())
    .then(data => createGrid(data, highlightColor))
    .catch(error => {
        console.error('Det gick inte att hämta öppettider:', error);
        const container = document.getElementById('openTimesTableContainer11');
        container.innerHTML = '<p>Fel vid laddning av öppettider.</p>';
        container.style.textAlign = 'center';
    });
}

function createGrid(data, highlightColor) {
    const container = document.getElementById('openTimesTableContainer11');
    container.innerHTML = ''; // Rensa tidigare innehåll om någon finns

    // Skapa en grid container
    const grid = document.createElement('div');
    grid.style.display = 'grid';
    grid.style.gridTemplateColumns = 'repeat(3, 1fr)'; // Tre kolumner
    grid.style.gap = '0px';
    grid.style.marginTop = '0px';

    // Lägg till en rubrik för varje kolumn
    const headers = ['Veckodag', 'Öppnar', 'Stänger'];
    headers.forEach(header => {
        const headerDiv = document.createElement('div');
        headerDiv.textContent = header;
        headerDiv.style.fontWeight = 'bold';
        headerDiv.style.padding = '0px';
        grid.appendChild(headerDiv);
    });

    // Lägg till innehåll i varje cell
    const veckodagar = ["Måndag", "Tisdag", "Onsdag", "Torsdag", "Fredag", "Lördag", "Söndag"];
    const dagensIndex = (new Date().getDay() + 6) % 7; // Justerar så att Söndag blir 6, Måndag blir 0, osv.

    data.forEach((item, index) => {
        const dayDiv = document.createElement('div');
        const openDiv = document.createElement('div');
        const closeDiv = document.createElement('div');

        // Markera aktuell veckodag
        if (index === dagensIndex) {
            dayDiv.style.backgroundColor = highlightColor;
            openDiv.style.backgroundColor = highlightColor;
            closeDiv.style.backgroundColor = highlightColor;
            if (highlightColor === 'black') {
                dayDiv.style.color = 'white';
                openDiv.style.color = 'white';
                closeDiv.style.color = 'white';
            }
        }

        dayDiv.textContent = veckodagar[item.DayNo];
        openDiv.textContent = item.OpenTime == 0 && item.CloseTime == 0 ? 'Stängt' : item.OpenTime + ":00";
        closeDiv.textContent = item.OpenTime == 0 && item.CloseTime == 0 ? '' : item.CloseTime + ":00";

        dayDiv.style.padding = '2px';
        openDiv.style.padding = '2px';
        closeDiv.style.padding = '2px';

        grid.appendChild(dayDiv);
        grid.appendChild(openDiv);
        grid.appendChild(closeDiv);
    });
    container.appendChild(grid);
}