{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}
{% block title %}Payment Checkout | Home in Sri Lanka{% 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;
    }

    .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;
    }

    @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 {
            font-size: 0.75rem;
            padding: 0.25rem 0.55rem;
        }
    }
</style>


<section class="py-5">
    <div class="container">

        <!-- Page Header -->
        <div class="checkout-page-heading mb-4">
            <div class="checkout-heading-content">
                <span class="section-mini-title checkout-mini-title">Property Care Dashboard</span>

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

                <p class="checkout-page-subtitle">
                    Review your selected Property Care payment items 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">

            <!-- =====================================================
                 LEFT: SELECTED PAYABLE ITEMS
            ====================================================== -->
            <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 %}

                                            {% if item.due_date %}
                                                <div class="small text-muted mt-1">
                                                    Due Date: {{ item.due_date|date:"M d, Y" }}
                                                </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"
                                                {% if wallet.balance_usd <= 0 %}disabled{% endif %}
                                            >

                                            <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 selected gateway.
                                        </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>


            <!-- =====================================================
                 RIGHT: PAYMENT METHOD
            ====================================================== -->
            <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 'property_manager_app:property_care_payment_checkout_pay' %}">
                        {% csrf_token %}

                        <!-- Hidden 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">

                                <!-- Stripe -->
                                <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>


                                <!-- PayPal -->
                                <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>
                        <!-- Summary -->
                        <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 'property_manager_app:property_care_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 && toggle.checked) {
                covered = Math.min(subtotal, walletBalance);
                due = subtotal - covered;

                totalLabel.textContent = 'Remaining to pay with selected gateway';
                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);

            if (useWalletInput) {
                useWalletInput.value = toggle && toggle.checked ? '1' : '0';
            }
        }

        if (toggle) {
            toggle.addEventListener('change', updateTotal);
        }

        updateTotal();
    });
</script>
{% endblock %}