{% 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-lg animate-in">
        <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 person or 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="">
            
            <div class="p-6">
                <!-- Recipient Type Tabs -->
                <div class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Send To" %}</label>
                    <div class="flex gap-2">
                        <label class="flex-1 flex items-center gap-2 px-4 py-3 border-2 rounded-xl cursor-pointer transition-all border-navy bg-navy/5 text-navy font-semibold text-sm" id="recipientLabelPerson" onclick="switchRecipientType('person')">
                            <input type="radio" name="recipient_type" value="person" checked class="accent-navy" onchange="switchRecipientType('person')">
                            <i data-lucide="user" class="w-4 h-4"></i>
                            {% trans "Person" %}
                        </label>
                        <label class="flex-1 flex items-center gap-2 px-4 py-3 border-2 rounded-xl cursor-pointer transition-all border-slate-200 text-slate-500 text-sm" id="recipientLabelDepartment" onclick="switchRecipientType('department')">
                            <input type="radio" name="recipient_type" value="department" class="accent-navy" onchange="switchRecipientType('department')">
                            <i data-lucide="building-2" class="w-4 h-4"></i>
                            {% trans "Department" %}
                        </label>
                    </div>
                </div>
                
                <!-- Person Selection -->
                <div id="personSection" class="mb-4">
                    <label class="block text-sm font-semibold text-navy mb-2">{% trans "Select Person" %} <span class="text-red-500">*</span></label>
                    <select name="person_id" id="personSelect" 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 Person" %}</option>
                        {% for user in users %}
                        <option value="{{ user.id }}">{{ user.get_full_name|default:user.email }} {% if user.department %}({{ user.department.name }}){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                
                <!-- Department Selection -->
                <div id="departmentSection" class="mb-4 hidden">
                    <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.name }}</option>
                        {% endfor %}
                    </select>
                </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>
                
                <!-- 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>
// Unified Send Modal Functions
function showSendModal(itemId, itemType) {
    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');
    document.getElementById('sendToForm').reset();
    switchRecipientType('person');
}

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

function switchRecipientType(type) {
    const personSection = document.getElementById('personSection');
    const departmentSection = document.getElementById('departmentSection');
    const personLabel = document.getElementById('recipientLabelPerson');
    const deptLabel = document.getElementById('recipientLabelDepartment');
    
    if (type === 'person') {
        personSection.classList.remove('hidden');
        departmentSection.classList.add('hidden');
        personLabel.classList.add('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
        personLabel.classList.remove('border-slate-200', 'text-slate-500');
        deptLabel.classList.add('border-slate-200', 'text-slate-500');
        deptLabel.classList.remove('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
    } else {
        personSection.classList.add('hidden');
        departmentSection.classList.remove('hidden');
        deptLabel.classList.add('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
        deptLabel.classList.remove('border-slate-200', 'text-slate-500');
        personLabel.classList.add('border-slate-200', 'text-slate-500');
        personLabel.classList.remove('border-navy', 'bg-navy/5', 'text-navy', 'font-semibold');
    }
}

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');
    
    // Validate
    const recipientType = formData.get('recipient_type');
    if (recipientType === 'person' && !formData.get('person_id')) {
        errorDiv.textContent = '{% trans "Please select a person." %}';
        errorDiv.classList.remove('hidden');
        return;
    }
    if (recipientType === 'department' && !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..." %}';
    
    // Determine endpoint based on item type
    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/';
    }
    
    fetch(endpoint, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]')?.value || ''
        }
    })
    .then(response => {
        if (!response.ok) throw new Error('Network response was not ok');
        return response.json();
    })
    .then(data => {
        if (data.success) {
            successDiv.textContent = data.message || '{% trans "Sent successfully!" %}';
            successDiv.classList.remove('hidden');
            setTimeout(() => {
                closeSendModal();
                window.location.reload();
            }, 1500);
        } else {
            throw new Error(data.error || '{% trans "Failed to send." %}');
        }
    })
    .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>