<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">Lista de intervenciones</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 }} contrato</mat-card-title>
    <mat-card-content>
      <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>

      <div class="form-order-container" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="formGroup">
          <div class="form-row">
            <!-- 100 => 12, 75 => 9, 67 => 8, 50 => 6, 42 => 5, 33 => 4, 25 => 3, 17 => 2, 8 => 1 -->
            <div class="form-cell pt-8" [ngClass]="{ fw_67: screenSize > 1390, fw_100: screenSize <= 1390 }">
              <mat-form-field appearance="outline">
                <mat-label>Nombre del contrato</mat-label>
                <input matInput placeholder="Ingrese el Nombre del Contrato" formControlName="name">
                <mat-error *ngIf="formGroup.controls['name'].hasError('required')">Este campo es obligatorio.</mat-error>
                <mat-error *ngIf="formGroup.controls['name'].hasError('maxlength')">La longitud máxima de este campo es de 100 caracteres.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_33: screenSize > 1390, fw_50: screenSize <= 1390 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Orden de trabajo relacionada</mat-label>
                <mat-select (valueChange)="workOrderChange(workOrder.value)" #workOrder formControlName="workOrder">
                  <mat-optgroup label="Mantenimiento preventivo">
                    <mat-option *ngFor="let prevOrder of preventiveOrders" [value]="prevOrder.ID + '-prev'">
                      {{ prevOrder.LABEL }}
                    </mat-option>
                  </mat-optgroup>
                  <mat-optgroup label="Mantenimiento correctivo">
                    <mat-option>PRUEBA</mat-option>
                  </mat-optgroup>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['workOrder'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_33: screenSize > 1390, fw_50: screenSize <= 1390 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Tipo de contrato</mat-label>
                <mat-select (valueChange)="changeContractType(contractType.value)" #contractType formControlName="contractType">
                  <mat-option value="Subcontratista">Subcontratista</mat-option>
                  <mat-option value="Interno">Interno</mat-option>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['contractType'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_33: screenSize > 1390, fw_50: screenSize <= 1390 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline" *ngIf="!loadingStaff">
                <mat-label>Denominación Interno</mat-label>
                <mat-select formControlName="denominationIntern">
                  <mat-option *ngFor="let intern of interns" [value]="intern.IDEMPLEADO">
                    {{ intern.NOMBREUSUARIO }} - 
                    <span *ngIf="intern.IDEQUIPO != null">{{ intern.NOMBREEQUIPO }} ({{ intern.IDEQUIPO }})</span>
                    <span *ngIf="intern.IDEQUIPO == null">Sin equipo</span>
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['denominationIntern'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
              <mat-progress-bar mode="indeterminate" *ngIf="loadingStaff"></mat-progress-bar>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_33: screenSize > 1390, fw_50: screenSize <= 1390 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline" *ngIf="!loadingStaff">
                <mat-label>Denominación Subcontratista</mat-label>
                <mat-select formControlName="denominationSubcontratist">
                  <mat-option *ngFor="let subcontratist of subcontratists" [value]="subcontratist.IDEMPLEADO">
                    {{ subcontratist.NOMBREUSUARIO }} - 
                    <span *ngIf="subcontratist.IDEQUIPO != null">{{ subcontratist.NOMBREEQUIPO }} ({{ subcontratist.IDEQUIPO }})</span>
                    <span *ngIf="subcontratist.IDEQUIPO == null">Sin equipo</span> - 
                    {{ subcontratist.RAZONSOCIAL }} ({{ subcontratist.REGIMENFISCAL }}) ({{ subcontratist.IDSUBCONTRATISTA }})
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['denominationSubcontratist'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
              <mat-progress-bar mode="indeterminate" *ngIf="loadingStaff"></mat-progress-bar>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_25: screenSize > 1200, fw_50: screenSize <= 1200 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Fecha de Inicio</mat-label>
                <input matInput [matDatepicker]="picker" formControlName="startDate" (dateChange)="datesRange()" #startDate [max]="maxDate">
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker touchUi #picker></mat-datepicker>
                <mat-error *ngIf="formGroup.controls['startDate'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_25: screenSize > 1200, fw_50: screenSize <= 1200 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Hora de Inicio</mat-label>
                <mat-select formControlName="startHour" (selectionChange)="hoursRange()">
                  <mat-option *ngFor="let hour of hours" [value]="hour.value">{{ hour.label }}</mat-option>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['startHour'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_25: screenSize > 1200, fw_50: screenSize <= 1200 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Fecha de Término</mat-label>
                <input matInput [matDatepicker]="picker2" formControlName="endDate" (dateChange)="datesRange()" #endDate [min]="minDate">
                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker touchUi #picker2></mat-datepicker>
                <mat-error *ngIf="formGroup.controls['endDate'].hasError('required')">Este campo es obligatorio.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_25: screenSize > 1200, fw_50: screenSize <= 1200 && screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Hora de Término</mat-label>
                <mat-select formControlName="endHour" (selectionChange)="hoursRange()">
                  <mat-option *ngFor="let hour of hours" [value]="hour.value">{{ hour.label }}</mat-option>
                </mat-select>
                <mat-error>La Hora de Término es Obligatoria.</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_50: screenSize > 760, fw_100: screenSize <= 760 }">
              <mat-form-field appearance="outline">
                <mat-label>Costo</mat-label>
                <input matInput formControlName="cost" min="0" [readonly]="enable == '1' ? false : true" type="number" class="example-right-align"
                placeholder="0.0">
                <span matTextPrefix>$&nbsp;</span>
                <mat-error>El Campo Costo es Obligatorio</mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell pt-8" [ngClass]="{ fw_50: screenSize > 760, fw_100: screenSize <= 760 }">
              <input type="file" name="file" id="file" class="hidden" #file (change)="checkFile($event)" accept="application/pdf,.jpg,.doc,.docx,.png">
              <button mat-stroked-button class="w-100 mb-20" (click)="file.click()" *ngIf="!isUploading" [disabled]="this.attached.length > 0">Adjuntar oficio</button>
              <div class="column-advices" *ngIf="isUploading">
                <p>Subiendo archivo...</p>
                <mat-progress-bar mode="buffer" class="w-100"></mat-progress-bar>
              </div>
            </div>
            <div class="form-cell pt-8 fw_100">
              <table mat-table [dataSource]="dataSource!" style="width:100%">
                <ng-container matColumnDef="ID">
                  <th mat-header-cell *matHeaderCellDef>#</th>
                  <td mat-cell *matCellDef="let row; let i = index">{{ i + 1 }}</td>
                </ng-container>

                <ng-container matColumnDef="NOMBRE">
                  <th mat-header-cell *matHeaderCellDef>Nombre del archivo</th>
                  <td mat-cell *matCellDef="let row">{{ row.name }}</td>
                </ng-container>

                <ng-container matColumnDef="PESO">
                  <th mat-header-cell *matHeaderCellDef>Tamaño del archivo</th>
                  <td mat-cell *matCellDef="let row">{{ row.size }}</td>
                </ng-container>

                <ng-container matColumnDef="ACCIONES">
                  <th mat-header-cell *matHeaderCellDef>Acciones</th>
                  <td mat-cell *matCellDef="let row">
                    <button mat-mini-fab color="warn" class="no-shadow ml-4" (click)="deleteFile(row.id)" [disabled]="disableDelete">
                      <mat-icon>delete</mat-icon>
                    </button>
                  </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" colspan="100%" style="text-align: center;">
                    Aún no se ha adjuntado nungún archivo
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="this.alert()" [disabled]="formGroup.invalid || isLoadingForm">
        <mat-icon>save</mat-icon> Registrar
      </button>
    </mat-card-actions>
  </mat-card>
</div>
<!-- CONTENEDOR PRINCIPAL -->
<!--<main class="main-container animated fadeIn" (window:resize)="onResize()">
  <- REGRESAR A LA PANTALLA ANTERIOR ->
  <header id="navigation" class="btn-navigate mb-8" style="width: 80% !important;">
    <div class="prev-page prevent-select indigo_primary_background  mat-elevation-z8" matRipple [routerLink]="['/sam/GPRS/intervention']">
      <mat-icon style="color: white">arrow_back</mat-icon>
      <div class="page-name ml-4">Lista de Intervenciones</div>
    </div>
  </header>
  <mat-card class="override-card-form override-elevation-z8">
    <section class="override-section">
      <nav class="override-nav">
        <mat-card-title class="mat-card-title centre" *ngIf="enable != '0'">Registro de Contrato</mat-card-title>
        <mat-card-title class="mat-card-title centre" *ngIf="enable == '0'">Detalles de Contrato</mat-card-title>
      </nav>
      <div class="ph-32">
        <mat-grid-list [formGroup]="formGroup" [cols]="12" rowHeight="82px">
          <mat-grid-tile colspan="8">
            <mat-form-field appearance="outline">
              <mat-label>Nombre del Contrato</mat-label>
              <input matInput placeholder="Ingrese el Nombre del Contrato" maxlength="100" [readonly]="enable == '0' ? true : false" formControlName="name">
              <mat-error>El Campo Nombre del Contrato es Obligatorio</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4" *ngIf="enable === '1'">
            <mat-form-field appearance="outline">
              <mat-label>Tipo de Contrato</mat-label>
              <mat-select (ngModelChange)="changeContractType()" formControlName="contractType">
                <mat-option value="Subcontratista">Subcontratista</mat-option>
                <mat-option value="Interno">Interno</mat-option>
              </mat-select>
              <mat-error>El Campo Tipo de Contrato es Obligatorio</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4" *ngIf="enable === '1'">
            <mat-form-field appearance="outline">
              <mat-label>Denominación Interno</mat-label>
              <mat-select formControlName="denominationIntern">
                <mat-option *ngFor="let intern of interns" [value]="intern.ID_EMPLOYEE">{{ intern.NAME }}</mat-option>
              </mat-select>
              <mat-error>El Campo Denominación Interno es Obligatorio</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4" *ngIf="enable === '1'">
            <mat-form-field appearance="outline">
              <mat-label>Denominación Subcontratista</mat-label>
              <mat-select formControlName="denominationSubcontratist">
                <mat-option *ngFor="let subcontratist of subcontratists" [value]="subcontratist.ID_EMPLOYEE">{{ subcontratist.NAME }}</mat-option>
              </mat-select>
              <mat-error>El Campo Denominación Subcontratista es Obligatorio</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4">
            <mat-form-field appearance="outline">
              <mat-label>Fecha de Inicio</mat-label>
              <input matInput [matDatepicker]="picker" [readonly]="enable == '1' ? false : true" formControlName="startDate"
              (dateChange)="datesRange()">
              <mat-datepicker-toggle matSuffix [for]="picker" *ngIf="enable == '1' ? true : false"></mat-datepicker-toggle>
              <mat-datepicker touchUi #picker></mat-datepicker>
              <mat-error>La Fecha de Inicio es Obligatoria.</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4" *ngIf="enable === '1'">
            <mat-form-field appearance="outline">
              <mat-label>Hora de Inicio</mat-label>
              <mat-select formControlName="startHour" (selectionChange)="hoursRange()">
                <mat-option *ngFor="let hour of hours" [value]="hour.value">{{ hour.label }}</mat-option>
              </mat-select>
              <mat-error>La Hora de Inicio es Obligatoria.</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4">
            <mat-form-field appearance="outline">
              <mat-label>Fecha de Término</mat-label>
              <input matInput [matDatepicker]="picker2" formControlName="endDate" [readonly]="enable == '1' ? false : true"
              (dateChange)="datesRange()">
              <mat-datepicker-toggle matSuffix [for]="picker2" *ngIf="enable == '1' ? true : false"></mat-datepicker-toggle>
              <mat-datepicker touchUi #picker2></mat-datepicker>
              <mat-error>La Fecha de Término es Obligatoria.</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="4" *ngIf="enable === '1'">
            <mat-form-field appearance="outline">
              <mat-label>Hora de Término</mat-label>
              <mat-select formControlName="endHour" (selectionChange)="hoursRange()">
                <mat-option *ngFor="let hour of hours" [value]="hour.value">{{ hour.label }}</mat-option>
              </mat-select>
              <mat-error>La Hora de Término es Obligatoria.</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="6">
            <mat-form-field appearance="outline">
              <mat-label>Costo</mat-label>
              <input matInput formControlName="cost" min="0" [readonly]="enable == '1' ? false : true" type="number" class="example-right-align"
              placeholder="0.0">
              <span matTextPrefix>$&nbsp;</span>
              <mat-error>El Campo Costo es Obligatorio</mat-error>
            </mat-form-field>
          </mat-grid-tile>
          <mat-grid-tile colspan="6" *ngIf="enable == '1' ? true : false">
            <input hidden type="file" name="documentsInput" id="documentsInput" #documentsInput style="width: calc(50% - 8px);" (change)="checkFile($event)"
            formControlName="documentsInput" accept="application/pdf,.jpg,.docx,.png">
            <button type="button" mat-stroked-button matTooltip="Seleccione 1 Archivo" (click)="documentsInput.click()" [disabled]="document.length == 1">
              Adjuntar Oficio
            </button>
          </mat-grid-tile>
        </mat-grid-list>
        <table *ngIf="document.length != 0" mat-table [dataSource]="dataSource!" style="padding: 0px 20px 0px 20px!important;">
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Nombre </th>
            <td mat-cell *matCellDef="let element"> {{element.name}} </td>
          </ng-container>
          <ng-container matColumnDef="size">
            <th mat-header-cell *matHeaderCellDef> Tamaño </th>
            <td mat-cell *matCellDef="let element"> {{element.size}} </td>
          </ng-container>
          <ng-container matColumnDef="type">
            <th mat-header-cell *matHeaderCellDef > Tipo Documento </th>
            <td mat-cell *matCellDef="let element"> {{element.type}} </td>
          </ng-container>
          <ng-container matColumnDef="action">
            <th mat-header-cell *matHeaderCellDef > Acciones </th>
            <td mat-cell *matCellDef="let element">
              <button mat-mini-fab color="warn" class="override_no_shadow mr-4" matTooltip="Eliminar Archivo" (click)="deleteFiles()">
                <mat-icon>delete</mat-icon>
              </button> 
            </td>
          </ng-container>
          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
      </div>
      <div style="padding: 0 32px 22px 32px;" align="end">
        <button mat-raised-button color="primary" class="override_no_shadow" (click)="this.alert()" *ngIf="enable == '1' ? true : false"
        [disabled]="formGroup.invalid">
          <mat-icon>save</mat-icon>Registrar
        </button>
      </div>
    </section>
  </mat-card>
</main>-->
