<h2 mat-dialog-title>Configuración para SELECT</h2>
<mat-dialog-content class="mat-typography">
  <div style="padding: 15px; text-align: center">

    <mat-form-field appearance="outline" style="width: 50%" *ngIf="!multi_select!.value && !group_select!.value">
      <mat-label> {{ label!.value }} </mat-label>
      <mat-select [disabled]="disabled_reg!.value" [value]="value!.value" [required]="required_reg!.value" [id]="id!.value" [attr.data-name]="name!.value">
        <mat-option *ngIf="! (required_reg!.value)">-- Niniguno --</mat-option>
        <mat-option *ngFor="let item of data_select!.value" [value]="item.valor"> {{ item.opcion }} </mat-option>
      </mat-select>
      <mat-icon matSuffix *ngIf="icon!.value !== ''"> {{ icon!.value}} </mat-icon>
    </mat-form-field>

    <mat-form-field appearance="outline" style="width: 50%" *ngIf="multi_select!.value && !group_select!.value">
      <mat-label> {{ label!.value }} </mat-label>
      <mat-select multiple [disabled]="disabled_reg!.value" [value]="value!.value" [required]="required_reg!.value" [id]="id!.value">
        <mat-option *ngIf="!(required_reg!.value)">-- Niniguno --</mat-option>
        <mat-option *ngFor="let item of data_select!.value" [value]="item.valor">{{ item.opcion }}</mat-option>
      </mat-select>
      <mat-icon matSuffix *ngIf="icon!.value !== ''">{{ icon!.value }}</mat-icon>
    </mat-form-field>

    <mat-form-field appearance="outline" style="width: 50%" *ngIf="group_select!.value">
      <mat-label>{{ label!.value }}</mat-label>
      <mat-select [disabled]="disabled_reg!.value" [value]="this.value!.value" [required]="required_reg!.value" [id]="id!.value">
        <mat-option *ngIf="!(required_reg!.value)">-- Niniguno --</mat-option>
        <mat-optgroup *ngFor="let grupos of data_select!.value" [label]="grupos.grupo" [disabled]="false">
          <mat-option *ngFor="let datos of grupos.datos" [value]="datos.valor"> {{ datos.opcion }} </mat-option>
        </mat-optgroup>
      </mat-select>
      <mat-icon matSuffix *ngIf="icon!.value !== ''">{{ icon!.value }}</mat-icon>
    </mat-form-field>

  </div>
  <mat-divider style="margin-bottom: 15px;"></mat-divider>
  <form [formGroup]="formGroup">
    <mat-grid-list cols="8" rowHeight="82px">

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Elemento</mat-label>
          <input matInput formControlName="tag" readonly />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Columna</mat-label>
          <mat-select value="text" formControlName="column" (ngModelChange)="onChangeColumn()">
            <mat-option *ngFor="let column of arr_columns" [value]="column">{{ column }}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Tabla relacional</mat-label>
          <mat-select value="text" formControlName="table_rel" (selectionChange)="dataColumns()">
            <mat-option *ngFor="let table_rel of arr_tables_rel" [value]="table_rel">{{ table_rel.NOMBRE_TABLA }}
            </mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Columnas relacionales</mat-label>
          <mat-select value="text" formControlName="column_rel" (selectionChange)="getDataSelect()">
            <mat-option *ngFor="let column_rel of arr_columns_rel" [value]="column_rel">{{ column_rel }}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2" *ngIf="isTablaMM">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Campo de la tabla M:M a relacionar</mat-label>
          <mat-select formControlName="columnMM">
            <mat-option *ngFor="let itemTabla of arr_tabla_mm" [value]="itemTabla"> {{ itemTabla.column }}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2" *ngIf="isTablaMM">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Campo de la tabla principal a relacionar</mat-label>
          <mat-select formControlName="columnMMtoMain">
            <mat-option *ngFor="let itemTabla of arr_columns_main" [value]="itemTabla"> {{ itemTabla.column }} </mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Nombre del campo</mat-label>
          <input matInput formControlName="name" />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Identificador</mat-label>
          <input matInput formControlName="id" />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Etiqueta</mat-label>
          <input matInput formControlName="label" />
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Icono</mat-label>
          <input type="text" placeholder="Pick one" aria-label="Number" matInput formControlName="icon" [matAutocomplete]="auto">
          <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
            <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
              <mat-icon>{{ option }}</mat-icon> {{option}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" *ngIf="!group_select!.value" class="form-input">
          <mat-label>Valor por defecto</mat-label>
          <mat-select formControlName="value" [disabled]="multi_select?.value">
            <mat-option>-- Niniguno --</mat-option>
            <mat-option *ngFor="let item of data_select!.value" [value]="item.valor"> {{ item.valor }} </mat-option>
          </mat-select>
        </mat-form-field>
        <mat-form-field appearance="outline" *ngIf="group_select!.value" class="form-input">
          <mat-label>Valor por defecto</mat-label>
          <mat-select formControlName="value">
            <mat-option *ngIf="! (required_reg!.value)">-- Niniguno --</mat-option>
            <mat-optgroup *ngFor="let grupos of data_select!.value" [label]="grupos.grupo">
              <mat-option *ngFor="let datos of grupos.datos" [value]="datos.valor"> {{ datos.valor }} </mat-option>
            </mat-optgroup>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>

      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" class="form-input">
          <mat-label>Nombre del grupo</mat-label>
          <input matInput [disabled]="!group_select!.value" #nombreGrupo />
          <button *ngIf="nombreGrupo.value" matSuffix mat-icon-button (click)="addGroup(nombreGrupo.value)" (keyup.enter)="addGroup(nombreGrupo.value)">
            <mat-icon>add</mat-icon>
          </button>
        </mat-form-field>
      </mat-grid-tile>
    </mat-grid-list>
    <br>
    <div>
      <div class="w-100" style="display: flex; flex-direction: row;">
        <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
          <mat-checkbox class="example-margin" formControlName="multi_select" (click)="selectionMultipleSelect()">Selección multiple</mat-checkbox>
          <mat-checkbox class="example-margin" formControlName="group_select" (click)="removeData()">Habilitar grupos</mat-checkbox>
        </div>
        <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
          <mat-checkbox class="example-margin" formControlName="disabled_reg">Deshabilitar para Registro</mat-checkbox>
          <mat-checkbox class="example-margin" formControlName="disabled_mod"> Deshabilitar para Modificacion </mat-checkbox>
        </div>
        <div style="width: calc(100% / 3); display: flex; flex-direction: column;" >
          <mat-checkbox class="example-margin" formControlName="required_reg">Requerido para Registro</mat-checkbox>
          <mat-checkbox class="example-margin" formControlName="required_mod">Requerido para Modificacion</mat-checkbox>
        </div>
      </div>
      <div style="float: left; display: flex; align-items: center;">
        <span class="ml-20">Columnas:</span>
        <a mat-icon-button class="mr-10 ml-10" (click)="numColumn('remove')">
          <mat-icon style="color: #3f51b5">remove</mat-icon>
        </a>
        <span>{{ num_col?.value }}</span>
        <a mat-icon-button class="mr-10 ml-10" (click)="numColumn('add')">
          <mat-icon style="color: #3f51b5">add</mat-icon>
        </a>
      </div>
    </div>
  </form>
  <form>
    <br><br><br>
    <mat-grid-list cols="7" rowHeight="82px" *ngIf="!opc_select_disable">
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" style="width: 98% !important;">
          <mat-label>Opción</mat-label>
          <input matInput [(ngModel)]="opcion" name="opcion" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" style="width: 98% !important;">
          <mat-label>Valor</mat-label>
          <input matInput [(ngModel)]="valor" name="valor" />
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="2">
        <mat-form-field appearance="outline" style="width: 98% !important;">
          <mat-label>Grupo</mat-label>
          <mat-select [disabled]="!group_select!.value" #grupo>
            <mat-option *ngFor="let grupo of arrGrupos" [value]="grupo">{{ grupo }}</mat-option>
          </mat-select>
        </mat-form-field>
      </mat-grid-tile>
      <mat-grid-tile colspan="1">
        <a mat-mini-fab color="primary" class="no-shadow mt-5 mb-a" (click)="addOption(grupo.value)">
          <mat-icon>add</mat-icon>
        </a>
      </mat-grid-tile>
    </mat-grid-list>
    <mat-list role="list" *ngIf="!group_select!.value">
      <mat-list-item *ngFor="let item of data_select!.value">
        <mat-icon mat-list-icon>done</mat-icon>
        <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt">
          <span style="font-weight: 500">Opción: </span> {{ item.opcion }}
        </span>
        <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt">
          <span style="font-weight: 500">Valor: </span> {{ item.valor }}
        </span>
        <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt" *ngIf="group_select!.value">
          <span style="font-weight: 500">Grupo: </span> {{ item.grupo }}
        </span>
        <mat-divider></mat-divider>
      </mat-list-item>
    </mat-list>
    <div *ngIf="group_select!.value">
      <mat-list role="list" *ngFor="let item of data_select!.value">
        <mat-list-item *ngFor="let data of item.datos">
          <mat-icon mat-list-icon>done</mat-icon>
          <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt;">
            <span style="font-weight: 500" if>Opción: </span> {{ data.opcion }}
          </span>
          <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt;">
            <span style="font-weight: 500">Valor: </span> {{ data.valor }}
          </span>
          <span style="width: 250px; padding: 0 10px 0 10px; font-size: 10pt;" *ngIf="group_select!.value">
            <span style="font-weight: 500">Grupo: </span> {{ item.grupo }}
          </span>
          <mat-divider></mat-divider>
        </mat-list-item>
      </mat-list>
    </div>
  </form>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button color="warn" mat-dialog-close>Cancelar</button>
  <button mat-button color="primary" [mat-dialog-close]="formGroup.value" [disabled]="formGroup.invalid || data_select!.value.length < 1" cdkFocusInitial>
    Registrar
  </button>
</mat-dialog-actions>
