<div class="p-3 text-white">
  <div
    class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
  >
    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro Empresa</div>
        <p-select  appendTo="body"
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
    <div class="col-6 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
        <p-select  appendTo="body"
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
  </div>
  <!-- Tabla1 -->
  <!-- <div class="font-bold text-black-alpha-90 my-2">T&iacute;tulo de la tabla:</div> -->

  <!-- Botón de exportar a Excel (movido arriba) -->
  <div class="flex justify-content-end align-items-center my-2 py-2">
    <button
      pButton
      type="button"
      (click)="exportExcelWithStyles(dt)"
      icon="pi pi-file-excel"
      class="p-button-success"
      label="Exportar"
      pTooltip="Descargar planilla Excel"
      tooltipPosition="top"
      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
    ></button>
  </div>

  <p-table
    #dt
    id="azul"
    [value]="products"
    stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]"
  >
    <ng-template #header>
      <tr>
        <th id="header-empty" colspan="9" style="background-color: #f8f9fa; border: none"></th>
        <th id="header-crono-vigente" colspan="3" class="tablaAzul text-white font-bold text-center">Cronograma base vigente</th>
        <th id="header-crono-ajustado" colspan="4" class="bg-blue-700 text-white font-bold text-center">Cronograma base ajustado</th>
      </tr>
      <tr>
        <th id="col-empresa" class="tablaAzul text-white font-bold">Empresa</th>
        <th id="col-codigo-cronograma" class="tablaAzul text-white font-bold">C&oacute;digo de cronograma</th>
        <th id="col-etapa-servicio" class="tablaAzul text-white font-bold">Etapa del Servicio</th>
        <th id="col-nombre-sistema" class="tablaAzul text-white font-bold">Nombre sistema</th>
        <th id="col-nombre-localidad" class="tablaAzul text-white font-bold">Nombre localidad</th>
        <th id="col-tipo-inversion" class="tablaAzul text-white font-bold">Tipo de inversi&oacute;n</th>
        <th id="col-codigo-glosa" class="tablaAzul text-white font-bold">C&oacute;digo de glosa PD</th>
        <th id="col-descripcion-glosa" class="tablaAzul text-white font-bold">Descripci&oacute;n glosa</th>
        <th id="col-monto-inversion" class="tablaAzul text-white font-bold">Monto Inversi&oacute;n Total (UF)</th>
        <th id="col-anio-inicio" class="tablaAzul text-white font-bold">A&ntilde;o de Inicio</th>
        <th id="col-anio-termino" class="tablaAzul text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
        <th id="col-mes-termino" class="tablaAzul text-white font-bold">Mes de T&eacute;rmino</th>
        <th id="col-tipo-ajuste" class="bg-blue-700 text-white font-bold">Tipo de ajuste</th>
        <th id="col-anio-inicio-ajustado" class="bg-blue-700 text-white font-bold">A&ntilde;o de Inicio</th>
        <th id="col-anio-termino-ajustado" class="bg-blue-700 text-white font-bold">A&ntilde;o de T&eacute;rmino</th>
        <th id="col-mes-termino-ajustado" class="bg-blue-700 text-white font-bold">Mes de T&eacute;rmino</th>
        <th id="col-nota" class="tablaAzul text-white font-bold">Nota</th>
        <th id="col-estado-aprobacion" class="bg-green-400 text-white font-bold">Estado aprobaci&oacute;n</th>
        <th id="col-observacion" class="bg-green-400 text-white font-bold">Observaci&oacute;n</th>
      </tr>
    </ng-template>
    <ng-template #body let-product>
      <tr>
        <td>{{ product.empresa }}</td>
        <td>{{ product.codigoCronograma }}</td>
        <td>{{ product.codigoCronogramaAjuste }}</td>
        <td>{{ product.tipoCarga }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.fechaIngreso }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.dato9 }}</td>
        <td>{{ product.dato10 }}</td>
        <td>{{ product.dato13 }}</td>
        <td>{{ product.dato14 }}</td>
        <td>{{ product.dato15 }}</td>
        <td class="bg-azulFuerte">{{ product.dato16 }}</td>
        <td class="bg-azulFuerte">{{ product.dato17 }}</td>
        <td class="bg-azulFuerte">{{ product.dato18 }}</td>
        <td class="bg-azulFuerte">{{ product.dato11 }}</td>
        <td>{{ product.dato12 }}</td>
        <td class="bg-verde">
          <div class="border-round font-bold">
            <p-select  appendTo="body"
              [options]="estadoAprobacion"
              optionValue="value"
              [(ngModel)]="product.dato13"
              appendTo="body"
              optionLabel="name"
              placeholder="Seleccione..."
              class="selectTabla"
            />
          </div>
        </td>
        <td class="bg-verde">
          <input
            type="analista"
            pInputText
            [hidden]="product.dato13"
            [(ngModel)]="product.analista"
            placeholder="Analista"
            name="analista"
            class="input-with-icon w-full"
            style="
              background-color: white;
              color: black;
              width: 228px !important;
            "
          />
        </td>
      </tr>
    </ng-template>
  </p-table>
</div>