<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="goback" nameButton="Regresar"/>
  <mat-card class="override-card override-elevation-z8">
    @if (!isLoading) {
      <mat-card-title class="mat-card-title centre">{{ title }}</mat-card-title>
    } @else {
      <div style="width: 100%; height: 62px; display: flex; align-items: center;">
        <mat-progress-bar mode="indeterminate"></mat-progress-bar>
      </div>
    }
    <main class="main_content">
      <aside>
        <mat-vertical-stepper #stepper animationDuration="500">
          <mat-step [stepControl]="formGroupUbication">
            <ng-template matStepLabel>
              Datos generales
            </ng-template>
            <div class="mb-24 mt-24">
              Configuración de la ubicación del formulario dinámico.
            </div>
            <form [formGroup]="formGroupUbication" class="override_content_flex mt-4">
              <div class="col-flex-12">
                @if (!isLoadingFieldModule) {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>Módulo</mat-label>
                    <mat-select formControlName="MODULO">
                      @for (module of arrModules; track module) {
                        <mat-option [value]="module.ID_MODULO">{{ module.NOMBRE_MODULO }}</mat-option>
                      }
                    </mat-select>
                    <mat-icon matSuffix>widgets</mat-icon>
                    @if (formGroupUbication.controls['MODULO'].hasError('required')) {
                      <mat-error title="El campo Módulo es obligatorio">
                        El campo <b>Módulo</b> es obligatorio
                      </mat-error>
                    }
                  </mat-form-field>
                } @else {
                  <div class="container-load-form w-90">
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                  </div>
                }
              </div>
              <div class="col-flex-12">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label>Título para registro</mat-label>
                  <input matInput type="text" formControlName="REGISTRO_FORMULARIO" maxlength="50" />
                  <mat-icon matSuffix>feed</mat-icon>
                  @if (formGroupUbication.controls['REGISTRO_FORMULARIO'].hasError('required')) {
                    <mat-error title="El campo Título para registro es obligatorio">
                      El campo <b>Título para registro</b> es obligatorio
                    </mat-error>
                  }
                </mat-form-field>
              </div>
              
              <div class="col-flex-12">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label>Título para modificación</mat-label>
                  <input matInput type="text" formControlName="MODIFICA_FORMULARIO" maxlength="50" />
                  <mat-icon matSuffix>feed</mat-icon>
                  @if (formGroupUbication.controls['MODIFICA_FORMULARIO'].hasError('required')) {
                    <mat-error title="El campo Título para modificación es obligatorio">
                      El campo <b>Título para modificación</b> es obligatorio
                    </mat-error>
                  }
                </mat-form-field>
              </div>
              <div class="mt-8">
                <button mat-button matStepperNext [disabled]="formGroupUbication.invalid">Siguiente</button>
              </div>
            </form>
          </mat-step>
          <mat-step [stepControl]="formGroupDatabase">
            <ng-template matStepLabel>Datos de la base de datos</ng-template>
            <div class="mb-24 mt-24">Configuración del almacenado de la base de datos para la creación del formulario dinámico.</div>
            <form [formGroup]="formGroupDatabase" class="override_content_flex mt-4">
              <div class="col-flex-12">
                @if (!isLoadingFieldTableName) {
                  <mat-form-field appearance="outline" class="w-100">
                    <mat-label>Tablas</mat-label>
                    <mat-select formControlName="TABLA" multiple>
                      @for (tableName of arrTablesName; track tableName) {
                        <mat-option [value]="tableName.NOMBRE_TABLA">
                          {{ tableName.NOMBRE_TABLA }}
                        </mat-option>
                      }
                    </mat-select>
                    <mat-icon matSuffix>table_chart</mat-icon>
                    @if (formGroupDatabase.controls['TABLA'].hasError('required')) {
                      <mat-error title="El campo Tabla principal es obligatorio">
                        El campo <b>Tabla principal</b> es obligatorio
                      </mat-error>
                    }
                    @if (typeForm === 'R') {
                      <mat-hint [class]=" !isLoading ? 'item_columns' : 'item_columns_disabled'" (click)="openCreateTable()">
                        Clic para registrar las tablas
                      </mat-hint>
                    }
                  </mat-form-field>
                } @else {
                  <div class="container-load-form w-90">
                    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
                  </div>
                }
              </div>
              <div class="col-flex-12">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label>Columas de la tabla</mat-label>
                  <mat-select formControlName="COLUMNAS" multiple>
                    @for (columnsTable of arrColumnsTable; track columnsTable) {
                      <mat-optgroup [label]="columnsTable.NOMBRE_TABLA">
                        @for (column of columnsTable.COLUMNS; track column) {
                          <mat-option [value]="column.COLUMN" [disabled]="disabledColumnNative(column.COLUMN)">
                            {{ column.COLUMN }} - {{ column.COMMENTS }}
                          </mat-option>
                        }
                      </mat-optgroup>
                    }
                    @if (arrColumnsPersonality.length > 0) {
                      <div class="title_personality">Datos personalizados</div>
                      @for (columnsPersonality of arrColumnsPersonality; track columnsPersonality) {
                        <mat-optgroup [label]="columnsPersonality.TABLA">
                          @for (column of columnsPersonality.COLUMNS; track column) {
                            <mat-option [value]="column.COLUMN">{{ column.COLUMN }} - {{ column.DESCRIPTION }}</mat-option>
                          }
                        </mat-optgroup>
                      }
                    }
                  </mat-select>
                  <mat-icon matSuffix>table_chart</mat-icon>
                  @if (formGroupDatabase.controls['COLUMNAS'].hasError('required')) {
                    <mat-error title="El campo Columas de la tabla es obligatorio">
                      El campo <b>Columas de la tabla</b> es obligatorio
                    </mat-error>
                  }
                  <mat-hint [class]=" !isLoading ? 'item_columns' : 'item_columns_disabled'" (click)="formColumns()">
                    Clic para nuevas columnas
                  </mat-hint>
                </mat-form-field>
              </div>
              <div class="mt-8">
                <button mat-button matStepperPrevious>Anterior</button>
                <button mat-button matStepperNext [disabled]="formGroupDatabase.invalid">Siguiente</button>
              </div>
            </form>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>
              Componentes del formulario
            </ng-template>
            <div class="mb-24 mt-24 w-95">
              Arraste un componente para ingresarlo al formulario y comenzar con su configuración.
            </div>
            <div
              cdkDropList
              #todoList="cdkDropList"
              [cdkDropListData]="arrFormItem"
              [cdkDropListConnectedTo]="[doneList]"
              class="selection-form"
              (cdkDropListDropped)="dropItems($event)">
                @for (formItem of arrFormItem; track formItem) {
                  <div 
                    class="item_select_form" 
                    cdkDrag 
                    [cdkDragDisabled]="isLoading || arrDataForm.length === formGroupDatabase.controls['COLUMNAS'].value.length">
                      @if (isLoading) {
                        <mat-spinner class="load_item"></mat-spinner>
                      } @else {
                        @if (arrDataForm.length !== formGroupDatabase.controls['COLUMNAS'].value.length) {
                          <mat-icon>open_with</mat-icon>
                        } @else {
                          <mat-icon>do_not_touch</mat-icon>
                        }
                      }
                      {{ formItem }}
                      @if (isLoading) {
                        <mat-spinner class="load_item"></mat-spinner>
                      } @else {
                        @if (arrDataForm.length !== formGroupDatabase.controls['COLUMNAS'].value.length) {
                          <mat-icon>open_with</mat-icon>
                        } @else {
                          <mat-icon>do_not_touch</mat-icon>
                        }
                      }
                  </div>
                } 
            </div>
            <div class="align-end w-95">
              Componentes: {{ formGroupDatabase.controls['COLUMNAS'].value.length }}/{{ arrDataForm.length }}
            </div>
            <div class="mt-16">
              <button mat-button matStepperPrevious>Anterior</button>
              <button mat-button matStepperNext [disabled]="arrDataForm.length === 0">Siguiente</button>
            </div>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>Validación de formulario (para modificación)</ng-template>
            <div class="mt-24">
              Se seleccionan las columnas que serán de apoyo para validar la información del formulario cuando este se encuentre en modo de <i>Modificación</i>.
            </div>
            <button mat-flat-button color="primary" (click)="registerColumnsValidation()" class="w-100 mt-24" [disabled]="validaeColumnsValidation()">
              <mat-icon>add</mat-icon>
              Registro de validación
            </button>
            <div>
              @for (infoValidate of arrInformationValidate; track infoValidate; let idxTable = $index) {
                <div class="container_table content_columns">
                  <div class="content_columns">
                    <div class="content_table_name">
                      <mat-icon>arrow_right</mat-icon>
                      <b>{{ infoValidate.TABLA }}</b>
                    </div>
                    <div class="item_content_option">
                      <button mat-icon-button color="warn" (click)="deleteColumnsValidation(idxTable)">
                        <mat-icon>delete</mat-icon>
                      </button>
                    </div>
                  </div>
                  @for (column of infoValidate.COLUMNAS; track column; let idxColumn = $index) {
                    <div class="item_content_column"> {{ column }} </div>
                  }
                </div>
            }
            </div>
            <div class="mt-16">
              <button mat-button matStepperPrevious>
                Anterior
              </button>
              <button mat-button matStepperNext [disabled]="arrInformationValidate.length !== formGroupDatabase.controls['TABLA'].value.length">
                Siguiente
              </button>
            </div>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>Generar formulario</ng-template>
            <div class="mt-24">
              De clic en <b>Guardar</b> cuando esté listo. Esta acción comenzará con la conservación del formulario dinámico.
            </div>
            <div class="content_final_step">
              <div class="content_final_button_option mt-24">
                <button 
                  mat-stroked-button 
                  matStepperPrevious 
                  style="width: calc(50% - 3px);">
                    Anterior
                </button>
                <button 
                  style="width: calc(50% - 3px);"
                  mat-stroked-button
                  [disabled]="arrDataForm.length === 0 || isLoading || formGroupUbication.invalid || formGroupDatabase.invalid"
                  [matMenuTriggerFor]="menu">
                    Ver ejemplo
                </button>
              </div>
              <mat-menu #menu="matMenu">
                <button mat-menu-item (click)="openGenerateExampleRegister()">
                  Formulario de registro
                </button>
                <button mat-menu-item (click)="openGenerateExampleUpdate()">
                  Formulario de modificación
                </button>
              </mat-menu>
              <button 
                mat-flat-button 
                color="primary" 
                (click)="save()"
                [disabled]="formGroupUbication.invalid || formGroupDatabase.invalid || formGroupDatabase.controls['COLUMNAS'].value.length > arrDataForm.length || arrInformationValidate.length === 0"
                class="w-100 mt-8">
                  Guardar
              </button>
            </div>
          </mat-step>
        </mat-vertical-stepper>
      </aside>
      <section>
        <div
          cdkDropList
          #doneList="cdkDropList"
          [cdkDropListData]="arrDataForm"
          class="form-selected"
          (cdkDropListDropped)="drop($event)">
            @if (!isLoading) {
              @for (dataForm of arrDataForm; track dataForm; let index = $index;) {
                <div class="item-form-selected" cdkDrag>
                  <div class="info-form-selected">
                    <mat-icon>arrow_right</mat-icon>
                    <div>
                      <div>{{ dataForm.TYPE_COMPONENT }}</div>
                      <div>{{ dataForm.COMPONENT.ETIQUETA }} ({{ dataForm.COMPONENT.IDENTIFICADOR }})</div>
                    </div>
                  </div>
                  <div>
                    <button 
                      mat-icon-button 
                      color="primary" 
                      (click)="updateDataForm(index)" 
                      [disabled]="formGroupDatabase.invalid || formGroupUbication.invalid"
                      matTooltip="Editar">
                        <mat-icon>edit</mat-icon>
                    </button>
                    <button 
                      mat-icon-button 
                      class="gray_dark_font" 
                      (click)="openExample(index)" 
                      [disabled]="formGroupDatabase.invalid || formGroupUbication.invalid"
                      matTooltip="Ver ejemplo">
                        <mat-icon>preview</mat-icon>
                    </button>
                    <button 
                      mat-icon-button 
                      color="warn" 
                      (click)="alertDeleteDataForm(index)" 
                      [disabled]="formGroupDatabase.invalid || formGroupUbication.invalid || disabledColumnNative(dataForm.COMPONENT.COLUMNA)"
                      matTooltip="Eliminar">
                        <mat-icon>delete</mat-icon>
                    </button>
                  </div>
                </div>
              } @empty {
                <div class="empty_data_components">
                  <img src="assets/img/transfer_files.svg" alt="">
                  <div>
                    <mat-icon>open_with</mat-icon> 
                    Arraste un componente para registrar al formulario
                    <mat-icon>open_with</mat-icon> 
                  </div>
                </div>
              }
            } @else {
              <div class="container_loading">
                <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información"/>
              </div>
            }
        </div>
        <div class="option_forms">
          <button 
            mat-button
            [disabled]="arrDataForm.length === 0 || isLoading || formGroupUbication.invalid || formGroupDatabase.invalid"
            [matMenuTriggerFor]="menu">
              Ver ejemplo
          </button>
          <mat-menu #menu="matMenu">
            <button mat-menu-item (click)="openGenerateExampleRegister()">
              Formulario de registro
            </button>
            <button mat-menu-item (click)="openGenerateExampleUpdate()">
              Formulario de modificación
            </button>
          </mat-menu>
        </div>
      </section>
    </main>
  </mat-card>
</main>