{% extends 'dating_app/base_dating.html' %}
{% block title %}Payment Center{% endblock %}

{% block content %}
<style>
    /* =========================================================
       DATING PARTNER PAYMENT CENTER — PREMIUM TOUCH
    ========================================================= */

    .dating-payment-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(244, 63, 94, 0.10), transparent 30%),
            radial-gradient(circle at top right, rgba(168, 85, 247, 0.09), transparent 32%),
            linear-gradient(180deg, #fff7fb 0%, #ffffff 100%);
    }

    /* =========================================================
       HERO
    ========================================================= */

    .dating-payment-hero {
        position: relative;
        overflow: hidden;
        border-radius: 36px;
        padding: 2.8rem 2.5rem;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.14), transparent 34%),
            linear-gradient(135deg, #7c1d4e 0%, #be185d 48%, #7e22ce 100%);
        color: #ffffff;
        box-shadow: 0 28px 68px rgba(88, 28, 135, 0.20);
    }

    .dating-payment-hero::before {
        content: "";
        position: absolute;
        top: -95px;
        right: -70px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .dating-payment-hero::after {
        content: "";
        position: absolute;
        bottom: -120px;
        left: -80px;
        width: 310px;
        height: 310px;
        border-radius: 50%;
        background: rgba(251, 191, 36, 0.08);
        pointer-events: none;
    }

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

    .dating-payment-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.48rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: #fef3c7;
        font-size: 0.84rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        margin-bottom: 1rem;
    }

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

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

    /* =========================================================
       DATING PARTNER OVERVIEW PANEL
    ========================================================= */

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

    .dating-partner-item {
        height: 100%;
        border-radius: 22px;
        padding: 1rem 1.05rem;
        background: rgba(255, 255, 255, 0.94);
        color: #0f172a;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    }

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

    .dating-partner-value {
        color: #0f172a;
        font-weight: 900;
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .dating-partner-muted {
        color: #64748b;
        font-weight: 700;
    }

    /* =========================================================
       SUMMARY CARDS
    ========================================================= */

    .payment-summary-stat {
        position: relative;
        overflow: hidden;
        height: 100%;
        border-radius: 30px;
        padding: 1.55rem 1.45rem;
        border: 1px solid rgba(226, 232, 240, 0.95);
        background: rgba(255, 255, 255, 0.98);
        box-shadow: 0 18px 42px rgba(88, 28, 135, 0.09);
    }

    .payment-summary-stat::after {
        content: "";
        position: absolute;
        top: -50px;
        right: -50px;
        width: 115px;
        height: 115px;
        border-radius: 50%;
        background: rgba(190, 24, 93, 0.07);
    }

    .payment-summary-label {
        position: relative;
        z-index: 2;
        color: #64748b;
        font-size: 0.92rem;
        font-weight: 800;
        margin-bottom: 0.55rem;
    }

    .payment-summary-value {
        position: relative;
        z-index: 2;
        font-size: clamp(1.8rem, 3vw, 2.3rem);
        font-weight: 950;
        line-height: 1;
        margin-bottom: 0;
    }

    .payment-summary-note {
        position: relative;
        z-index: 2;
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.55;
        margin-top: 0.65rem;
        margin-bottom: 0;
    }

    .payment-wallet-topup {
        position: relative;
        z-index: 2;
        border-radius: 999px;
        font-weight: 800;
        margin-top: 0.8rem;
    }

    /* =========================================================
       SECTION HEADS
    ========================================================= */

    .payment-section-block {
        margin-bottom: 3rem;
    }

    .payment-section-title-wrap {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1.15rem;
    }

    .payment-section-mini {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        color: #be185d;
        font-size: 0.82rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
    }

    .payment-section-title {
        color: #0f172a;
        font-weight: 950;
        margin-bottom: 0;
        letter-spacing: -0.02em;
    }

    /* =========================================================
       PAYMENT CARDS
    ========================================================= */

    .payment-card,
    .payment-standard-card {
        transition: all 0.2s ease-in-out;
        border-radius: 30px !important;
        border: 1px solid #e2e8f0 !important;
        background: rgba(255, 255, 255, 0.99) !important;
        box-shadow: 0 18px 38px rgba(88, 28, 135, 0.08) !important;
    }

    .payment-card:hover,
    .payment-standard-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 48px rgba(88, 28, 135, 0.12) !important;
    }

    .payment-card.selected-card {
        border-color: #be185d !important;
        box-shadow:
            0 0 0 3px rgba(190, 24, 93, 0.10),
            0 22px 48px rgba(88, 28, 135, 0.12) !important;
        background: #fffafd !important;
    }

    .payable-checkbox {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .payable-selector-wrap {
        min-width: 92px;
    }

    .payable-selector-label {
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 84px;
        height: 84px;
        border: 2px solid #be185d;
        border-radius: 1.15rem;
        background: #ffffff;
        color: #be185d;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 .25rem .55rem rgba(0, 0, 0, 0.07);
    }

    .payable-selector-label:hover {
        background: #be185d;
        color: #ffffff;
        transform: translateY(-1px);
    }

    .selector-icon {
        font-size: 1.45rem;
        font-weight: 700;
        line-height: 1;
        opacity: 0.28;
    }

    .selector-text {
        font-size: 0.9rem;
        font-weight: 800;
        margin-top: 0.35rem;
    }

    .payable-checkbox:checked + .payable-selector-label {
        background: #be185d;
        color: #ffffff;
        border-color: #be185d;
    }

    .payable-checkbox:checked + .payable-selector-label .selector-icon {
        opacity: 1;
    }

    .selection-hint {
        font-size: 0.9rem;
        color: #64748b;
        padding-top: 0.85rem;
        border-top: 1px dashed #dbe4ee;
    }

    .payment-meta-line {
        color: #334155;
        line-height: 1.6;
    }

    /* =========================================================
       SELECT ALL / EMPTY STATES
    ========================================================= */

    .select-all-due-btn {
        background: #7c1d4e;
        color: #f8f3e7;
        border: 1px solid #e5b7cb;
        border-radius: 0.9rem;
        font-size: 0.92rem;
        min-height: 46px;
        transition: all 0.2s ease-in-out;
    }

    .select-all-due-btn:hover,
    .select-all-due-btn:focus {
        background: #9d174d;
        color: #ffffff;
        border-color: #f2c7d8;
        box-shadow: 0 0.35rem 0.8rem rgba(88, 28, 135, 0.20);
    }

    .select-all-due-btn.active-select {
        background: #be185d;
        color: #ffffff;
        border-color: #be185d;
    }

    .select-all-due-btn.active-unselect {
        background: #7f1d1d;
        color: #ffffff;
        border-color: #7f1d1d;
    }

    .payment-empty-state {
        border-radius: 26px;
        padding: 1.35rem 1.45rem;
        border: 1px dashed rgba(190, 24, 93, 0.34);
        background: rgba(255, 255, 255, 0.94);
        color: #475569;
        line-height: 1.65;
    }

    /* =========================================================
       PAYMENT HISTORY
    ========================================================= */

    .payment-history-wrap {
        border-radius: 30px;
        overflow: hidden;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 18px 38px rgba(88, 28, 135, 0.08);
    }

    .payment-history-wrap table {
        margin-bottom: 0;
    }

    .payment-history-wrap thead th {
        background: #fff7fb;
        color: #334155;
        font-size: 0.88rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        border-bottom: 1px solid #f1d5e5;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .payment-history-wrap tbody td {
        vertical-align: middle;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* =========================================================
       STICKY SUMMARY BAR
    ========================================================= */

    .payment-action-wrap {
        z-index: 1030;
    }

    .payment-summary-bar {
        backdrop-filter: blur(4px);
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 28%),
            #7c1d4e;
        color: #ffffff;
        border-color: #7c1d4e !important;
        border-radius: 28px !important;
    }

    .payment-summary-bar h5,
    .payment-summary-bar p,
    .payment-summary-bar strong {
        color: #ffffff !important;
    }

    .payment-summary-bar .btn-outline-secondary {
        background: #ffffff;
        border-color: #ffffff;
        color: #7c1d4e;
        border-radius: 0.85rem;
        font-weight: 800;
    }

    .proceed-pay-btn {
        background: #1f7a4d;
        color: #ffffff;
        border: 1px solid #1f7a4d;
        min-height: 48px;
        border-radius: 0.85rem;
        box-shadow: 0 0.35rem 0.75rem rgba(31, 122, 77, 0.25);
        transition: all 0.2s ease-in-out;
    }

    .proceed-pay-btn:hover:not(:disabled),
    .proceed-pay-btn:focus:not(:disabled) {
        background: #19633f;
        border-color: #19633f;
        color: #ffffff;
        transform: translateY(-1px);
        box-shadow: 0 0.5rem 1rem rgba(31, 122, 77, 0.35);
    }

    .proceed-pay-btn:disabled {
        background: #7f8c85;
        border-color: #7f8c85;
        color: #f5f5f5;
        box-shadow: none;
        cursor: not-allowed;
        opacity: 0.85;
    }

    /* =========================================================
       RESPONSIVE
    ========================================================= */

    @media (max-width: 767.98px) {
        .dating-payment-hero {
            padding: 2rem 1.35rem;
            border-radius: 28px;
        }

        .dating-partner-panel {
            padding: 1rem;
            border-radius: 24px;
        }

        .payment-summary-stat {
            border-radius: 24px;
            padding: 1.2rem;
        }

        .payment-summary-value {
            font-size: 1.65rem;
        }

        .payable-selector-wrap {
            min-width: 74px;
        }

        .payable-selector-label {
            width: 70px;
            height: 70px;
            border-radius: 0.9rem;
        }

        .selector-icon {
            font-size: 1.2rem;
        }

        .selector-text {
            font-size: 0.8rem;
        }

        .payment-summary-bar .btn {
            width: 100%;
            min-height: 48px;
        }

        .payment-summary-bar h5 {
            font-size: 1rem;
        }

        .payment-summary-bar p {
            line-height: 1.4;
        }
    }

    /* =========================================================
    Dating Partner Payment Center - White Text Fix
    ========================================================= */

    .dating-partner-panel {
        background: #ffffff;
    }

    .dating-partner-item {
        background: #ffffff;
        color: #111827;
    }

    .dating-partner-label {
        color: #6b7280 !important;
    }

    .dating-partner-value {
        color: #111827 !important;
    }

    .dating-partner-value span {
        color: inherit;
    }

    .dating-partner-muted {
        color: #6b7280 !important;
    }
</style>


<section class="dating-payment-page py-5">
    <div class="container">

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="dating-payment-hero mb-5">
            <div class="dating-payment-hero-inner">

                <span class="dating-payment-mini-title">
                    <i class="bi bi-credit-card-2-front-fill"></i>
                    Dating Partner Dashboard
                </span>

                <h1>
                    Payment Center
                </h1>

                <p>
                    Review your due, upcoming, optional, and completed payments connected to your
                    Date in Sri Lanka Dating Partner account, confirmation process, and featured profile opportunities.
                </p>

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

                        <div class="col-md-4">
                            <div class="dating-partner-item">
                                <span class="dating-partner-label">
                                    Profile Status
                                </span>

                                <p class="dating-partner-value">
                                    {{ dating_partner.get_status_display|default:dating_partner.status }}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="dating-partner-item">
                                <span class="dating-partner-label">
                                    Confirmed
                                </span>

                                <p class="dating-partner-value">
                                    {% if dating_partner.is_confirmed %}
                                        Yes
                                    {% else %}
                                        <span class="dating-partner-muted">No</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="dating-partner-item">
                                <span class="dating-partner-label">
                                    Featured Profile
                                </span>

                                <p class="dating-partner-value">
                                    {% if dating_partner.is_featured %}
                                        Enabled
                                    {% else %}
                                        <span class="dating-partner-muted">Not enabled yet</span>
                                    {% endif %}
                                </p>
                            </div>
                        </div>

                    </div>
                </div>

            </div>
        </div>


        <!-- =====================================================
             SUMMARY CARDS
        ====================================================== -->
        <div class="row g-4 mb-5">

            <div class="col-6 col-md-3">
                <div class="payment-summary-stat">
                    <p class="payment-summary-label">Total Due</p>
                    <h3 class="payment-summary-value text-danger">
                        ${{ total_due }}
                    </h3>
                    <p class="payment-summary-note">
                        Due dating-partner charges ready for checkout.
                    </p>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="payment-summary-stat">
                    <p class="payment-summary-label">Upcoming / Estimated</p>
                    <h3 class="payment-summary-value text-warning">
                        ${{ total_upcoming }}
                    </h3>
                    <p class="payment-summary-note">
                        Future or pending payment items.
                    </p>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="payment-summary-stat">
                    <p class="payment-summary-label">Total Paid</p>
                    <h3 class="payment-summary-value text-success">
                        ${{ total_paid }}
                    </h3>
                    <p class="payment-summary-note">
                        Completed payments recorded so far.
                    </p>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="payment-summary-stat">
                    <p class="payment-summary-label">Wallet Balance</p>
                    <h3 class="payment-summary-value text-primary">
                        ${{ wallet.balance_usd|floatformat:2 }}
                    </h3>

                    <a href="{% url 'dating_app:dating_partner_wallet_topup' %}"
                        class="btn btn-sm btn-outline-primary payment-wallet-topup">
                        <i class="bi bi-wallet2 me-1"></i>
                        Top Up Wallet
                    </a>
                </div>
            </div>

        </div>


        <form method="post"
              action="{% url 'dating_app:dating_partner_payment_checkout' %}"
              id="paymentSelectionForm">
            {% csrf_token %}

            <!-- =====================================================
                 DUE ITEMS
            ====================================================== -->
            <div class="payment-section-block">

                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
                    <div class="payment-section-title-wrap mb-0">
                        <span class="payment-section-mini">
                            <i class="bi bi-exclamation-circle-fill"></i>
                            Ready for Checkout
                        </span>

                        <h3 class="payment-section-title">
                            Due Payments
                        </h3>
                    </div>

                    {% if due_items %}
                        <button type="button"
                                class="btn px-3 py-2 fw-medium shadow-sm select-all-due-btn"
                                id="selectAllDueBtn">
                            Select All Due Payments
                        </button>
                    {% endif %}
                </div>

                {% if due_items %}
                    <div class="row g-4">

                        {% for item in due_items %}
                            <div class="col-lg-6">
                                <div class="payment-card border rounded-4 p-4 h-100 bg-white shadow-sm position-relative">

                                    <div class="d-flex justify-content-between align-items-start mb-3">
                                        <div class="d-flex align-items-start gap-3">

                                            {% if item.amount_usd > 0 %}
                                                <div class="payable-selector-wrap">
                                                    <input
                                                        class="payable-checkbox"
                                                        type="checkbox"
                                                        name="selected_items"
                                                        value="{{ item.id }}"
                                                        data-amount="{{ item.amount_usd }}"
                                                        id="payable_{{ item.id }}"
                                                    >

                                                    <label for="payable_{{ item.id }}"
                                                           class="payable-selector-label">
                                                        <span class="selector-icon">✓</span>
                                                        <span class="selector-text">Select</span>
                                                    </label>
                                                </div>
                                            {% endif %}

                                            <div>
                                                <h5 class="fw-bold mb-1">
                                                    {{ item.title }}
                                                </h5>

                                                <p class="text-muted small mb-2">
                                                    {{ item.get_payment_for_display }}
                                                </p>
                                            </div>
                                        </div>

                                        <div class="text-end">
                                            <span class="badge bg-danger">Due</span>

                                            {% if item.is_optional %}
                                                <span class="badge bg-info text-dark ms-1">
                                                    Optional
                                                </span>
                                            {% endif %}
                                        </div>
                                    </div>

                                    {% if item.description %}
                                        <p class="mb-3 payment-meta-line">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

                                    <div class="row g-2">
                                        <div class="col-sm-6">
                                            <p class="mb-1 payment-meta-line">
                                                <strong>Amount:</strong>
                                                ${{ item.amount_usd }}
                                            </p>
                                        </div>

                                        <div class="col-sm-6">
                                            <p class="mb-1 payment-meta-line">
                                                <strong>Amount State:</strong>
                                                {{ item.get_amount_state_display }}
                                            </p>
                                        </div>
                                    </div>

                                    {% if item.due_date %}
                                        <p class="mb-1 mt-2 payment-meta-line">
                                            <strong>Due Date:</strong>
                                            {{ item.due_date }}
                                        </p>
                                    {% endif %}

                                    {% if item.notes %}
                                        <p class="mb-0 mt-2 payment-meta-line">
                                            <strong>Notes:</strong>
                                            {{ item.notes }}
                                        </p>
                                    {% endif %}

                                    {% if item.amount_usd > 0 %}
                                        <div class="selection-hint mt-3">
                                            Tap the selector to add this payment to checkout.
                                        </div>
                                    {% else %}
                                        <div class="form-text mt-3">
                                            This item cannot be selected because the amount is $0.00.
                                        </div>
                                    {% endif %}

                                </div>
                            </div>
                        {% endfor %}

                    </div>
                {% else %}
                    <div class="payment-empty-state">
                        No due payments at the moment.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 UPCOMING ITEMS
            ====================================================== -->
            <div class="payment-section-block">
                <div class="payment-section-title-wrap">
                    <span class="payment-section-mini">
                        <i class="bi bi-hourglass-split"></i>
                        Not Yet Due
                    </span>

                    <h3 class="payment-section-title">
                        Upcoming Required Payments
                    </h3>
                </div>

                {% if upcoming_items %}
                    <div class="row g-4">

                        {% for item in upcoming_items %}
                            <div class="col-lg-6">
                                <div class="payment-standard-card border rounded-4 p-4 h-100 bg-white shadow-sm">

                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="fw-bold mb-1">
                                            {{ item.title }}
                                        </h5>

                                        <span class="badge bg-warning text-dark">
                                            {{ item.get_payment_status_display }}
                                        </span>
                                    </div>

                                    <p class="text-muted small mb-2">
                                        {{ item.get_payment_for_display }}
                                    </p>

                                    {% if item.description %}
                                        <p class="mb-3 payment-meta-line">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

                                    <p class="mb-1 payment-meta-line">
                                        <strong>Amount:</strong>
                                        ${{ item.amount_usd }}
                                    </p>

                                    <p class="mb-1 payment-meta-line">
                                        <strong>Amount State:</strong>
                                        {{ item.get_amount_state_display }}
                                    </p>

                                    {% if item.effective_from %}
                                        <p class="mb-1 payment-meta-line">
                                            <strong>Effective From:</strong>
                                            {{ item.effective_from }}
                                        </p>
                                    {% endif %}

                                    {% if item.notes %}
                                        <p class="mb-0 payment-meta-line">
                                            <strong>Notes:</strong>
                                            {{ item.notes }}
                                        </p>
                                    {% endif %}

                                    <div class="form-text mt-2">
                                        This payment is not yet available for checkout.
                                    </div>

                                </div>
                            </div>
                        {% endfor %}

                    </div>
                {% else %}
                    <div class="payment-empty-state">
                        No upcoming required payments.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 OPTIONAL ITEMS
            ====================================================== -->
            <div class="payment-section-block">
                <div class="payment-section-title-wrap">
                    <span class="payment-section-mini">
                        <i class="bi bi-stars"></i>
                        Optional Charges
                    </span>

                    <h3 class="payment-section-title">
                        Optional Payments
                    </h3>
                </div>

                {% if optional_items %}
                    <div class="row g-4">

                        {% for item in optional_items %}
                            <div class="col-lg-6">
                                <div class="payment-standard-card border rounded-4 p-4 h-100 bg-white shadow-sm">

                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h5 class="fw-bold mb-1">
                                            {{ item.title }}
                                        </h5>

                                        <span class="badge bg-info text-dark">
                                            Optional
                                        </span>
                                    </div>

                                    <p class="text-muted small mb-2">
                                        {{ item.get_payment_for_display }}
                                    </p>

                                    {% if item.description %}
                                        <p class="mb-3 payment-meta-line">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

                                    <p class="mb-1 payment-meta-line">
                                        <strong>Amount:</strong>
                                        ${{ item.amount_usd }}
                                    </p>

                                    <p class="mb-1 payment-meta-line">
                                        <strong>Amount State:</strong>
                                        {{ item.get_amount_state_display }}
                                    </p>

                                    <p class="mb-1 payment-meta-line">
                                        <strong>Status:</strong>
                                        {{ item.get_payment_status_display }}
                                    </p>

                                    {% if item.notes %}
                                        <p class="mb-0 payment-meta-line">
                                            <strong>Notes:</strong>
                                            {{ item.notes }}
                                        </p>
                                    {% endif %}

                                    <div class="form-text mt-2">
                                        This optional payment is not currently due.
                                    </div>

                                </div>
                            </div>
                        {% endfor %}

                    </div>
                {% else %}
                    <div class="payment-empty-state">
                        No optional payments at the moment.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 PAYMENT HISTORY
            ====================================================== -->
            <div class="payment-section-block">
                <div class="payment-section-title-wrap">
                    <span class="payment-section-mini">
                        <i class="bi bi-clock-history"></i>
                        Completed Charges
                    </span>

                    <h3 class="payment-section-title">
                        Payment History
                    </h3>
                </div>

                {% if paid_items %}
                    <div class="table-responsive payment-history-wrap">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>Title</th>
                                    <th>Payment For</th>
                                    <th>Amount</th>
                                    <th>Paid At</th>
                                    <th>Status</th>
                                </tr>
                            </thead>

                            <tbody>
                                {% for item in paid_items %}
                                    <tr>
                                        <td>{{ item.title }}</td>
                                        <td>{{ item.get_payment_for_display }}</td>
                                        <td>${{ item.amount_usd }}</td>
                                        <td>
                                            {% if item.paid_at %}
                                                {{ item.paid_at|date:"Y-m-d H:i" }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </td>
                                        <td>
                                            <span class="badge bg-success">Paid</span>
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <div class="payment-empty-state">
                        No paid items yet.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 STICKY ACTION BAR
            ====================================================== -->
            <div class="sticky-bottom payment-action-wrap pb-3">
                <div class="border rounded-4 shadow p-3 payment-summary-bar">
                    <div class="row g-3 align-items-center">

                        <div class="col-12 col-md">
                            <h5 class="fw-bold mb-1">
                                Selected Payments
                            </h5>

                            <p class="mb-0 text-muted small">
                                <span id="selectedCount">0</span> item(s) selected
                                <span class="mx-1 d-none d-sm-inline">·</span>
                                Total:
                                <strong>$<span id="selectedTotal">0.00</span></strong>
                            </p>
                        </div>

                        <div class="col-12 col-md-auto">
                            <div class="d-grid d-sm-flex gap-2">

                                <button type="button"
                                        class="btn btn-outline-secondary px-4"
                                        id="clearSelectionBtn">
                                    Clear Selection
                                </button>

                                <button type="submit"
                                        class="btn px-4 fw-semibold proceed-pay-btn"
                                        id="proceedPaymentsBtn"
                                        disabled>
                                    Proceed to Payments
                                </button>

                            </div>
                        </div>

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

        </form>

    </div>
</section>


<script>
document.addEventListener('DOMContentLoaded', function () {
    const checkboxes = document.querySelectorAll('.payable-checkbox');
    const selectedCountEl = document.getElementById('selectedCount');
    const selectedTotalEl = document.getElementById('selectedTotal');
    const proceedBtn = document.getElementById('proceedPaymentsBtn');
    const clearBtn = document.getElementById('clearSelectionBtn');
    const selectAllBtn = document.getElementById('selectAllDueBtn');

    function updateSelectionSummary() {
        let selectedCount = 0;
        let selectedTotal = 0;

        checkboxes.forEach(function (checkbox) {
            const card = checkbox.closest('.payment-card');

            if (checkbox.checked) {
                selectedCount += 1;
                selectedTotal += parseFloat(checkbox.dataset.amount || '0');

                if (card) {
                    card.classList.add('selected-card');
                }
            } else {
                if (card) {
                    card.classList.remove('selected-card');
                }
            }
        });

        selectedCountEl.textContent = selectedCount;
        selectedTotalEl.textContent = selectedTotal.toFixed(2);
        proceedBtn.disabled = selectedCount === 0;

        if (selectAllBtn) {
            const allChecked =
                checkboxes.length > 0 &&
                Array.from(checkboxes).every(cb => cb.checked);

            selectAllBtn.textContent = allChecked
                ? 'Unselect All Due Payments'
                : 'Select All Due Payments';

            selectAllBtn.classList.toggle('active-select', !allChecked);
            selectAllBtn.classList.toggle('active-unselect', allChecked);
        }
    }

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

    if (clearBtn) {
        clearBtn.addEventListener('click', function () {
            checkboxes.forEach(function (checkbox) {
                checkbox.checked = false;
            });

            updateSelectionSummary();
        });
    }

    if (selectAllBtn) {
        selectAllBtn.addEventListener('click', function () {
            const anyUnchecked =
                Array.from(checkboxes).some(cb => !cb.checked);

            checkboxes.forEach(function (checkbox) {
                checkbox.checked = anyUnchecked;
            });

            updateSelectionSummary();
        });
    }

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