{% extends "base.html" %}
{% block title %}Expenses{% endblock %}
{% block page_title %}Expenses{% endblock %}

{% block content %}
<div class="row g-4">
  <!-- Add Expense Form -->
  <div class="col-lg-4">
    <div class="card">
      <div class="card-header"><i class="bi bi-plus-circle me-1"></i>Add Expense</div>
      <div class="card-body">
        <form method="post" novalidate>
          {% csrf_token %}
          {% for field in form %}
          <div class="mb-3">
            <label class="form-label fw-semibold small">{{ field.label }}</label>
            {{ field }}
            {% if field.errors %}<div class="text-danger small mt-1">{{ field.errors }}</div>{% endif %}
          </div>
          {% endfor %}
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-plus-lg me-1"></i>Add Expense
          </button>
        </form>
      </div>
    </div>
  </div>

  <!-- Expense List -->
  <div class="col-lg-8">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-list-ul me-1"></i>All Expenses</span>
        <span class="badge bg-danger fs-6">
          Total: TSh {% for e in expenses %}{% endfor %}0
        </span>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th>Date</th>
                <th>Description</th>
                <th>Category</th>
                <th>House</th>
                <th class="text-end">Amount</th>
                <th></th>
              </tr>
            </thead>
            <tbody>
              {% for expense in expenses %}
              <tr>
                <td class="text-muted small">{{ expense.date|date:"d M Y" }}</td>
                <td>
                  {{ expense.description }}
                  {% if expense.notes %}
                  <br><small class="text-muted">{{ expense.notes|truncatechars:50 }}</small>
                  {% endif %}
                </td>
                <td><span class="badge bg-secondary">{{ expense.get_category_display }}</span></td>
                <td class="small">
                  {% if expense.house %}
                  <a href="{% url 'house_detail' expense.house.pk %}">{{ expense.house.house_number }}</a>
                  {% else %}
                  <span class="text-muted">General</span>
                  {% endif %}
                </td>
                <td class="text-end fw-semibold text-danger">TSh {{ expense.amount|floatformat:0 }}</td>
                <td>
                  <div class="d-flex gap-1">
                    <a href="{% url 'expense_edit' expense.pk %}" class="btn btn-sm btn-outline-secondary">
                      <i class="bi bi-pencil"></i>
                    </a>
                    <a href="{% url 'expense_delete' expense.pk %}" class="btn btn-sm btn-outline-danger">
                      <i class="bi bi-trash"></i>
                    </a>
                  </div>
                </td>
              </tr>
              {% empty %}
              <tr>
                <td colspan="6" class="text-center text-muted py-4">No expenses recorded yet.</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}