{% extends 'base.html' %}
{% block title %}Dashboard - Astron Hosts Expense Tracker{% endblock %}
{% block content %}
<div class="container">
    {% if messages %}
        <div class="modal fade" id="messageModal" tabindex="-1" aria-labelledby="messageModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="messageModalLabel">Notification</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        {% for message in messages %}
                            <div class="alert alert-{{ message.tags }} mb-0" role="alert">
                                {{ message }}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                var messageModal = new bootstrap.Modal(document.getElementById('messageModal'));
                messageModal.show();
            });
        </script>
    {% endif %}
    <div class="d-flex justify-content-end mb-3">
        <a href="/income/add/" class="btn btn-success me-2">Add Income</a>
        <a href="/expense/add/" class="btn btn-danger">Add Expense</a>
    </div>
    {% if monthly_budget > 0 %}
        {% if over_budget %}
            <div class="alert alert-danger mb-4 fw-semibold fs-5" role="alert">
                <i class="bi bi-exclamation-triangle me-2"></i>
                Warning: You have exceeded your monthly budget of {{ currency }} {{ monthly_budget }} by {{ currency }} {{ budget_diff }}!
            </div>
        {% endif %}
        <div class="row mb-4 g-4 justify-content-center fade-in">
            <div class="col-lg-8 col-md-10">
                <div class="card shadow rounded-4 border-0" style="background: {% if over_budget %}#d32f2f{% else %}#219653{% endif %};">
                    <div class="card-body d-flex flex-column align-items-center justify-content-center py-4">
                        <div class="mb-2" style="font-size:2.2rem; color: #fff;">
                            <i class="bi bi-calendar2-week"></i>
                        </div>
                        <h5 class="fw-bold text-white mb-1">Your Monthly Budget</h5>
                        <div class="fs-2 fw-bold text-white mb-2">{{ currency }} {{ monthly_budget }}</div>
                        <div class="mb-2">
                            {% if over_budget %}
                                <span class="fw-bold text-warning">Over Budget:</span>
                                <span class="fw-bold text-white">{{ currency }} {{ budget_diff }}</span>
                            {% else %}
                                <span class="fw-bold text-white">Remaining:</span>
                                <span class="fw-bold text-white">{{ currency }} {{ budget_diff }}</span>
                            {% endif %}
                        </div>
                        <div class="w-100">
                            <div class="progress" style="height: 16px;">
                                <div class="progress-bar {% if over_budget %}bg-warning{% else %}bg-light{% endif %}" role="progressbar" style="width: {% if over_budget %}100{% else %}{{ budget_percent }}{% endif %}%; color: #222; font-weight:600;" aria-valuenow="{{ monthly_expense }}" aria-valuemin="0" aria-valuemax="{{ monthly_budget }}">
                                    {{ monthly_expense }} / {{ monthly_budget }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}
    <!-- Month Filter Section -->
    <div class="row mb-4">
        <div class="col-12 d-flex flex-column align-items-center">
            <h3 class="mb-3">Filter by Month</h3>
            <form method="get" class="d-flex align-items-center w-50" style="max-width: 500px;">
                <input type="month" id="month" name="month" class="form-control form-control-lg me-3" value="{{ selected_month }}">
                <button type="submit" class="btn btn-primary btn-lg">Filter</button>
            </form>
        </div>
    </div>
    <!-- Summary Cards Row -->
    <div class="row mb-4 g-4 fade-in">
        <div class="col-md-3">
            <div class="card text-white bg-success shadow-sm rounded-4 h-100">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="mb-2" style="font-size:2rem;">💰</div>
                    <h5 class="card-title">Total Income</h5>
                    <p class="card-text fs-4 mb-0">{{ currency }} {{ total_income }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-danger shadow-sm rounded-4 h-100">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="mb-2" style="font-size:2rem;">💸</div>
                    <h5 class="card-title">Total Expense</h5>
                    <p class="card-text fs-4 mb-0">{{ currency }} {{ total_expense }}</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-info shadow-sm rounded-4 h-100">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="mb-2" style="font-size:2rem;">📈</div>
                    <h5 class="card-title">Net Profit</h5>
                    <p class="card-text fs-4 mb-0">
                        {% if net >= 0 %}
                            {{ currency }} {{ net }}
                        {% else %}
                            {{ currency }} 0
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card text-white bg-dark shadow-sm rounded-4 h-100">
                <div class="card-body d-flex flex-column align-items-center">
                    <div class="mb-2" style="font-size:2rem;">📉</div>
                    <h5 class="card-title">Net Loss</h5>
                    <p class="card-text fs-4 mb-0">
                        {% if net < 0 %}
                            {{ currency }} {{ abs_net }}
                        {% else %}
                            {{ currency }} 0
                        {% endif %}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mb-4 g-4 fade-in">
        <div class="col-md-6">
            <div class="card shadow-sm rounded-4 border-0 h-100">
                <div class="card-header bg-primary text-white rounded-top-4 fw-semibold fs-5 border-0">This Month</div>
                <div class="card-body">
                    <p class="mb-2 fs-6">Income: <span class="fw-bold fs-5">{{ currency }} {{ monthly_income }}</span></p>
                    <p class="mb-2 fs-6">Expense: <span class="fw-bold fs-5">{{ currency }} {{ monthly_expense }}</span></p>
                    <p class="mb-0 fs-6">Net: <span class="fw-bold fs-5">{{ currency }} {{ monthly_net }}</span></p>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm rounded-4 border-0 h-100">
                <div class="card-header bg-dark text-white rounded-top-4 fw-semibold fs-5 border-0">This Year</div>
                <div class="card-body">
                    <p class="mb-2 fs-6">Income: <span class="fw-bold fs-5">{{ currency }} {{ yearly_income }}</span></p>
                    <p class="mb-2 fs-6">Expense: <span class="fw-bold fs-5">{{ currency }} {{ yearly_expense }}</span></p>
                    <p class="mb-0 fs-6">Net: <span class="fw-bold fs-5">{{ currency }} {{ yearly_net }}</span></p>
                </div>
            </div>
        </div>
    </div>
    <div class="row mt-4 g-4">
        <div class="col-md-6">
            <div class="card shadow-sm rounded-4 border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h4 class="fw-bold mb-0"><span style="font-size:1.5rem;">📥</span> Latest Incomes</h4>
                        <a href="/income/export/csv/" class="btn btn-outline-primary btn-sm rounded-3 fw-semibold">Export CSV</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 fade-in">
                            <thead class="table-light">
                                <tr>
                                    <th class="fw-bold">Source</th>
                                    <th class="fw-bold">Amount</th>
                                    <th class="fw-bold">Date</th>
                                    <th class="fw-bold">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for income in latest_incomes %}
                                <tr>
                                    <td>{{ income.source }}</td>
                                    <td>{{ currency }} {{ income.amount }}</td>
                                    <td>{{ income.date }}</td>
                                    <td>
                                        <a href="/income/edit/{{ income.id }}/" class="btn btn-sm btn-primary">Edit</a>
                                        <a href="/income/delete/{{ income.id }}/" class="btn btn-sm btn-danger">Delete</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="4" class="text-center bg-light text-muted rounded-3">No income records.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card shadow-sm rounded-4 border-0">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h4 class="fw-bold mb-0"><span style="font-size:1.5rem;">📤</span> Latest Expenses</h4>
                        <a href="/expense/export/csv/" class="btn btn-outline-primary btn-sm rounded-3 fw-semibold">Export CSV</a>
                    </div>
                    <div class="table-responsive">
                        <table class="table align-middle mb-0 fade-in">
                            <thead class="table-light">
                                <tr>
                                    <th class="fw-bold">Title</th>
                                    <th class="fw-bold">Category</th>
                                    <th class="fw-bold">Amount</th>
                                    <th class="fw-bold">Date</th>
                                    <th class="fw-bold">Actions</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for expense in latest_expenses %}
                                <tr>
                                    <td>{{ expense.title }}</td>
                                    <td>{{ expense.category }}</td>
                                    <td>{{ currency }} {{ expense.amount }}</td>
                                    <td>{{ expense.date }}</td>
                                    <td>
                                        <a href="/expense/edit/{{ expense.id }}/" class="btn btn-sm btn-primary">Edit</a>
                                        <a href="/expense/delete/{{ expense.id }}/" class="btn btn-sm btn-danger">Delete</a>
                                    </td>
                                </tr>
                                {% empty %}
                                <tr>
                                    <td colspan="5" class="text-center bg-light text-muted rounded-3">No expense records.</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}