<!DOCTYPE html>
<html>
<head>
    <title>Weekly Slots</title>

    <style>
        #weekDays {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .day-box {
            padding: 10px;
            border: 1px solid #ccc;
            min-width: 140px;
            border-radius: 6px;
            text-align: center;
        }

        .slot {
            padding: 6px;
            margin-bottom: 6px;
            border-radius: 4px;
            font-size: 13px;
            color: #fff;
        }

        .available { background: red; }
        .booked { background: green; }
        .unavailable { background: black; }

        .no-slots {
            color: #999;
            font-size: 13px;
        }
    </style>
</head>
<body>

<div>
    <button id="prevWeekBtn">&lt; Prev</button>
    <strong id="weekRange" style="margin: 0 15px;"></strong>
    <button id="nextWeekBtn">Next &gt;</button>
</div>

<div id="weekDays"></div>

<script>
let currentWeekStart = null;

function fetchWeek(startDate = null) {
    let url = '/week';
    if (startDate) url += '?start_date=' + startDate;

    fetch(url)
        .then(res => res.json())
        .then(data => {
            console.log(data)
            currentWeekStart = data.week_start;

            // Week range
            document.getElementById('weekRange').innerText =
                `${data.formated_rang}`;

            const weekDaysDiv = document.getElementById('weekDays');
            weekDaysDiv.innerHTML = '';

            Object.entries(data.dates).forEach(([date, slots]) => {

                const dayDiv = document.createElement('div');
                dayDiv.className = 'day-box';

                const weekdayName = new Date(date)
                    .toLocaleDateString('en-US', { weekday: 'short' });

                let html = `<strong>${weekdayName}</strong><br><small>${date}</small><hr>`;

                if (slots.length) {
                    slots.forEach(slot => {
                        if(slot.status=="available")
                    {

                        html += `<div class="slot ${slot.status}">
                            <a href="" >${slot.start_time}</a>
                            </div>`;
                    }else{
                        html += `<div class="slot ${slot.status}">${slot.start_time}</div>`;
                        
                    }       
                    });
                } else {
                    html += `<div class="no-slots">No slots</div>`;
                }

                dayDiv.innerHTML = html;
                weekDaysDiv.appendChild(dayDiv);
            });

            // Buttons
            document.getElementById('prevWeekBtn').dataset.start = data.prev_week_start;
            document.getElementById('nextWeekBtn').dataset.start = data.next_week_start;

            document.getElementById('prevWeekBtn').onclick = function() {
                fetchWeek(this.dataset.start);
            };
            document.getElementById('nextWeekBtn').onclick = function() {
                fetchWeek(this.dataset.start);
            };
        });
}

// Initial load
fetchWeek();
</script>

</body>
</html>
