<main class="main-container animated fadeIn prevent-select" (window:resize)="onResize()">

  <header id="navigation" class="btn-navigate mb-8">
    <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8" matRipple (click)="goBack()">
      <mat-icon style="color: white">arrow_back</mat-icon>
      <div class="page-name ml-4">Regresar</div>
    </div>
  </header>

  <mat-card class="override-card override-elevation-z8">
    <mat-card-title class="centre pv-16">Registro de visita no programada</mat-card-title>
    <div class="card-content">
      <mat-grid-list cols="12" rowHeight="92px" [formGroup]="formGroup">
        <mat-grid-tile colspan="12">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Equipamiento</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="formGroup.controls['equipmentControl'].hasError('required')">
              Este campo es obligatorio.
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12" rowspan="2">
          <div class="visit-table-container">
            <table mat-table [dataSource]="equipmentDataSource!">
              <ng-container matColumnDef="CODIGO">
                <th mat-header-cell *matHeaderCellDef>Código del equipamiento</th>
                <td mat-cell *matCellDef="let row">{{ row.CODIGO }}</td>
              </ng-container>
              
              <ng-container matColumnDef="DENOMI">
                <th mat-header-cell *matHeaderCellDef>Nombre</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="no-shadow" color="primary">
                    <mat-icon>settings</mat-icon>
                  </button>
                </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>
        </mat-grid-tile>
        <mat-grid-tile colspan="12">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Personal involucrado</mat-label>
            <mat-select multiple #teamsCtrl (valueChange)="changeTeamsTable(teamsCtrl.value)" formControlName="personalControl">
              <mat-option *ngFor="let person of teams" [value]="person.ID">
                <span style="font-weight: 500;">{{ person.NOMB }}</span> - {{ person.ESP }}
              </mat-option>
            </mat-select>
            <mat-error *ngIf="formGroup.controls['personalControl'].hasError('required')">
              Este campo es obligatorio.
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12" rowspan="2">
          <div class="visit-table-container">
            <table mat-table [dataSource]="personalDataSource!">
              <ng-container matColumnDef="EMPLEADO">
                <th mat-header-cell *matHeaderCellDef>Nombre</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>

              <tr mat-header-row *matHeaderRowDef="personalDisplayedColumns"></tr>
              <tr mat-row *matRowDef="let row; columns: personalDisplayedColumns"></tr>
    
              <tr class="mat-row" *matNoDataRow>
                <td class="mat-cell centre" colspan="100%">
                  No se ha seleccionado ningún personal.
                </td>
              </tr>
            </table>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="6">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Herramientas necesarias</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 obligatorio.
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="6">
          <mat-form-field class="w-100" appearance="outline">
            <mat-label>Refacciones necesarias</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 obligatorio.
            </mat-error>
          </mat-form-field>
        </mat-grid-tile>
        <mat-grid-tile colspan="12" rowspan="2">
          <div class="visit-table-container">
            <table mat-table [dataSource]="toolsDataSource!">
              <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 ningún material.
                </td>
              </tr>
            </table>
          </div>
        </mat-grid-tile>
        <mat-grid-tile colspan="12" rowspan="2">
          <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>
        </mat-grid-tile>
      </mat-grid-list>
    </div>
    <mat-card-actions align="end">
      <button mat-button [disabled]="formGroup.invalid || isSaving" (click)="registerVisit()">Registrar visita</button>
    </mat-card-actions>
  </mat-card>
</main>