<div class="items-container" (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</div>
    </div>
  </div>
  <mat-card class="override-elevation-z8 prevent-select" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center;" class="pv-16">{{ action }} Orden</mat-card-title>
    <mat-card-content>
      <div class="order-form-container" [formGroup]="formGroup">
        <mat-grid-list [cols]="cols" rowHeight="82px">
          <mat-grid-tile>
            <div class="order-type-container">
              <h3 class="m-0">Tipo de orden</h3>
              <mat-button-toggle-group #group="matButtonToggleGroup" class="ml-8">
                <mat-button-toggle value="Unica" (click)="changeOrderType('unica')">Única</mat-button-toggle>
                <mat-button-toggle value="Periodica" (click)="changeOrderType('periodica')">Periódica</mat-button-toggle>
              </mat-button-toggle-group>
            </div>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Fecha de inicio</mat-label>
              <input matInput [matDatepicker]="picker" [min]="minDate" formControlName="fecIni">
              <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
              <mat-datepicker touchUi #picker></mat-datepicker>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('fecIni') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Hora de inicio</mat-label>
              <input matInput readonly (click)="openTimePicker()" formControlName="horIni">
              <button mat-icon-button matSuffix (click)="openTimePicker()" [disabled]="formGroup.controls.horIni.disabled">
                <mat-icon>schedule</mat-icon>
              </button>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('horIni') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Tiempo de inmovilización estimado</mat-label>
              <input matInput #timeInput (input)="verifyNumbers()" formControlName="inmTime">
              <mat-hint>Valor expresado en horas</mat-hint>
              <mat-icon matSuffix>timer</mat-icon>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('inmTime') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Frecuencia del mantenimiento</mat-label>
              <input matInput formControlName="frequency" [errorStateMatcher]="matcher">
              <mat-icon matSuffix>manage_history</mat-icon>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('frequency') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Periodo de mantenimiento</mat-label>
              <mat-select formControlName="period" [errorStateMatcher]="matcher">
                <mat-option value="unaVez">Una Vez</mat-option>
                <mat-option value="dias">Días</mat-option>
                <mat-option value="semanas">Semanas</mat-option>
                <mat-option value="meses">Meses</mat-option>
                <mat-option value="anios">Años</mat-option>
              </mat-select>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('period') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
        <mat-grid-list [cols]="cols" rowHeight="82px">
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Descripción de la OT</mat-label>
              <input matInput formControlName="description" [errorStateMatcher]="matcher">
              <mat-icon matSuffix>description</mat-icon>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('description') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Clasificación</mat-label>
              <input matInput formControlName="clasification" [errorStateMatcher]="matcher">
              <mat-icon matSuffix>list_alt</mat-icon>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('clasification') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Prioridad</mat-label>
              <mat-select formControlName="priority" [errorStateMatcher]="matcher">
                <mat-option value="Baja">Baja</mat-option>
                <mat-option value="Media">Media</mat-option>
                <mat-option value="Alta">Alta</mat-option>
              </mat-select>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('priority') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile>
            <mat-form-field appearance="outline" class="w-100">
              <mat-label>Equipamiento</mat-label>
              <mat-select formControlName="equipment" #equipment (valueChange)="updateTable(equipment.value)">
                <mat-option *ngFor="let equipment of equipments" [value]="equipment.CODIGO">
                  {{ equipment.FAMILI }} / {{ equipment.SUBFAM }} / {{ equipment.DENOMI }}
                </mat-option>
              </mat-select>
              <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('equipment') }}</mat-error>
            </mat-form-field>
          </mat-grid-tile>
        </mat-grid-list>
        <table mat-table [dataSource]="dataSource!" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
          <ng-container matColumnDef="CODIGO">
            <th mat-header-cell *matHeaderCellDef>Código</th>
            <td mat-cell *matCellDef="let row">{{ 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>
        <mat-form-field appearance="outline" class="w-100 mt-8">
          <mat-label>Análisis de la intervención</mat-label>
          <textarea matInput formControlName="analisis"></textarea>
          <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('analisis') }}</mat-error>
        </mat-form-field>
        <div [ngClass]="{ attached_container_horizontal: !verticalAttach, attached_container_vertical: verticalAttach }">
          <div [ngClass]="{ indigo_primary_background: attached.length < 3, white_font: attached.length < 3, attached_disabled: attached.length >= 3, 
          attach_enabled: attached.length < 3 }" class="attach-button prevent-select" (click)="openFileUploader()">
            <mat-icon>attach_file</mat-icon>
            <span>Adjuntar archivo</span>
          </div>
          <div class="attached-files-container">
            <div class="no-attached-files" *ngIf="attached.length == 0">Aún no se han adjuntado archivos.</div>
            <div *ngIf="attached.length > 0">
              <div class="attached-file prevent-select" *ngFor="let item of attached">
                <span class="file-name">{{ item.name }}</span>
                <span class="file-size">{{ item.size }}</span>
                <span class="delete-file red_primary_font" matRipple (click)="deleteFile(item.id)">Eliminar</span>
              </div>
            </div>
          </div>
          <input type="file" name="file" id="file" #file class="hidden" (change)="checkFile($event)">
        </div>
        <mat-form-field appearance="outline" class="w-100 mt-16">
          <mat-label>Especialidades requeridas</mat-label>
          <mat-select multiple (valueChange)="updateSpecialtiesTable(spec.value)" formControlName="specialties" #spec>
            <mat-option *ngFor="let item of specialties" [value]="item.ID">
              {{ item.NAME }}
            </mat-option>
          </mat-select>
          <mat-error *ngIf="formGroup.invalid">{{ controlErrorStr('specialties') }}</mat-error>
        </mat-form-field>
        <table mat-table [dataSource]="specialtiesDataSource" class="animated fadeIn" [style.display]="isLoading ? 'none' : 'revert'">
          <ng-container matColumnDef="ESPECIALIDAD">
            <th mat-header-cell *matHeaderCellDef>Especialidad</th>
            <td mat-cell *matCellDef="let row">{{ row.NAME }}</td>
          </ng-container>
          
          <ng-container matColumnDef="TIPO">
            <th mat-header-cell *matHeaderCellDef>Tipo</th>
            <td mat-cell *matCellDef="let row">
              <mat-form-field appearance="outline">
                <mat-select #type (valueChange)="changeControl(row.ID, type.value)">
                  <mat-option value="equipo">Equipo</mat-option>
                  <mat-option value="personal">Personal</mat-option>
                </mat-select>
              </mat-form-field>
              <input type="hidden" [id]="'type-' + row.ID">
            </td>
          </ng-container>
          
          <ng-container matColumnDef="PERSONAL">
            <th mat-header-cell *matHeaderCellDef>Equipo / Cantidad</th>
            <td mat-cell *matCellDef="let row">
              <mat-form-field appearance="outline" *ngIf="specialtiesSelected.get(row.ID) == 'personal'">
                <input matInput [id]="'pers-' + row.ID">
              </mat-form-field>
              <mat-form-field appearance="outline" *ngIf="specialtiesSelected.get(row.ID) == 'equipo'">
                <mat-select>
                  <mat-option>PRUEBA</mat-option>
                </mat-select>
                <input type="hidden" [id]="'equi-' + row.ID">
              </mat-form-field>
            </td>
          </ng-container>
          
                
          <tr mat-header-row *matHeaderRowDef="specialtiesDisplayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: specialtiesDisplayedColumns;"></tr>

          <tr class="mat-row" *matNoDataRow>
            <td class="mat-cell centre" colspan="100%">
              No se he seleccionado ninguna especialidad.
            </td>
          </tr>
        </table>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="saveOrder()">
        {{ isNew ? 'Registrar orden' : 'Guardar cambios' }}
      </button>
    </mat-card-actions>
  </mat-card>
</div>