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



{% block content %}
<div class="container-fluid p-0 m-0 pt-5 mt-4" style="background-color: var(--bg-main); min-height: 100vh;">
    <div class="row g-0">
        <!-- Luxury Admin Sidebar -->
        {% include 'admin_workspace/_admin_sidebar.html' %}

        <!-- Main Content Area -->
        <main class="col-md-9 ms-sm-auto col-lg-10 px-4 px-lg-5 py-5">
            <!-- Header -->
            <div class="d-flex justify-content-between align-items-end mb-5 border-bottom pb-4" style="border-color: var(--border-light) !important;">
                <div class="fade-in-up">
                    <a href="{% url 'admin_dashboard' %}" class="text-muted text-decoration-none mb-2 d-inline-block" style="font-size: 0.85rem;"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg> Back to Dashboard</a>
                    <h1 class="serif-heading display-6 mb-2 text-main" style="color: var(--text-main);">Verification Workspace</h1>
                    <p class="text-muted fs-6 mb-0">Reviewing application for {{ target_user.first_name }} {{ target_user.last_name }}</p>
                </div>
                
                <div class="fade-in-up" style="animation-delay: 0.1s;">
                    {% if target_user.review.is_approved %}
                        <div class="d-flex align-items-center">
                            <span class="badge bg-success py-2 px-3 fs-6 me-3 border-0" style="background: var(--secondary-forest-dim) !important; color: var(--highlight-sage) !important;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                                ID: {{ target_user.review.registration_id }}
                            </span>
                            <a href="{% url 'download_pass' target_user.id %}" class="btn b-btn-outline" style="border-color: var(--highlight-sage); color: var(--highlight-sage);">Download Digital Pass</a>
                        </div>
                    {% else %}
                        <form method="post" action="{% url 'approve_registration' target_user.id %}">
                            {% csrf_token %}
                            <button type="submit" class="btn b-btn-primary">
                                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                                Approve & Generate Pass
                            </button>
                        </form>
                    {% endif %}
                </div>
            </div>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="b-card fade-in-up h-100" style="animation-delay: 0.2s;">
                        <h5 class="serif-heading mb-4 pb-2 border-bottom" style="border-color: var(--border-light) !important;">Profile Details</h5>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Name</strong> <br>{{ target_user.first_name }} {{ target_user.last_name }}</p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Email</strong> <br>{{ target_user.email }}</p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Phone</strong> <br>{{ target_user.mobile_number }}</p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Type</strong> <br>
                            <span class="badge bg-secondary">{{ target_user.get_registration_type_display }}</span>
                        </p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">University</strong> <br>{{ target_user.profile.university|default:"-" }}</p>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="b-card fade-in-up h-100" style="animation-delay: 0.3s;">
                        <h5 class="serif-heading mb-4 pb-2 border-bottom" style="border-color: var(--border-light) !important;">Participation & Abstract</h5>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Type</strong> <br>{{ target_user.participation.get_presentation_type_display|default:"-" }}</p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Theme</strong> <br>{{ target_user.participation.theme|default:"-" }}</p>
                        <p class="mb-3"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Title</strong> <br>{{ target_user.participation.abstract_title|default:"-" }}</p>
                        
                        {% if target_user.abstract.file %}
                            <a href="{{ target_user.abstract.file.url }}" target="_blank" class="btn btn-sm b-btn-outline w-100 mt-auto">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><polyline points="10 9 9 9 8 9"></polyline></svg>
                                View Abstract Document
                            </a>
                        {% else %}
                            <p class="text-muted mt-auto mb-0" style="font-size: 0.85rem;">No abstract uploaded.</p>
                        {% endif %}
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="b-card fade-in-up h-100" style="animation-delay: 0.4s;">
                        <h5 class="serif-heading mb-4 pb-2 border-bottom" style="border-color: var(--border-light) !important;">Payment Details</h5>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Status</strong> <br>
                            <span class="badge bg-success" style="background: var(--secondary-forest-dim) !important; color: var(--highlight-sage) !important;">{{ target_user.payment.get_status_display|default:"Pending Verification" }}</span>
                        </p>
                        <p class="mb-2"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Transaction</strong> <br>{{ target_user.payment.transaction_number|default:"-" }}</p>
                        <p class="mb-3"><strong class="text-muted me-2 text-uppercase" style="font-size: 0.75rem;">Date</strong> <br>{{ target_user.payment.payment_date|default:"-" }}</p>
                        
                        {% if target_user.payment.screenshot %}
                            <a href="{{ target_user.payment.screenshot.url }}" target="_blank" class="btn btn-sm b-btn-primary w-100 mt-auto" style="background: linear-gradient(135deg, var(--highlight-sage), var(--secondary-forest)) !important; box-shadow: none !important;">
                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>
                                View Payment Proof
                            </a>
                        {% else %}
                            <p class="text-muted mt-auto mb-0" style="font-size: 0.85rem;">No payment proof uploaded.</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}