<div class="items-container animated fadeIn">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Administrador del sistema</div>
    </div>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: calc(100% - 48px);">
    <mat-card-title style="text-align: center;" class="pv-16">Parámetros del sistema</mat-card-title>
    <mat-card-content>
      <div class="loader-container prevent-select animated fadeIn fast" *ngIf="isLoading">
        <mat-spinner></mat-spinner>
        <h2 class="loader-label">Cargando...</h2>
      </div>
      <div class="error-container prevent-select animated fadeIn" *ngIf="!isLoading && hasError">
        <mat-icon style="color: #e53935; transform: scale(5); margin: 48px;">error</mat-icon>
        <h1 style="color: #e53935;">¡Error!</h1>
        <p style="font-style: italic; font-size: 16px; overflow-wrap: anywhere; text-align: center;">{{ errorStr }}</p>
      </div>
      <mat-tab-group class="prevent-select animated fadeIn" *ngIf="!isLoading && !hasError">
        <mat-tab label="Login">
          <div class="login-options-container">
            <div class="login-option">
              <div class="image-container" #tooltipImage="matTooltip" matTooltip="Cambiar imágen de inicio de sesión" 
              [matTooltipPositionAtOrigin]="true" (click)="imageHandler('img')">
                <img [src]="imgStr" *ngIf="!upImg"/>
                <div class="shine" *ngIf="upImg"></div>
              </div>
              <h2 style="text-align: center;">Imágen de inicio de sesión</h2>
            </div>
            <div class="login-option">
              <div class="image-container" #tooltipBack="matTooltip" matTooltip="Cambiar fondo del inicio de sesión" 
              [matTooltipPositionAtOrigin]="true" (click)="imageHandler('bac')">
                <img [src]="bacStr" *ngIf="!upBac"/>
                <div class="shine" *ngIf="upBac"></div>
              </div>
              <h2 style="text-align: center;">Fondo del inicio de sesión</h2>
            </div>
          </div>
          <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)" (cancel)="cancelHandle()">
        </mat-tab>
        <mat-tab label="Módulos">
          <div class="form-pass-container">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="moduleName" #modSelect (valueChange)="changeModuleIcon(modSelect.value)">
                  <mat-option *ngFor="let mod of modules" [value]="mod.IDMODULO">
                    {{ mod.NOMBREMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Icono del módulo</mat-label>
                <mat-select [formControl]="moduleIcon" #iconSel (valueChange)="updateModuleIcon(iconSel.value)">
                  <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                    <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                      <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-icon style="transform: scale(2.5);margin-top: -16px;color: #808080;">{{ moduleIcon.value }}</mat-icon>
            </div>
            <div class="save-politics-container">
              <button mat-flat-button class="indigo_primary_background white_font" (click)="saveModules()">
                Guardar configuración
              </button>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Submódulos">
          <div class="form-pass-container">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="submoduleModule" #submodMod (valueChange)="submodChange()">
                  <mat-option *ngFor="let mod of modules" [value]="mod.IDMODULO" [disabled]="hasSubmodules(mod.IDMODULO)">
                    {{ mod.NOMBREMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del submódulo</mat-label>
                <mat-select [formControl]="submoduleName" #submodName (valueChange)="changeSubmoduleIcon(submodName.value)">
                  <mat-option *ngFor="let submod of submodules.get(submoduleModule.value!)" [value]="submod.IDSUBMODULO">
                    {{ submod.NOMBRESUBMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Icono del submódulo</mat-label>
                <mat-select [formControl]="submoduleIcon" #iconSelSub (valueChange)="updateSubmoduleIcon(iconSelSub.value)">
                  <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                    <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                      <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-icon style="transform: scale(2.5);margin-top: -16px;color: #808080;">{{ submoduleIcon.value }}</mat-icon>
            </div>
            <div class="save-politics-container">
              <button mat-flat-button class="indigo_primary_background white_font" (click)="saveSubmodules()">
                Guardar configuración
              </button>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Funciones">
          <div class="form-pass-container">
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del módulo</mat-label>
                <mat-select [formControl]="functionModule" #funcMod (valueChange)="funcModChange(funcMod.value)">
                  <mat-option *ngFor="let mod of modules" [value]="mod.IDMODULO">
                    {{ mod.NOMBREMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre del submódulo</mat-label>
                <mat-select [formControl]="functionSubmodule" #funcSubmod (valueChange)="funSubmodChange()">
                  <mat-option *ngFor="let submod of submodules.get(functionModule.value!)" [value]="submod.IDSUBMODULO">
                    {{ submod.NOMBRESUBMODULO }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Nombre de la función</mat-label>
                <mat-select [formControl]="functionName" #funcName (valueChange)="changeFunctionIcon(funcName.value!)">
                  <mat-option *ngFor="let func of getFunctions()" [value]="func.IDFUNCION">
                    {{ func.NOMBREFUNCION }}
                  </mat-option>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-form-field appearance="outline" style="width: 100%;">
                <mat-label>Icono de la función</mat-label>
                <mat-select [formControl]="functionIcon" #funcIcon (valueChange)="updateFunctionIcon(funcIcon.value)">
                  <mat-optgroup *ngFor="let categorie of iconsCategories" [label]="categorie">
                    <mat-option *ngFor="let icon of iconsArr.get(categorie)" [value]="icon">
                      <mat-icon>{{ icon }}</mat-icon> {{ icon }}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
              </mat-form-field>
            </div>
            <div class="element">
              <mat-icon style="transform: scale(2.5);margin-top: -16px;color: #808080;">{{ functionIcon.value }}</mat-icon>
            </div>
            <div class="save-politics-container">
              <button mat-flat-button class="indigo_primary_background white_font" (click)="saveFunctions()">
                Guardar configuración
              </button>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Edición de formularios">
          <div class="form-pass-container">
            <section class="override-section">
              <nav class="override-nav">
                <div class="override-actions pt-8">
                  <mat-form-field appearance="outline" class="w-300p mr-8">
                    <mat-label>Buscador</mat-label>
                    <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')" placeholder="Ingrese la palabra a buscar" />
                    <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
                    <mat-icon *ngIf="txtBuscador.length > 0" class="clickable" matTooltip="Eliminar filtro" (click)="applyFilter('', 'EST')" matSuffix>close</mat-icon>
                  </mat-form-field>
                  <div class="override-buttons">
                    <button mat-mini-fab color="info" matTooltip="Actualizar Datos" class="override-no-shadow mr-10" (click)="obtenerFormularios()">
                      <mat-icon>refresh</mat-icon>
                    </button>
                  </div>
                </div>
              </nav>

              <div>
                <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
                  <mat-spinner align="center"></mat-spinner>
                  <h3>Cargando datos ...</h3>
                </div>
              </div>

              <div class="override-table">
                <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" *ngIf="!isLoading">
                  <ng-container matColumnDef="NOMBRE_FORM">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre del Formulario</th>
                    <td mat-cell *matCellDef="let element">{{ element.NOMBRE_FORM }}</td>
                  </ng-container>
        
                  <ng-container matColumnDef="MODULO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Módulo</th>
                    <td mat-cell *matCellDef="let element">{{ element.MODULO }}</td>
                  </ng-container>
        
                  <ng-container matColumnDef="FECHA_REG">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Última Modificación</th>
                      <td mat-cell *matCellDef="let element"> {{ formatDate(element.FECHA_REG, element.FECHA_MOD) }} </td>
                  </ng-container>
        
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
                    <td mat-cell *matCellDef="let element">
                      <mat-chip-listbox>
                        <mat-chip color="success" selected *ngIf="element.ESTADO === 'Activo'"> {{ element.ESTADO }} </mat-chip>
                        <mat-chip color="warn" selected *ngIf="element.ESTADO === 'Eliminado'"> {{ element.ESTADO }} </mat-chip>
                      </mat-chip-listbox>
                    </td>
                  </ng-container>
        
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef>Acciones</th>
                    <td mat-cell *matCellDef="let element">
                      <div *ngIf="btnSmall">
                        <button mat-mini-fab color="accent" [matMenuTriggerFor]="menu" #menuTrigger class="override-no-shadow">
                          <mat-icon>settings</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                          <button mat-menu-item [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm" (click)="modificar(element.CODIGO_FORM)">
                            <mat-icon>edit</mat-icon> Editar
                          </button>
                          <button mat-menu-item [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm" (click)="alert('ELM', element.CODIGO_FORM)">
                            <mat-icon>delete</mat-icon> Eliminar
                          </button>
                        </mat-menu>
                      </div>
        
                      <div *ngIf="!btnSmall">
                        <button
                          mat-mini-fab
                          color="primary"
                          class="override-no-shadow mr-4"
                          [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm"
                          (click)="modificar(element.CODIGO_FORM)"
                          matTooltip="Editar">
                          <mat-icon>edit</mat-icon>
                        </button>
                        <button
                          mat-mini-fab
                          color="warn"
                          class="override-no-shadow mr-4"
                          [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm"
                          (click)="alert('ELM', element.CODIGO_FORM)"
                          matTooltip="Eliminar">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </div>
                    </td>
                  </ng-container>
        
                  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        
                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-80 centre" colspan="12">
                      <object data="assets/img/empty_data.svg" width="300"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </section>
            <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator" style="width:100%"></mat-paginator>
          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>