<div class="centrar">
  <div class="fondo" [style.background-color]="color">
    <p class="content" [style.color]="textColor">CREACIÓN DE FORMULARIOS</p>
  </div>
</div>

<!-- MODAL PARA INGRESAR EL IDENTIFICADOR DEL CAMPO, SI QUIERES CREAR UNO NUEVO -->
<div class="modal" *ngIf="showModalIdentificador">
  <div class="modal-content">
    <span class="center">IDENTIFICADOR DEL CAMPO</span>
    <input [formControl]="nombreIdentificadorControl" placeholder="EJ. nombre_alumno">
    <div *ngIf="nombreIdentificadorControl.invalid && nombreIdentificadorControl.touched" class="error">
      INGRESA UN IDENTIFICADOR VÁLIDO (LETRAS, NÚMEROS Y GUIONES BAJOS)
    </div>
    <div class="modal-actions">
      <button (click)="confirmarIdentificador()">ACEPTAR</button>
      <button (click)="showModalIdentificador = false">CANCELAR</button>
    </div>
  </div>
</div>

<!-- MODAL DE ADVERTENCIA SI LA CELDA YA TIENE UN CAMPO -->
<div class="modal" *ngIf="showModal">
  <div class="modal-content">
    <p>ESTA CELDA YA TIENE UN CAMPO ASIGNADO, ELIMÍNALO O SELECCIONA OTRA CELDA</p>
    <button (click)="closeModal()">CERRAR</button>
  </div>
</div>

<!-- CONTENEDOR PRINCIPAL DEL FORMULARIO DINÁMICO -->
<div class="container-main" [formGroup]="form">

  <!-- PANEL DE CONFIGURACIÓN GENERAL -->
  <div class="container-formConfig">
    <app-configuration-panel
      [formTitle]="formTitle"
      [rows]="rows"
      [columns]="columns"
      [showTooltip]="showTooltip"
      [tabs]="tabs"
      [currentTab]="currentTab"
      (formTitleChange)="onFormTitleChange($event)"
      (rowsChange)="onRowsChange($event)"
      (columnsChange)="onColumnsChange($event)"
      (showTooltipChange)="onShowTooltipChange($event)"
      (generateClick)="saveOrUpdateForm()"
      (addTabClick)="addTab()"
      (removeTabClick)="removeTab()"
      (gridConfigChange)="buildGrid()"
      (tabDimensionsChange)="onTabDimensionsChange($event)">
    </app-configuration-panel>

    <!-- SELECTOR DE TIPOS DE CAMPO, SOLO SE MUESTRA SI HAY CELDA SELECCIONADA -->
    <div *ngIf="showElementSelector && selectedCell" class="selector">
      <p>SELECCIONA UN TIPO DE CAMPO PARA AGREGAR EN POSICIÓN {{ selectedCell.row + 1 }}, {{ selectedCell.col + 1 }} - {{ currentTab?.name }}</p>
      <div class="element-buttons">
        <button *ngFor="let el of availableElements" (click)="addElementToCell(el)" [style.background-color]="color">
          <p [style.color]="textColor">{{ el.label }}</p>
        </button>
      </div>
    </div>
  </div>

  <!-- CONTENEDOR PRINCIPAL: PANEL IZQUIERDO DE CONFIGURACIÓN + VISTA PREVIA -->
  <div class="main-content">

    <!-- VISTA PREVIA DEL FORMULARIO -->
    <div class="container-form">
      <div class="title-form">VISTA PREVIA DEL FORMULARIO</div>

      <!-- NAVEGACIÓN DE TABS (SECCIONES) -->
      <div class="tabs-navigation" *ngIf="tabs.length">
        <div class="tab-header">
          <div *ngFor="let tab of tabs; let i = index"
               class="tab-item"
               [class.active]="tab.active"
               (click)="switchToTab(tab)">

            <!-- INPUT PARA EDITAR NOMBRE DE LA TAB -->
            <input
              #tabInput
              type="text"
              class="tab-name-input"
              [value]="tab.name"
              (blur)="updateTabName(tab, tabInput.value)"
              (keyup.enter)="updateTabName(tab, tabInput.value)">

            <!-- BOTÓN PARA CERRAR TAB -->
            <button *ngIf="tabs.length > 1"
                    class="tab-close-btn"
                    (click)="removeTab(); $event.stopPropagation()">
              &times;
            </button>
          </div>
        </div>
      </div>

      <!-- CUADRÍCULA DE CAMPOS -->
      <div class="form-grid" [style.grid-template-columns]="'repeat(' + columns + ', 1fr)'">
        <div *ngFor="let row of grid; let i = index" class="grid-row">
          <div *ngFor="let cell of row; let j = index"
               class="grid-cell"
               [class.selected]="cell.selected"
               [class.has-element]="cell.element"
               (click)="selectCell(cell)"
               (dblclick)="selectElementForEditing(cell)">

            <!-- SI LA CELDA TIENE UN ELEMENTO -->
            <div *ngIf="cell.element" class="cell-element">
              <label>{{ cell.element.label }}</label>

              <!-- SWITCH SEGÚN EL TIPO DE ELEMENTO -->
              <ng-container [ngSwitch]="cell.element.type">
                <input *ngSwitchCase="'text'" type="text" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">
                <input *ngSwitchCase="'number'" type="number" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">
                <input *ngSwitchCase="'email'" type="email" class="form__input"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)">
                <input *ngSwitchCase="'date'" type="date" class="form__input"
                  [formControlName]="getSafeControlName(cell, i, j)">
                <textarea *ngSwitchCase="'textarea'" class="form__textarea"
                  [placeholder]="cell.element.placeholder"
                  [formControlName]="getSafeControlName(cell, i, j)"></textarea>
                <select *ngSwitchCase="'select'" class="form__select"
                  [formControlName]="getSafeControlName(cell, i, j)">
                  <option *ngFor="let option of cell.element.options">{{ option }}</option>
                </select>
                <div *ngSwitchCase="'radio'" class="form__radio-group">
                  <label *ngFor="let option of cell.element.options">
                    <input type="radio"
                      [formControlName]="getSafeControlName(cell, i, j)"
                      [value]="option">
                    {{ option }}
                  </label>
                </div>
                <label *ngSwitchCase="'checkbox'" class="form__checkbox">
                  <input type="checkbox" [formControlName]="getSafeControlName(cell, i, j)">
                  {{ cell.element.label }}
                </label>
              </ng-container>

              <!-- BOTÓN PARA ELIMINAR ELEMENTO DE LA CELDA -->
              <button class="remove-btn" (click)="removeElementFromCell(cell); $event.stopPropagation()">
                &times;
              </button>
            </div>

            <!-- SI LA CELDA ESTÁ VACÍA -->
            <div *ngIf="!cell.element" class="cell-placeholder">
              <span>POSICIÓN {{ i + 1 }},{{ j + 1 }}</span>
              <small>HAZ CLIC PARA AGREGAR UN CAMPO</small>
            </div>

          </div>
        </div>
      </div>
    </div>

  </div>

  <!-- PANEL DE PROPIEDADES DEL ELEMENTO SELECCIONADO -->
  <div class="container-formPropiedades">
    <app-properties-panel
      [element]="editingElement"
      (elementChange)="onEditingElementChange($event)"
      (closePanel)="editingElement = null">
    </app-properties-panel>
  </div>

</div>
