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

   <style>
    .fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
        min-height: 0em !important;
    }

    .app-calendar .fc-daygrid-day-top:hover{
        cursor: pointer;
    }
    {% if users|length > 0 %}
        .fc-timegrid-event-harness {
            width: {{100 / users|length}}%;
        }
    {% endif %}
    </style>
    {% include '@Pointeuse/pointage/modal/detail.html.twig' %}
    {% include '@Pointeuse/pointage/modal/update_pointage.html.twig' %}
    
    <!-- Modal pour modifier le pointage -->


<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">Pointages</h4>
                    </div>
                </div>
            </div>
        </div>

        <div class="card">
            <div class="card-body">
                <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 class="btn btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Exporter vers Excel
                                </button>
                                <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exportModal">Tous les employés</a>
                                    <a class="dropdown-item" href="#" data-bs-toggle="modal" data-bs-target="#exportModalOne">Un seul employé</a>
                                </div>
                            <button id="add-pointage" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addPointageModal">Ajouter un pointage</button>
                            <button id="print-qrcode" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#printQrCodeModal">Imprimer le QR Code</button>
                        </div>
                        <!-- Calendrier principal pour afficher les plannings des employés -->
                        <div class="calender-sidebar app-calendar">
                            <div id="employee-planning-calendar"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    {% include '@Pointeuse/pointage/modal/export_pointage.html.twig' %}
    {% include '@Pointeuse/pointage/modal/export_pointage_user.html.twig' %}
    {% include '@Pointeuse/pointage/modal/export_pointage_pdf.html.twig' %}
    {% include '@Pointeuse/pointage/modal/add_pointage.html.twig' %}
    {% include '@Pointeuse/pointage/modal/print_pointage.html.twig' %}

<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',
        firstDay: 1,
        dateClick: function(info) {
            // Mettre à jour le calendrier principal pour afficher les plannings de la date sélectionnée
            employeePlanningCalendar.gotoDate(info.dateStr);
        }
    });
    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',
        timeZone: 'Europe/Paris',  // Définit le fuseau horaire à 'Europe/Paris'
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,timeGridWeek,timeGridDay, listDay'
        }, 
        events: '{{ path('get_employee_pointage') }}', // URL pour récupérer les plannings des employés
        editable: false,
        eventClick: function(info) {
                     $('#eventModal').modal('show');
                    document.getElementById('modalEventDate').innerText = new Date(info.event.start).toISOString().substring(0, 10);
                    document.getElementById('modalEventEmploye').innerText = info.event.title;
                    document.getElementById('modalEventSignature').src = "{{asset('uploads/signatures/')}}" + info.event.extendedProps.signature;

                    var bouton = document.getElementById('btnModifier');
                    var chambresList = document.getElementById('modalEventChambres');
                    var content = '<table class="table border text-nowrap customize-table mb-0 align-middle"><thead class="text-dark fs-4"><tr><th><h6 class="fs-4 fw-semibold mb-0">Planning</h6></th><th><h6 class="fs-4 fw-semibold mb-0">Pointage</h6></th></th></tr></thead>';
                    
                    if(info.event.end){
                        content = content + '<tr><td>' + info.event.extendedProps.planningstart + info.event.extendedProps.planningend +'</td><td>' + info.event.start.toISOString().substring(11, 19) + ' - ' + info.event.end.toISOString().substring(11, 19) + '</td>></tr>';
                        var contentBtn = '<button type="button" class="btn btn-primary" id="openEditModal" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-id="'+info.event.id+'" data-bs-employe="'+info.event.title+'" data-bs-date="'+new Date(info.event.start).toISOString().substring(0, 10)+'" data-bs-start="'+info.event.start.toISOString().substring(11, 16)+'" data-bs-end="'+info.event.end.toISOString().substring(11, 16)+'">Modifier le Pointage</button>';

                    }
                    else{
                        content = content + '<tr><td>' + info.event.extendedProps.planningstart + info.event.extendedProps.planningend +'</td><td>' + info.event.start.toISOString().substring(11, 19) + ' -  ??? </td>></tr>';
                        var contentBtn = '<button type="button" class="btn btn-primary" id="openEditModal" data-bs-toggle="modal" data-bs-target="#editModal" data-bs-id="'+info.event.id+'" data-bs-employe="'+info.event.title+'" data-bs-date="'+new Date(info.event.start).toISOString().substring(0, 10)+'" data-bs-start="'+info.event.start.toISOString().substring(11, 16)+'" data-bs-end="">Modifier le Pointage</button>';

                    }
                    

                    content = content + '</table>';
                    chambresList.innerHTML = content;
                    bouton.innerHTML = contentBtn;
                }
    });
    employeePlanningCalendar.render();

    const editModal = document.getElementById('editModal');
    if (editModal) {
        editModal.addEventListener('show.bs.modal', event => {
        // Button that triggered the modal
        const button = event.relatedTarget;
        // Extract info from data-bs-* attributes
        const id = button.getAttribute('data-bs-id');
        const user = button.getAttribute('data-bs-employe');
        const date = button.getAttribute('data-bs-date');
        const start = button.getAttribute('data-bs-start');
        const end = button.getAttribute('data-bs-end');
        // If necessary, you could initiate an Ajax request here
        // and then do the updating in a callback.

        // Update the modal's content.
        const idform = document.getElementById('edit-id');
        const userform = document.getElementById('edit-user');
        const dateform = document.getElementById('edit-date');
        const startform = document.getElementById('edit-start');
        const endform = document.getElementById('edit-end');
        idform.value = id;
        userform.value = user;
        dateform.value = date;
        startform.value = start;
        endform.value = end;
        })
    }
   
     // Impression du QR code
    document.getElementById('printQrCodeButton').addEventListener('click', function() {
        const qrCodeElement = document.getElementById('qrcode-img');
        const printWindow = window.open('', '_blank');
        printWindow.document.write('<html><head><title>Print QR Code</title></head><body>');
        printWindow.document.write('<img src="../../public/uploads/app/qr_code_pointeuse.png" style="width:500px;height:500px;"/>');
        printWindow.document.write('</body></html>');
        printWindow.document.close();
        printWindow.print();
    });

    document.getElementById('addPointageForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const user = document.getElementById('addUser').value;
        const date = document.getElementById('addDate').value;
        const heureArrivee = document.getElementById('addHeureArrivee').value;
        const heureDepart = document.getElementById('addHeureDepart').value;

        
        fetch('{{ path('admin_pointage_add_admin') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token('admin_pointage_add_admin') }}'
            },
            body: JSON.stringify({
                user: user,
                date: date,
                heureArrivee: heureArrivee,
                heureDepart: heureDepart
            })
        })
        .then(response => response.json())  
        .then(data => {
            if (data.success) {
                $('#addPointageModal').modal('hide');
                //loadPointages(getCurrentDate());
                employeePlanningCalendar.refetchEvents();
            } else {
                alert('Une erreur est survenue.');
            }            
        })
        .catch(error => console.error('Erreur:', error));
    });

    document.getElementById('editForm').addEventListener('submit', function(event) {
        event.preventDefault();
        const pointage = document.getElementById('edit-id').value;
        const heureArrivee = document.getElementById('edit-start').value;
        const heureDepart = document.getElementById('edit-end').value;

        
        fetch('{{ path('admin_pointage_update_admin') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token('admin_pointage_update_admin') }}'
            },
            body: JSON.stringify({
                pointage: pointage,
                heureArrivee: heureArrivee,
                heureDepart: heureDepart
            })
        })
        .then(response => response.json())  
        .then(data => {
            if (data.success) {
                $('#editModal').modal('hide');
                //loadPointages(getCurrentDate());
                employeePlanningCalendar.refetchEvents();
            } else {
                alert('Une erreur est survenue.');
            }            
        })
        .catch(error => console.error('Erreur:', error));
    });

});

</script>

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