{% extends 'base.html' %}
{% load static %}
{% block title %}Expense Categories — Rapha-Bethel BNPS{% endblock %}

{% block content %}
<div class="container-fluid">

  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3 mb-0">Expense Categories</h1>
      <p class="text-muted mb-0">Manage categories used when recording expenses</p>
    </div>
    <a href="{% url 'finance:expense_list' %}" class="btn btn-outline-secondary">
      <i class="fas fa-arrow-left me-2"></i>Back to Expenses
    </a>
  </div>

  {% if messages %}
    {% for msg in messages %}
    <div class="alert alert-{{ msg.tags|default:'info' }} alert-dismissible fade show">
      {{ msg }}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    </div>
    {% endfor %}
  {% endif %}

  <div class="row g-4">

    <!-- ── Left: Category List ── -->
    <div class="col-lg-8">
      <div class="card shadow">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
          <h6 class="m-0 fw-bold text-primary">
            <i class="fas fa-list me-2"></i>All Categories
            <span class="badge bg-secondary ms-2">{{ categories|length }}</span>
          </h6>
          {% if not categories %}
          <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="seed">
            <button type="submit" class="btn btn-success btn-sm">
              <i class="fas fa-magic me-1"></i> Load Default Categories
            </button>
          </form>
          {% else %}
          <form method="post" onsubmit="return confirm('This will add any missing default categories without touching existing ones. Continue?')">
            {% csrf_token %}
            <input type="hidden" name="action" value="seed">
            <button type="submit" class="btn btn-outline-secondary btn-sm">
              <i class="fas fa-magic me-1"></i> Add Missing Defaults
            </button>
          </form>
          {% endif %}
        </div>

        {% if not categories %}
        <div class="card-body text-center py-5">
          <i class="fas fa-tags fa-3x text-muted mb-3"></i>
          <h5 class="text-muted">No categories yet</h5>
          <p class="text-muted mb-4">Click <strong>"Load Default Categories"</strong> to add 15 standard school expense categories instantly, or add your own using the form on the right.</p>
          <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="seed">
            <button type="submit" class="btn btn-success btn-lg">
              <i class="fas fa-magic me-2"></i>Load Default Categories
            </button>
          </form>
        </div>
        {% else %}
        <div class="card-body p-0">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th class="ps-3">Category Name</th>
                <th>French Name</th>
                <th>Description</th>
                <th class="text-center">Status</th>
                <th class="text-end pe-3">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for cat in categories %}
              <tr class="{% if not cat.is_active %}text-muted{% endif %}">
                <td class="ps-3 fw-bold">
                  <i class="fas fa-tag me-2 text-primary opacity-75"></i>
                  {{ cat.name }}
                </td>
                <td class="text-muted fst-italic">{{ cat.name_fr|default:"—" }}</td>
                <td class="small text-muted">{{ cat.description|truncatechars:60|default:"—" }}</td>
                <td class="text-center">
                  {% if cat.is_active %}
                    <span class="badge bg-success">Active</span>
                  {% else %}
                    <span class="badge bg-secondary">Inactive</span>
                  {% endif %}
                </td>
                <td class="text-end pe-3">
                  <div class="btn-group btn-group-sm">
                    <!-- Toggle active/inactive -->
                    <form method="post" class="d-inline">
                      {% csrf_token %}
                      <input type="hidden" name="action" value="toggle">
                      <input type="hidden" name="pk" value="{{ cat.pk }}">
                      <button type="submit" class="btn {% if cat.is_active %}btn-outline-warning{% else %}btn-outline-success{% endif %}"
                              title="{% if cat.is_active %}Deactivate{% else %}Activate{% endif %}">
                        <i class="fas {% if cat.is_active %}fa-eye-slash{% else %}fa-eye{% endif %}"></i>
                      </button>
                    </form>
                    <!-- Delete -->
                    <form method="post" class="d-inline"
                          onsubmit="return confirm('Delete category \'{{ cat.name }}\'? This cannot be undone.')">
                      {% csrf_token %}
                      <input type="hidden" name="action" value="delete">
                      <input type="hidden" name="pk" value="{{ cat.pk }}">
                      <button type="submit" class="btn btn-outline-danger" title="Delete">
                        <i class="fas fa-trash"></i>
                      </button>
                    </form>
                  </div>
                </td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
        {% endif %}
      </div>
    </div>

    <!-- ── Right: Add New ── -->
    <div class="col-lg-4">
      <div class="card shadow">
        <div class="card-header py-3">
          <h6 class="m-0 fw-bold text-success"><i class="fas fa-plus me-2"></i>Add New Category</h6>
        </div>
        <div class="card-body">
          <form method="post">
            {% csrf_token %}
            <input type="hidden" name="action" value="add">
            <div class="mb-3">
              <label class="form-label fw-bold">Name (English) <span class="text-danger">*</span></label>
              <input type="text" class="form-control" name="name" placeholder="e.g. Maintenance & Repairs" required>
            </div>
            <div class="mb-3">
              <label class="form-label fw-bold">Name (French)</label>
              <input type="text" class="form-control" name="name_fr" placeholder="e.g. Entretien et réparations">
            </div>
            <div class="mb-4">
              <label class="form-label fw-bold">Description</label>
              <textarea class="form-control" name="description" rows="3"
                        placeholder="What kinds of expenses belong in this category?"></textarea>
            </div>
            <div class="d-grid">
              <button type="submit" class="btn btn-success">
                <i class="fas fa-plus me-2"></i>Add Category
              </button>
            </div>
          </form>
        </div>
      </div>

      <!-- Default categories reference card -->
      <div class="card shadow mt-3 border-info">
        <div class="card-header py-2 bg-info bg-opacity-10">
          <h6 class="m-0 fw-bold text-info"><i class="fas fa-info-circle me-2"></i>Default Categories</h6>
        </div>
        <div class="card-body p-2">
          <small class="text-muted">
            Clicking <em>"Load Default Categories"</em> will add these 15 standard school expense categories:
          </small>
          <ul class="list-unstyled mt-2 mb-0" style="font-size:.8rem;">
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Salaries &amp; Wages</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Teaching Materials</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Stationery &amp; Supplies</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Utilities</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Maintenance &amp; Repairs</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Transport</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Canteen &amp; Catering</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Uniforms &amp; Sportswear</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Exams &amp; Certificates</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Events &amp; Activities</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> IT &amp; Technology</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Cleaning &amp; Sanitation</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Security</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Bank &amp; Admin Charges</li>
            <li><i class="fas fa-circle text-primary me-1" style="font-size:.4rem;vertical-align:middle"></i> Miscellaneous</li>
          </ul>
        </div>
      </div>
    </div>

  </div>
</div>
{% endblock %}