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

  <app-btn-navigate navigate="/sam/GPRS" nameButton="Gestión de personal, recursos y subcontratistas"/>

  <mat-card class="override-card override-elevation-z8">
    <section [ngClass]="{ hidden: screenMode != 'contracts' }" class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre">Lista de contratos</mat-card-title>
        <div class="override-actions">
          <mat-form-field appearance="outline" class="w-300p mr-8">
            <mat-label>Buscador</mat-label>
            <input matInput [(ngModel)]="txtBuscadorContracts" (keyup)="applyFilterContracts($event,'INP')"
            placeholder="Ingrese la palabra a buscar" />
            <mat-icon *ngIf="txtBuscadorContracts.length === 0" matSuffix>search</mat-icon>
            <mat-icon *ngIf="txtBuscadorContracts.length> 0" class="clickable" matTooltip="Eliminar filtro"
            (click)="applyFilterContracts('', 'EST')" matSuffix>close</mat-icon>
          </mat-form-field>
          <div class="override-buttons">
            <button mat-flat-button color="primary" matTooltip="Registrar Contrato" [disabled]="isLoading" *ngIf="!btnSmall"
            class="override_no_shadow mr-10 " (click)="openDialog('REG')">
              <mat-icon>add</mat-icon> Nuevo
            </button>
            <button mat-mini-fab color="primary" matTooltip="Registrar Contrato" [disabled]="isLoading" *ngIf="btnSmall" 
            class="override_no_shadow mr-10 raised-button-background" (click)="openDialog('REG')">
              <mat-icon>add</mat-icon>
            </button>
            <button mat-mini-fab (click)="getContracts()" [disabled]="isLoading" matTooltip="Actualizar datos" 
            class="orange_primary_background white_font override_no_shadow mr-10">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>
        </div>
      </nav>
      
      <!-- ALERTAS - CARGANDO FORMULARIOS -->
      <div class="is-loading animated fadeIn fast" *ngIf="isLoading">
        <mat-spinner align="center"></mat-spinner>
        <h3>Cargando datos ...</h3>
      </div>

      <div class="has-error animated fadeIn fast" *ngIf="!isLoading && hasError">
        <mat-icon class="red_primary_font">error</mat-icon>
        <h3>{{ errorStr }}</h3>
      </div>

      <!-- CONTENEDOR DE LA TABLA -->
      <a target="_blank" id="download" class="hidden"></a>
      <div class="override-table" [ngClass]="{ hidden: isLoading || hasError }">
        <table mat-table [dataSource]="dataSourceContracts!" matSort="MatSort2" class="animated fadeIn" 
        [style.display]="isLoading ? 'none' : 'revert'">
          <ng-container matColumnDef="CONTRACT_NAME">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Nombre del contrato</th>
            <td mat-cell *matCellDef="let element">{{ element.CONTRACT_NAME }}</td>
          </ng-container>

          <ng-container matColumnDef="CONTRACT_TYPE">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo de contrato</th>
            <td mat-cell *matCellDef="let element">{{ element.CONTRACT_TYPE }}</td>
          </ng-container>

          <ng-container matColumnDef="DURATION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Duración</th>
            <td mat-cell *matCellDef="let element">{{ element.DURATION }}</td>
          </ng-container>

          <ng-container matColumnDef="DENOMINATION">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Denominación</th>
            <td mat-cell *matCellDef="let element">{{ element.DENOMINATION.length > 0 ? element.DENOMINATION : "-"}}</td>
          </ng-container>

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

          <ng-container matColumnDef="REGISTER_DATE">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha última modificación</th>
            <td mat-cell *matCellDef="let element">{{ element.MODIFICATION_DATE == null ? element.REGISTER_DATE : element.MODIFICATION_DATE }}</td>
          </ng-container>

          <ng-container matColumnDef="REGISTERED_BY">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Usuario última modificación</th>
            <td mat-cell *matCellDef="let element">{{ element.MODIFIED_BY == null ? element.REGISTERED_BY : element.MODIFIED_BY }}</td>
          </ng-container>

          <ng-container matColumnDef="STATUS">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
            <td mat-cell *matCellDef="let element">
              <button mat-flat-button class="white_font" [class]="resourcesService.setChipList(element.STATUS)">
                {{ element.STATUS }}
              </button>
            </td>
          </ng-container>

          <ng-container matColumnDef="ACCIONES">
            <th mat-header-cell *matHeaderCellDef>Acciones</th>
            <td mat-cell *matCellDef="let element">
              <button mat-mini-fab color="primary" [disabled]="isLoading" [matMenuTriggerFor]="menu" #menuTrigger class="override_no_shadow gray_dark_font transparent_background">
                <mat-icon>more_vert</mat-icon>
              </button>
              <mat-menu #menu="matMenu">
                <button  mat-menu-item  (click)="openDialog('DEC', element)">
                  <mat-icon>visibility</mat-icon> Detalles
                </button>
                <button mat-menu-item (click)="openDialog('DOW', element)">
                  <mat-icon>download</mat-icon> Descargar
                </button>
              </mat-menu>
            </td>
          </ng-container>
          
          <tr mat-header-row *matHeaderRowDef="displayedColumnsContracts"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnsContracts"></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>
    <section [ngClass]="{ hidden: screenMode != 'interventions' }" class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre">Lista de intervenciones</mat-card-title>
        <div class="override-actions">


          <app-search-card
            [dataSource]="dataSourceInterventions"
            [disabled]="isLoading || isLoadingForm"
            (dataValue)="dataSourceInterventions = $event"
          />


          <div class="override-buttons">
            <button 
              mat-mini-fab 
              (click)="getInterventions()" 
              [disabled]="isLoading" 
              matTooltip="Actualizar datos" 
              class="orange_primary_background white_font override_no_shadow mr-10">
              <mat-icon>refresh</mat-icon>
            </button>
          </div>

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

      <div class="has-error animated fadeIn fast" *ngIf="!isLoading && hasError">
        <mat-icon  class="red_primary_font">error</mat-icon>
        <h3>{{ errorStr }}</h3>
      </div>

      <div class="override-table" [ngClass]="{ hidden: isLoading || hasError }">
        <table mat-table [dataSource]="dataSourceInterventions!" matSort class="animated fadeIn" 
        [style.display]="isLoading ? 'none' : 'revert'">
          <ng-container matColumnDef="ORDER_ID">
            <th mat-header-cell *matHeaderCellDef mat-sort-header># Orden</th>
            <td mat-cell *matCellDef="let element">#{{ element.IDORDER }}</td>
          </ng-container>

          <ng-container matColumnDef="EQUIPMENTS_ID">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Equipamiento intervenido</th>
            <td mat-cell *matCellDef="let element" style="word-break: break-all; max-width: 320px;">
              {{ element.EQUIPMENT }}
            </td>
          </ng-container>

          <ng-container matColumnDef="ORDER_TYPE">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo de orden</th>
            <td mat-cell *matCellDef="let element">
              @if (element.ORDER_TYPE == 'P') {
                Mantenimiento preventivo
              } @else {
                Mantenimiento correctivo
              }
            </td>
          </ng-container>

          <ng-container matColumnDef="STATUS">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Estado</th>
            <td mat-cell *matCellDef="let element">
              @if (element.ORDER_TYPE == 'P') {
                {{ element.ACTION_TYPE }}
              } @else {
                @switch (element.ACTION_TYPE) {
                  @case ("PE") { Pendiente }
                  @case ("VA") { Validado }
                  @case ("RE") { Rechazado }
                  @case ("EP") { En proceso }
                  @case ("CE") { Cerrado }
                  @case ("CP") { Cerrado pendiente }
                  @case ("CA") { Cancelado }
                  @case ("EL") { Eliminado }
                }
              }
            </td>
          </ng-container>
          
          <ng-container matColumnDef="START_DATE">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de inicio</th>
            <td mat-cell *matCellDef="let element"> {{element.START_DATE}} </td>
          </ng-container>

          <ng-container matColumnDef="END_DATE">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de término</th>
            <td mat-cell *matCellDef="let element"> {{element.END_DATE}} </td>
          </ng-container>

          <ng-container matColumnDef="ACCIONES">
            <th mat-header-cell *matHeaderCellDef>Acciones</th>
            <td mat-cell *matCellDef="let element">
              <button mat-mini-fab color="primary" class="override_no_shadow mr-4 pink_primary_background white_font" [disabled]="isLoadingForm" matTooltip="Ver detalles"
              (click)="openDialog('DEI', element)">
                <mat-icon>visibility</mat-icon>
              </button>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumnsInterventions"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnsInterventions"></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>
    <!-- PAGINADOR -->
    <div class="override-paginator">
      <mat-paginator [pageSizeOptions]="[10, 50, 100]" [ngClass]="{ hidden: screenMode != 'interventions' }"></mat-paginator>
      <mat-paginator [pageSizeOptions]="[10, 50, 100]" #MatPaginator2="matPaginator"[ngClass]="{ hidden: screenMode != 'contracts' }"></mat-paginator>
    </div>
  </mat-card>
</main>