{% extends 'base.html' %}
{% load static %}
{% block title %}School Item Prices — 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">School Item Prices</h1>
      <p class="text-muted mb-0">Uniforms, sportswear, report cards, pullovers &amp; other items</p>
    </div>
    <div class="btn-group">
      <a href="{% url 'finance:school_item_add' %}" class="btn btn-primary">
        <i class="fas fa-plus me-1"></i>Add Item
      </a>
      <a href="{% url 'finance:fee_list' %}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Fee Structures
      </a>
    </div>
  </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 %}

  <!-- Reference card from fee table Image 2 -->
  <div class="alert alert-light border mb-4">
    <strong><i class="fas fa-info-circle me-2 text-info"></i>Official prices from school records:</strong>
    Uniforms 5,000 XAF &nbsp;·&nbsp; Sportswear 3,500 XAF &nbsp;·&nbsp;
    Report Card 1,000 XAF &nbsp;·&nbsp; Pullovers 5,000 XAF
  </div>

  <div class="card shadow">
    <div class="card-body p-0">
      <table class="table table-hover mb-0">
        <thead class="table-dark">
          <tr>
            <th>Item</th>
            <th>Type</th>
            <th>Year</th>
            <th class="text-end">Selling Price (XAF)</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for item in items %}
          <tr>
            <td class="fw-bold">{{ item.name }}</td>
            <td>
              <span class="badge bg-light text-dark border">
                {{ item.get_item_type_display }}
              </span>
            </td>
            <td>{{ item.academic_year }}</td>
            <td class="text-end fw-bold text-primary">{{ item.price|floatformat:0 }}</td>
            <td>
              {% if item.is_active %}
              <span class="badge bg-success">Available</span>
              {% else %}
              <span class="badge bg-secondary">Unavailable</span>
              {% endif %}
            </td>
            <td>
              <a href="{% url 'finance:school_item_edit' item.pk %}"
                 class="btn btn-sm btn-outline-warning" title="Edit">
                <i class="fas fa-edit"></i>
              </a>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="text-center py-5 text-muted">
              <i class="fas fa-tshirt fa-3x d-block mb-3"></i>
              No item prices set up yet.
              <a href="{% url 'finance:school_item_add' %}">Add the first one</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}