<div class="active-orders-container prevent-select" (window:resize)="onResize()">
  <div class="active-orders-toolbar animated fadeIn">
    <div class="prev-page raised-button-background mat-elevation-z8" matRipple 
    [routerLink]="['/sam/GMPR']">
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Gestión de mantenimiento preventivo</div>
    </div>
    <div class="separator">
      <div class="calendar-title-container animated fadeIn" *ngIf="displayedScreen == 'CALEJE'">
        <button mat-mini-fab (click)="animateToolbar()" color="primary" class="mr-16 animated fadeIn" *ngIf="floatToolbar">
          <mat-icon *ngIf="iconToogle" class="animated fadeIn fast">menu</mat-icon>
          <mat-icon *ngIf="!iconToogle" class="animated fadeIn fast">close</mat-icon>
        </button>
        <h1>{{ MONTHS[displayedMonth] }} del {{ displayedYear }}</h1>
        <button mat-stroked-button class="ml-16" (click)="changeDisplayedMonth('today')">
          Hoy
        </button>
        <div class="separator"></div>
        <button mat-icon-button matTooltip="Mes anterior" class="mr-10" (click)="changeDisplayedMonth('backward')">
          <mat-icon>chevron_left</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Mes siguiente" (click)="changeDisplayedMonth('forward')">
          <mat-icon>chevron_right</mat-icon>
        </button>
      </div>
    </div>
    <mat-button-toggle-group value="CALEJE" (valueChange)="screenChange($event)">
      <mat-button-toggle value="CALEJE">
        <span *ngIf="!floatToolbar">Calendario de ejecuciones</span>
        <mat-icon *ngIf="floatToolbar" matTooltip="Calendario de ejecuciones">calendar_month</mat-icon>
      </mat-button-toggle>
      <mat-button-toggle value="ORTTRA">
        <span *ngIf="!floatToolbar">Órdenes de trabajo activas</span>
        <mat-icon *ngIf="floatToolbar" matTooltip="Órdenes de trabajo activas">receipt_long</mat-icon>
      </mat-button-toggle>
    </mat-button-toggle-group>
  </div>
  <div class="animated fadeIn" [ngClass]="{ hidden: displayedScreen != 'CALEJE', executions_calendar_flex_container: !floatToolbar, 
  executions_calendar_relative_container: floatToolbar }">
    <div class="calendar-toolpanel" [ngClass]="{ calendar_toolpanel_float: floatToolbar, calendar_toolpanel_float_closed: !showToolbar, 
    calendar_toolpanel_float_opening: showingToolbar, calendar_toolpanel_float_opened: showToolbar, calendar_toolpanel_float_hidding: hiddingToolbar }">
      <mat-calendar [(selected)]="selected" (selectedChange)="changeDisplayedMonth('calendar')"></mat-calendar>
      <h3>Tipo de activador</h3>
      <section class="checkbox-group-section">
        <span>
          <mat-checkbox class="checkbox-margin" [checked]="allActivatorsChecked" color="primary" [indeterminate]="someActivatorsChecked()" 
          (change)="setAllActivators($event.checked)">
            Todos
          </mat-checkbox>
        </span>
        <span>
          <ul>
            <li *ngFor="let activator of activators.subactivators">
              <mat-checkbox [(ngModel)]="activator.checked" (ngModelChange)="updateAllActivatorsChecked()" color="secondary">
                {{ activator.name }}
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>
      <h3>Estado de la ejecución</h3>
      <section class="checkbox-group-section">
        <span>
          <mat-checkbox class="checkbox-margin" [checked]="allStatesChecked" color="primary" [indeterminate]="someStatesChecked()" 
          (change)="setAllStates($event.checked)">
            Todos
          </mat-checkbox>
        </span>
        <span>
          <ul>
            <li *ngFor="let state of states.subactivators">
              <mat-checkbox [(ngModel)]="state.checked" (ngModelChange)="updateAllStatesChecked()" [id]="'c_box_' + state.value" 
              (click)="updateSyncColor(state.value)">
                {{ state.name }}
              </mat-checkbox>
            </li>
          </ul>
        </span>
      </section>
    </div>
    <div class="calendar-content-container animated fadeIn" *ngIf="!gettingEvents">
      <div class="calendar-day-names">
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Domingo</h3>
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Lunes</h3>
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Martes</h3>
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Miércoles</h3>
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Jueves</h3>
        <h3 class="calendar_cell_border_right calendar_cell_border_bottom">Viernes</h3>
        <h3 class="calendar_cell_border_bottom">Sábado</h3>
      </div>
      <div class="calendar-days-table">
        <div class="calendar-days-row" *ngFor="let row of monthDays;let i = index" [ngClass]="{ calendar_cell_border_bottom: i < monthDays.length - 1 }">
          <div class="calendar-day-cell" *ngFor="let day of monthDays[i];let j = index" [ngClass]="{ calendar_cell_border_right: j < monthDays[i].length - 1, 
          selected_day: isSelected(i, j)}">
            <div class="calendar-day-label">
              <div class="month_day" [ngClass]="{ gray_light_font: !day.isActualMonth, actual_day: day.isActualDay }">{{ day.day }}</div>
            </div>
            <div class="calendar-day-events-container">
              <div *ngFor="let event of getDayEvents(i, j)">
                <div class="calendar-event" [style.background]="event.EVENTCOLOR" (click)="openExecution(event.IDORDEN, event.REGEST, i, j)" 
                *ngIf="event.SEEMORE == null || event.SEEMORE == undefined">
                  <div class="mr-4"><div [ngClass]="{ amber_primary_background: event.REGEST == 'Programada', red_primary_background: event.REGEST == 'Cancelacion', 
                  blue_primary_background: event.REGEST == 'Ejecucion', green_primary_background: event.REGEST == 'Finalizado' }"></div></div>Orden #{{ event.IDORDEN }}
                </div>
                <div *ngIf="event.SEEMORE == true" class="see-all-events" (click)="openAllEvents(i, j)">
                  Ver mas...
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <mat-progress-bar mode="indeterminate" *ngIf="gettingEvents" class="animated fadeIn" style="width: calc(100% - 320px);"></mat-progress-bar>
  </div>
  <div class="active-orders-table-container animated fadeIn" [ngClass]="{ hidden: displayedScreen != 'ORTTRA' }">
    <mat-card class="override-card override-elevation-z8">
      <section class="override-section">
        <nav class="override-nav">
          <mat-card-title class="mat-card-title centre">Seguimiento de ejecuciones</mat-card-title>
          <div class="override-actions">
            <mat-form-field appearance="outline" class="w-300p mr-8 ml-16">
              <mat-label>Buscador</mat-label>
              <input matInput [(ngModel)]="txtBuscador" (keyup)="applyFilter($event,'INP')"
              placeholder="Ingrese la palabra a buscar" />
              <mat-icon *ngIf="txtBuscador.length === 0" matSuffix>search</mat-icon>
              <mat-icon *ngIf="txtBuscador.length > 0" class="clickable" matTooltip="Eliminar filtro"
              (click)="applyFilter('', 'EST')" matSuffix>close</mat-icon>
            </mat-form-field>
            <div class="override-buttons">
              <button mat-flat-button class="mr-10 animated fadeIn" color="primary" (click)="registerVisit()">
                <mat-icon>add</mat-icon> Registrar visita no programada
              </button>
              <button mat-mini-fab class="orange_primary_background white_font override_no_shadow mr-10" matTooltip="Actualizar datos" (click)="getActiveWorkOrders()">
                <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]="dataSource!" matSort class="animated fadeIn" 
          [style.display]="!isLoading && !hasError ? 'revert' : 'none'">
            <ng-container matColumnDef="ID">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
              <td mat-cell *matCellDef="let row">{{ row.IDORDEN }}</td>
            </ng-container>
            
            <ng-container matColumnDef="EQUIPO">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Equipamiento</th>
              <td mat-cell *matCellDef="let row">{{ row.EQUIPAMIENTO }}</td>
            </ng-container>
            
            <ng-container matColumnDef="FECINI">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de inicio</th>
              <td mat-cell *matCellDef="let row">{{ orderDate(row.FECHAINICIO) }}</td>
            </ng-container>
            
            <ng-container matColumnDef="FECFIN">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Fecha de término</th>
              <td mat-cell *matCellDef="let row">{{ orderDate(row.FECHATERMINO) }}</td>
            </ng-container>
            
            <ng-container matColumnDef="TIEEST">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Tiempo de inmovilización estimado</th>
              <td mat-cell *matCellDef="let row">{{ row.TIEMPOESTIMADO }} h</td>
            </ng-container>
            
            <ng-container matColumnDef="TIETOT">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Tiempo total estimado</th>
              <td mat-cell *matCellDef="let row">{{ row.TIEMPOTOTAL }} h</td>
            </ng-container>
            
            <ng-container matColumnDef="PRIORIDAD">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Prioridad</th>
              <td mat-cell *matCellDef="let row">
                <span style="font-weight: 500;" [style.color]="getFontColor(row.PRIORIDAD)">
                  {{ getPriorityStr(row.PRIORIDAD) }}
                </span>
              </td>
            </ng-container>
            
            <ng-container matColumnDef="TIPOACT">
              <th mat-header-cell *matHeaderCellDef mat-sort-header>Tipo activador</th>
              <td mat-cell *matCellDef="let row">{{ row.TIPOACTIVADOR }}</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="100%">
                <object data="assets/img/empty_data.svg" width="300"></object>
                <h2>Sin datos</h2>
              </td>
            </tr>
          </table>
        </div>
      </section>
      <mat-paginator [pageSizeOptions]="[10, 50, 100]" class="override-paginator"></mat-paginator>
    </mat-card>
  </div>
</div>