<main class="main-container animated fadeIn">
  <app-btn-navigate [navigate]="'/sam/GEAD'" [nameButton]="'Gestión de adquisiciones'" />
  <mat-card class="override-card override-elevation-z8">
    <section class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre">Gestión de órdenes de compra</mat-card-title>
        <div class="override-actions">
          <app-search-card
            [dataSource]="dataSource"
            [disabled]="isLoading || isLoadingForm"
            (dataValue)="dataSource = $event"
          />

          <div class="override-buttons">
            <button mat-mini-fab matTooltip="Actualizar datos" class="orange_primary_background white_font override_no_shadow" (click)="getOrders()">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>

      <app-loading-card [isLoading]="isLoading" [isLoadingForm]="isLoadingForm" [txtLoading]="'Cargando las órdenes de compra'" />

      @if (getOrdersEnabled) {
        <div class="override-table">
          <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
            <ng-container matColumnDef="NUMERO_ORDEN">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Número del pedido</th>
              <td mat-cell *matCellDef="let element"> {{ element.NUMERO_ORDEN }} </td>
            </ng-container>
  
            <ng-container matColumnDef="NUMERO_SOLICITUD_COMPRA">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Línea de solicitud</th>
              <td mat-cell *matCellDef="let element"> #{{ element.NUMERO_SOLICITUD_COMPRA }} </td>
            </ng-container>
  
            <ng-container matColumnDef="NOMBRE_COMERCIAL">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Proveedor</th>
              <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_COMERCIAL }} ({{ element.NUMERO_PROVEEDOR }})</td>
            </ng-container>
  
            <ng-container matColumnDef="NOMBRE_DESPACHO">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Despacho</th>
              <td mat-cell *matCellDef="let element"> {{ element.NOMBRE_DESPACHO }} ({{ element.ID_DESPACHO }}) </td>
            </ng-container>
  
            <ng-container matColumnDef="USUARIO_MODIFICA">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuario modificación</th>
              <td mat-cell *matCellDef="let element"> {{ element.USUARIO_MODIFICA }} </td>
            </ng-container>

            <ng-container matColumnDef="FECHA_MODIFICA">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de modificación</th>
              <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICA }} </td>
            </ng-container>
  
            <ng-container matColumnDef="ESTADO">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>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">

                <button mat-mini-fab color="primary transparent-background gray_dark_font" atMenuTriggerFor]="menu" #menuTrigger matTooltip="Desplegar opciones" class="override_no_shadow" [disabled]="isLoadingForm">
                  <mat-icon>more_vert</mat-icon>
                </button>
                <mat-menu #menu="matMenu">
                  @if (detailsOrdersEnabled) {
                    <button mat-menu-item (click)="getInformationOrder(element)">
                      <mat-icon>info</mat-icon> Ver detalle del pedido
                    </button>
                  }
                  @if (configOrderEnabled) {
                    <button mat-menu-item [disabled]="element.ESTADO === 'Anulado'" (click)="openDialog('STATE', element)">
                      <mat-icon>manage_history</mat-icon> Modificar estado
                    </button>
                  }
                  @if (reorderEnabled) {
                    <button mat-menu-item [disabled]="element.ESTADO === 'Anulado'" (click)="alert('REORDER', element)">
                      <mat-icon>assignment_return</mat-icon> Reordenar pedido
                    </button>
                  }
                  @if (getDocumentEnabled) {
                    <button mat-menu-item [disabled]="element.ESTADO === 'Anulado'" [matMenuTriggerFor]="sheet">
                      <mat-icon>description</mat-icon> Generar fichas
                    </button>
                  }
                  @if (getDocumentEnabled) {
                    <button mat-menu-item [disabled]="element.ESTADO === 'Anulado'" (click)="getDocumentOrder(element)">
                      <mat-icon>folder</mat-icon> Abrir documentación
                    </button>
                  }
                  <button mat-menu-item [disabled]="element.ESTADO === 'Anulado'" (click)="openDialog('WARNING', element)">
                    <mat-icon>warning</mat-icon> Reportar problema
                  </button>
                </mat-menu>

                <mat-menu #sheet="matMenu">
                  <button mat-menu-item (click)="alert('GENERATE_ACQUISITION', element)">
                    <mat-icon>summarize</mat-icon> Generar ficha de adquisición
                  </button>
                  <button mat-menu-item (click)="alert('GENERATE_DIVISA', element)">
                    <mat-icon>summarize</mat-icon> Generar ficha de divisa
                  </button>
                  <button mat-menu-item (click)="alert('GENERATE_INVOICE', element)">
                    <mat-icon>summarize</mat-icon> Generar ficha de factura
                  </button>
                </mat-menu>
              </td>
            </ng-container>
  
            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  
            <tr class="mat-row" *matNoDataRow>
              <td class="p-80 centre" colspan="12">
                <object data="assets/img/empty_data.svg" width="150"></object>
                <h2>Sin datos</h2>
              </td>
            </tr>
          </table>
        </div>
      }
    </section>
    <div>
      <mat-divider></mat-divider>
      <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
    </div>
  </mat-card>
</main>
