{% extends "base.html" %}

{% block title %}{{ 'send_email'|t }} - {{ event.name }}{% endblock %}

{% block content %}
<div class="communications-send-page">
    <div class="page-header">
        <h1>{{ 'send_custom_email'|t }}</h1>
        <a href="{{ url_for('event_communications', event_id=event.id) }}" class="btn btn-outline"><i data-lucide="arrow-left"></i> {{ 'back'|t }}</a>
    </div>

    <div class="section-box">
        <form method="POST" class="send-email-form">
            <div class="form-group">
                <label for="recipient_type">{{ 'recipient_type'|t }}</label>
                <select id="recipient_type" name="recipient_type" required onchange="toggleRecipientSelection()">
                    <option value="">{{ 'select_recipient_type'|t }}</option>
                    <option value="all_attendees">{{ 'all_attendees'|t }}</option>
                    <option value="all_staff">{{ 'all_staff'|t }}</option>
                    <option value="attendee">{{ 'specific_attendees'|t }}</option>
                    <option value="staff">{{ 'specific_staff'|t }}</option>
                </select>
            </div>

            <div id="recipient-selection" class="form-group d-none">
                <label>{{ 'select_recipients'|t }}</label>
                <div class="recipient-list">
                    <div id="attendee-list" class="d-none">
                        {% for attendee in attendees %}
                            <label class="checkbox-label">
                                <input type="checkbox" name="recipient_ids" value="{{ attendee.id }}"> <span class="first-name">{{ attendee.first_name }}</span> <span class="last-name">{{ attendee.last_name }}</span> ({{ attendee.email }})
                            </label>
                        {% endfor %}
                    </div>
                    <div id="staff-list" class="d-none">
                        {% for s in staff_members %}
                            <label class="checkbox-label">
                                <input type="checkbox" name="recipient_ids" value="{{ s.id }}"> <span class="first-name">{{ s.first_name }}</span> <span class="last-name">{{ s.last_name }}</span> ({{ s.email }})
                            </label>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="subject">{{ 'subject'|t }}</label>
                <input type="text" id="subject" name="subject" required>
            </div>

            <div class="form-group">
                <label for="body">{{ 'message'|t }}</label>
                <textarea id="body" name="body" rows="10" required></textarea>
            </div>

            <div class="form-actions">
                <button type="submit" class="btn btn-primary"><i data-lucide="send"></i> {{ 'send_email'|t }}</button>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});

function toggleRecipientSelection() {
    const recipientType = document.getElementById('recipient_type').value;
    const attendeeList = document.getElementById('attendee-list');
    const staffList = document.getElementById('staff-list');
    const recipientSelection = document.getElementById('recipient-selection');

    // Hide both first
    attendeeList.classList.add('d-none');
    staffList.classList.add('d-none');

    if (recipientType === 'attendee') {
        recipientSelection.classList.remove('d-none');
        attendeeList.classList.remove('d-none');
    } else if (recipientType === 'staff') {
        recipientSelection.classList.remove('d-none');
        staffList.classList.remove('d-none');
    } else {
        recipientSelection.classList.add('d-none');
    }
}
</script>
{% endblock %}