{% 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">
        {% 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">
            <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);">Financials</h1>
                    <p class="text-muted fs-5 mb-0" style="max-width: 600px;">Verify payment proofs and transaction IDs.</p>
                </div>
            </div>

            <!-- Financials List -->
            <div class="b-card fade-in-up" style="animation-delay: 0.2s; padding: 0; overflow: hidden;">
                <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;">Date</th>
                                <th class="text-muted text-uppercase fw-bold py-3" style="font-size: 0.75rem; letter-spacing: 0.05em;">Transaction ID</th>
                                <th class="text-muted text-uppercase fw-bold py-3 text-end pe-4" style="font-size: 0.75rem; letter-spacing: 0.05em;">Proof</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for u in users %}
                            <tr style="border-bottom: 1px solid var(--border-light); transition: background 0.3s ease;">
                                <td class="py-3 ps-4">
                                    <div class="fw-bold">{{ u.first_name }} {{ u.last_name }}</div>
                                    <div class="text-muted small">{{ u.email }}</div>
                                </td>
                                <td class="py-3 text-muted">{{ u.payment.payment_date|default:"-" }}</td>
                                <td class="py-3 text-muted">{{ u.payment.transaction_number|default:"-" }}</td>
                                <td class="py-3 text-end pe-4">
                                    {% if u.payment.screenshot %}
                                    <a href="{{ u.payment.screenshot.url }}" target="_blank" class="btn btn-sm b-btn-primary" style="background: linear-gradient(135deg, var(--highlight-sage), var(--secondary-forest)) !important; box-shadow: none !important; border-radius: 100px; padding: 6px 16px;">
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="me-1"><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 Proof
                                    </a>
                                    {% else %}
                                    <span class="text-muted small">No Proof</span>
                                    {% endif %}
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="4" class="text-center text-muted py-5">
                                    No financial records found.
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </main>
    </div>
</div>
{% endblock %}