<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<?= view('bookings/_wizard_steps', ['step' => 6]) ?>

<div class="row">
    <div class="col-lg-5 mb-3">
        <div class="card shadow-sm">
            <div class="card-header">Pricing Summary</div>
            <div class="card-body">
                <div class="d-flex justify-content-between small mb-2"><span>Room Rate (<?= $nights ?> Night<?= $nights > 1 ? 's' : '' ?>)</span><span><?= format_money($pricing['roomTotal']) ?></span></div>
                <div class="d-flex justify-content-between small mb-2"><span>Services</span><span><?= format_money($pricing['servicesTotal']) ?></span></div>
                <hr class="my-2">
                <div class="d-flex justify-content-between small mb-2"><span>Subtotal</span><span><?= format_money($pricing['subtotal']) ?></span></div>
                <?php if ((float) $pricing['taxRate'] > 0): ?>
                <div class="d-flex justify-content-between small mb-2"><span>Taxes (<?= rtrim(rtrim($pricing['taxRate'], '0'), '.') ?>%)</span><span><?= format_money($pricing['taxAmount']) ?></span></div>
                <?php endif; ?>
                <hr class="my-2">
                <div class="d-flex justify-content-between fs-5">
                    <strong>Grand Total</strong>
                    <strong id="grandTotalDisplay" class="text-end"><?= format_money($pricing['grandTotal'], true, true) ?></strong>
                </div>
            </div>
        </div>
    </div>

    <div class="col-lg-7">
        <div class="card">
            <div class="card-header d-flex align-items-center gap-2">
                <i class="bi bi-credit-card" style="color: var(--brand);"></i> Payment Information
            </div>
            <div class="card-body">
                <form action="<?= site_url('bookings/wizard/payment') ?>" method="post" id="paymentForm" data-grand-total="<?= esc($pricing['grandTotal']) ?>">
                    <?= csrf_field() ?>

                    <div class="mb-3">
                        <label class="form-label small fw-semibold">How will this be paid?</label>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_choice" id="pc_none" value="none" checked>
                            <label class="form-check-label small" for="pc_none">No payment now — confirm the booking, collect payment during the stay</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_choice" id="pc_now" value="now">
                            <label class="form-check-label small" for="pc_now">Collect payment now (cash, mobile money, card, or bank transfer)</label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="payment_choice" id="pc_link" value="link">
                            <label class="form-check-label small" for="pc_link">Send an online payment link (Hubtel) — booking is held until paid</label>
                        </div>
                    </div>

                    <div id="paymentDetails" class="d-none">
                        <div class="row g-3 mb-3">
                            <div class="col-md-6" id="methodField">
                                <label class="form-label small fw-semibold">Payment Method</label>
                                <select class="form-select" name="payment_method">
                                    <?php foreach ($lookups->manualPaymentMethods() as $key => $meta): ?>
                                        <option value="<?= esc($key) ?>"><?= esc($meta['label']) ?></option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small fw-semibold" id="amountLabel">Amount Paid (GHS)</label>
                                <input type="number" step="0.01" min="0.01" class="form-control" name="payment_amount" id="paymentAmount">
                            </div>
                        </div>

                        <div class="row row-cols-3 g-2 mb-3" id="paymentStatusPreview">
                            <div class="col"><div class="text-muted small">Amount Paid</div><div class="fw-semibold" id="previewPaid">GHS 0.00</div></div>
                            <div class="col"><div class="text-muted small">Balance</div><div class="fw-semibold text-danger" id="previewBalance">GHS 0.00</div></div>
                            <div class="col"><div class="text-muted small">Status</div><div><span class="badge bg-secondary" id="previewStatus">Unpaid</span></div></div>
                        </div>
                    </div>

                    <div class="d-flex gap-2 mt-2">
                        <a href="<?= site_url('bookings/wizard/services') ?>" class="btn btn-outline-secondary">Back</a>
                        <button type="submit" class="btn btn-primary"><i class="bi bi-check2-circle me-1"></i>Confirm Reservation</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
const grandTotal = parseFloat(document.getElementById('paymentForm').dataset.grandTotal);
const detailsEl = document.getElementById('paymentDetails');
const methodField = document.getElementById('methodField');
const amountLabel = document.getElementById('amountLabel');

function updateChoiceUi() {
    const choice = document.querySelector('input[name="payment_choice"]:checked').value;
    detailsEl.classList.toggle('d-none', choice === 'none');
    methodField.classList.toggle('d-none', choice === 'link');
    amountLabel.textContent = choice === 'link' ? 'Deposit Amount (GHS)' : 'Amount Paid (GHS)';
    updatePreview();
}

function updatePreview() {
    const paid = parseFloat(document.getElementById('paymentAmount').value) || 0;
    const balance = Math.max(0, grandTotal - paid);
    document.getElementById('previewPaid').textContent = 'GHS ' + paid.toFixed(2);
    document.getElementById('previewBalance').textContent = 'GHS ' + balance.toFixed(2);

    const statusEl = document.getElementById('previewStatus');
    if (paid <= 0) {
        statusEl.textContent = 'Unpaid';
        statusEl.className = 'badge bg-secondary';
    } else if (paid >= grandTotal) {
        statusEl.textContent = 'Paid';
        statusEl.className = 'badge bg-success';
    } else {
        statusEl.textContent = 'Partially Paid';
        statusEl.className = 'badge bg-warning text-dark';
    }
}

document.querySelectorAll('input[name="payment_choice"]').forEach((el) => el.addEventListener('change', updateChoiceUi));
document.getElementById('paymentAmount').addEventListener('input', updatePreview);
updateChoiceUi();
</script>
<?= $this->endSection() ?>
