<h2 mat-dialog-title></h2>
<mat-dialog-content>

  @if (!isLoading) {
    <form class="override_content_flex" [formGroup]="formGroup">
        
      <div class="col-flex-3">
        <mat-form-field appearance="outline">
          <mat-label>Número de Stock</mat-label>
          <input 
          matInput 
          formControlName="ID_STOCK" 
          placeholder="Ingrese el Número de Stock"
          [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
          <mat-icon matSuffix>inventory</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-6">
        <mat-form-field appearance="outline">
          <mat-label>Código del Equipamiento</mat-label>
          <input 
          matInput 
          formControlName="CODIGO_EQUIPAMIENTO" 
          placeholder="Ingrese el Código del Equipamiento"
          [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
          <mat-icon matSuffix>precision_manufacturing</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-3">
        <mat-form-field appearance="outline">
          <mat-label>ID de la Ubicación</mat-label>
          <input 
          matInput 
          formControlName="ID_UBICACION" 
          placeholder="Ingrese el ID de la Ubicación del artículo"
          [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
          <mat-icon matSuffix>location_on</mat-icon>
        </mat-form-field>
      </div>


      <div class="col-flex-3">
        @if (detailsMultiCriteria.typeForm === 'readonly') {
          <mat-form-field appearance="outline">
            <mat-label>Familia</mat-label>
            <input matInput formControlName="FAMILIA" readonly>
            <mat-icon matSuffix>workspaces</mat-icon>
          </mat-form-field>
        }
        @if (detailsMultiCriteria.typeForm === 'search') {
          <mat-form-field appearance="outline" >
            <mat-label>Familia</mat-label>
            <mat-select formControlName="FAMILIA">
              <mat-option [value]="null">-- Ninguno --</mat-option>
              @for (family of arrFamilies; track family) {
                <mat-option [value]="family"> {{ family.FAMILIA }} ({{ family.ID_FAMILIA }})</mat-option>
              }
            </mat-select>
            <mat-icon matSuffix>workspaces</mat-icon>
          </mat-form-field>
        }
      </div>
      <div class="col-flex-3">
        @if (detailsMultiCriteria.typeForm === 'readonly') {
          <mat-form-field appearance="outline">
            <mat-label>Subfamilia</mat-label>
            <input matInput formControlName="SUBFAMILIA" readonly>
            <mat-icon matSuffix>workspaces</mat-icon>
          </mat-form-field>
        }
        @if (detailsMultiCriteria.typeForm === 'search') {
          <mat-form-field appearance="outline">
            <mat-label>Subfamilia</mat-label>
            <mat-select formControlName="SUBFAMILIA">
              <mat-option [value]="null">-- Ninguno --</mat-option>
              @for (subfamily of arrSubfamilies; track subfamily) {
                <mat-option [value]="subfamily"> {{ subfamily.SUBFAMILIA }} ({{ subfamily.ID_SUBFAMILIA }})</mat-option>
              }
            </mat-select>
            <mat-icon matSuffix>workspaces</mat-icon>
          </mat-form-field>
        }
      </div>
      <div class="col-flex-3">
        <mat-form-field appearance="outline">
          <mat-label>Modelo</mat-label>
          <input matInput formControlName="MODELO" placeholder="Ingrese el Modelo" [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
          <mat-icon matSuffix>category</mat-icon>
        </mat-form-field>
      </div>
      <div class="col-flex-3">
        <mat-form-field appearance="outline">
          <mat-label>Código Modelo</mat-label>
          <input matInput formControlName="CODIGO_MODELO" placeholder="Ingrese el Código Modelo" [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
          <mat-icon matSuffix>subtitles</mat-icon>
        </mat-form-field>
      </div>


      <div class="col-flex-3">
        @if (detailsMultiCriteria.typeForm === 'readonly') {
          <mat-form-field appearance="outline">
            <mat-label>Almacén</mat-label>
            <input matInput formControlName="ALMACEN" readonly>
            <mat-icon matSuffix>store</mat-icon>
          </mat-form-field>
        }

        @if (detailsMultiCriteria.typeForm === 'search') {
          <mat-form-field appearance="outline">
            <mat-label>Almacén</mat-label>
            <mat-select formControlName="ALMACEN">
              <mat-option [value]="null">-- Ninguno --</mat-option>
              @for (warehouse of arrWarehouse; track warehouse) {
                <mat-option [value]="warehouse.CODIGO_ALMACEN"> {{ warehouse.NOMBRE_ALMACEN }} ({{ warehouse.CODIGO_ALMACEN }}) </mat-option>
              }
            </mat-select>
            <mat-icon matSuffix>store</mat-icon>
          </mat-form-field>
        }
      </div>
      <div class="col-flex-3">
        @if (detailsMultiCriteria.typeForm === 'readonly') {
          <mat-form-field appearance="outline">
            <mat-label>Área</mat-label>
            <input matInput formControlName="AREA" readonly>
            <mat-icon matSuffix>foundation</mat-icon>
          </mat-form-field>
        }

        @if (searchingArea) {
          <mat-progress-bar mode="indeterminate" class="w-100 mt-28"></mat-progress-bar>
        } 
        @if (!searchingArea && detailsMultiCriteria.typeForm === 'search') {
          <mat-form-field appearance="outline">
            <mat-label>Área</mat-label>
            <mat-select formControlName="AREA">
              <mat-option [value]="null">-- Ninguno --</mat-option>
              @for (areas of arrAreas; track areas) {
                <mat-option [value]="areas.CODIGO_AREA"> {{ areas.NOMBRE_AREA }} ({{ areas.CODIGO_AREA }}) </mat-option>
              }
            </mat-select>
            <mat-icon matSuffix>foundation</mat-icon>
          </mat-form-field>
        }
      </div>
      <div class="col-flex-3">
          @if (detailsMultiCriteria.typeForm === 'readonly') {
              <mat-form-field appearance="outline">
                  <mat-label>Nivel</mat-label>
                  <input matInput formControlName="NIVEL" readonly>
                  <mat-icon matSuffix>all_inbox</mat-icon>
              </mat-form-field>
          }

          @if (searchingLevel) {
              <mat-progress-bar mode="indeterminate" class="w-100 mt-28"></mat-progress-bar>
          }
          @if (!searchingLevel && detailsMultiCriteria.typeForm === 'search') {
              <mat-form-field appearance="outline">
                  <mat-label>Nivel</mat-label>
                  <mat-select formControlName="NIVEL">
                      <mat-option [value]="null">-- Ninguno --</mat-option>
                      @for (level of arrLevel; track level) {
                          <mat-option [value]="level.CODIGO_NIVEL"> {{ level.NOMBRE_NIVEL }} ({{ level.CODIGO_NIVEL }}) </mat-option>
                      }
                  </mat-select>
                  <mat-icon matSuffix>all_inbox</mat-icon>
              </mat-form-field>
          }
      </div>
      <div class="col-flex-3">
          @if (detailsMultiCriteria.typeForm === 'readonly') {
              <mat-form-field appearance="outline">
                  <mat-label>Zona</mat-label>
                  <input matInput formControlName="ZONA" readonly>
                  <mat-icon matSuffix>inbox</mat-icon>
              </mat-form-field>
          }
          @if (searchingZone) {
              <mat-progress-bar mode="indeterminate" class="w-100 mt-28"></mat-progress-bar>
          }
          @if (!searchingZone && detailsMultiCriteria.typeForm === 'search') {
              <mat-form-field appearance="outline">
                  <mat-label>Zona</mat-label>
                  <mat-select formControlName="ZONA">
                      <mat-option [value]="null">-- Ninguno --</mat-option>
                      @for (zone of arrZone; track zone) {
                          <mat-option [value]="zone.CODIGO_ZONA"> {{ zone.NOMBRE_ZONA }} ({{ zone.CODIGO_ZONA }}) </mat-option>
                      }
                  </mat-select>
                  <mat-icon matSuffix>inbox</mat-icon>
              </mat-form-field>
          }
      </div>
      
      <div class="col-flex-3">
          @if (detailsMultiCriteria.typeForm === 'readonly') {
              <mat-form-field appearance="outline">
                  <mat-label>Tipo de Adquisición</mat-label>
                  <input matInput formControlName="TIPO_ADQUISICION" readonly>
                  <mat-icon matSuffix>vertical_align_center</mat-icon>
              </mat-form-field>
          }

          @if (detailsMultiCriteria.typeForm === 'search') {
              <mat-form-field appearance="outline">
                  <mat-label>Tipo de Adquisición</mat-label>
                  <mat-select formControlName="TIPO_ADQUISICION">
                      <mat-option [value]="null">-- Ninguno --</mat-option>
                      <mat-option value="Por Pedido">Por Pedido</mat-option>
                      <mat-option value="Sin Pedido">Sin Pedido</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>vertical_align_center</mat-icon>
              </mat-form-field>
          }
      </div>
      <div class="col-flex-3">
          @if (detailsMultiCriteria.typeForm === 'readonly') {
              <mat-form-field appearance="outline">
                  <mat-label>Proveedor</mat-label>
                  <input matInput formControlName="NUMERO_PROVEEDOR" readonly>
                  <mat-icon matSuffix>person</mat-icon>
              </mat-form-field>
          }

          @if (detailsMultiCriteria.typeForm === 'search') {
              <mat-form-field appearance="outline">
                  <mat-label>Proveedor</mat-label>
                  <mat-select formControlName="NUMERO_PROVEEDOR">
                      <mat-option [value]="null">-- Ninguno --</mat-option>
                      @for (provider of arrProviders; track provider) {
                          <mat-option [value]="provider.NUMERO_PROVEEDOR"> {{ provider.RAZON_SOCIAL }} ({{ provider.NUMERO_PROVEEDOR }}) </mat-option>
                      }
                  </mat-select>
                  <mat-icon matSuffix>person</mat-icon>
              </mat-form-field>
          }
      </div>
      <div class="col-flex-3">
          <mat-form-field appearance="outline">
              <mat-label>Código de Barras</mat-label>
              <input matInput formControlName="CODIGO_BARRAS" placeholder="Ingrese el Código de Barras" [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
              <mat-icon matSuffix>code</mat-icon>
          </mat-form-field>
      </div>
      <div class="col-flex-3">
          <mat-form-field appearance="outline">
              <mat-label>Fecha de Vencimiento</mat-label>
              <input matInput formControlName="FECHA_VENCIMIENTO" placeholder="Ingrese la Fecha de Vencimiento" [matDatepicker]="picker" readonly>
              <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker #picker></mat-datepicker>
          </mat-form-field>
      </div>

      <div class="col-flex-3">
          <mat-form-field appearance="outline">
              <mat-label>Stock Mínimo</mat-label>
              <input matInput formControlName="STOCK_MINIMO" placeholder="Ingrese el Stock Mínimo" [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
              <mat-icon matSuffix>today</mat-icon>
          </mat-form-field>
      </div>
      <div class="col-flex-3">
          <mat-form-field appearance="outline">
              <mat-label>Stock Máximo</mat-label>
              <input matInput formControlName="STOCK_MAXIMO" placeholder="Ingrese el Stock Máximo" [readonly]="detailsMultiCriteria.typeForm === 'readonly'">
              <mat-icon matSuffix>local_cafe</mat-icon>
          </mat-form-field>
      </div>
      <div class="col-flex-3">
          @if (detailsMultiCriteria.typeForm === 'readonly') {
              <mat-form-field appearance="outline">
                  <mat-label>Estado</mat-label>
                  <input matInput formControlName="ESTADO" readonly>
                  <mat-icon matSuffix>toggle_on</mat-icon>
              </mat-form-field>
          }

          @if (detailsMultiCriteria.typeForm === 'search') {
              <mat-form-field appearance="outline">
                  <mat-label>Estado</mat-label>
                  <mat-select formControlName="ESTADO">
                      <mat-option [value]="null">-- Ninguno --</mat-option>
                      <mat-option value="Activo">Activo</mat-option>
                      <mat-option value="Eliminado">Eliminado</mat-option>
                  </mat-select>
                  <mat-icon matSuffix>toggle_on</mat-icon>
              </mat-form-field>
          }
          
      </div>

      <div class="col-flex-12">
          <mat-checkbox formControlName="CONSUMIBLE">¿Es consumible?</mat-checkbox>
          <mat-checkbox formControlName="REPARABLE">¿Es reparable?</mat-checkbox>
      </div>
    </form>
  } @else {
    <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información del emplazamiento del stock" />
  }

</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button [mat-dialog-close]="false">Cerrar</button>
  <button mat-button (click)="formGroup.reset()">Reiniciar Formulario</button>
  @if (detailsMultiCriteria.typeForm === 'search') {
    <button mat-button [disabled]="isLoading || !enableSearch" (click)="search()">Buscar</button>
  }
</mat-dialog-actions>
