<div class="main-container animated fadeIn" (window:resize)="onResize()">

    <!-- REGRESAR A LA PANTALLA ANTERIOR -->
    <nav id="navigation" class="btn-navigate mb-8">
        <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 [class]="card_size">

        <h1 class="title-card">Agrupación de órdenes de compra</h1>
        <!-- BUSCADOR Y BOTÓN DE REGISTRO -->
        <div align="center" class="w-100 mb-10">
            <div class="action-header">
                <!-- BOTÓN PARA RECARGAR LA TABLA -->
                <button mat-mini-fab color="info" class="mr-20 no-shadow" matTooltip="Actualizar Datos">
                    <mat-icon>refresh</mat-icon>
                </button>
                <!-- BUSCADOR -->
                <mat-form-field  class="input-filter">
                    <mat-label>Buscador</mat-label>
                    <input matInput placeholder="Ingrese la palabra a buscar">
                    <mat-icon matSuffix>search</mat-icon>
                </mat-form-field>
                <!-- BOTÓN DE REGISTRO -->
                <div class="ml-20">
                    <button mat-stroked-button color="primary" [disabled]="isLoadingForm" *ngIf="!btnSmall">
                        <mat-icon>add</mat-icon> Emitir Órdenes de Compra
                    </button>
                    <button mat-mini-fab color="primary" class="no-shadow" [disabled]="isLoadingForm"
                        *ngIf="btnSmall">
                        <mat-icon>add</mat-icon>
                    </button>
                </div>
            </div>
        </div>

        <!-- ALERTA - CARGANDO FORMULARIOS -->
        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

        <!-- ALERTA - CARGANDO DATOS... -->
        <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
            <mat-spinner align="center"></mat-spinner>
            <h3>Cargando datos ...</h3>
        </div>

        <!-- TABLA -->
        <table mat-table matSort [dataSource]="dataSource" class="animated fadeIn"
            [style.display]="isLoading ? 'none' : 'revert'">
            <ng-container matColumnDef="ITEM1">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Número de Orden</th>
                <td mat-cell *matCellDef="let element"> {{ element.codigoOrden }} </td>
            </ng-container>

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

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

            <ng-container matColumnDef="ITEM4">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de Emisión</th>
                <td mat-cell *matCellDef="let element"> {{ element.fechaEmision }} </td>
            </ng-container>

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

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

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

            <ng-container matColumnDef="ITEM8">
                <th mat-header-cell *matHeaderCellDef mat-sort-header>Propósito</th>
                <td mat-cell *matCellDef="let element"> {{ element.proposito }} </td>
            </ng-container>

            <ng-container matColumnDef="ITEM9">
                <th mat-header-cell *matHeaderCellDef style="text-align: center">
                    Acciones
                </th>
                <td mat-cell *matCellDef="let element" style="text-align: center">
                    <div *ngIf="btnSmall">
                        <button mat-mini-fab color="primary" [matMenuTriggerFor]="menu" #menuTrigger
                            matTooltip="Click para desplegar las opciones" class="no-shadow">
                            <mat-icon>settings</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                            <button mat-menu-item (click)="openDialog('VIEW')">
                                <mat-icon>preview</mat-icon>
                                Información de la Orden
                            </button>
                            <button mat-menu-item (click)="openDialog('CONF')">
                                <mat-icon>settings_applications</mat-icon>
                                Configuración de la Orden
                            </button>
                        </mat-menu>
                    </div>
                    <div *ngIf="!btnSmall">
                        <button mat-mini-fab color="primary" class="button-accion" (click)="openDialog('VIEW')"
                            [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm"
                            matTooltip="Información de la Orden">
                            <mat-icon>preview</mat-icon>
                        </button>
                        <button mat-mini-fab color="success" class="button-accion"
                            matTooltip="Configuración de la Orden" (click)="openDialog('CONF')"
                            [disabled]="element.ESTADO == 'Eliminado' || isLoadingForm">
                            <mat-icon>settings_applications</mat-icon>
                        </button>
                    </div>

                </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="mat-cell p-80 centre" colspan="12">
                    <object data="../../assets/img/empty_data.svg" width="300"></object>
                    <h2>Sin datos</h2>
                </td>
            </tr>
        </table>

        <!-- PAGINADOR -->
        <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons></mat-paginator>
    </div>
</div>
