<div class="page-header">
    <div>
        <a href="<?= APP_URL ?>/sales" class="btn btn-ghost btn-sm mb-4" style="padding-left:0;">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>
            Back to Sales
        </a>
        <h1>Pay Sale: <?= e($sale['sale_no']) ?></h1>
    </div>
</div>

<div class="card">
    <div class="p-6">
        <div class="grid-2 gap-4 mb-6">
            <div class="card" style="background: #f9f9f9;">
                <div class="p-4">
                    <div class="text-sm text-muted mb-2">Total Amount</div>
                    <div class="text-2xl font-bold"><?= money($sale['total']) ?></div>
                </div>
            </div>
            <div class="card" style="background: #f9f9f9;">
                <div class="p-4">
                    <div class="text-sm text-muted mb-2">Amount Paid</div>
                    <div class="text-2xl font-bold"><?= money($sale['amount_paid']) ?></div>
                </div>
            </div>
        </div>

        <div class="card mb-6" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
            <div class="p-6">
                <div class="text-sm opacity-80 mb-2">Due Amount</div>
                <div class="text-3xl font-bold"><?= money($sale['total'] - $sale['amount_paid']) ?></div>
            </div>
        </div>

        <form action="<?= APP_URL ?>/sales/<?= $sale['id'] ?>/process-payment" method="POST">
            <?= Security::csrfField() ?>

            <div class="form-row mb-4">
                <div>
                    <label class="form-label">Payment Amount</label>
                    <input type="number" name="payment_amount" class="form-control" value="<?= $sale['total'] - $sale['amount_paid'] ?>" step="0.01" required>
                </div>
                <div>
                    <label class="form-label">Payment Method</label>
                    <select name="payment_method" class="form-control" required>
                        <option value="cash" <?= $sale['payment_method'] == 'cash' ? 'selected' : '' ?>>Cash</option>
                        <option value="card" <?= $sale['payment_method'] == 'card' ? 'selected' : '' ?>>Card</option>
                        <option value="bank_transfer" <?= $sale['payment_method'] == 'bank_transfer' ? 'selected' : '' ?>>Bank Transfer</option>
                        <option value="mobile_money" <?= $sale['payment_method'] == 'mobile_money' ? 'selected' : '' ?>>Mobile Money</option>
                    </select>
                </div>
            </div>

            <div class="form-group mb-4">
                <label class="form-label">Payment Notes</label>
                <textarea name="notes" class="form-control" rows="2" placeholder="Optional notes about this payment..."></textarea>
            </div>

            <div class="flex gap-2">
                <button type="submit" class="btn btn-primary">Process Payment</button>
                <a href="<?= APP_URL ?>/sales" class="btn btn-outline">Cancel</a>
            </div>
        </form>
    </div>
</div>
