<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Cetak Laporan Keuangan <%= filterYear %></title>
  <style>
    body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: #111; line-height: 1.5; margin: 0; padding: 40px; background: #fff; }
    .header { text-align: center; margin-bottom: 40px; border-bottom: 2px solid #000; padding-bottom: 20px; }
    .header h1 { margin: 0 0 5px 0; font-size: 24px; text-transform: uppercase; }
    .header p { margin: 0; color: #555; }
    
    .summary-box { display: flex; justify-content: space-between; margin-bottom: 30px; border: 1px solid #000; padding: 20px; }
    .summary-item { text-align: center; flex: 1; }
    .summary-item:not(:last-child) { border-right: 1px solid #ddd; }
    .summary-label { font-size: 12px; font-weight: bold; text-transform: uppercase; color: #555; margin-bottom: 5px; }
    .summary-val { font-size: 20px; font-weight: bold; }
    
    table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
    th, td { border: 1px solid #000; padding: 10px; text-align: left; font-size: 14px; }
    th { background: #f5f5f5; font-weight: bold; text-transform: uppercase; font-size: 12px; }
    .num { text-align: right; }
    
    @media print {
      body { padding: 0; }
      @page { margin: 1cm; }
    }
  </style>
</head>
<body onload="window.print()">

<div class="header">
  <h1>Laporan Laba / Rugi Keuangan</h1>
  <p><strong><%= company %></strong> &bull; Periode Tahun <%= filterYear %></p>
</div>

<div class="summary-box">
  <div class="summary-item">
    <div class="summary-label">Total Pemasukan</div>
    <div class="summary-val">Rp <%= cashInYear.toLocaleString('id-ID') %></div>
  </div>
  <div class="summary-item">
    <div class="summary-label">Total Pengeluaran</div>
    <div class="summary-val" style="color: #d32f2f;">-Rp <%= expensesYear.toLocaleString('id-ID') %></div>
  </div>
  <div class="summary-item">
    <div class="summary-label">Laba Bersih (Net Profit)</div>
    <div class="summary-val" style="color: #2e7d32;">Rp <%= netProfitYear.toLocaleString('id-ID') %></div>
  </div>
</div>

<h3>Rincian Kategori Pengeluaran Terbesar (<%= filterYear %>)</h3>
<table>
  <thead>
    <tr>
      <th style="width: 50px; text-align: center;">No</th>
      <th>Kategori / Pos Pengeluaran</th>
      <th class="num">Total Biaya (Rp)</th>
    </tr>
  </thead>
  <tbody>
    <% if(expensesByCategory.length === 0) { %>
      <tr><td colspan="3" style="text-align: center; color: #666;">Tidak ada data pengeluaran dicatat tahun ini.</td></tr>
    <% } %>
    <% let totalExp = 0; expensesByCategory.forEach((c, i) => { totalExp += c.total; %>
      <tr>
        <td style="text-align: center;"><%= i+1 %></td>
        <td><%= c.category %></td>
        <td class="num"><%= c.total.toLocaleString('id-ID') %></td>
      </tr>
    <% }) %>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="2" style="text-align: right;">Total Pengeluaran Keseluruhan:</th>
      <th class="num" style="font-size: 16px;">Rp <%= totalExp.toLocaleString('id-ID') %></th>
    </tr>
  </tfoot>
</table>

<div style="margin-top: 50px; text-align: right; font-size: 14px;">
  <p>Dicetak pada: <%= formatDateLocal(new Date().toISOString()) %></p>
  <br><br><br>
  <p><strong>( ______________________ )</strong></p>
  <p style="margin-right: 30px;">Bag. Keuangan</p>
</div>

</body>
</html>
