{% extends 'base.html' %}
{% load static %}
{% block title %}Invoice {{ invoice.invoice_number }}{% 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">Invoice {{ invoice.invoice_number }}</h1>
      <p class="text-muted mb-0">
        {{ invoice.student.get_full_name }} &bull;
        {{ invoice.academic_year }} &bull;
        {{ invoice.get_invoice_type_display }}
      </p>
    </div>
    <div class="btn-group">
      <a href="{% url 'finance:invoice_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Back
      </a>
      <a href="{% url 'finance:invoice_edit' invoice.pk %}" class="btn btn-warning">
        <i class="fas fa-edit me-1"></i>Edit
      </a>
      {% if invoice.status != 'paid' and invoice.status != 'cancelled' and invoice.status != 'void' %}
      <a href="{% url 'finance:payment_add' %}?invoice_id={{ invoice.pk }}" class="btn btn-success">
        <i class="fas fa-money-bill me-1"></i>Record Payment
      </a>
      {% endif %}
      <a href="{% url 'finance:invoice_delete' invoice.pk %}" class="btn btn-danger">
        <i class="fas fa-trash me-1"></i>Delete
      </a>
    </div>
  </div>

  <div class="row">
    <!-- Invoice body -->
    <div class="col-lg-8">
      <div class="card shadow mb-4">
        <div class="card-body">
          <!-- Header -->
          <div class="row mb-4">
            <div class="col-6">
              <h5 class="text-primary">Rapha-Bethel BNPS</h5>
              <p class="text-muted mb-0">Bilingual Nursery &amp; Primary School</p>
              <p class="text-muted mb-0">Douala, Cameroon</p>
              <p class="text-muted">+237 6 70 17 79 79</p>
            </div>
            <div class="col-6 text-end">
              <h4 class="text-uppercase text-muted">Invoice</h4>
              <p class="mb-1"><strong>#{{ invoice.invoice_number }}</strong></p>
              <p class="mb-1">Issued: {{ invoice.issue_date|date:"d M Y" }}</p>
              <p class="mb-0 {% if invoice.is_overdue %}text-danger fw-bold{% endif %}">
                Due: {{ invoice.due_date|date:"d M Y" }}
              </p>
            </div>
          </div>
          <hr>

          <!-- Bill To -->
          <div class="row mb-4">
            <div class="col-6">
              <h6 class="text-muted text-uppercase small">Bill To</h6>
              <p class="fw-bold mb-0">{{ invoice.student.get_full_name }}</p>
              <p class="text-muted mb-0">ID: {{ invoice.student.student_id }}</p>
              <p class="text-muted mb-0">Class: {{ invoice.student.current_class|default:"—" }}</p>
              {% if invoice.enrollment_fee %}
              <p class="text-muted mb-0 small">
                {{ invoice.enrollment_fee.fee_structure.get_section_display }} —
                {{ invoice.enrollment_fee.fee_structure.get_class_group_display }}
              </p>
              {% endif %}
            </div>
            <div class="col-6 text-end">
              <span class="badge fs-6
                {% if invoice.status == 'paid' %}bg-success
                {% elif invoice.status == 'overdue' %}bg-danger
                {% elif invoice.status == 'partial' %}bg-warning text-dark
                {% elif invoice.status == 'draft' %}bg-secondary
                {% else %}bg-info{% endif %}">
                {{ invoice.get_status_display }}
              </span>
              <p class="mt-2 text-muted small">{{ invoice.get_invoice_type_display }}</p>
            </div>
          </div>

          <!-- Line Items -->
          <table class="table">
            <thead class="table-dark">
              <tr>
                <th>Description</th>
                <th class="text-end">Amount (XAF)</th>
              </tr>
            </thead>
            <tbody>
              {% for item in items %}
              <tr>
                <td>
                  {{ item.description }}
                  {% if item.fee_structure %}
                  <small class="text-muted">
                    ({{ item.fee_structure.get_section_display }} —
                    {{ item.fee_structure.get_class_group_display }})
                  </small>
                  {% elif item.school_item %}
                  <small class="text-muted">({{ item.school_item.get_item_type_display }})</small>
                  {% endif %}
                </td>
                <td class="text-end">{{ item.total|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="2" class="text-center text-muted">No line items</td></tr>
              {% endfor %}
            </tbody>
            <tfoot>
              <tr class="table-dark">
                <td class="text-end fw-bold">Total</td>
                <td class="text-end fw-bold">{{ invoice.total_amount|floatformat:0 }}</td>
              </tr>
              <tr class="text-success">
                <td class="text-end">Amount Paid</td>
                <td class="text-end">{{ invoice.amount_paid|floatformat:0 }}</td>
              </tr>
              <tr class="{% if invoice.balance > 0 %}table-warning{% else %}table-success{% endif %}">
                <td class="text-end fw-bold">Balance Due</td>
                <td class="text-end fw-bold">{{ invoice.balance|floatformat:0 }}</td>
              </tr>
            </tfoot>
          </table>

          {% if invoice.notes %}
          <div class="alert alert-light mt-3">
            <strong>Notes:</strong> {{ invoice.notes }}
          </div>
          {% endif %}
        </div>
      </div>

      <!-- Payment History -->
      <div class="card shadow mb-4">
        <div class="card-header py-3 d-flex justify-content-between align-items-center">
          <h6 class="m-0 fw-bold text-primary">Payment History</h6>
          {% if invoice.status != 'paid' and invoice.status != 'cancelled' and invoice.status != 'void' %}
          <a href="{% url 'finance:payment_add' %}?invoice_id={{ invoice.pk }}" class="btn btn-sm btn-success">
            + Record Payment
          </a>
          {% endif %}
        </div>
        <div class="card-body p-0">
          <table class="table table-hover mb-0">
            <thead class="table-light">
              <tr>
                <th>Payment #</th><th>Date</th><th>Method</th>
                <th>Amount</th><th>Status</th><th></th>
              </tr>
            </thead>
            <tbody>
              {% for p in payments %}
              <tr>
                <td><a href="{% url 'finance:payment_detail' p.pk %}">{{ p.payment_number }}</a></td>
                <td>{{ p.payment_date|date:"d M Y" }}</td>
                <td>{{ p.get_payment_method_display }}</td>
                <td class="text-success fw-bold">{{ p.amount|floatformat:0 }} XAF</td>
                <td>
                  <span class="badge bg-{% if p.status == 'completed' %}success{% else %}warning text-dark{% endif %}">
                    {{ p.get_status_display }}
                  </span>
                </td>
                <td>
                  <a href="{% url 'finance:generate_receipt' p.pk %}" class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-receipt"></i>
                  </a>
                </td>
              </tr>
              {% empty %}
              <tr><td colspan="6" class="text-center text-muted py-3">No payments recorded yet.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
      <div class="card shadow mb-4">
        <div class="card-header py-3">
          <h6 class="m-0 fw-bold text-primary">Payment Progress</h6>
        </div>
        <div class="card-body">
          <div class="d-flex justify-content-between mb-1">
            <span>{{ invoice.payment_percentage|floatformat:1 }}% paid</span>
            <span class="text-muted">
              {{ invoice.amount_paid|floatformat:0 }} / {{ invoice.total_amount|floatformat:0 }}
            </span>
          </div>
          <div class="progress mb-3" style="height:12px">
            <div class="progress-bar bg-success" style="width:{{ invoice.payment_percentage }}%"></div>
          </div>
          <p class="text-center fw-bold {% if invoice.balance > 0 %}text-danger{% else %}text-success{% endif %}">
            Balance: {{ invoice.balance|floatformat:0 }} XAF
          </p>
        </div>
      </div>

      {% if reminders %}
      <div class="card shadow">
        <div class="card-header py-3">
          <h6 class="m-0 fw-bold text-primary">Reminders Sent</h6>
        </div>
        <ul class="list-group list-group-flush">
          {% for r in reminders %}
          <li class="list-group-item small">
            <i class="fas fa-bell text-warning me-2"></i>
            {{ r.sent_date|date:"d M Y" }} — {{ r.get_reminder_type_display }} to {{ r.sent_to }}
          </li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}