<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 === 'LINE_IDLI'">No. Solicitud</span>
                        <span *ngIf="column === 'PROV_NOCO'">Proveedor</span>
                        <span *ngIf="column === 'LINE_OTPR'">Propósito</span>
                        <span *ngIf="column === 'LINE_USMO'">Usuario Modificación</span>
                        <span *ngIf="column === 'LINE_ESTA'">Estado</span>
                        <span *ngIf="column === 'LINE_FEMO'">Ultima Modificación</span>
                        <span *ngIf="column === 'ACCIONES'">Acciones</span>
                    </th>
                    <td mat-cell *matCellDef="let element">
                        <span *ngIf="column === 'LINE_IDLI'">Solicitud #{{ element.LINE_IDLI }}</span>
                        <span *ngIf="column === 'PROV_NOCO'">{{ element.PROV_NOCO }}</span>
                        <span *ngIf="column === 'LINE_OTPR'">{{ getProposite( element.LINE_OTPR, element.LINE_OTCO)
                            }}</span>
                        <span *ngIf="column === 'LINE_USMO'">{{ resourcesService.selectUser(element.LINE_USRE,
                            element.LINE_USMO)}}</span>
                        <span *ngIf="column === 'LINE_FEMO'">{{ resourcesService.formatDate(element.LINE_FERE,
                            element.LINE_FEMO) }}</span>
                        <span *ngIf="column === 'LINE_ESTA'">
                            <mat-chip class="orange_primary_background clickable"
                                *ngIf="element.LINE_ESTA === 'En espera'">
                                {{ element.LINE_ESTA }}
                            </mat-chip>
                            <mat-chip class="green_dark_background clickable"
                                *ngIf="element.LINE_ESTA === 'Factura Cotizada'">
                                Factura Cotizada
                            </mat-chip>
                            <mat-chip class="gray_dark_background clickable" *ngIf="element.LINE_ESTA === 'Cancelado'">
                                {{ element.LINE_ESTA }}
                            </mat-chip>
                            <mat-chip class="light_blue_dark_background clickable"
                                *ngIf="element.LINE_ESTA === 'En OC'">
                                En Orden de Compra
                            </mat-chip>
                            <mat-chip class="teal_dark_background clickable" *ngIf="element.LINE_ESTA === 'Terminado'">
                                {{ element.LINE_ESTA }}
                            </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.LINE_ESTA === 'En OC' || element.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Rechazado' || element.LINE_ESTA === '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.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Terminado' || element.LINE_ESTA === '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.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Terminado' || element.LINE_ESTA === '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.LINE_ESTA === 'En OC' || element.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Rechazado' || element.LINE_ESTA === 'Terminado '">
                                        <mat-icon>block</mat-icon>
                                        <span>Cancelar Solicitud</span>
                                    </button>
                                    <button mat-menu-item (click)="openDialogInvoice(element)" *ngIf="sendDocumentEnabled" [disabled]="element.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Terminado' || element.LINE_ESTA === 'En OC'">
                                        <mat-icon>document_scanner</mat-icon>
                                        <span>Subir Factura</span>
                                    </button>
                                    <button mat-menu-item (click)="openDialogRegisterOrder(element)" *ngIf="configOrderEnabled" [disabled]="element.LINE_ESTA === 'Cancelado' || element.LINE_ESTA === 'Terminado' || element.LINE_ESTA === '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 *ngIf="infoSelectedEnabled" mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element);
                                $event.stopPropagation()">
                            <mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
                            <mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
                        </button>
                    </td>
                </ng-container>
                <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
                <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
                                                style="display: flex; flex-direction: column; justify-content: center;">
                                                <h2 style="margin: 0 !important;"
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    <span *ngIf="artitle.ARSE_ESTA !== 'Eliminado'">{{ artitle.ARSE_IDAS
                                                        }} - </span>{{ artitle.ARTI_NOMB }}
                                                </h2>
                                                <i
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    {{ artitle.FAMI_NOMB }} - {{ artitle.SUBF_NOMB }} </i>
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Modelo:</b>
                                                    {{ artitle.INAR_MODE }}</span>
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Código:</b>
                                                    {{ artitle.INAR_CODI }}</span>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: column; justify-content: center; width: 300px;">
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Código
                                                        de barras:</b> {{ artitle.ARTI_CODI }}</span>
                                                <b
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'">Características:</b>
                                                <p
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'">
                                                    {{ artitle.INAR_CARA }} </p>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: column; justify-content: center;">
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Precio:</b>
                                                    {{ resourcesService.moneyFormat(artitle.INAR_PREC) }} {{
                                                    artitle.INAR_MONE }} </span>
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Cantidad:</b>
                                                    {{ artitle.ARSE_CANT }} ( {{ artitle.UNID_NOMB }})</span>
                                                <span
                                                    [class]="artitle.ARSE_ESTA === 'Eliminado' ? 'color-status-delete' : 'color-status'"><b>Precio
                                                        Total:</b> {{ resourcesService.moneyFormat(artitle.ARSE_PRTO )
                                                    }} {{ artitle.INAR_MONE }} </span>
                                            </div>
                                            <div
                                                style="display: flex; flex-direction: column; justify-content: center;">
                                                <button mat-mini-fab (click)="alert('DELETE', artitle, element)"
                                                    [disabled]="element.LINE_ESTA !== 'En espera' || artitle.ARSE_ESTA === '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>
                <!-- (click)="expandedElement = expandedElement === element ? null : element" -->
                <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>