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

{% block title %}Fee Models | STD Lab{% endblock %}

{% block page_title %}Institutional Fee Models{% endblock %}

{% block content %}
<style>
    /* Professional Sharp Design */
    .card { border-radius: 0; border: 1px solid #e2e8f0; box-shadow: none; margin-bottom: 20px; background: #fff; }
    .btn { border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
    
    .apply-badge { background: #0f172a; color: #fff; padding: 5px 12px; font-size: 0.65rem; font-weight: 800; cursor: pointer; text-decoration: none; display: inline-block; }
    .apply-badge:hover { background: #334155; }

    /* Modal Sharp */
    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); }
    .modal-content { background: #fff; width: 100%; max-width: 400px; padding: 25px; border: 1px solid #000; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
</style>

<div style="display: flex; gap: 15px; justify-content: flex-end; margin-bottom: 24px;">
    <a href="{% url 'fine_logic_list' %}" class="btn" style="background: #f1f5f9; color: #64748b;">
        <i class="fas fa-balance-scale"></i> FINE RULES
    </a>
    <a href="{% url 'fee_type_add' %}" class="btn" style="background: #0f172a; color: #fff;">
        <i class="fas fa-plus"></i> NEW FEE MODEL
    </a>
</div>

<div class="card">
    <table style="width: 100%; border-collapse: collapse;">
        <thead>
            <tr style="background: #f8fafc; text-align: left; border-bottom: 1px solid #e2e8f0;">
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">Fee Model Name</th>
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">Amount</th>
                <th style="padding: 15px; font-size: 0.75rem; color: #94a3b8; text-transform: uppercase;">Created At</th>
                <th style="padding: 15px; text-align: right;">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for ft in fee_types %}
            <tr style="border-bottom: 1px solid #f1f5f9;">
                <td style="padding: 15px; font-weight: 800; color: #0f172a;">{{ ft.name }}</td>
                <td style="padding: 15px;">
                    <span style="font-weight: 900; color: #10b981; font-size: 1rem;">৳{{ ft.default_amount }}</span>
                </td>
                <td style="padding: 15px; font-size: 0.8rem; color: #64748b;">{{ ft.created_at|date:"d M, Y" }}</td>
                <td style="padding: 15px; text-align: right;">
                    <div style="display: flex; gap: 10px; justify-content: flex-end; align-items: center;">
                        <button class="apply-badge" onclick="openApplyModal('{{ ft.pk }}', '{{ ft.name }}')">APPLY TO CLASSES</button>
                        <a href="{% url 'fee_type_edit' ft.pk %}" style="color: #64748b;"><i class="fas fa-edit"></i></a>
                        <a href="{% url 'fee_type_delete' ft.pk %}" onclick="return confirm('Delete this model? Unpaid student fees will be removed.')" style="color: #ef4444;"><i class="fas fa-trash"></i></a>
                    </div>
                </td>
            </tr>
            {% empty %}
            <tr><td colspan="4" style="padding: 60px; text-align: center; color: #cbd5e1; font-weight: 800;">NO FEE MODELS DEFINED</td></tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- APPLY MODAL -->
<div id="applyModal" class="modal-overlay">
    <div class="modal-content">
        <h3 id="modalFeeName" style="font-weight: 900; margin-bottom: 10px; text-transform: uppercase; font-size: 1rem;">APPLY FEE</h3>
        <p style="font-size: 0.75rem; color: #64748b; margin-bottom: 20px;">Select target classes to automatically assign this fee to all students.</p>
        
        <form method="post" id="applyForm">
            {% csrf_token %}
            <div style="max-height: 250px; overflow-y: auto; border: 1px solid #e2e8f0; padding: 10px; margin-bottom: 25px;">
                {% for cls in classes %}
                <label style="display: flex; align-items: center; gap: 10px; padding: 8px; border-bottom: 1px solid #f1f5f9; cursor: pointer; font-size: 0.85rem; font-weight: 700;">
                    <input type="checkbox" name="class_ids" value="{{ cls.id }}" style="width: 18px; height: 18px; accent-color: #0f172a;">
                    {{ cls.name }} <span style="font-weight: 400; color: #94a3b8; font-size: 0.7rem;">({{ cls.students.count }} Students)</span>
                </label>
                {% endfor %}
            </div>
            
            <div style="display: flex; gap: 10px;">
                <button type="submit" class="btn" style="flex: 2; background: #10b981; color: #fff; border: none; padding: 12px;">ASSIGN NOW</button>
                <button type="button" class="btn" style="flex: 1; background: #f1f5f9; color: #64748b; border: none;" onclick="closeApplyModal()">CANCEL</button>
            </div>
        </form>
    </div>
</div>

<script>
    function openApplyModal(id, name) {
        document.getElementById('modalFeeName').innerText = "APPLY: " + name;
        document.getElementById('applyForm').action = "/school/fees/types/apply/" + id + "/";
        document.getElementById('applyModal').style.display = 'flex';
    }
    function closeApplyModal() { document.getElementById('applyModal').style.display = 'none'; }
</script>

{% endblock %}