{% extends 'school/base_school.html' %}

{% block title %}{% if is_edit %}Edit{% else %}New{% endif %} Fee Model | STD Lab{% endblock %}

{% block page_title %}{% if is_edit %}Modify{% else %}Define{% endif %} Fee Purpose{% endblock %}

{% block content %}
<style>
    .card { border-radius: 0; border: 1px solid #e2e8f0; box-shadow: none; margin-bottom: 20px; background: #fff; max-width: 500px; padding: 30px; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 12px 25px; cursor: pointer; border: none; }
    input { width: 100%; height: 45px; border: 1px solid #e2e8f0; border-radius: 0; padding: 0 10px; margin-top: 5px; font-weight: 700; outline: none; }
    input:focus { border-color: #0f172a; }
    label { font-size: 0.65rem; font-weight: 800; color: #94a3b8; text-transform: uppercase; letter-spacing: 1px; }
</style>

<div class="card">
    <form method="post">
        {% csrf_token %}
        <div style="margin-bottom: 25px;">
            <label>Purpose Name (e.g. Monthly Tuition)</label>
            <input type="text" name="name" value="{{ fee_type.name|default:'' }}" required placeholder="TUITION FEE">
        </div>
        
        <div style="margin-bottom: 35px;">
            <label>Default Amount (৳)</label>
            <input type="number" step="0.01" name="amount" value="{{ fee_type.default_amount|default:'' }}" required placeholder="0.00">
            {% if is_edit %}
            <p style="font-size: 0.65rem; color: #94a3b8; font-weight: 700; margin-top: 5px;">* UPDATING WILL SYNC ALL UNPAID STUDENT RECORDS AUTOMATICALLY.</p>
            {% endif %}
        </div>

        <div style="display: flex; gap: 10px;">
            <button type="submit" class="btn" style="flex: 2; background: #0f172a; color: #fff;">
                {% if is_edit %}UPDATE MODEL{% else %}CREATE MODEL{% endif %}
            </button>
            <a href="{% url 'fee_type_list' %}" class="btn" style="flex: 1; background: #f1f5f9; color: #64748b; text-decoration: none; text-align: center;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}