<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
  @page {
    size: A4 landscape;
    margin: 20mm 20mm 20mm 20mm;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 6pt;
    color: #000;
  }

  /* ── Cabecera ── */
  .cab-reporte {
    width: 100%;
    border-bottom: 1.5pt solid #000;
    margin-bottom: 6px;
    padding-bottom: 4px;
  }
  .cab-reporte table { width: 100%; border-collapse: collapse; }
  .cab-titulo    { font-size: 10pt; font-weight: bold; text-align: center; }
  .cab-subtitulo { font-size: 7pt;  text-align: center; color: #444; margin-top: 2px; }
  .cab-datos     { font-size: 7pt;  text-align: right; color: #000; line-height: 1.5; }

  /* ── Tabla ── */
  table.datos {
    width: 100%;
    border-collapse: collapse;
    margin-top: 4px;
  }
  table.datos th {
    background-color: #333;
    color: #fff;
    font-size: 6pt;
    font-weight: bold;
    padding: 3px 2px;
    text-align: center;
    border: 0.4pt solid #000;
  }
  table.datos td {
    font-size: 6pt;
    padding: 2px 2px;
    border: 0.4pt solid #ccc;
    vertical-align: middle;
  }
  table.datos tr.par   td { background-color: #f2f2f2; }
  table.datos tr.impar td { background-color: #fff; }

  .text-right  { text-align: right; }
  .text-center { text-align: center; }
  .text-left   { text-align: left; }

  /* ── Pie de página ── */
  .pie {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    border-top: 0.5pt solid #999;
    font-size: 6pt;
    color: #555;
    padding-top: 2px;
  }
  .pie table { width: 100%; border-collapse: collapse; }
  .pagenum:before { content: counter(page); }

  /* ── Sin datos ── */
  .sin-datos {
    text-align: center;
    color: #888;
    font-style: italic;
    padding: 12px;
  }
</style>
</head>
<body>

{{-- ── Pie de página fijo ── --}}
<div class="pie">
  <table>
    <tr>
      <td class="text-left">Sistema Cosmos — {{ $cab['nombre_sistema'] }}</td>
      <td class="text-center">Impreso: {{ \App\Helpers\FechaHelper::bdToLocal($cab['fecha_sistema']) }}</td>
      <td class="text-right">Pág. <span class="pagenum"></span></td>
    </tr>
  </table>
</div>

{{-- ── Cabecera ── --}}
<div class="cab-reporte">
  <table>
    <tr>
      <td width="18%" style="vertical-align:middle;">
        <img src="{{ public_path('assets/media/img/logo.jpg') }}"
             style="height:34px; width:auto;">
      </td>
      <td width="58%" style="text-align:center; vertical-align:middle;">
        <div class="cab-titulo">REPORTE DE ESTADOS DE LOTES</div>
        <div class="cab-subtitulo">
          Urb. {{ $nomUrb }} — Sector: {{ $nomDist }} — Manzano: {{ $manzano }}
        </div>
      </td>
      <td width="24%" style="vertical-align:middle;">
        <div class="cab-datos">
          Fecha: {{ \App\Helpers\FechaHelper::bdToLocal($cab['fecha_sistema']) }}<br>
          Hrs: {{ now('America/La_Paz')->format('H:i:s') }}<br>
          T.C.: Bs. {{ number_format($cab['tc_sistema'], 2) }}
        </div>
      </td>
    </tr>
  </table>
</div>

{{-- ── Tabla de datos ── --}}
<table class="datos">
  <thead>
    <tr>
      <th style="width:3%">N°</th>
      <th style="width:3%">M</th>
      <th style="width:3%">L</th>
      <th style="width:4%">Sup</th>
      <th style="width:3%">Est</th>
      <th style="width:13%; text-align:left; padding-left:2px;">Cliente</th>
      <th style="width:5%">Cont</th>
      <th style="width:6%">FC</th>
      <th style="width:6%">Total</th>
      <th style="width:5%">PCM</th>
      <th style="width:3%">NC</th>
      <th style="width:6%">FUP</th>
      <th style="width:6%">TotalEx</th>
      <th style="width:6%">Pagado</th>
      <th style="width:6%">Saldo</th>
      <th style="width:4%">Días</th>
      <th style="width:9%">Estado</th>
      <th style="width:4%">Auto</th>
    </tr>
  </thead>
  <tbody>
    @forelse($filas as $i => $f)
    <tr class="{{ $i % 2 === 0 ? 'par' : 'impar' }}"
        @if($f->swdias) style="font-weight:bold; background-color:#d0d0d0;" @endif>
      <td class="text-center">{{ $i + 1 }}</td>
      <td class="text-center">{{ $f->manzano }}</td>
      <td class="text-center">{{ $f->lote }}</td>
      <td class="text-center">{{ $f->superf }}</td>
      <td class="text-center">{{ $f->estado }}</td>
      <td style="padding-left:2px;">{{ $f->nom_cliente }}</td>
      <td class="text-center">{{ $f->idcontrato }}</td>
      <td class="text-center">{{ $f->fecha_cont }}</td>
      <td class="text-right">{{ $f->total }}</td>
      <td class="text-right">{{ $f->cuotamensual }}</td>
      <td class="text-center">{{ $f->numcuotas }}</td>
      <td class="text-center">{{ $f->fecha_ult_pago }}</td>
      <td class="text-right">{{ $f->totalext }}</td>
      <td class="text-right">{{ $f->pagado }}</td>
      <td class="text-right">{{ $f->saldo }}</td>
      <td class="text-center">
        @if(is_numeric($f->dias))
          {{ number_format($f->dias, 0) }}
        @else
          {{ $f->dias }}
        @endif
      </td>
      <td class="text-center">{{ $f->estado_texto }}</td>
      <td class="text-center">{{ $f->idauto }}</td>
    </tr>
    @empty
    <tr>
      <td colspan="18" class="sin-datos">Sin lotes para los criterios seleccionados.</td>
    </tr>
    @endforelse
  </tbody>
</table>

{{-- ── Leyenda ── --}}
<div style="font-size:5.5pt; margin-top:5px; color:#333; border-top:0.4pt solid #ccc; padding-top:3px;">
  <strong>Estados:</strong>
  1=Disponible &nbsp;|&nbsp;
  3=En Proceso &nbsp;|&nbsp;
  4=Vendido &nbsp;|&nbsp;
  5=En Trámite &nbsp;|&nbsp;
  6=Consolidado &nbsp;|&nbsp;
  C.E.=Caso Especial &nbsp;|&nbsp;
  <strong>Fondo gris</strong> = mora &gt; 90 días
</div>

</body>
</html>