<body class="animated fadeIn" style="width: 100%;">
  <div align="center" style="height: calc(100%); overflow: auto;">

    <nav style="width: 70%; display: flex; align-items: center;">
      <div style="width: calc(100% / 3); text-align: start;">
        <app-btn-navigate [navigate]="'goback'" [nameButton]="'Menú de Adquisiciones'" [widthPosition]="'0'"/>
      </div>
      <div style="width: calc(100% / 3);">
        <mat-card-title class="mat-card-title title-card centre"> Detalles del Artículo </mat-card-title>
      </div>
      <div style="width: calc(100% / 3); text-align: end;">
        <button mat-mini-fab color="warn" aria-label="Ver Carrito" matTooltip="Ver Carrito"
          [matBadge]="quantityCarArtitle" (click)="redirectShopping()" *ngIf="!isError && !isLoading && cartShoppingEnabled">
          <mat-icon>shopping_cart</mat-icon>
        </button>
      </div>
    </nav>

    <div class="mat-elevation-z8 mb-32" style="width: 70%; background-color: #FFFFFF; padding: 50px 0;" *ngIf="isLoading" align="center">
      <mat-spinner></mat-spinner>
      <h1>Cargando</h1>
      <span>Espere un momento, por favor</span>
    </div>

    <div class="mat-elevation-z8 mb-32" style="width: 70%; background-color: #FFFFFF;" *ngIf="!isLoading && !isError">
      <main class="content-component">
        <div style="width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;">
          <aside class="content-left">
            <app-slider [arrImages]="arrSlider" ></app-slider>
          </aside>
          <section class="content-right">
            <div>
              <div class="fz-24" style="display: flex; justify-content: space-between;">
                <b> {{ artitle.MODELO }} </b>
                <div>
                  <button mat-icon-button class="light_blue_primary_font" *ngIf="artitle.COMPRA_WEB" matTooltip="Disponible para Compra Web">
                    <mat-icon>public</mat-icon>
                  </button>
                  <button mat-icon-button class="red_dark_font" *ngIf="!artitle.COMPRA_WEB" matTooltip="No disponible para Compra Web">
                    <mat-icon>vpn_lock</mat-icon>
                  </button>
                  <button mat-icon-button class="green_dark_font" *ngIf="artitle.UNIDAD === 'Caja'" matTooltip="Compra por Caja">
                    <mat-icon>inventory_2</mat-icon>
                  </button>
                  <button mat-icon-button class="orange_dark_font" *ngIf="artitle.UNIDAD === 'Unidad'" matTooltip="Compra por Unidad">
                    <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">
                <b> Descripción:</b>
                <p> {{ artitle.DESCRIPCION }} </p>
              </div>

              <div class="mt-20 fz-12 just-txt" *ngIf="artitle.CARACTERISTICAS != null">
                <b> Características:</b>
                <p>{{ artitle.CARACTERISTICAS }}</p>
              </div>
            </div>
          </section>
        </div>

        <mat-divider></mat-divider>

        <section class="mt-14 w-100">
          <div style="display: flex; justify-content: space-between; padding: 0 20px !important;">
            <h2>Detalles del Artículo</h2>
            <button mat-raised-button class="cyan_dark_background white_font override_no_shadow" (click)="getShoppingCar()" *ngIf="createGroupEnable">
              <mat-icon>shopping_cart</mat-icon>
              Agregar al carrito
            </button>
          </div>
          <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="PRECIO">
                <th mat-header-cell *matHeaderCellDef> Precio </th>
                <td mat-cell *matCellDef="let element">
                  <div style="display: flex; align-items: center;">
                    <div>
                      {{ resourcesService.moneyFormat(element.PRECIO * (element.CANTIDAD === 0 ? 1 : element.CANTIDAD) ) }} {{ element.MONEDA }}
                    </div>
                    <button mat-icon-button color="accent" *ngIf="createGroupEnable" (click)="quantityProducts('resta', element)" [disabled]="element.CANTIDAD == 0 ">
                      <mat-icon>remove</mat-icon>
                    </button>
                    <input type="number" class="input_cantidad centre" *ngIf="createGroupEnable" (keyup)="validateQuantity(element.cantidad, element)" [(ngModel)]="element.CANTIDAD" [value]="element.CANTIDAD">
                    <button mat-icon-button color="accent" *ngIf="createGroupEnable" (click)="quantityProducts('suma', element)">
                      <mat-icon>add</mat-icon>
                    </button>
                  </div>
                </td>
              </ng-container>

              <ng-container matColumnDef="ACCIONES">
                <th mat-header-cell *matHeaderCellDef class="align-center"> Acciones </th>
                <td mat-cell *matCellDef="let element" class="align-center">
                  <button mat-mini-fab color="primary" class="no-shadow" matTooltip="Ver 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>
            <mat-divider></mat-divider>
            <mat-paginator [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
          </div>
        </section>
      </main>
    </div>

    <div class="mat-elevation-z8 mb-32" style="width: 70%; background-color: #FFFFFF; padding: 50px 0;" *ngIf="!isLoading && isError" align="center">
      <object data="assets/img/get_error.svg" width="400" class="mb-32"></object>
      <h1>Ocurrió un error</h1>
      <span>Al obtener el identificador del artículo</span> <br>
      <span>Intentelo de nuevo y si el error persiste contacte al departamento de sistemas</span>
    </div>
  </div>
</body>
