{% 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">
                <div class="fade-in-up">
                    <h1 class="serif-heading display-5 mb-2 text-main" style="color: var(--text-main);">Conference Administration</h1>
                    <p class="text-muted fs-5 mb-0" style="max-width: 600px;">Manage registrations, abstracts, scientific sessions, and conference operations globally.</p>
                </div>
                <div class="d-flex gap-3 fade-in-up" style="animation-delay: 0.1s;">
                    <button class="btn btn-outline-light rounded-circle p-2" style="border-color: var(--border-light); color: var(--text-muted);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    </button>
                    <button class="btn btn-outline-light rounded-circle p-2 position-relative" style="border-color: var(--border-light); color: var(--text-muted);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
                        <span class="position-absolute top-0 start-100 translate-middle p-1 bg-danger border border-dark rounded-circle"></span>
                    </button>
                </div>
            </div>

            <!-- Top Statistics -->
            <div class="row g-4 mb-5">
                <div class="col-md-4">
                    <div class="b-card stat-card fade-in-up" style="animation-delay: 0.2s;">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="text-muted text-uppercase fw-bold" style="letter-spacing: 0.05em; font-size: 0.85rem;">Total Registrations</span>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary-gold)" stroke-width="1.5"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M23 21v-2a4 4 0 0 0-3-3.87"></path><path d="M16 3.13a4 4 0 0 1 0 7.75"></path></svg>
                        </div>
                        <h1 class="stat-number">{{ total_users }}</h1>
                        <div class="d-flex align-items-center text-success" style="font-size: 0.85rem; font-weight: 600;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline><polyline points="17 6 23 6 23 12"></polyline></svg>
                            <span>+12 This Week</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="b-card stat-card fade-in-up" style="animation-delay: 0.3s;">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="text-muted text-uppercase fw-bold" style="letter-spacing: 0.05em; font-size: 0.85rem;">Pending Approvals</span>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary-gold)" stroke-width="1.5"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
                        </div>
                        <h1 class="stat-number">{{ pending_approvals }}</h1>
                        <div class="d-flex align-items-center text-warning" style="font-size: 0.85rem; font-weight: 600; color: #E8C15A !important;">
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>
                            <span>Requires Attention</span>
                        </div>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="b-card stat-card fade-in-up" style="animation-delay: 0.4s;">
                        <div class="d-flex justify-content-between align-items-start">
                            <span class="text-muted text-uppercase fw-bold" style="letter-spacing: 0.05em; font-size: 0.85rem;">Approved Attendees</span>
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--primary-gold)" stroke-width="1.5"><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>
                        </div>
                        <h1 class="stat-number">{{ approved }}</h1>
                        <div class="d-flex align-items-center text-success" style="font-size: 0.85rem; font-weight: 600;">
                            <svg width="14" height="14" 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>
                            <span>Fully Processed</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Pending Registrations List -->
            <div class="b-card fade-in-up" style="animation-delay: 0.5s; padding: 0; overflow: hidden;">
                <div class="d-flex justify-content-between align-items-center p-4 border-bottom" style="border-color: var(--border-light) !important;">
                    <h4 class="serif-heading mb-0" style="color: var(--text-main);">Pending Reviews</h4>
                    <a href="{% url 'admin_registrations' %}" class="btn btn-sm btn-outline-light text-muted" style="border-color: var(--border-light);">View All</a>
                </div>
                
                <div class="table-responsive">
                    <table class="table table-hover table-borderless mb-0 align-middle text-main" style="color: var(--text-main);">
                        <thead style="background: rgba(17, 21, 15, 0.5);">
                            <tr>
                                <th class="text-muted text-uppercase fw-bold py-3 ps-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Participant</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Contact</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Type</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Date</th>
                                <th class="text-muted text-uppercase fw-bold py-3 text-end pe-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for review in pending_list %}
                            <tr style="border-bottom: 1px solid var(--border-light); transition: background 0.3s ease;">
                                <td class="py-3 ps-4">
                                    <div class="fw-bold">{{ review.user.first_name }} {{ review.user.last_name }}</div>
                                </td>
                                <td class="py-3 text-muted">{{ review.user.email }}</td>
                                <td class="py-3">
                                    <span class="badge rounded-pill bg-light text-muted border" style="font-weight: 500; padding: 6px 12px;">{{ review.user.get_registration_type_display }}</span>
                                </td>
                                <td class="py-3 text-muted">{{ review.submitted_at|date:"M d, Y"|default:"Recently" }}</td>
                                <td class="py-3 text-end pe-4">
                                    <a href="{% url 'registration_detail' review.user.id %}" class="btn btn-sm b-btn-outline" style="border-radius: 100px; padding: 6px 16px;">Review</a>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-muted py-5">
                                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--border-light)" stroke-width="1" class="mb-3"><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>
                                    <p class="mb-0">Inbox zero! No pending registrations found.</p>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}