{% extends 'expat_life/base.html' %}
{% load static %}
{% block title %}Payment Checkout{% endblock %}

{% block content %}
<style>
    /* =========================================================
       CHECKOUT PAYMENT METHODS - PREMIUM LIVE IN SRI LANKA THEME
    ========================================================= */

    :root {
        --lis-deep: #07131c;
        --lis-navy: #0b2638;
        --lis-blue: #0d6efd;
        --lis-blue-dark: #0b3d91;
        --lis-teal: #0f766e;
        --lis-teal-bright: #20c997;
        --lis-gold: #ffc107;
        --lis-gold-light: #ffd45f;
        --lis-soft-blue: #f5f9ff;
        --lis-white: #ffffff;
        --lis-text: #102033;
        --lis-muted: #64748b;
        --lis-border: rgba(15, 42, 64, 0.10);
        --lis-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --lis-shadow-strong: 0 26px 64px rgba(15, 23, 42, 0.15);
    }

    .payment-method-list {
        display: grid;
        gap: 0.95rem;
    }

    .payment-method-card {
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        min-height: 82px;
        padding: 1rem 1.05rem;
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 24px;
        background:
            radial-gradient(circle at 94% 12%, rgba(255, 193, 7, 0.09), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
        cursor: pointer;
        transition: all 0.24s ease;
    }

    .payment-method-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        opacity: 0;
        transition: opacity 0.24s ease;
    }

    .payment-method-card::after {
        content: "";
        position: absolute;
        width: 115px;
        height: 115px;
        right: -58px;
        bottom: -58px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.055);
        pointer-events: none;
    }

    .payment-method-card:hover {
        transform: translateY(-3px);
        border-color: rgba(15, 118, 110, 0.20);
        box-shadow: var(--lis-shadow);
    }

    .payment-method-card:hover::before {
        opacity: 1;
    }

    .payment-method-left,
    .payment-method-right {
        position: relative;
        z-index: 2;
    }

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

    .payment-method-icon {
        width: 50px;
        height: 50px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        flex-shrink: 0;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .stripe-card .payment-method-icon {
        background:
            linear-gradient(135deg, rgba(13, 110, 253, 0.12), rgba(15, 118, 110, 0.07));
        color: var(--lis-blue);
    }

    .paypal-card .payment-method-icon {
        background:
            linear-gradient(135deg, rgba(255, 193, 7, 0.18), rgba(13, 110, 253, 0.08));
        color: var(--lis-blue-dark);
    }

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

    .payment-method-title {
        color: var(--lis-text);
        font-weight: 950;
        letter-spacing: -0.015em;
        line-height: 1.2;
    }

    .payment-method-subtitle {
        color: var(--lis-muted);
        font-size: 0.9rem;
        line-height: 1.45;
        margin-top: 0.18rem;
    }

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

    .payment-method-status {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        color: var(--lis-teal);
        background: rgba(15, 118, 110, 0.09);
        border: 1px solid rgba(15, 118, 110, 0.15);
        border-radius: 999px;
        padding: 0.32rem 0.68rem;
        font-size: 0.8rem;
        font-weight: 900;
        white-space: nowrap;
    }

    .payment-method-check {
        color: var(--lis-teal);
        font-size: 1.2rem;
        opacity: 0;
        transition: opacity 0.22s ease, transform 0.22s ease;
        line-height: 1;
    }

    .payment-method-disabled-badge {
        display: inline-flex;
        align-items: center;
        color: #64748b;
        background: #f1f5f9;
        border: 1px solid rgba(15, 42, 64, 0.08);
        border-radius: 999px;
        padding: 0.32rem 0.68rem;
        font-size: 0.78rem;
        font-weight: 850;
        white-space: nowrap;
    }

    .btn-check:checked + .payment-method-card {
        border-color: rgba(15, 118, 110, 0.42);
        background:
            radial-gradient(circle at 94% 12%, rgba(15, 118, 110, 0.12), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%);
        box-shadow:
            0 0 0 4px rgba(15, 118, 110, 0.10),
            0 22px 50px rgba(15, 23, 42, 0.12);
    }

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

    .btn-check:checked + .payment-method-card .payment-method-check {
        opacity: 1;
        transform: scale(1.04);
    }

    .btn-check:checked + .payment-method-card .payment-method-icon {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        color: #ffffff;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.20);
    }

    .disabled-method {
        opacity: 0.72;
        cursor: not-allowed;
        background:
            linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
        box-shadow: none;
    }

    .disabled-method::before {
        opacity: 0;
    }

    .disabled-method:hover {
        transform: none;
        border-color: rgba(15, 42, 64, 0.08);
        box-shadow: none;
    }

    .disabled-method .payment-method-icon {
        background: #f1f5f9;
        color: #94a3b8;
        box-shadow: none;
    }

    @media (max-width: 575.98px) {
        .payment-method-card {
            padding: 0.9rem;
            min-height: 76px;
            border-radius: 20px;
            align-items: flex-start;
        }

        .payment-method-left {
            gap: 0.75rem;
        }

        .payment-method-icon {
            width: 44px;
            height: 44px;
            border-radius: 16px;
            font-size: 1.1rem;
        }

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

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

        .payment-method-right {
            flex-direction: column;
            align-items: flex-end;
            gap: 0.45rem;
        }

        .payment-method-status,
        .payment-method-disabled-badge {
            font-size: 0.72rem;
            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">Guest 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 'expat_life:foreigner_payment_checkout_pay' %}">
                        {% csrf_token %}

                        <!-- NEW: 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 'expat_life:foreigner_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 %}