{% extends "base.html" %}

{% block title %}Send Campaign{% endblock %}

{% block content %}
<div class="container" style="max-width: 700px; margin: auto;">
    <h2 class="mb-4 text-primary fw-bold">📤 Send Campaign Message</h2>

    {% with messages = get_flashed_messages(with_categories=true) %}
      {% if messages %}
        {% for category, message in messages %}
          <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
            {{ message }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <form method="POST" novalidate>
        <div class="mb-3">
            <label for="message" class="form-label fw-semibold">Message:</label>
            <textarea id="message" name="message" class="form-control" rows="4" placeholder="Write your campaign message here..." required></textarea>
        </div>

        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" id="send_to_all" name="send_to_all" value="1" onclick="toggleCustomerSelection(this)">
            <label class="form-check-label" for="send_to_all">Send to all customers</label>
        </div>

        <fieldset class="mb-3" id="customerSelection">
            <legend class="form-label fw-semibold">Select Specific Customers:</legend>
            {% for customer in customers %}
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="customer_ids" value="{{ customer.id }}" id="cust{{ customer.id }}">
                    <label class="form-check-label" for="cust{{ customer.id }}">
                        {{ customer.first_name }} {{ customer.last_name }}
                    </label>
                </div>
            {% endfor %}
        </fieldset>

        <button type="submit" class="btn btn-primary w-100">Send Campaign</button>
    </form>
</div>

<script>
    function toggleCustomerSelection(checkbox) {
        const customerSection = document.getElementById('customerSelection');
        if (checkbox.checked) {
            customerSection.style.pointerEvents = 'none';
            customerSection.style.opacity = 0.5;
            [...customerSection.querySelectorAll('input[type=checkbox]')].forEach(cb => cb.checked = false);
        } else {
            customerSection.style.pointerEvents = 'auto';
            customerSection.style.opacity = 1;
        }
    }
</script>
{% endblock %}