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

<div class="body-wrapper">

    <script src="{{ asset('assets/libs/select2/js/select2.full.min.js') }}"></script>
    <script src="{{ asset('assets/libs/select2/js/select2.min.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('assets/libs/select2/css/select2.min.css') }}">

    <style>
        .finish {
            color: green;
        }
        .initial {
            color: blue;
        }
        .in-progress {
            color: orange;
        }
        .later {
            color: red;
        }
        .fc-event-assigned{
            font-weight:400;
        }

        .app-calendar .fc-bg-danger{
        border-left: solid 2px #fa896b;
    }
    .app-calendar .fc-bg-warning{
        border-left: solid 2px #ffae1f;
    }
    .app-calendar .fc-bg-success{
        border-left: solid 2px #13deb9;
    }
    .app-calendar .fc-bg-primary{
        border-left: solid 2px #13deb9;
    }
    .app-calendar .fc-bg-info{
        border-left: solid 2px #0dcaf0;
        color: #0dcaf0 !important;
    }
    
    .app-calendar .fc-bg-danger .fc-event-main{
        color: #fa896b;
    }
    
    .app-calendar .fc-bg-warning .fc-event-main{
        color: #ffae1f;
    }

    .app-calendar .fc-bg-success .fc-event-main{
        color: #13deb9;
    }

    .app-calendar .fc-bg-primary .fc-event-main{
        color: #13deb9;
    }

    .app-calendar .fc-bg-info .fc-event-main{
        color: #0dcaf0;
    }

    .app-calendar .fc-daygrid-day-top:hover{
        cursor: pointer;
    }
    </style>
        <div class="container-fluid">

    <div class="mb-2">
        <a href="" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
            Nouveau
        </a>
        <button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#maintenanceNonPModal">
 Maintenances non planifiées
</button>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#rapportModal">
 Rapport de maintenance
</button>
    </div>
        
    <div class="app-calendar">
        <div id="calendar"></div>
    </div>
</div>
    <!-- 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 de l'Action de Maintenance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p><strong>Date:</strong> <span id="modalEventDate"></span></p>
                    <p><span id="modalEventDescription"></span></p>
                    <p><strong>Chambre:</strong> 
                        <ul id="modalEventChambres"></ul>
                    </p>
                    <p><strong>Assigné à:</strong> <span id="modalEventAssigned"></span></p>
                    <p><strong>Progression</strong> </p>
                    <div id="progress-bar" style="width: 100%; background: #ddd;">
                        <div id="progress" style="width: 0%; height: 20px; background: #13deb9;"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <a id="modalFinishLink" class="finish btn btn-success">Terminer</a>
                    <a id="modalEditLink" class="detail btn btn-primary">Modifier</a>
                    <button type="button" id="modalDeleteButton" class="btn btn-danger">Supprimer</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="updateModal" tabindex="-1" aria-labelledby="updateModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content" id="contentUpdateModal">
                
            </div>
        </div>
    </div>

    <!-- Modal pour affecter/modifier/supprimer les maintenances non plannifiées -->
    <div class="modal fade" id="maintenanceNonPModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="maintenanceNonPModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="maintenanceNonPModalLabel">Maintenances non plannifiées</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                Liste des maintenances créées par les gourvernantes : vous pouvez ici les modifier, les plannifier et le affecter.<br/><hr/><br/>
                    {% for maintenance in maintenanceNonPlannif %}
                    <p><strong>Chambre:</strong> {{maintenance.hotel}} {{maintenance.chambre}}</p>
                    <p><strong>Description:</strong> {{maintenance.description}}</span></p>
                    <p><a href="{{asset('uploads/maintenance/' ~ maintenance.image)}}" target="_blank"><img src="{{asset('uploads/maintenance/' ~ maintenance.image)}}" style="max-width:300px;" /></a></p>
                    <p>
                        <a data-id="{{maintenance.id}}" class="detail btn btn-primary">Modifier</a>
                        <button type="button" onclick="supprimerMaintenance({{maintenance.id}})" class="btn btn-danger">Supprimer</button>
                    </p>
                    {% endfor %}
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour exporter les maintenances pdf -->
    <div class="modal fade" id="rapportModal" tabindex="-1" aria-labelledby="rapportModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="rapportModalLabel">Créer un rapport</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_maintenance_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">Créer le rapport</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <script src="{{ asset('libs/jquery/dist/jquery.min.js') }}"></script>
    <script src="{{ asset('assets/libs/fullcalendar/fullcalendar-timeline.js') }}"></script>

    <script>
        let calendar;  
        
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth', // Default view
                locale: 'fr',
                buttonText: {
                    today: 'Aujourd\'hui',
                    month: 'Mois',
                    week: 'Semaine',
                    day: 'Jour',
                    year: 'Année',
                    list: 'Liste'
                },
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'timeGridDay,timeGridWeek,dayGridMonth,multiMonthYear'
                },
                 events: '{{ path('get_maintenance') }}',
                eventContent: function(arg) {
                    let customHtml = `
                        <div class="fc-event-title fc-sticky">${arg.event.title}<br/>
                            <div class="fc-event-assigned">${arg.event.extendedProps.assignedTo}</div>
                        </div>
                    `;
                    return { html: customHtml };
                },
                eventClassNames: function ( info ) {
                    var statut = info.event.extendedProps.statut;
                    var classe = '';
                    if (statut === 'later') {
                        classe = 'danger';
                    } else if (statut === 'finish') {
                        classe = 'success';
                    } else if (statut === 'initial') {
                        classe = 'info';
                    } else if (statut === 'pending') {
                        classe = 'info ';
                    }
                    
                return ["event-fc-color fc-bg-"+classe];
                },
                eventClick: function(info) {
                     $('#eventModal').modal('show');
                    document.getElementById('modalEventTitle').innerText = info.event.title;
                    document.getElementById('modalEventDate').innerText = new Date(info.event.start).toLocaleString('fr-FR');
                    document.getElementById('modalEventDescription').innerText = info.event.extendedProps.description;
                    document.getElementById('modalEventAssigned').innerText = info.event.extendedProps.assignedTo;
                    document.getElementById('modalEditLink').dataset.id = info.event.id;
                    document.getElementById('modalFinishLink').dataset.id = info.event.id;
                    document.getElementById('modalDeleteButton').setAttribute('data-id', info.event.id);

                    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">Numéro</h6></th><th><h6 class="fs-4 fw-semibold mb-0">Chambre</h6></th><th><h6 class="fs-4 fw-semibold mb-0">Action</h6></th></tr></thead>';
                    
                    info.event.extendedProps.chambres.forEach(function(chambre) {
                        if(!chambre.delete){
                            content = content + '<tr><td>' + chambre.number + '</td><td><p class="mb-0 fw-normal fs-4">' + chambre.name + '</p></td><td><button class="btn btn-danger btn-sm delete-chambre" data-id="' + chambre.id + '" data-maintenance="' + info.event.extendedProps.maintenance + '"><i class="ti ti-trash"></i></button></td></tr>';
                        }
                    });
                    content = content + '</table>';
                    chambresList.innerHTML = content;
                    updateProgressBar(info.event.id);
                }
            });

            calendar.render();

            document.getElementById('modalDeleteButton').addEventListener('click', function() {
                var eventId = this.getAttribute('data-id');
                if (confirm('Êtes-vous sûr de vouloir supprimer cette action de maintenance ?')) {
                    $.ajax({
                        url: "{{ path('admin_maintenanceaction_delete', { id: 'REPLACE_ID' }) }}".replace('REPLACE_ID', eventId),
                        type: 'DELETE',
                        success: function(result) {
                            $('#eventModal').modal('hide');
                            calendar.refetchEvents(); // Recharger les événements du calendrier
                        },
                        error: function(err) {
                            alert('Une erreur est survenue lors de la suppression de l\'action de maintenance.');
                        }
                    });
                }
            });

            document.getElementById('modalEventChambres').addEventListener('click', function(e) {
                    var chambreId = e.target.getAttribute('data-id');
                    var maintenanceId = e.target.getAttribute('data-maintenance');
                    console.log(chambreId+'/'+maintenanceId);
                    if (confirm('Êtes-vous sûr de vouloir supprimer cette maintenance pour la chambre sélectionnée ?')) {
                        $.ajax({
                            url: "{{ path('admin_maintenanceaction_delete_chambre', { maintenanceId: 'REPLACE_MAINTENANCE_ID', chambreId: 'REPLACE_CHAMBRE_ID' }) }}"
                                .replace('REPLACE_MAINTENANCE_ID', maintenanceId)
                                .replace('REPLACE_CHAMBRE_ID', chambreId),
                            type: 'DELETE',
                            success: function(result) {
                                $('#eventModal').modal('hide');
                                calendar.refetchEvents(); // Recharger les événements du calendrier
                            },
                            error: function(err) {
                                alert('Une erreur est survenue lors de la suppression de la maintenance pour la chambre.');
                            }
                        });
                    }
            });
        });

        function reloadCalendar(){
            console.log('reload');
            calendar.refetchEvents();
        }

        function updateProgressBar(maintenanceId) {
            fetch(`{{ path('admin_maintenance_progress', {'maintenance': 'PLACEHOLDER'}) }}`.replace('PLACEHOLDER', maintenanceId))
                .then(response => response.json())
                .then(data => {
                    const progress = document.getElementById('progress');
                    progress.style.width = `${data.progress}%`;
                });
        }

        function supprimerMaintenance(maintenanceId) {
            if (confirm('Êtes-vous sûr de vouloir supprimer cette action de maintenance ?')) {
                $.ajax({
                    url: "{{ path('admin_maintenanceaction_delete', { id: 'REPLACE_ID' }) }}".replace('REPLACE_ID', maintenanceId),
                    type: 'DELETE',
                    success: function(result) {
                        location.reload();
                    },
                    error: function(err) {
                        alert('Une erreur est survenue lors de la suppression de l\'action de maintenance.');
                    }
                });
            }
        }

            // Initialisation de Select2 avec prise en charge des modals
       

       document.addEventListener('DOMContentLoaded', () => {
        // Initialisation pour les éléments déjà dans le DOM
        $('.select2').select2();

        // Réinitialisation lors de l'ouverture de la modal
        $('#addModal').on('shown.bs.modal', function () {
            $(this).find('.select2').select2({
                dropdownParent: $('#addModal'),
                width: '100%' // Fixe les problèmes de z-index
            });
        });

        $('#updateModal').on('shown.bs.modal', function () {
            $(this).find('.select2').select2({
                dropdownParent: $('#updateModal'),
                width: '100%' // Fixe les problèmes de z-index
            });
        });

        
    });   

    document.addEventListener('DOMContentLoaded', () => {
        let selectedId = null;

        // Ciblez tous les liens "archive"
        $(document).on('click', '.detail', function (event) {
            event.preventDefault();

            // Récupérez l'ID du client à partir de l'attribut data-id
            const selectedId = $(this).data('id');

            // Charger le contenu via AJAX
            $.ajax({
                url: "{{path('maintenance_get', { 'id': 'ID_PLACEHOLDER' })}}".replace('ID_PLACEHOLDER', selectedId),
                type: 'GET',
                success: function (response) {
                    // Injecter le contenu dans la modal
                    $('#contentUpdateModal').html(response);

                    // Afficher la modal
                    $('#maintenanceNonPModal').modal('hide');
                    $('#eventModal').modal('hide');
                    $('#updateModal').modal('show');
                    toggleModeFieldsUpdate();
                },
                error: function () {
                    alert('Une erreur est survenue lors du chargement des détails de la tâche.');
                },
            });
        }); 

        // Ciblez tous les liens "archive"
        $(document).on('click', '.finish', function (event) {
            event.preventDefault();

            // Récupérez l'ID du client à partir de l'attribut data-id
            const selectedId = $(this).data('id');

            // Charger le contenu via AJAX
            $.ajax({
                url: "{{path('maintenance_finish_marked', { 'id': 'ID_PLACEHOLDER' })}}".replace('ID_PLACEHOLDER', selectedId),
                type: 'GET',
                success: function (response) {
                    $('#eventModal').modal('hide');
                    reloadCalendar();
                },
                error: function () {
                    alert('Une erreur est survenue lors du chargement des détails de la tâche.');
                },
            });
        }); 
     }); 

    // On supprime l'écouteur DOMContentLoaded car il est inutile pour du contenu AJAX.

    function toggleModeFieldsUpdate() {
        let mode = document.getElementById("modeUpdate").value;
        let selectChambre = document.getElementById("chambresUpdate");
        let chambres = document.getElementById("selectionChambreUpdate");

        if (mode === "chambre") {
            chambres.style.display = "block";
            selectChambre.setAttribute("required", "required");
        } else {
            chambres.style.display = "none";
            selectChambre.removeAttribute("required");
        }
    }

    function toggleUserFieldsUpdate() {
            let user = document.getElementById("userUpdate").value;
            let inputPrestataire= document.getElementById("inputPrestataireUpdate");
            let prestataire = document.getElementById("prestataireUpdate");

            if (user === "Prestataire") {
                prestataire.style.display = "block";
                inputPrestataire.setAttribute("required", "required");
            } else {
                prestataire.style.display = "none";
                inputPrestataire.removeAttribute("required");
            }
        }

    // Délégation d'événement sur le document (pour capter même les éléments ajoutés dynamiquement)
    document.addEventListener("change", function(e) {
        if (e.target && e.target.id === "modeUpdate") {
            toggleModeFieldsUpdate();
        }
    });

    $(document).on('change', '#modeUpdate', function(){
            toggleModeFieldsUpdate();
        });
    $(document).on('change', '#userUpdate', function(){
        toggleUserFieldsUpdate();
    });

    function relaoadPages(){
        document.location.reload();
    }

     
    </script>

</div>
{% include '@Maintenance/maintenance/modal/new_maintenance.html.twig' %}    
{% include 'partials/footer.html.twig' %}