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

 <div class="body-wrapper">
  <div class="container-fluid">
    <div class="card w-100 position-relative overflow-hidden mt-10">
      <div class="px-4 py-3 border-bottom">
          <h5 class="card-title fw-semibold mb-0 lh-sm">Audit: {{audit.nom}}</h5>
      </div>
      <div class="mt-5 mb-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 id="contentAudit"></div>

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

{# Modal Bootstrap pour répondre à une question #}
<div class="modal fade" id="responseModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="contentReponse">
            
        </div>
    </div>
</div>

<script>
    const auditId = '{{audit.idtoken}}';
    const reponseListRoute = "{{ path('audit_ajax_list_reponse', { 'id': 'ID_PLACEHOLDER' }) }}";
    const reponseDetailRoute = "{{ path('audit_ajax_get_reponse', { 'id': 'ID_PLACEHOLDER' }) }}";
    const reponseChambreDetailRoute = "{{ path('audit_ajax_get_reponse_by_chambre', { 'id': 'ID_PLACEHOLDER' , 'audit': 'AUDIT_PLACEHOLDER' }) }}";
    const reponseNextDetailRoute = "{{ path('audit_ajax_get_reponseid', { 'id': 'ID_PLACEHOLDER', 'audit': 'AUDIT_PLACEHOLDER' }) }}";

        loadListQuestion();
    function loadListQuestion(){
    loadContent(reponseListRoute, auditId, 'contentAudit');
}
    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('audit_ajax_get_reponse_by_chambre', { 'id': 'ID_PLACEHOLDER' , 'audit': audit.idtoken }) }}', decodedText, 'contentReponse');
                
                $(`#responseModal`).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();
    }
});

document.addEventListener('DOMContentLoaded', () => {
    let selectedId = null;
  
    // Ciblez tous les liens "archive"
    $(document).on('click', '.repondre', 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: reponseDetailRoute.replace('ID_PLACEHOLDER', selectedId),
          type: 'GET',
          success: function (response) {
              // Injecter le contenu dans la modal
              $('#contentReponse').html(response);
  
              // Afficher la modal
              $('#responseModal').modal('show');
          },
          error: function () {
              alert('Une erreur est survenue lors du chargement des détails de la tâche.');
          },
      });
  });
});

function loadNextReponse(id){
    route = reponseDetailRoute.replace('ID_PLACEHOLDER', id);
    console.log('loadNextReponse/'+id);
    console.log(route);
     // Charger le contenu via AJAX
     $.ajax({
         url: route,
         type: 'GET',
         success: function (response) {
             console.log('OK loadNextReponse');
             // Injecter le contenu dans la modal
             $('#contentReponse').html(response);

            let interval = setInterval(() => {
                $('#responseModal').modal('show');
                clearInterval(interval);
            }, 500);
             // Afficher la modal

             loadListQuestion();
         },
         error: function () {
             alert('Une erreur est survenue lors du chargement des détails de la tâche.');
         },
     });
}

function loadNextReponseChambre(id){
    route = reponseChambreDetailRoute.replace('ID_PLACEHOLDER', id).replace('AUDIT_PLACEHOLDER', auditId);
  
     // Charger le contenu via AJAX
     $.ajax({
         url: route,
         type: 'GET',
         success: function (response) {
             // Injecter le contenu dans la modal
             $('#contentReponse').html(response);
 
             let interval = setInterval(() => {
                $('#responseModal').modal('show');
                clearInterval(interval);
            }, 500);

             loadListQuestion();
         },
         error: function () {
             alert('Une erreur est survenue lors du chargement des détails de la tâche.');
         },
     });
}

</script>
    


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