<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;">Asignación del análisis presupuestario de la orden #{{ idOrder }}</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="analysis-column">
          <div class="analysis-item" *ngFor="let item of staffArr">
            <div class="analysis-item-header mb-8">
              <span style="font-weight: 500;">{{ item.TYPE }}</span> - {{ item.NAME }} - {{ item.SPEC }}.<span *ngIf="item.TYPE != 'EMPLEADO'"> Integrantes:</span>
            </div>
            <div class="analysis-item-content" *ngIf="item.PERS != null && item.PERS != undefined && item.PERS.length > 0">
              <div class="content-row" *ngFor="let conf of item.PERS;let i = index">
                <span class="mr-4 mb-20 ml-8">{{ i + 1 }}.- {{ conf.NAME }} -</span>
                <mat-form-field appearance="outline" style="width: 360px;">
                  <mat-label>Costo por hora</mat-label>
                  <input matInput type="number" class="right-align" [id]="'cost-' + conf.ID">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Horas de contrato</mat-label>
                  <input matInput type="number" [id]="'hour-' + conf.ID">
                </mat-form-field>
              </div>
            </div>
            <div class="analysis-item-content" *ngIf="item.PERS != null && item.PERS != undefined && item.TYPE != 'EMPLEADO' && item.PERS.length == 0">
              <div class="content-row">
                <span class="mr-4 mb-20 ml-8">Sin integrantes. Configuración individual -</span>
                <mat-form-field appearance="outline" style="width: 360px;">
                  <mat-label>Costo por hora</mat-label>
                  <input matInput type="number" class="right-align" [id]="'cost-' + item.ID">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Horas de contrato</mat-label>
                  <input matInput type="number" [id]="'hour-' + item.ID">
                </mat-form-field>
              </div>
            </div>
            <div class="analysis-item-content" *ngIf="item.TYPE == 'EMPLEADO'">
              <div class="content-row">
                <span class="mr-4 mb-20 ml-8">Configuración -</span>
                <mat-form-field appearance="outline" style="width: 360px;">
                  <mat-label>Costo por hora</mat-label>
                  <input matInput type="number" class="right-align" [id]="'cost-' + item.ID">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Horas de contrato</mat-label>
                  <input matInput type="number" [id]="'hour-' + item.ID">
                </mat-form-field>
              </div>
            </div>
          </div>
          <div class="analysis-item">
            <div class="analysis-item-header mb-8">
              Herramientas requeridas: <span style="font-weight: 500;" *ngIf="tools.length == 0">Ninguna.</span>
            </div>
            <div class="analysis-item-content" *ngIf="tools.length > 0">
              <div class="content-row" *ngFor="let tool of tools; let i = index">
                <span class="mr-8 mb-20">{{ i + 1 }}.- {{ tool.NOM }}, {{ tool.REQ }} {{ tool.UNIT }}(s) requerida(s)</span>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Precio unitario</mat-label>
                  <input matInput type="number" class="right-align" [id]="'tool-cost-' + tool.ID" #precUnit (input)="updateTotalCost(tool.ID, tool.TYPE, precUnit.value)">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <span class="mr-8 mb-20">Precio total: ${{ tool.COSTTOTAL }}</span>
              </div>
            </div>
          </div>
          <div class="analysis-item">
            <div class="analysis-item-header mb-8">
              Refacciones requeridas: <span style="font-weight: 500;" *ngIf="spareParts.length == 0">Ninguna.</span>
            </div>
            <div class="analysis-item-content" *ngIf="spareParts.length > 0">
              <div class="content-row" *ngFor="let part of spareParts; let i = index">
                <span class="mr-8 mb-20">{{ i + 1 }}.- {{ part.NOM }}, {{ part.REQ }} {{ part.UNIT }}(s) requerida(s)</span>
                <span class="mr-8 mb-20 ml-8">-</span>
                <mat-form-field appearance="outline" style="width: 240px;">
                  <mat-label>Precio unitario</mat-label>
                  <input matInput type="number" class="right-align" [id]="'tool-cost-' + part.ID" #precUnit (input)="updateTotalCost(part.ID, part.TYPE, precUnit.value)">
                  <span matTextPrefix>$&nbsp;</span>
                </mat-form-field>
                <span class="mr-8 mb-20 ml-8">-</span>
                <span class="mr-8 mb-20">Precio total: ${{ part.COSTTOTAL }}</span>
              </div>
            </div>
          </div>
          <mat-form-field appearance="outline" class="w-100">
            <mat-label>Comentarios extra</mat-label>
            <textarea rows="5" style="resize: none;" matInput [formControl]="extraComments"></textarea>
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button (click)="openOrderDetails()">Ver detalles</button>
      <button mat-button (click)="asignAnalysis()">Asignar análisis</button>
    </mat-card-actions>
  </mat-card>
</div>