{% extends 'rental_app/base_rental.html' %}
{% load static %}

{% block title %}Payment Successful | Property Partner Portal{% endblock %}

{% block content %}

<style>
    .rental-payment-hero {
        position: relative;
        min-height: 500px;
        background-color: #0d1b2a;
        overflow: hidden;
    }

    .rental-payment-hero-bg {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(8, 20, 32, 0.92) 0%,
                rgba(8, 20, 32, 0.78) 42%,
                rgba(8, 20, 32, 0.55) 72%,
                rgba(8, 20, 32, 0.42) 100%
            ),
            radial-gradient(circle at 78% 22%, rgba(255, 193, 7, 0.22), transparent 32%),
            url("{% static 'expat_life/images/rental_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.03);
        z-index: 0;
    }

    .rental-payment-content {
        position: relative;
        z-index: 2;
        padding: 85px 0 115px;
    }

    .rental-payment-badge {
        display: inline-flex;
        align-items: center;
        gap: .45rem;
        padding: .45rem .9rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.18);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.35);
        font-size: .78rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .08em;
        backdrop-filter: blur(10px);
    }

    .rental-payment-title {
        color: #fff;
        font-weight: 800;
        letter-spacing: -.04em;
    }

    .rental-payment-subtitle {
        color: rgba(255, 255, 255, 0.84);
        max-width: 720px;
        line-height: 1.65;
    }

    .rental-payment-icon {
        width: 92px;
        height: 92px;
        border-radius: 28px;
        background: linear-gradient(135deg, #ffc107, #ffda6a);
        color: #0d1b2a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        box-shadow: 0 22px 55px rgba(255, 193, 7, 0.30);
    }

    .rental-payment-main {
        margin-top: -82px;
        position: relative;
        z-index: 4;
        padding-bottom: 70px;
    }

    .rental-payment-card {
        background: #fff;
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 30px;
        box-shadow: 0 24px 70px rgba(15, 23, 42, 0.14);
        overflow: hidden;
    }

    .rental-payment-card-header {
        padding: 1.4rem 1.6rem;
        background:
            linear-gradient(135deg, #ffffff, #eaf3ff),
            radial-gradient(circle at top right, rgba(13, 110, 253, 0.14), transparent 35%);
        border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    }

    .rental-payment-card-header h4 {
        margin: 0;
        font-weight: 800;
        color: #0d1b2a;
    }

    .rental-payment-card-header p {
        margin: .25rem 0 0;
        color: #64748b;
        font-size: .92rem;
    }

    .rental-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .rental-summary-box {
        padding: 1rem;
        border-radius: 20px;
        background: #f8fafc;
        border: 1px solid #e5e7eb;
    }

    .rental-summary-box .label {
        display: block;
        color: #64748b;
        font-size: .76rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .06em;
        margin-bottom: .35rem;
    }

    .rental-summary-box .value {
        color: #0f172a;
        font-weight: 800;
        font-size: 1rem;
        word-break: break-word;
    }

    .rental-amount-highlight {
        background: linear-gradient(135deg, #0d1b2a, #0d6efd);
        color: #fff;
        border: none;
        position: relative;
        overflow: hidden;
    }

    .rental-amount-highlight::after {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.24);
        right: -55px;
        top: -55px;
    }

    .rental-amount-highlight .label,
    .rental-amount-highlight .value {
        color: #fff;
        position: relative;
        z-index: 2;
    }

    .rental-amount-highlight .value {
        color: #ffc107;
        font-size: 1.35rem;
    }

    .rental-items-list {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .rental-item-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        padding: 1rem 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .rental-item-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .rental-item-icon {
        width: 42px;
        height: 42px;
        border-radius: 15px;
        background: #eaf3ff;
        color: #0d6efd;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .rental-item-title {
        font-weight: 800;
        color: #0f172a;
        margin-bottom: .12rem;
    }

    .rental-item-note {
        color: #64748b;
        font-size: .84rem;
    }

    .rental-next-card {
        border-radius: 24px;
        padding: 1.4rem;
        background: linear-gradient(135deg, #eaf3ff, #ffffff);
        border: 1px solid rgba(13, 110, 253, 0.20);
    }

    .rental-next-card h5 {
        color: #0d1b2a;
        font-weight: 800;
    }

    .rental-next-card p {
        color: #64748b;
        line-height: 1.6;
    }

    .rental-trust-note {
        border-radius: 20px;
        background: rgba(13, 27, 42, 0.04);
        border: 1px solid rgba(13, 27, 42, 0.08);
        padding: 1rem;
        color: #475569;
        font-size: .92rem;
    }

    .rental-trust-note i {
        color: #ffc107;
    }

    .rental-payment-actions .btn-warning {
        background: #ffc107;
        border-color: #ffc107;
        color: #0d1b2a;
        font-weight: 800;
    }

    .rental-payment-actions .btn-dark {
        background: #0d1b2a;
        border-color: #0d1b2a;
        font-weight: 800;
    }

    .rental-payment-actions .btn-outline-dark {
        font-weight: 800;
    }

    @media (max-width: 767.98px) {
        .rental-payment-content {
            padding: 70px 1.15rem 105px;
        }

        .rental-payment-title {
            font-size: 2.15rem;
            line-height: 1.12;
        }

        .rental-payment-subtitle {
            font-size: 1rem;
            line-height: 1.55;
        }

        .rental-payment-badge {
            max-width: 100%;
            white-space: normal;
            line-height: 1.35;
        }

        .rental-payment-icon {
            width: 76px;
            height: 76px;
            border-radius: 22px;
            font-size: 2.35rem;
        }

        .rental-summary-grid {
            grid-template-columns: 1fr;
        }

        .rental-payment-card {
            border-radius: 24px;
        }

        .rental-payment-card-header,
        .rental-payment-card .p-4,
        .rental-payment-card .p-md-5 {
            padding-left: 1.15rem !important;
            padding-right: 1.15rem !important;
        }

        .rental-item-row {
            align-items: flex-start;
        }
    }
</style>

<section class="rental-payment-hero">
    <div class="rental-payment-hero-bg"></div>

    <div class="container rental-payment-content">
        <div class="row align-items-center">
            <div class="col-lg-8 text-white">
                <span class="rental-payment-badge mb-4">
                    <i class="bi bi-shield-check"></i>
                    Secure Payment Completed
                </span>

                <h1 class="display-4 rental-payment-title mb-3">
                    Payment Successful
                </h1>

                <p class="lead rental-payment-subtitle mb-0">
                    Thank you. Your Property Partner payment has been recorded successfully,
                    and your rental owner profile or listing visibility has been updated based on the selected payment items.
                </p>
            </div>

            <div class="col-lg-4 text-lg-end mt-4 mt-lg-0">
                <div class="rental-payment-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="rental-payment-main">
    <div class="container px-3 px-sm-4">
        <div class="rental-payment-card mx-auto" style="max-width:1050px;">

            <div class="rental-payment-card-header">
                <div class="d-flex flex-column flex-md-row justify-content-between gap-3">
                    <div>
                        <h4>Payment Confirmation</h4>
                        <p>
                            Transaction reference and paid item summary for your Property Partner account.
                        </p>
                    </div>

                    <div class="text-md-end">
                        <span class="badge rounded-pill text-bg-success px-3 py-2">
                            {{ payment_transaction.get_status_display }}
                        </span>
                    </div>
                </div>
            </div>

            <div class="p-4 p-md-5">

                <div class="rental-summary-grid mb-4">
                    <div class="rental-summary-box">
                        <span class="label">Transaction No</span>
                        <span class="value">#{{ payment_transaction.id }}</span>
                    </div>

                    <div class="rental-summary-box">
                        <span class="label">Payment Method</span>
                        <span class="value">{{ payment_transaction.get_payment_method_display }}</span>
                    </div>

                    <div class="rental-summary-box rental-amount-highlight">
                        <span class="label">Total Selected Amount</span>
                        <span class="value">${{ payment_transaction.total_amount_usd }}</span>
                    </div>

                    <div class="rental-summary-box">
                        <span class="label">Gateway Paid</span>
                        <span class="value">${{ payment_transaction.gateway_amount_usd }}</span>
                    </div>

                    <div class="rental-summary-box">
                        <span class="label">Wallet Used</span>
                        <span class="value">${{ payment_transaction.wallet_deduction_usd }}</span>
                    </div>

                    <div class="rental-summary-box">
                        <span class="label">Gateway Reference</span>
                        <span class="value">
                            {% if payment_transaction.gateway_transaction_id %}
                                {{ payment_transaction.gateway_transaction_id }}
                            {% elif payment_transaction.gateway_session_id %}
                                {{ payment_transaction.gateway_session_id }}
                            {% else %}
                                Internal wallet payment
                            {% endif %}
                        </span>
                    </div>
                </div>

                <div class="row g-4">
                    <div class="col-lg-7">
                        <div class="border rounded-4 p-4 h-100">
                            <div class="d-flex align-items-center justify-content-between mb-3">
                                <div>
                                    <h5 class="fw-bold mb-1">Paid Items</h5>
                                    <p class="text-muted small mb-0">
                                        These items were included in this payment transaction.
                                    </p>
                                </div>
                                <i class="bi bi-receipt-cutoff fs-3 text-warning"></i>
                            </div>

                            <ul class="rental-items-list">
                                {% for item in payment_transaction.items.all %}
                                    <li class="rental-item-row">
                                        <div class="d-flex align-items-start gap-3">
                                            <div class="rental-item-icon">
                                                <i class="bi bi-check2-circle"></i>
                                            </div>

                                            <div>
                                                <div class="rental-item-title">
                                                    {{ item.payable_item.title }}
                                                </div>
                                                <div class="rental-item-note">
                                                    Successfully processed
                                                </div>
                                            </div>
                                        </div>

                                        <strong>${{ item.amount_usd }}</strong>
                                    </li>
                                {% empty %}
                                    <li class="text-muted">
                                        No payment items found.
                                    </li>
                                {% endfor %}
                            </ul>
                        </div>
                    </div>

                    <div class="col-lg-5">
                        <div class="rental-next-card mb-4">
                            <h5 class="mb-2">
                                <i class="bi bi-house-check-fill me-2 text-primary"></i>
                                What happens next?
                            </h5>

                            <p class="mb-0">
                                Your Property Partner account will now reflect this payment. If you paid for featured
                                visibility, your rental owner profile and related listings can receive better presentation
                                and approval visibility within the rental platform.
                            </p>
                        </div>

                        <div class="rental-trust-note mb-4">
                            <i class="bi bi-lock-fill me-2"></i>
                            Your transaction has been recorded securely. Please keep your transaction number
                            <strong>#{{ payment_transaction.id }}</strong> for future reference.
                        </div>

                        <div class="rental-payment-actions d-grid gap-3">
                            <a href="{% url 'rental_app:rental_owner_payment_center' %}"
                               class="btn btn-warning btn-lg rounded-pill px-4">
                                <i class="bi bi-credit-card me-2"></i>
                                Back to Payment Center
                            </a>

                            <a href="{% url 'rental_app:rental_owner_dashboard' %}"
                               class="btn btn-dark btn-lg rounded-pill px-4">
                                <i class="bi bi-speedometer2 me-2"></i>
                                Go to Property Dashboard
                            </a>

                            <a href="{% url 'rental_app:public_rental_list' %}"
                               class="btn btn-outline-dark btn-lg rounded-pill px-4">
                                <i class="bi bi-house-heart-fill me-2"></i>
                                View Public Rentals
                            </a>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</section>

{% endblock %}