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

{% block title %}Configure {{ fine.reason|default:"Fine" }} Rule | STD Lab{% endblock %}

{% block content %}
<div class="card" style="max-width: 500px; margin: 40px auto; border-radius: 28px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.08); padding: 50px;">
    <h2 style="font-weight: 950; color: #0f172a; margin-bottom: 5px; text-align: center;">{{ fine.reason }} Rule</h2>
    <p style="text-align: center; color: #94a3b8; font-size: 0.82rem; font-weight: 800; margin-bottom: 40px; text-transform: uppercase;">Settings for automatic fine calculation.</p>
    
    <form method="post">
        {% csrf_token %}
        <div class="form-group">
            <label style="font-weight: 950; color: #0f172a; margin-bottom: 12px; display: block;">
                {% if fine.reason == 'Late' %}FINE AMOUNT PER MINUTE (৳){% else %}FINE AMOUNT (৳){% endif %}
            </label>
            <input type="number" step="0.01" name="amount" value="{{ fine.amount|floatformat:2 }}" required placeholder="e.g. 50.00" style="font-size: 1.2rem; font-weight: 800; height: 60px; border-radius: 15px; border: 2px solid #f1f5f9; background: #f8fafc; padding: 0 20px; outline: none; width: 100%;">
        </div>

        {% if fine.reason == 'Late' %}
        <div class="form-group" style="margin-top: 30px;">
            <label style="font-weight: 950; color: #0f172a; margin-bottom: 12px; display: block;">GRACE PERIOD (DEFAULT SETTING)</label>
            <div style="position: relative;">
                <input type="number" name="grace_minutes" value="1" readonly style="font-weight: 800; padding: 0 60px 0 20px; font-size: 1.1rem; height: 60px; border-radius: 15px; border: 2px solid #e2e8f0; background: #f1f5f9; color: #94a3b8; outline: none; width: 100%; cursor: not-allowed;" title="The default late tracking starts from minute 1.">
                <span style="position: absolute; right: 25px; top: 50%; transform: translateY(-50%); font-weight: 900; color: #94a3b8; font-size: 0.75rem;">MIN</span>
            </div>
            <div style="margin-top: 15px; font-size: 0.8rem; color: #64748b; line-height: 1.5; border-left: 3px solid #f59e0b; padding-left: 15px; font-weight: 600;">
                <i class="fas fa-lock" style="color: #f59e0b; margin-right: 5px;"></i> Locked settings. The fine will be automatically calculated per minute based on the amount configured above.
            </div>
        </div>
        {% endif %}

        <div style="display: flex; gap: 15px; margin-top: 50px;">
            <button type="submit" class="btn" style="flex: 2; height: 60px; border-radius: 15px; justify-content: center; font-weight: 950; font-size: 1rem; letter-spacing: 0.5px;
                      {% if fine.reason == 'Absent' %}background: #ef4444;{% elif fine.reason == 'Late' %}background: #f59e0b;{% endif %}">
                SAVE FINE RULE
            </button>
            <a href="{% url 'fine_logic_list' %}" class="btn" style="flex: 1; height: 60px; background: #f1f5f9; color: #475569; border-radius: 15px; justify-content: center; text-decoration: none; font-weight: 800; font-size: 0.9rem;">CANCEL</a>
        </div>
    </form>
</div>
{% endblock %}