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

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

  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">Fee Invoices</h1>
    <div class="btn-group">
      <a href="{% url 'finance:bulk_invoice' %}" class="btn btn-success">
        <i class="fas fa-bolt me-1"></i>Bulk Generate
      </a>
      <a href="{% url 'finance:invoice_create' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Create Invoice
      </a>
      <a href="{% url 'finance:export_invoices' %}" class="btn btn-outline-secondary">
        <i class="fas fa-download me-1"></i>Export CSV
      </a>
    </div>
  </div>

  <!-- Stats -->
  <div class="row mb-4">
    <div class="col-md-3">
      <div class="card border-left-primary shadow h-100 py-2">
        <div class="card-body">
          <div class="text-xs fw-bold text-primary text-uppercase mb-1">Total Invoiced</div>
          <div class="h5 mb-0 fw-bold">{{ total_amount|floatformat:0 }} XAF</div>
          <small class="text-muted">{{ total_invoices }} invoice{{ total_invoices|pluralize }}</small>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-left-success shadow h-100 py-2">
        <div class="card-body">
          <div class="text-xs fw-bold text-success text-uppercase mb-1">Total Paid</div>
          <div class="h5 mb-0 fw-bold">{{ total_paid|floatformat:0 }} XAF</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-left-warning shadow h-100 py-2">
        <div class="card-body">
          <div class="text-xs fw-bold text-warning text-uppercase mb-1">Outstanding</div>
          <div class="h5 mb-0 fw-bold">{{ total_balance|floatformat:0 }} XAF</div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card border-left-danger shadow h-100 py-2">
        <div class="card-body">
          <div class="text-xs fw-bold text-danger text-uppercase mb-1">Overdue</div>
          <div class="h5 mb-0 fw-bold">
            <a href="?status=overdue" class="text-danger text-decoration-none">View overdue →</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Search & Filter -->
  <div class="card shadow mb-4">
    <div class="card-header py-3">
      <h6 class="m-0 fw-bold text-primary">Search &amp; Filter</h6>
    </div>
    <div class="card-body">
      <form method="get" class="row g-2">
        <div class="col-md-4">
          <div class="input-group">
            <input type="text" class="form-control" name="q"
                   placeholder="Invoice #, student name…"
                   value="{{ request.GET.q }}">
            <button class="btn btn-primary" type="submit"><i class="fas fa-search"></i></button>
          </div>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="status">
            <option value="">All Statuses</option>
            {% for val, label in status_choices %}
            <option value="{{ val }}" {% if request.GET.status == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="academic_year">
            <option value="">All Years</option>
            {% for yr in academic_years %}
            <option value="{{ yr }}" {% if request.GET.academic_year == yr %}selected{% endif %}>{{ yr }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2">
          <select class="form-select" name="invoice_type">
            <option value="">All Types</option>
            {% for val, label in invoice_type_choices %}
            <option value="{{ val }}" {% if request.GET.invoice_type == val %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
        <div class="col-md-2 d-flex gap-2">
          <button type="submit" class="btn btn-primary flex-fill">
            <i class="fas fa-filter me-1"></i>Filter
          </button>
          <a href="{% url 'finance:invoice_list' %}" class="btn btn-outline-secondary">
            <i class="fas fa-times"></i>
          </a>
        </div>
      </form>
    </div>
  </div>

  <!-- Table -->
  <div class="card shadow">
    <div class="card-header py-3">
      <h6 class="m-0 fw-bold text-primary">
        All Invoices
        {% if request.GET.q or request.GET.status or request.GET.academic_year or request.GET.invoice_type %}
        <span class="badge bg-info ms-2">Filtered</span>
        {% endif %}
      </h6>
    </div>
    <div class="card-body p-0">
      <div class="table-responsive">
        <table class="table table-hover mb-0">
          <thead class="table-light">
            <tr>
              <th>Invoice #</th>
              <th>Student</th>
              <th>Year</th>
              <th>Type</th>
              <th class="text-end">Total</th>
              <th class="text-end">Paid</th>
              <th class="text-end">Balance</th>
              <th>Due</th>
              <th>Status</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for invoice in invoices %}
            <tr>
              <td>
                <a href="{% url 'finance:invoice_detail' invoice.pk %}">
                  {{ invoice.invoice_number }}
                </a>
              </td>
              <td>
                <a href="{% url 'students:student_detail' invoice.student.pk %}">
                  {{ invoice.student.get_full_name }}
                </a>
              </td>
              <td>{{ invoice.academic_year }}</td>
              <td>
                <span class="badge bg-light text-dark border" style="font-size:.75rem">
                  {{ invoice.get_invoice_type_display }}
                </span>
              </td>
              <td class="text-end">{{ invoice.total_amount|floatformat:0 }}</td>
              <td class="text-end text-success">{{ invoice.amount_paid|floatformat:0 }}</td>
              <td class="text-end {% if invoice.balance > 0 %}text-danger fw-bold{% else %}text-success{% endif %}">
                {{ invoice.balance|floatformat:0 }}
              </td>
              <td>
                <span class="{% if invoice.due_date < today and invoice.status != 'paid' %}text-danger fw-bold{% endif %}">
                  {{ invoice.due_date|date:"d M Y" }}
                </span>
              </td>
              <td>
                <span class="badge
                  {% if invoice.status == 'paid' %}bg-success
                  {% elif invoice.status == 'overdue' %}bg-danger
                  {% elif invoice.status == 'partial' %}bg-warning text-dark
                  {% elif invoice.status == 'sent' %}bg-info
                  {% else %}bg-secondary{% endif %}">
                  {{ invoice.get_status_display }}
                </span>
              </td>
              <td>
                <a href="{% url 'finance:invoice_detail' invoice.pk %}"
                   class="btn btn-sm btn-outline-primary" title="View">
                  <i class="fas fa-eye"></i>
                </a>
                <a href="{% url 'finance:invoice_edit' invoice.pk %}"
                   class="btn btn-sm btn-outline-warning" title="Edit">
                  <i class="fas fa-edit"></i>
                </a>
                <a href="{% url 'finance:payment_add' %}?invoice={{ invoice.pk }}"
                   class="btn btn-sm btn-outline-success" title="Record Payment">
                  <i class="fas fa-money-bill"></i>
                </a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="10" class="text-center py-5 text-muted">
                <i class="fas fa-file-invoice fa-3x mb-3 d-block"></i>
                No invoices found.
                {% if not request.GET.q and not request.GET.status %}
                <a href="{% url 'finance:invoice_create' %}">Create the first invoice</a>
                {% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Pagination -->
  {% if is_paginated %}
  <nav class="mt-4">
    <ul class="pagination justify-content-center">
      {% if page_obj.has_previous %}
      <li class="page-item">
        <a class="page-link"
           href="?page={{ page_obj.previous_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
          &laquo; Previous
        </a>
      </li>
      {% endif %}
      {% for num in page_obj.paginator.page_range %}
        {% if page_obj.number == num %}
        <li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
        <li class="page-item">
          <a class="page-link"
             href="?page={{ num }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
            {{ num }}
          </a>
        </li>
        {% endif %}
      {% endfor %}
      {% if page_obj.has_next %}
      <li class="page-item">
        <a class="page-link"
           href="?page={{ page_obj.next_page_number }}{% if request.GET.q %}&q={{ request.GET.q }}{% endif %}{% if request.GET.status %}&status={{ request.GET.status }}{% endif %}">
          Next &raquo;
        </a>
      </li>
      {% endif %}
    </ul>
  </nav>
  {% endif %}

</div>
{% endblock %}