{% extends "base.html" %}

{% block title %}User Details - {{ user.full_name }} - National Medlab Cooperative{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>User Details - {{ user.full_name }}</h2>
    <div>
        <a href="{{ url_for('manage_users') }}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Users
        </a>
        <a href="{{ url_for('edit_user', user_id=user.id) }}" class="btn btn-primary">
            <i class="fas fa-edit me-2"></i>Edit User
        </a>
    </div>
</div>

<!-- User Information Card -->
<div class="card mb-4">
    <div class="card-header">
        <h5 class="mb-0">Personal Information</h5>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-6">
                <table class="table table-borderless">
                    <tr>
                        <td><strong>Registration Number:</strong></td>
                        <td>{{ user.registration_number }}</td>
                    </tr>
                    <tr>
                        <td><strong>Full Name:</strong></td>
                        <td>{{ user.full_name }}</td>
                    </tr>
                    <tr>
                        <td><strong>Email:</strong></td>
                        <td>{{ user.email }}</td>
                    </tr>
                    <tr>
                        <td><strong>Phone:</strong></td>
                        <td>{{ user.phone }}</td>
                    </tr>
                </table>
            </div>
            <div class="col-md-6">
                <table class="table table-borderless">
                    <tr>
                        <td><strong>Role:</strong></td>
                        <td>
                            <span class="badge badge-{{ 'dark' if user.role == 'Super Admin' else 'warning' if user.role == 'Admin' else 'info' if user.role == 'Treasurer' else 'secondary' if user.role == 'Loan Officer' else 'primary' }}">
                                {{ user.role }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Verification Status:</strong></td>
                        <td>
                            <span class="badge badge-{{ 'success' if user.is_verified else 'warning' }}">
                                {{ 'Verified' if user.is_verified else 'Not Verified' }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td><strong>Member Since:</strong></td>
                        <td>{{ user.created_at.strftime('%d %B %Y') }}</td>
                    </tr>
                    <tr>
                        <td><strong>User ID:</strong></td>
                        <td>{{ user.id }}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Financial Overview -->
<div class="row mb-4">
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h6 class="card-subtitle mb-2 text-muted">Wallet Balance</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(wallet.balance if wallet else 0) }}</h3>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h6 class="card-subtitle mb-2 text-muted">Total Contributions</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(total_contributions) }}</h3>
                <small class="text-warning" ng-if="pending_contributions > 0">+₦{{ "%.2f"|format(pending_contributions) }} pending</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h6 class="card-subtitle mb-2 text-muted">Total Loans</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(total_loans) }}</h3>
                <small class="text-warning" ng-if="pending_loans > 0">+₦{{ "%.2f"|format(pending_loans) }} pending</small>
            </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="card stats-card">
            <div class="card-body text-center">
                <h6 class="card-subtitle mb-2 text-muted">Total Repayments</h6>
                <h3 class="card-title">₦{{ "%.2f"|format(total_repayments) }}</h3>
            </div>
        </div>
    </div>
</div>

<!-- Contributions History -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Contributions History ({{ contributions|length }})</h5>
        <span class="badge bg-success">₦{{ "%.2f"|format(total_contributions) }} Total</span>
    </div>
    <div class="card-body">
        {% if contributions %}
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Amount</th>
                            <th>Payment Method</th>
                            <th>Status</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for contribution in contributions %}
                        <tr>
                            <td>₦{{ "%.2f"|format(contribution.amount) }}</td>
                            <td>
                                <span class="badge badge-{{ 'success' if contribution.payment_method == 'paystack' else 'info' }}">
                                    {{ contribution.payment_method.title() if contribution.payment_method else 'Manual' }}
                                </span>
                            </td>
                            <td>
                                <span class="badge badge-{{ 'success' if contribution.status == 'approved' else 'danger' if contribution.status == 'rejected' else 'warning' }}">
                                    {{ contribution.status.title() }}
                                </span>
                            </td>
                            <td>{{ contribution.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted">No contributions found.</p>
        {% endif %}
    </div>
</div>

<!-- Loans History -->
<div class="card mb-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="mb-0">Loans History ({{ loans|length }})</h5>
        <span class="badge bg-info">₦{{ "%.2f"|format(total_loans) }} Total</span>
    </div>
    <div class="card-body">
        {% if loans %}
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Amount</th>
                            <th>Interest Rate</th>
                            <th>Total Payable</th>
                            <th>Duration</th>
                            <th>Status</th>
                            <th>Applied</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for loan in loans %}
                        <tr>
                            <td>₦{{ "%.2f"|format(loan.amount) }}</td>
                            <td>{{ loan.interest_rate }}%</td>
                            <td>₦{{ "%.2f"|format(loan.total_payable) }}</td>
                            <td>{{ loan.duration_months }} months</td>
                            <td>
                                <span class="badge badge-{{ 'success' if loan.status == 'approved' else 'danger' if loan.status == 'rejected' else 'warning' if loan.status == 'pending' else 'info' }}">
                                    {{ loan.status.title() }}
                                </span>
                            </td>
                            <td>{{ loan.created_at.strftime('%d/%m/%Y') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted">No loan applications found.</p>
        {% endif %}
    </div>
</div>

<!-- Recent Transactions -->
<div class="card">
    <div class="card-header">
        <h5 class="mb-0">Recent Transactions ({{ transactions|length }})</h5>
    </div>
    <div class="card-body">
        {% if transactions %}
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Type</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Description</th>
                            <th>Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for transaction in transactions %}
                        <tr>
                            <td>
                                <span class="badge badge-{{ 'primary' if transaction.type == 'deposit' else 'warning' if transaction.type == 'withdrawal' else 'info' if transaction.type == 'loan_disbursement' else 'secondary' }}">
                                    {{ 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.description or 'N/A' }}</td>
                            <td>{{ transaction.created_at.strftime('%d/%m/%Y %H:%M') }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <p class="text-muted">No transactions found.</p>
        {% endif %}
    </div>
</div>
{% endblock %}