{% include 'partials/header.html.twig' %}

<div class="body-wrapper">

    <div class="container-fluid">

        <div class="card bg-primary-subtle shadow-none position-relative overflow-hidden mb-4">
            <div class="card-body px-4 py-3">
                <div class="row align-items-center">
                    <div class="col-9">
                        <h4 class="fw-semibold mb-8">Planning Hebdomadaire</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">

                <div class="container mt-4">
                    <div class="d-flex justify-content-between mb-3">
                        <button class="btn btn-secondary" id="prevWeek">◀ Semaine précédente</button>
                        <h4 id="weekRange"></h4>
                        <button class="btn btn-secondary" id="nextWeek">Semaine suivante ▶</button>
                    </div>
                    <table class="table table-bordered text-center">
                        <thead>
                            <tr id="weekDays"></tr>
                        </thead>
                        <tbody>
                            <tr id="weekEvents"></tr>
                            <tr id="weekValidation"></tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
  
    </div>

</div>

<script>


    document.addEventListener("DOMContentLoaded", function() {
        let currentDate = new Date();

        function loadWeek(date) {
            let startOfWeek = new Date(date);
            startOfWeek.setDate(startOfWeek.getDate() - startOfWeek.getDay() + 1); // Lundi
            let endOfWeek = new Date(startOfWeek);
            endOfWeek.setDate(endOfWeek.getDate() + 6); // Dimanche

            document.getElementById("weekRange").textContent = `Semaine du ${formatDate(startOfWeek)} au ${formatDate(endOfWeek)}`;

            let weekDaysHtml = "";
            let weekEventsHtml = "";
            let weekValidationHtml = "";

            for (let i = 0; i < 7; i++) {
                let day = new Date(startOfWeek);
                day.setDate(startOfWeek.getDate() + i);
                weekDaysHtml += `<th>${formatDay(day)}</th>`;
                weekEventsHtml += `<td id="day-${formatDate(day)}"></td>`;
                weekValidationHtml += `<td id="validate-${formatDate(day)}"></td>`;
            }

            document.getElementById("weekDays").innerHTML = weekDaysHtml;
            document.getElementById("weekEvents").innerHTML = weekEventsHtml;
            document.getElementById("weekValidation").innerHTML = weekValidationHtml;

            const url = `{{ path('profil_planning', { 'start': 'START_DATE', 'end': 'END_DATE' }) }}`;
            const formattedUrl = url.replace('START_DATE', encodeURIComponent(formatDate(startOfWeek)))
                                    .replace('END_DATE', encodeURIComponent(formatDate(endOfWeek)));

            fetch(formattedUrl)
                .then(response => {
                    if (!response.ok) {
                        throw new Error(`HTTP error! Status: ${response.status}`);
                    }
                    return response.json();
                })
                .then(data => {
                    if (!Array.isArray(data)) {
                        console.log('erreur');
                        throw new Error('Invalid data format: expected an array.');
                    }

                    data.forEach(event => {
                        if (event.start) {
                            let eventDate = event.date;
                            let eventCell = document.getElementById(`day-${eventDate}`);
                            let validateCell = document.getElementById(`validate-${eventDate}`);
                            if (eventCell) {
                                let badgeClass = event.valide ? 'bg-success' : 'bg-warning';
                                let eventHtml = `<span class="badge d-block w-100 h-100 text-center py-3 ${badgeClass}">${event.start} - ${event.end}</span>`;
                                if (event.valide) {
                                    
                                } else {
                                    if(event.type != 'travail'){
                                        eventHtml = `<span class="badge d-block w-100 h-100 text-center py-3 bg-dark">${event.offType}</span>`;
                                        eventCell.classList.add('bg-light', 'text-black');
                                    }
                                    else{
                                        validateCell.innerHTML = `<button class='btn btn-success' onclick="validateEvent(${event.id})">Valider</button>`;
                                    }
                                }
                                eventCell.innerHTML += eventHtml;
                            }
                        }
                    });
                })
                .catch(error => {
                    console.error('Error fetching planning data:', error);
                });

        }
        
        window.validateEvent = function(eventId) {
            console.log('validate');
            const url = `{{ path('planning_valide', { 'id': 'ID_EVENT' }) }}`;
            const formattedUrl = url.replace('ID_EVENT', eventId);
            fetch(formattedUrl, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ valide: true })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    loadWeek(currentDate); // Rafraîchir la semaine après validation
                }
            })
            .catch(error => console.error('Error validating event:', error));
        }

        function formatDate(date) {
            return date.toISOString().split('T')[0];
        }

        function formatDay(date) {
            const days = ["Dimanche", "Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi"];
            return `${days[date.getDay()]} ${date.getDate()}/${date.getMonth() + 1}`;
        }

        document.getElementById("prevWeek").addEventListener("click", function() {
            currentDate.setDate(currentDate.getDate() - 7);
            loadWeek(currentDate);
        });

        document.getElementById("nextWeek").addEventListener("click", function() {
            currentDate.setDate(currentDate.getDate() + 7);
            loadWeek(currentDate);
        });

        const urlParams = new URLSearchParams(window.location.search);
        const date = urlParams.get('date');

        // Vérifie que la date est bien au format YYYY-MM-DD
        if (date && /^\d{4}-\d{2}-\d{2}$/.test(date)) {
            console.log('date-ok');
        loadWeek(date); // Appelle ta fonction
        }else{
            loadWeek(currentDate);
        }

    });
</script>

{% include 'partials/footer.html.twig' %}