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

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

{% block content %}
<style>
    /* =========================================================
       PROPERTY CARE PAYMENT CENTER
       Based on the stable stacked payment-center layout
    ========================================================= */

    .pm-payment-page {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(251, 191, 36, 0.08), transparent 30%),
            radial-gradient(circle at top right, rgba(15, 118, 110, 0.08), transparent 32%),
            linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    }

    /* Hero */
    .pm-payment-hero {
        border-radius: 32px;
        background:
            radial-gradient(circle at top right, rgba(251, 191, 36, 0.18), transparent 34%),
            linear-gradient(135deg, #052e25 0%, #0f766e 100%);
        color: #ffffff;
        padding: 2.4rem 2.2rem;
        box-shadow: 0 24px 55px rgba(15, 23, 42, 0.16);
    }

    .pm-payment-mini-title {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.46rem 0.92rem;
        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;
    }

    .pm-payment-hero h1 {
        font-size: clamp(2.05rem, 4vw, 3.35rem);
        font-weight: 900;
        letter-spacing: -0.04em;
        line-height: 1.08;
        margin-bottom: 0.85rem;
    }

    .pm-payment-hero p {
        color: rgba(255, 255, 255, 0.88);
        line-height: 1.75;
        max-width: 900px;
        margin-bottom: 0;
    }

    /* Overview strip */
    .pm-overview-strip {
        border: 1px solid #dbe4ee;
        border-radius: 28px;
        background: rgba(255, 255, 255, 0.96);
        box-shadow: 0 14px 30px rgba(15, 23, 42, 0.06);
        padding: 1.35rem 1.4rem;
    }

    .pm-overview-item {
        height: 100%;
        border-radius: 20px;
        background: #f8fafc;
        border: 1px solid #e2e8f0;
        padding: 1rem;
    }

    .pm-overview-label {
        color: #64748b;
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 0.045em;
        font-weight: 900;
        margin-bottom: 0.35rem;
    }

    .pm-overview-value {
        color: #0f172a;
        font-size: 1.3rem;
        font-weight: 900;
        margin-bottom: 0;
    }

    /* Summary Cards */
    .pm-summary-card {
        height: 100%;
        border-radius: 28px;
        border: 1px solid #e2e8f0;
        background: #ffffff;
        box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07);
        padding: 1.45rem;
    }

    .pm-summary-card p {
        color: #64748b;
        font-weight: 700;
        margin-bottom: 0.55rem;
    }

    .pm-summary-card h3 {
        font-weight: 950;
        margin-bottom: 0;
    }

    .pm-wallet-topup {
        border-radius: 999px;
        font-weight: 800;
    }

    /* Payment cards */
    .payment-card {
        transition: all 0.2s ease-in-out;
    }

    .payment-card.selected-card {
        border-color: #0f766e !important;
        box-shadow:
            0 0 0 3px rgba(15, 118, 110, 0.10),
            0 .5rem 1rem rgba(0, 0, 0, 0.08) !important;
        background: #fcfffe;
    }

    .payment-card,
    .pm-standard-payment-card {
        border-radius: 28px !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 #0f766e;
        border-radius: 1rem;
        background: #ffffff;
        color: #0f766e;
        cursor: pointer;
        user-select: none;
        transition: all 0.2s ease-in-out;
        box-shadow: 0 .25rem .5rem rgba(0, 0, 0, 0.06);
    }

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

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

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

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

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

    .selection-hint {
        font-size: 0.9rem;
        color: #64748b;
    }

    /* Select all */
    .select-all-due-btn {
        background: #052e25;
        color: #f8f3e7;
        border: 1px solid #d4b67a;
        border-radius: 0.8rem;
        font-size: 0.92rem;
        min-height: 44px;
        transition: all 0.2s ease-in-out;
    }

    .select-all-due-btn:hover,
    .select-all-due-btn:focus {
        background: #073b31;
        color: #ffffff;
        border-color: #e5c887;
        box-shadow: 0 0.35rem 0.8rem rgba(0, 0, 0, 0.18);
    }

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

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

    /* Sticky summary bar */
    .payment-action-wrap {
        z-index: 1030;
    }

    .payment-summary-bar {
        backdrop-filter: blur(4px);
        background: #052e25;
        color: #ffffff;
        border-color: #052e25 !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: #052e25;
    }

    .proceed-pay-btn {
        background: #1f7a4d;
        color: #ffffff;
        border: 1px solid #1f7a4d;
        min-height: 48px;
        border-radius: 0.8rem;
        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;
    }

    /* Empty alerts */
    .pm-empty-payment-alert {
        border-radius: 24px;
        padding: 1.2rem 1.3rem;
    }

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

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

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

        .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;
        }
    }
</style>


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

        <!-- =====================================================
             HERO
        ====================================================== -->
        <div class="pm-payment-hero mb-4">
            <span class="pm-payment-mini-title">
                <i class="bi bi-credit-card-2-front-fill"></i>
                Property Care Payment Center
            </span>

            <h1>
                Manage Your Property Care Payments
            </h1>

            <p>
                Review your due, upcoming, optional, and completed payments connected to your finalized
                Home in Sri Lanka Property Care Plans. Select due charges and proceed to checkout securely.
            </p>
        </div>


        <!-- =====================================================
             PROPERTY CARE OVERVIEW STRIP
        ====================================================== -->
        <div class="pm-overview-strip mb-4">
            <div class="row g-3">

                <div class="col-md-4">
                    <div class="pm-overview-item">
                        <div class="pm-overview-label">Managed Properties</div>
                        <div class="pm-overview-value">{{ managed_properties_count }}</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="pm-overview-item">
                        <div class="pm-overview-label">Finalized Care Plans</div>
                        <div class="pm-overview-value">{{ active_care_plans_count }}</div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="pm-overview-item">
                        <div class="pm-overview-label">Active Due Plan Fees</div>
                        <div class="pm-overview-value">{{ active_due_plan_fees_count }}</div>
                    </div>
                </div>

            </div>
        </div>


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

            <div class="col-6 col-md-3">
                <div class="pm-summary-card">
                    <p>Total Due</p>
                    <h3 class="text-danger">${{ total_due }}</h3>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="pm-summary-card">
                    <p>Upcoming / Estimated</p>
                    <h3 class="text-warning">${{ total_upcoming }}</h3>
                </div>
            </div>

            <div class="col-6 col-md-3">
                <div class="pm-summary-card">
                    <p>Total Paid</p>
                    <h3 class="text-success">${{ total_paid }}</h3>
                </div>
            </div>

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

                    <a href="{% url 'property_manager_app:property_care_wallet_topup' %}"
                       class="btn btn-sm btn-outline-primary pm-wallet-topup">
                        Top Up Wallet
                    </a>
                </div>
            </div>

        </div>


        <!-- =====================================================
             PAYMENT SELECTION FORM
        ====================================================== -->
        <form method="post"
              action="{% url 'property_manager_app:property_care_payment_checkout' %}"
              id="paymentSelectionForm">
            {% csrf_token %}

            <!-- =====================================================
                 DUE ITEMS
            ====================================================== -->
            <div class="mb-5">
                <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-3">
                    <h3 class="fw-bold mb-0">Due Property Care Payments</h3>

                    {% 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">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

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

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

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

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

                                    {% if item.notes %}
                                        <p class="mb-0 mt-2">
                                            <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="alert alert-light border rounded-4 mb-0 pm-empty-payment-alert">
                        No due Property Care payments at the moment.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 UPCOMING ITEMS
            ====================================================== -->
            <div class="mb-5">
                <h3 class="fw-bold mb-3">Upcoming Required Payments</h3>

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

                        {% for item in upcoming_items %}
                            <div class="col-lg-6">
                                <div class="pm-standard-payment-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">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

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

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

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

                                    {% if item.notes %}
                                        <p class="mb-0">
                                            <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="alert alert-light border rounded-4 mb-0 pm-empty-payment-alert">
                        No upcoming required Property Care payments.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 OPTIONAL ITEMS
            ====================================================== -->
            <div class="mb-5">
                <h3 class="fw-bold mb-3">Optional Payments</h3>

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

                        {% for item in optional_items %}
                            <div class="col-lg-6">
                                <div class="pm-standard-payment-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">
                                            {{ item.description }}
                                        </p>
                                    {% endif %}

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

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

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

                                    {% if item.notes %}
                                        <p class="mb-0">
                                            <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="alert alert-light border rounded-4 mb-0 pm-empty-payment-alert">
                        No optional Property Care payments at the moment.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 PAYMENT HISTORY
            ====================================================== -->
            <div class="mb-5">
                <h3 class="fw-bold mb-3">Payment History</h3>

                {% if paid_items %}
                    <div class="table-responsive">
                        <table class="table align-middle bg-white rounded-4 overflow-hidden shadow-sm">
                            <thead class="table-light">
                                <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="alert alert-light border rounded-4 mb-0 pm-empty-payment-alert">
                        No paid Property Care payment items yet.
                    </div>
                {% endif %}
            </div>


            <!-- =====================================================
                 STICKY BOTTOM SUMMARY 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');
                }
            }
        });

        if (selectedCountEl) {
            selectedCountEl.textContent = selectedCount;
        }

        if (selectedTotalEl) {
            selectedTotalEl.textContent = selectedTotal.toFixed(2);
        }

        if (proceedBtn) {
            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 %}