<!-- // FORMULARIO PRINCIPAL: SE MUESTRA SOLO SI EL FORM EXISTE, AQUÍ SE MANEJA TODO EL SUBMIT -->
<form [formGroup]="form" (ngSubmit)="onSubmit()" *ngIf="form" class="containerPagina">

  <!-- // GRUPO DE TABS: CADA TAB ES UNA SECCIÓN DEL FORMULARIO -->
  <mat-tab-group [(selectedIndex)]="selectedTabIndex">
    <mat-tab *ngFor="let tab of configuration.tabs" [label]="tab.title">

      <!-- // GRID DEL TAB: AQUI SE COLOCAN LOS ELEMENTOS SEGUN FILAS Y COLUMNAS -->
      <div class="grid" [style.gridTemplateColumns]="'repeat(' + tab.columns + ', 1fr)'" style="gap: 16px; padding: 16px;">

        <!-- // CADA ELEMENTO DEL FORMULARIO: SE POSICIONA EN SU COLUMNA Y FILA -->
        <div *ngFor="let el of tab.elements" class="form-element"
             [style.gridColumnStart]="el.position.col + 1"
             [style.gridRowStart]="el.position.row + 1">

          <!-- // LABEL DEL ELEMENTO -->
          <label [for]="el.element.name">{{ el.element.label }}</label>

          <!-- // INPUTS SIMPLES: TEXTO, EMAIL, FECHA, NÚMERO -->
          <input *ngIf="['text', 'email', 'date', 'number'].includes(el.element.type)"
                 [attr.type]="el.element.type"
                 [formControlName]="el.element.name"
                 [attr.placeholder]="el.element.placeholder"
                 class="input-field" />

          <!-- // TEXTAREA: SI EL ELEMENTO ES DE TIPO TEXTO GRANDE -->
          <textarea *ngIf="el.element.type === 'textarea'"
                    [formControlName]="el.element.name"
                    [attr.placeholder]="el.element.placeholder"
                    class="textarea-field"></textarea>

          <!-- // SELECT: LISTA DESPLEGABLE -->
          <select *ngIf="el.element.type === 'select'" [formControlName]="el.element.name" class="select-field">
            <option *ngFor="let option of el.element.options" [value]="option">{{ option }}</option>
          </select>

          <!-- // RADIO BUTTONS: OPCIONES MULTIPLES PERO SOLO SE PUEDE SELECCIONAR UNA -->
          <div *ngIf="el.element.type === 'radio'" class="radio-group">
            <label *ngFor="let option of el.element.options" class="radio-label">
              <input type="radio" [formControlName]="el.element.name" [value]="option" /> {{ option }}
            </label>
          </div>

          <!-- // CHECKBOX: CASILLA DE VERIFICACIÓN, SE PUEDE MARCAR O NO -->
          <div *ngIf="el.element.type === 'checkbox'" class="checkbox-group">
            <input type="checkbox" [formControlName]="el.element.name" /> {{ el.element.label }}
          </div>

          <!-- // VALIDACIONES SIMPLES: SOLO REQUIRED POR AHORA, SE MUESTRA SI EL USUARIO TOCÓ EL CAMPO -->
          <div class="error" *ngIf="form.controls[el.element.name].invalid && form.controls[el.element.name].touched">
            <small *ngIf="form.controls[el.element.name].errors?.['required']">{{ el.element.label }} ES REQUERIDO.</small>
          </div>

        </div>
      </div>

    </mat-tab>
  </mat-tab-group>

  <!-- // BOTÓN DE ENVÍO: SOLO SE ACTIVA SI EL FORM ES VÁLIDO -->
  <div class="button-container">
    <button type="submit" [disabled]="form.invalid" class="submit-button">ENVIAR</button>
  </div>

</form>
