{% load i18n %}
{{ form.media }}
<div class="row">

<div class="container-fluid">

        <div class="col-12">
             {% if messages %}
                <ul class="messages">
                    {% for message in messages %}
                        <li{% if message.tags %} class="{{ message.tags }}"{% endif %}>
                            {{ message }}
                        </li>
                    {% endfor %}
                </ul>
             {% endif %}
            <div class="card">

                <div class="card-body">
                    <form hx-boost="true" method="post" id="email-compose-form" action="{% url 'compose_application_email' job.slug %}"
                        hx-include="#application-form"
                        hx-target="#messageContent"
                        hx-select="#messageContent"
                        hx-push-url="false"
                        hx-swap="outerHTML"
                        hx-on::after-request="new bootstrap.Modal('#emailModal')).hide()">
                        {% csrf_token %}
                         <!-- Recipients Field -->
                        <!-- Recipients Field -->
                       <div class="mb-3">
                            <label class="form-label fw-bold">
                                {% trans "To" %}
                            </label>
                            <div class="border rounded p-3 bg-light" style="max-height: 200px; overflow-y: auto;">
                                
                                {# --- 1. DATA LAYER: Render Hidden Inputs for ALL recipients --- #}
                                {# This ensures the backend receives every selected user, not just the visible one #}
                                {% for choice in form.to %}
                                    <input type="hidden" name="{{ form.to.name }}" value="{{ choice.data.value }}">
                                {% endfor %}

                                {# --- 2. VISUAL LAYER: Show only the first one --- #}
                                {# We make it disabled so the user knows they can't deselect it here #}
                                {% for choice in form.to|slice:":1" %}
                                    <div class="form-check mb-2">
                                        <input class="form-check-input" type="checkbox" checked disabled>
                                        <label class="form-check-label">
                                            {{ choice.choice_label }}
                                        </label>
                                    </div>
                                {% endfor %}

                                {# --- 3. SUMMARY: Show count of hidden recipients --- #}
                                {% if form.to|length > 1 %}
                                    <div class="text-muted small mt-2">
                                        <i class="fas fa-info-circle me-1"></i>
                                        {# Use simple math to show remaining count #}
                                        {% with remaining=form.to|length|add:"-1" %}
                                            {% blocktrans count total=remaining %}
                                                And {{ total }} other recipient
                                            {% plural %}
                                                And {{ total }} other recipients
                                            {% endblocktrans %}
                                        {% endwith %}
                                    </div>
                                {% endif %}
                            </div>

                            {% if form.to.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.to.errors %}
                                        <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Subject Field -->
                        <div class="mb-3">
                            <label for="{{ form.subject.id_for_label }}" class="form-label fw-bold">
                                {% trans "Subject" %}
                            </label>
                            {{ form.subject }}
                            {% if form.subject.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.subject.errors %}
                                        <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>



                        <!-- Message Field -->
                        <div class="mb-3">
                            <label for="{{ form.message.id_for_label }}" class="form-label fw-bold">
                                {% trans "Message" %}
                            </label>
                            {{ form.message }}
                            {% if form.message.errors %}
                                <div class="text-danger small mt-1">
                                    {% for error in form.message.errors %}
                                        <span>{{ error }}</span>
                                    {% endfor %}
                                </div>
                            {% endif %}
                        </div>

                        <!-- Form Actions -->
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="text-muted small">
                                <i class="fas fa-info-circle me-1"></i>
                                {% trans "Email will be sent to all selected recipients" %}
                            </div>
                            <div>
                                <button type="button"
                                        class="btn btn-secondary me-2"
                                        data-bs-dismiss="modal">
                                    <i class="fas fa-times me-1"></i>
                                    {% trans "Cancel" %}
                                </button>
                                <button type="submit"
                                        class="btn btn-primary"
                                        id="send-email-btn">
                                    <i class="fas fa-paper-plane me-1"></i>
                                    {% trans "Send Email" %}
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Loading Overlay -->
    <div id="email-loading-overlay" class="d-none">
        <div class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
            <div class="text-center">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">{% trans "Loading..." %}</span>
                </div>
                <div class="mt-2">
                    {% trans "Sending email..." %}
                </div>
            </div>
        </div>
    </div>

    <!-- Success/Error Messages Container -->
    <div id="email-messages-container"></div>
</div>

<style>
     {{ form.media.css }}
.card {
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.card-header {
    border-radius: 8px 8px 0 0 !important;
    border-bottom: none;
}

.form-control:focus {
    border-color: #00636e;
    box-shadow: 0 0 0 0.2rem rgba(0,99,110,0.25);
}

.btn-primary {
    background-color: #00636e;
    border-color: #00636e;
}

.btn-primary:hover {
    background-color: #004a53;
    border-color: #004a53;
}

.form-check-input:checked {
    background-color: #00636e;
    border-color: #00636e;
}

.border {
    border-color: #dee2e6 !important;
}

.bg-light {
    background-color: #f8f9fa !important;
}

.text-danger {
    color: #dc3545 !important;
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

</style>


<script>

document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('email-compose-form1');
    const sendBtn = document.getElementById('send-email-btn1');
    const loadingOverlay = document.getElementById('email-loading-overlay');
    const messagesContainer = document.getElementById('email-messages-container');

    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();

            // Show loading state
            if (sendBtn) {
                sendBtn.disabled = true;
                sendBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> {% trans "Sending..." %}';
            }

            if (loadingOverlay) {
                loadingOverlay.classList.remove('d-none');
            }

            // Clear previous messages
            if (messagesContainer) {
                messagesContainer.innerHTML = '';
            }

            // Submit form via fetch
            const formData = new FormData(form);

            fetch(form.action || window.location.href, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'HX-Request': 'true'
                }
            })
            .then(response => response.json())
            .then(data => {
                // Hide loading state
                if (sendBtn) {
                    sendBtn.disabled = false;
                    sendBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> {% trans "Send Email" %}';
                }

                if (loadingOverlay) {
                    loadingOverlay.classList.add('d-none');
                }

                // Show result message
                if (data.success) {
                    showMessage(data.message || 'Email sent successfully!', 'success');

                    // Close modal after a short delay
                    setTimeout(() => {
                        const modal = form.closest('.modal');
                        if (modal) {
                            const bootstrapModal = bootstrap.Modal.getInstance(modal);
                            if (bootstrapModal) {
                                bootstrapModal.hide();
                            }
                        }
                    }, 1500);
                } else {
                    showMessage(data.error || 'Failed to send email. Please try again.', 'danger');
                }
            })
            .catch(error => {
                console.error('Error:', error);

                // Hide loading state
                if (sendBtn) {
                    sendBtn.disabled = false;
                    sendBtn.innerHTML = '<i class="fas fa-paper-plane me-1"></i> {% trans "Send Email" %}';
                }

                if (loadingOverlay) {
                    loadingOverlay.classList.add('d-none');
                }

                showMessage('An error occurred while sending the email. Please try again.', 'danger');
            });
        });
    }

    function showMessage(message, type) {
        if (!messagesContainer) return;

        const alertClass = type === 'success' ? 'alert-success' : 'alert-danger';
        const icon = type === 'success' ? 'fa-check-circle' : 'fa-exclamation-triangle';

        const messageHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <i class="fas ${icon} me-2"></i>
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;

        messagesContainer.innerHTML = messageHtml;

        // Auto-hide success messages after 5 seconds
        if (type === 'success') {
            setTimeout(() => {
                const alert = messagesContainer.querySelector('.alert');
                if (alert) {
                    const bsAlert = new bootstrap.Alert(alert);
                    bsAlert.close();
                }
            }, 5000);
        }
    }

    // Form validation
    function validateForm() {
        let isValid = true;
        const subject = form.querySelector('#{{ form.subject.id_for_label }}');
        const message = form.querySelector('#{{ form.message.id_for_label }}');
        const recipients = form.querySelectorAll('input[name="{{ form.recipients.name }}"]:checked');

        // Clear previous validation states
        form.querySelectorAll('.is-invalid').forEach(field => {
            field.classList.remove('is-invalid');
        });
        form.querySelectorAll('.invalid-feedback').forEach(feedback => {
            feedback.remove();
        });

        // Validate subject
        if (!subject || !subject.value.trim()) {
            showFieldError(subject, 'Subject is required');
            isValid = false;
        }

        // Validate message
        if (!message || !message.value.trim()) {
            showFieldError(message, 'Message is required');
            isValid = false;
        }

        // Validate recipients
        if (recipients.length === 0) {
            const recipientsContainer = form.querySelector('.border.rounded.p-3.bg-light');
            if (recipientsContainer) {
                recipientsContainer.classList.add('border-danger');
                showFieldError(recipientsContainer, 'Please select at least one recipient');
            }
            isValid = false;
        }

        return isValid;
    }

    function showFieldError(field, message) {
        if (!field) return;

        field.classList.add('is-invalid');

        const feedback = document.createElement('div');
        feedback.className = 'invalid-feedback';
        feedback.textContent = message;

        if (field.classList.contains('border')) {
            // For container elements (like recipients)
            field.parentNode.appendChild(feedback);
        } else {
            // For form fields
            field.parentNode.appendChild(feedback);
        }
    }

    // Character counter for message field
    function setupCharacterCounter() {
        const messageField = form.querySelector('#{{ form.message.id_for_label }}');
        if (!messageField) return;

        const counter = document.createElement('div');
        counter.className = 'text-muted small mt-1';
        counter.id = 'message-counter';

        messageField.parentNode.appendChild(counter);

        function updateCounter() {
            const length = messageField.value.length;
            const maxLength = 5000; // Adjust as needed
            counter.textContent = `${length} / ${maxLength} characters`;

            if (length > maxLength * 0.9) {
                counter.classList.add('text-warning');
                counter.classList.remove('text-muted');
            } else {
                counter.classList.remove('text-warning');
                counter.classList.add('text-muted');
            }
        }

        messageField.addEventListener('input', updateCounter);
        updateCounter(); // Initial count
    }

    // Auto-save functionality
    let autoSaveTimer;
    function setupAutoSave() {
        const subject = form.querySelector('#{{ form.subject.id_for_label }}');
        const message = form.querySelector('#{{ form.message.id_for_label }}');

        if (!subject || !message) return;

        function saveDraft() {
            const draftData = {
                subject: subject.value,
                message: message.value,
                recipients: Array.from(form.querySelectorAll('input[name="{{ form.recipients.name }}"]:checked')).map(cb => cb.value),
                include_application_info: form.querySelector('#{{ form.include_application_info.id_for_label }}').checked,
                include_meeting_details: form.querySelector('#{{ form.include_meeting_details.id_for_label }}').checked
            };

            localStorage.setItem('email_draft_' + window.location.pathname, JSON.stringify(draftData));
        }

        function autoSave() {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(saveDraft, 2000); // Save after 2 seconds of inactivity
        }

        [subject, message].forEach(field => {
            field.addEventListener('input', autoSave);
        });

        form.addEventListener('change', autoSave);
    }

    function loadDraft() {
        const draftData = localStorage.getItem('email_draft_' + window.location.pathname);
        if (!draftData) return;

        try {
            const draft = JSON.parse(draftData);

            const subject = form.querySelector('#{{ form.subject.id_for_label }}');
            const message = form.querySelector('#{{ form.message.id_for_label }}');

            if (subject && draft.subject) subject.value = draft.subject;
            if (message && draft.message) message.value = draft.message;

            // Restore recipients
            if (draft.recipients) {
                form.querySelectorAll('input[name="{{ form.recipients.name }}"]').forEach(cb => {
                    cb.checked = draft.recipients.includes(cb.value);
                });
            }

            // Restore checkboxes
            if (draft.include_application_info) {
                form.querySelector('#{{ form.include_application_info.id_for_label }}').checked = draft.include_application_info;
            }
            if (draft.include_meeting_details) {
                form.querySelector('#{{ form.include_meeting_details.id_for_label }}').checked = draft.include_meeting_details;
            }

            // Show draft restored notification
            showMessage('Draft restored from local storage', 'success');
        } catch (e) {
            console.error('Error loading draft:', e);
        }
    }

    function clearDraft() {
        localStorage.removeItem('email_draft_' + window.location.pathname);
    }

    // Initialize form enhancements
    setupCharacterCounter();
    setupAutoSave();

    // Load draft on page load
    setTimeout(loadDraft, 100);

    // Clear draft on successful submission
    const originalSubmitHandler = form.onsubmit;
    form.addEventListener('submit', function(e) {
        const isValid = validateForm();
        if (!isValid) {
            e.preventDefault();
            e.stopPropagation();
            return false;
        }

        // Clear draft on successful submission
        setTimeout(clearDraft, 2000);
    });

    // Add keyboard shortcuts
    document.addEventListener('keydown', function(e) {
        // Ctrl/Cmd + Enter to submit
        if ((e.ctrlKey || e.metaKey) && e.key === 'Enter') {
            const activeElement = document.activeElement;
            if (activeElement && (activeElement.tagName === 'TEXTAREA' || activeElement.tagName === 'INPUT')) {
                form.dispatchEvent(new Event('submit'));
            }
        }

        // Escape to cancel/close modal
        if (e.key === 'Escape') {
            const modal = form.closest('.modal');
            if (modal) {
                const bootstrapModal = bootstrap.Modal.getInstance(modal);
                if (bootstrapModal) {
                    bootstrapModal.hide();
                }
            }
        }
    });

    console.log('Email compose form initialized');
});
</script>