<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Órdenes de trabajo preventivo</div>
    </div>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">{{ action }} orden de trabajo preventivo</mat-card-title>
    <mat-card-content>
      <div class="form-order-container" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="orderFormGroup">
          <div class="section-divider">Configuración de activación</div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ fw_50: activCols == 2, fw_100: activCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tipo de activador</mat-label>
                <mat-select (valueChange)="getActivatorsByType(activatorType.value, null)" #activatorType formControlName="activatorTypeControl">
                  <mat-option value="CA">Calendario</mat-option>
                  <mat-option value="SI">Síntoma</mat-option>
                  <mat-option value="ME">Medida</mat-option>
                  <mat-option value="VA">Valor</mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['activatorTypeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_50: activCols == 2, fw_100: activCols == 1 }">
              <mat-progress-bar mode="indeterminate" *ngIf="loadingActivators"></mat-progress-bar>
              <mat-form-field class="w-100" appearance="outline" *ngIf="!loadingActivators">
                <mat-label>Activador</mat-label>
                <mat-select #activator (valueChange)="activatorChange(activator.value, activatorType.value)" formControlName="activatorControl">
                  <mat-option *ngFor="let item of activators" [value]="item.IDCONTADOR">
                    Activador #{{ item.IDCONTADOR }} - <span [ngClass]="{ red_primary_font: item.PRIORIDAD == '1', orange_primary_font: item.PRIORIDAD == '2', 
                    amber_primary_font: item.PRIORIDAD == '3', green_primary_font: item.PRIORIDAD == '4' }">
                      {{ getPriorityStr(item.PRIORIDAD) }}
                    </span> - {{ item.TIPOACTIVACION }}
                  </mat-option>
                  <mat-option value="CAN">Configurar activador nuevo</mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['activatorControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ fw_25: datesCols == 4, fw_50: datesCols == 2, fw_100: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Fecha de inicio</mat-label>
                <input matInput [matDatepicker]="startDate" formControlName="startDateControl" [max]="orderFormGroup.controls['endDateControl'].value">
                <mat-datepicker-toggle matIconSuffix [for]="startDate">
                  <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #startDate></mat-datepicker>
                <mat-error *ngIf="orderFormGroup.controls['startDateControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_25: datesCols == 4, fw_50: datesCols == 2, fw_100: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Hora de inicio</mat-label>
                <mat-select formControlName="startHourControl">
                  <mat-option *ngFor="let hour of hoursArr" [value]="hour">
                    {{ hour }}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['startHourControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_25: datesCols == 4, fw_50: datesCols == 2, fw_100: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Fecha de término</mat-label>
                <input matInput [matDatepicker]="endDate" formControlName="endDateControl" [min]="orderFormGroup.controls['startDateControl'].value">
                <mat-datepicker-toggle matIconSuffix [for]="endDate">
                  <mat-icon matDatepickerToggleIcon>arrow_drop_down</mat-icon>
                </mat-datepicker-toggle>
                <mat-datepicker #endDate></mat-datepicker>
                <mat-error *ngIf="orderFormGroup.controls['endDateControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_25: datesCols == 4, fw_50: datesCols == 2, fw_100: datesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Hora de término</mat-label>
                <mat-select formControlName="endHourControl">
                  <mat-option *ngFor="let hour of hoursArr" [value]="hour">
                    {{ hour }}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['endHourControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="w-100 activation-config">
              <span *ngIf="activatorType.value == '' && orderFormGroup.controls['activatorControl'].value == ''" class="not-configured">
                Aún no se ha seleccionado un tipo de activador.
              </span>
              <span *ngIf="activatorType.value != '' && orderFormGroup.controls['activatorControl'].value == ''" class="not-configured">
                Aún no se ha seleccionado ningún activador.
              </span>
              <span *ngIf="activatorType.value != '' && orderFormGroup.controls['activatorControl'].value != ''">
                {{ getActivatorConfigStr(activatorType.value) }}
              </span>
            </div>
          </div>
          <div class="section-divider">Configuración del plan de mantenimiento</div>
          <div class="form-row">
            <div class="form-cell w-100">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Equipamiento relacionado</mat-label>
                <mat-select #equipment (valueChange)="changeEquipmentTable(equipment.value)" formControlName="equipmentControl" >
                  <mat-option *ngFor="let equipment of equipments" [value]="equipment.CODIGO">
                    {{ equipment.FAMILI }} / {{ equipment.SUBFAM }} / {{ equipment.DENOMI }}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['equipmentControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <table mat-table [dataSource]="dataSource!" class="animated fadeIn">
                <ng-container matColumnDef="CODIGO">
                  <th mat-header-cell *matHeaderCellDef>Código</th>
                  <td mat-cell *matCellDef="let row" style="word-break: break-all;max-lines: 5;">{{ row.CODIGO }}</td>
                </ng-container>
                
                <ng-container matColumnDef="DENOMI">
                  <th mat-header-cell *matHeaderCellDef>Denominación</th>
                  <td mat-cell *matCellDef="let row">{{ row.DENOMI }}</td>
                </ng-container>
                
                <ng-container matColumnDef="FAMILI">
                  <th mat-header-cell *matHeaderCellDef>Familia</th>
                  <td mat-cell *matCellDef="let row">{{ row.FAMILI }}</td>
                </ng-container>
                
                <ng-container matColumnDef="SUBFAM">
                  <th mat-header-cell *matHeaderCellDef>Subfamilia</th>
                  <td mat-cell *matCellDef="let row">{{ row.SUBFAM }}</td>
                </ng-container>
                
                <ng-container matColumnDef="ESTADO">
                  <th mat-header-cell *matHeaderCellDef>Estado</th>
                  <td mat-cell *matCellDef="let row">{{ row.ESTADO }}</td>
                </ng-container>
                
                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef>Acciones</th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-mini-fab class="indigo_primary_background white_font no-shadow" [matMenuTriggerFor]="menu">
                      <mat-icon>settings</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                      <button mat-menu-item>
                        <mat-icon>visibility</mat-icon>
                        <span>Detalles del equipamiento</span>
                      </button>
                      <button mat-menu-item>
                        <mat-icon>description</mat-icon>
                        <span>Ver documentación</span>
                      </button>
                    </mat-menu>
                  </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 centre" colspan="100%">
                    No se encontró información del equipamiento.
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Descripción</mat-label>
                <textarea matInput style="resize: none;" rows="5" formControlName="descriptionControl" (input)="orderFormGroup.controls['descriptionControl'].markAsTouched()"></textarea>
                <mat-icon matSuffix matTooltip="Debe describirse claramente lo que hay que hacer en la orden de trabajo, cuáles son las áreas prioritarias y la secuencia de las actividades">info</mat-icon>
                <mat-error *ngIf="orderFormGroup.controls['descriptionControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['descriptionControl'].hasError('minlength')">
                  La descripción debe contener al menos 35 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="steps-container">
            <div class="steps-margin">
              <button mat-button (click)="addStep('new', null)" [disabled]="!selectTeamsEnabled">Añadir instrucción</button>
              <div class="no-steps" *ngIf="instructions.length == 0">Aún no se han añadido instrucciones</div>
              <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)" *ngIf="instructions.length > 0">
                <div class="example-box animated fadeIn" *ngFor="let item of instructions;let i = index" cdkDrag>
                  <div class="instruction-title" [matTooltip]="item.INSTRUCCION">{{ i + 1 }}.- {{ item.INSTRUCCION }}</div>
                  <div class="instruction-duration">{{ getRange(item.INICIO, item.FIN) }} &bull; {{ item.DURACION }} h</div>
                  <div class="instruction-actions">
                    <button mat-mini-fab class="override_no_shadow mr-8" color="primary" matTooltip="Editar" (click)="addStep('edit', item.ID)">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-mini-fab class="override_no_shadow" color="warn" matTooltip="Eliminar" (click)="deleteStep(item.ID, i + 1)">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="steps-label">Instrucciones*</div>
          </div>
          <div class="form-row mt-20">
            <div class="form-cell w-100">
              <!--<table mat-table [dataSource]="teamsDataSource!" class="animated fadeIn">
                <ng-container matColumnDef="EQUIPO">
                  <th mat-header-cell *matHeaderCellDef>Equipo</th>
                  <td mat-cell *matCellDef="let row">{{ row.NOMB }}</td>
                </ng-container>
                
                <ng-container matColumnDef="ESPECIALIDAD">
                  <th mat-header-cell *matHeaderCellDef>Especialidad</th>
                  <td mat-cell *matCellDef="let row">{{ row.ESP }}</td>
                </ng-container>
                
                <ng-container matColumnDef="OPERARIOS">
                  <th mat-header-cell *matHeaderCellDef>Número de operadores</th>
                  <td mat-cell *matCellDef="let row">
                    <mat-form-field appearance="outline" style="width: 192px;">
                      <input matInput (input)="validateInput(teamNum.value, row.ID)" #teamNum [id]="'OP-' + row.ID">
                    </mat-form-field>
                  </td>
                </ng-container>
                  
                <tr mat-header-row *matHeaderRowDef="teamsDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: teamsDisplayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%">
                    No se ha seleccionado ningún equipo.
                  </td>
                </tr>
              </table>-->
              <mat-form-field appearance="outline" class="w-100">
                <mat-label>Personal involucrado</mat-label>
                <mat-select multiple formControlName="staffControl">
                  <mat-optgroup label="Equipos de trabajo">
                    <mat-option *ngFor="let team of workTeams" [value]="team.WORKTEAM_ID + '-EQ'">
                      {{ team.NAME }} - {{ team.SPECIALITY }}
                    </mat-option>
                  </mat-optgroup>
                  <mat-optgroup label="Subcontratistas">
                    <mat-option *ngFor="let subcontratist of subcontratists" [value]="subcontratist.ID_SUBCONTRATIST + '-SU'">
                      {{ subcontratist.NAME }} - {{ subcontratist.SPECIALTY }}
                    </mat-option>
                  </mat-optgroup>
                  <mat-optgroup label="Empleados">
                    <mat-option *ngFor="let employee of employees" [value]="employee.ID_EMPLOYEE + '-EM'">
                      {{ employee.NAME }} - {{ employee.SPECIALITY }} - {{ employee.CONTRACT_TYPE }}
                    </mat-option>
                  </mat-optgroup>
                </mat-select>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ fw_33: timesCols == 3, fw_50: timesCols == 2, fw_100: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tiempo total estimado de la intervención</mat-label>
                <input matInput (input)="orderFormGroup.controls['totalTimeControl'].markAsTouched()" formControlName="totalTimeControl">
                <mat-hint>Tiempo expresado en horas</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['totalTimeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['totalTimeControl'].hasError('pattern')">
                  La cadena ingresada tiene un formato inválido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_33: timesCols == 3, fw_50: timesCols == 2, fw_100: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Tiempo estimado de inmovilización</mat-label>
                <input matInput (input)="verifyInmTime(inmTime.value)" formControlName="inmTimeControl" #inmTime>
                <mat-hint>Tiempo expresado en horas</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['inmTimeControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['inmTimeControl'].hasError('pattern')">
                  La cadena ingresada tiene un formato inválido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_33: timesCols == 3, fw_50: timesCols == 2, fw_100: timesCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Clasificación</mat-label>
                <input matInput #clasification (input)="verifyLength(clasification.value, 100)" formControlName="clasificationControl">
                <mat-hint align="end">{{ clasification.value.length }} / 100</mat-hint>
                <mat-error *ngIf="orderFormGroup.controls['clasificationControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
                <mat-error *ngIf="orderFormGroup.controls['clasificationControl'].hasError('maxlength')">
                  La longitud máxima de este campo es de 100 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell" [ngClass]="{ fw_50: toolsCols == 2, fw_100: toolsCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Herramientas requeridas</mat-label>
                <mat-select #toolsSel (valueChange)="toolsChange(toolsSel.value, partsSel.value)" multiple formControlName="toolsControl">
                  <mat-option value="SH">
                    Ninguna
                  </mat-option>
                  <mat-option *ngFor="let tool of tools" [value]="tool.ID" [disabled]="toolsSel.value.includes('SH')">
                    <span style="font-weight: 500;">
                      {{ tool.NOMB }}
                    </span> - {{ tool.MODE }} <span style="font-weight: 100;">
                      ({{ tool.CANTDISP }} disponibles)
                    </span>
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['toolsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell" [ngClass]="{ fw_50: toolsCols == 2, fw_100: toolsCols == 1 }">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Refacciones requeridas</mat-label>
                <mat-select #partsSel (valueChange)="toolsChange(toolsSel.value, partsSel.value)" multiple formControlName="sparePartsControl">
                  <mat-option value="SH">
                    Ninguna
                  </mat-option>
                  <mat-option *ngFor="let item of spareParts" [value]="item.ID" [disabled]="partsSel.value.includes('SH')">
                    <span style="font-weight: 500;">
                      {{ item.NOMB }}
                    </span> - {{ item.MODE }} <span style="font-weight: 100;">
                      ({{ item.CANTDISP }} disponibles)
                    </span>
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="orderFormGroup.controls['sparePartsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <table mat-table [dataSource]="toolsDataSource!" class="animated fadeIn">
                <ng-container matColumnDef="ITEM">
                  <th mat-header-cell *matHeaderCellDef>Herramienta / Refacción</th>
                  <td mat-cell *matCellDef="let row">{{ row.NOMB }} - {{ row.MODE }}</td>
                </ng-container>

                <ng-container matColumnDef="TIPO">
                  <th mat-header-cell *matHeaderCellDef>Tipo</th>
                  <td mat-cell *matCellDef="let row">{{ row.TYPE }}</td>
                </ng-container>

                <ng-container matColumnDef="CANTDISP">
                  <th mat-header-cell *matHeaderCellDef>Cantidad disponible</th>
                  <td mat-cell *matCellDef="let row">{{ row.CANTDISP }} {{ row.UNIT }}(s)</td>
                </ng-container>

                <ng-container matColumnDef="CANTNEC">
                  <th mat-header-cell *matHeaderCellDef>Cantidad requerida</th>
                  <td mat-cell *matCellDef="let row">
                    <mat-form-field appearance="outline" style="width: 192px;">
                      <button mat-icon-button matPrefix (click)="changeReq('rem', row.ID)">
                        <mat-icon>remove</mat-icon>
                      </button>
                      <input matInput style="text-align: center;" value="1" [id]="'cant-req-' + row.ID" (input)="validateCant(cantReq.value, row.ID)" #cantReq>
                      <button mat-icon-button matSuffix (click)="changeReq('add', row.ID)">
                        <mat-icon>add</mat-icon>
                      </button>
                    </mat-form-field>
                  </td>
                </ng-container>

                <ng-container matColumnDef="CANTRES">
                  <th mat-header-cell *matHeaderCellDef>Cantidad restante</th>
                  <td mat-cell *matCellDef="let row" [ngClass]="{ green_primary_font: isPositive(row.CANTDISP, row.ID), red_primary_font: !isPositive(row.CANTDISP, row.ID) }">
                    {{ calcRest(row.CANTDISP, row.ID) }} {{ row.UNIT }}(s)
                  </td>
                </ng-container>
                  
                <tr mat-header-row *matHeaderRowDef="toolsDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: toolsDisplayedColumns;"></tr>
        
                <tr class="mat-row" *matNoDataRow>
                  <td class="mat-cell centre" colspan="100%">
                    No se ha seleccionado ninguna herramienta o refacción.
                  </td>
                </tr>
              </table>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell attached w-100">
              <div class="attached-container">
                <div class="buttons-container">
                  <div class="attach-button indigo_primary_background" (click)="openFileUploader()" matRipple>
                    <mat-icon style="transform: scale(1);">attach_file_add</mat-icon>
                    <p style="margin-top: 0px;margin-bottom:0;font-size: 16px;">Añadir nuevo archivo</p>
                  </div>
                  <div class="attach-button indigo_primary_background" (click)="searchExistingFile()" matRipple>
                    <mat-icon style="transform: scale(1);">link</mat-icon>
                    <p style="margin-top: 0px;margin-bottom:0;font-size: 16px;">Añadir archivo existente</p>
                  </div>
                </div>
                <div class="attached-files">
                  <div *ngIf="attached.length == 0" class="no-files-attached">
                    Aún no se ha adjuntado ningún archivo
                  </div>
                  <div *ngIf="attached.length > 0" class="files-container">
                    <div *ngFor="let item of attached" class="file">
                      <div class="file-name">{{ item.name }}</div>
                      <div class="file-size">{{ item.size }}</div>
                      <div class="file-type"><span class="white_font" [ngClass]="{ blue_primary_background: item.type == 'Nuevo', 
                      teal_primary_background: item.type == 'Existente' }">
                        {{ item.type }}
                      </span></div>
                      <div class="file-actions" [ngClass]="{ file_actions_enabled: !deleteFilesDisabled, file_actions_disabled: deleteFilesDisabled }">
                        <a [ngClass]="{ red_primary_font: !deleteFilesDisabled, gray_primary_font: deleteFilesDisabled }" 
                        (click)="deleteFile(item.id, item.type!)">Eliminar</a>
                      </div>
                    </div>
                  </div>
                </div>
                <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)">
              </div>
            </div>
          </div>
          <div class="form-row">
            <div class="form-cell w-100">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Análisis presupuestario</mat-label>
                <textarea matInput style="resize: none;" rows="5" formControlName="analisisControl"></textarea>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>

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

      <div class="form-order-container" *ngIf="!isLoading && hasError">
        <div class="is-loading animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" style="transform: scale(4.5);">error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="openUploadMaintenancePlanDialog()" [disabled]="!registerOrderEnabled">Cargar plan desde MS Project</button>
      <button mat-button (click)="saveChanges()" [disabled]="!registerOrderEnabled">Guardar borrador</button>
      <button mat-button (click)="registerWorkOrder()" [disabled]="!registerOrderEnabled">Registrar orden</button>
    </mat-card-actions>
  </mat-card>
</div>