<div class="container-fluid">
  <div class="title-section">
    <h2>{{ questionario.titulo }}</h2>
  </div>

  <div class="container-responder">
    <p class="prazo"><strong>Prazo:</strong> {{ questionario.dataValidade | date: 'dd/MM/yyyy' }}</p>
    <p class="description">{{ questionario.descricao }}</p>

    <form (ngSubmit)="enviarRespostas()">

      <div *ngFor="let pergunta of questionario.perguntas; let i = index" class ="pergunta-box">
        <label class="pergunta">{{ i + 1 }}. {{ pergunta.texto }}</label>
        <div [ngSwitch]="pergunta.tipo">

          <div *ngSwitchCase="'LIKERT'" class="opcoes-resposta">
            <button 
              type="button" 
              *ngFor="let opcao of pergunta.opcoes" 
              (click)="selecionarResposta(pergunta.id!, opcao.id!)"
              [class.selecionado]="isOpcaoSelecionada(pergunta.id!, opcao.id!)" 
              class="opcao-quadrado">
              {{ opcao.textoOpcao }}
            </button>
          </div>

          <div *ngSwitchCase="'SIM/NÃO'" class="opcoes-resposta">
            <button 
              type="button" 
              *ngFor="let opcao of pergunta.opcoes" 
              (click)="selecionarResposta(pergunta.id!, opcao.id!)"
              [class.selecionado]="isOpcaoSelecionada(pergunta.id!, opcao.id!)" 
              class="opcao-quadrado">
              {{ opcao.textoOpcao }}
            </button>
          </div>

          <div *ngSwitchCase="'MULTIPLA_ESCOLHA'" class="opcoes-multipla-escolha">
            <label *ngFor="let opcao of pergunta.opcoes" class="opcao-checkbox">
              <input type="checkbox" 
                    [checked]="isOpcaoSelecionada(pergunta.id!, opcao.id!)"
                    (change)="selecionarMultiplaEscolha(pergunta.id!, opcao.id!, $event)">
              <span>{{ opcao.textoOpcao }}</span>
            </label>
          </div>

          <div *ngSwitchCase="'ABERTA'">
              <textarea class="resposta-aberta" 
                  rows="2" 
                  placeholder="Digite sua resposta aqui..."
                  [value]="getRespostaAberta(pergunta.id!)"
                  (input)="atualizarRespostaAberta(pergunta.id!, $event)"
                  [name]="pergunta.id!.toString()"
                  maxlength="120">
              </textarea>
              <div class="contador-caracteres">{{ getRespostaAberta(pergunta.id!)?.length || 0 }} / 120</div>
          </div>

        </div>
        
      </div>   

      <div class="botoes">
        <button type="button" class="btn-cancelar" (click)="cancelar()">Cancelar</button>
        <button type="submit" class="btn-enviar" [disabled]="formInvalido()">Enviar Respostas</button>
      </div>
    </form>
  </div>
</div>

