{% extends "base.html" %}

{% block title %}Admin Dashboard - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <h2>Admin Dashboard</h2>
        <p class="text-muted">Welcome back, {{ current_user.full_name }} ({{ current_user.role }})</p>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Members</h6>
                <h3 class="card-title">{{ total_users }}</h3>
                <small class="text-success"><i class="fas fa-arrow-up"></i> Active members</small>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Contributions</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(total_contributions) }}</h3>
                <small class="text-success"><i class="fas fa-arrow-up"></i> This month</small>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Total Loans</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(total_loans) }}</h3>
                <small class="text-warning"><i class="fas fa-clock"></i> Pending approvals</small>
            </div>
        </div>
    </div>
    
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body">
                <h6 class="card-subtitle mb-2 text-muted">Pending Loans</h6>
                <h3 class="card-title">{{ pending_loans|length }}</h3>
                <small class="text-warning"><i class="fas fa-exclamation-triangle"></i> Need attention</small>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Recent Transactions</h5>
                <a href="#" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body">
                {% if recent_transactions %}
                    <div class="table-responsive">
                        <table class="table table-sm table-hover">
                            <thead>
                                <tr>
                                    <th>User</th>
                                    <th>Type</th>
                                    <th>Amount</th>
                                    <th>Status</th>
                                    <th>Date</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for transaction in recent_transactions %}
                                <tr>
                                    <td>{{ transaction.user.full_name }}</td>
                                    <td>
                                        <span class="badge badge-{{ 'primary' if transaction.type == 'deposit' else 'warning' if transaction.type == 'withdrawal' else 'info' }}">
                                            {{ transaction.type.replace('_', ' ').title() }}
                                        </span>
                                    </td>
                                    <td>₦{{ "%.2f"|format(transaction.amount) }}</td>
                                    <td>
                                        <span class="badge badge-{{ 'success' if transaction.status == 'completed' else 'warning' if transaction.status == 'pending' else 'danger' }}">
                                            {{ transaction.status.title() }}
                                        </span>
                                    </td>
                                    <td>{{ transaction.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                {% else %}
                    <p class="text-muted">No recent transactions.</p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Pending Loans</h5>
                {% if pending_loans %}
                <span class="badge bg-warning">{{ pending_loans|length }}</span>
                {% endif %}
            </div>
            <div class="card-body">
                {% if pending_loans %}
                    {% for loan in pending_loans[:5] %}
                    <div class="border-bottom pb-2 mb-2">
                        <div class="d-flex justify-content-between">
                            <strong>{{ loan.user.full_name }}</strong>
                            <span class="badge bg-warning">Pending</span>
                        </div>
                        <small class="text-muted">₦{{ "%.2f"|format(loan.amount) }} - {{ loan.created_at.strftime('%d/%m/%Y') }}</small>
                        <div class="mt-1">
                            <a href="#" class="btn btn-sm btn-success">Approve</a>
                            <a href="#" class="btn btn-sm btn-danger">Reject</a>
                        </div>
                    </div>
                    {% endfor %}
                    {% if pending_loans|length > 5 %}
                    <div class="text-center">
                        <a href="#" class="btn btn-sm btn-outline-primary">View All ({{ pending_loans|length - 5 }} more)</a>
                    </div>
                    {% endif %}
                {% else %}
                    <p class="text-muted">No pending loans.</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Quick Actions</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    {% if current_user.role in ['Super Admin', 'Admin'] %}
                    <div class="col-md-2 mb-2">
                        <a href="{{ url_for('manage_users') }}" class="btn btn-primary w-100">
                            <i class="fas fa-users me-2"></i>Manage Users
                        </a>
                    </div>
                    {% endif %}
                    {% if current_user.role in ['Super Admin', 'Admin', 'Treasurer'] %}
                    <div class="col-md-2 mb-2">
                        <a href="{{ url_for('manage_contributions') }}" class="btn btn-success w-100">
                            <i class="fas fa-hand-holding-usd me-2"></i>Approve Contributions
                        </a>
                    </div>
                    {% endif %}
                    {% if current_user.role in ['Super Admin', 'Admin', 'Loan Officer'] %}
                    <div class="col-md-2 mb-2">
                        <a href="{{ url_for('manage_loans') }}" class="btn btn-orange w-100">
                            <i class="fas fa-clipboard-check me-2"></i>Review Loans
                        </a>
                    </div>
                    {% endif %}
                    <div class="col-md-2 mb-2">
                        <a href="#" class="btn btn-info w-100">
                            <i class="fas fa-file-export me-2"></i>Export Reports
                        </a>
                    </div>
                    <div class="col-md-2 mb-2">
                        <a href="#" class="btn btn-outline-primary w-100">
                            <i class="fas fa-chart-bar me-2"></i>Analytics
                        </a>
                    </div>
                    <div class="col-md-2 mb-2">
                        <a href="#" class="btn btn-outline-secondary w-100">
                            <i class="fas fa-cog me-2"></i>Settings
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}