<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Account Statement - <?php echo $account->account_number; ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            font-size: 12px;
            line-height: 1.5;
            color: #333;
            padding: 20px;
            background: #fff;
        }
        .header {
            text-align: center;
            border-bottom: 2px solid #1E74FD;
            padding-bottom: 20px;
            margin-bottom: 20px;
        }
        .header h1 {
            color: #1E74FD;
            font-size: 24px;
            margin-bottom: 5px;
        }
        .header p {
            color: #666;
        }
        .account-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
        .account-info table {
            width: 100%;
        }
        .account-info td {
            padding: 5px 10px;
        }
        .account-info .label {
            color: #666;
            width: 150px;
        }
        .account-info .value {
            font-weight: bold;
        }
        .summary {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        .summary-box {
            flex: 1;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
        }
        .summary-box.credits {
            background: #d4edda;
            border: 1px solid #c3e6cb;
        }
        .summary-box.debits {
            background: #f8d7da;
            border: 1px solid #f5c6cb;
        }
        .summary-box h3 {
            font-size: 11px;
            color: #666;
            margin-bottom: 5px;
            text-transform: uppercase;
        }
        .summary-box .amount {
            font-size: 18px;
            font-weight: bold;
        }
        .summary-box.credits .amount {
            color: #28a745;
        }
        .summary-box.debits .amount {
            color: #dc3545;
        }
        .transactions-table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 20px;
        }
        .transactions-table th {
            background: #1E74FD;
            color: #fff;
            padding: 10px;
            text-align: left;
            font-size: 11px;
            text-transform: uppercase;
        }
        .transactions-table td {
            padding: 10px;
            border-bottom: 1px solid #eee;
        }
        .transactions-table tr:nth-child(even) {
            background: #f8f9fa;
        }
        .credit {
            color: #28a745;
        }
        .debit {
            color: #dc3545;
        }
        .date-header {
            background: #e9ecef;
            padding: 8px 10px;
            font-weight: bold;
            margin-top: 15px;
        }
        .footer {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #ddd;
            text-align: center;
            color: #666;
            font-size: 10px;
        }
        .text-right {
            text-align: right;
        }
        .text-center {
            text-align: center;
        }
        @media print {
            body {
                padding: 0;
            }
            .no-print {
                display: none;
            }
        }
        .print-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #1E74FD;
            color: #fff;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }
        .print-btn:hover {
            background: #1560d4;
        }
    </style>
</head>
<body>
    <button class="print-btn no-print" onclick="window.print()">
        🖨️ Print / Save as PDF
    </button>

    <div class="header">
        <h1><?php echo get_app_name(); ?></h1>
        <p>Account Statement</p>
    </div>

    <div class="account-info">
        <table>
            <tr>
                <td class="label">Account Number:</td>
                <td class="value"><?php echo $account->account_number; ?></td>
                <td class="label">Account Type:</td>
                <td class="value"><?php echo ucfirst($account->account_type); ?></td>
            </tr>
            <tr>
                <td class="label">Account Name:</td>
                <td class="value"><?php echo htmlspecialchars($account->account_name); ?></td>
                <td class="label">Currency:</td>
                <td class="value"><?php echo $account->currency; ?></td>
            </tr>
            <tr>
                <td class="label">Statement Period:</td>
                <td class="value" colspan="3"><?php echo date('F d, Y', strtotime($date_from)); ?> - <?php echo date('F d, Y', strtotime($date_to)); ?></td>
            </tr>
        </table>
    </div>

    <?php
    // Calculate totals
    $total_credits = 0;
    $total_debits = 0;
    $opening_balance = $account->balance ?? 0;
    
    foreach ($transactions as $t) {
        if ($t->destination_account_id == $account->id) {
            $total_credits += $t->amount;
        } else {
            $total_debits += $t->amount;
        }
    }
    ?>

    <div class="summary">
        <div class="summary-box credits">
            <h3>Total Credits</h3>
            <div class="amount"><?php echo format_money($total_credits, $account->currency); ?></div>
        </div>
        <div class="summary-box debits">
            <h3>Total Debits</h3>
            <div class="amount"><?php echo format_money($total_debits, $account->currency); ?></div>
        </div>
    </div>

    <?php if (empty($transactions)): ?>
    <p class="text-center" style="padding: 40px; color: #666;">No transactions found for this period.</p>
    <?php else: ?>
    
    <table class="transactions-table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Reference</th>
                <th>Description</th>
                <th class="text-right">Debit</th>
                <th class="text-right">Credit</th>
                <th class="text-right">Balance</th>
            </tr>
        </thead>
        <tbody>
            <?php 
            $running_balance = $opening_balance;
            // Sort transactions by date ascending for balance calculation
            usort($transactions, function($a, $b) {
                return strtotime($a->created_at) - strtotime($b->created_at);
            });
            
            foreach ($transactions as $txn): 
                $is_credit = ($txn->destination_account_id == $account->id);
                if ($is_credit) {
                    $running_balance += $txn->amount;
                } else {
                    $running_balance -= $txn->amount;
                }
            ?>
            <tr>
                <td><?php echo date('M d, Y H:i', strtotime($txn->created_at)); ?></td>
                <td><?php echo $txn->reference; ?></td>
                <td><?php echo ucfirst($txn->type); ?></td>
                <td class="text-left debit">
                    <?php echo !$is_credit ? format_money($txn->amount, $txn->currency) : '-'; ?>
                </td>
                <td class="text-left credit">
                    <?php echo $is_credit ? format_money($txn->amount, $txn->currency) : '-'; ?>
                </td>
                <td class="text-left"><?php echo format_money($running_balance, $account->currency); ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
    
    <?php endif; ?>

    <div class="footer">
        <p>This is a computer-generated statement and does not require a signature.</p>
        <p>Generated on <?php echo date('F d, Y \a\t H:i:s'); ?></p>
        <p>&copy; <?php echo date('Y'); ?> <?php echo get_app_name(); ?>. All rights reserved.</p>
    </div>

    <script>
        // Auto-trigger print dialog when page loads (optional)
        // window.onload = function() { window.print(); }
    </script>
</body>
</html>
