<div style="display: flex; flex-direction: row; width: 100%; height: 100%">
    <div style="width: 30%; height: 100%; background-color: grey; padding: 10px">
        <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>
                        Lugar donde se generará la tabla
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <form [formGroup]="formGroupUbication">
                    <mat-grid-list cols="1" rowHeight="70px">
                        <mat-grid-tile colspan="1">
                            <h1>Seleccione la ubicación de la tabla</h1>
                        </mat-grid-tile>

                        <mat-grid-tile colspan="1">
                            <mat-form-field appearance="fill">
                                <mat-label>Ingrese el nombre de la tabla</mat-label>
                                <input matInput formControlName="table_name" />
                            </mat-form-field>
                        </mat-grid-tile>

                        <mat-grid-tile colspan="1">
                            <button mat-stroked-button color="primary" (click)="nextStep()"
                                [disabled]="!formGroupUbication.valid">
                                Siguiente
                            </button>
                        </mat-grid-tile>

                    </mat-grid-list>
                </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>

                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <h1>Seleccione los datos de la tabla</h1>
                    </mat-grid-tile>


                    <mat-grid-tile colspan="1">
                        <section class="example-section">
                            <mat-checkbox class="example-margin" [(ngModel)]="is_advance_search"
                                (change)="openQueryAdvance()">
                                Habilitar consulta avanzada
                            </mat-checkbox>
                        </section>
                    </mat-grid-tile>
                    <form [formGroup]="formGroupTableDB">

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

                        <mat-grid-tile colspan="1">
                            <!--               <mat-form-field appearance="fill">
                  <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.TABLA_RELACION">{{
                      data_relation.TABLA_RELACION }}
                    </mat-option>
                  </mat-select>
                </mat-form-field> -->
                            <button mat-stroked-button color="primary" (click)="openRelationsInner()"
                                [disabled]="arr_relationship.length <=0">
                                <mat-icon>add</mat-icon>
                                Agregar relación
                            </button>
                        </mat-grid-tile>
                    </form>

                </mat-grid-list>
                <div *ngFor="let item of arrayInners; let index = index;" class="w-100">
                    <div style="display: inline-block; width: 80%">
                        <span>
                            {{ item.name_table+"."+ item.inner_type }} {{ item.inner_table }}
                        </span>
                    </div>

                    <div style="display: inline-block; width: 20%" *ngIf="arrayInners.length >0">
                        <button mat-mini-fab color="warn" (click)="deleteItemJoin(index)">
                            <mat-icon>delete</mat-icon>
                        </button>
                    </div>
                    <mat-divider *ngIf="index + 1 !== arrayInners.length" style="margin: 5px 0;"></mat-divider>
                </div>

                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="warn" (click)="prevStep()" style="margin-right: 5px">
                            Anterior
                        </button>
                        <button mat-stroked-button color="primary" [disabled]="!formGroupTableDB.valid"
                            (click)="nextStep()">
                            Siguiente
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-expansion-panel>

            <!-- Selección de condicion -->
            <mat-expansion-panel [expanded]="step === 2" (opened)="setStep(2)" hideToggle
                [disabled]="formGroupTableDB.invalid">
                <mat-expansion-panel-header>
                    <mat-panel-title> Condición </mat-panel-title>
                    <mat-panel-description>
                        Condiciones del formulario
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <h1>Ingrese las condiciones del formulario</h1>
                    </mat-grid-tile>

                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="primary" (click)="addCondition()">
                            <mat-icon>add</mat-icon>
                            Agregar condición
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>

                <div *ngFor="let item of arr_conditions; let index = index;" class="w-100">
                    <div style="display: inline-block; width: 80%">

                        <span>
                            {{ index + 1 }} - {{ item.cond1.table +"."+ item.cond1.column }} {{ item.ope }}
                        </span>

                        <span *ngIf="item.cond2 !== undefined">
                            {{ item.cond2.column === undefined ? item.cond2 : item.cond1.table + "." + item.cond1.column
                            }}
                        </span>
                        <span *ngIf="item.cond2 === undefined">
                            Condición de respuesta
                        </span>
                    </div>

                    <div style="display: inline-block; width: 20%">
                        <button mat-mini-fab color="warn" (click)="deleteItemCondition(index)">
                            <mat-icon>delete</mat-icon>
                        </button>
                    </div>
                    <mat-divider *ngIf="index + 1 !== arr_conditions.length" style="margin: 5px 0;"></mat-divider>
                </div>

                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="warn" (click)="prevStep()" style="margin-right: 5px">
                            Anterior
                        </button>
                        <button mat-stroked-button color="primary" (click)="nextStep()">
                            Siguiente
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-expansion-panel>

            <!-- Nombres de columnas -->
            <mat-expansion-panel [expanded]="step === 3" (opened)="setStep(3)"
                [disabled]="!formGroupUbication.valid || !formGroupTableDB.valid" hideToggle>
                <mat-expansion-panel-header>
                    <mat-panel-title> Columnas </mat-panel-title>
                    <mat-panel-description>
                        Ingrese el nombre de las columnas
                    </mat-panel-description>
                </mat-expansion-panel-header>

                <mat-grid-list cols="1" rowHeight="70px">
                    <form [formGroup]="formGroup">
                        <mat-grid-tile colspan="1">
                            <mat-form-field appearance="fill">
                                <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 }}
                                        </mat-option>
                                    </mat-optgroup>
                                </mat-select>
                            </mat-form-field>
                        </mat-grid-tile>
                    </form>

                    <mat-grid-tile colspan="1">
                        <h1>Ingrese el nombre de las columnas</h1>
                    </mat-grid-tile>
                    <mat-grid-tile colspan="1" *ngFor="let column of columns?.value; let index = index">
                        <mat-form-field appearance="fill">
                            <mat-label> {{ column }} </mat-label>
                            <input matInput [(ngModel)]="model[index].new_column"
                                placeholder="Ingrese el nuevo nombre de la columna" />
                        </mat-form-field>
                    </mat-grid-tile>

                    <mat-grid-tile colspan="1">
                        <section class="example-section">
                            <mat-checkbox class="example-margin" [(ngModel)]="column_action_enable">
                                Habilitar columna de acciones
                            </mat-checkbox>
                        </section>
                    </mat-grid-tile>

                    <!-- Botones -->
                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="warn" (click)="prevStep()" style="margin-right: 5px">
                            Anterior
                        </button>
                        <button mat-stroked-button color="primary" (click)="nextStep()">
                            Siguiente
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-expansion-panel>

            <!-- Selección de botones -->
            <mat-expansion-panel [expanded]="step === 4" (opened)="setStep(4)" hideToggle
                [disabled]="!formGroupUbication.valid || !formGroupTableDB.valid">
                <mat-expansion-panel-header>
                    <mat-panel-title> Acciones </mat-panel-title>
                    <mat-panel-description>
                        Selección de acciones en la tabla
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <h1>Seleccione los botones</h1>
                    </mat-grid-tile>

                    <mat-grid-tile colspan="1">
                        <section class="example-section">
                            <mat-checkbox class="example-margin" [(ngModel)]="btn_register_enable">
                                Habilitar botón de registro
                            </mat-checkbox>
                        </section>
                    </mat-grid-tile>

                    <mat-grid-tile colspan="1" rowspan="3" *ngIf="column_action_enable">
                        <section class="example-section-cb">
                            <p>
                                <mat-checkbox [(ngModel)]="eliminar">Eliminar</mat-checkbox>
                            </p>
                            <p>
                                <mat-checkbox [(ngModel)]="editar">Editar</mat-checkbox>
                            </p>
                            <p>
                                <mat-checkbox [(ngModel)]="ver_info">Ver Información</mat-checkbox>
                            </p>
                            <p>
                                <mat-checkbox [(ngModel)]="bloquear">Bloquear</mat-checkbox>
                            </p>
                            <p>
                                <mat-checkbox [(ngModel)]="ver_docs">Ver Documentos</mat-checkbox>
                            </p>
                        </section>
                    </mat-grid-tile>
                    <!-- Botones -->
                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="warn" (click)="prevStep()" style="margin-right: 5px">
                            Anterior
                        </button>
                        <button mat-stroked-button color="primary" (click)="nextStep()">
                            Siguiente
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-expansion-panel>

            <!-- Generaciónde datos de la tabla -->
            <mat-expansion-panel [expanded]="step === 5" (opened)="setStep(5)" hideToggle>
                <mat-expansion-panel-header>
                    <mat-panel-title> Generar </mat-panel-title>
                    <mat-panel-description>
                        Generación de tabla
                    </mat-panel-description>
                </mat-expansion-panel-header>
                <mat-grid-list cols="1" rowHeight="70px">
                    <mat-grid-tile colspan="1">
                        <h1>Generar datos de la tabla</h1>
                    </mat-grid-tile>
                    <!-- Botones -->
                    <mat-grid-tile colspan="1">
                        <button mat-stroked-button color="warn" (click)="prevStep()" style="margin-right: 5px">
                            Anterior
                        </button>
                        <button mat-stroked-button (click)="viewExample()" style="margin-right: 5px">
                            Ver ejemplo
                        </button>
                        <button mat-stroked-button color="primary" (click)="generateDataTable()">
                            Guardar
                        </button>
                    </mat-grid-tile>
                </mat-grid-list>
            </mat-expansion-panel>
        </mat-accordion>
    </div>
    <!-- Ejemplo de tabla -->
    <div style="width: 70%; height: 100%; padding: 20px">
        <mat-card class="mat-elevation-z8" style="padding: 0">
            <div align="center" style="width: 100%; padding-top: 10px" *ngIf="table_name?.value !== ''">
                <h1>{{ table_name?.value }}</h1>
                <br />
                <div style="display: inline-block; width: 80%">
                    <!--  <mat-form-field appearance="fill">
              <mat-label>Buscador</mat-label>
              <input matInput (keyup)="applyFilter(input)" #input [disabled]="data_columns_aux === '[]'"/>
              <mat-icon matSuffix>search</mat-icon>
            </mat-form-field> -->
                </div>
                <div style="display: inline-block; width: 20%" *ngIf="btn_register_enable">
                    <button mat-stroked-button color="primary">
                        <mat-icon>add</mat-icon>
                        Registro
                    </button>
                </div>
            </div>

            <div align="center" class="alerts" *ngIf="model.length === 0">
                <img src="../../assets/img/empty_data.svg" width="300">
            </div>

            <table class="mat-table cdk-table animated fadeIn" #table *ngIf="columns?.value.length > 0">
                <thead role="rowgroup">
                    <tr class="mat-header-row cdk-header-row ng-star-inserted">
                        <!-- <th
                class="mat-header-cell cdk-header-cell ng-star-inserted"
                style="width: 5%"
              >
                #
              </th> -->

                        <div cdkDropList cdkDropListOrientation="horizontal" class="example-list"
                            (cdkDropListDropped)="drop($event)">
                            <div class="example-box" *ngFor="let data of model" cdkDrag>
                                {{ data.new_column === "" ? data.column : data.new_column }}
                            </div>
                        </div>

                        <!-- <th align="left" style="padding-left: 1%" class="mat-header-cell cdk-header-cell ng-star-inserted"
                *ngFor="let data of model; let colIndex = index">
                {{ data.new_column === "" ? data.column : data.new_column }}
              </th> -->
                        <th *ngIf="column_action_enable" class="mat-header-cell cdk-header-cell ng-star-inserted"
                            align="center" style="width: 20%">
                            Acciones
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr role="row" class="mat-row cdk-row ng-star-inserted"
                        *ngFor="let data of data_table; let colIndex = index">
                        <!-- <td class="mat-cell cdk-cell ng-star-inserted" align="center">
                {{ colIndex + 1 }}
              </td> -->
                        <td class="mat-cell cdk-cell ng-star-inserted" style="padding-left: 1%"
                            *ngFor="let item of data; let colIndex = index">
                            {{ item }}
                        </td>

                        <td class="mat-cell cdk-cell ng-star-inserted" align="center" *ngIf="column_action_enable">
                            <button *ngIf="eliminar" mat-mini-fab color="warn"
                                style="margin-right: 4px; box-shadow: none !important">
                                <mat-icon>delete</mat-icon>
                            </button>

                            <button *ngIf="editar" mat-mini-fab color="primary"
                                style="margin-right: 4px; box-shadow: none !important">
                                <mat-icon>edit</mat-icon>
                            </button>

                            <button *ngIf="ver_info" mat-mini-fab color="info"
                                style="margin-right: 4px; box-shadow: none !important">
                                <mat-icon>info</mat-icon>
                            </button>

                            <button *ngIf="bloquear" mat-mini-fab color="danger"
                                style="margin-right: 4px; box-shadow: none !important">
                                <mat-icon>block</mat-icon>
                            </button>

                            <button *ngIf="ver_docs" mat-mini-fab color="success"
                                style="margin-right: 4px; box-shadow: none !important">
                                <mat-icon>description</mat-icon>
                            </button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </mat-card>
    </div>
</div>
