<div class="p-3 text-white">
  <!-- Tabla1 -->
  <div class="font-bold my-2 tituloTabla">Cronogramas cargados:</div>
  <p-table 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="col-empresa-sem" class="tablaAzul font-bold">Empresa</th>
            <th id="col-codigo-cronograma-sem" class="tablaAzul font-bold">C&oacute;digo de cronograma</th>
            <th id="col-codigo-cronograma-ajuste" class="tablaAzul font-bold">C&oacute;digo cronograma de ajuste</th>
            <th id="col-tipo-carga" class="tablaAzul font-bold">Tipo de carga</th>
            <th id="col-estado-revision" class="bg-green-400 font-bold text-white font-bold">Estado de revisi&oacute;n</th>
            <th id="col-analista" class="bg-green-400 font-bold text-white font-bold">Analista</th>
            <th id="col-fecha-ingreso" class="bg-green-400 font-bold text-white font-bold">Fecha ingreso</th>
            <th id="col-semaforo" class="bg-green-400 font-bold text-white font-bold">Sem&aacute;foro</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 class="bg-verde">{{ product.estadoRevision }}</td>
                <td class="bg-verde">
                  <!-- analista -->
                    <input
                    type="analista"
                    pInputText
                    [(ngModel)]="product.analista"
                    placeholder="Analista"
                    name="analista"
                    class="input-with-icon w-full"
                    style="background-color: white; color: black;width: 228px !important;"
                  />
                </td>
                <td class="bg-verde">{{ product.fechaIngreso }}</td>
                <td class="bg-verde">
                  <!-- {{ product.semaforo }} -->
                  <div class="text-center">
                    <i class="pi pi-circle-fill" style="font-size: 24px;"
                    [style.color]="product.semaforo === 'green' ? '#00bb00' : product.semaforo === 'yellow' ? 'yellow' : product.semaforo === 'red' ? 'red' : ''"></i>
                  </div>
                </td>
            </tr>
        </ng-template>
</p-table>

<div class="flex justify-content-between flex-wrap gap-3 border-round border-blue-400 my-6 lg:px-0 py-3 my-1 ">
  <div class="col-12 md:col-5 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)]="select1" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">Filtro C&oacute;digo Cronograma SINAR</div>
      <p-select  appendTo="body" [options]="empresas" [(ngModel)]="select2" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">Filtro tipo de carga</div>
      <p-select  appendTo="body" [options]="tipoCarga" [(ngModel)]="select3" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">¿Contiene obras del a&ntilde;o?</div>
      <p-select  appendTo="body" [options]="contieneObras" [(ngModel)]="select4" optionLabel="name" placeholder="Seleccione..." class="w-full md:w-56" />
    </div>
  </div>
  <div class="col-12 md:col-5 lg:col-2 tablaAzul border-round">
    <div class="border-round font-bold">
      <div class="h-4rem">N° Oficio que aprueba</div>
      <!-- Numero Oficio -->
      <input
      type="text"
      pInputText
      placeholder="xxxxx"
      name="numeroOficio"
      class="input-with-icon w-full mt-1 text-center sm:text-start"
      style="background-color: white; color: black;"
    />
    </div>
  </div>
  <div class="col-12 text-center">
    <button type="button" class="bg-primary border-primary-500 mt-3 px-5 py-3 text-base border-1 border-solid border-round cursor-pointer transition-all transition-duration-200 hover:bg-primary-600 hover:border-primary-600 active:bg-primary-700 active:border-primary-700">Crear solicitud</button>
  </div>
</div>

<!-- Tabla2 -->
<div class="font-bold my-2 tituloTabla">Cronogramas solicitados y pendientes de carga:</div>
<p-table id="azul" sortField="price" [sortOrder]="-1"
    [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="col-empresa-sort" pSortableColumn="empresa" class="tablaAzul font-bold">Empresa <p-sortIcon field="empresa" /></th>
            <th id="col-codigo-cronograma-sinar" pSortableColumn="codigoCronograma" class="tablaAzul font-bold">C&oacute;digo de cronograma SINAR <p-sortIcon field="codigoCronograma" /></th>
            <th id="col-contiene-obras-anio" pSortableColumn="codigoCronogramaAjuste" class="tablaAzul font-bold">Contiene obras del a&ntilde;o <p-sortIcon field="codigoCronogramaAjuste" /></th>
            <th id="col-oficio-aprueba" pSortableColumn="tipoCarga" class="tablaAzul font-bold">N° Oficio que aprueba <p-sortIcon field="tipoCarga" /></th>
            <th id="col-tipo-carga-sort" pSortableColumn="estadoRevision" class="tablaAzul font-bold">Tipo de carga <p-sortIcon field="estadoRevision" /></th>
            <th id="col-fecha-solicitud" pSortableColumn="fechaIngreso" class="tablaAzul font-bold">Fecha de solicitud <p-sortIcon field="fechaIngreso" />
            </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>
            </tr>
        </ng-template>
</p-table>

</div>
