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

{% block title %}New Complaint - PX360{% endblock %}

{% block extra_css %}
<style>
    .form-section {
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 25px;
        margin-bottom: 20px;
    }
    .form-section-title {
        font-size: 1.1rem;
        font-weight: 600;
        color: #495057;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #667eea;
    }
    .required-field::after {
        content: " *";
        color: #dc3545;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Page Header -->
    <div class="mb-4">
        <a href="{% url 'complaints:complaint_list' %}" class="btn btn-outline-secondary btn-sm mb-3">
            <i class="bi bi-arrow-left me-1"></i> Back to Complaints
        </a>
        <h2 class="mb-1">
            <i class="bi bi-plus-circle text-primary me-2"></i>
            Create New Complaint
        </h2>
        <p class="text-muted mb-0">File a new patient complaint with SLA tracking</p>
    </div>

    <form method="post" action="{% url 'complaints:complaint_create' %}" id="complaintForm">
        {% csrf_token %}
        
        <div class="row">
            <div class="col-lg-8">
                <!-- Patient Information -->
                <div class="form-section">
                    <h5 class="form-section-title">
                        <i class="bi bi-person-fill me-2"></i>Patient Information
                    </h5>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required-field">{% trans "Patient" %}</label>
                            <select name="patient_id" class="form-select" id="patientSelect" required>
                                <option value="">Search and select patient...</option>
                            </select>
                            <small class="form-text text-muted">Search by MRN or name</small>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{% trans "Encounter ID" %}</label>
                            <input type="text" name="encounter_id" class="form-control" 
                                   placeholder="{% trans 'Optional encounter/visit ID' %}">
                        </div>
                    </div>
                </div>

                <!-- Organization Information -->
                <div class="form-section">
                    <h5 class="form-section-title">
                        <i class="bi bi-hospital me-2"></i>Organization
                    </h5>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required-field">{% trans "Hospital" %}</label>
                            <select name="hospital_id" class="form-select" id="hospitalSelect" required>
                                <option value="">Select hospital...</option>
                                {% for hospital in hospitals %}
                                <option value="{{ hospital.id }}">{{ hospital.name_en }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{% trans "Department" %}</label>
                            <select name="department_id" class="form-select" id="departmentSelect">
                                <option value="">Select department...</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{% trans "Physician" %}</label>
                            <select name="physician_id" class="form-select" id="physicianSelect">
                                <option value="">Select physician...</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Complaint Details -->
                <div class="form-section">
                    <h5 class="form-section-title">
                        <i class="bi bi-file-text me-2"></i>Complaint Details
                    </h5>
                    
                    <div class="mb-3">
                        <label class="form-label required-field">{% trans "Title" %}</label>
                        <input type="text" name="title" class="form-control" 
                               placeholder="{% trans 'Brief summary of the complaint' %}" required maxlength="500">
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label required-field">{% trans "Description" %}</label>
                        <textarea name="description" class="form-control" rows="5" 
                                  placeholder="{% trans 'Detailed description of the complaint...' %}" required></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label required-field">{% trans "Category" %}</label>
                            <select name="category" class="form-select" required>
                                <option value="">Select category...</option>
                                <option value="clinical_care">Clinical Care</option>
                                <option value="staff_behavior">Staff Behavior</option>
                                <option value="facility">Facility & Environment</option>
                                <option value="wait_time">Wait Time</option>
                                <option value="billing">Billing</option>
                                <option value="communication">Communication</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label class="form-label">{% trans "Subcategory" %}</label>
                            <input type="text" name="subcategory" class="form-control" 
                                   placeholder="{% trans 'Optional subcategory' %}">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Classification -->
                <div class="form-section">
                    <h5 class="form-section-title">
                        <i class="bi bi-tags me-2"></i>Classification
                    </h5>
                    
                    <div class="mb-3">
                        <label class="form-label required-field">{% trans "Severity" %}</label>
                        <select name="severity" class="form-select" required>
                            <option value="">Select severity...</option>
                            <option value="low">Low</option>
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                            <option value="critical">Critical</option>
                        </select>
                        <small class="form-text text-muted">
                            Determines SLA deadline
                        </small>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label required-field">{% trans "Priority" %}</label>
                        <select name="priority" class="form-select" required>
                            <option value="">Select priority...</option>
                            <option value="low">Low</option>
                            <option value="medium" selected>Medium</option>
                            <option value="high">High</option>
                            <option value="urgent">Urgent</option>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label required-field">{% trans "Source" %}</label>
                        <select name="source" class="form-select" required>
                            <option value="">Select source...</option>
                            <option value="patient">Patient</option>
                            <option value="family">Family Member</option>
                            <option value="staff">Staff</option>
                            <option value="survey">Survey</option>
                            <option value="social_media">Social Media</option>
                            <option value="call_center">Call Center</option>
                            <option value="moh">Ministry of Health</option>
                            <option value="chi">Council of Health Insurance</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                </div>

                <!-- SLA Information -->
                <div class="alert alert-info">
                    <h6 class="alert-heading">
                        <i class="bi bi-info-circle me-2"></i>SLA Information
                    </h6>
                    <p class="mb-0 small">
                        SLA deadline will be automatically calculated based on severity:
                    </p>
                    <ul class="mb-0 mt-2 small">
                        <li><strong>Critical:</strong> 4 hours</li>
                        <li><strong>High:</strong> 24 hours</li>
                        <li><strong>Medium:</strong> 72 hours</li>
                        <li><strong>Low:</strong> 168 hours (7 days)</li>
                    </ul>
                </div>

                <!-- Action Buttons -->
                <div class="d-grid gap-2">
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="bi bi-check-circle me-2"></i>Create Complaint
                    </button>
                    <a href="{% url 'complaints:complaint_list' %}" class="btn btn-outline-secondary">
                        <i class="bi bi-x-circle me-2"></i>Cancel
                    </a>
                </div>
            </div>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Initialize Select2 for patient search (if Select2 is available)
document.addEventListener('DOMContentLoaded', function() {
    // Hospital change handler - load departments
    const hospitalSelect = document.getElementById('hospitalSelect');
    const departmentSelect = document.getElementById('departmentSelect');
    const physicianSelect = document.getElementById('physicianSelect');
    
    hospitalSelect.addEventListener('change', function() {
        const hospitalId = this.value;
        
        // Clear department and physician
        departmentSelect.innerHTML = '<option value="">Select department...</option>';
        physicianSelect.innerHTML = '<option value="">Select physician...</option>';
        
        if (hospitalId) {
            // Load departments for selected hospital
            fetch(`/api/organizations/departments/?hospital=${hospitalId}`)
                .then(response => response.json())
                .then(data => {
                    data.results.forEach(dept => {
                        const option = document.createElement('option');
                        option.value = dept.id;
                        option.textContent = dept.name_en;
                        departmentSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error loading departments:', error));
            
            // Load physicians for selected hospital
            fetch(`/api/organizations/physicians/?hospital=${hospitalId}`)
                .then(response => response.json())
                .then(data => {
                    data.results.forEach(physician => {
                        const option = document.createElement('option');
                        option.value = physician.id;
                        option.textContent = `Dr. ${physician.first_name} ${physician.last_name} (${physician.specialty})`;
                        physicianSelect.appendChild(option);
                    });
                })
                .catch(error => console.error('Error loading physicians:', error));
        }
    });
    
    // Patient search with debounce
    const patientSelect = document.getElementById('patientSelect');
    let patientSearchTimeout;
    
    // Simple patient search (can be enhanced with Select2)
    patientSelect.addEventListener('focus', function() {
        if (this.options.length === 1) {
            // Load initial patients
            loadPatients('');
        }
    });
    
    function loadPatients(searchTerm) {
        const url = searchTerm 
            ? `/api/organizations/patients/?search=${encodeURIComponent(searchTerm)}`
            : '/api/organizations/patients/?page_size=50';
            
        fetch(url)
            .then(response => response.json())
            .then(data => {
                patientSelect.innerHTML = '<option value="">Search and select patient...</option>';
                data.results.forEach(patient => {
                    const option = document.createElement('option');
                    option.value = patient.id;
                    option.textContent = `${patient.first_name} ${patient.last_name} (MRN: ${patient.mrn})`;
                    patientSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error loading patients:', error));
    }
    
    // Form validation
    const form = document.getElementById('complaintForm');
    form.addEventListener('submit', function(e) {
        if (!form.checkValidity()) {
            e.preventDefault();
            e.stopPropagation();
        }
        form.classList.add('was-validated');
    });
});
</script>
{% endblock %}