{% extends 'expat_life/base.html' %}
{% block title %}Payment Center{% endblock %}

{% block content %}
<style>
    /* =========================================================
       GUEST PAYMENT CENTER — PREMIUM LIVE IN SRI LANKA THEME
    ========================================================= */

    :root {
        --lis-deep: #07131c;
        --lis-navy: #0b2638;
        --lis-blue: #0d6efd;
        --lis-blue-dark: #0b3d91;
        --lis-teal: #0f766e;
        --lis-teal-bright: #20c997;
        --lis-teal-soft: #ecfdf5;
        --lis-gold: #ffc107;
        --lis-gold-light: #ffd45f;
        --lis-sand: #fff8ed;
        --lis-soft-blue: #f5f9ff;
        --lis-white: #ffffff;
        --lis-text: #102033;
        --lis-muted: #64748b;
        --lis-border: rgba(15, 42, 64, 0.10);
        --lis-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
        --lis-shadow-strong: 0 28px 70px rgba(15, 23, 42, 0.16);
    }

    .guest-payment-page {
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        background:
            radial-gradient(circle at 10% 10%, rgba(255, 193, 7, 0.13), transparent 28%),
            radial-gradient(circle at 88% 14%, rgba(13, 110, 253, 0.10), transparent 30%),
            radial-gradient(circle at 82% 86%, rgba(15, 118, 110, 0.12), transparent 32%),
            linear-gradient(180deg, #f5f9ff 0%, #ffffff 100%);
    }

    .guest-payment-page::before {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        right: -210px;
        top: -210px;
        border-radius: 50%;
        background: rgba(255, 193, 7, 0.11);
        pointer-events: none;
    }

    .guest-payment-page::after {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        left: -170px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.07);
        pointer-events: none;
    }

    .guest-payment-page > * {
        position: relative;
        z-index: 2;
    }

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

    .guest-payment-hero {
        position: relative;
        overflow: hidden;
        border-radius: 40px;
        padding: 2.9rem 2.6rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.18), transparent 34%),
            radial-gradient(circle at bottom left, rgba(32, 201, 151, 0.18), transparent 34%),
            linear-gradient(135deg, #061b2a 0%, #0b3d91 52%, #0f766e 100%);
        color: #ffffff;
        box-shadow: 0 30px 70px rgba(15, 23, 42, 0.20);
    }

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

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

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

    .guest-payment-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 0.95rem;
        border-radius: 999px;
        background: rgba(255, 193, 7, 0.14);
        border: 1px solid rgba(255, 193, 7, 0.28);
        color: #ffd36b;
        font-size: 0.82rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.065em;
        margin-bottom: 1rem;
        backdrop-filter: blur(10px);
    }

    .guest-payment-mini-title::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.12);
    }

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

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

    /* =========================================================
       CURRENT GUEST SELECTION PANEL
    ========================================================= */

    .guest-plan-panel {
        margin-top: 1.4rem;
        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(10px);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.10);
    }

    .guest-plan-item,
    .guest-plan-panel .guest-plan-item {
        height: 100%;
        border-radius: 22px;
        padding: 1rem 1.05rem;
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.10), transparent 32%),
            rgba(255, 255, 255, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: var(--lis-text) !important;
        box-shadow: 0 14px 28px rgba(15, 23, 42, 0.08);
    }

    .guest-plan-label,
    .guest-plan-panel .guest-plan-label {
        display: block;
        color: var(--lis-muted) !important;
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.055em;
        margin-bottom: 0.4rem;
    }

    .guest-plan-value,
    .guest-plan-panel .guest-plan-value {
        color: var(--lis-text) !important;
        font-weight: 950;
        font-size: 1rem;
        line-height: 1.45;
        margin-bottom: 0;
    }

    .guest-plan-muted,
    .guest-plan-panel .guest-plan-muted {
        color: var(--lis-muted) !important;
        font-weight: 800;
    }

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

    .payment-summary-stat {
        position: relative;
        overflow: hidden;
        height: 100%;
        border-radius: 30px;
        padding: 1.55rem 1.45rem;
        border: 1px solid rgba(15, 42, 64, 0.08);
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.10), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: var(--lis-shadow);
        transition: all 0.24s ease;
    }

    .payment-summary-stat::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        opacity: 0;
        transition: opacity 0.24s ease;
    }

    .payment-summary-stat::after {
        content: "";
        position: absolute;
        top: -56px;
        right: -56px;
        width: 128px;
        height: 128px;
        border-radius: 50%;
        background: rgba(13, 110, 253, 0.055);
    }

    .payment-summary-stat:hover {
        transform: translateY(-4px);
        box-shadow: var(--lis-shadow-strong);
    }

    .payment-summary-stat:hover::before {
        opacity: 1;
    }

    .payment-summary-label {
        position: relative;
        z-index: 2;
        color: var(--lis-muted);
        font-size: 0.92rem;
        font-weight: 850;
        margin-bottom: 0.55rem;
    }

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

    .payment-summary-stat .text-success,
    .payment-summary-value.text-success {
        color: var(--lis-teal) !important;
    }

    .payment-summary-stat .text-warning,
    .payment-summary-value.text-warning {
        color: #8a5a00 !important;
    }

    .payment-summary-stat .text-danger,
    .payment-summary-value.text-danger {
        color: #b42318 !important;
    }

    .payment-summary-note {
        position: relative;
        z-index: 2;
        color: var(--lis-muted);
        font-size: 0.84rem;
        line-height: 1.6;
        margin-top: 0.65rem;
        margin-bottom: 0;
    }

    .payment-wallet-topup {
        position: relative;
        z-index: 2;
        border-radius: 999px;
        font-weight: 850;
        margin-top: 0.9rem;
        padding: 0.65rem 1.1rem;
        border-color: rgba(15, 118, 110, 0.34);
        color: var(--lis-teal);
        background: #ffffff;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
    }

    .payment-wallet-topup:hover {
        background: var(--lis-teal);
        border-color: var(--lis-teal);
        color: #ffffff;
        transform: translateY(-2px);
    }

    /* =========================================================
       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;
        width: fit-content;
        padding: 7px 15px;
        border-radius: 999px;
        background: rgba(15, 118, 110, 0.09);
        border: 1px solid rgba(15, 118, 110, 0.14);
        color: var(--lis-teal);
        font-size: 0.78rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.075em;
    }

    .payment-section-mini::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--lis-gold);
        box-shadow: 0 0 0 5px rgba(255, 193, 7, 0.14);
    }

    .payment-section-title {
        color: var(--lis-text);
        font-weight: 950;
        margin-bottom: 0;
        letter-spacing: -0.035em;
        line-height: 1.12;
    }

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

    .payment-card,
    .payment-standard-card {
        position: relative;
        overflow: hidden;
        transition: all 0.24s ease;
        border-radius: 30px !important;
        border: 1px solid rgba(15, 42, 64, 0.08) !important;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.08), transparent 32%),
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
        box-shadow: var(--lis-shadow) !important;
    }

    .payment-card::before,
    .payment-standard-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
        opacity: 0;
        transition: opacity 0.24s ease;
    }

    .payment-card:hover,
    .payment-standard-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--lis-shadow-strong) !important;
        border-color: rgba(15, 118, 110, 0.18) !important;
    }

    .payment-card:hover::before,
    .payment-standard-card:hover::before {
        opacity: 1;
    }

    .payment-card.selected-card {
        border-color: rgba(15, 118, 110, 0.40) !important;
        box-shadow:
            0 0 0 4px rgba(15, 118, 110, 0.10),
            0 24px 58px rgba(15, 23, 42, 0.13) !important;
        background:
            radial-gradient(circle at 92% 10%, rgba(15, 118, 110, 0.10), transparent 34%),
            linear-gradient(180deg, #ffffff 0%, #ecfdf5 100%) !important;
    }

    .payment-card.selected-card::before {
        opacity: 1;
    }

    .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 rgba(15, 118, 110, 0.40);
        border-radius: 24px;
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        color: var(--lis-teal);
        cursor: pointer;
        user-select: none;
        transition: all 0.22s ease;
        box-shadow: 0 12px 24px rgba(15, 23, 42, 0.07);
    }

    .payable-selector-label:hover {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-teal));
        border-color: transparent;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(15, 118, 110, 0.20);
    }

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

    .selector-text {
        font-size: 0.88rem;
        font-weight: 850;
        margin-top: 0.35rem;
    }

    .payable-checkbox:checked + .payable-selector-label {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 16px 32px rgba(13, 110, 253, 0.22);
    }

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

    .selection-hint {
        font-size: 0.9rem;
        color: var(--lis-muted);
        padding-top: 0.85rem;
        border-top: 1px dashed rgba(15, 42, 64, 0.14);
        line-height: 1.6;
    }

    .payment-meta-line {
        color: #475569;
        line-height: 1.65;
    }

    .payment-meta-line strong,
    .payment-card strong,
    .payment-standard-card strong {
        color: var(--lis-text);
    }

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

    .select-all-due-btn {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        color: #ffffff;
        border: none;
        border-radius: 999px;
        font-size: 0.92rem;
        font-weight: 850;
        min-height: 46px;
        padding: 0.7rem 1.2rem;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.18);
        transition: all 0.22s ease;
    }

    .select-all-due-btn:hover,
    .select-all-due-btn:focus {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-teal));
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(15, 118, 110, 0.22);
    }

    .select-all-due-btn.active-select {
        background: linear-gradient(135deg, var(--lis-teal), var(--lis-blue));
        color: #ffffff;
        border-color: transparent;
    }

    .select-all-due-btn.active-unselect {
        background: linear-gradient(135deg, #7f1d1d, #b42318);
        color: #ffffff;
        border-color: transparent;
    }

    .payment-empty-state {
        border-radius: 26px;
        padding: 1.35rem 1.45rem;
        border: 1px dashed rgba(15, 118, 110, 0.34);
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.10), transparent 32%),
            rgba(255, 255, 255, 0.94);
        color: #475569;
        line-height: 1.68;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.045);
    }

    /* =========================================================
       DEPOSIT CARDS
    ========================================================= */

    .security-deposit-card {
        position: relative;
        overflow: hidden;
        border-radius: 30px;
        border: 1px solid rgba(255, 193, 7, 0.24) !important;
        background:
            radial-gradient(circle at 92% 10%, rgba(255, 193, 7, 0.15), transparent 34%),
            linear-gradient(135deg, #fff8ed 0%, #ffffff 100%);
        box-shadow: var(--lis-shadow);
    }

    .security-deposit-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto 0;
        height: 4px;
        background: linear-gradient(90deg, var(--lis-gold), var(--lis-teal), var(--lis-blue));
    }

    .security-deposit-title {
        position: relative;
        z-index: 2;
        color: #8a5a00;
        font-weight: 950;
        letter-spacing: -0.015em;
    }

    .security-deposit-text {
        position: relative;
        z-index: 2;
        color: #475569;
        line-height: 1.72;
    }

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

    .payment-history-wrap {
        border-radius: 30px;
        overflow: hidden;
        border: 1px solid rgba(15, 42, 64, 0.08);
        background:
            linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
        box-shadow: var(--lis-shadow);
    }

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

    .payment-history-wrap thead th {
        background:
            linear-gradient(180deg, #f8fbff 0%, #f1f5f9 100%);
        color: var(--lis-text);
        font-size: 0.84rem;
        font-weight: 950;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 1px solid rgba(15, 42, 64, 0.08);
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .payment-history-wrap tbody td {
        color: #475569;
        vertical-align: middle;
        padding-top: 1rem;
        padding-bottom: 1rem;
        border-color: rgba(15, 42, 64, 0.06);
    }

    .payment-history-wrap tbody tr:hover {
        background: rgba(13, 110, 253, 0.025);
    }

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

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

    .payment-summary-bar {
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(10px);
        background:
            radial-gradient(circle at top right, rgba(255, 193, 7, 0.14), transparent 30%),
            radial-gradient(circle at bottom left, rgba(32, 201, 151, 0.14), transparent 32%),
            linear-gradient(135deg, #061b2a 0%, #0b3d91 52%, #0f766e 100%);
        color: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 28px !important;
        box-shadow: 0 24px 58px rgba(15, 23, 42, 0.22);
    }

    .payment-summary-bar::before {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -110px;
        top: -120px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        pointer-events: none;
    }

    .payment-summary-bar > * {
        position: relative;
        z-index: 2;
    }

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

    .payment-summary-bar p {
        color: rgba(255, 255, 255, 0.82) !important;
    }

    .payment-summary-bar .btn-outline-secondary {
        background: rgba(255, 255, 255, 0.10);
        border-color: rgba(255, 255, 255, 0.36);
        color: #ffffff;
        border-radius: 999px;
        font-weight: 850;
        min-height: 48px;
        backdrop-filter: blur(10px);
        transition: all 0.22s ease;
    }

    .payment-summary-bar .btn-outline-secondary:hover {
        background: #ffffff;
        border-color: #ffffff;
        color: var(--lis-deep);
        transform: translateY(-2px);
    }

    .proceed-pay-btn {
        background: linear-gradient(135deg, var(--lis-gold-light), var(--lis-gold));
        color: #231707;
        border: none;
        min-height: 48px;
        border-radius: 999px;
        font-weight: 900;
        box-shadow: 0 16px 32px rgba(255, 193, 7, 0.24);
        transition: all 0.22s ease;
    }

    .proceed-pay-btn:hover:not(:disabled),
    .proceed-pay-btn:focus:not(:disabled) {
        background: linear-gradient(135deg, #ffe08a, var(--lis-gold));
        color: #231707;
        transform: translateY(-2px);
        box-shadow: 0 20px 38px rgba(255, 193, 7, 0.30);
    }

    .proceed-pay-btn:disabled {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.22);
        color: rgba(255, 255, 255, 0.62);
        box-shadow: none;
        cursor: not-allowed;
        opacity: 1;
    }

    /* =========================================================
       GENERAL BUTTON POLISH INSIDE PAYMENT CENTER
    ========================================================= */

    .guest-payment-page .btn {
        transition: all 0.22s ease;
    }

    .guest-payment-page .btn-warning {
        background: linear-gradient(135deg, var(--lis-gold-light), var(--lis-gold));
        border: none;
        color: #231707;
        font-weight: 850;
        border-radius: 999px;
    }

    .guest-payment-page .btn-warning:hover {
        background: linear-gradient(135deg, #ffe08a, var(--lis-gold));
        color: #231707;
        transform: translateY(-2px);
    }

    .guest-payment-page .btn-dark,
    .guest-payment-page .btn-primary {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-blue));
        border: none;
        color: #ffffff;
        font-weight: 850;
        border-radius: 999px;
        box-shadow: 0 14px 28px rgba(13, 110, 253, 0.18);
    }

    .guest-payment-page .btn-dark:hover,
    .guest-payment-page .btn-primary:hover {
        background: linear-gradient(135deg, var(--lis-deep), var(--lis-teal));
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: 0 18px 34px rgba(15, 118, 110, 0.22);
    }

    .guest-payment-page .btn-outline-dark,
    .guest-payment-page .btn-outline-primary,
    .guest-payment-page .btn-outline-success {
        border-radius: 999px;
        font-weight: 850;
        background: #ffffff;
        color: var(--lis-deep);
        border-color: rgba(7, 19, 28, 0.20);
    }

    .guest-payment-page .btn-outline-dark:hover,
    .guest-payment-page .btn-outline-primary:hover,
    .guest-payment-page .btn-outline-success:hover {
        background: var(--lis-deep);
        border-color: var(--lis-deep);
        color: #ffffff;
        transform: translateY(-2px);
    }

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

    @media (max-width: 767.98px) {
        .guest-payment-hero {
            padding: 2.15rem 1.35rem;
            border-radius: 30px;
        }

        .guest-payment-hero h1 {
            font-size: 2.15rem;
        }

        .guest-plan-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: 20px;
        }

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

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

        .payment-summary-bar {
            border-radius: 24px !important;
        }

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

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

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

    @media (max-width: 420px) {
        .guest-payment-hero {
            border-radius: 26px;
        }

        .payment-section-title {
            font-size: 1.65rem;
        }

        .payment-card,
        .payment-standard-card,
        .payment-history-wrap,
        .security-deposit-card {
            border-radius: 24px !important;
        }
    }
</style>


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

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

                <span class="guest-payment-mini-title">
                    <i class="bi bi-credit-card-2-front-fill"></i>
                    Guest Dashboard
                </span>

                <h1>
                    Payment Center
                </h1>

                <p>
                    Review your due, upcoming, optional, and completed payments connected to your Guest Account,
                    selected lifestyle package, rental property, furniture package, and other Sri Lanka living arrangements.
                </p>

                {% if lead %}
                    <div class="guest-plan-panel">
                        <div class="row g-3">

                            <div class="col-md-4">
                                <div class="guest-plan-item">
                                    <span class="guest-plan-label">
                                        Selected Package
                                    </span>

                                    <p class="guest-plan-value">
                                        {% if lead.interested_package %}
                                            {{ lead.interested_package.name }}
                                        {% else %}
                                            <span class="guest-plan-muted">Not selected yet</span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="guest-plan-item">
                                    <span class="guest-plan-label">
                                        Selected Property
                                    </span>

                                    <p class="guest-plan-value">
                                        {% if lead.final_rental_property %}
                                            {{ lead.final_rental_property.title }}
                                        {% else %}
                                            <span class="guest-plan-muted">Not finalized yet</span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="guest-plan-item">
                                    <span class="guest-plan-label">
                                        Furniture Package
                                    </span>

                                    <p class="guest-plan-value">
                                        {% if lead.selected_furniture_package %}
                                            {{ lead.selected_furniture_package.name }}
                                        {% else %}
                                            <span class="guest-plan-muted">Not selected yet</span>
                                        {% endif %}
                                    </p>
                                </div>
                            </div>

                        </div>
                    </div>
                {% endif %}

            </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 payments available for checkout now.
                    </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">
                        Amounts expected in later processing steps.
                    </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">
                        Confirmed paid items currently recorded.
                    </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 'expat_life:foreigner_wallet_topup' %}"
                       class="btn btn-sm btn-outline-primary payment-wallet-topup">
                        Top Up Wallet
                    </a>
                </div>
            </div>

        </div>


        <form method="post"
              action="{% url 'expat_life:foreigner_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 highlighted 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>


            <!-- =====================================================
                 ACTIVE SECURITY DEPOSITS
            ====================================================== -->
            <div class="payment-section-block">
                <div class="payment-section-title-wrap">
                    <span class="payment-section-mini">
                        <i class="bi bi-shield-check"></i>
                        Held Funds
                    </span>

                    <h3 class="payment-section-title">
                        Active Security Deposits
                        <span class="badge bg-secondary fs-6 align-middle">
                            {{ active_deposits|length }}
                        </span>
                    </h3>
                </div>

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

                        {% for deposit in active_deposits %}
                            <div class="col-md-6">
                                <div class="card security-deposit-card h-100">
                                    <div class="card-body p-4">

                                        <h5 class="security-deposit-title mb-3">
                                            {% if deposit.deposit_type == 'rental_deposit' %}
                                                🏠 Rental Deposit
                                            {% elif deposit.deposit_type == 'furniture_deposit' %}
                                                🛋️ Furniture Deposit
                                            {% else %}
                                                {{ deposit.get_deposit_type_display }}
                                            {% endif %}
                                        </h5>

                                        <p class="security-deposit-text mb-3">
                                            <strong>Amount:</strong>
                                            ${{ deposit.amount_usd|floatformat:2 }}<br>

                                            <strong>Paid on:</strong>
                                            {{ deposit.paid_at|date:"F j, Y" }}<br>

                                            <strong>Status:</strong>
                                            <span class="badge bg-warning text-dark">
                                                Active – Held
                                            </span>
                                        </p>

                                        {% if deposit.notes %}
                                            <small class="text-muted">
                                                {{ deposit.notes|truncatechars:100 }}
                                            </small>
                                        {% endif %}

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

                    </div>
                {% else %}
                    <div class="payment-empty-state">
                        <i class="bi bi-shield-check me-2"></i>
                        No active security deposits. Your deposits will appear here after payment.
                    </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 %}