{% extends "base.html" %}
{% block title %}Send Announcement{% endblock %}

{% block content %}
<div class="page-container">

    <div class="page-header mb-4">
        <h4>Create Announcement</h4>
    </div>

    <div class="card shadow-sm">
        <div class="card-body">

            <form method="POST">
                {% csrf_token %}

                <div class="mb-3">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control" required>
                </div>

                <div class="mb-3">
                    <label>Message</label>
                    <textarea name="message" class="form-control" required></textarea>
                </div>

                <div class="mb-3">
                    <label>Audience</label>
                    <select name="audience_type" class="form-control" id="audienceSelect">
                        <option value="all">All Tenants</option>
                        <option value="filtered">By Building</option>
                    </select>
                </div>

                <div class="mb-3" id="buildingBox" style="display:none;">
                    <label>Building</label>
                    <select name="building" class="form-control">
                        <option value="">-- Select --</option>
                        {% for b in buildings %}
                            <option value="{{ b.id }}">{{ b.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-3">
                    <label>Send Method</label>
                    <select name="send_method" class="form-control">
                        <option value="in_app">In-App</option>
                        <option value="sms">SMS</option>
                        <option value="both">Both</option>
                    </select>
                </div>

                <div class="form-check mb-3">
                    <input type="checkbox" name="is_automated" id="autoCheck">
                    <label>Automated</label>
                </div>

                <div id="automationBox" style="display:none;">
                    <div class="mb-3">
                        <label>Frequency</label>
                        <select name="frequency" class="form-control">
                            <option value="once">Once</option>
                            <option value="daily">Daily</option>
                            <option value="weekly">Weekly</option>
                            <option value="monthly">Monthly</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label>Schedule</label>
                        <input type="datetime-local" name="scheduled_time" class="form-control">
                    </div>
                </div>

                <button class="btn btn-primary">Send</button>

            </form>

        </div>
    </div>

</div>

<script>
document.getElementById("audienceSelect").addEventListener("change", function () {
    document.getElementById("buildingBox").style.display =
        this.value === "filtered" ? "block" : "none";
});

document.getElementById("autoCheck").addEventListener("change", function () {
    document.getElementById("automationBox").style.display =
        this.checked ? "block" : "none";
});
</script>

{% endblock %}