<div *ngIf="mensajeExito" class="mensaje-exito">
  {{ mensajeExito }}
</div>

<!-- Solo mostrar formulario si form y configuration.tabs existen -->
<div *ngIf="form && configuration && configuration.tabs; else cargando">
  <form [formGroup]="form" (ngSubmit)="onSubmit()" class="containerPagina">

    <mat-tab-group [(selectedIndex)]="selectedTabIndex">

      <mat-tab *ngFor="let tab of configuration.tabs" [label]="tab.title">

        <div class="grid" [style.gridTemplateColumns]="'repeat(' + tab.columns + ', 1fr)'" style="gap: 16px; padding: 16px;">

          <div *ngFor="let el of tab.elements" class="form-element"
               [style.gridColumnStart]="el.position.col + 1"
               [style.gridRowStart]="el.position.row + 1">

            <label [for]="el.element.name">{{ el.element.label }}</label>

            <!-- Inputs tipo text, email, date, number -->
        <input *ngIf="['text', 'email', 'date', 'number'].includes(el.element.type)"
       [attr.type]="el.element.type"
       [formControlName]="el.element.name"
       [attr.placeholder]="el.element.placeholder"
       [attr.max]="el.element.type === 'date' ? hoy : null"
       class="input-field" />


            <!-- Textarea -->
            <textarea *ngIf="el.element.type === 'textarea'"
                      [formControlName]="el.element.name"
                      [attr.placeholder]="el.element.placeholder"
                      class="textarea-field"></textarea>

            <!-- Select -->
            <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 -->
            <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 -->
            <div *ngIf="el.element.type === 'checkbox'" class="checkbox-group">
              <input type="checkbox" [formControlName]="el.element.name" /> {{ el.element.label }}
            </div>

            <!-- Validaciones simples -->
            <div class="error" *ngIf="form.controls && 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>
                          <small *ngIf="form.controls[el.element.name]?.errors?.['soloEspacios']">
  {{ el.element.label }} no puede contener solo espacios en blanco.
</small>
              <small *ngIf="form.controls[el.element.name]?.errors?.['pattern']">
                El formato de {{ el.element.label }} no es válido.
              </small>
        <small *ngIf="form.controls[el.element.name].errors?.['minlength']">
  {{ el.element.label }} debe tener al menos
  {{ form.controls[el.element.name].errors?.['minlength'].requiredLength }} caracteres.
</small>

<small *ngIf="form.controls[el.element.name].errors?.['maxlength']">
  {{ el.element.label }} debe tener máximo
  {{ form.controls[el.element.name].errors?.['maxlength'].requiredLength }} caracteres.
</small>

              <small *ngIf="form.controls[el.element.name]?.errors?.['min']">
                El valor mínimo para {{ el.element.label }} es {{ el.element.min }}.
              </small>
              <small *ngIf="form.controls[el.element.name]?.errors?.['max']">
                El valor máximo para {{ el.element.label }} es {{ el.element.max }}.
              </small>

            </div>

          </div>

        </div>

      </mat-tab>

    </mat-tab-group>

    <div class="button-container" style="margin-top: 16px;">
      <button type="submit" [disabled]="form.invalid" class="submit-button mat-raised-button mat-primary"
       [style.background-color]="color" >

       <p  [style.color]="textColor" >Enviar</p>
      </button>
    </div>

  </form>
</div>

<ng-template #cargando>
  <p>Cargando formulario...</p>
</ng-template>
