<body class="main-container-order" >
  <div class="component-main-shopping animated fadeIn" *ngIf="!isLoading">
    <header class="header-component">
      <div class="seccion-header">
        <app-btn-navigate [navigate]="'goback'" [widthPosition]="'0'" />
      </div>
      <div class="seccion-header title">
        <h2> Detalles de la Orden de Compra - {{ this.numberOrder }} </h2>
      </div>
      <div class="seccion-header" style="display: flex; flex-direction: row-reverse;">
        <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>
    </header>
    <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.DESP_IDDE === undefined ? '' : '#' + orderDetails.DESP_IDDE" 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.DESP_NODE === undefined ? '' : orderDetails.DESP_NODE" 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.DEAR_IMAG[0]" (error)="element.DEAR_IMAG[0] = 'assets/img/empty_data.svg'" alt="" class="img-artitle">
                </td>
              </ng-container>

              <ng-container matColumnDef="ARTI_NOMB">
                <th mat-header-cell *matHeaderCellDef> Artículo </th>
                <td mat-cell *matCellDef="let element"> {{element.ARTI_NOMB}} </td>
              </ng-container>

              <ng-container matColumnDef="INAR_MODE">
                <th mat-header-cell *matHeaderCellDef> Nombre del Modelo </th>
                <td mat-cell *matCellDef="let element"> {{element.INAR_MODE}} </td>
              </ng-container>

              <ng-container matColumnDef="INAR_CODI">
                <th mat-header-cell *matHeaderCellDef> Código del Modelo </th>
                <td mat-cell *matCellDef="let element"> {{element.INAR_CODI}} </td>
              </ng-container>

              <ng-container matColumnDef="ARSE_PRTO">
                <th mat-header-cell *matHeaderCellDef> Precio Unitario </th>
                <td mat-cell *matCellDef="let element"> 
                  $ {{ element.INAR_PREC }} {{ element.INAR_COMO }}
                </td>
              </ng-container>

              <ng-container matColumnDef="ARSE_CANT">
                <th mat-header-cell *matHeaderCellDef> Cantidad </th>
                <td mat-cell *matCellDef="let element"> {{element.CANTIDAD}} </td>
              </ng-container>

              <ng-container matColumnDef="INAR_COMO">
                <th mat-header-cell *matHeaderCellDef> Precio Total </th>
                <td mat-cell *matCellDef="let element"> 
                  $ {{element.CANTIDAD * element.INAR_PREC}} {{ element.INAR_COMO }} 
                </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="HIOR_ESOR">
              <th mat-header-cell *matHeaderCellDef> Estado </th>
              <td mat-cell *matCellDef="let element">

                <mat-chip class="pink_primary_background" *ngIf="element.HIOR_ESOR === 'Creado'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="pink_dark_background" *ngIf="element.HIOR_ESOR === 'Editado'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="amber_dark_background" *ngIf="element.HIOR_ESOR === 'En curso'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="cyan_dark_background" *ngIf="element.HIOR_ESOR === 'Recibido Parcial'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="cyan_dark_background" *ngIf="element.HIOR_ESOR === 'Recibido'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="teal_dark_background" *ngIf="element.HIOR_ESOR === 'Facturado'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
                <mat-chip class="red_dark_background" *ngIf="element.HIOR_ESOR === 'Anulado'">
                  {{ element.HIOR_ESOR }}
                </mat-chip>
              </td>
            </ng-container>

            <ng-container matColumnDef="HIOR_FERE">
              <th mat-header-cell *matHeaderCellDef> Fecha de Registro </th>
              <td mat-cell *matCellDef="let element"> {{ resourcesService.formatDate(element.HIOR_FERE, element.HIOR_FEMO) }} </td>
            </ng-container>
            
            <ng-container matColumnDef="HIOR_POEN">
              <th mat-header-cell *matHeaderCellDef> Porcentaje </th>
              <td mat-cell *matCellDef="let element"> {{ element.HIOR_POEN }}% </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>

  <app-loading-card
      [isLoading]="isLoading"
      [txtLoading]="'Cargando la información de la orden de compra'"
    />
</body>
