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

<div class="container">
  <h2 style="padding-top: 120px">Maintenances Affectées</h2>

    <div class="mt-5 text-center">
        <button id="start-scanner" class="btn btn-primary">Ajouter une mantenance</button>
        <div id="qr-reader" style="display:none;">
            
        </div>
        <div id="success-icon" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none;">
            <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" fill="green" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM7.47 10.97l-2.25-2.25a.75.75 0 1 0-1.06 1.06l2.75 2.75a.75.75 0 0 0 1.06 0l5.75-5.75a.75.75 0 0 0-1.06-1.06L7.47 10.97z"/>
            </svg>
        </div>
    </div>  

    <div id="calendar" style="margin-top:120px;"></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="eventModalLabel">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>Nom:</strong> <span id="modalEventTitle"></span></p>
                    <p><strong>Date:</strong> <span id="modalEventDate"></span></p>
                    <p><strong>Description:</strong> <span id="modalEventDescription"></span></p>
                    <p><strong>Chambres:</strong></p>
                    <ul id="modalEventChambres"></ul>
                </div>
                <div class="modal-footer">
                    <button type="button" id="modalCloseButton" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="maintenanceModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="maintenanceModalContent">
                
            </div>
        </div>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="eventStartModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="eventStartModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="eventStartModalLabel">Maintenance en cours...</h5>
                </div>
                <div class="modal-body">
                    <button class="btn btn-success btn-sm" onclick="finishMaintenance(${info.event.id}, ${chambre.id})">Terminer la Maintenance</button>
s
                </div>
                <div class="modal-footer">
                    <button type="button" id="modalCloseButton" class="btn btn-secondary" data-bs-dismiss="modal">Terminer</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal pour commencer/terminer la maintenance -->
    <div class="modal fade" id="maintenanceActionModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="maintenanceActionModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="maintenanceActionModalLabel">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>Chambre:</strong> <span id="maintenanceChambreNumber"></span></p>
                    <p><strong>Maintenance:</strong> <span id="maintenanceTitle"></span></p>
                    <div id="timer" class="mb-3"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="startButton" onclick="cancelMaintenance()"class="btn btn-success">Annuler</button>
                    <button type="button" id="finishButton" onclick="finishMaintenance()" class="btn btn-danger">Terminer</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="maintenanceAddModal" tabindex="-1" aria-labelledby="maintenanceModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content" id="maintenanceAddModalContent">
                
            </div>
        </div>
    </div>


    <script src="{{ asset('assets/libs/fullcalendar/fullcalendar.js') }}"></script>

    <script>
    const maintenanceRoute = "{{ path('maintenance_get_front', { 'id': 'ID_PLACEHOLDER' }) }}";
        document.addEventListener('DOMContentLoaded', function () {
            var calendarEl = document.getElementById('calendar');

            var calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'listDay',
                locale: 'fr',
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'listDay'
                },
                events: {{ events|json_encode|raw }},
                eventContent: function(arg) {
                    updateProgressBar(arg.event.id);
                    let customHtml = `
                        <div class="fc-event-title fc-sticky">${arg.event.title}<br/>
                            <div id="progress-bar" style="width: 100%; background: #ddd;">
                                <div id="progress-${arg.event.id}" style="width: 0%; height: 20px; background: #4caf50;"></div>
                            </div>
                        </div>
                    `;
                    return { html: customHtml };
                },
                eventDidMount: function(info) {
                    // Ajouter une classe à l'événement
                    info.el.classList.add('maintenance');

                    // Ajouter un data-id à l'événement
                    info.el.setAttribute('data-id', info.event.id);
                },
                eventClick: function(info) {
                    
                    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;

                    var chambresList = document.getElementById('modalEventChambres');
                    chambresList.innerHTML = '';
                    info.event.extendedProps.chambres.forEach(function(chambre) {
                        var li = document.createElement('li');
                        if( chambre.statut == 'Terminé'){
                            var statut='<b>Terminé</b>';
                        }
                        else{
                            if(chambre.empty){
                                var statut='En attente';
                            }
                            else{
                                var statut=`<button class="btn btn-success btn-sm" onclick="openMaintenanceActionModal(${info.event.id}, ${chambre.id})">Commencer !</button>`
                            }
                        }
                        
                        li.innerHTML = `
                            ${chambre.hotel} - ${chambre.nom} 
                            ${statut} 
                        `;
                        chambresList.appendChild(li);
                    });
                }
            });

            calendar.render();

            window.openMaintenanceActionModal = function(maintenanceId, chambreId) {
                document.getElementById('maintenanceChambreNumber').innerText = '1';
                document.getElementById('maintenanceTitle').innerText = `Maintenance ${maintenanceId}`;
                document.getElementById('startButton').setAttribute('data-maintenance-id', maintenanceId);
                document.getElementById('startButton').setAttribute('data-chambre-id', chambreId);
                document.getElementById('finishButton').setAttribute('data-maintenance-id', maintenanceId);
                document.getElementById('finishButton').setAttribute('data-chambre-id', chambreId);

                $('#maintenanceActionModal').modal('show');

                fetch(`{{ path('maintenance_start', { maintenanceId: 'REPLACE_MAINTENANCE_ID', chambreId: 'REPLACE_CHAMBRE_ID' }) }}`
                    .replace('REPLACE_MAINTENANCE_ID', maintenanceId)
                    .replace('REPLACE_CHAMBRE_ID', chambreId), {                
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token('start_maintenance') }}'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        //$('#maintenanceActionModal').modal('hide');
                        //document.querySelector(`#modalEventChambres button[onclick*="${chambreId}"]`).style.display = 'none';
                        //document.getElementById('finishButton').style.display = 'inline-block';
                    } else {
                        alert('Error starting maintenance');
                    }
                })
                .catch(error => alert('Error starting maintenance: ' + error));
            }
        
            window.finishMaintenance = function() {
                var maintenanceId = document.getElementById('finishButton').getAttribute('data-maintenance-id');
                var chambreId = document.getElementById('finishButton').getAttribute('data-chambre-id');
                fetch(`{{ path('maintenance_finish', { maintenanceId: 'REPLACE_MAINTENANCE_ID', chambreId: 'REPLACE_CHAMBRE_ID' }) }}`
                    .replace('REPLACE_MAINTENANCE_ID', maintenanceId)
                    .replace('REPLACE_CHAMBRE_ID', chambreId), {                
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token('finish_maintenance') }}'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        $('#maintenanceActionModal').modal('hide');
                        loadContent(maintenanceRoute, maintenanceId, 'maintenanceModalContent', true);
                        updateProgressBar(maintenanceId);
                    } else {
                        alert('Error finishing maintenance');
                    }
                })
                .catch(error => alert('Error finishing maintenance: ' + error));
            }

            window.cancelMaintenance = function() {
                var maintenanceId = document.getElementById('startButton').getAttribute('data-maintenance-id');
                var chambreId = document.getElementById('startButton').getAttribute('data-chambre-id');
                fetch(`{{ path('maintenance_cancel', { maintenanceId: 'REPLACE_MAINTENANCE_ID', chambreId: 'REPLACE_CHAMBRE_ID' }) }}`
                    .replace('REPLACE_MAINTENANCE_ID', maintenanceId)
                    .replace('REPLACE_CHAMBRE_ID', chambreId), {                
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token('cancel_maintenance') }}'
                    }
                })
                .then(response => {
                    if (response.ok) {
                        $('#maintenanceActionModal').modal('hide');
                    } else {
                        alert('Error canceling maintenance');
                    }
                })
                .catch(error => alert('Error finishing maintenance: ' + error));
            }
        });

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

        // Ciblez tous les liens "archive"
        $(document).on('click', '.maintenance', 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
            loadContent(maintenanceRoute, selectedId, 'maintenanceModalContent', true);
            $('#maintenanceModal').modal('show');
        }); 

        
    document.getElementById('start-scanner').addEventListener('click', function () {
        const qrReader = document.getElementById('qr-reader');
        qrReader.style.display = 'block'; // Afficher l'élément du scanner
        startQrScanner();
    });

function startQrScanner() {
    const html5QrCode = new Html5Qrcode("qr-reader"); // ID de l'élément où afficher le scanner

    html5QrCode.start(
        { facingMode: "environment" }, // Sélection automatique de la caméra arrière
        {
            fps: 10, // Taux de scan en images par seconde
            qrbox: { width: 250, height: 250 }, // Taille de la boîte de scan
        },
        onScanSuccess, // Fonction appelée lorsqu'un code est détecté
        onScanFailure // Fonction appelée en cas d'erreur ou de non-détection
    ).catch(error => {
        console.error("Erreur lors du démarrage du scanner:", error);
    });

    // Assurez-vous de stocker l'instance pour la nettoyer plus tard
    window.currentQrScanner = html5QrCode;
}

function onScanSuccess(decodedText, decodedResult) {
    // Afficher une icône de succès
    document.getElementById('success-icon').style.display = 'block';

    // Arrêter la caméra après un scan réussi
    if (window.currentQrScanner) {
        window.currentQrScanner.stop().then(() => {
            console.log("Caméra arrêtée.");
            // Après 2 secondes, cacher l'icône et rediriger
            setTimeout(() => {
                document.getElementById('success-icon').style.display = 'none';

                loadContent('{{ path('chambre_maintenance_add_modal', { 'id': 'ID_PLACEHOLDER' }) }}', decodedText, 'maintenanceAddModalContent');
                
                $(`#maintenanceAddModal`).modal('show');

            }, 2000);
        }).catch(error => {
            console.error("Impossible d'arrêter la caméra:", error);
        });
    }
}

function onScanFailure(error) {
    console.warn(`Erreur de scan: ${error}`);
}

// Nettoyage du scanner pour éviter les conflits
window.addEventListener('beforeunload', () => {
    if (window.currentQrScanner) {
        window.currentQrScanner.clear();
    }
});

function closeModalMaintenance(){
    $(`#maintenanceAddModal`).modal('hide');

}
    </script>

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