<main class="main-container animated fadeIn">

    <app-btn-navigate [navigate]="'/sam/GEAD'" [nameButton]="'Gestión de Adquisiciones'" />

    <mat-card class="override-card override-elevation-z8">
        <nav class="override-nav">
            <div class="w-100 align-center pv-15">
                <span class="title-card ">Líneas de Solicitud de Compra</span>
            </div>
            <div class="override-actions">
                <app-search-card [dataSource]="dataSource" [disabled]="isLoading || isLoadingForm"
                    (dataValue)="dataSource = $event" />
                <div class="override-buttons">
                    <button mat-mini-fab (click)="getAllRequestLines()"
                        class="cyan_dark_background white_font override_no_shadow ml-8" matTooltip="Actualizar Datos">
                        <mat-icon>refresh</mat-icon>
                    </button>
                </div>
            </div>
        </nav>

        <app-loading-card 
            [isLoading]="isLoading" 
            [isLoadingForm]="isLoadingForm"
            [txtLoading]="'Cargando las líneas de solicitud de compra'" />

        <div class="override-table" *ngIf="getRequestLineEnabled">
            <table mat-table [dataSource]="dataSource" multiTemplateDataRows
                [style.display]="isLoading ? 'none' : 'revert'">
                <ng-container matColumnDef="{{column}}" *ngFor="let column of columnsToDisplay">
                    <th mat-header-cell *matHeaderCellDef>
                        <span *ngIf="column === 'ID_LINEA_SOLICITUD'">No. Solicitud</span>
                        <span *ngIf="column === 'NOMBRE_COMERCIAL'">Proveedor</span>
                        <span *ngIf="column === 'ORDEN_TRABAJO_PREVENTIVO'">Propósito</span>
                        <span *ngIf="column === 'USUARIO_MODIFICA'">Usuario Modificación</span>
                        <span *ngIf="column === 'ESTADO'">Estado</span>
                        <span *ngIf="column === 'FECHA_MODIFICA'">Ultima Modificación</span>
                        <span *ngIf="column === 'ACCIONES'">Acciones</span>
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span *ngIf="column === 'ID_LINEA_SOLICITUD'">Solicitud #{{ element.ID_LINEA_SOLICITUD }}</span>
                        <span *ngIf="column === 'NOMBRE_COMERCIAL'">{{ element.NOMBRE_COMERCIAL }}</span>
                        <span *ngIf="column === 'ORDEN_TRABAJO_PREVENTIVO'">{{ getProposite( element.ORDEN_TRABAJO_PREVENTIVO, element.ORDEN_TRABAJO_CORRECTIVO) }}</span>
                        <span *ngIf="column === 'USUARIO_MODIFICA'">{{ resourcesService.selectUser(element.USUARIO_REGISTRA, element.USUARIO_MODIFICA)}}</span>
                        <span *ngIf="column === 'FECHA_MODIFICA'">{{ resourcesService.formatDate(element.FECHA_REGISTRA, element.FECHA_MODIFICA) }}</span>
                        <span *ngIf="column === 'ESTADO'">
                            <mat-chip class="orange_primary_background clickable" *ngIf="element.ESTADO === 'En espera'"> {{ element.ESTADO }} </mat-chip>
                            <mat-chip class="green_dark_background clickable" *ngIf="element.ESTADO === 'Factura Cotizada'"> Factura Cotizada </mat-chip>
                            <mat-chip class="gray_dark_background clickable" *ngIf="element.ESTADO === 'Cancelado'"> {{ element.ESTADO }} </mat-chip>
                            <mat-chip class="light_blue_dark_background clickable" *ngIf="element.ESTADO === 'En OC'"> En Orden de Compra </mat-chip>
                            <mat-chip class="teal_dark_background clickable" *ngIf="element.ESTADO === 'Terminado'"> {{ element.ESTADO }} </mat-chip>
                        </span>
                        <span *ngIf="column === 'ACCIONES'">
                            <div *ngIf="!resourcesService.onResize()">
                                <button mat-mini-fab (click)="alert('CANCEL', element)" color="warn" 
                                    class="override_no_shadow mr-4" matTooltip="Cancelar Solicitud"
                                    [disabled]="element.ESTADO === 'En OC' || element.ESTADO === 'Cancelado' || element.ESTADO === 'Rechazado' || element.ESTADO === 'Terminado '">
                                    <mat-icon>block</mat-icon>
                                </button>
                                <button mat-mini-fab (click)="openDialogInvoice(element)"
                                    class="teal_dark_background white_font override_no_shadow mr-4"
                                    matTooltip="Subir Factura"
                                    *ngIf="sendDocumentEnabled"
                                    [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
                                    <mat-icon>document_scanner</mat-icon>
                                </button>
                                <button mat-mini-fab (click)="openDialogRegisterOrder(element)" color="primary"
                                    class="override_no_shadow mr-4" matTooltip="Registrar Orden de Compra"
                                    *ngIf="configOrderEnabled"
                                    [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
                                    <mat-icon>local_shipping</mat-icon>
                                </button>
                            </div>
                            <div *ngIf="resourcesService.onResize()">
                                <button mat-mini-fab color="primary" class="override_no_shadow"
                                    [matMenuTriggerFor]="menu" matTooltip="Abrir Acciones">
                                    <mat-icon>more_vert</mat-icon>
                                </button>
                                <mat-menu #menu="matMenu">
                                    <button mat-menu-item (click)="alert('CANCEL', element)" [disabled]="element.ESTADO === 'En OC' || element.ESTADO === 'Cancelado' || element.ESTADO === 'Rechazado' || element.ESTADO === 'Terminado '">
                                        <mat-icon>block</mat-icon>
                                        <span>Cancelar Solicitud</span>
                                    </button>
                                    <button mat-menu-item (click)="openDialogInvoice(element)" *ngIf="sendDocumentEnabled" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
                                        <mat-icon>document_scanner</mat-icon>
                                        <span>Subir Factura</span>
                                    </button>
                                    <button mat-menu-item (click)="openDialogRegisterOrder(element)" *ngIf="configOrderEnabled" [disabled]="element.ESTADO === 'Cancelado' || element.ESTADO === 'Terminado' || element.ESTADO === 'En OC'">
                                        <mat-icon>local_shipping</mat-icon>
                                        <span>Registrar Orden de Compra</span>
                                    </button>
                                </mat-menu>
                            </div>
                        </span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="expand">
                    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
                    <td mat-cell *matCellDef="let element">
                        <button (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()" 
                            *ngIf="infoSelectedEnabled" mat-icon-button aria-label="expand row">
                            <mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
                            <mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
                        </button>
                    </td>
                </ng-container>
                <ng-container matColumnDef="expandedDetail">
                    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
                        <div class="example-element-detail"
                            [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
                            <div class="p-16">
                                <div align="center">
                                    <h2>Lista de Artículos</h2>
                                </div>
                                <div style="display: flex; flex-direction: column;" *ngFor="let artitle of element.SELECTED; let i = index;">
                                    <div style="display: flex;">
                                        <div style="width: 212px;">
                                            <app-slider [arrImages]="artitle.CARR_IMAG" />
                                        </div>
                                        <div style="width: 100%; display: flex; justify-content: space-between; padding: 8px 8px 8px 32px;">
                                            <div
                                                class="item-artitle">
                                                <h2 class="m-0" [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <span *ngIf="artitle.ESTADO !== 'Eliminado'">{{ artitle.ID_ARTICULO_SELECCIONADO }} - </span>{{ artitle.ARTICULO }}
                                                </h2>
                                                <i [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    {{ artitle.NOMBRE_FAMILIA }} - {{ artitle.NOMBRE_SUBFAMILIA }} 
                                                </i>
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Modelo:</b> {{ artitle.MODELO_INFORMACION }}
                                                </span>
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Código:</b> {{ artitle.CODIGO_INFORMACION }}
                                                </span>
                                            </div>
                                            <div class="item-artitle w-300p">
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Código de Artículo:</b> {{ artitle.CODIGO }}
                                                </span>
                                                <b [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">Características:</b>
                                                <p [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'"> {{ resourcesService.resizeText(artitle.CARACTERISTICAS_INFORMACION, 167) }} </p>
                                            </div>
                                            <div class="item-artitle">
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Precio:</b> {{ resourcesService.moneyFormat(artitle.PRECIO_UNITARIO) }} {{ artitle.CODIGO_MONEDA }} 
                                                </span>
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Cantidad:</b> {{ artitle.CANTIDAD }} ({{ artitle.NOMBRE_UNIDAD }})</span>
                                                <span [class]="artitle.ESTADO === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <b>Precio Total:</b> {{ resourcesService.moneyFormat( (artitle.PRECIO_UNITARIO * artitle.CANTIDAD) ) }} {{ artitle.CODIGO_MONEDA }} 
                                                </span>
                                            </div>
                                            <div class="item-artitle">
                                                <button mat-mini-fab 
                                                    (click)="alert('DELETE', artitle, element)"
                                                    [disabled]="element.ESTADO !== 'En espera' || artitle.ESTADO === 'Eliminado'"
                                                    color="warn" class="override_no_shadow mr-4"
                                                    matTooltip="Eliminar Artículo">
                                                    <mat-icon>delete</mat-icon>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                    <mat-divider *ngIf="i < element.SELECTED.length - 1"></mat-divider>
                                </div>
                            </div>
                        </div>
                    </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
                <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;" class="example-element-row" [class.example-expanded-row]="expandedElement === element"></tr>
                <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></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>
        <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
    </mat-card>
</main>