{% extends 'rental_app/base_rental.html' %}
{% load static %}
{% block title %}Payment Checkout{% endblock %}

{% block content %}
<style>
    .payment-method-list {
        display: grid;
        gap: 0.9rem;
    }

    .payment-method-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        border: 1.5px solid #dee2e6;
        border-radius: 1rem;
        padding: 0.95rem 1rem;
        background: #ffffff;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
        min-height: 78px;
    }

    .payment-method-card:hover {
        border-color: #adb5bd;
        box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.06);
    }

    .payment-method-left {
        display: flex;
        align-items: center;
        gap: 0.9rem;
        min-width: 0;
    }

    .payment-method-icon {
        width: 46px;
        height: 46px;
        border-radius: 0.85rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.2rem;
        flex-shrink: 0;
    }

    .stripe-card .payment-method-icon {
        background: #eef4ff;
        color: #635bff;
    }

    .paypal-card .payment-method-icon {
        background: #eef7ff;
        color: #0070ba;
    }

    .payment-method-text {
        min-width: 0;
    }

    .payment-method-title {
        font-weight: 700;
        color: #212529;
        line-height: 1.2;
    }

    .payment-method-subtitle {
        font-size: 0.9rem;
        color: #6c757d;
        line-height: 1.3;
        margin-top: 0.15rem;
    }

    .payment-method-right {
        display: flex;
        align-items: center;
        gap: 0.65rem;
        flex-shrink: 0;
    }

    .payment-method-status {
        font-size: 0.82rem;
        font-weight: 600;
        color: #198754;
        background: #edf9f1;
        border: 1px solid #cdebd7;
        border-radius: 999px;
        padding: 0.3rem 0.65rem;
    }

    .payment-method-check {
        color: #198754;
        font-size: 1.15rem;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        line-height: 1;
    }

    .payment-method-disabled-badge {
        font-size: 0.8rem;
        font-weight: 600;
        color: #6c757d;
        background: #f1f3f5;
        border: 1px solid #dee2e6;
        border-radius: 999px;
        padding: 0.3rem 0.65rem;
    }

    .btn-check:checked + .payment-method-card {
        border-color: #212529;
        background: #fcfcfc;
        box-shadow: 0 0 0 3px rgba(33, 37, 41, 0.08);
    }

    .btn-check:checked + .payment-method-card .payment-method-check {
        opacity: 1;
    }

    .disabled-method {
        opacity: 0.72;
        cursor: not-allowed;
        background: #fafafa;
    }

    .disabled-method:hover {
        border-color: #dee2e6;
        box-shadow: none;
    }

    @media (max-width: 575.98px) {
        .payment-method-card {
            padding: 0.9rem;
            min-height: 74px;
        }

        .payment-method-icon {
            width: 42px;
            height: 42px;
            font-size: 1.1rem;
        }

        .payment-method-title {
            font-size: 0.98rem;
        }

        .payment-method-subtitle {
            font-size: 0.83rem;
        }

        .payment-method-status,
        .payment-method-disabled-badge {
            font-size: 0.75rem;
            padding: 0.25rem 0.55rem;
        }
    }
</style>

<section class="py-5">
    <div class="container">
        <div class="checkout-page-heading mb-4">
            <div class="checkout-heading-content">
                <span class="section-mini-title checkout-mini-title">Rental Owner Dashboard</span>

                <h1 class="checkout-page-title">
                    Payment Checkout
                </h1>

                <p class="checkout-page-subtitle">
                    Review your selected payments and choose a secure payment method to continue.
                </p>
            </div>

            <div class="checkout-heading-secure-note">
                <i class="bi bi-shield-lock-fill"></i>
                <span>Secure payment area</span>
            </div>
        </div>


        <div class="row g-4">
            <div class="col-lg-8">
                <div class="border rounded-4 bg-white shadow-sm p-4">
                    <h4 class="fw-bold mb-3">Selected Payable Items</h4>

                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Type</th>
                                    <th class="text-end">Amount</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for item in payable_items %}
                                    <tr>
                                        <td>
                                            <div class="fw-semibold">{{ item.title }}</div>
                                            {% if item.description %}
                                                <div class="small text-muted">{{ item.description }}</div>
                                            {% endif %}
                                        </td>
                                        <td>{{ item.get_payment_for_display }}</td>
                                        <td class="text-end">${{ item.amount_usd }}</td>
                                    </tr>
                                {% endfor %}

                                <!-- Wallet toggle row -->
                                <tr id="wallet-row">
                                    <td colspan="2">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="useWalletToggle">
                                            <label class="form-check-label" for="useWalletToggle">
                                                Use Wallet Balance 
                                                (<span id="wallet-balance">${{ wallet.balance_usd|floatformat:2 }}</span>)
                                            </label>
                                        </div>
                                        <div id="wallet-coverage" class="small text-muted mt-1 d-none">
                                            Wallet covers <strong id="covered-amount">$0.00</strong>, 
                                            remaining <strong id="remaining-amount">$0.00</strong> via card.
                                        </div>
                                    </td>
                                    <td class="text-end fw-bold text-primary">
                                        ${{ wallet.balance_usd|floatformat:2 }}
                                    </td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <td colspan="2" class="text-end">
                                        <span id="total-label">Total Payment</span>
                                    </td>
                                    <td class="text-end fw-bold" id="total-card-amount">${{ total_amount }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="border rounded-4 bg-white shadow-sm p-4">
                    <h4 class="fw-bold mb-3">Choose Payment Method</h4>

                    <form method="post" action="{% url 'rental_app:rental_owner_payment_checkout_pay' %}">
                        {% csrf_token %}

                        <!-- Hidden input for wallet usage -->
                        <input type="hidden" name="use_wallet" id="useWalletInput" value="">

                        {% for item in payable_items %}
                            <input type="hidden" name="selected_items" value="{{ item.id }}">
                        {% endfor %}

                        <div class="mb-4">
                            <label class="form-label fw-semibold mb-3">Payment Method</label>

                            <div class="payment-method-list">
                                <input
                                    class="btn-check"
                                    type="radio"
                                    name="payment_method"
                                    id="payStripe"
                                    value="stripe"
                                    checked
                                >
                                <label class="payment-method-card stripe-card" for="payStripe">
                                    <div class="payment-method-left">
                                        <div class="payment-method-icon">
                                            <i class="bi bi-credit-card-2-front-fill"></i>
                                        </div>
                                        <div class="payment-method-text">
                                            <div class="payment-method-title">Stripe</div>
                                            <div class="payment-method-subtitle">Pay securely with card</div>
                                        </div>
                                    </div>
                                    <div class="payment-method-right">
                                        <span class="payment-method-status">Available</span>
                                        <span class="payment-method-check">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </span>
                                    </div>
                                </label>

                                <input
                                    class="btn-check"
                                    type="radio"
                                    name="payment_method"
                                    id="payPaypal"
                                    value="paypal"
                                >
                                <label class="payment-method-card paypal-card" for="payPaypal">
                                    <div class="payment-method-left">
                                        <div class="payment-method-icon">
                                            <i class="bi bi-paypal"></i>
                                        </div>

                                        <div class="payment-method-text">
                                            <div class="payment-method-title">PayPal</div>
                                            <div class="payment-method-subtitle">
                                                Pay securely with your PayPal account
                                            </div>
                                        </div>
                                    </div>

                                    <div class="payment-method-right">
                                        <span class="payment-method-status">Available</span>

                                        <span class="payment-method-check">
                                            <i class="bi bi-check-circle-fill"></i>
                                        </span>
                                    </div>
                                </label>
                            </div>
                        </div>
                        <!-- Secure Checkout Trust Badge -->
                        <div class="checkout-secure-trust-wrap">
                            <div class="checkout-secure-trust-badge">
                                <img src="{% static 'expat_life/images/secure_https_badge.png' %}"
                                    alt="Secure HTTPS SSL TLS Protected"
                                    class="checkout-secure-trust-img">

                                <div class="checkout-secure-trust-text">
                                    <strong>Secure Checkout</strong>
                                    <span>Your payment is protected through SSL/TLS encrypted connection.</span>
                                </div>
                            </div>
                        </div>
                        <div class="border rounded-3 bg-light p-3 mb-3">
                            <div class="d-flex justify-content-between">
                                <span>Total Payment</span>
                                <strong id="sidebar-total">${{ total_amount }}</strong>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-dark w-100">
                            Continue to Payment
                        </button>

                        <a href="{% url 'rental_app:rental_owner_payment_center' %}" class="btn btn-outline-secondary w-100 mt-2">
                            Back to Payment Center
                        </a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const subtotal = parseFloat("{{ total_amount }}");
        const walletBalance = parseFloat("{{ wallet.balance_usd }}");

        const toggle = document.getElementById('useWalletToggle');
        const totalLabel = document.getElementById('total-label');
        const totalCardAmount = document.getElementById('total-card-amount');
        const sidebarTotal = document.getElementById('sidebar-total');
        const coverageDiv = document.getElementById('wallet-coverage');
        const coveredAmount = document.getElementById('covered-amount');
        const remainingAmount = document.getElementById('remaining-amount');

        const useWalletInput = document.getElementById('useWalletInput');

        function updateTotal() {
            let due = subtotal;
            let covered = 0;

            if (toggle.checked) {
                covered = Math.min(subtotal, walletBalance);
                due = subtotal - covered;
                totalLabel.textContent = 'Remaining to pay with card';
                coverageDiv.classList.remove('d-none');
                coveredAmount.textContent = '$' + covered.toFixed(2);
                remainingAmount.textContent = '$' + due.toFixed(2);
            } else {
                totalLabel.textContent = 'Total Payment';
                coverageDiv.classList.add('d-none');
            }

            totalCardAmount.textContent = '$' + due.toFixed(2);
            sidebarTotal.textContent = '$' + due.toFixed(2);

            // Update hidden form field
            useWalletInput.value = toggle.checked ? '1' : '0';
        }

        toggle.addEventListener('change', updateTotal);
        // Set initial state (unchecked)
        updateTotal();
    });
</script>
{% endblock %}