{% extends "admin/base_site.html" %}
{% load humanize %}

{% block title %}IHICL Investment Dashboard{% endblock %}

{% block content %}
<div class="module">
    <h1>IHICL Investment Overview</h1>
    
    <div class="dashboard-container">
        <!-- Summary Cards -->
        <div class="dashboard-cards">
            <div class="card">
                <h3>Total Investors</h3>
                <p class="stat">{{ total_investors }}</p>
            </div>
            <div class="card">
                <h3>Total Investments</h3>
                <p class="stat">{{ total_investments }}</p>
            </div>
            <div class="card">
                <h3>Total Investment Amount</h3>
                <p class="stat">₦{{ total_investment_amount|floatformat:2|intcomma }}</p>
            </div>
            <div class="card">
                <h3>New Investors (30 days)</h3>
                <p class="stat">{{ new_investors }}</p>
            </div>
        </div>
        
        <!-- Investment Statistics -->
        <div class="section">
            <h2>Investment Statistics by Status</h2>
            <table>
                <thead>
                    <tr>
                        <th>Status</th>
                        <th>Count</th>
                        <th>Total Amount</th>
                    </tr>
                </thead>
                <tbody>
                    {% for stat in investment_stats %}
                    <tr>
                        <td>{{ stat.status|title }}</td>
                        <td>{{ stat.count }}</td>
                        <td>₦{{ stat.total_amount|floatformat:2|intcomma }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        
        <!-- Recent Investments -->
        <div class="section">
            <h2>Recent Investments</h2>
            <table>
                <thead>
                    <tr>
                        <th>Investor</th>
                        <th>Project</th>
                        <th>Amount</th>
                        <th>Date</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    {% for investment in recent_investments %}
                    <tr>
                        <td>{{ investment.investor.get_full_name|default:investment.investor.username }}</td>
                        <td>{{ investment.project.title }}</td>
                        <td>₦{{ investment.amount|floatformat:2|intcomma }}</td>
                        <td>{{ investment.date_invested|date:"M d, Y" }}</td>
                        <td>{{ investment.get_status_display }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5">No recent investments</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<style>
.dashboard-container {
    margin: 20px 0;
}

.dashboard-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.card {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.card h3 {
    margin: 0 0 10px 0;
    color: #495057;
    font-size: 14px;
    text-transform: uppercase;
}

.card .stat {
    margin: 0;
    font-size: 24px;
    font-weight: bold;
    color: #085e2b;
}

.section {
    margin-bottom: 30px;
}

.section h2 {
    border-bottom: 2px solid #085e2b;
    padding-bottom: 10px;
    color: #085e2b;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #dee2e6;
}

th {
    background-color: #085e2b;
    color: white;
}

tr:nth-child(even) {
    background-color: #f8f9fa;
}
</style>

{% endblock %}