<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Supplier Ledger - <?= e($supplier['name']) ?></title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { 
            font-family: 'Arial', sans-serif; 
            font-size: 16px; 
            line-height: 1.5; 
            color: #333;
            background: white;
        }
        .ledger-container { 
            max-width: 210mm; 
            margin: 0 auto; 
            padding: 20mm; 
            background: white; 
        }
        .header { 
            display: flex; 
            justify-content: space-between; 
            margin-bottom: 30px; 
            border-bottom: 2px solid #333; 
            padding-bottom: 20px; 
        }
        .company-info h1 { 
            font-size: 32px; 
            font-weight: bold; 
            margin-bottom: 5px; 
        }
        .company-info p { 
            margin-bottom: 3px; 
            font-size: 14px;
        }
        .ledger-info { 
            text-align: right; 
        }
        .ledger-info h2 { 
            font-size: 28px; 
            margin-bottom: 10px; 
        }
        .ledger-info p { 
            margin-bottom: 3px; 
            font-size: 14px;
        }
        .supplier-info { 
            margin-bottom: 20px; 
        }
        .supplier-info h3 { 
            font-size: 18px; 
            margin-bottom: 10px; 
            border-bottom: 1px solid #ddd; 
            padding-bottom: 5px; 
        }
        .supplier-info p { 
            margin-bottom: 3px; 
            font-size: 14px;
        }
        .summary-cards {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            gap: 15px;
            margin-bottom: 20px;
        }
        .summary-card {
            border: 1px solid #ddd;
            padding: 15px;
            background: #f9f9f9;
            border-radius: 4px;
        }
        .summary-card label {
            font-size: 12px;
            color: #666;
            text-transform: uppercase;
            font-weight: bold;
            display: block;
            margin-bottom: 5px;
        }
        .summary-card .value {
            font-size: 20px;
            font-weight: bold;
            color: #333;
        }
        .transactions-table { 
            width: 100%; 
            border-collapse: collapse; 
            margin-bottom: 20px; 
        }
        .transactions-table th { 
            background: #f5f5f5; 
            padding: 12px; 
            text-align: left; 
            border-bottom: 2px solid #333; 
            font-weight: bold; 
            font-size: 14px; 
        }
        .transactions-table td { 
            padding: 10px 12px; 
            border-bottom: 1px solid #ddd; 
            font-size: 14px; 
        }
        .transactions-table .text-right { 
            text-align: right; 
        }
        .transactions-table .text-center {
            text-align: center;
        }
        .transactions-table .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 3px;
            font-size: 12px;
            font-weight: bold;
        }
        .badge.purchase {
            background: #ffe5e5;
            color: #c41e3a;
        }
        .badge.payment {
            background: #e5f5e5;
            color: #1e7a1e;
        }
        .badge.return {
            background: #e5e5ff;
            color: #1e3ac4;
        }
        .badge.adjustment {
            background: #fff5e5;
            color: #d4801f;
        }
        .badge.opening_balance {
            background: #f0f0f0;
            color: #555;
        }
        .footer { 
            margin-top: 40px; 
            padding-top: 20px; 
            border-top: 1px solid #ddd; 
            text-align: center; 
            color: #666; 
            font-size: 14px; 
        }
        .printed-at {
            text-align: center;
            color: #999;
            font-size: 12px;
            margin-top: 10px;
        }
        @media print {
            body { 
                background: white;
                margin: 0;
                padding: 0;
            }
            .ledger-container { 
                margin: 0; 
                padding: 0; 
                max-width: none; 
            }
        }
    </style>
</head>
<body>
    <div class="ledger-container">
        <div class="header">
            <div class="company-info">
                <h1><?= e($tenant['business_name'] ?? 'Your Company') ?></h1>
                <p><?= e($tenant['business_address'] ?? '') ?></p>
                <p><?= e($tenant['business_phone'] ?? '') ?></p>
                <p><?= e($tenant['business_email'] ?? '') ?></p>
            </div>
            <div class="ledger-info">
                <h2>SUPPLIER LEDGER</h2>
                <p><strong>Report Date:</strong> <?= date('F j, Y') ?></p>
                <p><strong>Generated:</strong> <?= date('H:i:s') ?></p>
            </div>
        </div>
        
        <div class="supplier-info">
            <h3>Supplier Information</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                <div>
                    <p style="margin-bottom: 15px;">
                        <strong>Name:</strong> <?= e($supplier['name']) ?><br>
                        <strong>Code:</strong> <?= e($supplier['code'] ?? 'N/A') ?><br>
                        <strong>Phone:</strong> <?= e($supplier['phone'] ?? 'N/A') ?><br>
                        <strong>Email:</strong> <?= e($supplier['email'] ?? 'N/A') ?>
                    </p>
                </div>
                <div>
                    <p>
                        <strong>Address:</strong><br>
                        <?= e($supplier['address'] ?? 'N/A') ?><br>
                        <strong style="margin-top: 10px; display: block;">Current Balance:</strong>
                        <span style="font-size: 18px; font-weight: bold; color: <?= ($summary['current_balance'] ?? 0) > 0 ? '#c41e3a' : '#1e7a1e' ?>;">
                            <?= money($summary['current_balance'] ?? 0) ?>
                        </span>
                    </p>
                </div>
            </div>
        </div>

        <div class="summary-cards">
            <div class="summary-card">
                <label>Opening Balance</label>
                <div class="value"><?= money($ledger['opening_balance'] ?? 0) ?></div>
            </div>
            <div class="summary-card">
                <label>Total Debit</label>
                <div class="value" style="color: #c41e3a;"><?= money($summary['total_debit'] ?? 0) ?></div>
            </div>
            <div class="summary-card">
                <label>Total Credit</label>
                <div class="value" style="color: #1e7a1e;"><?= money($summary['total_credit'] ?? 0) ?></div>
            </div>
            <div class="summary-card">
                <label>Current Balance</label>
                <div class="value" style="color: <?= ($summary['current_balance'] ?? 0) > 0 ? '#c41e3a' : '#1e7a1e' ?>;">
                    <?= money($summary['current_balance'] ?? 0) ?>
                </div>
            </div>
        </div>

        <div style="margin-bottom: 20px; font-size: 12px; color: #666;">
            <strong>Report Period:</strong> 
            <?= date('F j, Y', strtotime($filters['date_from'])) ?> to <?= date('F j, Y', strtotime($filters['date_to'])) ?>
            <?php if (!empty($filters['transaction_type'])): ?>
            | <strong>Transaction Type:</strong> <?= ucfirst(str_replace('_', ' ', $filters['transaction_type'])) ?>
            <?php endif; ?>
        </div>

        <table class="transactions-table">
            <thead>
                <tr>
                    <th style="width: 100px;">Date</th>
                    <th style="width: 100px;">Type</th>
                    <th style="width: 120px;">Reference</th>
                    <th style="width: 200px;">Description</th>
                    <th style="width: 100px; text-align: right;">Debit</th>
                    <th style="width: 100px; text-align: right;">Credit</th>
                    <th style="width: 100px; text-align: right;">Balance</th>
                    <th style="width: 100px;">User</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($ledger['data'])): ?>
                <tr>
                    <td colspan="8" style="text-align: center; padding: 20px;">No transactions found.</td>
                </tr>
                <?php else: foreach ($ledger['data'] as $entry): ?>
                <tr>
                    <td><?= date('M j, Y', strtotime($entry['transaction_date'])) ?></td>
                    <td>
                        <span class="badge <?= $entry['transaction_type'] ?>">
                            <?= ucfirst(str_replace('_', ' ', $entry['transaction_type'])) ?>
                        </span>
                    </td>
                    <td><?= e($entry['reference_no'] ?? '-') ?></td>
                    <td><?= e($entry['description'] ?? '-') ?></td>
                    <td class="text-right">
                        <?= $entry['debit'] > 0 ? money($entry['debit']) : '-' ?>
                    </td>
                    <td class="text-right">
                        <?= $entry['credit'] > 0 ? money($entry['credit']) : '-' ?>
                    </td>
                    <td class="text-right">
                        <strong><?= money($entry['balance'] ?? 0) ?></strong>
                    </td>
                    <td><?= e($entry['user_name'] ?? '-') ?></td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
        </table>

        <div class="footer">
            <div><?= e($tenant['business_name'] ?? 'Your Company') ?></div>
            <div class="printed-at">
                This is a computer-generated ledger report and does not require a signature.
                <br>Printed on: <?= date('F j, Y \a\t H:i:s') ?>
            </div>
        </div>
    </div>

    <script>
        window.print();
        window.onafterprint = function() {
            window.close();
        };
    </script>
</body>
</html>
