<main class="main-container animated fadeIn">

  <app-btn-navigate [navigate]="'/sam/GEAD/PROV/GVPA'" nameButton="Gestión de artículos"/>

  <mat-card class="override-card override-elevation-z8">
    <app-loading-card [isLoading]="isLoading" txtLoading="Cargando el formulario de artículos" />
    @if (!isLoading) {
      <section class="override-section" style="overflow: auto;">
        <nav class="override-nav">
          <mat-card-title class="mat-card-title centre">{{ title }}</mat-card-title>
        </nav>
        <div>
          <div class="pl-16 pr-16 mt-20" style="display: flex; justify-content: center;">
            <form [formGroup]="formGroup" class="override_content_flex" style="width: 90%;">
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Código de barras</mat-label>
                  <input matInput formControlName="CODIGO" maxlength="50" />
                  <button mat-icon-button matSuffix><mat-icon>qr_code_scanner</mat-icon></button>
                  @if (formGroup.controls['CODIGO'].hasError('required')) {
                    <mat-error title="El campo Código de barras es requerido">El campo <b>Código de barras</b> es requerido</mat-error>
                  }
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Nombre del artículo</mat-label>
                  <input matInput formControlName="ARTICULO" maxlength="100" />
                  @if (formGroup.controls['ARTICULO'].hasError('required')) {
                    <mat-error title="El campo Nombre del artículo es requerido">El campo <b>Nombre del artículo</b> es requerido</mat-error>
                  }
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Familia</mat-label>
                  <mat-select formControlName="FAMILIA">
                    @for (family of arrFamilies; track family) {
                      <mat-option [value]="family"> {{ family.FAMILIA }} </mat-option>
                    }
                  </mat-select>
                  @if (formGroup.controls['FAMILIA'].hasError('required')) {
                    <mat-error title="El campo Familia es requerido">El campo <b>Familia</b> es requerido</mat-error>
                  }
                </mat-form-field>
              </div>
              <div class="col-flex-3">
                <mat-form-field appearance="outline">
                  <mat-label>Subfamilia</mat-label>
                  <mat-select formControlName="SUBFAMILIA">
                    @for (subfamily of arrSubfamilies; track subfamily) {
                      <mat-option [value]="subfamily"> {{ subfamily.SUBFAMILIA }} </mat-option>
                    }
                  </mat-select>
                  @if (formGroup.controls['SUBFAMILIA'].hasError('required')) {
                    <mat-error title="El campo Subfamilia es requerido">El campo <b>Subfamilia</b> es requerido</mat-error>
                  }
                </mat-form-field>
              </div>
            </form>
          </div>
  
          <mat-divider></mat-divider>
  
          <div class="align-end pr-16 mt-20 mb-8">
            <button
              mat-raised-button
              [disabled]="isLoading"
              class="blue_dark_background white_font override_no_shadow ml-5 animated fadeIn fast"
              (click)="openDialogDescriptionArticle('R')">
              <mat-icon>add</mat-icon> Nuevo
            </button>
          </div>
          <div style="overflow: auto; height: calc(100vh - 476px); ">
            <table mat-table [dataSource]="dataSource" matSort [style.display]="isLoading ? 'none' : 'revert'">
              <ng-container matColumnDef="IMAGEN">
                <th mat-header-cell *matHeaderCellDef>Imagen</th>
                <td mat-cell *matCellDef="let element">
                  <img [src]="setImage(element)" [alt]="setAlt(element)" class="url-img" />
                </td>
              </ng-container>
              <ng-container matColumnDef="PROVEEDOR">
                <th mat-header-cell *matHeaderCellDef>Proveedor</th>
                <td mat-cell *matCellDef="let element">{{ element.PROVEEDOR }} ({{ element.NUMERO_PROVEEDOR }})</td>
              </ng-container>
              <ng-container matColumnDef="DESCRIPCION">
                <th mat-header-cell *matHeaderCellDef>Descripción</th>
                <td mat-cell *matCellDef="let element"> {{ element.DESCRIPCION }} </td>
              </ng-container>
              <ng-container matColumnDef="CARACTERISTICAS">
                <th mat-header-cell *matHeaderCellDef>Características</th>
                <td mat-cell *matCellDef="let element"> {{ element.CARACTERISTICAS === null || element.CARACTERISTICAS === '' ? 'Sin características' : element.CARACTERISTICAS }} </td>
              </ng-container>
              <ng-container matColumnDef="CANTIDAD_DETALLES">
                <th mat-header-cell *matHeaderCellDef>Cantidad de detalles</th>
                <td mat-cell *matCellDef="let element"> {{ countDetails(element.DETALLES) }} </td>
              </ng-container>
              <ng-container matColumnDef="ESTADO">
                <th mat-header-cell *matHeaderCellDef>Estado</th>
                <td mat-cell *matCellDef="let element">
                  <button mat-flat-button class="white_font" [class]="resourcesService.setChipList(element.ESTADO)">
                    {{ element.ESTADO }}
                  </button>
                </td>
              </ng-container>
              <ng-container matColumnDef="ACCIONES">
                <th mat-header-cell *matHeaderCellDef>Acciones</th>
                <td mat-cell *matCellDef="let element; let index = index;" class="align-center">
  
                  <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger matTooltip="Desplegar opciones" class="override_no_shadow">
                    <mat-icon>more_vert</mat-icon>
                  </button>
                  <mat-menu #menu="matMenu">
                    <button mat-menu-item (click)="openDialogDetails(element, index)"  [disabled]="element.ESTADO === 'Eliminado' || isLoading">
                      <mat-icon>post_add</mat-icon> Agregar detalles
                    </button>
                    <button mat-menu-item (click)="openDialogDescriptionArticle('M', index)"  [disabled]="element.ESTADO === 'Eliminado' || isLoading"> 
                      <mat-icon>edit</mat-icon> Editar
                    </button>
                    @if (element.ESTADO !== 'Eliminado') {
                      <button mat-menu-item (click)="alertUpdateStatus('E', index)">
                        <mat-icon>delete</mat-icon> Eliminar
                      </button>
                    } @else {
                      <button mat-menu-item (click)="alertUpdateStatus('A', index)">
                        <mat-icon>autorenew</mat-icon> Restaurar
                      </button>
                    }
                  </mat-menu>
                </td>
              </ng-container>
              <tr mat-header-row *matHeaderRowDef="displayedColumnsInformation"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumnsInformation"></tr>
              <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell p-20 align-center" colspan="12">
                  <object data="assets/img/empty_data.svg" width="150"></object>
                  <h2>Sin datos</h2>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </section>
      <div class="align-end" style="background-color: #FFFFFF;">
        <mat-divider></mat-divider>
        <button
          mat-raised-button
          color="primary"
          [disabled]="isLoading || !isValidData()"
          (click)="save()"
          class="override_no_shadow mt-16 mr-16 mb-16" >
          <mat-icon>save</mat-icon>
          Guardar
        </button>
      </div>
    }
  </mat-card>
</main>
