<div class="items-container animated fadeIn prevent-select" (window:resize)="onResize()">
  <div id="navigation" class="mb-8">
    <div class="prev-page prevent-select raised-button-background mat-elevation-z8" (click)="goBack(1)" matRipple>
      <mat-icon style="color: white;">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </div>
  <mat-card class="override-elevation-z8" style="width: 100%; height: 100%;">
    <mat-card-title style="text-align: center; margin: 15px 0;">Registro de visita no programada</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="has-error animated fadeIn fast">
          <mat-icon class="red_primary_font mb-40" >error</mat-icon>
          <h3>{{ errorStr }}</h3>
        </div>
      </div>
      
      <div class="form-order-container animated fadeIn pt-4" *ngIf="!isLoading && !hasError">
        <div class="form-column" [formGroup]="formGroup"> 
          <div class="form-row">
            <div class="form-cell C12">
              <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.TIPO }} - {{ equipment.MODELO }}
                  </mat-option>
                </mat-select>
                <mat-error *ngIf="formGroup.controls['equipmentControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell C12">
              <table mat-table [dataSource]="equipmentDataSource!" class="animated fadeIn">
                <ng-container matColumnDef="EQUIPO">
                  <th mat-header-cell *matHeaderCellDef>Equipamiento</th>
                  <td mat-cell *matCellDef="let row" style="word-break: break-all;max-lines: 5;">
                    {{ row.TIPO }} - {{ row.MODELO }}
                  </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="gray_dark_font transparent_background no_shadow" [matMenuTriggerFor]="menu">
                      <mat-icon>more_vert</mat-icon>
                    </button>
                    <mat-menu #menu="matMenu">
                      <button mat-menu-item (click)="openEquipmentDetails(row.CODIGO)">
                        <mat-icon>visibility</mat-icon>
                        <span>Detalles del equipamiento</span>
                      </button>
                      <button mat-menu-item (click)="openEquipmentDocuments(row.CODIGO)">
                        <mat-icon>description</mat-icon>
                        <span>Ver documentación</span>
                      </button>
                    </mat-menu>
                  </td>
                </ng-container>
                
                <tr mat-header-row *matHeaderRowDef="equipmentDisplayedColumns"></tr>
                <tr mat-row *matRowDef="let row; columns: equipmentDisplayedColumns;"></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 class="form-cell C12">
              <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-error *ngIf="formGroup.controls['staffControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell C06">
              <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="formGroup.controls['toolsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell C06">
              <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="formGroup.controls['sparePartsControl'].hasError('required')">
                  Este campo es requerido.
                </mat-error>
              </mat-form-field>
            </div>
            <div class="form-cell C12">
              <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 class="form-cell C12">
              <mat-form-field class="w-100" appearance="outline">
                <mat-label>Comentarios iniciales</mat-label>
                <textarea matInput rows="5" class="avoid-resize" formControlName="comments" (input)="formGroup.controls['comments'].markAsTouched()"></textarea>
                <mat-error *ngIf="formGroup.controls['comments'].hasError('required')">
                  Este campo es obligatorio.
                </mat-error>
                <mat-error *ngIf="formGroup.controls['comments'].hasError('minlength')">
                  La longitud mínima de este campo es de 35 caracteres.
                </mat-error>
              </mat-form-field>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-button [disabled]="formGroup.invalid || isSaving" (click)="registerVisit()">Registrar visita</button>
    </mat-card-actions>
  </mat-card>
</div>