<main class="main-container animated fadeIn">

  <app-btn-navigate [navigate]="'goback'" [nameButton]="'Gestión de Proveedores'" [widthPosition]="'10%'" />

  <mat-card class="override-card override-elevation-z8" style="width: 80% !important;" *ngIf="!isLoading">
    <section class="override-section">

      <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>
      <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>

      <div class="override-form">
        <mat-stepper [linear]="isLinear" #stepper style="overflow: auto;">
          <mat-step [stepControl]="formGroupInformation">
            <ng-template matStepLabel>Información</ng-template>
            <form class="override_content_flex mt-10" [formGroup]="formGroupInformation">
              <div class="col-flex-12">
                <h2>Información Empresarial</h2>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Razón Social</mat-label>
                  <input matInput placeholder="Ingrese la Razón Social del proveedor" maxlength="100" formControlName="RAZON_SOCIAL">
                  <mat-icon matSuffix>business</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['RAZON_SOCIAL'].hasError('required')" title="El campo Razón Social es obligatorio.">El campo <b>Razón Social</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Nombre</mat-label>
                  <input matInput placeholder="Ingrese el Nombre del responsable de la compañía" maxlength="50" formControlName="NOMBRE">
                  <mat-icon matSuffix>badge</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['NOMBRE'].hasError('required')" title="El campo Nombre es obligatorio.">El campo <b>Nombre</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Primer Apellido</mat-label>
                  <input matInput placeholder="Ingrese el Primer Apellido del responsable de la compañía" maxlength="50" formControlName="PRIMER_APELLIDO">
                  <mat-icon matSuffix>badge</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['PRIMER_APELLIDO'].hasError('required')" title="El campo Primer Apellido es obligatorio.">El campo <b>Primer Apellido</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Segundo Apellido</mat-label>
                  <input matInput placeholder="Ingrese el Segundo Apellido del responsable de la compañía" maxlength="50" formControlName="SEGUNDO_APELLIDO">
                  <mat-icon matSuffix>badge</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['SEGUNDO_APELLIDO'].hasError('required')" title="El campo Segundo Apellido es obligatorio.">El campo <b>Segundo Apellido</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label>Tipo de Contribuyente</mat-label>
                  <mat-select (ngModelChange)="onchangeType()" formControlName="TIPO_CONTRIBUYENTE">
                    <mat-option value="Persona física">Persona Física</mat-option>
                    <mat-option value="Persona moral">Persona Moral</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>manage_accounts</mat-icon>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field 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="formGroupInformation.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-3">
                <mat-form-field appearance="outline">
                  <mat-label>Tipo de Ciudadancia</mat-label>
                  <mat-select formControlName="TIPO" (ngModelChange)="changeType()">
                    <mat-option value="Nacional">Nacional</mat-option>
                    <mat-option value="Extranjero">Extranjero</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>public</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['TIPO'].hasError('required')" title="El campo Tipo es obligatorio.">El campo <b>Tipo</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3" *ngIf="formGroupInformation.controls['TIPO'].value === 'Nacional' || formGroupInformation.controls['TIPO'].value === ''">
                <mat-form-field appearance="outline">
                  <mat-label>R.F.C.</mat-label>
                  <input matInput placeholder="Ingrese el R.F.C. del proveedor" maxlength="13" formControlName="RFC">
                  <mat-icon matSuffix>subtitles</mat-icon>
                  <mat-error *ngIf="formGroupInformation.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="formGroupInformation.controls['RFC'].hasError('pattern')" title="El campo R.F.C. no es correcto.">El campo <b>R.F.C.</b> no es correcto.</mat-error>
                  <mat-error *ngIf="formGroupInformation.controls['RFC'].hasError('minlength')" title="El campo R.F.C. no tiene la longitud requerida.">El campo <b>R.F.C.</b> no tiene la longitud requerida.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3" *ngIf="formGroupInformation.controls['TIPO'].value === 'Extranjero'">
                <mat-form-field appearance="outline">
                  <mat-label>Tax ID</mat-label>
                  <input matInput placeholder="Ingrese el TAX ID del proveedor" maxlength="13" formControlName="TAXID">
                  <mat-icon matSuffix>subtitles</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['TAXID'].hasError('required')" title="El campo Tax ID es obligatorio.">El campo <b>Tax ID</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupInformation.controls['TAXID'].hasError('pattern')" title="El campo Tax ID no es correcto.">El campo <b>Tax ID</b> no es correcto.</mat-error>
                  <mat-error *ngIf="formGroupInformation.controls['TAXID'].hasError('minlength')" title="El campo Tax no tiene la longitud requerida.">El campo <b>Tax ID</b> no tiene la longitud requerida.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-flex-1">
                <mat-form-field 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="formGroupInformation.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-2">
                <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="Ingrese el Teléfono Principal" formControlName="TELEFONO1">
                  <mat-icon matSuffix>phone</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['TELEFONO1'].hasError('required')" title="El campo Teléfono Principal es obligatorio.">El campo <b>Teléfono Principal</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-1">
                <mat-form-field appearance="outline">
                  <mat-label>Lada</mat-label>
                  <input matInput formControlName="LADA2" [matAutocomplete]="autocompleteLada2" (ngModelChange)="changeLada()">
                  <mat-autocomplete autoActiveFirstOption #autocompleteLada2>
                    <mat-option *ngFor="let lada2 of filteredLadas2 | async" [value]="lada2">
                      {{ lada2 }}
                    </mat-option>
                  </mat-autocomplete>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <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="Ingrese el Teléfono Secundario" formControlName="TELEFONO2">
                  <mat-icon matSuffix>phone</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['TELEFONO2'].hasError('required')" title="El campo Teléfono Secundario es obligatorio.">El campo <b>Teléfono Secundario</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Correo Electrónico</mat-label>
                  <input matInput placeholder="Ingrese el Correo Electrónico del proveedor" maxlength="50" formControlName="CORREO">
                  <mat-icon matSuffix>email</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['CORREO'].hasError('required')" title="El campo Correo Electrónico es obligatorio.">El campo <b>Correo Electrónico</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-3" *ngIf="websiteLinkEnabled">
                <mat-form-field appearance="outline">
                  <mat-label>Sitio Web</mat-label>
                  <input matInput placeholder="Ingrese el Sitio Web del proveedor" maxlength="100" formControlName="SITIOWEB">
                  <mat-icon matSuffix>language</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['SITIOWEB'].hasError('required')" title="El campo Sitio Web es obligatorio.">El campo <b>Sitio Web</b> es obligatorio.</mat-error>
                  <mat-error *ngIf="formGroupInformation.controls['SITIOWEB'].hasError('patttern')" title="El campo Sitio Web no es un campo válido.">El campo <b>Sitio Web</b> no es un campo válido.</mat-error>
                </mat-form-field>
              </div>

              <div class="col-flex-12">
                <h2>Domicilio Fiscal</h2>
              </div>

              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Calle</mat-label>
                  <input matInput formControlName="CALLE" placeholder="">
                  <mat-icon matSuffix>add_road</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['CALLE'].hasError('required')" title="El campo Calle es obligatorio.">El campo <b>Calle</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field appearance="outline">
                  <mat-label>N. Exterior</mat-label>
                  <input matInput formControlName="EXTERIOR" placeholder="">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['EXTERIOR'].hasError('required')" title="El campo N. Exterior es obligatorio.">El campo <b>N. Exterior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field appearance="outline">
                  <mat-label>N. Interior</mat-label>
                  <input matInput formControlName="INTERIOR" placeholder="">
                  <mat-icon matSuffix>tag</mat-icon>
                  <mat-error *ngIf="formGroupInformation.controls['INTERIOR'].hasError('required')" title="El campo N. Interior es obligatorio.">El campo <b>N. Interior</b> es obligatorio.</mat-error>
                </mat-form-field>
              </div>
              <div class="col-flex-2" [style.padding-top]="searchingAddress ? '30px' : '3px'">
                <mat-form-field 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="formGroupInformation.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-3" [style.padding-top]="searchingSettings ? '30px' : '3px'">
                <mat-form-field 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="formGroupInformation.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-3" [style.padding-top]="searchingTowns ? '30px' : '3px'">
                <mat-form-field 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="formGroupInformation.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-3" [style.padding-top]="searchingCities ? '30px' : '3px'">
                <mat-form-field 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="formGroupInformation.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-3" [style.padding-top]="searchingStates ? '30px' : '3px'">
                <mat-form-field appearance="outline" *ngIf="!searchingStates">
                  <mat-label>Entidad Federativa</mat-label>
                  <input matInput formControlName="ENTIDAD" [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="formGroupInformation.controls['ENTIDAD'].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-3">
                <mat-form-field 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" [disabled]="(countryStr == 'México (MEX)' && formGroupInformation.controls['TIPO'].value == 'Nacional') || (countryStr != 'México (MEX)' && formGroupInformation.controls['TIPO'].value == 'Extranjero')">{{ countryStr }}</mat-option>
                  </mat-autocomplete>
                  <mat-icon matSuffix>location_on</mat-icon>
                  <mat-error *ngIf="formGroupInformation.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>
            </form>
          </mat-step>
          <mat-step *ngIf="conditionPaymentEnabled">
            <ng-template matStepLabel>Medios de Pago</ng-template>
            <div class="override_content_flex" style="align-items: center;">
              <div class="col-flex-6"><span class="override-main-title">Selección de Métodos de Pago</span></div>
              <div class="col-flex-6 align-end">
                <b>Métodos de Pago Seleccionado: </b> {{ selection.selected.length }} {{ selection.selected.length === 1 ? 'método' : 'métodos' }}
              </div>
            </div>
            <div class="table-resize">
              <table mat-table [dataSource]="dataSourcePaymentMethod" >
                <ng-container matColumnDef="SELECT">
                  <th mat-header-cell *matHeaderCellDef>
                    <mat-checkbox (change)="$event ? toggleAllRows() : null"
                                  [checked]="selection.hasValue()"
                                  [indeterminate]="selection.hasValue()">
                    </mat-checkbox>
                  </th>
                  <td mat-cell *matCellDef="let row">
                    <mat-checkbox (click)="$event.stopPropagation()"
                                  (change)="$event ? selection.toggle(row) : null"
                                  [checked]="selection.isSelected(row)">
                    </mat-checkbox>
                  </td>
                </ng-container>
                <ng-container matColumnDef="C_FORMAPAGO">
                  <th mat-header-cell *matHeaderCellDef> Número de Método de Pago </th>
                  <td mat-cell *matCellDef="let element"> {{element.C_FORMAPAGO}} </td>
                </ng-container>
                <ng-container matColumnDef="DESCRIPCION">
                  <th mat-header-cell *matHeaderCellDef> Método de Pago </th>
                  <td mat-cell *matCellDef="let element"> {{element.DESCRIPCION}} </td>
                </ng-container>
              
                <tr mat-header-row *matHeaderRowDef="displayedColumnsPaymentMethod" ></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsPaymentMethod;" class="example-element-row"
                    (click)="selection.toggle(row)">
                </tr>
              </table>
            </div>
          </mat-step>
          <mat-step *ngIf="getReferencesEnabled">
            <ng-template matStepLabel>Referencias</ng-template>
            <div class="override_content_flex">
              <div class="col-flex-6"><h2>Registro de Referencias</h2></div>
              <div class="col-flex-6 align-end">
                <app-btn-resize 
                  class="ml-8" 
                  (click)="openDialogReference('REGISTER')"
                  [disabled]="isLoading || isLoadingForm"
                  [backgroundColor]="'primary'" 
                  [textColor]="'white_font'" 
                  [nameButton]="'Nuevo'" 
                  [icon]="'add'"
                />
              </div>
            </div>
            <div class="table-resize">
              <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.RAZON_SOCIAL }} </td>
                </ng-container>
                <ng-container matColumnDef="CORREO">
                  <th mat-header-cell *matHeaderCellDef> Correo Electrónico </th>
                  <td mat-cell *matCellDef="let element"> {{ element.CORREO }} </td>
                </ng-container>
                <ng-container matColumnDef="TELEFONO">
                  <th mat-header-cell *matHeaderCellDef> Teléfono </th>
                  <td mat-cell *matCellDef="let element"> +{{ element.LADA }} {{ element.TELEFONO }} </td>
                </ng-container>
                <ng-container matColumnDef="RFC">
                  <th mat-header-cell *matHeaderCellDef> R.F.C. </th>
                  <td mat-cell *matCellDef="let element"> {{ element.RFC }} </td>
                </ng-container>
                <ng-container matColumnDef="ESTADO">
                  <th mat-header-cell *matHeaderCellDef> Estado </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip 
                      class="teal_dark_background" 
                      *ngIf="element.ESTADO === 'Activo' || element.ESTADO === 'Modificado' || element.ESTADO === 'Nuevo'"> Activo </mat-chip>
                    <mat-chip 
                      class="red_dark_background" 
                      *ngIf="element.ESTADO === 'Eliminado'"> Eliminado </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 
                      class="override_no_shadow ml-4" 
                      color="primary" 
                      (click)="openDialogReference('UPDATE', element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Editar">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button 
                      mat-mini-fab 
                      class="override_no_shadow ml-4" 
                      color="warn" 
                      (click)="deleteReference(element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Eliminar">
                      <mat-icon>close</mat-icon>
                    </button>
                  </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-20 centre" colspan="12">
                    <object data="assets/img/empty_data.svg" width="200"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
          </mat-step>
          <mat-step *ngIf="contactEnabled">
            <ng-template matStepLabel>Contactos</ng-template>
            <div class="override_content_flex">
              <div class="col-flex-6"><h2>Registro de Contactos</h2></div>
              <div class="col-flex-6 align-end">
                <app-btn-resize 
                  class="ml-8" 
                  (click)="openDialogContact('REGISTER')"
                  [disabled]="isLoading || isLoadingForm"
                  [backgroundColor]="'primary'" 
                  [textColor]="'white_font'" 
                  [nameButton]="'Nuevo'" 
                  [icon]="'add'"
                />
              </div>
            </div>
            <div class="table-resize">
              <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="NOMBRE_CONTACTO">
                  <th mat-header-cell *matHeaderCellDef> Nombre de Contacto </th>
                  <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_CONTACTO }} </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 class="teal_dark_background white_font" *ngIf="element.ESTADO === 'Activo' || element.ESTADO === 'Modificado' || element.ESTADO === 'Nuevo'"> 
                      Activo
                    </mat-chip>
                    <mat-chip class="red_dark_background" *ngIf="element.ESTADO === 'Eliminado'"> 
                      Eliminado
                    </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 
                      class="override_no_shadow ml-4" 
                      color="primary" 
                      (click)="openDialogContact('UPDATE', element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Editar">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button 
                      mat-mini-fab 
                      class="override_no_shadow ml-4" 
                      color="warn" 
                      (click)="deleteContact(element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Eliminar">
                      <mat-icon>close</mat-icon>
                    </button>
                  </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="150"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
          </mat-step>
          <mat-step *ngIf="conditionPurchaseEnabled">
            <ng-template matStepLabel>Condiciones</ng-template>
            <div class="override_content_flex">
              <div class="col-flex-6"><h2>Condiciones</h2></div>
              <div class="col-flex-6 align-end">
                <app-btn-resize 
                  class="ml-8" 
                  (click)="openDialogCondition('REGISTER')"
                  [disabled]="isLoading || isLoadingForm"
                  [backgroundColor]="'primary'" 
                  [textColor]="'white_font'" 
                  [nameButton]="'Nuevo'" 
                  [icon]="'add'"
                />
              </div>
            </div>
            <div class="table-resize">
              <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 }} </td>
                </ng-container>
                <ng-container matColumnDef="INFORMACION">
                  <th mat-header-cell *matHeaderCellDef> Información </th>
                  <td mat-cell *matCellDef="let element"> {{ resourcesService.resizeText(element.INFORMACION, 137) }} </td>
                </ng-container>
                <ng-container matColumnDef="ESTADO">
                  <th mat-header-cell *matHeaderCellDef> Estado </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip class="teal_dark_background white_font" *ngIf="element.ESTADO === 'Activo' || element.ESTADO === 'Modificado' || element.ESTADO === 'Nuevo'"> 
                      Activo
                    </mat-chip>
                    <mat-chip class="red_dark_background" *ngIf="element.ESTADO === 'Eliminado'"> Eliminado </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 
                      class="override_no_shadow ml-4" 
                      color="primary" 
                      (click)="openDialogCondition('UPDATE', element)"
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Editar">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button 
                      mat-mini-fab 
                      class="override_no_shadow ml-4" 
                      color="warn" 
                      (click)="deleteCondition(element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Eliminar">
                      <mat-icon>close</mat-icon>
                    </button>
                  </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="150"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
          </mat-step>
          <mat-step *ngIf="webCatalogEnabled">
            <ng-template matStepLabel>Catálogos</ng-template>
            <div class="override_content_flex">
              <div class="col-flex-6"><h2>Catálogos</h2></div>
              <div class="col-flex-6 align-end">
                <app-btn-resize 
                  class="ml-8" 
                  (click)="openDialogCatalog('REGISTER')"
                  [disabled]="isLoading || isLoadingForm"
                  [backgroundColor]="'primary'" 
                  [textColor]="'white_font'" 
                  [nameButton]="'Nuevo'" 
                  [icon]="'add'"
                />
              </div>
            </div>
            <div class="table-resize">
              <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álogo </th>
                  <td mat-cell *matCellDef="let element"> {{ resourcesService.resizeText(element.CATALAGO, 27) }} </td>
                </ng-container>
                <ng-container matColumnDef="DESCRIPCION">
                  <th mat-header-cell *matHeaderCellDef> Descripción </th>
                  <td mat-cell *matCellDef="let element"> {{ resourcesService.resizeText(element.DESCRIPCION, 147) }} </td>
                </ng-container>
                <ng-container matColumnDef="ESTADO">
                  <th mat-header-cell *matHeaderCellDef> Estado </th>
                  <td mat-cell *matCellDef="let element">
                    <mat-chip class="teal_dark_background white_font" *ngIf="element.ESTADO === 'Activo' || element.ESTADO === 'Modificado' || element.ESTADO === 'Nuevo'"> 
                      Activo
                    </mat-chip>
                    <mat-chip class="red_dark_background" *ngIf="element.ESTADO === 'Eliminado'"> Eliminado </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 
                      class="override_no_shadow ml-4" 
                      color="primary" 
                      (click)="openDialogCatalog('UPDATE', element)"
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Editar">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button 
                      mat-mini-fab 
                      class="override_no_shadow ml-4" 
                      color="warn" 
                      (click)="deleteCatalog(element)" 
                      [disabled]="element.ESTADO === 'Eliminado' || isLoading || isLoadingForm"
                      matTooltip="Eliminar">
                      <mat-icon>close</mat-icon>
                    </button>
                  </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="150"></object>
                    <h2>Sin datos</h2>
                  </td>
                </tr>
              </table>
            </div>
          </mat-step>
          <mat-step>
            <ng-template matStepLabel>Revisión</ng-template>
            <div>
              <h2>Revisión de la Información</h2>
              <div class="table-resize">
                <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 class="teal_dark_background white_font" *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="150"></object>
                      <h2>Sin datos</h2>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </mat-step>
        </mat-stepper>
      </div>
    </section>

    <mat-divider></mat-divider>

    <div class="footer-step">
      <div *ngIf="stepper.selectedIndex === 0 ">
        <mat-button-toggle-group>
          <mat-button-toggle value="green" (click)="stepper.next()">
            Siguiente
            <mat-icon>arrow_forward</mat-icon>
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
     
      <div *ngIf="stepper.selectedIndex === 1 && !websiteLinkEnabled">
        <mat-button-toggle-group>
          <mat-button-toggle value="red" (click)="stepper.previous()">
            <mat-icon>arrow_back</mat-icon>
            Anterior
          </mat-button-toggle>
          <mat-button-toggle value="green" (click)="stepper.next()">
            Siguiente
            <mat-icon>arrow_forward</mat-icon>
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>
      <div *ngIf="(stepper.selectedIndex === 2 && !websiteLinkEnabled) || (stepper.selectedIndex === 1 && websiteLinkEnabled) ">
        <mat-button-toggle-group>
          <mat-button-toggle (click)="stepper.previous()">
            <mat-icon>arrow_back</mat-icon>
            Anterior
          </mat-button-toggle>
          <mat-button-toggle (click)="alert('SAV_REV')" *ngIf="typeForm.type === 'REGI'">
            <mat-icon>save</mat-icon>
            Guardar Cambios
          </mat-button-toggle>
          <!-- <mat-button-toggle (click)="generateObjForm()" [disabled]="isLoadingForm"> -->
          <mat-button-toggle (click)="alert('UPD_REV')" [disabled]="isLoadingForm">
            <mat-icon>done</mat-icon>
            {{ typeForm.type === 'REGI' ? 'Registrar' : 'Modificar' }}
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div>

      <!--  <div *ngIf="stepper.selectedIndex === 1 || stepper.selectedIndex === 2 || stepper.selectedIndex === 3 || stepper.selectedIndex === 4 || stepper.selectedIndex === 5">
        <mat-button-toggle-group>
          <mat-button-toggle value="red" (click)="stepper.previous()">
            <mat-icon>arrow_back</mat-icon>
            Anterior
          </mat-button-toggle>
          <mat-button-toggle value="green" (click)="stepper.next()">
            Siguiente
            <mat-icon>arrow_forward</mat-icon>
          </mat-button-toggle>
        </mat-button-toggle-group>
      </div> -->
      
    </div>

  </mat-card>

  <mat-card class="override-card override-elevation-z8" style="width: 80% !important;" *ngIf="isLoading">
    <app-loading-card
      [isLoading]="isLoading"
      [isLoadingForm]="isLoadingForm"
      [txtLoading]="'Cargando la información del formulario del proveedor'"
    />
  </mat-card>
</main>
 
