{# Début du formulaire #}
<div class="flex justify-center">
    {{ form_start(form) }}

    <div id="calendar" class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"></div>

    <input type="hidden" id="planning_startDate" name="planning[startDate]" value="">
    <input type="hidden" id="planning_endDate" name="planning[endDate]" value="">

    <div id="selectedDates" class="mt-4"></div>

    <div id="step2" style="display: none;">
        <h2 id="step2Title" class="text-xl font-bold text-center m-2">Étape 2: Configuration du planning</h2>

        {# Tableau pour configurer les jours sélectionnés #}
        <div id="dayWorksContainer">
            <table id="dayWorksTable" class="min-w-full bg-white">
                <thead>
                    <tr>
                        <th class="py-2">Jour</th>
                        <th class="py-2">Configuration</th>
                    </tr>
                </thead>
                <tbody id="dayWorksList" data-prototype="{{ include('day_work/_form.html.twig', {'form': form.dayWorks.vars.prototype}) | e('html_attr') }}"></tbody>
            </table>
        </div>

        <div class="flex justify-center">
            <button type="button" id="prevStep2" class="bg-blue-400 rounded shadow py-2 px-2 m-4 hover:bg-blue-500" title="Page précédente"><i class="fa-solid fa-arrow-left"></i> Précédent</button>
            <button type="button" id="nextStep2" class="bg-blue-400 rounded shadow py-2 px-2 m-4 hover:bg-blue-500" title="Page suivante">Suivant <i class="fa-solid fa-arrow-right"></i></button>
        </div>
    </div>

    <div id="step3" style="display: none;">
        <h2 class="text-xl font-bold text-center m-4">Récapitulatif</h2>
        <p class="text-center font-lg">Date de début sélectionnée: <span id="startDateDisplay" class="font-bold"></span></p>
        <p class="text-center font-lg">Date de fin sélectionnée: <span id="endDateDisplay" class="font-bold"></span></p>

        <div class="flex justify-center">
            <button type="button" id="prevStep3" class="bg-blue-400 rounded shadow py-2 px-2 m-4 hover:bg-blue-500" title="Page précédente"><i class="fa-solid fa-arrow-left"></i> Précédent</button>
            <button type="submit" class="bg-teal-400 rounded shadow py-2 px-2 m-4 hover:bg-teal-500" title="Créer"><i class="fa-solid fa-check-to-slot"></i> Créer</button>
        </div>
    </div>

    {{ form_end(form) }}
</div>

{# Fin du formulaire #}

{# Inclure jQuery et FullCalendar #}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@5.10.1/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@5.10.1/main.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.10.1/main.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.10.1/main.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@5.10.1/main.min.css" rel="stylesheet">

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'timeGridWeek',
        selectable: true,
        allDaySlot: false,
        selectOverlap: false,
        businessHours: {
            startTime: '06:00', // Start time for selectable hours
            endTime: '22:00', // End time for selectable hours
        },
        select: function(info) {
            if (!$('#planning_startDate').val()) {
                // Set start date and time
                var startDate = new Date(info.start);
                $('#planning_startDate').val(startDate.toISOString());
                $('#startDateDisplay').text(startDate.toLocaleString('fr-FR', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }));

                // Add selected date to the list
                addSelectedDateButton(startDate, 'start');

                alert('Sélectionnez maintenant la date et l\'heure de fin.');
            } else {
                // Set end date and time
                var endDate = new Date(info.end);
                var startDate = new Date($('#planning_startDate').val());
                if (endDate <= startDate) {
                    alert('La date de fin doit être ultérieure à la date de début.');
                    return;
                }
                $('#planning_endDate').val(endDate.toISOString());
                $('#endDateDisplay').text(endDate.toLocaleString('fr-FR', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }));

                // Add selected date to the list
                addSelectedDateButton(endDate, 'end');

                // Move to step 2
                $('#step1').hide();
                $('#step2').show();
                updateDayWorksList(startDate, endDate);
            }
            calendar.unselect();
        }
    });
    calendar.render();

    $('#prevStep2').click(function() {
        $('#step2').hide();
        $('#step1').show();
    });

    $('#nextStep2').click(function() {
        $('#step2').hide();
        $('#step3').show();
    });

    $('#prevStep3').click(function() {
        $('#step3').hide();
        $('#step2').show();
    });

    // Function to update the day works list
    function updateDayWorksList(startDate, endDate) {
        var daysDifference = Math.round((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1; // Include end date

        var dayWorksList = $('#dayWorksList');
        dayWorksList.empty();
        for (var i = 0; i < daysDifference; i++) {
            var day = new Date(startDate);
            day.setDate(startDate.getDate() + i);
            var formattedDate = day.toLocaleDateString('fr-FR', { year: 'numeric', month: '2-digit', day: '2-digit' });
            var prototype = dayWorksList.attr('data-prototype').replace(/__name__/g, i);
            var dayWorkHtml = '<tr><td class="py-2">' + formattedDate + '</td><td>' + prototype + '</td></tr>';
            dayWorksList.append(dayWorkHtml);

            // Set date value
            var dateInput = dayWorksList.children('tr:last-child').find('input[type="date"]');
            dateInput.val(day.toISOString().split("T")[0]);
        }
    }

    // Function to add a selected date button
    function addSelectedDateButton(date, type) {
        var selectedDatesContainer = $('#selectedDates');
        var formattedDate = date.toLocaleDateString('fr-FR', { year: 'numeric', month: '2-digit', day: '2-digit' });

        var buttonHtml = '<button type="button" class="bg-gray-200 text-gray-800 font-semibold py-2 px-4 border border-gray-400 rounded shadow m-2">' + formattedDate + ' (' + (type === 'start' ? 'Début' : 'Fin') + ')</button>';
        selectedDatesContainer.append(buttonHtml);
    }
});
</script>