conformidad.componente.html

<div class="flex justify-center w-full my-5">
  <div class="border border-black w-[90vw] md:w-3/4 flex justify-center items-center shadow-lg h-12 rounded-lg bg-yellow-300">
    <label class="font-bold text-lg md:text-2xl">HOJA DE RUTA</label>
  </div>
</div>

<div class="body flex flex-col items-center text-[13px] md:text-[18px] relative mx-2 my-5 pb-5 md:mx-0">

  <div class="flex flex-col items-center text-xs md:text-base mx-2 my-5 pb-5 md:mx-0">
    <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] shadow-xl w-full md:w-[75vw]">
      <mat-card-header class="flex flex-col items-start w-full">
        <label class="text-base md:text-lg font-bold">DATOS PERSONALES</label>
      </mat-card-header>
      <mat-card-content class="w-full my-2.5" [formGroup]="datos_personal">
        <!------------------------------------------------------------------------- DATOS GENERALES ------------------------------------------------------------------------------>
        <div class="flex flex-row gap-4 mb-4">
          <div class="basis-2/4">
            <div class="flex flex-row gap-x-2" *ngFor="let personal of listPersonal">
              <mat-form-field class="w-full" appearance="outline" floatLabel="always">
                <mat-label>Técnico responsable</mat-label>
                <mat-select formControlName="tecnicoPersonal{{personal.index}}" placeholder="[Seleccionar técnico]" (selectionChange)="onEventoSeleccionTecnico($event,personal)" required>
                  <mat-option *ngFor="let option of this.personal_list" [value]="option?.codper">
                    {{option?.personal}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field class="w-full" appearance="outline" floatLabel="always">
                <mat-label>Especialidad</mat-label>
                <input formControlName="areaPersonal{{personal.index}}" matInput placeholder="[Área designada]" value="" readonly>
              </mat-form-field>
            </div>

             <!-- agregar botones de agregar o disminuir Tecnico responsable -->
            <div class="flex flex-row gap-x-2">
              <div class="example-button-container">
                <button (click)="onEventoAgregarPersonal()" mat-fab aria-label="Example icon button with a delete icon">
                  <mat-icon>add</mat-icon>
                </button>
              </div>
              <div class="example-button-container">
                <button (click)="onEventoQuitarPersonal()" mat-fab aria-label="Example icon button with a heart icon">
                  <mat-icon>delete</mat-icon>
                </button>
              </div>
              <mat-label class="font-bold text-blue-600 text-lg" [ngClass]="{'fade-out': personalFading}" [innerText]="personalText"></mat-label>
            </div>
          </div>

          <div class="basis-2/4">
            <div class="flex flex-row gap-x-2">
              <mat-form-field class="w-full" appearance="outline" floatLabel="always">
                <mat-label>Sede designada</mat-label>
                <mat-select formControlName="sedePersonal" placeholder="[Seleccionar sede]" required>
                  <mat-option *ngFor="let option of this.sede_list" [value]="option?.value">
                    {{option?.viewValue}}
                  </mat-option>
                </mat-select>
              </mat-form-field>

              <mat-form-field class="w-full" appearance="outline" floatLabel="always">
                <mat-label>Rango de fechas</mat-label>
                <mat-date-range-input  [rangePicker]="picker">
                  <input matStartDate formControlName="minFechaTrabajo" placeholder="Fecha inicial" readonly >
                  <input matEndDate formControlName="maxFechaTrabajo" placeholder="Fecha Fin" readonly>
                </mat-date-range-input>
                <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="datos_personal.controls['minFechaTrabajo'].disabled"></mat-datepicker-toggle>
                <mat-date-range-picker #picker></mat-date-range-picker>
              </mat-form-field>
            </div>
          </div>
        </div>
        <!------------------------------------------------------------------------- DATOS GENERALES ------------------------------------------------------------------------------>


        <!------------------------------------------------------------------------- LISTADO DE PASAJES ---------------------------------------------------------------------------->
        <!-- <div class="flex flex-row gap-4">
          <div class="sm:basis-3/12 w-full">
            <mat-form-field class="w-full sm:w-[20rem]" appearance="outline" floatLabel="always">
              <mat-label>Pasaje designado : </mat-label>
              <input matInput formControlName="pasajeTotal" placeholder="Calculo final del pasaje" value="" readonly>
            </mat-form-field>
          </div>

          <div class="sm:basis-9/12 w-full">
            <div class="grid gap-4 grid-cols-1 sm:grid-cols-2">
              <mat-label class="text-[1.1em] font-bold mb-4 flex items-center">LISTADO DE PASAJES
                <mat-icon>attach_money</mat-icon>
              </mat-label>
              <button mat-raised-button [ngStyle]="{'visibility': activarPasajes ? 'visible' : 'hidden'}" [disabled]="!activarPasajes" (click)="onEventoNuevoPasaje($event)">
                <mat-icon>add</mat-icon>
                <b>Agregar pasaje</b>
              </button>
            </div>

            <div class="overflow-x-auto">
              <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-full">
                <ng-container matColumnDef="lugarOrigen">
                  <th mat-header-cell *matHeaderCellDef class="w-1/5"> LUGAR DE ORIGEN </th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.isNew; else displayOrigen">
                      <mat-form-field [formGroup]="datos_lugarOrigen" appearance="outline">
                        <mat-select formControlName="lugarOrigen{{element.index}}" placeholder="[Seleccionar de origen]" required>
                          <mat-option *ngFor="let option of this.sede_list" [value]="option?.value">
                            {{option?.viewValue}}
                          </mat-option>
                        </mat-select>
                      </mat-form-field>
                    </ng-container>
                    <ng-template #displayOrigen>
                      {{element.lugarOrigen}}
                    </ng-template>
                  </td>
                </ng-container>

                <ng-container matColumnDef="lugarDestino">
                  <th mat-header-cell *matHeaderCellDef class="w-1/5"> LUGAR DESTINO </th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.isNew; else displayOrigen">
                      <mat-form-field appearance="outline">
                        <input matInput placeholder="[Lugar de Destino]" [value]="lugarDestinoPasaje" readonly>
                      </mat-form-field>
                    </ng-container>
                    <ng-template #displayOrigen>
                      {{element.lugarDestino}}
                    </ng-template>
                  </td>
                </ng-container>

                <ng-container matColumnDef="monto">
                  <th mat-header-cell *matHeaderCellDef class="w-1/10"> MONTO </th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.isNew; else displayOrigen">
                      <mat-form-field [formGroup]="datos_pasajeAcumulado" appearance="outline">
                        <input matInput formControlName="montoPasaje{{element.index}}" soloNumeros="decimal" placeholder="[Monto]" value="" maxlength="6" (blur)="formatMontoPasaje(this.datos_pasajeAcumulado,'montoPasaje'+element.index)">
                      </mat-form-field>
                    </ng-container>
                    <ng-template #displayOrigen>
                      {{element.monto}}
                    </ng-template>
                  </td>
                </ng-container>

                <ng-container matColumnDef="fecha">
                  <th mat-header-cell *matHeaderCellDef class="w-1/5"> FECHA </th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.isNew; else displayOrigen">
                      <mat-form-field [formGroup]="datos_fechaPasaje" appearance="outline">
                        <input matInput [matDatepicker]="fechaPasaje" formControlName="fechaPasaje{{element.index}}" [min]="minFechaLimite" [max]="maxFechaLimite">
                        <mat-hint>DD/MM/YYYY</mat-hint>
                        <mat-datepicker-toggle matIconSuffix [for]="fechaPasaje"></mat-datepicker-toggle>
                        <mat-datepicker #fechaPasaje></mat-datepicker>
                      </mat-form-field>
                    </ng-container>
                    <ng-template #displayOrigen>
                      {{formatoFecha(element.fecha)}}
                    </ng-template>
                  </td>
                </ng-container>

                <ng-container matColumnDef="accion">
                  <th mat-header-cell *matHeaderCellDef class="w-3/10"> ACCIÓN </th>
                  <td mat-cell *matCellDef="let element">
                    <ng-container *ngIf="element.acciones; else sinAcciones">
                      <ng-container *ngIf="element.isNew; else accionesEditar">
                        <button mat-icon-button (click)="onEventoConfirmarPasaje($event, element)">
                          <mat-icon>check_circle</mat-icon>
                        </button>
                        <button mat-icon-button (click)="onEventoCancelarPasaje($event, element)">
                          <mat-icon>cancel</mat-icon>
                        </button>
                      </ng-container>
                      <ng-template #accionesEditar>
                        <button mat-icon-button (click)="onEventoEditarPasaje($event, element)">
                          <mat-icon>edit</mat-icon>
                        </button>
                        <button mat-icon-button (click)="onEventoEliminarPasaje($event, element)">
                          <mat-icon>delete</mat-icon>
                        </button>
                      </ng-template>
                    </ng-container>
                    <ng-template #sinAcciones></ng-template>
                  </td>
                </ng-container>

                <tr mat-header-row *matHeaderRowDef="columnasPasaje"></tr>
                <tr mat-row *matRowDef="let row; columns: columnasPasaje;"></tr>
              </table>
            </div>
          </div>
        </div> -->
        <!------------------------------------------------------------------------- LISTADO DE PASAJES ---------------------------------------------------------------------------->

      </mat-card-content>
    </mat-card>
  </div>
  <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[95vw] sm:w-[90vw] md:w-[75vw]">
    <mat-card-header class="flex flex-col items-start w-full">
      <label class="text-[1.1em] font-bold">
        SERVICIOS PRESTADOS
      </label>
    </mat-card-header>
    <mat-card-content class="w-full my-2.5">
      <div class="div-serviocisPrestados divisionGeneral" [formGroup]="datos_servicio">
        <div class="servicio-descripcion">
          <div class="flex flex-col md:flex-row gap-5 pb-5">
            <div class="w-full md:w-1/5">
              <mat-form-field class="w-full" appearance="outline" floatLabel="always">
                <mat-label>Listado de Requerimientos</mat-label>
                <input type="text" placeholder="Buscar requerimiento" matInput #inputBusqueda formControlName="busquedaReq" [matAutocomplete]="auto" maxlength="9"
                       (input)="onBusquedaRequerimiento($event)">
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onEventSeleccion($event)">
                  <mat-option *ngFor="let option of requerimientosFiltrados" [value]="option.codigo">
                    {{ option.numero }}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
              <mat-label class="font-bold text-blue-600 text-lg" [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
            </div>

            <div class="grid grid-cols-2 md:grid-cols-5 gap-4 w-full md:w-4/5">
              <div class="contenedorRequerimiento" *ngFor="let card of listRequerimientos">
                <mat-card>
                  <mat-card-content>
                    <mat-card-subtitle class="text-base font-bold">{{ card.titulo }}</mat-card-subtitle>
                    <div class="w-fit py-2 px-3 flex space-x-4">
                      <button mat-fab aria-label="Eliminar" matTooltip="Eliminar" matTooltipPosition="above" (click)="deleteRequerimiento(card.id)">
                        <mat-icon class="mat-icon-small">delete</mat-icon>
                      </button>

                      <button mat-fab aria-label="Información" matTooltip="Información" matTooltipPosition="above" (click)="infoRequerimiento(card.codigo)">
                        <mat-icon class="mat-icon-small">info</mat-icon>
                      </button>
                    </div>
                  </mat-card-content>
                </mat-card>
              </div>
            </div>
          </div>

          <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
            <div>
              <mat-form-field class="w-full">
                <mat-label>DESCRIPCIÓN DEL PROBLEMA</mat-label>
                <textarea matInput placeholder="Breve descripción sobre los problemas encontrados en la sede" formControlName="descripcionServicio"
                          cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="10" [required]="false"></textarea>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field class="w-full">
                <mat-label>DESCRIPCIÓN DE LA CAUSA</mat-label>
                <textarea matInput placeholder="Breve descripción sobre las causas del problema" formControlName="causaServicio"
                          cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="10" [required]="false"></textarea>
              </mat-form-field>
            </div>
          </div>
        </div>

        <div class="grid grid-flow-col md:grid-cols-2 gap-5">
          <div>
            <div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIAS DEL PROBLEMA: *</b></div>
            <button mat-fab class="!w-full" [color]="'blue'" (click)="file1.click()">
              <mat-label>SUBIR EVIDENCIA DEL PROBLEMA</mat-label>
              <mat-icon>file_open</mat-icon>
            </button>
            <input type="file" #file1 (change)="onEventoSubirArchivo($event)" class="hidden" multiple accept="image/png">
            <br>
            <div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
              <div *ngIf="archivo.tipoEvidencia === 1" class="flex w-full">
                <p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
                <div class="w-2/4 grid grid-cols-3 gap-4">
                  <button (click)="gestionArchivos(i,1,archivo.file)"><mat-icon>info</mat-icon></button>
                  <button (click)="seleccionarInput(i,1)"><mat-icon>edit</mat-icon></button>
                  <input type="file" #fileEditar1 (change)="gestionArchivos(i,2,$event)" class="hidden" multiple accept="image/png">
                  <button (click)="gestionArchivos(i,3)"><mat-icon>delete</mat-icon></button>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div><b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIAS DE SOLUCIONES: *</b></div>
            <button mat-fab class="!w-full" [color]="'blue'" (click)="file2.click()">
              <mat-label>SUBIR EVIDENCIA DE LA SOLUCIÓN</mat-label>
              <mat-icon>file_open</mat-icon>
            </button>
            <input type="file" #file2 (change)="onEventoSubirArchivo($event,2)" class="hidden" multiple accept="image/png">
            <br>
            <div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex mt-2">
              <div *ngIf="archivo.tipoEvidencia === 2" class="flex w-full">
                <p class="w-2/4">{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true }}</p>
                <div class="w-2/4 grid grid-cols-3 gap-4">
                  <button (click)="gestionArchivos(i,1,archivo.file,2)"><mat-icon>info</mat-icon></button>
                  <button (click)="seleccionarInput(i,2)"><mat-icon>edit</mat-icon></button>
                  <input type="file" #fileEditar2 (change)="gestionArchivos(i,2,$event,2)" class="hidden" multiple accept="image/png">
                  <button (click)="gestionArchivos(i,3,2)"><mat-icon>delete</mat-icon></button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] sm:w-[85vw] md:w-[75vw]">
    <mat-card-header class="flex flex-col items-start w-full">
      <label class="text-[1.1em] font-bold">
        TRABAJOS PRESTADOS
      </label>
    </mat-card-header>
    <mat-card-content class="w-full my-2.5">
      <div class="div-trabajosPrestados divisionGeneral" [formGroup]="datos_trabajo">
        <label class="font-bold text-[1.2rem]">TIPO DE TRABAJO:</label>
        <mat-form-field class="w-full md:w-1/2">
          <mat-label>Seleccionar tipo de trabajo</mat-label>
          <mat-select formControlName="tipoTrabajo">
            @for (tipoT of listTipoTrabajo; track tipoT) {
              <mat-option [value]="tipoT.value">{{ tipoT.viewValue }}</mat-option>
            }
          </mat-select>
        </mat-form-field>

        <div class="w-full mt-5">
          <mat-form-field class="w-full">
            <mat-label>DESCRIPCIÓN DEL TRABAJO</mat-label>
            <textarea matInput placeholder="Breve descripción del trabajo realizado" formControlName="descripcionTrabajo"
                      cdkTextareaAutosize cdkAutosizeMinRows="3" cdkAutosizeMaxRows="10" [required]="false"></textarea>
          </mat-form-field>
        </div>
      </div>
    </mat-card-content>
  </mat-card>

  <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] sm:w-[85vw] md:w-[75vw]" [formGroup]="existeMaterialS">
    <mat-card-header class="flex justify-center items-center gap-x-4 w-full mb-4">
      <mat-label class="flex items-center text-[1.1em] font-bold">
        MATERIAL SOBRANTE
      </mat-label>
      <mat-button-toggle-group formControlName="existeMaterial" aria-label="Existe material sobrante" value="0">
        <mat-button-toggle value="1">SI</mat-button-toggle>
        <mat-button-toggle value="0">NO</mat-button-toggle>
      </mat-button-toggle-group>
    </mat-card-header>

    <!-- Mostrar componente solo si existeMaterial es "1" -->
    <ng-container *ngIf="existeMaterialS.get('existeMaterial')?.value === '1'">
      <!-- Componente a mostrar -->
      <mat-card-content class="w-full">
        <ordensalida-component></ordensalida-component>
      </mat-card-content>
    </ng-container>
  </mat-card>

  <div class="mt-4 flex flex-col">
    <button mat-fab extended (click)="gestionConformidad()">
      <mat-icon>app_registration</mat-icon>
      REGISTRO CONFORMIDAD
    </button>
  </div>
  <!--
    <mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] md:w-[75vw]">
        <mat-card-header class="flex flex-col items-start w-full">
        <label class="text-[1.1em] font-bold">
          DATOS PERSONALES
        </label>
      </mat-card-header>
      <mat-card-content class="w-full my-2.5">
          <div class="flex flex-row gap-x-4" [formGroup]="datos_personal">
            <mat-form-field class="basis-1/4" appearance="outline" floatLabel="always">
              <mat-label>Técnico responsable</mat-label>
              <mat-select formControlName="tecnicoPersonal" placeholder="[Seleccionar técnico]" (selectionChange)="onEventoSeleccionTecnico($event)" required>
                <mat-option *ngFor="let option of this.personal_list" [value]="option?.codper">
                  {{option?.personal}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="basis-1/4" appearance="outline" floatLabel="always">
              <mat-label>Área designada</mat-label>
              <input formControlName="areaPersonal" matInput placeholder="[Área designada]" value="" readonly>
            </mat-form-field>
            <mat-form-field class="basis-1/4" appearance="outline" floatLabel="always">
              <mat-label>Sede designada : </mat-label>
              <mat-select formControlName="sedePersonal" placeholder="[Seleccionar sede]" required>
                <mat-option *ngFor="let option of this.sede_list" [value]="option?.codlocal">
                  {{option?.deslocal}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field class="basis-1/4" appearance="outline" floatLabel="always">
              <mat-label>Rango de fechas :  </mat-label>
              <mat-date-range-input  [rangePicker]="picker">
                <input matStartDate formControlName="minFechaTrabajo" placeholder="Fecha inicial" readonly >
                <input matEndDate formControlName="maxFechaTrabajo" placeholder="Fecha Fin" readonly>
              </mat-date-range-input>
              <mat-datepicker-toggle matIconSuffix [for]="picker" [disabled]="datos_personal.controls['minFechaTrabajo'].disabled"></mat-datepicker-toggle>
              <mat-date-range-picker #picker></mat-date-range-picker>

            </mat-form-field>
          </div>

          <div class="flex flex-row gap-x-4">
            <div class="basis-3/12">
              <mat-form-field [formGroup]="datos_personal" style="width: 20rem" appearance="outline" floatLabel="always">
                <mat-label>Pasaje designado : </mat-label>
                <input matInput formControlName="pasajeTotal"  placeholder="Calculo final del pasaje" value="" readonly>
              </mat-form-field>
            </div>
            <div class="basis-9/12 ">
              <div class="grid gap-4 grid-cols-2">
                <mat-label class="text-[1.1em] font-bold mb-4" style="display: flex;align-items: center;margin: unset">LISTADO DE PASAJES <mat-icon>attach_money</mat-icon> </mat-label>
                <button mat-raised-button  [ngStyle]="{'visibility': activarPasajes ? 'visible' : 'hidden'}" [disabled]="!activarPasajes" (click)="onEventoNuevoPasaje($event)">
                  <mat-icon>add</mat-icon>
                  <b>Agregar pasaje</b>
                </button>
              </div>
              <div>
                <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
                  <ng-container matColumnDef="lugarOrigen">
                    <th mat-header-cell *matHeaderCellDef style="width: 20%"> LUGAR DE ORIGEN </th>
                    <td mat-cell *matCellDef="let element">
                      <ng-container *ngIf="element.isNew; else displayOrigen">
                        <mat-form-field [formGroup]="datos_lugarOrigen" appearance="outline" floatLabel="always">
                          <mat-select formControlName="lugarOrigen{{element.index}}" placeholder="[Seleccionar de origen]" required>
                            <mat-option *ngFor="let option of this.sede_list" [value]="option?.codlocal">
                              {{option?.deslocal}}
                            </mat-option>
                          </mat-select>
                        </mat-form-field>
                      </ng-container>
                      <ng-template #displayOrigen>
                        {{element.lugarOrigen}}
                      </ng-template>
                    </td>
                  </ng-container>

                  <ng-container matColumnDef="lugarDestino">
                    <th mat-header-cell *matHeaderCellDef style="width: 20%"> LUGAR DESTINO </th>
                    <td mat-cell *matCellDef="let element">
                      <ng-container *ngIf="element.isNew; else displayOrigen">
                        <mat-form-field appearance="outline">
                          <input matInput placeholder="[Lugar de Destino]" [value]="lugarDestinoPasaje" readonly>
                        </mat-form-field>
                      </ng-container>
                      <ng-template #displayOrigen>
                        {{element.lugarDestino}}
                      </ng-template>
                    </td>
                  </ng-container>

                  <ng-container matColumnDef="monto">
                    <th mat-header-cell *matHeaderCellDef style="width: 10%"> MONTO </th>
                    <td mat-cell *matCellDef="let element">
                      <ng-container *ngIf="element.isNew; else displayOrigen">
                        <mat-form-field [formGroup]="datos_pasajeAcumulado" appearance="outline">
                          <input matInput formControlName="montoPasaje{{element.index}}" soloNumeros placeholder="[Monto]" value="" maxlength="2">
                        </mat-form-field>
                      </ng-container>
                      <ng-template #displayOrigen>
                        {{element.monto}}
                      </ng-template>
                    </td>
                  </ng-container>

                  <ng-container matColumnDef="fecha">
                    <th mat-header-cell *matHeaderCellDef style="width: 20%;"> FECHA </th>
                    <td mat-cell *matCellDef="let element">
                      <ng-container *ngIf="element.isNew; else displayOrigen">
                        <mat-form-field [formGroup]="datos_fechaPasaje" appearance="outline">
                          <input matInput [matDatepicker]="fechaPasaje" formControlName="fechaPasaje{{element.index}}" [min]="minFechaLimite" [max]="maxFechaLimite">
                          <mat-hint>DD/MM/YYYY</mat-hint>
                          <mat-datepicker-toggle matIconSuffix [for]="fechaPasaje"></mat-datepicker-toggle>
                          <mat-datepicker #fechaPasaje></mat-datepicker>
                        </mat-form-field>
                      </ng-container>
                      <ng-template #displayOrigen>
                        {{formatoFecha(element.fecha)}}
                      </ng-template>
                    </td>
                  </ng-container>

                  <ng-container matColumnDef="accion">
                    <th mat-header-cell *matHeaderCellDef style="width: 30%;"> ACCIÓN </th>
                    <td mat-cell *matCellDef="let element">
                      <ng-container *ngIf="element.acciones; else sinAcciones">
                        <ng-container *ngIf="element.isNew; else accionesEditar">
                          <button mat-icon-button (click)="onEventoConfirmarPasaje($event, element)">
                            <mat-icon>check_circle</mat-icon>
                          </button>
                          <button mat-icon-button (click)="onEventoCancelarPasaje($event, element)">
                            <mat-icon>cancel</mat-icon>
                          </button>
                        </ng-container>
                        <ng-template #accionesEditar>
                            <button mat-icon-button (click)="onEventoEditarPasaje($event, element)">
                              <mat-icon>edit</mat-icon>
                            </button>
                            <button mat-icon-button (click)="onEventoEliminarPasaje($event, element)">
                              <mat-icon>delete</mat-icon>
                            </button>
                        </ng-template>
                      </ng-container>
                      <ng-template #sinAcciones>
                      </ng-template>
                    </td>
                  </ng-container>
                  <tr mat-header-row *matHeaderRowDef="columnasPasaje"></tr>
                  <tr mat-row *matRowDef="let row; columns: columnasPasaje;"></tr>
                </table>
              </div>
            </div>
          </div>
          </mat-card-content>
    </mat-card>
    -->
  <!---------------------------------------------------------------------- SERVICIOS PRESTADOS  ---------------------------------------------------------------------->
  <!--<mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] md:w-[75vw]">
    <mat-card-header class="flex flex-col items-start w-full">
      <label class="text-[1.1em] font-bold">
        SERVICIOS PRESTADOS
      </label>
    </mat-card-header>
    <mat-card-content class="w-full my-2.5">
      <div class="div-serviocisPrestados divisionGeneral"  [formGroup]="datos_servicio">
        <div class="servicio-descripcion">
          <div class="flex flex-row gap-5 pb-5">

            <div class="basis-1/5">
            <mat-form-field style="width: 15rem" appearance="outline" floatLabel="always">
              <mat-label>Listado de Requerimientos</mat-label>
              <input type="text" placeholder="Buscar requerimiento" matInput #inputBusqueda formControlName="busquedaReq" [matAutocomplete]="auto" maxlength="9"
                     (input)="onBusquedaRequerimiento($event)">
              <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onEventSeleccion($event)" >
                <mat-option *ngFor="let option of requerimientosFiltrados" [value]="option.codigo">
                  {{ option.numero }}
                </mat-option>
              </mat-autocomplete>
            </mat-form-field>
            <mat-label [ngClass]="{'fade-out': isFading}" [innerText]="labelText"></mat-label>
            </div>

            <div class="grid grid-cols-5 gap-4 basis-4/5">
              <div class="contenedorRequerimiento" *ngFor="let card of listRequerimientos" style="display: flex">
                <mat-card>
                  <mat-card-content>
                      <mat-card-subtitle style="font-size: 1rem;font-weight: bold;align-content: center">{{ card.titulo }}</mat-card-subtitle>
                      <div class="w-fit py-2 px-3 flex space-x-4">
                        <button mat-fab aria-label="Eliminar"  matTooltip="Eliminar" matTooltipPosition="above" (click)="deleteRequerimiento(card.id)">
                          <mat-icon class="mat-icon-small">delete</mat-icon>
                        </button>

                        <button mat-fab aria-label="Información" matTooltip="Información" matTooltipPosition="above" (click)="infoRequerimiento(card.codigo)">
                          <mat-icon class="mat-icon-small">info</mat-icon>
                        </button>
                      </div>
                  </mat-card-content>
                </mat-card>
              </div>
            </div>
          </div>

          <div class="grid grid-flow-col md:grid-cols-2 gap-5" >
            <div>
              <mat-form-field class="example-full-width">
                <mat-label>DESCRIPCIÓN DEL PROBLEMA </mat-label>
                <textarea matInput placeholder="Breve descripción sobrel los problemas encontrados en la sede" formControlName="descripcionServicio"
                          cdkTextareaAutosize
                          cdkAutosizeMinRows="3"
                          cdkAutosizeMaxRows="10"
                          [required]="false"></textarea>
              </mat-form-field>
            </div>
            <div>
              <mat-form-field class="example-full-width">
                <mat-label>DESCRIPCIÓN DE LA CAUSA </mat-label>
                <textarea matInput placeholder="Breve descripción sobre las causas del problema" formControlName="causaServicio"
                          cdkTextareaAutosize
                          cdkAutosizeMinRows="3"
                          cdkAutosizeMaxRows="10"
                          [required]="false"></textarea>
              </mat-form-field>
            </div>
          </div>
        </div>

        <div class="grid grid-flow-col md:grid-cols-2 gap-5">
          <div class="">
            <div> <b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIAS DEL PROBLEMAS : *</b> </div>
            <div>
              <button mat-fab class="!w-full"
                      [color]="'blue'"
                      (click)="file1.click()">
                <mat-label> SUBIR EVIDENCIA DEL PROBLEMA </mat-label>
                <mat-icon class="font-size: 48px; height: 48px; width: 48px">file_open</mat-icon>
              </button>
              <input type="file" #file1 (change)="onEventoSubirArchivo($event)" class="hidden" multiple accept="image/png" />
            </div>
            <br>
            <div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex">
              <div *ngIf="archivo.tipoEvidencia === 1" class="flex w-full">
                <div class="w-2/4"><p>{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true  }}</p></div>
                <div class="w-2/4 grid grid-cols-3 gap-4 justify-center" >
                  <button type="button" (click)="gestionArchivos(i,1,archivo.file)"><mat-icon class="mat-icon-small">info</mat-icon></button>
                  <button type="button" (click)="seleccionarInput(i,1)"><mat-icon class="mat-icon-small">edit</mat-icon></button>
                  <input type="file" #fileEditar1 (change)="gestionArchivos(i,2,$event)" class="hidden" multiple accept="image/png" />
                  <button type="button" (click)="gestionArchivos(i,3)"><mat-icon class="mat-icon-small">delete</mat-icon></button>
                </div>
              </div>
            </div>
          </div>

          <div class="">
            <div> <b class="md:text-[1rem] text-[1em] text-black/60">EVIDENCIAS DE SOLUCIONES : *</b> </div>
            <div>
              <button mat-fab class="!w-full"
                      [color]="'blue'"
                      (click)="file2.click()">
                <mat-label>SUBIR EVIDENCIA DE LA SOLUCIÓN</mat-label>
                <mat-icon>file_open</mat-icon>
              </button>
              <input type="file" #file2 (change)="onEventoSubirArchivo($event,2)" class="hidden" multiple accept="image/png">
            </div>
            <br>
            <div *ngFor="let archivo of archivosEvidencia; let i = index" class="flex">
              <div *ngIf="archivo.tipoEvidencia === 2" class="flex w-full">
                <div class="w-2/4"><p>{{ (archivo.file.name + ' (' + (archivo.file.size / 1000) + ' KB)') | truncate:30:true  }}</p></div>
                <div class="w-2/4 grid grid-cols-3 gap-4 justify-center" >
                  <button type="button" (click)="gestionArchivos(i,1,archivo.file,2)"><mat-icon class="mat-icon-small">info</mat-icon></button>
                  <button type="button" (click)="seleccionarInput(i,2)"><mat-icon class="mat-icon-small">edit</mat-icon></button>
                  <input type="file" #fileEditar2 (change)="gestionArchivos(i,2,$event,2)" class="hidden" multiple accept="image/png" />
                  <button type="button" (click)="gestionArchivos(i,3,2)"><mat-icon class="mat-icon-small">delete</mat-icon></button>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </mat-card-content>
  </mat-card>-->
  <!---------------------------------------------------------------------- SERVICIOS PRESTADOS  ---------------------------------------------------------------------->

  <!---------------------------------------------------------------------- TRABAJOS PRESTADOS  ---------------------------------------------------------------------->

  <!--<mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] md:w-[75vw]">
    <mat-card-header class="flex flex-col items-start w-full">
      <label class="text-[1.1em] font-bold">
        TRABAJOS PRESTADOS
      </label>
    </mat-card-header>
    <mat-card-content class="w-full my-2.5">
      <div class="div-trabajosPrestados  divisionGeneral" [formGroup]="datos_trabajo">
        <label style="font-weight: bold; font-size: 1.2rem; font-family: 'inherit'">TIPO DE TRABAJO : </label>
        <mat-form-field class="select-tipoTrabajo">
          <mat-label>Seleccionar tipo de trabajo</mat-label>
          <mat-select formControlName="tipoTrabajo">
            @for (tipoT of listTipoTrabajo; track tipoT) {
              <mat-option [value]="tipoT.value">{{tipoT.viewValue}}</mat-option>
            }
          </mat-select>
        </mat-form-field>
        <br>
        <mat-form-field class="example-full-width">
          <mat-label>DESCRIPCIÓN DEL TRABAJO</mat-label>
          <textarea matInput placeholder="Breve descripciòn del trabajo realizado" formControlName="descripcionTrabajo" [required]="false"></textarea>
        </mat-form-field>
      </div>
    </mat-card-content>
  </mat-card> -->

  <!---------------------------------------------------------------------- TRABAJOS PRESTADOS  ---------------------------------------------------------------------->

  <!--<mat-card appearance="outlined" class="mt-4 flex flex-col gap-2.5 text-[#222] !shadow-xl w-[90vw] md:w-[75vw]" [formGroup]="existeMaterialS">
    <mat-card-header class="justify-center content-center gap-x-4 w-full mb-4">
      <mat-label class="flex items-center text-[1.1em] font-bold">
        MATERIAL SOBRANTE
      </mat-label>
      <mat-button-toggle-group formControlName="existeMaterial" aria-label="Existe material sobrante" value="0">
        <mat-button-toggle value="1">SI</mat-button-toggle>
        <mat-button-toggle value="0">NO</mat-button-toggle>
      </mat-button-toggle-group>
    </mat-card-header>

    <ng-container *ngIf="existeMaterialS.get('existeMaterial')?.value === '1'">
      <mat-card-content>
      <ordensalida-component></ordensalida-component>
      </mat-card-content>
    </ng-container>

  </mat-card>

  <div class="mt-4 flex flex-col">
    <button mat-fab extended (click)="gestionConformidad()">
      <mat-icon>app_registration</mat-icon>
      REGISTRO CONFORMIDAD
    </button>
  </div>-->


</div>