<body class="container_information ">
  <div class="content_header">
    <app-btn-navigate navigate="goback" nameButton="Regresar" />
    <div>
      <button mat-mini-fab class="raised-button-background  white_font mr-16" matTooltip="Carrito de compras" [matBadge]="quantityShoppingCart" (click)="redirectShopping()">
        <mat-icon>shopping_cart</mat-icon>
      </button>
    </div>
  </div>

  <div class="content_card override-elevation-z8">
    @if (!isLoading) {
      <div class="info_families">
        {{ article.FAMILIA }} <mat-icon>chevron_right</mat-icon> {{ article.SUBFAMILIA }}
      </div>
  
      <div class="content_info">
        <div class="container_image">
          <div class="carrusel_image">
            @for (image of article.URL_IMAGEN; let index = $index; track image) {
              <div class="item_menu" (click)="currentImg = index;">
                <img [src]="image" [alt]="image">
              </div>
            }
          </div>
          <div class="image_show">
            <div class="current_image">
              <img [src]="article.URL_IMAGEN[currentImg]" alt="">
            </div>
          </div>
        </div>
        <div class="w-50">
          <div class="title_article">{{ article.MODELO }}</div>
          <div class="info_article">
            <div>{{ article.PROVEEDOR }} ({{ article.ID_PROVEEDOR }})</div>
            <div>
              @if (article.COMPRA_WEB) {
                <button mat-icon-button class="light_blue_primary_font" matTooltip="Disponible para Compra Web">
                  <mat-icon>public</mat-icon>
                </button>
              }
              @if (article.UNIDAD === 'Caja') {
                <button mat-icon-button class="green_dark_font" matTooltip="Compra por Caja">
                  <mat-icon>inventory_2</mat-icon>
                </button>
              }
              @if (article.UNIDAD === 'Unidad') {
                <button mat-icon-button class="orange_dark_font" matTooltip="Compra por Unidad">
                  <mat-icon>category</mat-icon>
                </button>
              }
            </div>
          </div>
    
          <div class="mb-8">
            <p> {{ article.DESCRIPCION }} </p>
          </div>
          
          @if (article.CARACTERISTICAS !== null) {
            <div>
              <div class="font_weight_500">Características del artículo</div>
              <div> {{ article.CARACTERISTICAS }} </div>
            </div>
          }
    
          <div style="height: calc(100% - 226px);">
            <table mat-table [dataSource]="dataSource" class="mt-16">
    
              <ng-container matColumnDef="MODELO">
                <th mat-header-cell *matHeaderCellDef> Modelo </th>
                <td mat-cell *matCellDef="let element"> {{element.MODELO}} </td>
              </ng-container>
              <ng-container matColumnDef="CODIGO">
                <th mat-header-cell *matHeaderCellDef> Código </th>
                <td mat-cell *matCellDef="let element"> {{element.CODIGO}} </td>
              </ng-container>
              <ng-container matColumnDef="PRECIO">
                <th mat-header-cell *matHeaderCellDef> Precio </th>
                <td mat-cell *matCellDef="let element">{{ resourcesService.moneyFormat(element.PRECIO) }}</td>
              </ng-container>
              <ng-container matColumnDef="CANTIDAD">
                <th mat-header-cell *matHeaderCellDef> Cantidad </th>
                <td mat-cell *matCellDef="let element">
                  <div class="content-input">
                    @if (createGroupEnable) {
                      <button 
                        mat-mini-fab
                        class="override_no_shadow"
                        color="primary"
                        (click)="quantityProducts('resta', element)" 
                        [disabled]="element.CANTIDAD === 0 ">
                        <mat-icon>remove</mat-icon>
                      </button>
                      <input 
                        type="number" 
                        class="input_cantidad centre" 
                        (keyup)="validateQuantity(element.CANTIDAD, element)" 
                        [(ngModel)]="element.CANTIDAD" [value]="element.CANTIDAD">
                      <button 
                        mat-mini-fab
                        class="override_no_shadow"
                        color="primary" 
                        (click)="quantityProducts('suma', element)">
                        <mat-icon>add</mat-icon>
                      </button>
                    }
                  </div>
                </td>
              </ng-container>
              <ng-container matColumnDef="ACCIONES">
                <th mat-header-cell *matHeaderCellDef class="td_actions_2"> Acciones </th>
                <td mat-cell *matCellDef="let element" class="td_actions_2">
  
                  <button 
                    mat-mini-fab 
                    [disabled]="element.CANTIDAD <= 0" 
                    class="light_blue_dark_background white_font no_shadow mr-4" 
                    matTooltip="Agregar al carrito" 
                    (click)="addShoppingCart(element)">
                    <mat-icon>add_shopping_cart</mat-icon>
                  </button>
  
                  <button 
                    mat-mini-fab 
                    class="pink_primary_background white_font no_shadow" 
                    matTooltip="Detalles" 
                    (click)="openDialog('VIEW', element)">
                    <mat-icon>info</mat-icon>
                  </button>
                  
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumns;">
              </tr>
            </table>
          </div>
        </div>
      </div>
    }
    <app-loading-card [isLoading]="isLoading" txtLoading="Cargando la información del artículo." />
  </div>
  
</body>