<div class="m-5" [formGroup]="datos_materialSobrante">
  <!-- Descripción del Material Sobrante -->
  <div class="w-full">
    <mat-form-field class="w-full">
      <mat-label>DESCRIPCIÓN DEL MATERIAL SOBRANTE :</mat-label>
      <textarea formControlName="descMaterial" matInput placeholder="Breve descripción de los materiales faltantes y su estado"></textarea>
    </mat-form-field>
  </div>

  <!---------------------------------------------------------------------- SECCIÓN MATERIALES SOBRANTES  ---------------------------------------------------------------------->

  <div class="mt-6">
    <!-- Título y botón de agregar artículo -->
    <div class="grid gap-4 grid-cols-1 sm:grid-cols-2 items-center">
      <mat-label class="text-[1.1em] font-bold mb-4 flex items-center">
        LISTADO DE ARTÍCULOS
        <mat-icon class="ml-2">attach_money</mat-icon>
      </mat-label>
      <button [ngStyle]="{'visibility': activarNuevoArticulo ? 'visible' : 'hidden'}" [disabled]="!activarNuevoArticulo" mat-raised-button (click)="onAgregarArticulo($event)">
        <mat-icon>add</mat-icon>
        <b>Agregar material</b>
      </button>
    </div>

    <!-- Tabla de artículos -->
    <div class="overflow-x-auto">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-full">
        <!-- Columna Nombre de Artículo -->
        <ng-container matColumnDef="nombre">
          <th mat-header-cell *matHeaderCellDef> NOMBRE DE ARTÍCULO </th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.isNew; else displayOrigen">
              <mat-form-field class="w-[25rem]">
                <input type="text" placeholder="Buscar artículos" matInput formControlName="articulo{{element.index}}" [matAutocomplete]="auto" maxlength="9"
                       (input)="onBusquedaArticulo($event,element.index)">
                <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSeleccionArticulo($event,element.index)">
                  <mat-option *ngFor="let option of articulosList" [value]="option.codigo">
                    {{ option.nombre }}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
            </ng-container>
            <ng-template #displayOrigen>
              {{ element.nombre }}
            </ng-template>
          </td>
        </ng-container>

        <!-- Columna Unidad -->
        <ng-container matColumnDef="unidad">
          <th mat-header-cell *matHeaderCellDef> UNIDAD </th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.isNew; else displayOrigen">
              <mat-label>{{formGroupMS(2,'unidad'+element.index)?.value}}</mat-label>
            </ng-container>
            <ng-template #displayOrigen>
              {{ element.unidad }}
            </ng-template>
          </td>
        </ng-container>

        <!-- Columna Cantidad -->
        <ng-container matColumnDef="cantidad">
          <th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.isNew; else displayOrigen">
              <mat-form-field class="w-[10rem]" appearance="outline">
                <input matInput formControlName="cantidad{{element.index}}" soloNumeros maxlength="2">
              </mat-form-field>
            </ng-container>
            <ng-template #displayOrigen>
              {{ element.cantidad }}
            </ng-template>
          </td>
        </ng-container>

        <!-- Columna Estado Artículo -->
        <ng-container matColumnDef="estado">
          <th mat-header-cell *matHeaderCellDef> ESTADO ARTÍCULO </th>
          <td mat-cell *matCellDef="let element">
            <ng-container *ngIf="element.isNew; else displayOrigen">
              <mat-form-field class="w-full select-tipoTrabajo">
                <mat-label>Seleccionar tipo de trabajo</mat-label>
                <mat-select formControlName="estado{{element.index}}">
                  <mat-option *ngFor="let tipoT of listEstadoArticulo" [value]="tipoT.valor">{{ tipoT.nombre }}</mat-option>
                </mat-select>
              </mat-form-field>
            </ng-container>
            <ng-template #displayOrigen>
              {{ formatoEstado(element.estado) }}
            </ng-template>
          </td>
        </ng-container>

        <!-- Columna Acción -->
        <ng-container matColumnDef="accion">
          <th mat-header-cell *matHeaderCellDef> 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)="onEventoConfirmarArticulo($event, element)">
                  <mat-icon>check_circle</mat-icon>
                </button>
                <button mat-icon-button (click)="onEventoCancelarArticulo($event, element)">
                  <mat-icon>cancel</mat-icon>
                </button>
              </ng-container>
              <ng-template #accionesEditar>
                <button mat-icon-button (click)="onEventoEditarArticulo($event, element)">
                  <mat-icon>edit</mat-icon>
                </button>
                <button mat-icon-button (click)="onEventoEliminarArticulo($event, element)">
                  <mat-icon>delete</mat-icon>
                </button>
              </ng-template>
            </ng-container>
            <ng-template #sinAcciones></ng-template>
          </td>
        </ng-container>

        <!-- Header y Filas -->
        <tr mat-header-row *matHeaderRowDef="columnasArticulos"></tr>
        <tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
      </table>
    </div>
  </div>
</div>


<!--<div class="m-5" [formGroup]="datos_materialSobrante">
    <div class="w-full">
      <mat-form-field class="w-full">
        <mat-label>DESCRIPCIÓN DEL MATERIAL SOBRANTE : </mat-label>
        <textarea formControlName="descMaterial" matInput placeholder="Breve descripción de los materiales faltantes y su estado"></textarea>
      </mat-form-field>
    </div>

    <div>
        <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 ARTICULOS <mat-icon>attach_money</mat-icon> </mat-label>
          <button  [ngStyle]="{'visibility': activarNuevoArticulo ? 'visible' : 'hidden'}" [disabled]="!activarNuevoArticulo" mat-raised-button (click)="onAgregarArticulo($event)">
            <mat-icon>add</mat-icon>
            <b>Agregar material</b>
          </button>
        </div>
        <div>
          <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
            <ng-container matColumnDef="nombre">
              <th mat-header-cell *matHeaderCellDef> NOMBRE DE ARTÍCULO </th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.isNew; else displayOrigen">
                  <mat-form-field style="width: 25rem">
                    <input type="text" placeholder="Buscar articulos" matInput formControlName="articulo{{element.index}}" [matAutocomplete]="auto" maxlength="9"
                           (input)="onBusquedaArticulo($event,element.index)">
                    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSeleccionArticulo($event,element.index)" >
                      <mat-option *ngFor="let option of articulosList" [value]="option.codigo">
                        {{ option.nombre }}
                      </mat-option>
                    </mat-autocomplete>
                  </mat-form-field>
                </ng-container>
                <ng-template #displayOrigen>
                  {{element.nombre}}
                </ng-template>
              </td>
            </ng-container>

            <ng-container matColumnDef="unidad">
              <th mat-header-cell *matHeaderCellDef> UNIDAD </th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.isNew; else displayOrigen">
                  <mat-label>{{formGroupMS(2,'unidad'+element.index)?.value}}</mat-label>
                </ng-container>
                <ng-template #displayOrigen>
                  {{element.unidad}}
                </ng-template>
              </td>
            </ng-container>

            <ng-container matColumnDef="cantidad">
              <th mat-header-cell *matHeaderCellDef> CANTIDAD </th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.isNew; else displayOrigen">
                  <mat-form-field style="width: 10rem" appearance="outline">
                    <input matInput formControlName="cantidad{{element.index}}" soloNumeros value="" maxlength="2">
                  </mat-form-field>
                </ng-container>
                <ng-template #displayOrigen>
                  {{ element.cantidad }}
                </ng-template>
              </td>
            </ng-container>

            <ng-container matColumnDef="estado">
              <th mat-header-cell *matHeaderCellDef> ESTADO ARTÍCULO </th>
              <td mat-cell *matCellDef="let element">
                <ng-container *ngIf="element.isNew; else displayOrigen">
                  <mat-form-field class="select-tipoTrabajo">
                    <mat-label>Seleccionar tipo de trabajo</mat-label>
                    <mat-select formControlName="estado{{element.index}}">
                      @for (tipoT of listEstadoArticulo; track tipoT) {
                        <mat-option [value]="tipoT.valor">{{tipoT.nombre}}</mat-option>
                      }
                    </mat-select>
                  </mat-form-field>
                </ng-container>
                <ng-template #displayOrigen>
                  {{ formatoEstado(element.estado) }}
                </ng-template>
              </td>
            </ng-container>

            <ng-container matColumnDef="accion">
              <th mat-header-cell *matHeaderCellDef> 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)="onEventoConfirmarArticulo($event, element)">
                      <mat-icon>check_circle</mat-icon>
                    </button>
                    <button mat-icon-button (click)="onEventoCancelarArticulo($event, element)">
                      <mat-icon>cancel</mat-icon>
                    </button>
                  </ng-container>
                  <ng-template #accionesEditar>
                    <button mat-icon-button (click)="onEventoEditarArticulo($event, element)">
                      <mat-icon>edit</mat-icon>
                    </button>
                    <button mat-icon-button (click)="onEventoEliminarArticulo($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="columnasArticulos"></tr>
            <tr mat-row *matRowDef="let row; columns: columnasArticulos;"></tr>
          </table>
        </div>
    </div>
</div> -->