<main class="main-container animated fadeIn">
  <app-btn-navigate navigate="/sam/GIST" nameButton="Gestión de Inventario y/o Stock"/>
  <mat-card class="override-card override-elevation-z8">
      <section class="override-section">
          <nav class="override-nav">
              <div class="w-100 align-center pv-15">
                  <span class="title-card">Cantidades de reabastecimiento</span>
              </div>
          </nav>
          
          <mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
              <mat-tab label="Contenido general">

                  <div class="override-actions mt-16">
                      <mat-form-field appearance="outline" class="w-300p mr-8">
                          <mat-label>Buscador</mat-label>
                          <input 
                              matInput 
                              [(ngModel)]="txtSearchReplanishmentQuantities" 
                              placeholder="Ingrese la palabra a buscar"
                              (keyup)="applyFilterReplanishmentQuantities()" 
                              [disabled]="isLoading || isLoadingForm"
                              />
                      </mat-form-field>
                      <div class="override-buttons">
                          <app-btn-resize 
                              class="mr-8 "
                              [disabled]="isLoading || isLoadingForm || !validateCreateRequestLineQuantities()"
                              [backgroundColor]="'primary '" 
                              [textColor]="'white_font'" 
                              [nameButton]="'Crear Línea de Solicitud'" 
                              [icon]="'add'"
                              (click)="alert('Q')"/>
                          <button 
                              mat-mini-fab 
                              matTooltip="Actualizar datos"
                              (click)="getReplenishmentQuantities()"
                              class="orange_primary_background white_font override_no_shadow ml-8">
                              <mat-icon>refresh</mat-icon>
                          </button>
                      </div>
                  </div>

                  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando información de la ubicación." />
                  
                  @if (resourcesService.innerWidth() >= 1760 && !isLoading) {
                      <div class="container-cards">
                          @for (article of dataSourceReplanishmentQuantities.data; track article) {
                              <div class="card-item">
                                  <div class="card-section-img">
                                      <img [src]="article.IMAGENES[0]">
                                  </div>
                                  <div class="card-section-info">
                                      <div class="card-section-info-data">
                                          
                                          <div class="align-center mt-8">
                                              <b>{{ article.FAMILIA }}</b>
                                          </div>
                                          <div class="align-center mb-8">
                                              <span>{{ article.SUBFAMILIA }}</span>
                                          </div>
              
                                          <div class="align-center mb-8 gray_dark_font">
                                              <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                                          </div>
              
                                          <div class="align-center mb-4">
                                              <b>Número de proveedor: </b> <span>#{{ article.NUMERO_PROVEEDOR }}</span>
                                          </div>
                                          
                                      </div>
                                      <div class="card-section-info-footer align-center mt-4">
                                          <div class="content-input">              
                                              <button 
                                                  mat-mini-fab
                                                  class="override_no_shadow"
                                                  color="primary" 
                                                  (click)="quantityProductsQuantities('resta', article)" 
                                                  [disabled]="article.CANTIDAD === 0 ">
                                                  <mat-icon>remove</mat-icon>
                                              </button>
                                              <input type="number" class="input_cantidad centre" 
                                                  (keyup)="validateQuantity(article.CANTIDAD, article)" [(ngModel)]="article.CANTIDAD" [value]="article.CANTIDAD">
                                              <button 
                                                  mat-mini-fab
                                                  class="override_no_shadow"
                                                  color="primary" 
                                                  (click)="quantityProductsQuantities('suma', article)">
                                                  <mat-icon>add</mat-icon>
                                              </button>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          } @empty {
                              <div class="w-100 align-center">
                                  <object data="assets/img/empty_data.svg" width="150"></object>
                                  <h2>Sin datos</h2>
                              </div>
                          }
                      </div>
                  }
                  @if (resourcesService.innerWidth() < 1760 && !isLoading) {
                      <div class="container-cards-small">
                          @for (article of dataSourceReplanishmentQuantities.data; track article) {
                              <div class="card-item-small">
                                  <div class="mb-6 title_small">{{ article.MODELO }} - {{ article.CODIGO_MODELO }}</div>
                                  <div class="card-section-img-small">
                                      <img [src]="article.IMAGENES[0]">
                                  </div>
                                  <div class="card-section-info-footer align-center mt-4">
                                      <div class="content-input">              
                                          <button 
                                              mat-mini-fab
                                              class="override_no_shadow"
                                              color="primary" 
                                              (click)="quantityProductsQuantities('resta', article)" 
                                              [disabled]="article.CANTIDAD === 0 ">
                                              <mat-icon>remove</mat-icon>
                                          </button>
                                          <input type="number" class="input_cantidad centre" 
                                              (keyup)="validateQuantity(article.CANTIDAD, article)" [(ngModel)]="article.CANTIDAD" [value]="article.CANTIDAD">
                                          <button 
                                              mat-mini-fab
                                              class="override_no_shadow"
                                              color="primary" 
                                              (click)="quantityProductsQuantities('suma', article)">
                                              <mat-icon>add</mat-icon>
                                          </button>
                                      </div>
                                  </div>
                              </div>
                          } @empty {
                              <div>
                                  <object data="assets/img/empty_data.svg" width="150"></object>
                                  <h2>Sin datos</h2>
                              </div>
                          }
                      </div>
                  }
              </mat-tab>
              <mat-tab label="Surgerencia de abastecimiento">

                  <div class="override-actions mt-16">
                      <mat-form-field appearance="outline" class="w-300p mr-8">
                          <mat-label>Buscador</mat-label>
                          <input 
                              matInput 
                              [(ngModel)]="txtSearchReplanishmentSuggestion" 
                              placeholder="Ingrese la palabra a buscar"
                              (keyup)="applyFilterReplanishmentSuggestion()" 
                              [disabled]="isLoading || isLoadingForm"
                              />
                      </mat-form-field>
                      <div class="override-buttons">
                          <app-btn-resize 
                              class="mr-8"
                              [disabled]="isLoading || isLoadingForm || !validateCreateRequestLineSuggestion()"
                              [backgroundColor]="'primary'" 
                              [textColor]="'white_font'" 
                              [nameButton]="'Crear Línea de Solicitud'" 
                              [icon]="'add'"
                              (click)="alert('S')"/>
                          <button 
                              mat-mini-fab 
                              matTooltip="Actualizar datos"
                              (click)="getReplenishmentSuggestion()"
                              class="orange_primary_background white_font override_no_shadow ml-8">
                              <mat-icon>refresh</mat-icon>
                          </button>
                      </div>
                  </div>

                  <app-loading-card [isLoading]="isLoading" txtLoading="Cargando la información" />
                  
                  @if (resourcesService.innerWidth() >= 1760 && !isLoading) {
                      <div class="container-cards">
                          @for (article of dataSourceReplanishmentSuggestion.data; track article) {
                              <div class="card-item">
                                  <div class="card-section-img">
                                      <img [src]="article.IMAGENES[0]">
                                  </div>
                                  <div class="card-section-info">
                                      <div class="card-section-info-data">
                                          
                                          <div class="align-center mt-8">
                                              <b>{{ article.FAMILIA }}</b>
                                          </div>
                                          <div class="align-center mb-8">
                                              <span>{{ article.SUBFAMILIA }}</span>
                                          </div>
              
                                          <div class="align-center mb-8 gray_dark_font">
                                              <span>{{ article.MODELO }}</span> - <span>{{ article.CODIGO_MODELO }}</span>
                                          </div>
              
                                          <div class="align-center mb-4">
                                              <b>Número de proveedor: </b> <span>#{{ article.NUMERO_PROVEEDOR }}</span> <br>
                                              <span>{{ article.ESTADO }}</span>
                                          </div>
                                          
                                      </div>
                                      <div class="card-section-info-footer align-center mt-4">
                                          <div class="content-input">              
                                              <button 
                                                  mat-mini-fab
                                                  class="override_no_shadow"
                                                  color="primary" 
                                                  (click)="quantityProductsSuggestion('resta', article)" 
                                                  [disabled]="article.CANTIDAD_SUGERIDA === 0 ">
                                                  <mat-icon>remove</mat-icon>
                                              </button>
                                              <input type="number" class="input_cantidad centre" 
                                                  (keyup)="validateQuantity(article.CANTIDAD_SUGERIDA, article)" [(ngModel)]="article.CANTIDAD_SUGERIDA" [value]="article.CANTIDAD_SUGERIDA">
                                              <button 
                                                  mat-mini-fab
                                                  class="override_no_shadow"
                                                  color="primary" 
                                                  (click)="quantityProductsSuggestion('suma', article)">
                                                  <mat-icon>add</mat-icon>
                                              </button>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          } @empty {
                              <div class="w-100 align-center">
                                  <object data="assets/img/empty_data.svg" width="150"></object>
                                  <h2>Sin datos</h2>
                              </div>
                          }
                      </div>
                  }
                  @if (resourcesService.innerWidth() < 1760 && !isLoading) {
                      <div class="container-cards-small">
                          @for (article of dataSourceReplanishmentSuggestion.data; track article) {
                              <div class="card-item-small">
                                  <div class="mb-6 title_small">{{ article.MODELO }} - {{ article.CODIGO_MODELO }}</div>
                                  <div class="card-section-img-small">
                                      <img [src]="article.IMAGENES[0]">
                                  </div>
                                  <div class="card-section-info-footer align-center mt-4">
                                      <div class="content-input">              
                                          <button 
                                              mat-mini-fab
                                              class="override_no_shadow"
                                              color="primary" 
                                              (click)="quantityProductsSuggestion('resta', article)" 
                                              [disabled]="article.CANTIDAD_SUGERIDA === 0 ">
                                              <mat-icon>remove</mat-icon>
                                          </button>
                                          <input type="number" class="input_cantidad centre" 
                                              (keyup)="validateQuantity(article.CANTIDAD_SUGERIDA, article)" [(ngModel)]="article.CANTIDAD_SUGERIDA" [value]="article.CANTIDAD_SUGERIDA">
                                          <button 
                                              mat-mini-fab
                                              class="override_no_shadow"
                                              color="primary" 
                                              (click)="quantityProductsSuggestion('suma', article)">
                                              <mat-icon>add</mat-icon>
                                          </button>
                                      </div>
                                  </div>
                              </div>
                          } @empty {
                              <div>
                                  <object data="assets/img/empty_data.svg" width="150"></object>
                                  <h2>Sin datos</h2>
                              </div>
                          }
                      </div>
                  }
              </mat-tab>
          </mat-tab-group>

      </section>
  </mat-card>
</main>