<body class="main-container-order" (window:resize)="onResize()" *ngIf="!isLoading">
  <div class="component-main-shopping animated fadeIn">
    <header class="header-component">
      <div class="seccion-header">
        <nav id="navigation" *ngIf="!isScreenSmall">
          <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" [routerLink]="['/sam/orders']" matRipple>
            <mat-icon style="color: white;">arrow_back</mat-icon>
            <div class="page-name ml-4">Gestión de Órdenes de Compra</div>
          </div>
        </nav>
        <button mat-mini-fab class="indigo_primary_background white_font" [disabled]="isLoading" *ngIf="isScreenSmall"
          matTooltip="Gestión de Órdenes de Compra" matTooltipPosition="right" [routerLink]="['/sam/orders']">
          <mat-icon>arrow_back</mat-icon>
        </button>
      </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;">
        <nav id="navigation" *ngIf="!isScreenSmall">
          <div class="prev-page prevent-select teal_dark_background mat-elevation-z8" (click)="openDialog('VIEW_PROVIDER')" matRipple>
            <mat-icon style="color: white;">person</mat-icon>
            <div class="page-name ml-4">Información del Proveedor</div>
          </div>
        </nav>
        <button mat-mini-fab class="teal_dark_background white_font" [disabled]="isLoading" *ngIf="isScreenSmall"
          matTooltip="Ver Información del Proveedor" matTooltipPosition="left" (click)="openDialog('VIEW_PROVIDER')">
          <mat-icon>person</mat-icon>
        </button>
      </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>
          <mat-grid-list cols="24" rowHeight="82px">
            <mat-grid-tile colspan="3">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label> Número del Despacho </mat-label>
                <input matInput [value]="orderDetails.DESP_NUDE === undefined ? '' : orderDetails.DESP_NUDE" readonly/>
              </mat-form-field>
            </mat-grid-tile>
            <mat-grid-tile colspan="5">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label> Despacho </mat-label>
                <input matInput [value]="orderDetails.DESP_NOMB === undefined ? '' : orderDetails.DESP_NOMB" readonly />
              </mat-form-field>
            </mat-grid-tile>
            <mat-grid-tile colspan="16">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label> Dirección </mat-label>
                <input matInput [value]="setDirection()" readonly />
              </mat-form-field>
            </mat-grid-tile>
          </mat-grid-list>
        </aside>
        <section class="content-right-subcomponent">
          <h2 class="subtitle">Información del Método de Pago</h2>
          <mat-grid-list cols="12" rowHeight="82px">
            <mat-grid-tile colspan="2">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label> ID </mat-label>
                <input matInput [value]="orderDetails.LINE_IDME === undefined ? '' : orderDetails.LINE_IDME" readonly />
              </mat-form-field>
            </mat-grid-tile>
            <mat-grid-tile colspan="10">
              <mat-form-field appearance="outline" class="w-100">
                <mat-label> Número del Método </mat-label>
                <input matInput [value]="orderDetails.MEPA_NOMB === undefined ? '' : orderDetails.MEPA_NOMB" readonly />
              </mat-form-field>
            </mat-grid-tile>
          </mat-grid-list>
        </section>
      </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;">
                  <img [src]="'http://192.168.1.4:8000/storage/GEAD/FO/'+element.DEAR_IMAG" 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.ARSE_PRTO }} {{ element.INAR_MONE }}</td>
              </ng-container>

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

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

              <ng-container matColumnDef="ACCIONES">
                <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Acciones </th>
                <td mat-cell *matCellDef="let element" style="text-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="250"></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="ACCIONES">
              <th mat-header-cell *matHeaderCellDef style="text-align: center;"> Fecha de Registro </th>
              <td mat-cell *matCellDef="let element" style="text-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="250"></object>
                <h2>No existen estados registrados</h2>
              </td>
            </tr>
          </table>
        </section>
      </div>

    </main>
  </div>
</body>
