<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Fotos Vendidas — <?= h($event['name']) ?></title>
<style>
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#1a1a1a;background:#f5f5f5;font-size:13px;}

/* Barra de acções */
.actions{background:#1a1a1a;padding:14px 32px;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:10;}
.actions h1{color:#fff;font-size:15px;font-weight:600;flex:1;}
.btn-print{background:#fff;color:#1a1a1a;border:none;padding:8px 20px;border-radius:7px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
.btn-back{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2);padding:7px 16px;border-radius:7px;font-size:13px;text-decoration:none;}

.doc{max-width:680px;margin:24px auto;padding:0 24px 60px;}

/* Cabeçalho */
.header{background:#1a1a1a;color:#fff;border-radius:12px;padding:28px 32px;margin-bottom:20px;}
.header-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#9ca3af;margin-bottom:8px;}
.header-title{font-size:24px;font-weight:800;margin-bottom:6px;}
.header-sub{font-size:13px;color:#9ca3af;}
.header-note{margin-top:14px;background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.2);border-radius:8px;padding:10px 14px;font-size:12px;color:#4ade80;}

/* Resumo */
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.summary-card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:16px;}
.summary-card .val{font-size:26px;font-weight:800;color:#1a1a1a;}
.summary-card .lbl{font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:.06em;margin-top:3px;}

/* Tabela */
.tbl-wrap{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden;}
.tbl{width:100%;border-collapse:collapse;}
.tbl thead tr{background:#f8f8f8;}
.tbl th{padding:11px 16px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#9ca3af;border-bottom:2px solid #e5e5e5;}
.tbl th.right{text-align:right;}
.tbl td{padding:11px 16px;border-bottom:1px solid #f0f0f0;color:#374151;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr:hover td{background:#fafafa;}
.fname{font-family:monospace;font-size:12px;color:#1a1a1a;}
.qty{font-size:16px;font-weight:800;color:#1a1a1a;text-align:right;}
.orders-badge{text-align:right;color:#9ca3af;font-size:12px;}
.rank{color:#d1d5db;font-size:12px;width:28px;}

/* Barra visual de quantidade */
.bar-cell{padding:11px 16px 11px 4px;}
.bar-bg{background:#f0f0f0;border-radius:999px;height:6px;overflow:hidden;}
.bar-fill{background:#1a1a1a;height:6px;border-radius:999px;}

/* Totais */
.totals{background:#1a1a1a;color:#fff;border-radius:12px;padding:18px 24px;margin-top:16px;display:flex;justify-content:space-between;align-items:center;}
.totals .t-lbl{font-size:11px;color:#9ca3af;margin-bottom:3px;}
.totals .t-val{font-size:20px;font-weight:800;}

.footer{margin-top:24px;text-align:center;font-size:11px;color:#9ca3af;}

@media print {
  .actions{display:none!important;}
  body{background:#fff;}
  .doc{margin:0;padding:16px;max-width:100%;}
  .header,.totals{-webkit-print-color-adjust:exact;print-color-adjust:exact;}
  .tbl tr{break-inside:avoid;}
}
</style>
</head>
<body>

<div class="actions">
  <h1>📋 Fotos Vendidas — <?= h($event['name']) ?></h1>
  <a href="javascript:window.close()||history.back()" class="btn-back">← Voltar</a>
  <button class="btn-print" onclick="window.print()">🖨 Imprimir / PDF</button>
</div>

<div class="doc">

  <!-- Cabeçalho -->
  <div class="header">
    <div class="header-badge">Lista de Fotografias Vendidas</div>
    <div class="header-title"><?= h($event['name']) ?></div>
    <div class="header-sub">
      <?php if($event['date_event']): ?>📅 <?= date('d/m/Y',strtotime($event['date_event'])) ?> &nbsp;·&nbsp; <?php endif; ?>
      Gerado em <?= date('d/m/Y \à\s H:i') ?>
    </div>
    <div class="header-note">
      ✓ Inclui apenas encomendas com estado <strong>Pago</strong> ou <strong>Enviado</strong>
    </div>
  </div>

  <!-- Resumo -->
  <div class="summary">
    <div class="summary-card">
      <div class="val"><?= $totalLinhas ?></div>
      <div class="lbl">Fotografias diferentes</div>
    </div>
    <div class="summary-card">
      <div class="val"><?= $totalFotos ?></div>
      <div class="lbl">Cópias no total</div>
    </div>
    <div class="summary-card">
      <?php
      $maxQty = !empty($photos) ? max(array_column($photos,'total_qty')) : 1;
      $maisVendida = !empty($photos) ? $photos[0]['filename'] : '—';
      ?>
      <div class="val"><?= $maxQty ?></div>
      <div class="lbl">Máx. cópias de uma foto</div>
    </div>
  </div>

  <?php if(empty($photos)): ?>
  <div style="background:#fff;border:1px solid #e5e5e5;border-radius:12px;padding:48px;text-align:center;color:#9ca3af;">
    <div style="font-size:32px;margin-bottom:8px;">📭</div>
    <div style="font-weight:600;margin-bottom:4px;">Nenhuma venda validada</div>
    <div style="font-size:12px;">Não existem encomendas com estado Pago ou Enviado neste evento.</div>
  </div>
  <?php else: ?>

  <!-- Tabela -->
  <div class="tbl-wrap">
    <table class="tbl">
      <thead>
        <tr>
          <th style="width:28px;">#</th>
          <th>Fotografia</th>
          <th style="width:140px;"></th><!-- barra visual -->
          <th class="right" style="width:70px;">Cópias</th>
          <th class="right" style="width:80px;">Encomendas</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach($photos as $i => $p):
          $pct = $maxQty > 0 ? round($p['total_qty'] / $maxQty * 100) : 0;
        ?>
        <tr>
          <td class="rank"><?= $i+1 ?></td>
          <td>
            <span class="fname"><?= h(fname($p['filename'])) ?></span>
          </td>
          <td class="bar-cell">
            <div class="bar-bg">
              <div class="bar-fill" style="width:<?= $pct ?>%"></div>
            </div>
          </td>
          <td class="qty">×<?= $p['total_qty'] ?></td>
          <td class="orders-badge"><?= $p['num_orders'] ?> enc.</td>
        </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>

  <!-- Totais -->
  <div class="totals">
    <div>
      <div class="t-lbl">Fotografias diferentes vendidas</div>
      <div class="t-val"><?= $totalLinhas ?></div>
    </div>
    <div style="text-align:right;">
      <div class="t-lbl">Total de cópias</div>
      <div class="t-val"><?= $totalFotos ?> cópia<?= $totalFotos!=1?'s':'' ?></div>
    </div>
  </div>

  <?php endif; ?>

  <div class="footer">
    <?= h(config('app.name')) ?> &nbsp;·&nbsp; <?= h($event['name']) ?> &nbsp;·&nbsp; Apenas encomendas Pagas / Enviadas &nbsp;·&nbsp; <?= date('d/m/Y') ?>
  </div>

</div>

<script>
setTimeout(() => window.print(), 500);
</script>
</body>
</html>
