<body class="main-container-order" >
    <div class="component-main-shopping animated fadeIn">
        <header class="header-component">
            <div class="seccion-header">
                <nav id="navigation">
                    <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>
            </div>
            <div class="seccion-header title">
                <span> Detalles del Pedido </span>
            </div>
            <div class="seccion-header"></div>
        </header>
        <main class="content-component">
            <aside class="content-left">
                <div class="content-subcomponent-1 mat-elevation-z2">
                    <div class="subtitle">Artículos</div>
                    <table mat-table [dataSource]="dataSourceArtitle">
                        <ng-container matColumnDef="ITEM1">
                            <th mat-header-cell *matHeaderCellDef> Imagen </th>
                            <td mat-cell *matCellDef="let element" style="display: flex; align-items: center;">
                                <img [src]="element.imagen" alt="" class="img-artitle">
                            </td>
                        </ng-container>

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

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

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

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

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

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

                        <ng-container matColumnDef="ITEM8">
                            <th mat-header-cell *matHeaderCellDef> Acciones </th>
                            <td mat-cell *matCellDef="let element">
                                <button mat-mini-fab color="primary" class="button-accion" matTooltip="Ver Detalles">
                                    <mat-icon>visibility</mat-icon>
                                </button>
                            </td>
                        </ng-container>

                        <tr mat-header-row *matHeaderRowDef="displayedColumnsArtitle"></tr>
                        <tr mat-row *matRowDef="let row; columns: displayedColumnsArtitle;"></tr>
                    </table>
                </div>

                <main class="content-subcomponent-2 mat-elevation-z2">
                    <aside class="content-left-subcomponent">
                        <div class="subtitle">Información del Despacho</div>
                        <table mat-table [dataSource]="dataSourceDispatch">
                            <ng-container matColumnDef="ITEM1">
                                <th mat-header-cell *matHeaderCellDef> ID del Despacho </th>
                                <td mat-cell *matCellDef="let element"> {{ element.idDespacho }}</td>
                            </ng-container>

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

                            <ng-container matColumnDef="ITEM3">
                                <th mat-header-cell *matHeaderCellDef> Dirección </th>
                                <td mat-cell *matCellDef="let element"> {{ element.direccion }} </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumnsDispatch"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumnsDispatch;"></tr>
                        </table>
                    </aside>
                    <section class="content-right-subcomponent">

                        <div class="subtitle">Información del Método de Pago</div>
                        <table mat-table [dataSource]="dataSourceShippingMethod">
                            <ng-container matColumnDef="ITEM1">
                                <th mat-header-cell *matHeaderCellDef> ID de Método </th>
                                <td mat-cell *matCellDef="let element"> {{ element.idMetodo }} </td>
                            </ng-container>

                            <ng-container matColumnDef="ITEM2">
                                <th mat-header-cell *matHeaderCellDef> Método de Pago </th>
                                <td mat-cell *matCellDef="let element"> {{ element.metodoPago }} </td>
                            </ng-container>

                            <ng-container matColumnDef="ITEM3">
                                <th mat-header-cell *matHeaderCellDef> Tipo de Método </th>
                                <td mat-cell *matCellDef="let element"> {{element.tipoMetodo}} </td>
                            </ng-container>

                            <tr mat-header-row *matHeaderRowDef="displayedColumnsShippingMethod"></tr>
                            <tr mat-row *matRowDef="let row; columns: displayedColumnsShippingMethod;"></tr>
                        </table>
                    </section>
                </main>
            </aside>
            <section class="content-right mat-elevation-z2">
                <div class="subtitle">Información del Estado del Pedido</div>
                <table mat-table [dataSource]="dataSourceState">
                    <ng-container matColumnDef="ITEM1">
                        <th mat-header-cell *matHeaderCellDef> Estado </th>
                        <td mat-cell *matCellDef="let element"> {{ element.estado }} </td>
                    </ng-container>

                    <ng-container matColumnDef="ITEM2">
                        <th mat-header-cell *matHeaderCellDef> Fecha de Registro </th>
                        <td mat-cell *matCellDef="let element"> {{ element.fechaRegistro }} </td>
                    </ng-container>

                    <tr mat-header-row *matHeaderRowDef="displayedColumnsState"></tr>
                    <tr mat-row *matRowDef="let row; columns: displayedColumnsState;"></tr>
                </table>
            </section>
        </main>
    </div>
</body>
