{% extends 'hosting_app/base_hosting.html' %}
{% load static %}

{% block title %}Payment Center | Host in Sri Lanka{% endblock %}

{% block content %}

<style>
    /* =========================================================
       HOSTING PARTNER PAYMENT CENTER — PREMIUM
    ========================================================= */

    .hosting-payment-page {
        min-height: 100vh;
        padding: 4rem 0 5.5rem;
        background:
            radial-gradient(circle at top left, rgba(255, 193, 7, 0.12), transparent 30%),
            radial-gradient(circle at top right, rgba(116, 49, 41, 0.10), transparent 32%),
            linear-gradient(180deg, #fffaf5 0%, #fff4e8 42%, #ffffff 100%);
    }

    .hosting-payment-hero {
        position: relative;
        overflow: hidden;
        border-radius: 38px;
        padding: 2.8rem 2.5rem;
        margin-bottom: 2rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 211, 107, 0.22), transparent 34%),
            linear-gradient(135deg, #2d1716 0%, #743129 52%, #a7601b 100%);
        box-shadow: 0 30px 68px rgba(58, 30, 24, 0.20);
    }

    .hosting-payment-hero::before {
        content: "";
        position: absolute;
        top: -110px;
        right: -85px;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.07);
        pointer-events: none;
    }

    .hosting-payment-hero::after {
        content: "";
        position: absolute;
        bottom: -150px;
        left: -110px;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.10);
        pointer-events: none;
    }

    .hosting-payment-hero-inner {
        position: relative;
        z-index: 2;
    }

    .hosting-payment-kicker {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.52rem 1rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #ffe7aa;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 1rem;
    }

    .hosting-payment-hero h1 {
        font-size: clamp(2.2rem, 4vw, 3.6rem);
        font-weight: 950;
        line-height: 1.08;
        letter-spacing: -0.045em;
        margin-bottom: 0.85rem;
    }

    .hosting-payment-hero p {
        max-width: 880px;
        color: rgba(255, 255, 255, 0.88);
        font-size: 1.04rem;
        line-height: 1.78;
        margin-bottom: 0;
    }

    .hosting-partner-panel {
        margin-top: 1.35rem;
        border-radius: 28px;
        padding: 1.35rem;
        background: rgba(255, 255, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.18);
        backdrop-filter: blur(6px);
    }

    .hosting-partner-item {
        height: 100%;
        border-radius: 22px;
        padding: 1rem 1.05rem;
        background: rgba(255, 255, 255, 0.92);
        color: #2d1716;
        box-shadow: 0 14px 28px rgba(58, 30, 24, 0.08);
    }

    .hosting-partner-label {
        display: block;
        color: #7a655d;
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.4rem;
    }

    .hosting-partner-value {
        color: #2d1716;
        font-weight: 950;
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .hosting-payment-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.85rem;
        margin-top: 1.5rem;
    }

    .hosting-payment-hero-actions .btn {
        border-radius: 999px;
        font-weight: 850;
        padding: 0.82rem 1.35rem;
        min-height: 48px;
    }

    .hosting-btn-gold {
        background: #ffc107;
        color: #2d1716;
        border: none;
    }

    .hosting-btn-gold:hover {
        background: #ffe082;
        color: #2d1716;
        transform: translateY(-1px);
    }

    .hosting-btn-light-outline {
        background: rgba(255, 255, 255, 0.10);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.42);
    }

    .hosting-btn-light-outline:hover {
        background: #ffffff;
        color: #2d1716;
    }

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

    .hosting-summary-card {
        position: relative;
        overflow: hidden;
        height: 100%;
        border-radius: 30px;
        padding: 1.55rem 1.45rem;
        border: 1px solid rgba(239, 226, 211, 0.95);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 42px rgba(58, 30, 24, 0.08);
    }

    .hosting-summary-card::after {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 115px;
        height: 115px;
        border-radius: 50%;
        background: rgba(167, 96, 27, 0.07);
    }

    .hosting-summary-icon {
        position: relative;
        z-index: 2;
        width: 50px;
        height: 50px;
        border-radius: 18px;
        background: #fff4e4;
        color: #a7601b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        margin-bottom: 0.85rem;
    }

    .hosting-summary-label {
        position: relative;
        z-index: 2;
        color: #7a655d;
        font-size: 0.9rem;
        font-weight: 850;
        margin-bottom: 0.45rem;
    }

    .hosting-summary-value {
        position: relative;
        z-index: 2;
        font-size: clamp(1.75rem, 3vw, 2.25rem);
        font-weight: 950;
        line-height: 1;
        color: #2d1716;
        margin-bottom: 0;
    }

    .hosting-summary-note {
        position: relative;
        z-index: 2;
        color: #8b746c;
        font-size: 0.86rem;
        margin-top: 0.5rem;
        margin-bottom: 0;
        line-height: 1.55;
    }

    .hosting-payment-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.10);
        overflow: hidden;
        margin-bottom: 1.5rem;
    }

    .hosting-payment-card-header {
        padding: 1.55rem 1.7rem 1.1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .hosting-payment-card-header h2,
    .hosting-payment-card-header h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.35rem;
    }

    .hosting-payment-card-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-payment-card-body {
        padding: 1.6rem;
    }

    .hosting-payable-list {
        display: grid;
        gap: 1rem;
    }

    .hosting-payable-item {
        border-radius: 26px;
        border: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.05), transparent 30%),
            #ffffff;
        padding: 1.15rem;
        transition: 0.22s ease;
    }

    .hosting-payable-item:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 34px rgba(58, 30, 24, 0.08);
    }

    .hosting-payable-top {
        display: flex;
        align-items: flex-start;
        gap: 0.85rem;
    }

    .hosting-payable-check {
        margin-top: 0.35rem;
        width: 1.15rem;
        height: 1.15rem;
        border-color: #d7bfa5;
        flex-shrink: 0;
    }

    .hosting-payable-check:checked {
        background-color: #a7601b;
        border-color: #a7601b;
    }

    .hosting-payable-content {
        flex: 1;
        min-width: 0;
    }

    .hosting-payable-title-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .hosting-payable-title {
        color: #2d1716;
        font-weight: 950;
        font-size: 1.06rem;
        margin-bottom: 0.3rem;
    }

    .hosting-payable-desc {
        color: #6f5b53;
        line-height: 1.65;
        font-size: 0.92rem;
        margin-bottom: 0.75rem;
    }

    .hosting-payable-amount {
        color: #2d1716;
        font-weight: 950;
        font-size: 1.15rem;
        white-space: nowrap;
    }

    .hosting-payable-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .hosting-chip {
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        border-radius: 999px;
        padding: 0.42rem 0.68rem;
        font-size: 0.76rem;
        font-weight: 850;
        border: 1px solid #efe2d3;
        background: #fffaf5;
        color: #6f5b53;
    }

    .hosting-chip.due {
        background: #fff7ed;
        color: #9a3412;
        border-color: #fed7aa;
    }

    .hosting-chip.paid {
        background: #ecfdf5;
        color: #047857;
        border-color: #a7f3d0;
    }

    .hosting-chip.optional {
        background: #fffbeb;
        color: #92400e;
        border-color: #fde68a;
    }

    .hosting-empty-state {
        text-align: center;
        padding: 3rem 1.25rem;
        border-radius: 28px;
        border: 1px dashed #d8bfa3;
        background: #fffaf5;
    }

    .hosting-empty-icon {
        width: 82px;
        height: 82px;
        border-radius: 30px;
        background: linear-gradient(135deg, #fff4e4, #ffe7aa);
        color: #a7601b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 2.3rem;
        margin-bottom: 1.2rem;
    }

    .hosting-empty-state h4 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.55rem;
    }

    .hosting-empty-state p {
        color: #7a655d;
        max-width: 620px;
        margin: 0 auto;
        line-height: 1.7;
    }

    .hosting-side-card {
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.98);
        border: 1px solid rgba(239, 226, 211, 0.95);
        box-shadow: 0 24px 56px rgba(58, 30, 24, 0.09);
        overflow: hidden;
        margin-bottom: 1.5rem;
        position: sticky;
        top: 1rem;
    }

    .hosting-side-card-header {
        padding: 1.45rem 1.55rem 1rem;
        border-bottom: 1px solid #efe2d3;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.08), transparent 28%),
            linear-gradient(180deg, #ffffff 0%, #fffaf5 100%);
    }

    .hosting-side-card-header h3 {
        color: #2d1716;
        font-weight: 950;
        margin-bottom: 0.25rem;
    }

    .hosting-side-card-header p {
        color: #7a655d;
        line-height: 1.65;
        margin-bottom: 0;
    }

    .hosting-side-card-body {
        padding: 1.45rem;
    }

    .hosting-wallet-box {
        border-radius: 28px;
        padding: 1.35rem;
        color: #ffffff;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.16), transparent 34%),
            linear-gradient(135deg, #2d1716 0%, #743129 58%, #a7601b 100%);
        margin-bottom: 1rem;
    }

    .hosting-wallet-box span {
        display: block;
        color: rgba(255, 255, 255, 0.72);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.35rem;
    }

    .hosting-wallet-box strong {
        display: block;
        color: #ffffff;
        font-size: 2.2rem;
        font-weight: 950;
        letter-spacing: -0.04em;
        line-height: 1;
    }

    .hosting-mini-stat-grid {
        display: grid;
        gap: 0.75rem;
    }

    .hosting-mini-stat {
        border-radius: 20px;
        padding: 0.95rem;
        background: #fffaf5;
        border: 1px solid #efe2d3;
    }

    .hosting-mini-stat span {
        display: block;
        color: #7a655d;
        font-size: 0.76rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 0.25rem;
    }

    .hosting-mini-stat strong {
        color: #2d1716;
        font-weight: 950;
    }

    .hosting-side-actions {
        display: grid;
        gap: 0.65rem;
        margin-top: 1rem;
    }

    .hosting-side-actions .btn {
        border-radius: 999px;
        min-height: 46px;
        font-weight: 850;
    }

    .hosting-checkout-sticky {
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: 1.1rem;
        z-index: 1050;
        width: min(940px, calc(100% - 2rem));
        border-radius: 999px;
        padding: 0.85rem 1rem;
        background: rgba(45, 23, 22, 0.96);
        color: #ffffff;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.30);
        backdrop-filter: blur(12px);
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }

    .hosting-checkout-sticky.show {
        display: flex;
    }

    .hosting-checkout-sticky strong {
        color: #ffe7aa;
    }

    .hosting-checkout-sticky .btn {
        border-radius: 999px;
        font-weight: 900;
        white-space: nowrap;
    }

    @media (max-width: 1199.98px) {
        .hosting-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 991.98px) {
        .hosting-payment-page {
            padding-top: 2.8rem;
        }

        .hosting-payment-hero {
            padding: 2rem 1.45rem;
            border-radius: 30px;
        }

        .hosting-side-card {
            position: static;
        }
    }

    @media (max-width: 767.98px) {
        .hosting-summary-grid {
            grid-template-columns: 1fr;
        }

        .hosting-payment-hero-actions {
            flex-direction: column;
            align-items: stretch;
        }

        .hosting-payment-hero-actions .btn {
            width: 100%;
        }

        .hosting-payment-card-body,
        .hosting-payment-card-header,
        .hosting-side-card-header,
        .hosting-side-card-body {
            padding-left: 1.15rem;
            padding-right: 1.15rem;
        }

        .hosting-payable-title-row {
            display: block;
        }

        .hosting-payable-amount {
            margin-top: 0.5rem;
        }

        .hosting-checkout-sticky {
            border-radius: 24px;
            flex-direction: column;
            align-items: stretch;
            text-align: center;
        }

        .hosting-checkout-sticky .btn {
            width: 100%;
        }
    }

    .hosting-partner-panel .hosting-partner-item .hosting-partner-value {
        color: #2d1716 !important;
        font-weight: 950;
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .hosting-partner-panel .hosting-partner-item {
        background: #ffffff;
        color: #2d1716;
    }
</style>


<section class="hosting-payment-page">
    <div class="container">

        <!-- HERO -->
        <div class="hosting-payment-hero">
            <div class="hosting-payment-hero-inner">

                <span class="hosting-payment-kicker">
                    <i class="bi bi-wallet2"></i>
                    Hosting Partner Payment Center
                </span>

                <h1>Payment Center</h1>

                <p>
                    Manage optional featured visibility payments, review your hosting wallet balance,
                    and prepare for future event booking earnings and payout requests.
                </p>

                <div class="hosting-partner-panel">
                    <div class="row g-3">

                        <div class="col-md-4">
                            <div class="hosting-partner-item">
                                <span class="hosting-partner-label">Hosting Partner</span>
                                <p class="hosting-partner-value">
                                    {{ host_profile.business_name }}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="hosting-partner-item">
                                <span class="hosting-partner-label">Featured Status</span>
                                <p class="hosting-partner-value">
                                    {% if host_profile.is_featured %}
                                        Featured Partner
                                    {% else %}
                                        Standard Partner
                                    {% endif %}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="hosting-partner-item">
                                <span class="hosting-partner-label">Wallet Balance</span>
                                <p class="hosting-partner-value">
                                    USD {{ wallet.balance_usd|floatformat:2 }}
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="hosting-payment-hero-actions">
                    <a href="{% url 'hosting_app:host_dashboard' %}"
                       class="btn hosting-btn-light-outline">
                        <i class="bi bi-speedometer2 me-2"></i>
                        Dashboard
                    </a>

                    <a href="{% url 'hosting_app:host_banking_details' %}"
                       class="btn hosting-btn-light-outline">
                        <i class="bi bi-bank2 me-2"></i>
                        Banking Details
                    </a>

                    <a href="{% url 'hosting_app:host_venue_list' %}"
                       class="btn hosting-btn-gold">
                        <i class="bi bi-buildings-fill me-2"></i>
                        My Venues
                    </a>
                </div>

            </div>
        </div>


        <!-- SUMMARY -->
        <div class="hosting-summary-grid">

            <div class="hosting-summary-card">
                <div class="hosting-summary-icon">
                    <i class="bi bi-exclamation-circle-fill"></i>
                </div>
                <div class="hosting-summary-label">Total Due</div>
                <p class="hosting-summary-value">USD {{ total_due|floatformat:2 }}</p>
                <p class="hosting-summary-note">Currently payable host-side items.</p>
            </div>

            <div class="hosting-summary-card">
                <div class="hosting-summary-icon">
                    <i class="bi bi-check-circle-fill"></i>
                </div>
                <div class="hosting-summary-label">Total Paid</div>
                <p class="hosting-summary-value">USD {{ total_paid|floatformat:2 }}</p>
                <p class="hosting-summary-note">Completed host-side payments.</p>
            </div>

            <div class="hosting-summary-card">
                <div class="hosting-summary-icon">
                    <i class="bi bi-wallet2"></i>
                </div>
                <div class="hosting-summary-label">Wallet Balance</div>
                <p class="hosting-summary-value">USD {{ wallet.balance_usd|floatformat:2 }}</p>
                <p class="hosting-summary-note">Future event earnings will appear here.</p>
            </div>

            <div class="hosting-summary-card">
                <div class="hosting-summary-icon">
                    <i class="bi bi-star-fill"></i>
                </div>
                <div class="hosting-summary-label">Featured Venues</div>
                <p class="hosting-summary-value">{{ featured_venues_count }}</p>
                <p class="hosting-summary-note">Out of {{ total_venues }} venue{{ total_venues|pluralize }}.</p>
            </div>

        </div>


        <div class="row g-4 align-items-start">

            <!-- MAIN CONTENT -->
            <div class="col-lg-8">

                <form method="post" action="{% url 'hosting_app:host_payment_checkout' %}" id="hostingPaymentForm">
                    {% csrf_token %}

                    <!-- DUE ITEMS -->
                    <div class="hosting-payment-card">
                        <div class="hosting-payment-card-header">
                            <div>
                                <h2>Due Payments</h2>
                                <p>
                                    Select payable items and continue to checkout. Currently, this section mainly handles
                                    the optional Hosting Partner featured visibility fee.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-payment-card-body">
                            {% if due_items %}
                                <div class="hosting-payable-list">
                                    {% for item in due_items %}
                                        <div class="hosting-payable-item">
                                            <div class="hosting-payable-top">

                                                {% if item.id in selectable_item_ids %}
                                                    <input type="checkbox"
                                                           name="selected_items"
                                                           value="{{ item.id }}"
                                                           class="form-check-input hosting-payable-check js-hosting-payable-check"
                                                           data-amount="{{ item.amount_usd|floatformat:2 }}"
                                                           data-title="{{ item.title }}">
                                                {% else %}
                                                    <input type="checkbox"
                                                           class="form-check-input hosting-payable-check"
                                                           disabled>
                                                {% endif %}

                                                <div class="hosting-payable-content">
                                                    <div class="hosting-payable-title-row">
                                                        <div>
                                                            <div class="hosting-payable-title">
                                                                {{ item.title }}
                                                            </div>

                                                            {% if item.description %}
                                                                <p class="hosting-payable-desc">
                                                                    {{ item.description }}
                                                                </p>
                                                            {% endif %}
                                                        </div>

                                                        <div class="hosting-payable-amount">
                                                            USD {{ item.amount_usd|floatformat:2 }}
                                                        </div>
                                                    </div>

                                                    <div class="hosting-payable-meta">
                                                        <span class="hosting-chip due">
                                                            <i class="bi bi-exclamation-circle-fill"></i>
                                                            {{ item.get_payment_status_display }}
                                                        </span>

                                                        <span class="hosting-chip">
                                                            <i class="bi bi-cash-coin"></i>
                                                            {{ item.get_amount_state_display }}
                                                        </span>

                                                        {% if item.is_optional %}
                                                            <span class="hosting-chip optional">
                                                                <i class="bi bi-star-fill"></i>
                                                                Optional
                                                            </span>
                                                        {% endif %}

                                                        {% if item.reference_code %}
                                                            <span class="hosting-chip">
                                                                <i class="bi bi-hash"></i>
                                                                {{ item.reference_code }}
                                                            </span>
                                                        {% endif %}
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="hosting-empty-state">
                                    <div class="hosting-empty-icon">
                                        <i class="bi bi-check2-circle"></i>
                                    </div>
                                    <h4>No Due Payments</h4>
                                    <p>
                                        You do not have any currently due hosting partner payments.
                                        Optional featured visibility items may appear here when available.
                                    </p>
                                </div>
                            {% endif %}
                        </div>
                    </div>


                    <!-- OPTIONAL ITEMS -->
                    {% if optional_items %}
                        <div class="hosting-payment-card">
                            <div class="hosting-payment-card-header">
                                <div>
                                    <h3>Optional Payments</h3>
                                    <p>
                                        Optional payments are not required to use the platform, but they may unlock
                                        extra visibility or promotional benefits.
                                    </p>
                                </div>
                            </div>

                            <div class="hosting-payment-card-body">
                                <div class="hosting-payable-list">
                                    {% for item in optional_items %}
                                        <div class="hosting-payable-item">
                                            <div class="hosting-payable-title-row">
                                                <div>
                                                    <div class="hosting-payable-title">
                                                        {{ item.title }}
                                                    </div>

                                                    {% if item.description %}
                                                        <p class="hosting-payable-desc">
                                                            {{ item.description }}
                                                        </p>
                                                    {% endif %}
                                                </div>

                                                <div class="hosting-payable-amount">
                                                    USD {{ item.amount_usd|floatformat:2 }}
                                                </div>
                                            </div>

                                            <div class="hosting-payable-meta">
                                                <span class="hosting-chip optional">
                                                    <i class="bi bi-star-fill"></i>
                                                    Optional
                                                </span>

                                                <span class="hosting-chip">
                                                    <i class="bi bi-info-circle-fill"></i>
                                                    {{ item.get_payment_status_display }}
                                                </span>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                    {% endif %}


                    <!-- PAID ITEMS -->
                    <div class="hosting-payment-card">
                        <div class="hosting-payment-card-header">
                            <div>
                                <h3>Paid Payment History</h3>
                                <p>
                                    Completed host-side payments are shown here for reference.
                                </p>
                            </div>
                        </div>

                        <div class="hosting-payment-card-body">
                            {% if paid_items %}
                                <div class="hosting-payable-list">
                                    {% for item in paid_items %}
                                        <div class="hosting-payable-item">
                                            <div class="hosting-payable-title-row">
                                                <div>
                                                    <div class="hosting-payable-title">
                                                        {{ item.title }}
                                                    </div>

                                                    {% if item.description %}
                                                        <p class="hosting-payable-desc">
                                                            {{ item.description }}
                                                        </p>
                                                    {% endif %}
                                                </div>

                                                <div class="hosting-payable-amount">
                                                    USD {{ item.amount_usd|floatformat:2 }}
                                                </div>
                                            </div>

                                            <div class="hosting-payable-meta">
                                                <span class="hosting-chip paid">
                                                    <i class="bi bi-check-circle-fill"></i>
                                                    Paid
                                                </span>

                                                {% if item.reference_code %}
                                                    <span class="hosting-chip">
                                                        <i class="bi bi-hash"></i>
                                                        {{ item.reference_code }}
                                                    </span>
                                                {% endif %}
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% else %}
                                <div class="hosting-empty-state">
                                    <div class="hosting-empty-icon">
                                        <i class="bi bi-receipt"></i>
                                    </div>
                                    <h4>No Paid Items Yet</h4>
                                    <p>
                                        Once you complete hosting partner payments, they will appear in this section.
                                    </p>
                                </div>
                            {% endif %}
                        </div>
                    </div>


                    <!-- STICKY SELECTED CHECKOUT BAR -->
                    <div class="hosting-checkout-sticky" id="hostingCheckoutSticky">
                        <div>
                            <span id="selectedCount">0</span> selected item<span id="selectedPlural">s</span>
                            · Total: <strong>USD <span id="selectedTotal">0.00</span></strong>
                        </div>

                        <button type="submit" class="btn hosting-btn-gold">
                            <i class="bi bi-credit-card-fill me-2"></i>
                            Continue to Checkout
                        </button>
                    </div>

                </form>

            </div>


            <!-- SIDEBAR -->
            <div class="col-lg-4">

                <!-- WALLET -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Hosting Wallet</h3>
                        <p>
                            Your future event booking earnings and payout-ready balance will be shown here.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">
                        <div class="hosting-wallet-box">
                            <span>Available Balance</span>
                            <strong>USD {{ wallet.balance_usd|floatformat:2 }}</strong>
                        </div>

                        <div class="hosting-mini-stat-grid">
                            <div class="hosting-mini-stat">
                                <span>Total Venues</span>
                                <strong>{{ total_venues }}</strong>
                            </div>

                            <div class="hosting-mini-stat">
                                <span>Public Venues</span>
                                <strong>{{ public_venues_count }}</strong>
                            </div>

                            <div class="hosting-mini-stat">
                                <span>Event Packages</span>
                                <strong>{{ total_event_packages }}</strong>
                            </div>

                            <div class="hosting-mini-stat">
                                <span>Meal Plans</span>
                                <strong>{{ total_meal_plans }}</strong>
                            </div>

                            <div class="hosting-mini-stat">
                                <span>Add-on Services</span>
                                <strong>{{ total_add_on_services }}</strong>
                            </div>
                        </div>

                        <div class="hosting-side-actions">
                            <a href="{% url 'hosting_app:host_banking_details' %}"
                               class="btn btn-dark">
                                <i class="bi bi-bank2 me-2"></i>
                                Banking Details
                            </a>

                            <a href="#"
                               class="btn btn-outline-dark disabled"
                               aria-disabled="true">
                                <i class="bi bi-cash-stack me-2"></i>
                                Request Withdrawal
                            </a>
                        </div>
                    </div>
                </div>


                <!-- FEATURED BENEFIT -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Featured Visibility</h3>
                        <p>
                            Featured status can help your hosting profile and public listings receive better attention.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">
                        <div class="hosting-mini-stat-grid">
                            <div class="hosting-mini-stat">
                                <span>Current Status</span>
                                <strong>
                                    {% if host_profile.is_featured %}
                                        Featured
                                    {% else %}
                                        Standard
                                    {% endif %}
                                </strong>
                            </div>

                            <div class="hosting-mini-stat">
                                <span>Featured Venues</span>
                                <strong>{{ featured_venues_count }}</strong>
                            </div>
                        </div>

                        <p class="mt-3 mb-0 text-muted" style="line-height: 1.7;">
                            The featured payment is optional. After payment confirmation, your hosting profile
                            and approved public listings can be marked as featured according to platform rules.
                        </p>
                    </div>
                </div>


                <!-- QUICK LINKS -->
                <div class="hosting-side-card">
                    <div class="hosting-side-card-header">
                        <h3>Quick Links</h3>
                        <p>
                            Continue managing your hosting partner account.
                        </p>
                    </div>

                    <div class="hosting-side-card-body">
                        <div class="hosting-side-actions">
                            <a href="{% url 'hosting_app:host_dashboard' %}"
                               class="btn btn-dark">
                                <i class="bi bi-speedometer2 me-2"></i>
                                Dashboard
                            </a>

                            <a href="{% url 'hosting_app:host_profile_page' %}"
                               class="btn btn-outline-dark">
                                <i class="bi bi-person-vcard-fill me-2"></i>
                                My Profile
                            </a>

                            <a href="{% url 'hosting_app:host_venue_list' %}"
                               class="btn btn-outline-dark">
                                <i class="bi bi-buildings-fill me-2"></i>
                                My Venues
                            </a>

                            <a href="{% url 'hosting_app:host_event_package_list' %}"
                               class="btn btn-outline-dark">
                                <i class="bi bi-gift-fill me-2"></i>
                                Event Packages
                            </a>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
</section>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        const checkboxes = document.querySelectorAll('.js-hosting-payable-check');
        const stickyBar = document.getElementById('hostingCheckoutSticky');
        const selectedCount = document.getElementById('selectedCount');
        const selectedPlural = document.getElementById('selectedPlural');
        const selectedTotal = document.getElementById('selectedTotal');

        function updateSelectedSummary() {
            let count = 0;
            let total = 0;

            checkboxes.forEach(function (checkbox) {
                if (checkbox.checked) {
                    count += 1;
                    total += parseFloat(checkbox.dataset.amount || '0');
                }
            });

            selectedCount.textContent = count;
            selectedPlural.textContent = count === 1 ? '' : 's';
            selectedTotal.textContent = total.toFixed(2);

            if (count > 0) {
                stickyBar.classList.add('show');
            } else {
                stickyBar.classList.remove('show');
            }
        }

        checkboxes.forEach(function (checkbox) {
            checkbox.addEventListener('change', updateSelectedSummary);
        });

        updateSelectedSummary();
    });
</script>

{% endblock %}