{% 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="margin-bottom: 35px;">
            <label>Billing Frequency</label>
            <select name="frequency" style="width: 100%; height: 45px; border: 1px solid #e2e8f0; border-radius: 0; padding: 0 10px; margin-top: 5px; font-weight: 700; outline: none; background: #fff;">
                <option value="ONCE" {% if fee_type.frequency == 'ONCE' %}selected{% endif %}>ONCE (MANUAL)</option>
                <option value="MONTHLY" {% if fee_type.frequency == 'MONTHLY' %}selected{% endif %}>MONTHLY (AUTOMATED)</option>
                <option value="YEARLY" {% if fee_type.frequency == 'YEARLY' %}selected{% endif %}>YEARLY (AUTOMATED)</option>
            </select>
            <p style="font-size: 0.65rem; color: #94a3b8; font-weight: 700; margin-top: 5px;">* AUTOMATED FEES ARE GENERATED WHEN VIEWING STUDENT RECORDS.</p>
        </div>

        <div style="margin-bottom: 35px;">
            <label>Auto-Apply to Classes (During Level Up)</label>
            <div style="margin-top: 10px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; border: 1px solid #f1f5f9; padding: 15px;">
                {% for cls in classes %}
                <label style="display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #0f172a; text-transform: none; letter-spacing: 0; font-weight: 700; cursor: pointer;">
                    <input type="checkbox" name="applicable_classes" value="{{ cls.id }}" 
                           {% if fee_type and cls in fee_type.applicable_classes.all %}checked{% endif %}
                           style="width: 18px; height: 18px; margin: 0; accent-color: #0f172a;">
                    {{ cls.name }}
                </label>
                {% endfor %}
            </div>
            <p style="font-size: 0.65rem; color: #94a3b8; font-weight: 700; margin-top: 10px;">* ASSIGNED CLASSES WILL AUTOMATICALLY RECEIVE THIS FEE UPON PROMOTION.</p>
        </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 %}