<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-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
      <mat-tab-group class="prevent-select animated fadeIn" *ngIf="!isLoading && !hasError">
        <mat-tab label="Login">
          <div class="login-options-container animated fadeIn" *ngIf="loginImagesEditEnabled">
            <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()">
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!loginImagesEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Módulos">
          <div class="form-pass-container animated fadeIn" *ngIf="modulesIconsEditEnabled">
            <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>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!modulesIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Submódulos">
          <div class="form-pass-container animated fadeIn" *ngIf="submodulesIconsEditEnabled">
            <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>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!submodulesIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Funciones">
          <div class="form-pass-container animated fadeIn" *ngIf="functionsIconsEditEnabled">
            <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>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!functionsIconsEditEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Prioridades de las órdenes de mantenimiento">
          <div class="order-priorities-container">
            <div class="order-priorities-row">
              <mat-form-field appearance="outline" style="width: 320px;">
                <mat-label>Prioridad</mat-label>
                <mat-select value="1" #priority>
                  <mat-option *ngFor="let priority of orderPrioritiesArr" [value]="priority.value">
                    {{ priority.value }} - <span [style.color]="priority.color" style="font-weight: 500;">{{ priority.label }}</span>
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <button mat-button color="primary" style="margin: 0 0 22px 8px;" (click)="editPriority(priority.value)">Editar prioridad</button>
            </div>
          </div>
        </mat-tab>
        <mat-tab label="Edición de formularios">
          <div class="form-pass-container animated fadeIn" *ngIf="formsManagementEnabled">
            <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 class="cyan_dark_background white_font override_no_shadow mr-10" matTooltip="Actualizar Datos" (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 class="teal_dark_background white_font" 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-20 align-center" 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>
          <div style="font-weight: bold;" class="animated fadeIn" *ngIf="!formsManagementEnabled">
            <h3 class="ml-20 mt-16"><b>Su perfil no cuenta con los permisos necesarios para visualizar la información de esta sección.</b></h3>
          </div>
        </mat-tab>
        <mat-tab label="Información fiscal">
          <div style="overflow: auto; height: calc(100vh - 330px);">
            <form class="override_content_flex" [formGroup]="formGroupTax">

              <div class="col-flex-12">
                <span class="title-card">Información Fiscal</span>
              </div>

              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Nombre Fiscal</mat-label>
                  <input matInput formControlName="NOMBRE_FISCAL">
                  <mat-icon matSuffix>business</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NOMBRE_FISCAL'].hasError('required')" title="El campo Nombre Fiscal es obligatorio.">El campo <b>Nombre Fiscal</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>R.F.C.</mat-label>
                  <input matInput formControlName="RFC" onkeyup="this.value = this.value.toUpperCase();">
                  <mat-icon matSuffix>subtitles</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['RFC'].hasError('required')" title="El campo R.F.C. es obligatorio.">El campo <b>R.F.C.</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupTax.controls['RFC'].hasError('pattern')" title="El campo R.F.C. no es válido.">El campo <b>R.F.C.</b> no es válido.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Correo Electrónico</mat-label>
                  <input matInput formControlName="CORREO_ELECTRONICO">
                  <mat-icon matSuffix>email</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['CORREO_ELECTRONICO'].hasError('required')" title="El campo Correo electrónico es obligatorio.">El campo <b>Correo Electrónico</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupTax.controls['CORREO_ELECTRONICO'].hasError('email')" title="El campo Correo electrónico no es válido.">El campo <b>Correo Electrónico</b> no es válido.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Régimen Fiscal</mat-label>
                  <input matInput placeholder="Ingrese su Régimen Fiscal" [matAutocomplete]="autocompleteTaxRegime" formControlName="REGIMEN_FISCAL">
                  <mat-autocomplete autoActiveFirstOption #autocompleteTaxRegime>
                    <mat-option *ngFor="let taxRegimeStr of filteredTaxRegime | async" [value]="taxRegimeStr">
                      {{ taxRegimeStr }}
                    </mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>account_balance_wallet</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['REGIMEN_FISCAL'].hasError('required')" title="El campo Régimen Fiscal es obligatorio.">El campo <b>Régimen Fiscal</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-1">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput formControlName="LADA1" [matAutocomplete]="autocompleteLada1">
                  <mat-autocomplete autoActiveFirstOption #autocompleteLada1>
                    <mat-option *ngFor="let lada1 of filteredLadas1 | async" [value]="lada1">
                      {{ lada1 }}
                    </mat-option>
                  </mat-autocomplete>
                  <mat-error *ngIf="formGroupTax.controls['LADA1'].hasError('required')" title="El campo Lada es obligatorio.">El campo <b>Lada</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Teléfono Fijo</mat-label>
                  <input matInput formControlName="TELEFONO_FIJO" type="number" maxlength="10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                  <mat-icon matSuffix>call</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TELEFONO_FIJO'].hasError('required')" title="El campo Teléfono Fijo es obligatorio.">El campo <b>Teléfono Fijo</b> es obligatorio.</mat-error>
                  <mat-hint align="end">{{ formGroupTax.controls['TELEFONO_FIJO'].value.toString().length }} /10</mat-hint>
                </mat-form-field>
              </div>
              <div class="col-flex-1">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput formControlName="LADA2" [matAutocomplete]="autocompleteLada2">
                  <mat-autocomplete autoActiveFirstOption #autocompleteLada2>
                    <mat-option *ngFor="let lada2 of filteredLadas2 | async" [value]="lada2">
                      {{ lada2 }}
                    </mat-option>
                  </mat-autocomplete>
                  <!-- <mat-icon matSuffix>tag</mat-icon> -->
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Teléfono Movil</mat-label>
                  <input matInput formControlName="TELEFONO_MOVIL" type="number" maxlength="10" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);">
                  <mat-icon matSuffix>smartphone</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TELEFONO_MOVIL'].hasError('required')" title="El campo Teléfono Movil es obligatorio.">El campo <b>Teléfono Movil</b> es obligatorio.</mat-error>
                  <mat-hint align="end">{{ formGroupTax.controls['TELEFONO_MOVIL'].value.toString().length }} / 10</mat-hint>
                </mat-form-field>
              </div>

              <div class="col-flex-12">
                <span class="title-card">Dirección Fiscal</span>
              </div>

              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Tipo de Vialidad</mat-label>
                  <mat-select formControlName="TIPOVIALIDAD">
                    <mat-option value="CALLE">Calle</mat-option>
                    <mat-option value="AVENIDA">Avenida</mat-option>
                    <mat-option value="BOULEVARD">Boulevard</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['TIPOVIALIDAD'].hasError('required')" title="El campo Tipo de Vialidad es obligatorio.">El campo <b>Tipo de Vialidad</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Nombre de Vialidad</mat-label>
                  <input matInput formControlName="NOMBRE_VIALIDAD">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NOMBRE_VIALIDAD'].hasError('required')" title="El campo Nombre de Vialidad es obligatorio.">El campo <b>Nombre de Vialidad</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Número Exterior</mat-label>
                  <input matInput formControlName="NUMERO_EXTERIOR">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NUMERO_EXTERIOR'].hasError('required')" title="El campo Número Exterior es obligatorio.">El campo <b>Número Exterior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Número Interior</mat-label>
                  <input matInput formControlName="NUMERO_INTERIOR">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['NUMERO_INTERIOR'].hasError('required')" title="El campo Número Interior es obligatorio.">El campo <b>Número Interior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Entre Calle</mat-label>
                  <input matInput formControlName="ENTRE_CALLE">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['ENTRE_CALLE'].hasError('required')" title="El campo Entre Calle es obligatorio.">El campo <b>Entre Calle</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>Y Calle</mat-label>
                  <input matInput formControlName="Y_CALLE">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['Y_CALLE'].hasError('required')" title="El campo Y Calle es obligatorio.">El campo <b>Y Calle</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingAddress ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingAddress">
                  <mat-label>Código Postal</mat-label>
                  <input matInput formControlName="CODIGO_POSTAL" placeholder="" (ngModelChange)="searchZipCode()" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="5">
                  <mat-icon matSuffix>travel_explore</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['CODIGO_POSTAL'].hasError('required')" title="El campo Código Postal es obligatorio.">El campo <b>Código Postal</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingAddress"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingSettings ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingSettings">
                  <mat-label>Colonia</mat-label>
                  <input matInput formControlName="COLONIA" [matAutocomplete]="autocompleteSetting" (input)="checkColony()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteSetting (optionSelected)="checkColony()">
                    <mat-option *ngFor="let settingStr of filteredSettings | async" [value]="settingStr">{{ settingStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['COLONIA'].hasError('required')" title="El campo Colonia es obligatorio.">El campo <b>Colonia</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingSettings"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingTowns ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingTowns">
                  <mat-label>Localidad</mat-label>
                  <input matInput formControlName="LOCALIDAD" [matAutocomplete]="autocompleteTown">
                  <mat-autocomplete autoActiveFirstOption #autocompleteTown>
                    <mat-option *ngFor="let townStr of filteredTowns | async" [value]="townStr"> {{ townStr }} </mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['LOCALIDAD'].hasError('required')" title="El campo Localidad es obligatorio.">El campo <b>Localidad</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingTowns"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingCities ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingCities">
                  <mat-label>Municipio</mat-label>
                  <input matInput formControlName="MUNICIPIO" [matAutocomplete]="autocompleteCity" (input)="checkCity()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteCity (optionSelected)="checkCity()">
                    <mat-option *ngFor="let cityStr of filteredCities | async" [value]="cityStr">{{ cityStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['MUNICIPIO'].hasError('required')" title="El campo Municipio es obligatorio.">El campo <b>Municipio</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingCities"></mat-progress-bar>
              </div>
              <div class="col-flex-4" [style.padding-top]="searchingStates ? '30px' : '3px'">
                <mat-form-field class="w-100" appearance="outline" *ngIf="!searchingStates">
                  <mat-label>Entidad Federativa</mat-label>
                  <input matInput formControlName="ENTIDAD_FEDERATIVA" [matAutocomplete]="autocompleteState" (input)="checkEntity()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteState (optionSelected)="checkEntity()">
                    <mat-option *ngFor="let stateStr of filteredStates | async" [value]="stateStr">{{ stateStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['ENTIDAD_FEDERATIVA'].hasError('required')" title="El campo Entidad es obligatorio.">El campo <b>Entidad</b> es obligatorio.</mat-error>
                </mat-form-field>
                <mat-progress-bar mode="indeterminate" class="w-100" *ngIf="searchingStates"></mat-progress-bar>
              </div>
              <div class="col-flex-4">
                <mat-form-field class="w-100" appearance="outline">
                  <mat-label>País</mat-label>
                  <input matInput formControlName="PAIS" [matAutocomplete]="autocompleteCountry" (input)="checkIfAddress()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteCountry (optionSelected)="checkIfAddress()">
                    <mat-option *ngFor="let countryStr of filteredCountries | async" [value]="countryStr">{{ countryStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupTax.controls['PAIS'].hasError('required')" title="El campo País es obligatorio.">El campo <b>País</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-12" align="center">
                <button mat-flat-button class="indigo_primary_background white_font" [disabled]="formGroupTax.invalid" (click)="alert('CONFIRM')">
                  Guardar configuración
                </button>
              </div>
            </form>
          </div>
        </mat-tab>
      </mat-tab-group>
    </mat-card-content>
  </mat-card>
</div>