<div class="page-header">
    <div>
        <h1>Customer Ledger</h1>
        <div class="page-subtitle">Track customer transactions and due balances</div>
    </div>
    <div class="flex gap-2">
        <a href="<?= APP_URL ?>/customers" class="btn btn-secondary">View Customers</a>
    </div>
</div>

<!-- Summary Cards -->
<div class="grid-4 gap-3 mb-6">
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Customers with Due</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold"><?= count($customers) ?></div>
        </div>
    </div>
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Total Due</h3>
        </div>
        <div class="p-4">
            <div class="text-2xl font-bold text-red-600"><?= money(array_sum(array_column($customers, 'balance'))) ?></div>
        </div>
    </div>
</div>

<!-- Customers with Due Balances -->
<div class="card">
    <div class="card-header">
        <h3 class="card-title">Customers with Due Balances</h3>
    </div>
    <div class="overflow-x-auto">
        <table class="data-table">
            <thead>
                <tr>
                    <th class="text-left">Customer</th>
                    <th class="text-left">Phone</th>
                    <th class="text-left">Email</th>
                    <th class="text-center">Due Balance</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($customers)): ?>
                <tr>
                    <td colspan="5" class="text-center" style="padding: 24px 10px;">No customers with due balances.</td>
                </tr>
                <?php else: foreach ($customers as $customer): ?>
                <tr>
                    <td class="text-left font-bold"><?= e($customer['name']) ?></td>
                    <td class="text-left"><?= e($customer['phone']) ?></td>
                    <td class="text-left"><?= e($customer['email']) ?></td>
                    <td class="text-center font-bold text-red-600"><?= money($customer['balance']) ?></td>
                    <td class="text-center">
                        <a href="<?= APP_URL ?>/customer-ledger/<?= $customer['id'] ?>" class="btn btn-primary btn-sm">View Ledger</a>
                    </td>
                </tr>
                <?php endforeach; endif; ?>
            </tbody>
        </table>
    </div>
</div>
