{% 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">Final Review & Submit</h1>
            <p class="text-muted fs-5">Please verify all information before final submission.</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-10">
                <div class="b-card fade-in-up">
                    <div class="text-center mb-5">
                        <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-4" style="width: 80px; height: 80px; background: rgba(106,142,97,0.1); border: 2px solid var(--highlight-sage);">
                            <span class="material-icons" style="font-size: 40px; color: var(--highlight-sage);">verified_user</span>
                        </div>
                        <h4 class="serif-heading text-white">Review Your Application</h4>
                        <p class="text-muted mx-auto" style="max-width: 600px;">Once submitted, you cannot edit your details without contacting support. Ensure everything is correct.</p>
                    </div>

                    <!-- Summary Sections -->
                    <div class="row g-4">
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                                <div class="d-flex align-items-center border-bottom pb-3 mb-3" style="border-color: rgba(255,255,255,0.1) !important;">
                                    <span class="material-icons me-2" style="color: var(--primary-gold);">person</span>
                                    <h6 class="text-white text-uppercase fw-bold m-0" style="letter-spacing: 1px;">Personal Info</h6>
                                </div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Name</span> <span class="text-white fw-bold">{{ user.first_name }} {{ user.last_name }}</span></div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Gender</span> <span class="text-white fw-bold">{{ profile.gender }}</span></div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Nationality</span> <span class="text-white fw-bold">{{ profile.nationality }}</span></div>
                                <div class="mb-0 d-flex justify-content-between"><span class="text-muted small text-uppercase">WhatsApp</span> <span class="text-white fw-bold">{{ profile.whatsapp_number }}</span></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                                <div class="d-flex align-items-center border-bottom pb-3 mb-3" style="border-color: rgba(255,255,255,0.1) !important;">
                                    <span class="material-icons me-2" style="color: var(--highlight-sage);">account_balance</span>
                                    <h6 class="text-white text-uppercase fw-bold m-0" style="letter-spacing: 1px;">Academic Info</h6>
                                </div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">University</span> <span class="text-white fw-bold text-end" style="max-width: 60%;">{{ profile.university }}</span></div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Department</span> <span class="text-white fw-bold text-end" style="max-width: 60%;">{{ profile.department }}</span></div>
                                <div class="mb-0 d-flex justify-content-between"><span class="text-muted small text-uppercase">Designation</span> <span class="text-white fw-bold text-end" style="max-width: 60%;">{{ profile.designation }}</span></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                                <div class="d-flex align-items-center border-bottom pb-3 mb-3" style="border-color: rgba(255,255,255,0.1) !important;">
                                    <span class="material-icons me-2" style="color: var(--primary-gold);">school</span>
                                    <h6 class="text-white text-uppercase fw-bold m-0" style="letter-spacing: 1px;">Participation</h6>
                                </div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Type</span> <span class="text-white fw-bold">{{ participation.get_presentation_type_display }}</span></div>
                                <div class="mb-0 d-flex justify-content-between"><span class="text-muted small text-uppercase">Theme</span> <span class="text-white fw-bold text-end" style="max-width: 60%;">{{ participation.theme|default:"N/A" }}</span></div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="p-4 rounded-4 h-100" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                                <div class="d-flex align-items-center border-bottom pb-3 mb-3" style="border-color: rgba(255,255,255,0.1) !important;">
                                    <span class="material-icons me-2" style="color: var(--highlight-sage);">account_balance_wallet</span>
                                    <h6 class="text-white text-uppercase fw-bold m-0" style="letter-spacing: 1px;">Payment & Extras</h6>
                                </div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Trip Included</span> <span class="text-white fw-bold">{% if trip and trip.join_trip %}Yes{% else %}No{% endif %}</span></div>
                                <div class="mb-2 d-flex justify-content-between"><span class="text-muted small text-uppercase">Txn ID</span> <span class="text-white fw-bold">{{ payment.transaction_number }}</span></div>
                                <div class="mb-0 d-flex justify-content-between"><span class="text-muted small text-uppercase">Date</span> <span class="text-white fw-bold">{{ payment.payment_date }}</span></div>
                            </div>
                        </div>
                    </div>

                    <form method="post" action="{% url 'review' %}">
                        {% csrf_token %}
                        <div class="text-center mt-5 pt-4 border-top" style="border-color: rgba(255,255,255,0.05) !important;">
                            <button type="submit" class="btn btn-success px-3 px-md-5 py-4 fw-bold shadow-lg w-100 w-md-auto rounded-pill d-inline-flex align-items-center justify-content-center" style="font-size: 1.1rem; letter-spacing: 1px;">
                                <span class="material-icons me-2">send</span>
                                Submit Registration Application
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
</div>
{% endblock %}