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

{% block content %}
<!-- Add an explicit dark styling to ensure this doesn't clash with the homepage -->
<style>
    body { background-color: var(--bg-main); color: var(--text-main); }
    .dashboard-header {
        background: linear-gradient(135deg, rgba(17,21,15,0.9), rgba(39,77,54,0.8));
        border-radius: 20px;
        position: relative;
        overflow: hidden;
    }
    .dashboard-header::before {
        content: '';
        position: absolute;
        top: 0; left: 0; right: 0; bottom: 0;
        background: url('https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?q=80&w=2026&auto=format&fit=crop') no-repeat center center/cover;
        opacity: 0.15;
        z-index: 0;
    }
    .dashboard-header-content {
        position: relative;
        z-index: 1;
    }
</style>

<div class="container py-5 mt-5" style="min-height: calc(100vh - 80px);">
    
    <!-- Professional Header -->
    <div class="dashboard-header p-4 p-md-5 mb-5 shadow-lg fade-in-up border" style="border-color: rgba(216,178,76,0.2) !important;">
        <div class="dashboard-header-content d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center">
            <div>
                <span class="badge rounded-pill bg-dark border mb-3 px-3 py-2" style="font-weight: 500; border-color: rgba(216,178,76,.3) !important; color: var(--primary-gold) !important; font-size: 0.8rem; backdrop-filter: blur(10px);">IAAT XXXVI Participant</span>
                <h1 class="display-5 fw-bold text-white serif-heading mb-1">Welcome, {{ user.first_name }} 👋</h1>
                <p class="text-light opacity-75 mb-0" style="font-size: 1.1rem;">Your registration portal for the IAAT XXXVI Annual Conference</p>
            </div>
            <div class="mt-4 mt-md-0 text-md-end">
                <p class="text-muted small text-uppercase fw-bold mb-1" style="letter-spacing: 1px;">Application Status</p>
                {% if review.is_approved %}
                    <span class="badge bg-success px-4 py-2 fs-6 rounded-pill" style="background: var(--highlight-sage) !important; border: 1px solid rgba(255,255,255,0.2);">Approved</span>
                {% else %}
                    <span class="badge bg-warning text-dark px-4 py-2 fs-6 rounded-pill" style="background: var(--primary-gold) !important; border: 1px solid rgba(255,255,255,0.2);">Under Review</span>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <!-- Status Card -->
            {% if review.is_approved %}
            <div class="b-card mb-4 fade-in-up" style="animation-delay: 0.1s; background: rgba(39,77,54,0.1); border: 1px solid var(--highlight-sage);">
                <div class="row align-items-center">
                    <div class="col-md-8 mb-4 mb-md-0">
                        <div class="d-flex align-items-center mb-2">
                            <span class="material-icons me-2" style="color: var(--highlight-sage); font-size: 28px;">check_circle</span>
                            <h4 class="serif-heading m-0" style="color: var(--highlight-sage);">Registration Approved!</h4>
                        </div>
                        <p class="text-muted mb-3" style="line-height: 1.6;">Congratulations, your registration for the IAAT XXXVI Annual Conference has been fully approved by the organizing committee.</p>
                        <div class="d-inline-flex align-items-center p-2 px-3 rounded" style="background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);">
                            <strong class="text-muted me-2 small text-uppercase">Registration ID:</strong> 
                            <span class="fw-bold text-white fs-6" style="font-family: monospace;">{{ review.registration_id }}</span>
                        </div>
                    </div>
                    <div class="col-md-4 text-md-end">
                        <a href="{% url 'participant_download_pass' %}" class="btn b-btn-primary w-100 py-3 shadow-lg d-flex justify-content-center align-items-center rounded-pill">
                            <span class="material-icons me-2">qr_code_2</span>
                            Download Pass
                        </a>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="b-card mb-4 fade-in-up" style="animation-delay: 0.1s; background: rgba(216,178,76,0.05); border: 1px solid rgba(216,178,76,0.3);">
                <div class="text-center py-5">
                    <div class="mb-4 d-inline-flex justify-content-center align-items-center rounded-circle" style="width: 80px; height: 80px; background: rgba(216,178,76,0.1);">
                        <span class="material-icons" style="font-size: 40px; color: var(--primary-gold);">hourglass_empty</span>
                    </div>
                    <h3 class="serif-heading mb-3" style="color: var(--primary-gold);">Registration Pending Review</h3>
                    <p class="text-muted mx-auto" style="max-width: 500px; font-size: 1.1rem; line-height: 1.6;">
                        Your application has been successfully submitted and is currently being reviewed by our organizing committee. You will be notified once it is approved and your pass is generated.
                    </p>
                </div>
            </div>
            {% endif %}

            <!-- Summary -->
            <div class="b-card h-100 fade-in-up" style="animation-delay: 0.2s;">
                <div class="d-flex align-items-center border-bottom pb-3 mb-4" style="border-color: rgba(255,255,255,0.05) !important;">
                    <span class="material-icons me-2" style="color: var(--primary-gold);">assignment</span>
                    <h5 class="serif-heading m-0 text-white">Application Summary</h5>
                </div>
                
                <div class="row g-4">
                    <div class="col-sm-6">
                        <div class="p-3 rounded" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                            <span class="d-block small text-muted text-uppercase fw-bold mb-1">Presentation Type</span>
                            <span class="fs-5 text-white">{{ user.participation.get_presentation_type_display }}</span>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="p-3 rounded" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                            <span class="d-block small text-muted text-uppercase fw-bold mb-1">Trip Included</span>
                            <span class="fs-5 text-white">{% if user.trip.join_trip %}Yes{% else %}No{% endif %}</span>
                        </div>
                    </div>
                    <div class="col-12">
                        <div class="p-3 rounded" style="background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05);">
                            <span class="d-block small text-muted text-uppercase fw-bold mb-1">Theme</span>
                            <span class="fs-6 text-white">{{ user.participation.theme|default:"N/A" }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- Next Steps -->
            <div class="b-card h-100 fade-in-up" style="animation-delay: 0.3s; background: rgba(17,21,15,0.8);">
                <div class="d-flex align-items-center border-bottom pb-3 mb-4" style="border-color: rgba(255,255,255,0.05) !important;">
                    <span class="material-icons me-2" style="color: var(--highlight-sage);">explore</span>
                    <h5 class="serif-heading m-0 text-white">Next Steps</h5>
                </div>
                
                <div class="d-flex align-items-start mb-4">
                    <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center me-3 mt-1 flex-shrink-0" style="width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.1);">
                        <span class="text-muted small">1</span>
                    </div>
                    <div>
                        <h6 class="text-white mb-1">Wait for approval</h6>
                        <p class="text-muted small mb-0">The committee is reviewing your details.</p>
                    </div>
                </div>
                
                <div class="d-flex align-items-start mb-4">
                    <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center me-3 mt-1 flex-shrink-0" style="width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.1);">
                        <span class="text-muted small">2</span>
                    </div>
                    <div>
                        <h6 class="text-white mb-1">Download Pass</h6>
                        <p class="text-muted small mb-0">Once approved, download your digital pass from this dashboard.</p>
                    </div>
                </div>
                
                <div class="d-flex align-items-start">
                    <div class="bg-dark rounded-circle d-flex align-items-center justify-content-center me-3 mt-1 flex-shrink-0" style="width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.1);">
                        <span class="text-muted small">3</span>
                    </div>
                    <div>
                        <h6 class="text-white mb-1">Attend Conference</h6>
                        <p class="text-muted small mb-0">Bring your digital or printed pass for QR scanning at the venue.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}