<div style="width: 100%; height: 100vh; display: flex; flex-direction: column">
  <div style="display: flex; align-items: center;">

    <nav id="navigation" style="width: calc(100% / 3); margin-left: 10px;">
      <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="alert('exit')" matRipple>
        <mat-icon style="color: white;">arrow_back</mat-icon>
        <div class="page-name ml-4">Gestión de Formularios</div>
      </div>
    </nav>
    <mat-card-title class="mat-card-title centre" style="width: calc(100% / 3);">
      {{ id_form == 0 ? 'Creación de Formulario' : 'Modificación de Formulario' }}
    </mat-card-title>
    <div style="width: calc(100% / 3); display: flex; justify-content: flex-end;">

    </div>
  </div>
  <mat-progress-bar mode="indeterminate" *ngIf="isLoading"></mat-progress-bar>
  <div class="container">
    <div class="toolbar-container ">
      <mat-accordion>
        <!-- Ubicación de la tabla -->
        <mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
          <mat-expansion-panel-header>
            <mat-panel-title>Ubicación</mat-panel-title>
            <mat-panel-description>Configuración del Formulario</mat-panel-description>
          </mat-expansion-panel-header>
          <form [formGroup]="formGroupUbication">
            <mat-grid-list cols="1" rowHeight="82px">
              <mat-grid-tile colspan="1">
                <h1>Seleccione la ubicación de la tabla</h1>
              </mat-grid-tile>
              <mat-grid-tile colspan="1" *ngIf="id_form == 0">
                <mat-form-field appearance="outline">
                  <mat-label>Módulo</mat-label>
                  <mat-select formControlName="modulo_data" matNativeControl>
                    <mat-option *ngFor="let modulo of arr_modulo" [value]="modulo">{{ modulo.MODULO }}</mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Nombre del Registro del Formulario</mat-label>
                  <input matInput formControlName="form_name_register" placeholder="Ingrese el título del formulario de registro" />
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Nombre de la Modificación del Formulario</mat-label>
                  <input matInput formControlName="form_name_update" placeholder="Ingrese el título del formulario de modificación"/>
                </mat-form-field>
              </mat-grid-tile>
            </mat-grid-list>
            <section>
              <mat-checkbox class="example-margin" formControlName="workflow">Habilitar para Workflow</mat-checkbox>
            </section>
            <div align="end">
              <button mat-raised-button color="primary" (click)="nextStep()" [disabled]="!formGroupUbication.valid" class="override-no-shadow">
                <mat-icon>south</mat-icon>
                Siguiente
              </button>
            </div>
          </form>
        </mat-expansion-panel>

        <!-- Selección de tablas -->
        <mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle [disabled]="!formGroupUbication.valid">
          <mat-expansion-panel-header>
            <mat-panel-title> Tablas BD </mat-panel-title>
            <mat-panel-description>Selección de tablas de la base de datos</mat-panel-description>
          </mat-expansion-panel-header>
          <form [formGroup]="formGroupTableDB">
            <mat-grid-list cols="1" rowHeight="82px" >
              <mat-grid-tile colspan="1">
                <h1>Seleccione los datos de la tabla</h1>
              </mat-grid-tile>

              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Tabla principal</mat-label>
                  <mat-select formControlName="main_table" (selectionChange)="setColumns()">
                    <mat-option *ngFor="let data_table of arr_table" [value]="data_table.NOMBRE_TABLA">{{ data_table.NOMBRE_TABLA.toUpperCase() }}</mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-grid-tile>

              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Tablas relacionales</mat-label>
                  <mat-select formControlName="relation_table" multiple (selectionChange)="dataColumns()">
                    <mat-option *ngFor="let data_relation of arr_relationship" [value]="data_relation.NOMBRE_TABLA">{{ data_relation.NOMBRE_TABLA.toUpperCase() }}</mat-option>
                  </mat-select>
                </mat-form-field>
              </mat-grid-tile>

              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Columnas</mat-label>
                  <mat-select formControlName="columns" multiple (selectionChange)="generateModel()">
                    <mat-optgroup *ngFor="let data of arr_columns" [label]="data.table">
                      <mat-option *ngFor="let column of data.columns" [value]="column.column" [disabled]="column.disable">
                        {{ column.column }}
                      </mat-option>
                    </mat-optgroup>
                  </mat-select>
                </mat-form-field>
              </mat-grid-tile>
            </mat-grid-list>
          </form>
          <div class="mb-8" align="end">
            <mat-checkbox [(ngModel)]="isWithoutTable" [disabled]="main_table?.value === ''">Hábilitar columnas sin tabla</mat-checkbox>
          </div>
          <form>
            <div *ngIf="isWithoutTable">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label>Nueva Columna</mat-label>
                <input matInput [(ngModel)]="newInput" maxlength="4" name="newInput" placeholder="Ingrese el nombre de la nueva columna" oninput="this.value = this.value.toUpperCase()" />
                <span matPrefix class="ml-16">{{ main_table?.value.substring(8,main_table?.value.length).toUpperCase() }}_</span>
                <button matSuffix mat-icon-button [disabled]="newInput.length < 4" (click)="addNewColumn()">
                  <mat-icon>add</mat-icon>
                </button>
              </mat-form-field>

              <div>
                <mat-list *ngIf="arrNewColumns.length > 0">
                  <mat-list-item *ngFor="let column of arrNewColumns; let i = index">
                    <div style="display: flex;">
                      <mat-icon mat-list-icon (click)="deleteNewColumn(column)" style="color: red; cursor:pointer;">close</mat-icon>
                      <div>{{ column.toUpperCase() }}</div>
                    </div>
                  </mat-list-item>
                </mat-list>
              </div>

            </div>
          </form>
          <div align="end">
            <button mat-raised-button color="warn" (click)="prevStep()" class="override-no-shadow">
              <mat-icon>north</mat-icon>
              Anterior
            </button>
            <button mat-raised-button color="primary" [disabled]="!formGroupTableDB.valid || aux_columns.length === 0" (click)="nextStep()" class="override-no-shadow ml-4">
              <mat-icon>south</mat-icon>
              Siguiente
            </button>
          </div>
        </mat-expansion-panel>

        <!-- Creación de formulario -->
        <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle (click)="validateDataColumns()" [disabled]="aux_columns.length === 0">
          <mat-expansion-panel-header>
            <mat-panel-title> Formulario </mat-panel-title>
            <mat-panel-description>Creación de formulario</mat-panel-description>
          </mat-expansion-panel-header>
          <div class="mb-15">
            <h2 style="margin: 0;">Elementos del formulario</h2>
            <h4 style="font-weight: 300">Arrastre el elemento a un formulario</h4>
          </div>
          <div class="drag-container">
            <div cdkDropList #pendingList="cdkDropList" [cdkDropListData]="opciones" [cdkDropListConnectedTo]="connectedTo" class="example-list" (cdkDropListDropped)="drop($event)">
              <div class="example-box" *ngFor="let item of opciones" cdkDrag
                [cdkDragDisabled]="aux_columns.length === 0">
                {{ item }}
              </div>
            </div>
          </div>
          <div align="end" class="mt-16">
            <button mat-raised-button color="warn" (click)="prevStep()" class="override-no-shadow">
              <mat-icon>north</mat-icon>
              Anterior
            </button>
            <button mat-raised-button color="primary" class="override-no-shadow ml-4" [disabled]="!formGroupUbication.valid || !formGroupTableDB.valid || aux_columns.length !== 0" (click)="nextStep()">
              <mat-icon>south</mat-icon>
              Siguiente
            </button>
          </div>
        </mat-expansion-panel>

        <!-- Asignación de Usuarios y Fechas -->
        <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)" hideToggle>
          <mat-expansion-panel-header>
            <mat-panel-title> Usuarios y Fechas </mat-panel-title>
            <mat-panel-description> Asignación de usuarios y Fechas </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-flat-button color="primary" (click)="openDialogUsersDates()" class="w-100">
            <mat-icon>add</mat-icon> Registrar
          </button>
          <div>
            <mat-list *ngIf="arr_users_dates.length > 0">
              <mat-list-item *ngFor="let item of arr_users_dates; let i = index">
                <div style="display: flex;">
                  <mat-icon mat-list-icon (click)="deleteUserDate(item.table)" style="color: red; cursor:pointer;">close</mat-icon>
                  <div>{{ item.table.toUpperCase() }}</div>
                </div>
              </mat-list-item>
            </mat-list>

            <div *ngIf="arr_users_dates.length == 0" align="center" class="mt-50">
              <object data="assets/img/empty_data.svg" width="200"></object>
              <h2>Sin datos</h2>
            </div>
          </div>
          <div align="end">
            <button mat-raised-button color="warn" (click)="prevStep()" class="override-no-shadow">
              <mat-icon>north</mat-icon>
              Anterior
            </button>
            <button mat-raised-button color="primary" (click)="nextStep()" class="override-no-shadow ml-4">
              <mat-icon>south</mat-icon>
              Siguiente </button>
          </div>
        </mat-expansion-panel>

        <!-- Generación de datos de la tabla -->
        <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)" hideToggle hideToggle>
          <mat-expansion-panel-header>
            <mat-panel-title> Generar </mat-panel-title>
            <mat-panel-description> Generación de formulario </mat-panel-description>
          </mat-expansion-panel-header>

          <mat-grid-list cols="1" rowHeight="82px">
            <mat-grid-tile colspan="1">
              <h1>Generar datos del formulario</h1>
            </mat-grid-tile>
          </mat-grid-list>
          <div align="end">
            <button mat-raised-button color="warn" (click)="prevStep()" class="override-no-shadow" [disabled]="aux_columns.length === 0">
              <mat-icon>navigate_before</mat-icon>
              Anterior
            </button>
            <button mat-raised-button color="primary" class="override-no-shadow ml-4" [disabled]="fields.length == 0" (click)="save()">
              <mat-icon>save</mat-icon>
              Guardar
            </button>
          </div>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
    <div class="canvas">
      <div style="display: flex; justify-content: space-between;">
        <button mat-raised-button color="info" class="btn-color-disable" [disabled]="formGroupUbication.invalid || formGroupTableDB.invalid" (click)="addForm()">
          <mat-icon>add</mat-icon> Agregar Sección de Formulario
        </button>
        <button mat-raised-button color="success" class="btn-color-disable" [disabled]="fields.length == 0" (click)="viewExample()">
          <mat-icon>dashboard</mat-icon>
          Ver ejemplo
        </button>
      </div>

      <mat-divider class="mt-8 mb-8" style="border-top-color: white;"></mat-divider>

      <div *ngFor="let field of fields; let i0 = index">
        <div>
          <br />
          <div style="display: flex; align-items: center; height: 40px">
            <div style="float: left; width: 50%">
              <span class="white_font">
                {{ id_form == 0 ? modulo_data?.value.MODULO : '' }}
                {{ id_form == 0 && submodulo_data?.value == 'undefined' ? submodulo_data?.value.SUBMODULO + ' | ' : ''}}
                {{ form_name_register?.value }} | {{ form_name_update?.value }} - {{ field.step }}
              </span>
            </div>
            <div style="float: right; width: 50%; height: 50px; margin-bottom: 15px;" *ngIf="field.form.length == 0">
              <div align="right" class="sizeAction">
                <span class="num_cols ml-20">Número de columnas:</span>
                <button mat-icon-button class="mr-10 ml-10" (click)="numColumn('remove', i0)">
                  <mat-icon style="color: #3f51b5">remove</mat-icon>
                </button>
                <span>{{ field.num_cols }}</span>
                <button mat-icon-button class="mr-10 ml-10" (click)="numColumn('add', i0)">
                  <mat-icon style="color: #3f51b5">add</mat-icon>
                </button>
                <button mat-mini-fab color="warn" (click)="alert('ELM-FORM', i0)">
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
            </div>
          </div>
          <div style="clear: both"></div>
          <div cdkDropList id="{{ field.step }}" [cdkDropListData]="field.form" [cdkDropListConnectedTo]="connectedTo" class="example-list" (cdkDropListDropped)="drop($event)">
            <div class="example-box2" *ngFor="let formItem of field.form; let i1 = index" cdkDrag style="height: 62px;">
              <span> {{ field.step }} | {{ formItem.tag }} ({{ formItem.id }}, {{ formItem.label }}) </span>
              <div align="end" class="mr-10">
                <button mat-mini-fab color="warn" (click)="alert('ELM', {i0, i1})" *ngIf="formItem.deleted">
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
            </div>
          </div>
          <br />
          <br />
        </div>
      </div>
    </div>
  </div>
</div>
