<body class="animated fadeIn" style="width: 100%; background-color: #FFFFFF; margin-left: auto; margin-right: auto;">

  <!-- REGRESAR A LA PANTALLA ANTERIOR -->
  <nav id="navigation" class="btn-navigate-90 mb-8">
    <div style="width: 100%; display: flex; justify-content: space-between;">
      <div class=" prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack()" matRipple>
        <mat-icon style="color: white;">arrow_back</mat-icon>
        <div class="page-name ml-4"> Regresar </div>
      </div>
      <button mat-mini-fab color="warn" aria-label="Ver Carrito" matTooltip="Ver Carrito"
        [matBadge]="quantityCarArtitle" [routerLink]="['/sam/shopping-cart']">
        <mat-icon>shopping_cart</mat-icon>
      </button>
    </div>

  </nav>

  <div style="width: 90%; height: calc(100% - 62px); margin-left: auto; margin-right: auto; overflow: auto; " class="">
    <header class="header-component">
      <div class="seccion-header"></div>
      <div class="seccion-header title">
        <mat-card-title class="mat-card-title centre">Detalles del Artículo</mat-card-title>
      </div>
      <div class="seccion-header"></div>
    </header>
    <main class="content-component">
      <div style="width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;">
        <aside class="content-left">
          <img [src]="'http://192.168.1.4:8000/storage/GEAD/FO/'+artitle.URL_IMAGEN" [alt]="artitle.URL_IMAGEN">
        </aside>
        <section class="content-right">
          <div>
            <div class="mt-20 fz-24" style="display: flex; justify-content: space-between;">
              <b> {{ artitle.MODELO }} </b>
              <div>
                <button mat-icon-button style="color: #3f51b5" *ngIf="artitle.COMPRA_WEB" matTooltip="Disponible para compra web">
                  <mat-icon>public</mat-icon>
                </button>
                <button mat-icon-button style="color: #1faf71" *ngIf="artitle.TIPO === 'Caja'" matTooltip="Compra por caja">
                  <mat-icon>inventory_2</mat-icon>
                </button>
                <button mat-icon-button style="color: #0288d1" *ngIf="artitle.TIPO === 'Pieza'" matTooltip="Compra por pieza">
                  <mat-icon>category</mat-icon>
                </button>
              </div>
            </div>
            <div class="mt-20 fz-12" style="display: flex; justify-content: space-between;">
              <p> {{ artitle.FAMILIA }} - {{ artitle.SUBFAMILIA }}</p>
              <i> {{ artitle.PROVEEDOR }}</i>
            </div>

            <div class="mt-20 fz-12 just-txt"><p> {{ artitle.DESCRIPCION }} </p></div>

            <div class="mt-20 fz-12 just-txt" *ngIf="artitle.CARACTERISTICAS != null">
              <p> Características: {{ artitle.CARACTERISTICAS }} </p>
            </div>
          </div>
          <section style="display: flex; justify-content: flex-end; align-items: flex-end; height: 100%;">
            <button mat-raised-button color="info" class="no-shadow" (click)="getShoppingCar()">
              <mat-icon>shopping_cart</mat-icon>
              Agregar al carrito
            </button>
          </section>
        </section>

      </div>

      <section class="w-100 pb-32">
        <div>
          <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="SELECT">
              <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox (change)="$event ? toggleAllRows() : null"
                  [checked]="selection.hasValue() && isAllSelected()"
                  [indeterminate]="selection.hasValue() && !isAllSelected()" [aria-label]="checkboxLabel()">
                </mat-checkbox>
              </th>
              <td mat-cell *matCellDef="let row">
                <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
                  [checked]="selection.isSelected(row)" [aria-label]="checkboxLabel(row)">
                </mat-checkbox>
              </td>
            </ng-container>

            <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="CARACTERISTICAS">
              <th mat-header-cell *matHeaderCellDef> Características </th>
              <td mat-cell *matCellDef="let element"> {{ resourcesService.resizeText(element.CARACTERISTICAS, 117) }} </td>
            </ng-container>

            <ng-container matColumnDef="CANTIDAD">
              <th mat-header-cell *matHeaderCellDef> Cantidad </th>
              <td mat-cell *matCellDef="let element">
                <div class="div_cantidad">
                  <button mat-icon-button color="accent" (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-icon-button color="accent" (click)="quantityProducts('suma', element)">
                    <mat-icon>add</mat-icon>
                  </button>
                </div>
              </td>
            </ng-container>

            <ng-container matColumnDef="PRECIO">
              <th mat-header-cell *matHeaderCellDef> Precio </th>
              <td mat-cell *matCellDef="let element"> $ {{element.PRECIO}} {{ element.MONEDA }}</td>
            </ng-container>

            <ng-container matColumnDef="ACCIONES">
              <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Acciones </th>
              <td mat-cell *matCellDef="let element" style="text-align: center;">
                <button mat-mini-fab color="primary" class="no-shadow" matTooltip="Ver Detalles"
                  (click)="openDialog('VIEW', element)">
                  <mat-icon>visibility</mat-icon>
                </button>
              </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;">
            </tr>
          </table>
        </div>
      </section>
    </main>
  </div>
</body>
