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

<link rel="stylesheet" href="{{ asset('assets/libs/datatables.net-bs5/css/dataTables.bootstrap5.min.css') }}">

<script src="{{ asset('assets/libs/datatables.net/js/jquery.dataTables.min.js') }}"></script>

<div class="body-wrapper">
    <div class="container-fluid">
        <div class="card w-100 position-relative overflow-hidden mt-10">
            <h3 class="p-2">Aujourd'hui, {{today | date('d/m/Y')}}</h3>

            <div class="mt-5 text-center">
                <button id="start-scanner" class="btn btn-primary">Scanner un QR Code</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 class="card">
                <ul class="nav nav-pills user-profile-tab" id="pills-tab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative rounded-0 active d-flex align-items-center justify-content-center bg-transparent fs-3 py-3" id="pills-afaire-tab" data-bs-toggle="pill" data-bs-target="#pills-afaire" type="button" role="tab" aria-controls="pills-afaire" aria-selected="true">
                        <i class="ti ti-spray me-2 fs-6"></i>
                        <span class="d-none d-md-block">À FAIRE</span>
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link position-relative rounded-0 d-flex align-items-center justify-content-center bg-transparent fs-3 py-3" id="pills-termine-tab" data-bs-toggle="pill" data-bs-target="#pills-termine" type="button" role="tab" aria-controls="pills-termine" aria-selected="false" tabindex="-1">
                        <i class="ti ti-thumb-up me-2 fs-6"></i>
                        <span class="d-none d-md-block">TERMINÉ</span>
                        </button>
                    </li>
                </ul>

                <div>
                    <div class="tab-content" id="pills-tabContent">

                        <div class="tab-pane fade show active" id="pills-afaire" role="tabpanel" aria-labelledby="pills-account-tab" tabindex="0">
                        
                            {% include '@Hotel/menage/monespace/part/part_a_faire.html.twig' %}

                        </div>

                        <div class="tab-pane fade" id="pills-termine" role="tabpanel" aria-labelledby="pills-termine-tab" tabindex="0">
                        
                            {% include '@Hotel/menage/monespace/part/part_terminer.html.twig' %}

                        </div>
                    
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="chambreModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false" aria-labelledby="chambreModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="chambreModalContent">
            Chambre
        </div>
    </div>
</div>

<div class="modal fade" id="lostItemModal" tabindex="-1" aria-labelledby="lostItemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="lostItemModalContent">
            Objet Perdu
        </div>
    </div>
</div>

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

<div class="modal fade" id="tacheModal" tabindex="-1" aria-labelledby="tacheModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="tacheModalContent">
            Tache
        </div>
    </div>
</div>




    <script>
        
    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';
                console.log(decodedText);
                console.log('{{ path('chambre_maintenance_modal', { 'id': 'ID_PLACEHOLDER' }) }}');

                loadContent('{{ path('chambre_modal', { 'id': 'ID_PLACEHOLDER' }) }}', decodedText, 'chambreModalContent');
                loadContent('{{ path('chambre_maintenance_modal', { 'id': 'ID_PLACEHOLDER' }) }}', decodedText, 'maintenanceModalContent');
                loadContent('{{ path('chambre_objetperdu_modal', { 'id': 'ID_PLACEHOLDER' }) }}', decodedText, 'lostItemModalContent');
                
                $(`#chambreModal`).modal('show');

                //window.location.href = '{{ path('chambre_index')}}/' + decodedText; // Remplacez par votre route Symfony
            }, 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();
    }
});


// Fonction pour vérifier si tous les switchs sont cochés
function checkValidation() {
    const switches = document.querySelectorAll('.custom-control-input');
    const allChecked = Array.from(switches).every(switchElement => switchElement.checked);
    document.getElementById('saveChanges').disabled = !allChecked;
}

// Fonction pour attacher les écouteurs aux switchs
function initSwitchListeners() {
    document.querySelectorAll('.custom-control-input').forEach(switchElement => {
        switchElement.removeEventListener('change', checkValidation); // Éviter les doublons
        switchElement.addEventListener('change', checkValidation);
    });

    // Vérifier immédiatement si le bouton doit être activé ou non
    checkValidation();
}

// Détecter les changements dans le formulaire AJAX avec un MutationObserver
const observer = new MutationObserver((mutations, observer) => {
    mutations.forEach(mutation => {
        if (mutation.type === "childList" || mutation.type === "attributes") {
            //initSwitchListeners(); // Ré-attacher les écouteurs après une mise à jour AJAX
        }
    });
});

// Observer la modal ou la div contenant le formulaire AJAX
document.addEventListener('DOMContentLoaded', function () {
    const ajaxFormContainer = document.getElementById('modal-content') || document.body; // Remplacez avec l'ID de votre modal
    observer.observe(ajaxFormContainer, { childList: true, subtree: true });

    // Initialisation des switchs après le chargement initial de la page
    initSwitchListeners();
});


$(document).on('click', '#closeLostItem', function () {
    $('#lostItemModal').modal('hide');
    $('#chambreModal').modal('show');
});

$(document).on('click', '#closeMaintenance', function () {
    $('#maintenanceModal').modal('hide');
    $('#chambreModal').modal('show');
});


function showModalChambre(){
    $('#chambreModal').modal('show');
}

function reloadtable(){
    tableChambreAControler.ajax.reload();
    tableChambreANettoyer.ajax.reload();
    tableChambreValider.ajax.reload();
    tableChambreTerminer.ajax.reload();
    tableTache.ajax.reload();
    tableTacheTermine.ajax.reload();
}

document.addEventListener('DOMContentLoaded', function() {
    setInterval(function() {
        reloadtable();
    }, 20000);
});

reloadtable();

// Événement pour enregistrer les mises à jour
     $(document).on('click', '.tacheUser', function () {

        const selectedId = $(this).data('id');
        const route = $(this).data('route');
        const modalContentId = 'tacheModalContent';

        // Charger le contenu via AJAX
        loadContent(route, selectedId, modalContentId);
        $('#tacheModal').modal('show');

    });

    // Événement pour enregistrer les mises à jour
    $(document).on('click', '.finishTache', function () {

        const selectedId = $(this).data('id');
        const route = $(this).data('route').replace('ID_PLACEHOLDER', selectedId);

        // Charger le contenu via AJAX
        callSymfonyRoute(route,{},'GET');
    });
    </script>

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