<div class="main-container animated fadeIn" (window:resize)="onResize($event)">
    <div [class]="card_size">
        <h1 class="title-card">Mis solicitudes</h1>

        <app-translation (click)="updatePaginator()"></app-translation>

        <div align="center" class="w-100 mb-10">
            <div style="display: inline-block; width: 80%">
                <!-- PAGINADOR -->
                <mat-form-field appearance="fill">
                    <mat-label>Buscador</mat-label>
                    <input matInput (keyup)="applyFilter($event)" placeholder="Ingrese la palabra a buscar">
                    <mat-icon matSuffix>search</mat-icon>
                </mat-form-field>
            </div>
            <div style="display: inline-block; width: 20%">
                <mat-form-field >
                    <mat-label>Solicitudes por estado</mat-label>
                    <mat-select [(value)]="selectedOpcion" (selectionChange)="filterData($event.value)"
                        class="filterStyle">
                        <mat-option *ngFor="let state of statusData" [value]="state.state">
                            {{ state.textState }}</mat-option>
                    </mat-select>
                </mat-form-field>
            </div>
        </div>

        <p *ngIf="selectedOpcion == 1 " class="centre display-text text-secondary">
            Filtros de búsqueda</p>
        <div class="filters " *ngIf="selectedOpcion == 1">
            <div class="flex-item">
                <mat-form-field hintLabel="{{ 'workflow.historial.notificaciones.busqueda.fecha' | translate }}"
                    >
                    <mat-label>Fecha de creación</mat-label>
                    <input [(ngModel)]='filterCreatedDate' matInput [min]="minDate" [max]="maxDate"
                        [matDatepicker]="date_created">
                    <mat-datepicker-toggle matSuffix [for]="date_created"></mat-datepicker-toggle>
                    <mat-datepicker #date_created></mat-datepicker>
                </mat-form-field>
            </div>

            <div class="flex-item">
                <mat-form-field hintLabel="{{ 'workflow.historial.notificaciones.busqueda.fecha' | translate }}"
                    >
                    <mat-label>Fecha de validación</mat-label>
                    <input [(ngModel)]='filterValidatedDate' matInput [min]="minDate" [max]="maxDate"
                        [matDatepicker]="date_validated">
                    <mat-datepicker-toggle matSuffix [for]="date_validated"></mat-datepicker-toggle>
                    <mat-datepicker #date_validated></mat-datepicker>
                </mat-form-field>
            </div>

            <div class="flex-item">
                <mat-form-field hintLabel="{{ 'workflow.modulos.form' | translate }}" >
                    <mat-label>{{ 'workflow.modulos.form.placeholder' | translate }}</mat-label>
                    <mat-select [(ngModel)]='filterModule'>
                        <mat-option *ngFor="let item of modules; let i = index" [value]="item.name">
                            {{ item.name }}
                        </mat-option>
                    </mat-select>
                    <mat-icon matSuffix>view_module</mat-icon>
                </mat-form-field>
            </div>

            <div class="flex-item">
                <button class="mr-1 secondary" mat-mini-fab matTooltip="Aplicar filtros" (click)="filter()">
                    <mat-icon>filter_list</mat-icon>
                </button>
                <button class="warn" mat-mini-fab matTooltip="Quitar filtros" (click)="clearFilter()">
                    <mat-icon>delete</mat-icon>
                </button>
            </div>
        </div>

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

        <mat-progress-bar mode="indeterminate" *ngIf="isLoadingForm"></mat-progress-bar>

        <table mat-table [dataSource]="dataSource" class="animated fadeIn" *ngIf="!isLoading">
            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>
                    Tarea
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.task.name }}
                </td>
            </ng-container>

            <ng-container matColumnDef="status">
                <th mat-header-cell *matHeaderCellDef>Estado</th>
                <td mat-cell *matCellDef="let element">
                    {{ element.isValidated ? 'Validado' : 'Rechazado' }}
                </td>
            </ng-container>

            <ng-container matColumnDef="modulo">
                <th mat-header-cell *matHeaderCellDef>Modulo</th>
                <td mat-cell *matCellDef="let element">
                    {{ element.module }}
                </td>
            </ng-container>

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

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

            <ng-container matColumnDef="accion">
                <th mat-header-cell *matHeaderCellDef class="centre">Acciones</th>
                <td mat-cell *matCellDef="let element" class="table-action centre">
                    <button mat-mini-fab class="mr-1 secondary" [disabled]="element.isCompleted == 1"
                        (click)="openDialogConfirmAction('Aceptar', element)" matTooltip="Aceptar">
                        <mat-icon>done</mat-icon>
                    </button>
                    <button mat-mini-fab color="warn" class="mr-1" [disabled]="element.isCompleted == 1"
                        (click)="openDialogConfirmAction('Rechazar', element)" matTooltip="Rechazar">
                        <mat-icon>cancel</mat-icon>
                    </button>
                </td>
            </ng-container>

            <ng-container matColumnDef="acciones">
                <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="accent" [matMenuTriggerFor]="menu" #menuTrigger
                            class="no-shadow">
                            <mat-icon>settings</mat-icon>
                        </button>
                        <mat-menu #menu="matMenu">
                            <button mat-menu-item [disabled]="element.isCompleted == 1"
                                (click)="openDialogConfirmAction('Aceptar', element)" matTooltip="Aceptar">
                                <mat-icon>done</mat-icon>
                                Aceptar
                            </button>
                            <button mat-menu-item [disabled]="element.isCompleted == 1"
                                (click)="openDialogConfirmAction('Rechazar', element)">
                                <mat-icon>cancel</mat-icon>
                                Rechazar
                            </button>
                        </mat-menu>
                    </div>
                    <div *ngIf="!btnSmall">
                        <button mat-mini-fab color="primary" class="button-accion"
                            [disabled]="element.isCompleted == 1 || isLoadingForm"
                            (click)="openDialogConfirmAction('Rechazar', element)" matTooltip="Aceptar">
                            <mat-icon>done</mat-icon>
                        </button>
                        <button mat-mini-fab color="warn" class="button-accion" matTooltip="Eliminar"
                            [disabled]="element.isCompleted == 1" (click)="openDialogConfirmAction('Rechazar', element)"
                            matTooltip="Rechazar">
                            <mat-icon>cancel</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">
                    <img src="../../assets/img/empty_data.svg" width="300">
                    <h2>Sin datos</h2>
                </td>
            </tr>
        </table>

        <mat-paginator [pageSizeOptions]="[10, 20, 50]" showFirstLastButtons aria-label="Seleccione">
        </mat-paginator>
    </div>
</div>
