{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% if inquiry %}{% trans "Edit Inquiry" %}{% else %}{% trans "Create New Inquiry" %}{% endif %} - PX360{% endblock %}

{% block extra_css %}
<style>
    .page-header {
        background: linear-gradient(135deg, #005696 0%, #0069a8 50%, #007bbd 100%);
        color: white;
        padding: 2rem 2.5rem;
        border-radius: 1rem;
        margin-bottom: 2rem;
        box-shadow: 0 10px 15px -3px rgba(0, 86, 150, 0.2);
        position: relative;
        overflow: hidden;
    }
    .page-header::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
        pointer-events: none;
    }
    .section-card {
        background: white;
        border-radius: 1rem;
        border: 2px solid #e2e8f0;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        transition: all 0.3s ease;
    }
    .section-card:hover {
        border-color: #005696;
        box-shadow: 0 10px 25px -5px rgba(0, 86, 150, 0.15);
    }
    .section-header {
        padding: 1rem 1.5rem;
        border-bottom: 2px solid #e2e8f0;
        background: linear-gradient(to right, #f8fafc, #f1f5f9);
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }
    .section-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
    <div class="flex justify-between items-center">
        <div>
            <div class="flex items-center gap-2 text-blue-100 text-sm mb-2">
                <a href="{% url 'inquiries:inquiry_list' %}" class="hover:text-white transition">{% trans "Inquiries" %}</a>
                <i data-lucide="chevron-right" class="w-3 h-3"></i>
                {% if inquiry %}
                <a href="{% url 'inquiries:inquiry_detail' inquiry.pk %}" class="hover:text-white transition">{{ inquiry.subject|truncatechars:30 }}</a>
                <i data-lucide="chevron-right" class="w-3 h-3"></i>
                <span class="text-white">{% trans "Edit" %}</span>
                {% else %}
                <span class="text-white">{% trans "New Inquiry" %}</span>
                {% endif %}
            </div>
            <h1 class="text-2xl font-bold">{% if inquiry %}{% trans "Edit Inquiry" %}{% else %}{% trans "Create New Inquiry" %}{% endif %}</h1>
        </div>
    </div>
</div>

<form method="post" {% if inquiry %}action="{% url 'inquiries:inquiry_edit' inquiry.pk %}"{% else %}action="{% url 'inquiries:inquiry_create' %}"{% endif %} id="inquiryForm" data-loading data-loading-text="{% trans 'Saving...' %}">
    {% csrf_token %}
    {% if communication_request %}
    <input type="hidden" name="comm_req" value="{{ communication_request.id }}">
    {% endif %}
    <input type="hidden" name="patient_id" id="patientId" value="">

    <div class="section-card">
    <div class="section-header">
        <div class="section-icon bg-cyan-500/10">
            <i data-lucide="file-text" class="w-5 h-5 text-cyan-600"></i>
        </div>
        <h5 class="text-lg font-semibold text-gray-800">{% if inquiry %}{% trans "Edit Inquiry Information" %}{% else %}{% trans "Inquiry Information" %}{% endif %}</h5>
    </div>

    <div class="p-6 space-y-8">
        <div>
            <h6 class="text-xs font-bold text-slate uppercase mb-4 flex items-center gap-2">
                <i data-lucide="building" class="w-4 h-4"></i>{% trans "Organization" %}
            </h6>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                {% if not form.hospital.is_hidden %}
                <div>
                    <label for="{{ form.hospital.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                        {{ form.hospital.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.hospital }}
                    {% for error in form.hospital.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>
                {% else %}
                    {{ form.hospital }}
                {% endif %}

                <div>
                    <label for="{{ form.location_type.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                        {{ form.location_type.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.location_type }}
                    {% for error in form.location_type.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>

                <div>
                    <label for="{{ form.area.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">{{ form.area.label }}</label>
                    {{ form.area }}
                    {% for error in form.area.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>

                <div>
                    <label class="block text-sm font-semibold text-slate-700 mb-1.5">{% trans "Department Category" %} <span class="text-red-500">*</span></label>
                    <select id="id_dept_category" class="form-select">
                        <option value="">{% trans "Select Category" %}</option>
                        <option value="medical">{% trans "Medical" %}</option>
                        <option value="nursing">{% trans "Nursing" %}</option>
                        <option value="administrative">{% trans "Administrative" %}</option>
                        <option value="support_services">{% trans "Support Services" %}</option>
                    </select>
                </div>

                <div>
                    <label for="{{ form.department.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">{{ form.department.label }}</label>
                    {{ form.department }}
                    {% for error in form.department.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>

                <div>
                    <label for="{{ form.section.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">{{ form.section.label }}</label>
                    {{ form.section }}
                    {% for error in form.section.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="border-t border-slate-200 pt-6">
            <h6 class="text-xs font-bold text-slate uppercase mb-4 flex items-center gap-2">
                <i data-lucide="user" class="w-4 h-4"></i>{% trans "Contact Information" %}
            </h6>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="{{ form.contact_name.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                        {{ form.contact_name.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.contact_name }}
                    {% for error in form.contact_name.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>

                <div>
                    <label for="{{ form.contact_phone.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                        {{ form.contact_phone.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.contact_phone }}
                    {% for error in form.contact_phone.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                    <div id="patientFoundBanner" class="hidden bg-green-50 border border-green-200 rounded-lg p-2 mt-2">
                        <div class="flex items-center gap-2">
                            <i data-lucide="check-circle" class="w-4 h-4 text-green-500"></i>
                            <span class="text-sm text-green-700">{% trans "Patient linked:" %} <strong id="patientFoundName"></strong> <span id="patientFoundMrn" class="text-green-600"></span></span>
                            <button type="button" onclick="clearPatientLink()" class="ml-auto text-green-600 hover:text-red-500 transition" title="{% trans 'Remove link' %}">
                                <i data-lucide="x" class="w-4 h-4"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="md:col-span-2">
                    <label for="{{ form.contact_email.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">{{ form.contact_email.label }}</label>
                    {{ form.contact_email }}
                    {% for error in form.contact_email.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>
            </div>
        </div>

        <div class="border-t border-slate-200 pt-6">
            <h6 class="text-xs font-bold text-slate uppercase mb-4 flex items-center gap-2">
                <i data-lucide="help-circle" class="w-4 h-4"></i>{% trans "Inquiry Details" %}
            </h6>

            <input type="hidden" name="is_outgoing" value="false">

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                <div>
                    <label for="{{ form.category.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                        {{ form.category.label }} <span class="text-red-500">*</span>
                    </label>
                    {{ form.category }}
                    {% for error in form.category.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>

                <div>
                    <label for="{{ form.priority.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">{{ form.priority.label }}</label>
                    {{ form.priority }}
                    {% for error in form.priority.errors %}
                    <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                        <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                    </p>
                    {% endfor %}
                </div>
            </div>

            <div class="mt-5">
                <label for="{{ form.subject.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                    {{ form.subject.label }} <span class="text-red-500">*</span>
                </label>
                {{ form.subject }}
                {% for error in form.subject.errors %}
                <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                    <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                </p>
                {% endfor %}
            </div>

            <div class="mt-5">
                <label for="{{ form.message.id_for_label }}" class="block text-sm font-semibold text-slate-700 mb-1.5">
                    {{ form.message.label }} <span class="text-red-500">*</span>
                </label>
                {{ form.message }}
                {% for error in form.message.errors %}
                <p class="text-red-500 text-xs mt-1 flex items-center gap-1">
                    <i data-lucide="alert-circle" class="w-3 h-3"></i>{{ error }}
                </p>
                {% endfor %}
            </div>
        </div>
    </div>

    <div class="p-6 bg-slate-50 border-t border-slate-200 flex gap-3 rounded-b-xl">
        <button type="submit" class="inline-flex items-center gap-2 px-6 py-2.5 bg-navy text-white rounded-xl font-semibold hover:bg-navy/90 transition text-sm">
            <i data-lucide="check-circle" class="w-4 h-4"></i>
            {% if inquiry %}{% trans "Save Changes" %}{% else %}{% trans "Create Inquiry" %}{% endif %}
        </button>
        {% if inquiry %}
        <a href="{% url 'inquiries:inquiry_detail' inquiry.pk %}" class="px-6 py-2.5 border-2 border-slate-200 rounded-xl font-semibold text-slate-600 hover:bg-slate-50 transition text-sm">{% trans "Cancel" %}</a>
        {% else %}
        <a href="{% url 'inquiries:inquiry_list' %}" class="px-6 py-2.5 border-2 border-slate-200 rounded-xl font-semibold text-slate-600 hover:bg-slate-50 transition text-sm">{% trans "Cancel" %}</a>
        {% endif %}
    </div>
    </div>
</form>

{% endblock %}

{% block extra_js %}
<script>
{% trans "Select Section" as trans_select_section %}

document.addEventListener('DOMContentLoaded', function() {
    const selSection = '{{ trans_select_section|escapejs }}';

    document.querySelectorAll('.text-red-500').forEach(function(errorEl) {
        const input = errorEl.parentElement.querySelector('input, select, textarea');
        if (input) {
            input.classList.add('border-red-300');
        }
    });

    const outgoingSection = document.getElementById('outgoingDepartmentSection');
    const isOutgoingField = document.getElementById('isOutgoing');
    document.querySelectorAll('input[name="is_outgoing"]').forEach(function(radio) {
        radio.addEventListener('change', function() {
            if (this.value === 'true') {
                outgoingSection.classList.remove('hidden');
                isOutgoingField.value = 'true';
            } else {
                outgoingSection.classList.add('hidden');
                isOutgoingField.value = 'false';
            }
        });
    });

    const hospitalSelect = document.getElementById('hospitalSelect');
    const hospitalField = hospitalSelect || document.querySelector('input[name="hospital"]');
    const locationTypeSelect = document.getElementById('locationTypeSelect');
    const areaSelect = document.getElementById('areaSelect');
    const departmentSelect = document.getElementById('departmentSelect');
    const sectionSelect = document.getElementById('sectionSelect');
    const deptCategorySelect = document.getElementById('id_dept_category');

    function getHospitalId() {
        if (hospitalSelect) return hospitalSelect.value;
        if (hospitalField) return hospitalField.value;
        return null;
    }

    function loadAreas(hospitalId, locationType) {
        if (!areaSelect) return;
        areaSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
        if (!hospitalId) {
            areaSelect.innerHTML = '<option value="">{% trans "Select Area (optional)" %}</option>';
            return;
        }
        let url = '/organizations/dropdowns/areas/?hospital=' + hospitalId;
        if (locationType) url += '&location_type=' + locationType;
        fetch(url)
            .then(r => r.json())
            .then(data => {
                areaSelect.innerHTML = '<option value="">{% trans "Select Area (optional)" %}</option>';
                data.forEach(a => {
                    const opt = document.createElement('option');
                    opt.value = a.id;
                    opt.textContent = a.name_en;
                    areaSelect.appendChild(opt);
                });
            })
            .catch(err => {
                console.error('Error loading areas:', err);
                areaSelect.innerHTML = '<option value="">{% trans "Error loading areas" %}</option>';
            });
    }

    if (locationTypeSelect) {
        locationTypeSelect.addEventListener('change', function() {
            loadAreas(getHospitalId(), this.value);
        });
    }

    function loadDepartments(hospitalId, category) {
        if (!departmentSelect) return;
        departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
        if (!hospitalId) {
            departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
            return;
        }
        var url = '/organizations/dropdowns/departments-by-category/?hospital=' + encodeURIComponent(hospitalId);
        if (category) url += '&category=' + encodeURIComponent(category);
        fetch(url)
            .then(function(r) { return r.json(); })
            .then(function(data) {
                departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
                (data || []).forEach(function(d) {
                    var opt = document.createElement('option');
                    opt.value = d.id;
                    opt.textContent = d.name_en || d.name;
                    departmentSelect.appendChild(opt);
                });
            })
            .catch(function(err) {
                console.error('Error loading departments:', err);
                departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
            });
    }

    if (deptCategorySelect) {
        deptCategorySelect.addEventListener('change', function() {
            loadDepartments(getHospitalId(), this.value);
            if (sectionSelect) sectionSelect.innerHTML = '<option value="">' + selSection + '</option>';
        });
    }

    function loadSections(deptId) {
        if (!sectionSelect) return;
        sectionSelect.innerHTML = '<option value="">' + selSection + '</option>';
        if (!deptId) return;
        fetch('/organizations/dropdowns/sections/' + deptId + '/')
            .then(r => r.json())
            .then(data => {
                (data || []).forEach(function(s) {
                    var opt = document.createElement('option');
                    opt.value = s.id;
                    opt.textContent = s.name_en || s.name;
                    sectionSelect.appendChild(opt);
                });
            });
    }

    if (departmentSelect) {
        departmentSelect.addEventListener('change', function() {
            loadSections(this.value);
        });
    }

    const phoneField = document.getElementById('id_contact_phone');
    const patientIdField = document.getElementById('patientId');
    const patientFoundBanner = document.getElementById('patientFoundBanner');
    const patientFoundName = document.getElementById('patientFoundName');
    const patientFoundMrn = document.getElementById('patientFoundMrn');
    const contactNameField = document.getElementById('id_contact_name');

    let patientLookupTimer = null;

    function clearPatientLink() {
        patientIdField.value = '';
        patientFoundBanner.classList.add('hidden');
    }
    window.clearPatientLink = clearPatientLink;

    if (phoneField) {
        phoneField.addEventListener('input', function () {
            clearTimeout(patientLookupTimer);
            const val = this.value.trim().replace(/\D/g, '');
            if (val.length < 7) {
                clearPatientLink();
                return;
            }
            patientLookupTimer = setTimeout(function () {
                fetch(`/complaints/api/lookup-patient/?phone=${encodeURIComponent(val)}`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.found) {
                            patientIdField.value = data.id;
                            patientFoundName.textContent = data.name;
                            patientFoundMrn.textContent = `(MRN: ${data.mrn})`;
                            patientFoundBanner.classList.remove('hidden');
                            if (contactNameField && !contactNameField.value.trim()) {
                                contactNameField.value = data.name;
                            }
                        } else {
                            clearPatientLink();
                        }
                    })
                    .catch(error => console.error('Patient lookup error:', error));
            }, 500);
        });
    }
});
</script>
{% endblock %}
