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

    <app-btn-navigate [navigate]="'goback'" [nameButton]="'Gestión de Proveedores'" />

    <mat-card class="override-card override-elevation-z8">
        <section class="override-section">
            <nav class="override-nav">
                <mat-card-title class="mat-card-title align-center">Artículos del Proveedor</mat-card-title>
                <div class="override-actions">
                    <app-search-card
                        [dataSource]="dataSource"
                        [disabled]="isLoading || isLoadingForm"
                        (dataValue)="dataSource = $event"
                    />
                    <div class="override-buttons">
                        <app-btn-resize
                            class="ml-8"
                            onclick="getElementById('upfile').click();"
                            [disabled]="isLoading || isLoadingForm"
                            [backgroundColor]="'blue_dark_background'"
                            [textColor]="'white_font'"
                            [nameButton]="'Subir Contenido'"
                            [icon]="'file_upload'"
                        />
                        <app-btn-resize
                            class="ml-8"
                            (click)="alert('DOWNLOAD')"
                            [disabled]="isLoading || isLoadingForm"
                            [backgroundColor]="'teal_dark_background'"
                            [textColor]="'white_font'"
                            [nameButton]="'Descargar Contenido'"
                            [icon]="'file_download'"
                            [disabled]="arrDataSelected.selected.length == 0"
                        />
                        <input id="upfile" type="file" (change)="alert('UPLOAD', $event)" accept=".xlsx"/>
                        <button mat-mini-fab class="cyan_dark_background white_font override_no_shadow ml-8"
                            (click)="validateProvider()" [disabled]="isLoading || isLoadingForm" matTooltip="Actualizar Datos">
                            <mat-icon>refresh</mat-icon>
                        </button>
                    </div>
                </div>
            </nav>

            <app-loading-card
                [isLoading]="isLoading"
                [isLoadingForm]="isLoadingForm"
                [txtLoading]="'Cargando los artículos del proveedor'"
            />

            <div class="override-table">
                <table mat-table class="animated fadeIn w-100" matSort [dataSource]="dataSource" [style.display]="isLoading ? 'none': 'revert'">

                    <ng-container matColumnDef="SELECT">
                        <th mat-header-cell *matHeaderCellDef>
                        <mat-checkbox (change)="$event ? toggleAllRows() : null"
                                        [checked]="arrDataSelected.hasValue() && isAllSelected()"
                                        [indeterminate]="arrDataSelected.hasValue() && !isAllSelected()"
                                        [aria-label]="checkboxLabel()">
                        </mat-checkbox>
                        </th>
                        <td mat-cell *matCellDef="let row">
                        <mat-checkbox (click)="$event.stopPropagation()"
                                        (change)="$event ? arrDataSelected.toggle(row) : null"
                                        [checked]="arrDataSelected.isSelected(row)"
                                        [aria-label]="checkboxLabel(row)">
                        </mat-checkbox>
                        </td>
                    </ng-container>

                    <ng-container matColumnDef="ARTI_IDAR">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>ID Artículo</th>
                        <td mat-cell *matCellDef="let element"> {{ element.ARTI_IDAR }} </td>
                    </ng-container>
                    <ng-container matColumnDef="FAMI_NOMB">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Familia</th>
                        <td mat-cell *matCellDef="let element"> {{ element.FAMI_NOMB }} </td>
                    </ng-container>
                    <ng-container matColumnDef="SUBF_NOMB">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Subfamilia</th>
                        <td mat-cell *matCellDef="let element"> {{ element.SUBF_NOMB }} </td>
                    </ng-container>
                    <ng-container matColumnDef="ARTI_NOMB">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Artículo</th>
                        <td mat-cell *matCellDef="let element"> {{ element.ARTI_NOMB }} </td>
                    </ng-container>
                    <ng-container matColumnDef="ARTI_CODI">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Código de Barras</th>
                        <td mat-cell *matCellDef="let element"> {{ element.ARTI_CODI }} </td>
                    </ng-container>
                    <ng-container matColumnDef="DETAILS">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Cantidad de detalles</th>
                        <td mat-cell *matCellDef="let element"> {{ countDetails(element.DETAILS) }} </td>
                    </ng-container>
                    <ng-container matColumnDef="DEAR_USMO">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuario Actualización</th>
                        <td mat-cell *matCellDef="let element"> {{ resourcesService.selectUser(element.DEAR_USRE, element.DEAR_USMO) }} </td>
                    </ng-container>
                    <ng-container matColumnDef="DEAR_FEMO">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha Actualización</th>
                        <td mat-cell *matCellDef="let element"> {{ resourcesService.formatDate(element.DEAR_FERE, element.DEAR_FEMO) }} </td>
                    </ng-container>
                    <ng-container matColumnDef="ACTIONS">
                        <th mat-header-cell *matHeaderCellDef mat-sort-header>Acciones</th>
                        <td mat-cell *matCellDef="let element">
                            <button mat-mini-fab color="primary" class="white_font override_no_shadow ml-4" 
                                matTooltip="Ver Artículo" [disabled]="isLoadingForm" (click)="openDialog('ART', element)">
                                <mat-icon>info</mat-icon>
                            </button>
                        </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-20 align-center" colspan="12">
                          <object data="assets/img/empty_data.svg" width="150"></object>
                          <h2>Sin datos</h2>
                        </td>
                    </tr>
                </table>
            </div>
        </section>
        <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
    </mat-card>
</main>
