{% extends 'superuser/base_super_user.html' %}

{% block title %}New Broadcast | SaaS Command{% endblock %}

{% block page_title %}Compose Broadcast{% endblock %}
{% block page_subtitle %}Send a mandatory popup message to partner institution dashboards.{% endblock %}

{% block content %}
<div style="background: #fff; border: 2px solid #1e293b; box-shadow: 6px 6px 0px #1e293b; border-radius: 0; padding: 40px; max-width: 800px; margin: 0 auto;">
    <form method="post">
        {% csrf_token %}
        
        <div style="margin-bottom: 30px;">
            <label style="display: block; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 10px; color: #1e293b;">Target Audience</label>
            <label style="display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 15px;">
                <input type="checkbox" name="is_bulk" id="isBulk" style="width: 20px; height: 20px; accent-color: #1e293b;" onchange="document.getElementById('specificSchools').style.display = this.checked ? 'none' : 'block'">
                <span style="font-weight: 800; font-size: 0.9rem;">Broadcast to ALL Institutions</span>
            </label>
            
            <div id="specificSchools" style="border: 2px solid #f1f5f9; padding: 15px; border-radius: 0; background: #f8fafc; max-height: 200px; overflow-y: auto;">
                <div style="font-size: 0.75rem; font-weight: 800; color: #64748b; margin-bottom: 10px; text-transform: uppercase;">Select specific institutions:</div>
                <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
                    {% for school in schools %}
                    <label style="display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 700;">
                        <input type="checkbox" name="schools" value="{{ school.id }}" style="accent-color: #3b82f6;">
                        {{ school.name }} ({{ school.code }})
                    </label>
                    {% empty %}
                    <div style="font-size: 0.8rem; color: #ef4444;">No institutions available.</div>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div style="margin-bottom: 30px;">
            <label style="display: block; font-weight: 900; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 10px; color: #1e293b;">Message Content (Supports Bangla & English)</label>
            <textarea name="message" rows="8" required placeholder="Enter announcement here..." style="width: 100%; border: 2px solid #1e293b; padding: 15px; font-size: 1rem; font-family: 'Anek Bangla', 'Montserrat', sans-serif; resize: vertical; border-radius: 0;"></textarea>
            <div style="font-size: 0.75rem; color: #64748b; font-weight: 700; margin-top: 8px;">
                <i class="fas fa-info-circle"></i> Text will be displayed exactly as typed. Best viewed in paragraphs.
            </div>
        </div>

        <div style="display: flex; gap: 15px; border-top: 2px solid #f1f5f9; padding-top: 25px;">
            <button type="submit" style="padding: 15px 30px; font-size: 0.9rem; font-weight: 900; background: #1e293b; color: #fff; border: none; cursor: pointer; flex: 1; text-transform: uppercase; letter-spacing: 1px;">
                <i class="fas fa-paper-plane"></i> Dispatch Broadcast
            </button>
            <a href="{% url 'super_announcement_list' %}" style="padding: 15px 30px; font-size: 0.9rem; font-weight: 900; border: 2px solid #1e293b; color: #1e293b; text-decoration: none; display: flex; align-items: center; justify-content: center; text-transform: uppercase;">
                Cancel
            </a>
        </div>
    </form>
</div>
{% endblock %}