<body class="component-main-shopping animated fadeIn pl-12 pr-22">
  <header class="header-component">
    <div class="seccion-header">
      <!-- REGRESAR A LA PANTALLA ANTERIOR -->
      <nav id="navigation">
        <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8"
          [routerLink]="['/sam/purchase-requisition-lines']" matRipple>
          <mat-icon style="color: white;">arrow_back</mat-icon>
          <div class="page-name ml-4">Líneas de Solicitud de Compra</div>
        </div>
      </nav>
    </div>
    <div class="seccion-header title">
      <mat-card-title class="mat-card-title centre" style="margin: 0 !important;">
        Selector de Compras
      </mat-card-title>
    </div>
    <div class="seccion-header shopping">
      <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>
  </header>
  <main class="content-component">
    <aside class="content-left">

      <!-- BUSCADOR DE ARTÍCULOS -->
      <mat-form-field class="txt-search"  appearance="outline">
        <mat-label> Buscador </mat-label>
        <input matInput placeholder="Ingrese el nombre del artículo" (keyup)="applyFilter($event)">
      </mat-form-field>

      <div class="categories-title">
        <span>Categorías</span>
      </div>

      <!-- ARBOL DE CATEGORÍAS -->
      <mat-tree [dataSource]="arrFamiliesAndSubfamilies" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
          <button mat-icon-button disabled></button>
          <span (click)="getSubfamilies(node)" class="title-category"> {{ node.name }} </span>
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}
            </mat-icon>
          </button>
          <span (click)="getFamilies(node)" class="title-category"> {{ node.name }} </span>
        </mat-tree-node>
      </mat-tree>

      <div class="load-family" *ngIf="isLoadingCategory || this.arrArtitles.length === 0">
        <div class="load-artitle" *ngIf="isLoadingCategory">
          <mat-spinner ></mat-spinner>
          <span>Cargando Categorías</span>
        </div>
        <div class="load-artitle" *ngIf="this.arrFamiliesAndSubfamilies.data.length === 0 && !isLoadingCategory">
          <object data="assets/img/empty_data.svg" width="200"></object>
          <span>No hay categorías</span>
        </div>
      </div>
    </aside>

    <section class="content-right">
      <div class="load-and-empty">
        <div class="load-artitle" *ngIf="this.arrArtitles.length === 0 && !isLoadingArtitle">
          <object data="assets/img/empty_data.svg" width="300"></object>
          <span>No hay artículos</span>
        </div>
        <div class="load-artitle" *ngIf="isLoadingArtitle">
          <mat-spinner class="center-item-cards"></mat-spinner>
          <span>Cargando Artículos</span>
        </div>
      </div>

      <mat-card class="card-personality" [matBadge]="null" *ngFor="let artitle of arrArtitles" (click)="openArtitle(artitle)">
        <mat-card-header>
          <mat-card-title > {{ artitle.MODELO }}</mat-card-title>
          <mat-card-subtitle> {{ artitle.FAMILIA }} - {{ artitle.SUBFAMILIA }} </mat-card-subtitle>
        </mat-card-header>
        <mat-card-content class="card-image">
          <img mat-card-image [src]="'http://192.168.1.4:8000/storage/GEAD/FO/'+artitle.URL_IMAGEN" [alt]="artitle.URL_IMAGEN">
        </mat-card-content>

        <mat-card-actions class="card-accions">
          <i> {{ artitle.PROVEEDOR }}</i>
        </mat-card-actions>
      </mat-card>
    </section>
  </main>
</body>
