{% extends 'shared/base.html' %} {% load custom_filters %} {% load static %}
{% block content %}
<div class="container mt-5">
    <h1>Criar Notificação</h1>
    <form method="post" action="{% url 'create_notification' %}">
        {% csrf_token %}
        {{ form.message }}
        {{ form.notification_type }}
        <div class="form-check">
            {{ form.send_to_all }}
            <label class="form-check-label" for="sendToAll">Enviar para todos</label>
        </div>
        <div class="form-check">
            {{ form.choose_user }}
            <label class="form-check-label" for="chooseUser">Escolher Usuário</label>
        </div>
        <div id="recipientSelectContainer" style="display: none;">
            {{ form.recipient }}
        </div>
        <button type="submit" class="btn btn-primary">Enviar</button>
    </form>    
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sendToAllCheckbox = document.getElementById('sendToAll');
        const chooseUserCheckbox = document.getElementById('chooseUser');
        const recipientSelectContainer = document.getElementById('recipientSelectContainer');
    
        sendToAllCheckbox.addEventListener('change', function () {
            if (this.checked) {
                chooseUserCheckbox.checked = false;
                recipientSelectContainer.style.display = 'none';
            }
        });
    
        chooseUserCheckbox.addEventListener('change', function () {
            if (this.checked) {
                sendToAllCheckbox.checked = false;
                recipientSelectContainer.style.display = 'block';
            } else {
                recipientSelectContainer.style.display = 'none';
            }
        });
    });
</script>
{% endblock %}