{% extends "base.html" %}
{% import "macros/modal.html" as modal %}

{% block content %}
<div data-plugin="membership" class="membership-user-container">
    <div class="blocks-workspace-notice" data-membership-feedback data-workspace-notice role="status" aria-live="polite" hidden></div>
    {% set app = application %}
    {% set has_gateway = online_payment_available %}
    {% set has_upi = upi_payment_available and app.upi_payment_uri %}
    {% set awaiting_approval = app.status == 'submitted_for_approval' or app.status == 'pending_payment' or app.status == 'payment_claimed' or app.status == 'payment_confirmed' %}
    {% set fee_is_paid = fee_paid | default(value=false) or app.due_status == 'paid' %}
    {% set show_qr = show_upi_qr | default(value=false) or (awaiting_approval and not fee_is_paid and has_upi) %}
    {% set show_pay = awaiting_approval and not fee_is_paid and (has_gateway or has_upi) %}
    <div id="membership-payment-config" hidden
         data-application-id="{{ app.id }}"
         data-assignment-id="{{ app.due_assignment_id | default(value=app.fee_assignment_id) }}"
         data-due-id="{{ app.fee_due_id }}"
         data-due-date="{{ app.due_date | default(value='') }}"
         data-profile-name="{{ app.profile_name }}"
         data-total="{{ currency_symbol }}{{ app.due_amount | default(value=app.fee_amount) | price }}"
         data-status="{{ app.status }}"
         data-gateway-script-url="{{ gateway_script_url | default(value='') }}"
         data-active-gateway="{{ active_gateway | default(value='') }}"
         data-online-payment-available="{% if has_gateway %}true{% else %}false{% endif %}"
         data-upi-payment-available="{% if has_upi %}true{% else %}false{% endif %}"
         data-upi-payment-uri="{{ app.upi_payment_uri | default(value='') }}"></div>

    <div class="user-hero-header glass-card mb-4">
        <h1>{{ app.profile_name }}</h1>
        <span class="membership-status-pill status-{{ app.status }}">{{ app.status | replace(from='_', to=' ') }}</span>
    </div>

    <div class="membership-application-grid">
        <div class="glass-card">
            <h2>Application status</h2>
            <ul class="membership-status-steps">
                <li class="{% if awaiting_approval %}done{% elif app.status == 'approved' %}done{% elif app.status != 'rejected' %}active{% endif %}">Submitted</li>
                <li class="{% if awaiting_approval %}active{% elif app.status == 'approved' %}done{% endif %}">{{ labels.signatory_label | default(value='Signatory') }} review</li>
                <li class="{% if app.status == 'approved' %}active done{% endif %}">Badge issued</li>
            </ul>

            {% if awaiting_approval %}
            <p class="text-muted mt-3">Your membership application has been submitted for approval. A {{ labels.signatory_label | default(value='signatory') | lower }} will review it shortly.</p>

            {% if fee_is_paid %}
            <p class="text-success mt-3"><i class="fas fa-check-circle"></i> Fee payment received.</p>
            {% elif show_pay %}
            <div class="membership-payment-actions mt-4">
                <h3>Fee payment</h3>
                <p class="text-muted membership-payment-fee-line">
                    Fee due: <strong>{{ currency_symbol }}{{ app.due_amount | default(value=app.fee_amount) | price }}</strong>
                </p>
                {% if has_gateway %}
                <p class="text-muted small">Paying with the online gateway issues your badge right away. UPI/QR still goes to signatory review.</p>
                {% endif %}
                <div class="membership-payment-methods">
                    {% if has_gateway %}
                    <div class="membership-payment-method" data-method="gateway">
                        <div class="membership-payment-method-head">
                            <i class="fas fa-credit-card"></i>
                            <div>
                                <strong>{% if active_gateway %}{{ active_gateway | replace(from='-', to=' ') | title }}{% else %}Online gateway{% endif %}</strong>
                                <span class="text-muted">Pay securely online — membership is issued immediately (no signatory wait).</span>
                            </div>
                        </div>
                        <button type="button" class="btn btn-primary" id="membership-pay-online-btn">
                            <i class="fas fa-lock"></i>
                            Pay with {% if active_gateway %}{{ active_gateway | replace(from='-', to=' ') | title }}{% else %}gateway{% endif %}
                        </button>
                    </div>
                    {% endif %}

                    {% if show_qr %}
                    <div class="membership-payment-method membership-payment-method--qr" data-method="upi">
                        <div class="membership-payment-method-head">
                            <i class="fas fa-qrcode"></i>
                            <div>
                                <strong>UPI / QR</strong>
                                <span class="text-muted">Scan or tap to pay. This QR stays available until your membership is approved.</span>
                            </div>
                        </div>
                        {% if show_upi_intent_button %}
                        <a href="{{ app.upi_payment_uri }}" class="btn btn-primary" id="membership-upi-intent-btn">
                            <i class="fas fa-mobile-alt"></i> Pay with UPI app
                        </a>
                        <p class="text-muted membership-upi-or mt-3 mb-2">Or pay via QR</p>
                        {% else %}
                        <p class="text-muted membership-upi-or mt-3 mb-2">Pay via QR</p>
                        {% endif %}
                        <a href="{{ app.upi_payment_uri }}" id="membership-payment-qr-link" class="membership-qr-link" aria-label="Pay with UPI app">
                            <div id="membership-payment-qr" class="membership-qr-box"></div>
                        </a>
                        <p class="text-muted small mt-2 mb-0">Tap the QR to open your UPI apps for payment. If it doesn't work, take a screenshot of the QR code and scan it from any UPI app.</p>
                    </div>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <p class="text-muted mt-3">Fee due: <strong>{{ currency_symbol }}{{ app.due_amount | default(value=app.fee_amount) | price }}</strong>. No online payment methods are configured yet.</p>
            {% endif %}
            {% elif app.status == 'approved' %}
            <p class="text-success mt-3">Membership approved!</p>
            <a href="/plugins/membership/my-membership" class="btn btn-primary mt-2">View badge</a>
            {% elif app.status == 'rejected' %}
            <p class="text-danger mt-3">Application rejected{% if app.rejection_reason %}: {{ app.rejection_reason }}{% endif %}</p>
            <p class="text-muted">You can review your submitted details on the right, update them, and submit a new application.</p>
            <a href="/plugins/membership/apply/{{ app.profile_id }}" class="btn btn-primary mt-3">
                <i class="fas fa-redo"></i> Reapply with updated details
            </a>
            {% endif %}
        </div>

        <div class="glass-card">
            <h2>Your details</h2>
            {% if app.profile_data %}
            <dl class="membership-detail-list">
                {% for key, val in app.profile_data %}
                <dt>{{ app.profile_field_labels[key] | default(value=key | replace(from='_', to=' ') | title) }}</dt>
                <dd>{{ val }}</dd>
                {% endfor %}
            </dl>
            {% else %}
            <p class="text-muted">No profile data.</p>
            {% endif %}
        </div>
    </div>

    {{ modal::modal(id="membership-payment-modal", title="Complete payment", body_html='<div class="text-center"><p id="membership-checkout-profile-name"></p><p class="membership-checkout-amount" id="membership-checkout-amount"></p></div>', footer_html='<button type="button" class="btn btn-secondary membership-modal-close">Cancel</button><button type="button" class="btn btn-primary" id="membership-confirm-payment-btn">Proceed to gateway</button>', modal_attrs='data-plugin="membership"') }}
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/blocks-admin-modal.js" defer></script>
{% endblock %}