{% extends "pos/base.html" %}
{% block title %}{{ action }} Plan{% endblock %}

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

  <!-- Header -->
  <div class="d-flex align-items-center mb-3">
    <a href="{% url 'installments:plan_list' %}" class="btn btn-sm btn-outline-secondary mr-2">
      <i class="fa fa-arrow-left"></i>
    </a>
    <div>
      <h4 class="mb-0 font-weight-bold">{{ action }} Installment Plan</h4>
      <small class="text-muted">
        {% if action == 'Edit' %}Modify existing plan settings{% else %}Create a new plan template{% endif %}
      </small>
    </div>
  </div>

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

  <div class="row justify-content-center">
    <div class="col-lg-6">
      <div class="card shadow-sm">
        <div class="card-body">

          <form method="post">
            {% csrf_token %}

            <!-- Plan Name -->
            <div class="form-group">
              <label class="font-weight-bold">Plan Name <span class="text-danger">*</span></label>
              <input type="text" name="plan_name" class="form-control"
                     placeholder="e.g. 6 Month Easy Plan"
                     value="{{ initial_plan_name }}"
                     required>
            </div>

            <!-- Duration -->
            <div class="form-group">
              <label class="font-weight-bold">Duration (Months) <span class="text-danger">*</span></label>
              <input type="number" name="duration_months" class="form-control"
                     min="1" max="120"
                     value="{{ initial_duration }}"
                     required>
              <small class="text-muted">Number of monthly installments.</small>
            </div>

            <!-- Notes -->
            <div class="form-group">
              <label class="font-weight-bold">Notes</label>
              <textarea name="notes" class="form-control" rows="2"
                        placeholder="Optional description or terms">{{ initial_notes }}</textarea>
            </div>

            <!-- Active -->
            {% if action == 'Edit' %}
            <div class="form-group">
              <div class="custom-control custom-switch">
                <input type="checkbox" class="custom-control-input" id="is_active"
                       name="is_active" {% if plan.is_active %}checked{% endif %}>
                <label class="custom-control-label font-weight-bold" for="is_active">Active</label>
              </div>
              <small class="text-muted">Inactive plans will not appear in the deal form.</small>
            </div>
            {% endif %}

            <!-- Buttons -->
            <div class="d-flex justify-content-end mt-3">
              <a href="{% url 'installments:plan_list' %}" class="btn btn-secondary mr-2">Cancel</a>
              <button type="submit" class="btn btn-primary">
                <i class="fa fa-save mr-1"></i>
                {% if action == 'Edit' %}Update Plan{% else %}Save Plan{% endif %}
              </button>
            </div>

          </form>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}