{% extends 'base.html' %}

{% block title %}Inicio - Gastos Familiares{% endblock %}

{% block content %}
<div class="container content-section">
  <div class="row">
    <div class="col-md-4">
      <h2>Agregar Nuevo Gasto</h2>
      <form method="post">
        {% csrf_token %}
        <div class="mb-3">
          {{ form.payer.label_tag }}
          {{ form.payer }}
        </div>
        <div class="mb-3">
          {{ form.amount.label_tag }}
          {{ form.amount }}
        </div>
        <div class="mb-3">
          {{ form.currency.label_tag }}
          {{ form.currency }}
        </div>
        <div class="mb-3">
          {{ form.category.label_tag }}
          {{ form.category }}
        </div>
        <div class="mb-3">
          {{ form.description.label_tag }}
          {{ form.description }}
        </div>
        <div class="mb-3">
          {{ form.date.label_tag }}
          {{ form.date }}
        </div>
        <button type="submit" class="btn btn-primary">Agregar Gasto</button>
      </form>
    </div>
    <div class="col-md-8">
      <div class="row">
        <div class="col-md-6">
          <h2>Tus Gastos Recientes</h2>

          <form method="get" class="row g-3 align-items-center mb-3">
            <div class="col-auto">
              <label for="category" class="col-form-label">Filtrar por categoría:</label>
            </div>
            <div class="col-auto">
              <select name="category" id="category" class="form-select">
                <option value="">Todas</option>
                {% for category in categories %}
                  <option value="{{ category.id }}" {% if request.GET.category == category.id|stringformat:"s" %}selected{% endif %}>{{ category.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-auto">
              <button type="submit" class="btn btn-secondary">Filtrar</button>
            </div>
          </form>

          {% if expenses %}
            <ul class="list-group">
              {% for expense in expenses %}
                <li class="list-group-item d-flex justify-content-between align-items-center">
                  <div>
                    <strong>{{ expense.category }}</strong> - {{ expense.description }}
                    <small class="text-muted">({{ expense.date|date:"d/m/Y" }})</small>
                  </div>
                  <span class="badge bg-primary rounded-pill">${{ expense.amount }}</span>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="alert alert-info mt-4" role="alert">
                Aún no has agregado ningún gasto. ¡Comienza agregando uno!
            </div>
          {% endif %}
        </div>
        <div class="col-md-6">
          <h2>Análisis de Gastos</h2>
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Total de Gastos</h5>
              <p class="card-text display-6">${{ total_expenses|floatformat:2 }}</p>
            </div>
          </div>

          <h5 class="mt-4">Gastos por Categoría</h5>
          <ul class="list-group">
            {% for item in category_summary %}
              <li class="list-group-item d-flex justify-content-between align-items-center">
                {{ item.category__name }}
                <span class="badge bg-secondary rounded-pill">${{ item.total|floatformat:2 }}</span>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
