<!DOCTYPE html>
<html lang="es">
  <head>
    <%- include('partials/user/_head') %>
    <!-- Main script -->
    <script
      type="module"
      src="/assets/javascripts/main/user/evaluaciones/evaluacion.js"
    ></script>
    <!-- Logout -->
    <script
      type="module"
      src="/assets/javascripts/firebase/auth/logout.js"
    ></script>
  </head>

  <body>
    <%- include('partials/user/_header', { in_section: 'system', item_active:
    'evaluations' }) %>
    <!-- Modals -->
    <%- include('components/modals/error') %> <%-
    include('components/modals/warning') %>

    <main class="container">
      <h1 class="mb-3">Evaluación - <%= departamento.nombre %></h1>
      <form id="evaluationForm" action="./enviar" method="POST">
        <input
          type="hidden"
          name="departamento_id"
          value="<%= departamento.id %>"
        />

        <p class="text-uppercase large-bold">Secciones</p>

        <ul class="nav nav-tabs" id="evaluationTabs" role="tablist">
          <% seccionesPreguntas.forEach((seccion, sIndex) => { %>
          <li class="nav-item" role="presentation">
            <button
              type="button"
              class="nav-link <%= sIndex === 0 ? 'active' : '' %>"
              data-tab="<%= sIndex %>"
              role="tab"
            >
              <%= sIndex + 1 %>. <%= seccion.seccion %>
            </button>
          </li>
          <% }); %>
          <li class="nav-item" role="presentation">
            <button
              type="button"
              class="nav-link"
              data-tab="comentarios"
              role="tab"
            >
              <%= seccionesPreguntas.length + 1 %>. Comentarios
            </button>
          </li>
        </ul>

        <div class="tab-content mt-3">
          <% seccionesPreguntas.forEach((seccion, sIndex) => { %>
          <div
            class="tab-pane fade <%= sIndex === 0 ? 'show active' : '' %>"
            data-tab-content="<%= sIndex %>"
          >
            <div class="carousel" data-section-index="<%= sIndex %>">
              <% seccion.preguntas.forEach((pregunta, pIndex) => { %>
              <div
                class="carousel-slide <%= pIndex === 0 ? 'active' : '' %>"
                data-question-index="<%= pIndex %>"
              >
                <div class="question-text text-center">
                  <p class="large-bold">
                    <%= sIndex + 1 %>.<%= pIndex + 1 %>. <%= pregunta.texto %>
                  </p>
                </div>
                <div class="question-options text-center mb-4">
                  <% [0, 1, 2, 3, 4].forEach(num => { %>
                  <div class="form-check d-inline-block">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="<%= pregunta.id %>"
                      id="respuesta-<%= sIndex %>-<%= pIndex %>-opcion-<%= num %>"
                      value="<%= num %>"
                    />
                    <label
                      class="form-check-label custom-radio option-<%= num %>"
                      for="respuesta-<%= sIndex %>-<%= pIndex %>-opcion-<%= num %>"
                    >
                      <iconify-icon
                        class="icon"
                        icon="<%= respuestasLikert[num].icono %>"
                        width="32"
                        height="32"
                      >
                      </iconify-icon>
                      <span><%= respuestasLikert[num].texto %></span>
                    </label>
                  </div>
                  <% }); %>
                </div>
              </div>
              <% }); %>
              <div
                class="carousel-controls mt-2 d-flex justify-content-between align-items-center"
              >
                <button
                  type="button"
                  class="carousel-prev btn btn-secondary btn-sm"
                >
                  <iconify-icon
                    class="icon"
                    icon="bi:arrow-left"
                    width="24"
                    height="24"
                  >
                  </iconify-icon>
                  Anterior
                </button>
                <div class="carousel-indicators">
                  <% seccion.preguntas.forEach((_, pIndex) => { %>
                  <button
                    type="button"
                    class="<%= pIndex === 0 ? 'active' : '' %>"
                    data-target="<%= pIndex %>"
                  >
                    <%= pIndex + 1 %>
                  </button>
                  <% }); %>
                </div>
                <button
                  type="button"
                  class="carousel-next btn btn-secondary btn-sm"
                >
                  Siguiente
                  <iconify-icon
                    class="icon"
                    icon="bi:arrow-right"
                    width="24"
                    height="24"
                  >
                  </iconify-icon>
                </button>
              </div>
            </div>
          </div>
          <% }); %>
          <div class="tab-pane fade" data-tab-content="comentarios">
            <div class="form-group mb-3">
              <label for="comentarios" class="form-label large-bold"
                >Comentario adicional (opcional)</label
              >
              <textarea
                id="comentarios"
                name="comentarios"
                class="form-control"
                rows="3"
                placeholder="Lo que quieras que sepamos..."
                maxlength="250"
              ></textarea>
              <small class="form-text text-muted">Máximo 250 caracteres.</small>
            </div>
            <button type="submit" class="btn btn-primary">
              Terminar evaluación
            </button>
          </div>
        </div>
      </form>
    </main>

    <%- include('partials/user/_footer') %>
  </body>
</html>
