HH/templates/components/send_to_modal.html

{% load i18n %}
{% comment %}
Unified Send Modal - Works for Complaints, Inquiries, and Observations
Usage: Include this in any detail page and call showSendModal() via JavaScript

Required context variables:
- item_id: The ID of the complaint/inquiry/observation
- item_type: 'complaint', 'inquiry', or 'observation'
- departments: QuerySet of available departments
- users: QuerySet of available users
{% endcomment %}

<div id="sendToModal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center p-4 backdrop-blur-sm">
    <div class="bg-white rounded-2xl shadow-2xl w-full max-w-2xl animate-in max-h-[90vh] overflow-y-auto">
        <div class="p-6 border-b border-slate-200">
            <div class="flex items-center justify-between">
                <h3 class="text-xl font-bold text-navy flex items-center gap-2">
                    <i data-lucide="send" class="w-5 h-5"></i>
                    {% trans "Send To" %}
                </h3>
                <button type="button" onclick="closeSendModal()" class="text-slate-400 hover:text-slate-600 transition">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>
            <p class="text-sm text-slate mt-2">{% trans "Select a department to send this item to for response." %}</p>
        </div>
        
        <form id="sendToForm" onsubmit="handleSendToSubmit(event)">
            {% csrf_token %}
            <input type="hidden" id="sendItemId" name="item_id" value="">
            <input type="hidden" id="sendItemType" name="item_type" value="">
            <input type="hidden" name="recipient_type" value="department">
            
            <div class="p-6">
                <!-- Department Selection -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Department" %} <span class="text-red-500">*</span></label>
                    <select name="department_id" id="departmentSelect" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 text-sm">
                        <option value="">{% trans "Select Department" %}</option>
                        {% for dept in departments %}
                        <option value="{{ dept.id }}">{{ dept.get_localized_name }}</option>
                        {% endfor %}
                    </select>
                    <p class="text-xs text-slate-400 mt-1">{% trans "Sends directly to the department's champion and manager." %}</p>
                </div>

                <!-- Notes -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Note (Optional)" %}</label>
                    <textarea name="note" id="sendNote" rows="3"
                        class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:outline-none focus:border-navy focus:ring-2 focus:ring-navy/20 resize-none text-sm"
                        placeholder="{% trans 'Add context or instructions...' %}"></textarea>
                </div>

                <!-- Attachments -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Attachments (Optional)" %}</label>
                    <input type="file" name="px_attachments" multiple
                        class="block w-full text-sm text-slate file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-sm file:font-semibold file:bg-slate-100 file:text-navy hover:file:bg-slate-200 file:transition cursor-pointer border-2 border-slate-200 rounded-xl">
                </div>

                {% if email_subject %}
                <!-- Email Preview (editable) -->
                <div class="mb-4 border-t border-slate-100 pt-4">
                    <p class="text-xs font-bold text-slate uppercase mb-3">{% trans "Email Preview" %} <span class="text-slate-400 font-normal normal-case">({% trans "editable" %})</span></p>
                    <div class="mb-3">
                        <label class="block text-xs font-semibold text-slate mb-1">{% trans "Subject" %}</label>
                        <input type="text" name="email_subject" value="{{ email_subject }}"
                            class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none">
                    </div>
                    <div>
                        <label class="block text-xs font-semibold text-slate mb-1">{% trans "Body" %}</label>
                        <textarea name="email_body" rows="10"
                            class="w-full px-3 py-2 border border-slate-200 rounded-lg text-sm focus:ring-2 focus:ring-navy/20 focus:border-navy outline-none font-mono whitespace-pre">{{ email_body }}</textarea>
                    </div>
                </div>
                {% endif %}
                
                <!-- Error Message -->
                <div id="sendError" class="hidden text-sm text-red-600 bg-red-50 border border-red-200 p-3 rounded-lg"></div>
                <div id="sendSuccess" class="hidden text-sm text-green-600 bg-green-50 border border-green-200 p-3 rounded-lg"></div>
            </div>
            
            <div class="p-6 border-t border-slate-200 flex gap-3">
                <button type="submit" id="sendSubmitBtn" class="px-4 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-navy/90 transition text-sm inline-flex items-center justify-center gap-2 flex-1 justify-center">
                    <i data-lucide="send" class="w-4 h-4"></i>
                    {% trans "Send" %}
                </button>
                <button type="button" onclick="closeSendModal()" class="px-4 py-2.5 bg-white border-2 border-slate-200 rounded-xl font-semibold text-slate-600 hover:bg-slate-50 transition text-sm">
                    {% trans "Cancel" %}
                </button>
            </div>
        </form>
    </div>
</div>

<script>
function showSendModal(itemId, itemType, preselectDeptId) {
    document.getElementById('sendToForm').reset();
    document.getElementById('sendItemId').value = itemId;
    document.getElementById('sendItemType').value = itemType;
    document.getElementById('sendToModal').classList.remove('hidden');
    document.getElementById('sendError').classList.add('hidden');
    document.getElementById('sendSuccess').classList.add('hidden');

    if (preselectDeptId) {
        var deptSelect = document.getElementById('departmentSelect');
        if (deptSelect) {
            deptSelect.value = preselectDeptId;
        }
    }
}

function closeSendModal() {
    document.getElementById('sendToModal').classList.add('hidden');
}

function loadDepartmentContacts(deptId) {
    // Deprecated: contact-person picker removed. Sends to champion + manager automatically.
}

function handleSendToSubmit(event) {
    event.preventDefault();
    const form = event.target;
    const formData = new FormData(form);
    const itemType = document.getElementById('sendItemType').value;
    const errorDiv = document.getElementById('sendError');
    const successDiv = document.getElementById('sendSuccess');
    const submitBtn = document.getElementById('sendSubmitBtn');

    if (!formData.get('department_id')) {
        errorDiv.textContent = '{% trans "Please select a department." %}';
        errorDiv.classList.remove('hidden');
        return;
    }

    errorDiv.classList.add('hidden');
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<span class="inline-block w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>{% trans "Sending..." %}';
    
    let endpoint = '';
    if (itemType === 'complaint') {
        endpoint = '/complaints/' + formData.get('item_id') + '/send-to/';
    } else if (itemType === 'inquiry') {
        endpoint = '/inquiries/' + formData.get('item_id') + '/send-to/';
    } else if (itemType === 'observation') {
        endpoint = '/observations/' + formData.get('item_id') + '/send-to/';
    } else if (itemType === 'feedback') {
        endpoint = '/suggestions/' + formData.get('item_id') + '/send-to/';
    } else if (itemType === 'appreciation') {
        endpoint = '/appreciation/detail/' + formData.get('item_id') + '/send-to/';
    }
    
    fetch(endpoint, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
        }
    })
    .then(async response => {
        let data = null;
        try { data = await response.json(); } catch (e) { /* response wasn't JSON */ }
        if (data && data.success === true) {
            return data;
        }
        throw new Error(
            (data && data.error)
            || (response.ok ? '{% trans "Failed to send." %}' : '{% trans "Server error" %} (' + response.status + ')')
        );
    })
    .then(data => {
        successDiv.textContent = data.message || '{% trans "Sent successfully!" %}';
        successDiv.classList.remove('hidden');
        setTimeout(() => {
            closeSendModal();
            window.location.reload();
        }, 1500);
    })
    .catch(error => {
        errorDiv.textContent = error.message;
        errorDiv.classList.remove('hidden');
        submitBtn.disabled = false;
        submitBtn.innerHTML = '<i data-lucide="send" class="w-4 h-4"></i>{% trans "Send" %}';
    });
}
</script>