{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container py-5 mt-4" style="min-height: calc(100vh - 80px);">
    
    {% include 'dashboard/_wizard_nav.html' %}

    <main class="col-12 mt-2">
        <div class="text-center mb-5 fade-in-up">
            <h1 class="serif-heading display-5 text-white mb-2">Payment Details</h1>
            <p class="text-muted fs-5">Submit your transaction details for registration.</p>
        </div>

        <form method="post" action="{% url 'payment' %}" enctype="multipart/form-data">
            {% csrf_token %}
            <div class="row justify-content-center">
                <div class="col-lg-8">
                    <div class="b-card fade-in-up">
                        <div class="d-flex align-items-center mb-4 pb-3 border-bottom" style="border-color: rgba(255,255,255,0.05) !important;">
                            <span class="material-icons me-3" style="color: var(--primary-gold); font-size: 28px;">account_balance_wallet</span>
                            <h4 class="serif-heading m-0 text-white" style="font-size: 1.5rem;">Transaction Information</h4>
                        </div>
                        
                        <div class="d-flex align-items-start mb-4 p-4 rounded-4" style="background: rgba(216,178,76,0.05); border: 1px solid rgba(216,178,76,0.15);">
                            <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center me-4 mt-1" style="width: 45px; height: 45px; border: 1px solid var(--primary-gold);">
                                <span class="material-icons" style="color: var(--primary-gold);">info</span>
                            </div>
                            <div>
                                <h6 class="text-white mb-2 fw-bold">Bank Details for Transfer</h6>
                                <p class="text-muted small mb-1"><strong>Bank:</strong> State Bank of India</p>
                                <p class="text-muted small mb-1"><strong>Account No:</strong> 1234567890</p>
                                <p class="text-muted small mb-0"><strong>IFSC:</strong> SBIN0000123</p>
                            </div>
                        </div>
                        
                        {% if payment.screenshot %}
                            <div class="alert mb-4" style="background: rgba(106,142,97,0.1); border: 1px solid var(--highlight-sage); color: var(--text-main);">
                                <div class="d-flex align-items-center">
                                    <span class="material-icons text-success me-2">check_circle</span>
                                    <span>Current receipt: <strong>Uploaded successfully</strong></span>
                                </div>
                            </div>
                        {% endif %}

                        <div class="form-dark-theme">
                            {{ form|crispy }}
                        </div>
                    </div>
                    
                    <div class="d-flex justify-content-end mt-5 mb-5 fade-in-up" style="animation-delay: 0.1s;">
                        <button type="submit" class="btn b-btn-primary px-3 px-md-5 py-3 shadow-lg d-flex align-items-center rounded-pill">
                            <span class="fw-bold me-2">Save & Continue</span>
                            <span class="material-icons">arrow_forward</span>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </main>
</div>
{% endblock %}