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

{% block title %}{% trans "New Inquiry" %}{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0">{% trans "New Inquiry" %}</h1>
            <p class="text-muted">{% trans "Create a new patient inquiry" %}</p>
        </div>
        <div>
            <a href="{% url 'complaints:inquiry_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {% trans "Back to List" %}
            </a>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Inquiry Information" %}</h6>
                </div>
                <div class="card-body">
                    <form method="post">
                        {% csrf_token %}
                        
                        <!-- Hospital Selection -->
                        <div class="mb-3">
                            <label class="form-label">{% trans "Hospital" %} <span class="text-danger">*</span></label>
                            <select name="hospital_id" class="form-select" required id="hospital-select">
                                <option value="">{% trans "Select Hospital" %}</option>
                                {% for hospital in hospitals %}
                                <option value="{{ hospital.id }}">{{ hospital.name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Department Selection -->
                        <div class="mb-3">
                            <label class="form-label">{% trans "Department" %}</label>
                            <select name="department_id" class="form-select" id="department-select">
                                <option value="">{% trans "Select Department" %}</option>
                            </select>
                        </div>

                        <!-- Patient Search -->
                        <div class="mb-3">
                            <label class="form-label">{% trans "Patient" %} ({% trans "Optional" %})</label>
                            <input type="text" class="form-control" id="patient-search" placeholder="{% trans 'Search by MRN or name...' %}">
                            <input type="hidden" name="patient_id" id="patient-id">
                            <div id="patient-results" class="list-group mt-2" style="display: none;"></div>
                            <div id="selected-patient" class="alert alert-info mt-2" style="display: none;"></div>
                        </div>

                        <hr>

                        <!-- Contact Information (if no patient) -->
                        <h6 class="mb-3">{% trans "Contact Information" %} ({% trans "if not a registered patient" %})</h6>
                        
                        <div class="mb-3">
                            <label class="form-label">{% trans "Contact Name" %}</label>
                            <input type="text" name="contact_name" class="form-control">
                        </div>

                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Contact Phone" %}</label>
                                <input type="tel" name="contact_phone" class="form-control">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label">{% trans "Contact Email" %}</label>
                                <input type="email" name="contact_email" class="form-control">
                            </div>
                        </div>

                        <hr>

                        <!-- Inquiry Details -->
                        <h6 class="mb-3">{% trans "Inquiry Details" %}</h6>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Category" %} <span class="text-danger">*</span></label>
                            <select name="category" class="form-select" required>
                                <option value="">{% trans "Select Category" %}</option>
                                <option value="appointment">{% trans "Appointment" %}</option>
                                <option value="billing">{% trans "Billing" %}</option>
                                <option value="medical_records">{% trans "Medical Records" %}</option>
                                <option value="general">{% trans "General Information" %}</option>
                                <option value="other">{% trans "Other" %}</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Subject" %} <span class="text-danger">*</span></label>
                            <input type="text" name="subject" class="form-control" required maxlength="500">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">{% trans "Message" %} <span class="text-danger">*</span></label>
                            <textarea name="message" class="form-control" rows="6" required></textarea>
                        </div>

                        <div class="d-flex justify-content-end">
                            <a href="{% url 'complaints:inquiry_list' %}" class="btn btn-secondary me-2">{% trans "Cancel" %}</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> {% trans "Create Inquiry" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="m-0 font-weight-bold">{% trans "Help" %}</h6>
                </div>
                <div class="card-body">
                    <p class="small">{% trans "Use this form to create a new inquiry from a patient or visitor." %}</p>
                    <p class="small">{% trans "If the inquiry is from a registered patient, search and select them. Otherwise, provide contact information." %}</p>
                    <p class="small text-muted">{% trans "Fields marked with * are required." %}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Department loading
document.getElementById('hospital-select').addEventListener('change', function() {
    const hospitalId = this.value;
    const departmentSelect = document.getElementById('department-select');
    
    if (!hospitalId) {
        departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
        return;
    }
    
    fetch(`/complaints/ajax/departments/?hospital_id=${hospitalId}`)
        .then(response => response.json())
        .then(data => {
            departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
            data.departments.forEach(dept => {
                const option = document.createElement('option');
                option.value = dept.id;
                option.textContent = dept.name;
                departmentSelect.appendChild(option);
            });
        });
});

// Patient search
let searchTimeout;
document.getElementById('patient-search').addEventListener('input', function() {
    const query = this.value;
    const resultsDiv = document.getElementById('patient-results');
    
    clearTimeout(searchTimeout);
    
    if (query.length < 2) {
        resultsDiv.style.display = 'none';
        return;
    }
    
    searchTimeout = setTimeout(() => {
        fetch(`/complaints/ajax/search-patients/?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                if (data.patients.length === 0) {
                    resultsDiv.innerHTML = '<div class="list-group-item">{% trans "No patients found" %}</div>';
                    resultsDiv.style.display = 'block';
                    return;
                }
                
                resultsDiv.innerHTML = '';
                data.patients.forEach(patient => {
                    const item = document.createElement('a');
                    item.href = '#';
                    item.className = 'list-group-item list-group-item-action';
                    item.innerHTML = `
                        <strong>${patient.name}</strong><br>
                        <small>MRN: ${patient.mrn} | ${patient.phone || ''} | ${patient.email || ''}</small>
                    `;
                    item.addEventListener('click', function(e) {
                        e.preventDefault();
                        selectPatient(patient);
                    });
                    resultsDiv.appendChild(item);
                });
                resultsDiv.style.display = 'block';
            });
    }, 300);
});

function selectPatient(patient) {
    document.getElementById('patient-id').value = patient.id;
    document.getElementById('patient-search').value = '';
    document.getElementById('patient-results').style.display = 'none';
    
    const selectedDiv = document.getElementById('selected-patient');
    selectedDiv.innerHTML = `
        <strong>{% trans "Selected Patient" %}:</strong> ${patient.name}<br>
        <small>MRN: ${patient.mrn}</small>
        <button type="button" class="btn btn-sm btn-link" onclick="clearPatient()">{% trans "Clear" %}</button>
    `;
    selectedDiv.style.display = 'block';
}

function clearPatient() {
    document.getElementById('patient-id').value = '';
    document.getElementById('selected-patient').style.display = 'none';
}
</script>
{% endblock %}