<h2 mat-dialog-title>Intercambiar Artículo entre Almacenes</h2>
<mat-dialog-content>
    <form class="override_content_flex" [formGroup]="formGroup" *ngIf="!isLoading">
        <div class="col-flex-12">
            <mat-form-field appearance="outline" class="w-100">
                <mat-label>Almacen</mat-label>
                <mat-select formControlName="ALMACEN" (ngModelChange)="searchArea()">
                    <mat-option *ngFor="let warehouse of arrWarehouse" [value]="warehouse.CODIGO_ALMACEN"> 
                        {{ warehouse.NOMBRE_ALMACEN }} ({{ warehouse.CODIGO_ALMACEN }})
                    </mat-option>
                </mat-select>
                <mat-error 
                    *ngIf="formGroup.controls['ALMACEN'].hasError('required')"
                    title="El campo Almacen es requerido">
                    El campo <b>Almacen</b> es requerido
                </mat-error>
            </mat-form-field>
        </div>
        <div class="col-flex-12">
            <mat-progress-bar mode="indeterminate" class="w-100 mb-20" *ngIf="searchingArea"></mat-progress-bar>
            <mat-form-field appearance="outline" class="w-100" *ngIf="!searchingArea">
                <mat-label>Área</mat-label>
                <mat-select formControlName="AREA" (ngModelChange)="searchLevel()">
                    <mat-option *ngFor="let areas of arrAreas" [value]="areas.CODIGO_AREA">
                        {{ areas.NOMBRE_AREA }} ({{ areas.CODIGO_AREA }})
                    </mat-option>
                </mat-select>
                <mat-error 
                    *ngIf="formGroup.controls['AREA'].hasError('required')"
                    title="El campo Área es requerido">
                    El campo <b>Área</b> es requerido
                </mat-error>
            </mat-form-field>
        </div>
        <div class="col-flex-12">
            <mat-progress-bar mode="indeterminate" class="w-100 mb-20" *ngIf="searchingLevel"></mat-progress-bar>
            <mat-form-field appearance="outline" class="w-100" *ngIf="!searchingLevel">
                <mat-label>Nivel</mat-label>
                <mat-select formControlName="NIVEL" (ngModelChange)="searchZone()">
                    <mat-option *ngFor="let level of arrLevel" [value]="level.CODIGO_NIVEL">
                        {{ level.NOMBRE_NIVEL }} ({{ level.CODIGO_NIVEL }})
                    </mat-option>
                </mat-select>
                <mat-error 
                    *ngIf="formGroup.controls['NIVEL'].hasError('required')"
                    title="El campo Nivel es requerido">
                    El campo <b>Nivel</b> es requerido
                </mat-error>
            </mat-form-field>
        </div>
        <div class="col-flex-12">
            <mat-progress-bar mode="indeterminate" class="w-100 mb-20" *ngIf="searchingZone"></mat-progress-bar>
            <mat-form-field appearance="outline" class="w-100" *ngIf="!searchingZone">
                <mat-label>Zona</mat-label>
                <mat-select formControlName="ZONA">
                    <mat-option *ngFor="let zone of arrZone" [value]="zone.CODIGO_ZONA">
                        {{ zone.NOMBRE_ZONA }} ({{ zone.CODIGO_ZONA }})
                    </mat-option>
                </mat-select>
                <mat-error 
                    *ngIf="formGroup.controls['ZONA'].hasError('required')"
                    title="El campo Zona es requerido">
                    El campo <b>Zona</b> es requerido
                </mat-error>
            </mat-form-field>
        </div>
    </form>

    <app-loading-card
        [isLoading]="isLoading"
        [txtLoading]="'Cargando información del formulario'"
      />
</mat-dialog-content>
<mat-dialog-actions align="end">
    <button mat-button [mat-dialog-close]="false">Cancelar</button>
    <button mat-button (click)="save()" [disabled]="formGroup.invalid || validateRepeatedValues() || isLoading || isLoadingForm">Guardar</button>
</mat-dialog-actions>
