{% extends 'property_manager_app/base_property_manager.html' %}
{% load static %}

{% block title %}Payment Successful | Home in Sri Lanka{% endblock %}

{% block content %}

<style>
    .pm-payment-page {
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.10), transparent 32%),
            linear-gradient(135deg, #f8fafc 0%, #ecfdf5 55%, #ffffff 100%);
        color: #0f172a;
        min-height: 75vh;
    }

    .pm-payment-hero {
        position: relative;
        min-height: 520px;
        background-color: #071f1b;
        overflow: hidden;
    }

    .pm-payment-hero-bg {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(
                90deg,
                rgba(5, 28, 24, 0.94) 0%,
                rgba(5, 36, 31, 0.88) 38%,
                rgba(7, 48, 41, 0.72) 68%,
                rgba(7, 48, 41, 0.56) 100%
            ),
            radial-gradient(circle at 82% 18%, rgba(251, 191, 36, 0.24), transparent 34%),
            url("{% static 'expat_life/images/property_manager_hero.webp' %}") center center / cover no-repeat;
        transform: scale(1.025);
        z-index: 0;
    }

    .pm-payment-hero-content {
        position: relative;
        z-index: 2;
        padding: 90px 0 120px;
    }

    .pm-payment-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(251, 191, 36, 0.16);
        color: #fbbf24;
        border: 1px solid rgba(251, 191, 36, 0.35);
        padding: 9px 17px;
        border-radius: 50px;
        font-weight: 900;
        font-size: 0.82rem;
        letter-spacing: 0.045em;
        text-transform: uppercase;
        backdrop-filter: blur(8px);
    }

    .pm-payment-title {
        font-size: clamp(2.55rem, 5vw, 4.45rem);
        line-height: 1.05;
        letter-spacing: -0.045em;
        font-weight: 950;
        color: #fff;
    }

    .pm-payment-title span {
        color: #fbbf24;
    }

    .pm-payment-subtitle {
        color: rgba(255, 255, 255, 0.90);
        font-size: 1.12rem;
        line-height: 1.8;
        max-width: 780px;
    }

    .pm-payment-icon-wrap {
        width: 96px;
        height: 96px;
        border-radius: 30px;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        color: #1f2937;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 3rem;
        box-shadow: 0 22px 52px rgba(245, 158, 11, 0.28);
    }

    .pm-payment-main {
        position: relative;
        z-index: 4;
        margin-top: -78px;
        padding-bottom: 80px;
    }

    .pm-payment-card {
        background: #fff;
        border-radius: 34px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 26px 68px rgba(15, 23, 42, 0.13);
        overflow: hidden;
    }

    .pm-payment-card-header {
        padding: 1.55rem 1.75rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #ffffff 0%, #ecfdf5 58%, #fffbeb 100%);
        border-bottom: 1px solid #e2e8f0;
    }

    .pm-payment-card-header h4 {
        margin: 0;
        color: #0f172a;
        font-weight: 900;
    }

    .pm-payment-card-header p {
        margin: .3rem 0 0;
        color: #64748b;
        line-height: 1.65;
        font-size: .94rem;
    }

    .pm-payment-status-badge {
        display: inline-flex;
        align-items: center;
        gap: .42rem;
        padding: .55rem .95rem;
        border-radius: 999px;
        background: rgba(22, 163, 74, 0.12);
        border: 1px solid rgba(22, 163, 74, 0.22);
        color: #166534;
        font-weight: 900;
        font-size: .82rem;
    }

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

    .pm-summary-box {
        padding: 1rem;
        border-radius: 22px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
    }

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

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

    .pm-amount-highlight {
        background:
            radial-gradient(circle at right top, rgba(251, 191, 36, 0.26), transparent 42%),
            linear-gradient(135deg, #062d27 0%, #0f766e 100%);
        border: none;
        overflow: hidden;
        position: relative;
    }

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

    .pm-amount-highlight .value {
        color: #fbbf24;
        font-size: 1.38rem;
    }

    .pm-items-panel {
        border-radius: 28px;
        border: 1px solid #e2e8f0;
        background: #fff;
        padding: 1.5rem;
        height: 100%;
    }

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

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

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

    .pm-item-icon {
        width: 44px;
        height: 44px;
        border-radius: 16px;
        background: #ecfdf5;
        color: #0f766e;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        font-size: 1.2rem;
    }

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

    .pm-item-note {
        color: #64748b;
        font-size: .86rem;
        line-height: 1.55;
    }

    .pm-next-card {
        border-radius: 28px;
        padding: 1.5rem;
        background:
            radial-gradient(circle at right top, rgba(251, 191, 36, 0.15), transparent 42%),
            linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
        border: 1px solid #d1fae5;
    }

    .pm-next-card h5 {
        color: #0f172a;
        font-weight: 900;
    }

    .pm-next-card p {
        color: #64748b;
        line-height: 1.75;
    }

    .pm-trust-note {
        border-radius: 22px;
        background: #fffbeb;
        border-left: 5px solid #f59e0b;
        padding: 1rem 1.1rem;
        color: #92400e;
        font-size: .93rem;
        line-height: 1.65;
    }

    .pm-btn-warning {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        border-radius: 999px;
        padding: .9rem 1.4rem;
        font-weight: 900;
        background: linear-gradient(135deg, #fbbf24, #f59e0b);
        border: none;
        color: #1f2937;
        text-decoration: none;
        box-shadow: 0 18px 36px rgba(245, 158, 11, 0.20);
        transition: all .22s ease;
    }

    .pm-btn-warning:hover {
        transform: translateY(-2px);
        color: #111827;
        background: linear-gradient(135deg, #facc15, #f59e0b);
    }

    .pm-btn-dark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        border-radius: 999px;
        padding: .9rem 1.4rem;
        font-weight: 900;
        background: #064e3b;
        border: 1px solid #064e3b;
        color: #fff;
        text-decoration: none;
        transition: all .22s ease;
    }

    .pm-btn-dark:hover {
        transform: translateY(-2px);
        background: #052e25;
        color: #fff;
    }

    .pm-btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 54px;
        border-radius: 999px;
        padding: .9rem 1.4rem;
        font-weight: 900;
        background: #fff;
        border: 1px solid #99f6e4;
        color: #0f766e;
        text-decoration: none;
        transition: all .22s ease;
    }

    .pm-btn-outline:hover {
        transform: translateY(-2px);
        color: #064e3b;
        background: #ecfdf5;
    }

    @media (max-width: 991.98px) {
        .pm-payment-hero-content {
            padding-left: 24px;
            padding-right: 24px;
        }
    }

    @media (max-width: 767.98px) {
        .pm-payment-hero-content {
            padding: 70px 18px 105px;
        }

        .pm-payment-title {
            font-size: 2.25rem;
            line-height: 1.12;
        }

        .pm-payment-subtitle {
            font-size: 1rem;
            line-height: 1.6;
        }

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

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

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

        .pm-payment-card {
            border-radius: 28px;
        }

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

        .pm-item-row {
            align-items: flex-start;
        }

        .pm-btn-warning,
        .pm-btn-dark,
        .pm-btn-outline {
            width: 100%;
        }
    }
</style>

<div class="pm-payment-page">

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

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

                    <h1 class="pm-payment-title mb-3">
                        Payment successful. <span>Your care plan is active.</span>
                    </h1>

                    <p class="pm-payment-subtitle mb-0">
                        Thank you. Your Property Care payment has been recorded successfully.
                        Your monthly care plan payment has been processed, and the next billing cycle
                        can now be prepared automatically by the system.
                    </p>
                </div>

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

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

                <div class="pm-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 Home in Sri Lanka Property Care account.
                            </p>
                        </div>

                        <div class="text-md-end">
                            <span class="pm-payment-status-badge">
                                <i class="bi bi-check-circle-fill"></i>
                                {{ payment_transaction.get_status_display }}
                            </span>
                        </div>
                    </div>
                </div>

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

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

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

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

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

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

                        <div class="pm-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="pm-items-panel">
                                <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 Property Care items were included in this payment transaction.
                                        </p>
                                    </div>

                                    <i class="bi bi-receipt-cutoff fs-3 text-warning"></i>
                                </div>

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

                                                <div>
                                                    <div class="pm-item-title">
                                                        {{ item.payable_item.title }}
                                                    </div>
                                                    <div class="pm-item-note">
                                                        Monthly care payment 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="pm-next-card mb-4">
                                <h5 class="mb-2">
                                    <i class="bi bi-house-gear-fill me-2 text-success"></i>
                                    What happens next?
                                </h5>

                                <p class="mb-0">
                                    Your Property Care monthly plan payment is now recorded.
                                    The system can deactivate the paid billing cycle and create the next monthly
                                    payable item according to your finalized care plan.
                                </p>
                            </div>

                            <div class="pm-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="d-grid gap-3">
                                <a href="{% url 'property_manager_app:property_care_payment_center' %}"
                                   class="pm-btn-warning">
                                    <i class="bi bi-credit-card me-2"></i>
                                    Back to Payment Center
                                </a>

                                <a href="{% url 'property_manager_app:property_manager_dashboard' %}"
                                   class="pm-btn-dark">
                                    <i class="bi bi-speedometer2 me-2"></i>
                                    Go to Property Care Dashboard
                                </a>

                                <a href="{% url 'property_manager_app:managed_property_list' %}"
                                   class="pm-btn-outline">
                                    <i class="bi bi-buildings-fill me-2"></i>
                                    View My Properties
                                </a>
                            </div>
                        </div>
                    </div>

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

</div>

{% endblock %}