{% extends 'base.html' %}
{% load static %}

{% block content %}
<div class="hero-gradient">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-md-8">
                <h1 class="display-5 mb-2">Hello! Here's your budget overview.</h1>
                <p class="lead opacity-75">Tracking your finances for {{ current_month }}</p>
            </div>
            <div class="col-md-4 text-md-end">
                <button class="btn btn-light btn-lg rounded-pill px-4 shadow-sm" data-bs-toggle="modal" data-bs-target="#addTransactionModal">
                    <i class="fas fa-plus me-2"></i> Add Transaction
                </button>
            </div>
        </div>
    </div>
</div>

<div class="container py-5">
    <!-- Stats Row -->
    <div class="row g-4 mb-5">
        <div class="col-md-4">
            <div class="stats-card p-4">
                <div class="d-flex align-items-center mb-3">
                    <div class="bg-primary bg-opacity-10 p-3 rounded-circle me-3">
                        <i class="fas fa-wallet text-primary fs-4"></i>
                    </div>
                    <span class="text-muted fw-medium">Total Balance</span>
                </div>
                <h2 class="mb-0 {% if balance >= 0 %}income-text{% else %}expense-text{% endif %}">
                    ${{ balance|floatformat:2 }}
                </h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stats-card p-4">
                <div class="d-flex align-items-center mb-3">
                    <div class="bg-success bg-opacity-10 p-3 rounded-circle me-3">
                        <i class="fas fa-arrow-down text-success fs-4"></i>
                    </div>
                    <span class="text-muted fw-medium">Monthly Income</span>
                </div>
                <h2 class="mb-0 income-text">${{ monthly_income|floatformat:2 }}</h2>
            </div>
        </div>
        <div class="col-md-4">
            <div class="stats-card p-4">
                <div class="d-flex align-items-center mb-3">
                    <div class="bg-danger bg-opacity-10 p-3 rounded-circle me-3">
                        <i class="fas fa-arrow-up text-danger fs-4"></i>
                    </div>
                    <span class="text-muted fw-medium">Monthly Expenses</span>
                </div>
                <h2 class="mb-0 expense-text">${{ monthly_expense|floatformat:2 }}</h2>
            </div>
        </div>
    </div>

    <!-- Transactions List -->
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3 class="mb-0">Recent Transactions</h3>
                <a href="/admin/core/transaction/" class="text-decoration-none text-muted fw-medium">
                    View All <i class="fas fa-chevron-right ms-1"></i>
                </a>
            </div>
            
            <div class="table-responsive">
                <table class="table">
                    <tbody>
                        {% for transaction in recent_transactions %}
                        <tr class="transaction-row {{ transaction.type }} shadow-sm">
                            <td width="15%">
                                <div class="fw-bold">{{ transaction.date|date:"M d" }}</div>
                                <small class="text-muted">{{ transaction.date|date:"Y" }}</small>
                            </td>
                            <td>
                                <div class="fw-semibold">{{ transaction.description|default:"No description" }}</div>
                                <span class="badge bg-light text-dark rounded-pill">{{ transaction.category.name|default:"Uncategorized" }}</span>
                            </td>
                            <td class="text-end" width="20%">
                                <h5 class="mb-0 {% if transaction.type == 'income' %}income-text{% else %}expense-text{% endif %}">
                                    {% if transaction.type == 'income' %}+{% else %}-{% endif %}${{ transaction.amount|floatformat:2 }}
                                </h5>
                                <small class="text-muted">{{ transaction.get_type_display }}</small>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="3" class="text-center py-5">
                                <img src="https://illustrations.popsy.co/gray/saving-money.svg" alt="Empty" style="width: 200px;" class="mb-3">
                                <p class="text-muted">No transactions yet. Start by adding one!</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- Add Transaction Modal -->
<div class="modal fade" id="addTransactionModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 1.5rem;">
            <div class="modal-header border-0 pb-0">
                <h4 class="modal-title px-3 pt-3">New Entry</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label text-muted small text-uppercase fw-bold">Amount</label>
                        {{ form.amount }}
                    </div>
                    <div class="row mb-3">
                        <div class="col">
                            <label class="form-label text-muted small text-uppercase fw-bold">Type</label>
                            {{ form.type }}
                        </div>
                        <div class="col">
                            <label class="form-label text-muted small text-uppercase fw-bold">Category</label>
                            {{ form.category }}
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-muted small text-uppercase fw-bold">Date</label>
                        {{ form.date }}
                    </div>
                    <div class="mb-4">
                        <label class="form-label text-muted small text-uppercase fw-bold">Description</label>
                        {{ form.description }}
                    </div>
                    <div class="px-2">
                        <button type="submit" class="btn btn-primary-gradient w-100 shadow">Save Transaction</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}