{{ template "header" . }}

<div style="background: #064e3b; color: white; padding: 20px; border-radius: 8px; margin-bottom: 20px; text-align: center;">
    <h2 style="margin: 0; text-transform: uppercase; letter-spacing: 2px;">Yearly Summary Report - {{ .Year }}</h2>
    <p style="margin: 5px 0 0 0; opacity: 0.8; font-size: 12px; font-weight: bold;">Operational Intelligence Historical Archive</p>
</div>

<div style="display: flex; justify-content: space-between; margin-bottom: 30px;">
    <div style="flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; margin-right: 10px; text-align: center;">
        <p style="margin: 0; font-size: 10px; color: #64748b; font-weight: bold; text-transform: uppercase;">Total Transaksi</p>
        <h3 style="margin: 5px 0 0 0; color: #0f172a;">{{ .DocCount }}</h3>
    </div>
    <div style="flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; padding: 15px; border-radius: 8px; margin-right: 10px; text-align: center;">
        <p style="margin: 0; font-size: 10px; color: #64748b; font-weight: bold; text-transform: uppercase;">Total Pelanggan</p>
        <h3 style="margin: 5px 0 0 0; color: #0f172a;">{{ .CustomerCount }}</h3>
    </div>
    <div style="flex: 1; background: #f0fdf4; border: 1px solid #bbf7d0; padding: 15px; border-radius: 8px; text-align: center;">
        <p style="margin: 0; font-size: 10px; color: #15803d; font-weight: bold; text-transform: uppercase;">Total Nilai (IDR)</p>
        <h3 style="margin: 5px 0 0 0; color: #166534;">{{ formatCurrency .TotalAmount }}</h3>
    </div>
</div>

<h4 style="border-bottom: 2px solid #064e3b; padding-bottom: 5px; margin-bottom: 15px; text-transform: uppercase; font-size: 12px;">Data Transaksi Tahunan</h4>

<table>
    <thead>
        <tr>
            <th style="width: 5%;">No</th>
            <th style="width: 15%;">PSO No.</th>
            <th style="width: 15%;">PO No.</th>
            <th style="width: 25%;">Customer</th>
            <th style="width: 15%;">Tanggal</th>
            <th style="width: 10%;">TOP</th>
            <th style="width: 15%;">Amount</th>
        </tr>
    </thead>
    <tbody>
        {{ range $index, $item := .Records }}
        <tr>
            <td class="text-center">{{ add $index 1 }}</td>
            <td class="font-bold">{{ $item.PsoNo }}</td>
            <td>{{ $item.PoNo }}</td>
            <td>{{ $item.CustomerName }}</td>
            <td class="text-center">{{ if $item.VerifiedAt }}{{ formatDate $item.VerifiedAt }}{{ else }}-{{ end }}</td>
            <td class="text-center">{{ $item.TOP }}d</td>
            <td class="text-right font-bold">{{ formatCurrency $item.Amount }}</td>
        </tr>
        {{ end }}
    </tbody>
    <tfoot>
        <tr style="background-color: #f1f5f9; font-weight: bold;">
            <td colspan="6" class="text-right uppercase">Total Akumulasi</td>
            <td class="text-right">{{ formatCurrency .TotalAmount }}</td>
        </tr>
    </tfoot>
</table>

<div style="margin-top: 40px; text-align: right; font-size: 10px; color: #94a3b8; font-style: italic;">
    Dokumen ini digenerate secara otomatis oleh SAS Operational Hub pada {{ .GeneratedAt }}.
</div>

{{ template "footer" . }}