{% extends "pos/base.html" %}
{% block title %}Installment Plans{% endblock %}

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

  <!-- Page Header -->
  <div class="d-flex align-items-center justify-content-between mb-3">
    <div>
      <h4 class="mb-0 font-weight-bold">Installment Plans</h4>
      <small class="text-muted">Manage reusable installment plan templates</small>
    </div>
    <a href="{% url 'installments:plan_add' %}" class="btn btn-primary btn-sm">
      <i class="fa fa-plus mr-1"></i> Add Plan
    </a>
  </div>

  {% if messages %}
    {% for msg in messages %}
      <div class="alert alert-{{ msg.tags }} alert-dismissible fade show py-2" role="alert">
        {{ msg }}
        <button type="button" class="close" data-dismiss="alert"><span>&times;</span></button>
      </div>
    {% endfor %}
  {% endif %}

  <!-- Plans Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <table class="table table-hover table-sm mb-0">
        <thead class="thead-light">
          <tr>
            <th>#</th>
            <th>Plan Name</th>
            <th class="text-center">Duration (Months)</th>
            <th class="text-center">Status</th>
            <th>Notes</th>
            <th class="text-center">Actions</th>
          </tr>
        </thead>
        <tbody>
          {% for plan in plans %}
          <tr>
            <td class="text-muted">{{ forloop.counter }}</td>
            <td class="font-weight-bold">{{ plan.plan_name }}</td>
            <td class="text-center">{{ plan.duration_months }}</td>
            <td class="text-center">
              {% if plan.is_active %}
                <span class="badge badge-success">Active</span>
              {% else %}
                <span class="badge badge-secondary">Inactive</span>
              {% endif %}
            </td>
            <td class="text-muted small">{{ plan.notes|default:"-" }}</td>
            <td class="text-center">
              <a href="{% url 'installments:plan_edit' plan.id %}"
                 class="btn btn-xs btn-outline-secondary mr-1">
                <i class="fa fa-edit"></i> Edit
              </a>
              <form method="post" action="{% url 'installments:plan_delete' plan.id %}"
                    style="display:inline;"
                    onsubmit="return confirm('Delete plan \'{{ plan.plan_name }}\'? This cannot be undone.');">
                {% csrf_token %}
                <button type="submit" class="btn btn-xs btn-outline-danger">
                  <i class="fa fa-trash"></i> Delete
                </button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="6" class="text-center text-muted py-4">
              No plans found. <a href="{% url 'installments:plan_add' %}">Add your first plan.</a>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
{% endblock %}