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

<div class="body-wrapper">

  <div class="container-fluid">

    <style>
    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 0em !important;
    }
    .app-calendar .fc-daygrid-day-top:hover{
        cursor: pointer;
    }

    #calendar-sidebar{
        height:75%;
    }

    #sidebar{
        height:100%;
    }
    </style>

    <!-- Modal -->
    <div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalEventTitle">Détails du relevé</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h3 id="titreRelevé"></h3>
                    <p><strong>Date:</strong> <span id="modalEventDate"></span></p>
                    <p><strong>Etat de l'eau:</strong> <span id="modalEventEtatEau"></span></p>
                    <p><strong>Température extérieure:</strong> <span id="modalEventTempExterieure"></span></p>
                    <p><strong>Température de l'eau:</strong> <span id="modalEventTempEau"></span></p>
                    <p><strong>PH:</strong> <span id="modalEventph"></span></p>
                    <p><strong>dpd1:</strong> <span id="modalEventdpd1"></span></p>
                    <p><strong>dpd2:</strong> <span id="modalEventdpd2"></span></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

        <div class="row">
            <div class="col-md-3">
                <!-- Sidebar avec calendrier et liste des employés -->
                <div id="sidebar">
                    <div class="calender-sidebar app-calendar">
                        <div id="calendar-sidebar"></div>
                    </div>
                    
                </div>
            </div>
            <div class="col-md-9">
                <div class="col-md-12 p-1">
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exportModal">
                        Exporter Excel
                    </button>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exportPDFModal">
                        Exporter pdf
                    </button>
                </div>
                <!-- Calendrier principal pour afficher les plannings des employés -->
                <div class="app-calendar">
                    <div id="employee-planning-calendar"></div>
                </div>
            </div>
        </div>
    </div>

<!-- Modal pour exporter les relevés en xlsx -->
<div class="modal fade" id="exportModal" tabindex="-1" aria-labelledby="exportModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportModalLabel">Exporter les Relevé</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="exportForm" method="POST" action="{{ path('export_releves_excel') }}">
                    <div class="mb-3">
                        <label for="startDate" class="form-label">Date de début</label>
                        <input type="date" class="form-control" id="startDate" name="startDate" required>
                    </div>
                    <div class="mb-3">
                        <label for="endDate" class="form-label">Date de fin</label>
                        <input type="date" class="form-control" id="endDate" name="endDate" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Exporter</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour exporter les relevés pdf -->
<div class="modal fade" id="exportPDFModal" tabindex="-1" aria-labelledby="exportPDFModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exportPDFModalLabel">Exporter les Relevés</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="exportForm" method="POST" action="{{ path('export_releves_pdf') }}">
                    <div class="mb-3">
                        <label for="startDate" class="form-label">Date de début</label>
                        <input type="date" class="form-control" id="startDate" name="startDate" required>
                    </div>
                    <div class="mb-3">
                        <label for="endDate" class="form-label">Date de fin</label>
                        <input type="date" class="form-control" id="endDate" name="endDate" required>
                    </div>
                    <button type="submit" class="btn btn-primary">Exporter</button>
                </form>
            </div>
        </div>
    </div>
</div>
    <script src="{{ asset('assets/libs/fullcalendar/fullcalendar.js') }}"></script>

<script>  

document.addEventListener('DOMContentLoaded', function () {

    // Initialiser le calendrier dans la sidebar
    var calendarSidebar = new FullCalendar.Calendar(document.getElementById('calendar-sidebar'), {
        initialView: 'dayGridMonth',
        locale: 'fr',
        events: '{{ path('get_releve_by_day') }}', // URL pour récupérer les plannings des employés
        dateClick: function(info) {
            // Mettre à jour le calendrier principal pour afficher les plannings de la date sélectionnée
            employeePlanningCalendar.gotoDate(info.date);
        }
    });
    calendarSidebar.render();

    // Initialiser le calendrier principal pour afficher les plannings des employés
    var employeePlanningCalendar = new FullCalendar.Calendar(document.getElementById('employee-planning-calendar'), {
        initialView: 'timeGridDay',
        locale: 'fr',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay'
        },
        events: '{{ path('get_releve') }}', // URL pour récupérer les plannings des employés
        editable: false,
        eventClick: function(info) {
            $('#eventModal').modal('show');
            document.getElementById('titreRelevé').innerText = info.event.title;
            document.getElementById('modalEventDate').innerText = new Date(info.event.start).toLocaleString('fr-FR');
            document.getElementById('modalEventEtatEau').innerText = info.event.extendedProps.etatEau;
            document.getElementById('modalEventTempExterieure').innerText = info.event.extendedProps.tempExt;
            document.getElementById('modalEventTempEau').innerText = info.event.extendedProps.tempEau;
            document.getElementById('modalEventph').innerText = info.event.extendedProps.ph;
            document.getElementById('modalEventdpd1').innerText = info.event.extendedProps.dpd1;
            document.getElementById('modalEventdpd2').innerText = info.event.extendedProps.dpd2;

            }
    });
    employeePlanningCalendar.render();
   

});

</script>
 
{% include 'partials/footer.html.twig' %}