{% extends "base_frontoffice.html" %}

{% block content %}
    <style>
        .calendar th, .calendar td {
            width: 14.28%;
            text-align: center;
            vertical-align: top;
            cursor: pointer;
            padding: 5px;
        }
        .calendar .day-number {
            font-weight: bold;
        }
        .selected-date {
            background: #007bff;
            color: white;
            border-radius: 50%;
        }
    </style>


<div class="container">
    <h1 class="text-center mt-4">Calendrier des réservations</h1>
    <div class="calendar card mt-4">
        <div class="card-header d-flex justify-content-between align-items-center">
            <button id="prevMonth" class="btn btn-outline-primary btn-sm">&lt;</button>
            <h5 id="monthYear"></h5>
            <button id="nextMonth" class="btn btn-outline-primary btn-sm">&gt;</button>
        </div>
        <table class="table mb-0">
            <thead>
                <tr>
                    <th>Lun</th>
                    <th>Mar</th>
                    <th>Mer</th>
                    <th>Jeu</th>
                    <th>Ven</th>
                    <th>Sam</th>
                    <th>Dim</th>
                </tr>
            </thead>
            <tbody id="calendarBody"></tbody>
        </table>
    </div>
    <div id="selectedDate" class="text-center mt-3"></div>
</div>

<script>
    const monthNames = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
                        "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
    let currentDate = new Date();
    let selectedCell = null;

    function renderCalendar(date, reservations = {}) {
        const year = date.getFullYear();
        const month = date.getMonth();
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);
        const startDay = (firstDay.getDay() + 6) % 7;
        const daysInMonth = lastDay.getDate();

        document.getElementById('monthYear').textContent = `${monthNames[month]} ${year}`;

        const calendarBody = document.getElementById('calendarBody');
        calendarBody.innerHTML = '';

        let row = document.createElement('tr');
        for (let i = 0; i < startDay; i++) {
            row.appendChild(document.createElement('td'));
        }

        for (let day = 1; day <= daysInMonth; day++) {
            if ((startDay + day - 1) % 7 === 0 && day !== 1) {
                calendarBody.appendChild(row);
                row = document.createElement('tr');
            }

            const cell = document.createElement('td');
            cell.innerHTML = `<div class="day-number">${day}</div>
                              <div class="small text-muted bg-warning">${reservations[day] ? reservations[day] : ''}</div>`;
            cell.onclick = () => selectDate(day, month, year, cell);
            row.appendChild(cell);
        }
        calendarBody.appendChild(row);
    }

    function selectDate(day, month, year, cell) {
        console.log("MONTH: ",month);
        if (selectedCell) selectedCell.classList.remove('selected-date');
        cell.querySelector('.day-number').classList.add('selected-date');
        selectedCell = cell.querySelector('.day-number');
        document.getElementById('selectedDate').textContent =
            `Vous avez sélectionné le ${day} ${monthNames[month]} ${year}`;
            let baseUrl = window.location.protocol + "//" + window.location.host;
    window.location.href = `/reservation/filtre?year=${year}&month=${month+1}&day=${day}`;

    }

    async function loadReservations() {
        const year = currentDate.getFullYear();
        const month = currentDate.getMonth() + 1;
        let baseUrl = window.location.protocol + "//" + window.location.host;
        const response = await fetch(`${baseUrl}/api/reservations?month=${month}&year=${year}`);
        const data = await response.json();
        renderCalendar(currentDate, data);
    }

    document.getElementById('prevMonth').addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() - 1);
        loadReservations();
    });

    document.getElementById('nextMonth').addEventListener('click', () => {
        currentDate.setMonth(currentDate.getMonth() + 1);
        loadReservations();
    });

    loadReservations();
</script>
{% endblock %}