<body class="main-container-order" >

  @if (!isLoading) {
    <div class="component-main-shopping animated fadeIn">
      <div class="header-component">
        <app-btn-navigate navigate="goback"/>
        <div class="title">
          <p> Detalles de la orden de compra - {{ this.numberOrder }} </p>
        </div>
        <div style="display: flex; flex-direction: row-reverse; align-items: center;">
          <app-btn-resize
            class="ml-8"
            (click)="openDialog('VIEW_PROVIDER')"
            [disabled]="isLoading"
            [backgroundColor]="'teal_dark_background'"
            [textColor]="'white_font'"
            [nameButton]="'Ver información del proveedor'"
            [icon]="'person'"
          />
        </div>
      </div>
      <main class="content-component">
        <main class="content-subcomponent-2 mat-elevation-z2">
          <aside class="content-left-subcomponent">
            <h2 class="subtitle">Información del despacho</h2>
            <div class="override_content_flex">
              <div class="col-flex-1">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label> No. Despacho </mat-label>
                  <input matInput [value]="orderDetails.ID_DESPACHO === undefined ? '' : '#' + orderDetails.ID_DESPACHO" readonly/>
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label> Despacho </mat-label>
                  <input matInput [value]="orderDetails.NOMBRE_DESPACHO === undefined ? '' : orderDetails.NOMBRE_DESPACHO" readonly />
                </mat-form-field>
              </div>
              <div class="col-flex-7">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label> Dirección </mat-label>
                  <input matInput [value]="setDirection()" readonly />
                </mat-form-field>
              </div>
              <div class="col-flex-2">
                <mat-form-field appearance="outline" class="w-100">
                  <mat-label> {{setLabelOrder()}} </mat-label>
                  <input matInput [value]="setOrderValue()" readonly />
                </mat-form-field>
              </div>
            </div>
          </aside>
        </main>
        <div class="content-state-artitle">
          <aside class="content-left mat-elevation-z2">
            <div class="content-subcomponent-1  mat-elevation-z2">
              <h2 class="subtitle">Lista de artículos</h2>
              <table mat-table [dataSource]="dataSourceArtitles" style="overflow: auto; width: 920px;">
                <ng-container matColumnDef="IMAGEN">
                  <th mat-header-cell *matHeaderCellDef> Imagen </th>
                  <td mat-cell *matCellDef="let element" style="display: flex; align-items: center; max-width: 180px; overflow: auto;">
                    <img [src]="element.IMAGEN[0]" (error)="element.IMAGEN[0] = 'assets/img/empty_data.svg'" alt="" class="img-artitle">
                  </td>
                </ng-container>
  
                <ng-container matColumnDef="NOMBRE_FAMILIA">
                  <th mat-header-cell *matHeaderCellDef> Artículo </th>
                  <td mat-cell *matCellDef="let element"> {{element.NOMBRE_FAMILIA}} </td>
                </ng-container>
  
                <ng-container matColumnDef="MODELO_ARTICULO">
                  <th mat-header-cell *matHeaderCellDef> Nombre del modelo </th>
                  <td mat-cell *matCellDef="let element"> {{element.MODELO_ARTICULO}} </td>
                </ng-container>
  
                <ng-container matColumnDef="CODIGO_ARTICULO">
                  <th mat-header-cell *matHeaderCellDef> Código del modelo </th>
                  <td mat-cell *matCellDef="let element"> {{element.CODIGO_ARTICULO}} </td>
                </ng-container>
  
                <ng-container matColumnDef="PRECIO">
                  <th mat-header-cell *matHeaderCellDef> Precio unitario </th>
                  <td mat-cell *matCellDef="let element"> 
                    $ {{ element.PRECIO }} {{ element.CODIGO_MONEDA }}
                  </td>
                </ng-container>
  
                <ng-container matColumnDef="CANTIDAD">
                  <th mat-header-cell *matHeaderCellDef> Cantidad </th>
                  <td mat-cell *matCellDef="let element"> {{ element.CANTIDAD }} </td>
                </ng-container>
  
                <ng-container matColumnDef="PRECIO_TOTAL">
                  <th mat-header-cell *matHeaderCellDef> Precio total </th>
                  <td mat-cell *matCellDef="let element"> 
                    $ {{element.CANTIDAD * element.PRECIO}} {{ element.CODIGO_MONEDA }} 
                  </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="white_font override_no_shadow" matTooltip="Ver detalles" (click)="openDialog('VIEW_ARTITLE', element)">
                      <mat-icon>info</mat-icon>
                    </button>
                  </td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumnsArtitle"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumnsArtitle;"></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>
          </aside>
          <section class="content-right mat-elevation-z2">
            <h2 class="subtitle">Estados del pedido</h2>
            <table mat-table [dataSource]="dataSourceState">
              <ng-container matColumnDef="ESTADO_ORDEN">
                <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_ORDEN)">
                    {{ element.ESTADO_ORDEN }}
                  </button>
                </td>
              </ng-container>
  
              <ng-container matColumnDef="FECHA_MODIFICA">
                <th mat-header-cell *matHeaderCellDef> Fecha de registro </th>
                <td mat-cell *matCellDef="let element"> {{ element.FECHA_MODIFICA }} </td>
              </ng-container>
              
              <ng-container matColumnDef="PORCENTAJE_ENTREGA">
                <th mat-header-cell *matHeaderCellDef> Porcentaje </th>
                <td mat-cell *matCellDef="let element"> {{ element.PORCENTAJE_ENTREGA }}% </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="override_no_shadow" matTooltip="Ver Información" (click)="openDialog('VIEW_STATE', element)">
                    <mat-icon>info</mat-icon>
                  </button>
                </td>
              </ng-container>
  
              <tr mat-header-row *matHeaderRowDef="displayedColumnsState"></tr>
              <tr mat-row *matRowDef="let row; columns: displayedColumnsState;"></tr>
  
              <tr class="mat-row" *matNoDataRow>
                <td class="p-80 centre" colspan="12">
                  <object data="assets/img/empty_data.svg" width="150"></object>
                  <h2>No existen estados registrados</h2>
                </td>
              </tr>
            </table>
          </section>
        </div>
      </main>
    </div>
  } @else {
    <app-loading-card [isLoading]="isLoading" [txtLoading]="'Cargando la información de la orden de compra'" />
  }

</body>