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

    <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') }}">

  <div class="body-wrapper">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <div class="d-flex align-items-center gap-4 mb-4">
            <div>
              <h3 class="fw-semibold">{{audit.nom}} </h3>
            </div>
          </div>
          <div class="card">
            <div class="card-body">
              <div class="row pb-4">
                <div class="col-lg-4 d-flex align-items-stretch">
                  <div class="d-flex flex-column align-items-start w-100">
                    <div class="text-start">
                      <h5 class="card-title fw-semibold">Description</h5>
                      <span>{{audit.description}}</span>
                    </div>
                  </div>
                </div>
                <div class="col-lg-8 d-flex align-items-stretch">
                  <div class="w-100">
                    <div class="d-md-flex align-items-start gap-3">
                      <div>
                        <h6 class="mb-0">Progression de l'audit</h6>
                        <div class="d-flex align-items-center gap-3">
                          <h2 class="mt-2 fw-bold">{{audit.progression}}%</h2>
                          </div>
                        </div>
                        <div class="ms-auto">
                          <h6 class="mb-0">Statut</h6>
                          <span class="mb-1 badge text-bg-secondary">{{audit.statut}}</span>
                        </div>
                      </div>
                      
                      <div class="mt-4">
                      
                      </div>
                    </div>
                  </div>
                </div>
              </div>
                <div class="border-top">
                  <div class="row gx-0">
                    <div class="col-md-3 border-end">
                      <div class="p-4 py-3 py-md-4">
                        <p class="fs-4 text-danger mb-0">
                          <span class="text-danger">
                            <span class="round-8 text-bg-danger rounded-circle d-inline-block me-1"></span>
                          </span>Crée par
                        </p>
                        <h3 class=" mt-2 mb-0">{{audit.createdBy.prenom}} {{audit.createdBy.nom}}</h3>
                      </div>
                    </div>
                    <div class="col-md-3 border-end">
                      <div class="p-4 py-3 py-md-4">
                        <p class="fs-4 text-primary mb-0">
                          <span class="text-primary">
                            <span class="round-8 text-bg-primary rounded-circle d-inline-block me-1"></span>
                          </span>Questions
                        </p>
                        <h3 class=" mt-2 mb-0">{{questions | length}}</h3>
                      </div>
                    </div>
                    <div class="col-md-3 border-end">
                      <div class="p-4 py-3 py-md-4">
                        <p class="fs-4 text-info mb-0">
                          <span class="text-info">
                            <span class="round-8 text-bg-info rounded-circle d-inline-block me-1"></span>
                          </span>Note
                        </p>
                        <h3 class=" mt-2 mb-0">{{audit.note}}/{{audit.noteTotal}}</h3>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <div class="p-4 py-3 py-md-4">
                        <p class="fs-4 text-success mb-0">
                          <span class="text-success">
                            <span class="round-8 text-bg-success rounded-circle d-inline-block me-1"></span>
                          </span>Crée le 
                        </p>
                        <h3 class=" mt-2 mb-0">{{audit.createdAt | date('d/m/Y')}}</h3>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-lg-5 d-flex align-items-stretch">
              <div class="card w-100">
                <div class="card-body">
                  <h5 class="card-title fw-semibold">Questions</h5>

                  {% if audit.statut == 'Brouillon'  or audit.statut == 'Ré-ouvert' %}
                    <p class="card-subtitle text-end">
                      <button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#addQuestionModal">
                        Ajouter une question
                      </button>
                    </p>
                  {% endif %}
                  <div id="questionsContent" data-simplebar style="max-height: 300px; overflow: auto;"></div>
                  </div>
                </div>
              </div>
            
            <div class="col-lg-4 d-flex align-items-stretch">
              <div class="card w-100 overflow-hidden">
                <div class="card-body">
                  <div class="align-items-center">
                    <div>
                      <h5 class="card-title fw-semibold">Employé(s)</h5>

                      {% if audit.statut == 'Brouillon'  or audit.statut == 'Ré-ouvert' %}
                        <select class="form-control select2" id="users" data-field="users" name="users[]" multiple="multiple">
                            {% for user in userHotel %}
                              <option value="{{user.id}}" {% if user in userAffecte %}selected{% endif %}>{{user.prenom}} {{user.nom}}</option>
                            {% endfor %}
                        </select>                  
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div>
                  <div class="mailbox">
                    <div class="
                        message-center
                        contact-widget
                        position-relative
                      " style="height: 450px">
                      {% for user in userAffecte %}
                        <a href="javascript:void(0)" class="message-item d-flex align-items-center border-bottom p-3">
                          <span class="user-img position-relative d-inline-block">
                            {% if user.image is not null %}
                              <img src="{{ asset('uploads/profiles/' ~ user.image) }}" alt="image de profil" class="img-fluid rounded-circle" width="40" height="40" id="imgProfile">
                            {% else %}
                              {% set initials = user.prenom|slice(0, 1)|upper ~ user.nom|slice(0, 1)|upper %}
                              <span class="bg-primary text-white fs-6 round-40 rounded-circle me-n2 border border-2 border-white d-flex align-items-center justify-content-center">
                                {{ initials }}
                              </span>
                            {% endif %}   
                          </span>
                          <div class="w-75 d-inline-block  ps-3">
                            <h5 class="message-title mb-0 mt-1 fs-4">{{user.prenom}} {{user.nom}}</h5>
                            <span class="fs-2 text-nowrap d-block time text-truncate text-muted">{{user.email}}</span>
                          </div>
                        </a>
                      {% endfor %}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg-3 d-flex">
              <div class="card w-100 overflow-hidden">
                <div class="card-body">
                  <h5 class="card-title fw-semibold">Actions</h5>
                
                  {% if audit.statut == 'Brouillon' or audit.statut == 'Ré-ouvert' %}
                    <a class="btn btn-primary" href="javascript:void(0);" onclick="callSymfonyRoute('{{ path('audit_begin', {'id': audit.idtoken}) }}', {  }, 'GET');">
                        Commencer l'audit
                    </a> 
                  {% else %}  
                    {% if audit.statut == 'Terminé' %}
                      <a class="btn btn-primary mb-2" href="javascript:void(0);" onclick="callSymfonyRoute('{{ path('audit_reopen', {'id': audit.idtoken}) }}', {  }, 'GET');">
                          Réouvrir l'audit
                      </a>
                      <a class="btn btn-warning mb-2" href="javascript:void(0);" onclick="callSymfonyRoute('{{ path('audit_begin', {'id': audit.idtoken}) }}', {  }, 'GET');">
                          Télécharger un rapport
                      </a> 
                  {% else %}    
                    <a class="btn btn-primary mb-2" href="javascript:void(0);" onclick="callSymfonyRoute('{{ path('audit_reopen', {'id': audit.idtoken}) }}', {  }, 'GET');">
                        Réouvrir l'audit
                    </a> 
                    <a class="btn btn-success mb-2" href="javascript:void(0);" onclick="callSymfonyRoute('{{ path('audit_finish', {'id': audit.idtoken}) }}', {  }, 'GET');">
                        Marquer comme terminé
                    </a> 
                  {% endif %}  
                  {% endif %}  
                           
                </div>
              </div>
            </div>
            {% if audit.statut != 'Brouillon' %}
            <div class="card col-12">
              <div class="table-responsive mb-4 border rounded-1">
                <div class="p-4">
                      <h4 class="card-title fw-semibold text-white">Résultats de l'audit</h4>
                    </div>
                <table class="table text-nowrap mb-0 align-middle">
                      <tbody>
                      {% for group in grouped_responses %}
                          <tr>
                              <td colspan="5" class="bg-primary text-white">
                                  <h4 class="text-white">{{ group.label }}</h4>
                              </td>
                          </tr>

                          {% if group.hotel is not empty %}
                              <tr>
                                  <td colspan="5" class="bg-light">
                                      <h5>Questions générales (Hôtel)</h5>
                                  </td>
                              </tr>

                              {% for response in group.hotel %}
                                {% set valeur = false %}
                                  <tr>
                                      <td>
                                          {{ response.question.question }}
                                      </td>
                                      <td>
                                          {% if response.reponseTexte is not null %}
                                            {{ response.reponseTexte }} ({{response.question.valeurCible}})
                                            {% set valeur = true %}
                                          {% endif %}
                                          {% if response.reponseNombre is not null %}
                                            {{ response.reponseNombre }} ({{response.question.valeurCible}})
                                            {% if response.question.valeurCible < response.reponseNombre %}
                                              {% set valeur = true %}
                                            {% endif %}
                                          {% endif %}
                                          {% if response.reponseBoolean is not null %}
                                            {% if response.reponseBoolean %}{% set valeurReponse = 'Oui' %}Oui{% else %}{% set valeurReponse = 'Non' %}Non{% endif %} ({% if response.question.valeurCible == 1 %}{% set valeurCible = 'Oui' %}Oui{% else %}{% set valeurCible = 'Non' %}Non{% endif %})
                                            {% if valeurCible == valeurReponse %}
                                              {% set valeur = true %}
                                            {% endif %}
                                          {% endif %}
                                      </td>
                                      <td>
                                          {% if response.user is not null %}
                                            <a href="javascript:void(0)" class="message-item d-flex align-items-center p-3">
                                              <span class="user-img position-relative d-inline-block">
                                                {% if response.user.image is not null %}
                                                  <img src="{{ asset('uploads/profiles/' ~ response.user.image) }}" alt="image de profil" class="img-fluid rounded-circle" width="40" height="40" id="imgProfile">
                                                {% else %}
                                                  {% set initials = response.user.prenom|slice(0, 1)|upper ~ response.user.nom|slice(0, 1)|upper %}
                                                  <span class="bg-primary text-white fs-6 round-40 rounded-circle me-n2 border border-2 border-white d-flex align-items-center justify-content-center">
                                                    {{ initials }}
                                                  </span>
                                                {% endif %}   
                                              </span>
                                              <div class="w-75 d-inline-block  ps-3">
                                                <h5 class="message-title mb-0 mt-1 fs-4">{{response.user.prenom}} {{response.user.nom}}</h5>
                                                <span class="fs-2 text-nowrap d-block time text-truncate text-muted">{{response.user.email}}</span>
                                              </div>
                                            </a>  
                                          {% endif %}
                                      </td>
                                      <td>
                                         {% if valeur %}
                                              <span class="badge bg-success-subtle text-success rounded-pill">
                                                <span class="round-8 text-bg-success rounded-circle d-inline-block me-1"></span>Réussi
                                              </span>
                                          {% else %}
                                              <span class="badge bg-danger-subtle text-danger rounded-pill">
                                                <span class="round-8 text-bg-danger rounded-circle d-inline-block me-1"></span>Echec
                                              </span>
                                          {% endif %}  
                                      </td>
                                      <td>
                                         {% if response.reponseTexte is null and response.reponseNombre is null and response.reponseBoolean is null %}
                                              <span class="badge bg-warning-subtle text-warning rounded-pill">
                                                <span class="round-8 text-bg-warning rounded-circle d-inline-block me-1"></span>Pas de réponse
                                              </span>
                                          {% else %}
                                              <span class="badge bg-success-subtle text-success rounded-pill">
                                                <span class="round-8 text-bg-success rounded-circle d-inline-block me-1"></span>Terminé
                                              </span>
                                          {% endif %}  
                                      </td>
                                  </tr>
                              {% endfor %}
                          {% endif %}

                          {# Questions par chambre #}
                          {% for room in group.rooms %}
                            
                              <tr>
                                  <td colspan="5" class="bg-light">
                                      <h5>{{ room.label }}</h5>
                                  </td>
                              </tr>

                              {% for response in room.responses %}
                                {% set valeur = false %}
                                  <tr>
                                      <td>
                                          {{ response.question.question }} 
                                      </td>
                                      <td>
                                          {% if response.reponseTexte is not null %}
                                            {{ response.reponseTexte }} ({{response.question.valeurCible}})
                                            {% set valeur = true %}
                                          {% endif %}
                                          {% if response.reponseNombre is not null %}
                                            {{ response.reponseNombre }} ({{response.question.valeurCible}})
                                            {% if response.question.valeurCible < response.reponseNombre %}
                                              {% set valeur = true %}
                                            {% endif %}
                                          {% endif %}
                                          {% if response.reponseBoolean is not null %}
                                            {% if response.reponseBoolean %}{% set valeurReponse = 'Oui' %}Oui{% else %}{% set valeurReponse = 'Non' %}Non{% endif %} ({% if response.question.valeurCible == 1 %}{% set valeurCible = 'Oui' %}Oui{% else %}{% set valeurCible = 'Non' %}Non{% endif %})
                                            {% if valeurCible == valeurReponse %}
                                              {% set valeur = true %}
                                            {% endif %}
                                          {% endif %}
                                      </td>
                                      <td>
                                          {% if response.user is not null %}
                                            <a href="javascript:void(0)" class="message-item d-flex align-items-center p-3">
                                              <span class="user-img position-relative d-inline-block">
                                                {% if response.user.image is not null %}
                                                  <img src="{{ asset('uploads/profiles/' ~ response.user.image) }}" alt="image de profil" class="img-fluid rounded-circle" width="40" height="40" id="imgProfile">
                                                {% else %}
                                                  {% set initials = response.user.prenom|slice(0, 1)|upper ~ response.user.nom|slice(0, 1)|upper %}
                                                  <span class="bg-primary text-white fs-6 round-40 rounded-circle me-n2 border border-2 border-white d-flex align-items-center justify-content-center">
                                                    {{ initials }}
                                                  </span>
                                                {% endif %}   
                                              </span>
                                              <div class="w-75 d-inline-block  ps-3">
                                                <h5 class="message-title mb-0 mt-1 fs-4">{{response.user.prenom}} {{response.user.nom}}</h5>
                                                <span class="fs-2 text-nowrap d-block time text-truncate text-muted">{{response.user.email}}</span>
                                              </div>
                                            </a>  
                                          {% endif %}
                                      </td>
                                      <td>
                                         {% if valeur %}
                                              <span class="badge bg-success-subtle text-success rounded-pill">
                                                <span class="round-8 text-bg-success rounded-circle d-inline-block me-1"></span>Réussi
                                              </span>
                                          {% else %}
                                              <span class="badge bg-danger-subtle text-danger rounded-pill">
                                                <span class="round-8 text-bg-danger rounded-circle d-inline-block me-1"></span>Echec
                                              </span>
                                          {% endif %}  
                                      </td>
                                      <td>
                                         {% if response.reponseTexte is null and response.reponseNombre is null and response.reponseBoolean is null %}
                                              <span class="badge bg-warning-subtle text-warning rounded-pill">
                                                <span class="round-8 text-bg-warning rounded-circle d-inline-block me-1"></span>Pas de réponse
                                              </span>
                                          {% else %}
                                              <span class="badge bg-success-subtle text-success rounded-pill">
                                                <span class="round-8 text-bg-success rounded-circle d-inline-block me-1"></span>Terminé
                                              </span>
                                          {% endif %}  
                                      </td>
                                  </tr>
                              {% endfor %}

                          {% endfor %}
                      {% endfor %}

                                  
                      </tbody>
                  </table>
              </div>
            </div>
            {% endif %}
          </div>
        </div>
      </div>
<script>
  const auditId = '{{audit.idtoken}}';
  const getQuestionRoute = "{{ path('audit_ajax_get_question', { 'id': 'ID_PLACEHOLDER' }) }}";
  const deleteQuestionRoute = "{{ path('question_delete', { 'id': 'ID_PLACEHOLDER' }) }}";

  function loadQuestion(){
    loadContent(getQuestionRoute, auditId, 'questionsContent');
}

function loadListQuestion(){
    loadContent(reponseListRoute, auditId, 'contentAudit');
}

  loadQuestion();

 document.addEventListener('DOMContentLoaded', () => {
        $('.select2').select2();

        $('.modal').on('shown.bs.modal', function () {
            $(this).find('.select2').select2({
                dropdownParent: $(this) // Utilise la modale courante comme parent
            });
        });

    });    

  document.addEventListener('DOMContentLoaded', function () {
      const groupSelect = document.querySelector('#groupe');
      const newGroup = document.querySelector('#question_newGroup');
      const newGroupInput = document.querySelector('#newgroupe');

      function toggleNewGroupField() {
          if (groupSelect.value === 'new') {
              newGroup.style.display = 'block';
              newGroupInput.setAttribute('required', 'required');
          } else {
              newGroup.style.display = 'none';
              newGroupInput.removeAttribute('required');
              newGroupInput.value = '';
          }
      }

      if (groupSelect) {
          groupSelect.addEventListener('change', toggleNewGroupField);
          toggleNewGroupField(); 
      }
  });

  document.addEventListener('DOMContentLoaded', function () {
      const typeSelect = document.querySelector('#target');
      const selectGroup = document.querySelector('#selectChambre');
      const selectInput = document.querySelector('#chambres');

      function toggleChambreGroupField() {
          if (typeSelect.value === 'chambre') {
              selectGroup.style.display = 'block';
              selectInput.setAttribute('required', 'required');
          } else {
              selectGroup.style.display = 'none';
              selectInput.removeAttribute('required');
          }
      }

      if (typeSelect) {
          typeSelect.addEventListener('change', toggleChambreGroupField);
          toggleChambreGroupField(); 
      }
  });

  $(document).on('change', '#type', function () {
    const selectedType = $(this).val();
    const $container = $('#valeurCibleContent');

    let newField = '';
    if (selectedType === 'texte') {
        newField = `<input type="text" class="form-control" name="valeurCible" data-field="valeurCible" required>`;
    } else if (selectedType === 'nombre') {
        newField = `<input type="number" step="0.01" class="form-control" name="valeurCible" data-field="valeurCible" required>`;
    } else if (selectedType === 'ouinon') {
        newField = `
            <div data-field="valeurCible">
              <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="valeurCible" id="oui" value="1" data-field="valeurCible" required>
                  <label class="form-check-label" for="oui">Oui</label>
              </div>
              <div class="form-check form-check-inline">
                  <input class="form-check-input" type="radio" name="valeurCible" id="non" value="0" data-field="valeurCible" required>
                  <label class="form-check-label" for="non">Non</label>
              </div>
            </div>
        `;
    }
    $container.html(newField);
});

$('#users').on('change', function (e) {
    // Récupère tous les utilisateurs sélectionnés
    let selectedUsers = $(this).val() || []; // Array d'id sélectionnés

    // Envoi des données via AJAX
    $.ajax({
        url: '{{path('audit_save_users')}}', // À adapter !
        type: 'POST',
        data: JSON.stringify({ users: selectedUsers, auditId: auditId }),
        contentType: 'application/json',
        success: function (response) {
            // Succès (affiche une notif ou un toast si tu veux)
            console.log('Utilisateurs enregistrés', response);
        },
        error: function (xhr) {
            alert("Erreur lors de l'enregistrement des utilisateurs !");
        }
    });
});
</script>

{% include '@Audit/audit/modal/new_audit.html.twig' %}
{% include '@Audit/audit/modal/new_question.html.twig' %}
{% include 'partials/modal/delete_modal.html.twig' %}    

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