<?php /** /app/views/pdf/catalogo.php
 * Template do catálogo premium em PDF (Dompdf 3.x compatível)
 * Variáveis esperadas: $produtos, $titulo, $config
 *
 * v1.1 — corrigido bug "Frame not found in cellmap" do Dompdf 3.x
 *        substituindo grid em <table> por layout flutuante (float).
 */
$corPrimaria   = $config['cor_primaria']   ?? '#0A0A0A';
$corSecundaria = $config['cor_secundaria'] ?? '#C9A55C';
$marcaNome     = $config['marca_nome']     ?? 'OFFICE';
$slogan        = $config['marca_slogan']   ?? 'Coleção Premium';
$logoPath      = !empty($config['marca_logo']) ? UPLOADS_PATH . '/' . $config['marca_logo'] : null;
$logoExists    = $logoPath && file_exists($logoPath);
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
  @page { margin: 0; }

  body {
    font-family: DejaVu Sans, sans-serif;
    color: #1a1a1a;
    margin: 0; padding: 0;
    font-size: 11pt;
  }

  /* ======= CAPA ======= */
  .cover {
    width: 100%;
    height: 297mm;
    background: <?= $corPrimaria ?>;
    color: #fff;
    position: relative;
    page-break-after: always;
  }
  .cover-content {
    padding: 80mm 25mm 25mm;
    text-align: center;
  }
  .cover-tag {
    font-size: 9pt;
    letter-spacing: 6pt;
    color: <?= $corSecundaria ?>;
    text-transform: uppercase;
    margin-bottom: 20mm;
  }
  .cover-logo {
    max-width: 60mm;
    max-height: 30mm;
    margin: 0 auto 15mm;
  }
  .cover-title {
    font-size: 54pt;
    font-weight: normal;
    letter-spacing: 10pt;
    margin: 0 0 10mm;
    color: #fff;
  }
  .cover-subtitle {
    font-size: 11pt;
    letter-spacing: 3pt;
    color: #d4d4d4;
    text-transform: uppercase;
    margin-bottom: 60mm;
  }
  .cover-catalog {
    font-size: 24pt;
    letter-spacing: 4pt;
    color: <?= $corSecundaria ?>;
    margin-top: 40mm;
  }
  .cover-year {
    position: absolute;
    bottom: 30mm;
    left: 0; right: 0;
    text-align: center;
    font-size: 10pt;
    letter-spacing: 4pt;
    color: #999;
  }
  .cover-border {
    position: absolute;
    top: 12mm; left: 12mm; right: 12mm; bottom: 12mm;
    border: 1px solid <?= $corSecundaria ?>;
    pointer-events: none;
  }

  /* ======= INTRO ======= */
  .intro {
    padding: 30mm 25mm;
    page-break-after: always;
  }
  .intro-title {
    font-size: 28pt;
    color: <?= $corPrimaria ?>;
    letter-spacing: 2pt;
    border-bottom: 2px solid <?= $corSecundaria ?>;
    padding-bottom: 8mm;
    margin-bottom: 15mm;
  }
  .intro p {
    font-size: 11pt;
    line-height: 1.8;
    color: #444;
    text-align: justify;
  }
  .intro .small {
    font-size: 9pt;
    letter-spacing: 3pt;
    color: <?= $corSecundaria ?>;
    text-transform: uppercase;
    margin-bottom: 5mm;
  }
  .contact-box {
    margin-top: 20mm;
    padding: 10mm;
    background: #fbf9f5;
    border-left: 3px solid <?= $corSecundaria ?>;
  }

  /* ======= CABEÇALHO DA PÁGINA DE PRODUTOS ======= */
  .page-products {
    padding: 12mm 12mm 8mm;
  }
  .page-header {
    border-bottom: 1px solid #e6e0d4;
    padding-bottom: 4mm;
    margin-bottom: 6mm;
    overflow: hidden;
  }
  .page-header-brand {
    float: left;
    font-size: 11pt;
    letter-spacing: 4pt;
    color: <?= $corPrimaria ?>;
  }
  .page-header-ctx {
    float: right;
    font-size: 8pt;
    letter-spacing: 2pt;
    color: <?= $corSecundaria ?>;
    text-transform: uppercase;
    padding-top: 2mm;
  }

  /* ======= CARDS DE PRODUTO (FLOAT EM VEZ DE TABLE) ======= */
  /* Layout 2 colunas via float — Dompdf 3.x lida bem com isso */
  .prod {
    float: left;
    width: 88mm;
    margin: 0 3mm 6mm 3mm;
    padding: 4mm;
    border: 1px solid #eae5dc;
    background: #fbf9f5;
    height: 110mm;
    overflow: hidden;
  }
  .prod-img {
    width: 100%;
    height: 60mm;
    background: #fff;
    text-align: center;
    border: 1px solid #e8e4dc;
    margin-bottom: 3mm;
    line-height: 60mm;  /* centraliza verticalmente o conteúdo */
  }
  .prod-img img {
    max-width: 80mm;
    max-height: 58mm;
    vertical-align: middle;
  }
  .prod-img .placeholder {
    color: #c3bcad;
    font-size: 28pt;
  }
  .prod-sku {
    font-size: 7pt;
    letter-spacing: 3pt;
    color: <?= $corSecundaria ?>;
    text-transform: uppercase;
    margin-bottom: 1mm;
    line-height: 1.2;
  }
  .prod-name {
    font-size: 12pt;
    font-weight: bold;
    color: <?= $corPrimaria ?>;
    margin-bottom: 2mm;
    border-bottom: 1px solid <?= $corSecundaria ?>;
    padding-bottom: 1.5mm;
    line-height: 1.2;
  }
  .prod-desc {
    font-size: 8pt;
    color: #555;
    line-height: 1.4;
    margin: 1mm 0;
    height: 12mm;
    overflow: hidden;
  }
  .prod-attr {
    font-size: 7pt;
    color: #777;
    margin-top: 1.5mm;
    line-height: 1.4;
  }
  .prod-attr strong { color: <?= $corPrimaria ?>; }
  .prod-price {
    font-size: 10pt;
    color: <?= $corSecundaria ?>;
    font-weight: bold;
    margin-top: 1mm;
  }

  /* limpa floats no final de cada página */
  .clearfix:after {
    content: "";
    display: block;
    clear: both;
  }

  /* ======= RODAPÉ ======= */
  .page-footer {
    position: fixed;
    bottom: 6mm; left: 12mm; right: 12mm;
    font-size: 7.5pt;
    color: #999;
    text-align: center;
    letter-spacing: 2pt;
    border-top: 1px solid #e6e0d4;
    padding-top: 2mm;
  }
  .page-footer .page-num:after {
    content: counter(page);
  }
</style>
</head>
<body>

<!-- ======= CAPA ======= -->
<div class="cover">
  <div class="cover-border"></div>
  <div class="cover-content">
    <div class="cover-tag">Coleção Premium</div>

    <?php if ($logoExists): ?>
      <img class="cover-logo" src="<?= $logoPath ?>" alt="<?= htmlspecialchars($marcaNome) ?>">
    <?php endif; ?>

    <div class="cover-title"><?= htmlspecialchars($marcaNome) ?></div>
    <div class="cover-subtitle"><?= htmlspecialchars($slogan) ?></div>

    <div class="cover-catalog"><?= htmlspecialchars($titulo) ?></div>
  </div>
  <div class="cover-year"><?= date('Y') ?></div>
</div>

<!-- ======= INTRO ======= -->
<div class="intro">
  <div class="small">Bem-vindo</div>
  <div class="intro-title"><?= htmlspecialchars($marcaNome) ?></div>
  <p>
    <?= nl2br(htmlspecialchars($config['sobre_texto'] ?? 'Este catálogo apresenta nossa seleção exclusiva de óculos, desenvolvida com atenção ao design, conforto e qualidade. Cada modelo foi pensado para complementar o seu estilo com sofisticação e personalidade.')) ?>
  </p>

  <div class="contact-box">
    <div class="small" style="margin-bottom:3mm">Contato</div>
    <?php if (!empty($config['contato_email'])): ?><div>E-mail: <?= htmlspecialchars($config['contato_email']) ?></div><?php endif; ?>
    <?php if (!empty($config['contato_telefone'])): ?><div>Telefone: <?= htmlspecialchars($config['contato_telefone']) ?></div><?php endif; ?>
    <?php if (!empty($config['contato_whatsapp'])): ?><div>WhatsApp: <?= htmlspecialchars($config['contato_whatsapp']) ?></div><?php endif; ?>
  </div>
</div>

<!-- ======= PRODUTOS ======= -->
<?php
// 4 produtos por página (2x2)
$chunks = array_chunk($produtos, 4);
foreach ($chunks as $indexPage => $grupo):
  $isLast = $indexPage === count($chunks) - 1;
?>
<div class="page-products" <?= !$isLast ? 'style="page-break-after: always;"' : '' ?>>

  <div class="page-header">
    <span class="page-header-brand"><?= htmlspecialchars($marcaNome) ?></span>
    <span class="page-header-ctx"><?= htmlspecialchars($titulo) ?></span>
  </div>

  <div class="clearfix">
    <?php foreach ($grupo as $p):
      $imgPath = !empty($p['imagem_principal']) ? UPLOADS_PATH . '/' . $p['imagem_principal'] : null;
      $imgExists = $imgPath && file_exists($imgPath);
    ?>
    <div class="prod">
      <div class="prod-img">
        <?php if ($imgExists): ?>
          <img src="<?= $imgPath ?>" alt="">
        <?php else: ?>
          <span class="placeholder">&#9678;</span>
        <?php endif; ?>
      </div>
      <div class="prod-sku"><?= htmlspecialchars($p['sku']) ?></div>
      <div class="prod-name"><?= htmlspecialchars($p['nome']) ?></div>

      <?php if (!empty($p['descricao_curta'])): ?>
        <div class="prod-desc"><?= htmlspecialchars(mb_substr($p['descricao_curta'], 0, 160)) ?></div>
      <?php endif; ?>

      <div class="prod-attr">
        <?php if (!empty($p['material_armacao'])): ?><strong>Armação:</strong> <?= htmlspecialchars($p['material_armacao']) ?><br><?php endif; ?>
        <?php if (!empty($p['tipo_lente'])): ?><strong>Lente:</strong> <?= htmlspecialchars($p['tipo_lente']) ?><br><?php endif; ?>
        <?php
          $detalhes = [];
          if (!empty($p['protecao_uv'])) $detalhes[] = htmlspecialchars($p['protecao_uv']);
          if (!empty($p['polarizado']))  $detalhes[] = 'Polarizado';
          if ($detalhes) echo '<strong>Proteção:</strong> ' . implode(' · ', $detalhes);
        ?>
        <?php if (!empty($p['medidas'])): ?><br><strong>Medidas:</strong> <?= htmlspecialchars($p['medidas']) ?><?php endif; ?>
      </div>

      <?php if (!empty($p['mostrar_preco']) && !empty($p['preco'])): ?>
        <div class="prod-price">R$ <?= number_format((float)$p['preco'], 2, ',', '.') ?></div>
      <?php endif; ?>
    </div>
    <?php endforeach; ?>
  </div>
</div>
<?php endforeach; ?>

<div class="page-footer">
  <?= htmlspecialchars($marcaNome) ?> · <?= date('Y') ?> · <?= htmlspecialchars($titulo) ?> · Página <span class="page-num"></span>
</div>

</body>
</html>