<body class="main-container animated fadeIn" (window:resize)="onResize()">

  <!-- REGRESAR A LA PANTALLA ANTERIOR -->
  <nav id="navigation" class="btn-navigate mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple (click)="goBack()">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </nav>

  <section [class]="card_size">
    <div>
      <!-- TÍTULO -->
      <mat-card-title class="mat-card-title centre">Carrito de Compras</mat-card-title>

      <nav style="height: 56px; display: flex; justify-content: space-between; padding: 0 20px;">
        <!-- BOTÓN PARA RECARGAR LA TABLA -->
        <div style="display: flex; height: 56px; align-items: center;">
          <button mat-raised-button color="primary" [disabled]="isLoadingForm" class="no-shadow" *ngIf="!btnSmall" (click)="openModal()">
            <mat-icon>request_quote</mat-icon> Registrar Solicitud
          </button>
        </div>
        <mat-form-field appearance="outline" style="width: 300px;">
          <mat-label>Buscador</mat-label>
          <input matInput (keyup)="applyFilter($event)" placeholder="Ingrese la palabra a buscar">
          <mat-icon matSuffix>search</mat-icon>
        </mat-form-field>
      </nav>

      <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
        <mat-spinner align="center"></mat-spinner>
        <h3>Cargando datos ...</h3>
      </div>

      <!-- ALERTA - CARGANDO FORMULARIOS -->
      <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

      <!-- TABLA -->
      <table mat-table [dataSource]="dataSource" matSort class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">

        <ng-container matColumnDef="IMAGEN">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Imagen</th>
          <td mat-cell *matCellDef="let element"> <img [src]="'http://192.168.1.4:8000/storage/GEAD/FO/'+element.URL_IMAGEN" width="70px"/>  </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <ng-container matColumnDef="ARTICULO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Articulo</th>
          <td mat-cell *matCellDef="let element"> {{ element.ARTICULO }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <ng-container matColumnDef="PROVEEDOR">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Proveedor</th>
          <td mat-cell *matCellDef="let element"> {{ element.NUMERO_PROVEEDOR }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"></td>
        </ng-container>

        <ng-container matColumnDef="MODELO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Modelo</th>
          <td mat-cell *matCellDef="let element"> {{ element.MODELO }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <ng-container matColumnDef="CODIGO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Código</th>
          <td mat-cell *matCellDef="let element"> {{ element.CODIGO }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <ng-container matColumnDef="CANTIDAD">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Cantidad</th>
          <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <ng-container matColumnDef="PRECIO">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Precio Unitario</th>
          <td mat-cell *matCellDef="let element"> $ {{ element.PRECIO }} {{ element.MONEDA }}</td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> <b>Precio Total Final</b> </td>
        </ng-container>

        <ng-container matColumnDef="PRECIOTOTAL">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Precio Total</th>
          <td mat-cell *matCellDef="let element"> $ {{ element.CANTIDAD * element.PRECIO }} </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> <b> $ {{ getTotalCost() }}</b> </td>
        </ng-container>

        <ng-container matColumnDef="ACCIONES">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
          <td mat-cell *matCellDef="let element">
            <button mat-mini-fab color="primary" class="override-no-shadow ml-4" matTooltip="Ver información">
              <mat-icon>info</mat-icon>
            </button>
            <button mat-mini-fab color="warn" class="override-no-shadow ml-4" matTooltip="" (click)="alert( 'DELETE', element )">
              <mat-icon>delete</mat-icon>
            </button>
          </td>
          <td mat-footer-cell *matFooterCellDef style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0.12);"> </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>

        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell centre" style="padding: 99px 80px;" colspan="12">
            <object data="assets/img/empty_cart.svg" width="350"></object>
            <h2>No hay productos en el carrito</h2>
          </td>
        </tr>
      </table>
    </div>
  </section>
</body>
