<!-- CONTENEDOR PRINCIPAL -->
<main class="main-container animated fadeIn" (window:resize)="onResize()">

  <!-- REGRESAR A LA PANTALLA ANTERIOR -->
  <header id="navigation" class="btn-navigate mb-8" style="width: 80% !important;">
    <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 Proveedores </div>
    </div>
  </header>

  <!-- CARD -->
  <mat-card class="override-card-form override-elevation-z8">
    <section class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre">
          Formulario - {{ typeForm.type === 'REGI' ? 'Registro de Proveedor' : 'Modificación de Proveedor' }}
        </mat-card-title>
      </nav>
      <!-- ALERTA - CARGANDO FORMULARIOS -->
      <div>
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
        <!-- ALERTA - CARGANDO DATOS... -->
        <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
          <mat-spinner align="center"></mat-spinner>
          <h3>Cargando datos ...</h3>
        </div>
      </div>

      <!-- CONTENEDOR DE LA TABLA -->
      <div class="override-form">
        <mat-stepper [linear]="isLinear" #stepper class="override-stepper-form">
          <mat-step [stepControl]="formGroupInformation">
            <ng-template matStepLabel>Información Personal</ng-template>
            <mat-grid-list cols="12" rowHeight="82px" [formGroup]="formGroupInformation">
              <mat-grid-tile colspan="8">
                <mat-form-field appearance="outline">
                  <mat-label>Razón Social</mat-label>
                  <input matInput placeholder="Ferretería Antonio y Marta S.L de C.V" maxlength="100"
                    formControlName="RAZON_SOCIAL">
                  <mat-error *ngIf="RAZON_SOCIAL?.invalid">{{ getErrorMessage('RAZON_SOCIAL') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Correo Electrónico</mat-label>
                  <input matInput placeholder="antonio_marta@ferreteria.com" maxlength="50" formControlName="CORREO">
                  <mat-error *ngIf="CORREO?.invalid">{{ getErrorMessage('CORREO') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Nombre</mat-label>
                  <input matInput placeholder="Antonio" maxlength="50" formControlName="NOMBRE">
                  <mat-error *ngIf="NOMBRE?.invalid">{{ getErrorMessage('NOMBRE') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Primer Apellido</mat-label>
                  <input matInput placeholder="Perez" maxlength="50" formControlName="PRIMER_APELLIDO">
                  <mat-error *ngIf="PRIMER_APELLIDO?.invalid">{{ getErrorMessage('PRIMER_APELLIDO') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Segundo Apellido</mat-label>
                  <input matInput placeholder="Martínez" maxlength="50" formControlName="SEGUNDO_APELLIDO">
                  <mat-error *ngIf="SEGUNDO_APELLIDO?.invalid">{{ getErrorMessage('SEGUNDO_APELLIDO') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput placeholder="+52" maxlength="5" formControlName="LADA1">
                  <mat-error *ngIf="LADA1?.invalid">{{ getErrorMessage('LADA1') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="3">
                <mat-form-field appearance="outline">
                  <mat-label>Teléfono Principal</mat-label>
                  <input matInput type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength = "10"
                    placeholder="5213698521" formControlName="TELEFONO1">
                  <mat-error *ngIf="TELEFONO1?.invalid">{{ getErrorMessage('TELEFONO1') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="1">
                <mat-form-field appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput placeholder="+52" maxlength="5" formControlName="LADA2">
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="3">
                <mat-form-field appearance="outline">
                  <mat-label>Teléfono Secundario</mat-label>
                  <input matInput type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength = "10"
                    placeholder="5236974125" formControlName="TELEFONO2">
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Giro Empresarial</mat-label>
                  <mat-select formControlName="GIRO_EMPRESARIAL">
                    <mat-option value="Servicios">Servicios</mat-option>
                    <mat-option value="Comercial Directo">Comercial Directo</mat-option>
                    <mat-option value="Comercial Intermediario">Comercial Intermediario</mat-option>
                  </mat-select>
                  <mat-error *ngIf="GIRO_EMPRESARIAL?.invalid">{{ getErrorMessage('GIRO_EMPRESARIAL') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Tipo</mat-label>
                  <mat-select formControlName="TIPO" (ngModelChange)="changeTipo()">
                    <mat-option value="Nacional">Nacional</mat-option>
                    <mat-option value="Extranjero">Extranjero</mat-option>
                  </mat-select>
                  <mat-error *ngIf="TIPO?.invalid">{{ getErrorMessage('TIPO') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="2">
                <mat-form-field appearance="outline">
                  <mat-label>R.F.C.</mat-label>
                  <input matInput placeholder="XAXX010101000" maxlength="13" formControlName="RFC">
                  <mat-error *ngIf="RFC?.invalid">{{ getErrorMessage('RFC') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="2">
                <mat-form-field appearance="outline">
                  <mat-label>Tax ID</mat-label>
                  <input matInput placeholder="XEXX010101000" maxlength="13" formControlName="TAXID">
                  <mat-error *ngIf="TAXID?.invalid">{{ getErrorMessage('TAXID') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
              <mat-grid-tile colspan="4">
                <mat-form-field appearance="outline">
                  <mat-label>Sitio Web</mat-label>
                  <input matInput placeholder="https://www.ferreteria-antonio-marta.com.mx/" maxlength="100"
                    formControlName="SITIOWEB">
                  <mat-error *ngIf="SITIOWEB?.invalid">{{ getErrorMessage('SITIOWEB') }}</mat-error>
                </mat-form-field>
              </mat-grid-tile>
            </mat-grid-list>
            <div align="end">
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step [stepControl]="formGroupReferences">
            <ng-template matStepLabel>Referencias</ng-template>
            <div style="width: 100%; max-height: 530px; display: flex; margin-top: 10px; ">
              <div style="width: 30%; padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.12);">
                <h2>{{ typeFormReference == 'REG_REF' ? 'Registro de Referencias' : 'Modificación de Referencias' }}
                </h2>
                <mat-grid-list cols="2" rowHeight="82px" [formGroup]="formGroupReferences">
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline">
                      <mat-label>Razón Social</mat-label>
                      <input matInput placeholder="Walmart De México, S.A.B. de C.V." maxlength="100" formControlName="EMPRESA_REF">
                      <mat-error *ngIf="EMPRESA_REF?.invalid">{{ getErrorMessage('EMPRESA_REF') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline">
                      <mat-label>Correo Electrónico</mat-label>
                      <input matInput placeholder="mesadeservicio@walmart.mx" maxlength="100" formControlName="CORREO_REF"
                        (ngModelChange)="validateRepeatedReference('CORREO_REF')">
                      <mat-error *ngIf="CORREO_REF?.invalid">{{ getErrorMessage('CORREO_REF') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline">
                      <mat-label>Teléfono</mat-label>
                      <input matInput type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10" placeholder="800 710 6352" formControlName="TELEFONO_REF">
                      <mat-error *ngIf="TELEFONO_REF?.invalid">{{ getErrorMessage('TELEFONO_REF') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline">
                      <mat-label>R.F.C.</mat-label>
                      <input matInput type="text" placeholder="NWM9709244W4" maxlength="13" formControlName="RFC_REF"
                        (ngModelChange)="validateRepeatedReference('RFC_REF')">
                      <mat-error *ngIf="RFC_REF?.invalid">{{ getErrorMessage('RFC_REF') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline">
                      <mat-label>Dirección</mat-label>
                      <input matInput placeholder="Av. Rodolfo Gaona 647, Periodista, Miguel Hidalgo, 11220 Ciudad de México, CDMX" maxlength="100" formControlName="DIRECCION_REF">
                      <mat-error *ngIf="DIRECCION_REF?.invalid">{{ getErrorMessage('DIRECCION_REF') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                </mat-grid-list>
                <div align="end">
                  <button mat-raised-button color="primary" class="override-no-shadow"
                    (click)="actionReference(typeFormReference)" [disabled]="formGroupReferences.invalid">
                    {{ typeFormReference == 'REG_REF' ? 'Ingresar' : 'Modificar' }}
                    <mat-icon>save</mat-icon>
                  </button>
                </div>
              </div>
              <div style="width: 70%; padding: 20px; border-radius: 20px; overflow: auto;">
                <h2>Referencias</h2>
                <table mat-table matSort [dataSource]="dataSourceReference" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="NO">
                    <th mat-header-cell *matHeaderCellDef > No </th>
                    <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
                  </ng-container>
                  <ng-container matColumnDef="EMPRESA">
                    <th mat-header-cell *matHeaderCellDef > Razón Social </th>
                    <td mat-cell *matCellDef="let element"> {{ element.EMPRESA_REF }} </td>
                  </ng-container>
                  <ng-container matColumnDef="CORREO">
                    <th mat-header-cell *matHeaderCellDef > Correo Electrónico </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CORREO_REF }} </td>
                  </ng-container>
                  <ng-container matColumnDef="RFC">
                    <th mat-header-cell *matHeaderCellDef > R.F.C. </th>
                    <td mat-cell *matCellDef="let element"> {{ element.RFC_REF }} </td>
                  </ng-container>
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef > Estado </th>
                    <td mat-cell *matCellDef="let element">
                      <mat-chip color="success" *ngIf="element.ESTADO_REF === 'Activo'"> {{ element.ESTADO_REF }} </mat-chip>
                      <mat-chip class="red_dark_background" *ngIf="element.ESTADO_REF === 'Eliminado'"> {{ element.ESTADO_REF }} </mat-chip>
                    </td>
                  </ng-container>
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef > Acciones </th>
                    <td mat-cell *matCellDef="let element">
                      <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger
                        class="override-no-shadow" matTooltip="Click para desplegar las opciones" [disabled]="element.ESTADO_REF === 'Eliminado'">
                        <mat-icon>settings</mat-icon>
                      </button>
                      <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="actionReference('GET_REF', element)">
                          <mat-icon>edit</mat-icon> Editar
                        </button>
                        <button mat-menu-item (click)="alert('ELI_REF', element)">
                          <mat-icon>cancel</mat-icon> Eliminar
                        </button>
                      </mat-menu>
                    </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="displayedColumnsReferences"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumnsReferences"></tr>

                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-40 centre" colspan="12">
                      <object data="../../assets/img/empty_data.svg" width="200"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div align="end" class="mt-15">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step [stepControl]="formGroupContact">
            <ng-template matStepLabel>Contactos</ng-template>
            <div style="width: 100%; max-height: 550px; display: flex; margin-top: 10px; ">
              <div style="width: 55%; padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.12);">
                <h2>{{ typeFormContact == 'REG_CON' ? 'Registro de Contacto' : 'Modificación de Contacto' }}</h2>
                <mat-grid-list cols="6" rowHeight="82px" [formGroup]="formGroupContact">
                  <!-- <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Número de Contacto </mat-label>
                      <input matInput formControlName="ID_CONTACTO" readonly />
                      <mat-error *ngIf="ID_CONTACTO?.invalid">{{ getErrorMessage('ID_CONTACTO') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile> -->
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Nombre del Contacto </mat-label>
                      <input matInput placeholder="Juan" formControlName="NOMBRE_CONTACTO" maxlength="50" />
                      <mat-error *ngIf="NOMBRE_CONTACTO?.invalid">{{ getErrorMessage('NOMBRE_CONTACTO') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Tipo de Contacto </mat-label>
                      <input matInput placeholder="Contacto Principal" formControlName="TIPO_CONTACTO" maxlength="50" />
                      <mat-error *ngIf="TIPO_CONTACTO?.invalid">{{ getErrorMessage('TIPO_CONTACTO') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Calle </mat-label>
                      <input matInput placeholder="Insurgentes 12" formControlName="CALLE" maxlength="50"/>
                      <mat-error *ngIf="CALLE?.invalid">{{ getErrorMessage('CALLE') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> No Exterior </mat-label>
                      <input matInput placeholder="#13" formControlName="NUMERO_EXTERIOR" maxlength="10"/>
                      <mat-error *ngIf="NUMERO_EXTERIOR?.invalid">{{ getErrorMessage('NUMERO_EXTERIOR') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> No Interior </mat-label>
                      <input matInput placeholder="No. 21" formControlName="NUMERO_INTERIOR" maxlength="10"/>
                      <mat-error *ngIf="NUMERO_INTERIOR?.invalid">{{ getErrorMessage('NUMERO_INTERIOR') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> CP </mat-label>
                      <input matInput type="number" placeholder="62577" formControlName="CODIGO_POSTAL" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="5"/>
                      <mat-error *ngIf="CODIGO_POSTAL?.invalid">{{ getErrorMessage('CODIGO_POSTAL') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Municipio </mat-label>
                      <mat-select formControlName="MUNICIPIO">
                        <mat-option value="Amacuzac">Amacuzac</mat-option>
                        <mat-option value="Atlatlahucan">Atlatlahucan</mat-option>
                        <mat-option value="Axochiapan">Axochiapan</mat-option>
                        <mat-option value="Ayala">Ayala</mat-option>
                        <mat-option value="Coatlán">Coatlán del Río</mat-option>
                        <mat-option value="Cuautla">Cuautla</mat-option>
                        <mat-option value="Cuernavaca">Cuernavaca</mat-option>
                        <mat-option value="Emiliano">Emiliano Zapata</mat-option>
                        <mat-option value="Huitzilac">Huitzilac</mat-option>
                        <mat-option value="Jantetelco">Jantetelco</mat-option>
                        <mat-option value="Jiutepec">Jiutepec</mat-option>
                        <mat-option value="Jojutla">Jojutla</mat-option>
                        <mat-option value="Jonacatepec">Jonacatepec</mat-option>
                        <mat-option value="Mazatepec">Mazatepec</mat-option>
                        <mat-option value="Miacatlán">Miacatlán</mat-option>
                        <mat-option value="Ocuituco">Ocuituco</mat-option>
                        <mat-option value="Puente">Puente de Ixtla</mat-option>
                        <mat-option value="Temixco">Temixco</mat-option>
                        <mat-option value="Temoac">Temoac</mat-option>
                        <mat-option value="Tepalcingo">Tepalcingo</mat-option>
                        <mat-option value="Tepoztlán">Tepoztlán</mat-option>
                        <mat-option value="Tetecala">Tetecala</mat-option>
                        <mat-option value="Tetela">Tetela del Volcán</mat-option>
                        <mat-option value="Tlalnepantla">Tlalnepantla</mat-option>
                        <mat-option value="Tlaltizapán">Tlaltizapán</mat-option>
                        <mat-option value="Tlaquiltenango">Tlaquiltenango</mat-option>
                        <mat-option value="Tlayacapan">Tlayacapan</mat-option>
                        <mat-option value="Xochitepec">Xochitepec</mat-option>
                        <mat-option value="Zacatepec">Zacatepec</mat-option>
                        <mat-option value="Zacualpan">Zacualpan</mat-option>
                        <mat-option value="Totolapan">Totolapan</mat-option>
                        <mat-option value="Yautepec">Yautepec</mat-option>
                        <mat-option value="Yecapixtla">Yecapixtla</mat-option>
                      </mat-select>
                      <mat-error *ngIf="MUNICIPIO?.invalid">{{ getErrorMessage('MUNICIPIO') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Entidad </mat-label>
                      <mat-select formControlName="ENTIDAD">
                        <mat-option value="Aguascalientes">Aguascalientes</mat-option>
                        <mat-option value="Baja California">Baja California</mat-option>
                        <mat-option value="Baja California Sur">Baja California Sur</mat-option>
                        <mat-option value="Campeche">Campeche</mat-option>
                        <mat-option value="Chiapas">Chiapas</mat-option>
                        <mat-option value="Chihuahua">Chihuahua</mat-option>
                        <mat-option value="Coahuila">Coahuila</mat-option>
                        <mat-option value="Colima">Colima</mat-option>
                        <mat-option value="Ciudad de México / CDMX">Ciudad de México / CDMX</mat-option>
                        <mat-option value="Durango">Durango</mat-option>
                        <mat-option value="Estado de México">Estado de México</mat-option>
                        <mat-option value="Guanajuato">Guanajuato</mat-option>
                        <mat-option value="Guerrero">Guerrero</mat-option>
                        <mat-option value="Hidalgo">Hidalgo</mat-option>
                        <mat-option value="Jalisco">Jalisco</mat-option>
                        <mat-option value="Michoacán">Michoacán</mat-option>
                        <mat-option value="Morelos">Morelos</mat-option>
                        <mat-option value="Nayarit">Nayarit</mat-option>
                        <mat-option value="Nuevo León">Nuevo León</mat-option>
                        <mat-option value="Oaxaca">Oaxaca</mat-option>
                        <mat-option value="Puebla">Puebla</mat-option>
                        <mat-option value="Querétaro">Querétaro</mat-option>
                        <mat-option value="Quintana Roo">Quintana Roo</mat-option>
                        <mat-option value="San Luis Potosí">San Luis Potosí</mat-option>
                        <mat-option value="Sinaloa">Sinaloa</mat-option>
                        <mat-option value="Sonora">Sonora</mat-option>
                        <mat-option value="Tabasco">Tabasco</mat-option>
                        <mat-option value="Tamaulipas">Tamaulipas</mat-option>
                        <mat-option value="Tlaxcala">Tlaxcala</mat-option>
                        <mat-option value="Veracruz">Veracruz</mat-option>
                        <mat-option value="Yucatán">Yucatán</mat-option>
                        <mat-option value="Zacatecas">Zacatecas</mat-option>
                      </mat-select>
                      <mat-error *ngIf="ENTIDAD?.invalid">{{ getErrorMessage('ENTIDAD') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> País </mat-label>
                      <mat-select formControlName="PAIS">
                        <mat-option value="México">México</mat-option>
                      </mat-select>
                      <mat-error *ngIf="PAIS?.invalid">{{ getErrorMessage('PAIS') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Teléfono Principal </mat-label>
                      <input matInput type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"
                        placeholder="5512345678" formControlName="TELEFONO_PRINCIPAL" />
                      <mat-error *ngIf="TELEFONO_PRINCIPAL?.invalid">{{ getErrorMessage('TELEFONO_PRINCIPAL') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Teléfono Secundario </mat-label>
                      <input matInput type="number" oninput="javascript: if (this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);" maxlength="10"
                        placeholder="5587645321" formControlName="TELEFONO_SECUNDARIO" />
                      <mat-error *ngIf="TELEFONO_SECUNDARIO?.invalid">{{ getErrorMessage('TELEFONO_SECUNDARIO')
                        }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Correo Electrónico Principal </mat-label>
                      <input matInput placeholder="juan@gmail.com" formControlName="CORREO1" maxlength="50"/>
                      <mat-error *ngIf="CORREO1?.invalid">{{ getErrorMessage('CORREO1') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="3">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Correo Electrónico Secundario </mat-label>
                      <input matInput placeholder="perez.j@gmail.com" formControlName="CORREO2" maxlength="50"/>
                      <mat-error *ngIf="CORREO2?.invalid">{{ getErrorMessage('CORREO2') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="6">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Observaciones </mat-label>
                      <input matInput placeholder="Contacto principal de la empresa" type="text" formControlName="OBSERVACIONES" maxlength="65535"/>
                      <mat-error *ngIf="OBSERVACIONES?.invalid">{{ getErrorMessage('OBSERVACIONES') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                </mat-grid-list>
                <div align="end">
                  <button mat-raised-button color="primary" class="override-no-shadow"
                    (click)="actionContact(typeFormContact)" [disabled]="formGroupContact.invalid">
                    {{ typeFormContact == 'REG_CON' ? 'Ingresar' : 'Modificar' }}
                    <mat-icon>save</mat-icon>
                  </button>
                </div>
              </div>
              <div style="width: 45%; padding: 20px; border-radius: 20px; overflow: auto;">
                <h2>Contactos</h2>
                <table mat-table matSort [dataSource]="dataSourceContact" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="NO">
                    <th mat-header-cell *matHeaderCellDef >No</th>
                    <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
                  </ng-container>
                  <ng-container matColumnDef="TIPO_CONTACTO">
                    <th mat-header-cell *matHeaderCellDef > Tipo de Contacto </th>
                    <td mat-cell *matCellDef="let element"> {{ element.TIPO_CONTACTO }} </td>
                  </ng-container>
                  <ng-container matColumnDef="CORREO1">
                    <th mat-header-cell *matHeaderCellDef > Correo Electronico </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CORREO1 }} </td>
                  </ng-container>
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef > Estado </th>
                    <td mat-cell *matCellDef="let element">
                      <mat-chip color="success" *ngIf="element.ESTADO_CON === 'Activo'"> {{ element.ESTADO_CON }} </mat-chip>
                      <mat-chip class="red_dark_background" *ngIf="element.ESTADO_CON === 'Eliminado'"> {{ element.ESTADO_CON }} </mat-chip>
                    </td>
                  </ng-container>
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef > Acciones </th>
                    <td mat-cell *matCellDef="let element">
                      <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger
                        class="override-no-shadow" matTooltip="Click para desplegar las opciones" [disabled]="element.ESTADO_CON === 'Eliminado'">
                        <mat-icon>settings</mat-icon>
                      </button>
                      <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="actionContact('GET_CON', element)">
                          <mat-icon>edit</mat-icon> Editar
                        </button>
                        <button mat-menu-item (click)="alert('ELI_CON', element)">
                          <mat-icon>cancel</mat-icon> Eliminar
                        </button>
                      </mat-menu>
                    </td>
                  </ng-container>

                  <tr mat-header-row *matHeaderRowDef="displayedColumnsContact"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumnsContact"></tr>

                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-40 centre" colspan="12">
                      <object data="assets/img/empty_data.svg" width="300"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div align="end" class="mt-15">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step [stepControl]="formGroupCondition">
            <ng-template matStepLabel>Condiciones</ng-template>
            <div style="width: 100%; max-height: 530px; display: flex; margin-top: 10px; ">
              <div style="width: 55%; padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.12); max-height: 500px;">
                <h2>{{ typeFormCondition == 'REG_COD' ? 'Registro de Condición' : 'Modificación de Condición' }}</h2>
                <mat-grid-list cols="2" rowHeight="82px" [formGroup]="formGroupCondition">
                  <mat-grid-tile colspan="2">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Tipo de Condición </mat-label>
                      <mat-select formControlName="TIPO_CONDICION_COD">
                        <mat-option value="Condiciones de Pago">Condiciones de Pago</mat-option>
                        <mat-option value="Condiciones de Entrega">Condiciones de Entrega</mat-option>
                        <mat-option value="Condiciones de Compra">Condiciones de Compra</mat-option>
                      </mat-select>
                      <mat-error *ngIf="TIPO_CONDICION_COD?.invalid">{{ getErrorMessage('TIPO_CONDICION_COD') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="2" rowspan="4">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Información </mat-label>
                      <textarea matInput placeholder="Ingrese la información de la condición seleccionada..." formControlName="INFORMACION_COD"
                      style="height: 272px; resize: none; overflow: auto;" maxlength="65535"></textarea>
                      <mat-error *ngIf="INFORMACION_COD?.invalid">{{ getErrorMessage('INFORMACION_COD') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                </mat-grid-list>
                <div align="end">
                  <button mat-raised-button color="primary" class="override-no-shadow"
                    (click)="actionCondition(typeFormCondition)" [disabled]="formGroupCondition.invalid">
                    {{ typeFormCondition == 'REG_COD' ? 'Ingresar' : 'Modificar' }}
                    <mat-icon>save</mat-icon>
                  </button>
                </div>
              </div>
              <div style="width: 45%; padding: 20px; border-radius: 20px; overflow: auto;">
                <h2>Condiciones</h2>
                <table mat-table matSort [dataSource]="dataSourceCondition" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="NO">
                    <th mat-header-cell *matHeaderCellDef > No </th>
                    <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
                  </ng-container>
                  <ng-container matColumnDef="TIPO_CONDITION">
                    <th mat-header-cell *matHeaderCellDef > Tipo de Condición </th>
                    <td mat-cell *matCellDef="let element"> {{ element.TIPO_CONDICION_COD }} </td>
                  </ng-container>
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef > Estado </th>
                    <td mat-cell *matCellDef="let element">
                      <mat-chip color="success" *ngIf="element.ESTADO_COD === 'Activo'"> {{ element.ESTADO_COD }} </mat-chip>
                      <mat-chip class="red_dark_background" *ngIf="element.ESTADO_COD === 'Eliminado'"> {{ element.ESTADO_COD }} </mat-chip>
                    </td>
                  </ng-container>
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef > Acciones </th>
                    <td mat-cell *matCellDef="let element">
                      <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger class="override-no-shadow"
                        matTooltip="Click para desplegar las opciones" [disabled]="element.ESTADO_COD === 'Eliminado'">
                        <mat-icon>settings</mat-icon>
                      </button>
                      <mat-menu #menu="matMenu">
                        <button mat-menu-item (click)="actionCondition('GET_COD', element)">
                          <mat-icon>edit</mat-icon> Editar
                        </button>
                        <button mat-menu-item (click)="alert('ELI_COD', element)">
                          <mat-icon>cancel</mat-icon> Eliminar
                        </button>
                      </mat-menu>
                    </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="displayedColumnsCondition"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumnsCondition"></tr>
                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-40 centre" colspan="12">
                      <object data="assets/img/empty_data.svg" width="300"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div align="end" class="mt-15">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>Medios de Pago</ng-template>
            <div style="width: 100%; display: flex; margin-top: 10px; ">
              <div style="width: 50%; padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.12);">
                <h2>Médios de pago</h2>
                <section>
                  <mat-checkbox
                    [checked]="allComplete"
                    color="primary"
                    [indeterminate]="someComplete()"
                    (change)="setAll($event.checked)">
                    {{ task.name }}
                  </mat-checkbox>
                  <span>
                    <ul>
                      <li *ngFor="let subtask of task.subtasks">
                        <mat-checkbox [(ngModel)]="subtask.completed" color="primary" class="checkbox-personality" (ngModelChange)="updateAllComplete()"> {{ subtask.name }} </mat-checkbox>
                      </li>
                    </ul>
                  </span>
                </section>
              </div>
              <div style="width: 50%; padding: 20px; border-radius: 20px;">
                <span>
                  <ul>
                    <li *ngFor="let subtask of subtasks">
                      <mat-checkbox [(ngModel)]="subtask.completed" color="primary" class="checkbox-personality" (ngModelChange)="updateAllComplete()"> {{ subtask.name }} </mat-checkbox>
                    </li>
                  </ul>
                </span>
              </div>
            </div>
            <div align="end">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step [stepControl]="formGroupCatalog">
            <ng-template matStepLabel>Catálagos</ng-template>
            <div style="width: 100%; max-height: 530px; display: flex; margin-top: 10px; ">
              <div style="width: 30%; padding: 20px; border-right: 1px solid rgba(0, 0, 0, 0.12);">
                <h2>{{ typeFormCatalog == 'REG_CAT' ? 'Registro de Catálago' : 'Modificación de Catálago' }}</h2>
                <mat-grid-list cols="1" rowHeight="82px" [formGroup]="formGroupCatalog">
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Catálago </mat-label>
                      <input matInput placeholder="Catálago de Invierno" formControlName="CATALAGO_CAT" maxlength="50"/>
                      <mat-error *ngIf="CATALAGO_CAT?.invalid">{{ getErrorMessage('CATALAGO_CAT') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> Descripción </mat-label>
                      <input matInput placeholder="Enero - Abril 2023" formControlName="DESCRIPCION_CAT" maxlength="65535"/>
                      <mat-error *ngIf="DESCRIPCION_CAT?.invalid">{{ getErrorMessage('DESCRIPCION_CAT') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                  <mat-grid-tile colspan="1">
                    <mat-form-field appearance="outline" class="itemInput">
                      <mat-label> URL del Catálago </mat-label>
                      <input matInput placeholder="http://walmart/products/winter.pdf" formControlName="URL_CATALAGO_CAT" maxlength="65535"/>
                      <mat-error *ngIf="URL_CATALAGO_CAT?.invalid">{{ getErrorMessage('URL_CATALAGO_CAT') }}</mat-error>
                    </mat-form-field>
                  </mat-grid-tile>
                </mat-grid-list>
                <div align="end">
                  <button mat-raised-button color="primary" class="override-no-shadow"
                    (click)="actionCatalog(typeFormCatalog)" [disabled]="formGroupCatalog.invalid">
                    {{ typeFormCatalog == 'REG_CAT' ? 'Ingresar' : 'Modificar' }}
                    <mat-icon>save</mat-icon>
                  </button>
                </div>
              </div>
              <div style="width: 70%; padding: 20px; border-radius: 20px; overflow: auto;">
                <table mat-table matSort [dataSource]="dataSourceCatalog" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                  <ng-container matColumnDef="NO">
                    <th mat-header-cell *matHeaderCellDef > No </th>
                    <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
                  </ng-container>
                  <ng-container matColumnDef="CATALAGO">
                    <th mat-header-cell *matHeaderCellDef > Catálago </th>
                    <td mat-cell *matCellDef="let element"> {{ element.CATALAGO_CAT }} </td>
                  </ng-container>
                  <ng-container matColumnDef="DESCRIPCION">
                    <th mat-header-cell *matHeaderCellDef > Descripción </th>
                    <td mat-cell *matCellDef="let element"> {{ element.DESCRIPCION_CAT }} </td>
                  </ng-container>
                  <ng-container matColumnDef="ESTADO">
                    <th mat-header-cell *matHeaderCellDef > Estado </th>
                    <td mat-cell *matCellDef="let element">
                      <mat-chip color="success" *ngIf="element.ESTADO_CAT === 'Activo'"> {{ element.ESTADO_CAT }} </mat-chip>
                      <mat-chip class="red_dark_background" *ngIf="element.ESTADO_CAT === 'Eliminado'"> {{ element.ESTADO_CAT }} </mat-chip>
                    </td>
                  </ng-container>
                  <ng-container matColumnDef="ACCIONES">
                    <th mat-header-cell *matHeaderCellDef > Acciones </th>
                    <td mat-cell *matCellDef="let element">
                      <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger class="override-no-shadow"
                        matTooltip="Click para desplegar las opciones" [disabled]="element.ESTADO_CAT === 'Eliminado'">
                        <mat-icon>settings</mat-icon>
                      </button>
                      <mat-menu #menu="matMenu">
                        <a mat-menu-item (click)="redirectLink(element.URL_CATALAGO_CAT)">
                          <mat-icon>public</mat-icon> Ir al Catálago
                        </a>
                        <button mat-menu-item (click)="actionCatalog('GET_CAT', element)">
                          <mat-icon>edit</mat-icon> Editar
                        </button>
                        <button mat-menu-item (click)="alert('ELI_CAT', element)">
                          <mat-icon>cancel</mat-icon> Eliminar
                        </button>
                      </mat-menu>
                    </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="displayedColumnsCatalog"></tr>
                  <tr mat-row *matRowDef="let row; columns: displayedColumnsCatalog"></tr>
                  <tr class="mat-row" *matNoDataRow>
                    <td class="mat-cell p-40 centre" colspan="12">
                      <object data="assets/img/empty_data.svg" width="300"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
            <div align="end" class="mt-15">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" matStepperNext>
                Siguiente
                <mat-icon>arrow_forward</mat-icon>
              </button>
            </div>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>Revisión</ng-template>
            <div>
              <h2>Revisión de la Información</h2>
              <table mat-table matSort [dataSource]="dataSourceRevision" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
                <ng-container matColumnDef="NO">
                  <th mat-header-cell *matHeaderCellDef > No </th>
                  <td mat-cell *matCellDef="let element; let i = index;"> {{ i + 1 }} </td>
                </ng-container>
                <ng-container matColumnDef="FORMULARIO">
                  <th mat-header-cell *matHeaderCellDef > Formulario </th>
                  <td mat-cell *matCellDef="let element"> {{ element.FORMULARIO_REV }} </td>
                </ng-container>
                <ng-container matColumnDef="MENSAJE">
                  <th mat-header-cell *matHeaderCellDef > Mensaje de Revisión </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip class="gray_dark_background" *ngIf="element.TYPE_REV === 'DEFAULT'">
                      <mat-icon matChipAvatar class="icon-status">hourglass_top</mat-icon> En espera
                    </mat-chip>
                    <mat-chip color="success" *ngIf="element.TYPE_REV === 'EXITO'">
                      <mat-icon matChipAvatar class="icon-status">done</mat-icon> Correcto
                    </mat-chip>
                    <mat-chip class="red_dark_background" *ngIf="element.TYPE_REV === 'ERROR'">
                      <mat-icon matChipAvatar class="icon-status">close</mat-icon> {{ element.MENSAJE_REV }}
                    </mat-chip>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="displayedColumnsRevision"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsRevision"></tr>
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell p-40 centre" colspan="12">
                    <object data="assets/img/empty_data.svg" width="300"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
            <div align="end" class="mt-15">
              <button mat-raised-button color="info" class="override-no-shadow ml-5" matStepperPrevious>
                <mat-icon>arrow_back</mat-icon>
                Anterior
              </button>
              <button mat-raised-button color="success" class="override-no-shadow ml-5" (click)="alert('SAV_REV')" *ngIf="typeForm.type === 'REGI'">
                <mat-icon>save</mat-icon>
                Guardar Cambios
              </button>
              <button mat-raised-button color="primary" class="override-no-shadow ml-5" (click)="alert('UPD_REV')">
                <mat-icon>done</mat-icon>
                {{ typeForm.type === 'REGI' ? 'Registrar Proveedor' : 'Modificar Proveedor' }}
              </button>
            </div>
          </mat-step>
        </mat-stepper>
      </div>
    </section>
  </mat-card>
</main>
