{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}Send Notification | Admin Portal{% endblock %}
{% block nav_notifications %}active{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h2><i class="fa-solid fa-paper-plane me-2"></i>Send Notification</h2>
        <p class="text-muted mb-0">Compose and send a message to students or staff</p>
    </div>
    <a href="{% url 'portal:notification_list' %}" class="btn btn-outline-secondary">
        <i class="fa-solid fa-arrow-left me-1"></i> Back to Log
    </a>
</div>

<div class="row justify-content-center">
    <div class="col-lg-7">
        <div class="portal-card">
            <div class="portal-card-body">
                <form method="post" id="notifForm">
                    {% csrf_token %}
                    {% crispy form %}
                </form>
            </div>
        </div>

        <div class="portal-card mt-3">
            <div class="portal-card-body">
                <p class="text-muted small mb-0">
                    <i class="fa-solid fa-circle-info me-1" style="color:var(--color-secondary);"></i>
                    <strong>Audience:</strong>
                    Choosing <em>All active students</em> sends to everyone currently enrolled.
                    Notifications appear in the bell icon in each user's portal header.
                </p>
            </div>
        </div>
    </div>
</div>

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', () => {
    const audienceField = document.querySelector('[name="audience"]');
    const programCol = document.querySelector('[id$="program"]')?.closest('.col-md-6');
    const studentCol = document.querySelector('[id$="student_enrollment"]')?.closest('.col-md-6');

    function updateVisibility() {
        const val = audienceField?.value;
        if (programCol) programCol.style.display = val === 'program' ? '' : 'none';
        if (studentCol) studentCol.style.display = val === 'student' ? '' : 'none';
    }

    audienceField?.addEventListener('change', updateVisibility);
    updateVisibility();
});
</script>
{% endblock %}
{% endblock %}