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

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

{% block extra_css %}
<style>
    :root {
        --hh-navy: #005696;
        --hh-blue: #007bbd;
        --hh-light: #eef6fb;
        --hh-slate: #64748b;
        --hh-success: #10b981;
        --hh-warning: #f59e0b;
        --hh-danger: #ef4444;
        --hh-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --hh-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --hh-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }

    /* Page Header */
    .page-header {
        background: linear-gradient(135deg, var(--hh-navy) 0%, #0069a8 50%, var(--hh-blue) 100%);
        color: white;
        padding: 2rem 2.5rem;
        border-radius: 1rem;
        margin-bottom: 2rem;
        box-shadow: var(--hh-shadow-lg);
        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;
    }

    .back-link {
        color: rgba(255,255,255,0.85);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-weight: 500;
        margin-bottom: 1rem;
        transition: color 0.2s ease;
    }

    .back-link:hover {
        color: white;
    }

    /* Form Sections */
    .form-section {
        background: white;
        border-radius: 1rem;
        border: 1px solid #e2e8f0;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        box-shadow: var(--hh-shadow-md);
        transition: all 0.3s ease;
    }

    .form-section:hover {
        box-shadow: var(--hh-shadow-lg);
        transform: translateY(-2px);
    }

    .form-section-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
        padding-bottom: 1rem;
        border-bottom: 2px solid var(--hh-light);
    }

    .form-section-header h2 {
        color: var(--hh-navy);
        font-weight: 700;
        font-size: 1.25rem;
        margin: 0;
    }

    .section-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, var(--hh-light), #e0f2fe);
    }

    /* Form Controls - Django Widget Styling */
    .form-control, .form-select {
        width: 100%;
        padding: 0.75rem 1rem;
        border: 2px solid #cbd5e1;
        border-radius: 0.75rem;
        font-size: 0.95rem;
        transition: all 0.2s;
        background: white;
        color: #1e293b;
        font-family: 'Inter', sans-serif;
    }

    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: var(--hh-blue);
        box-shadow: 0 0 0 4px rgba(0, 123, 189, 0.1);
        transform: translateY(-1px);
    }

    .form-control.error, .form-select.error {
        border-color: var(--hh-danger);
    }

    .form-control.error:focus, .form-select.error:focus {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.1);
    }

    /* Textarea specific */
    textarea.form-control {
        resize: vertical;
        min-height: 120px;
    }

    /* Date input specific */
    input[type="date"].form-control {
        min-height: auto;
    }

    .form-label {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: #1e293b;
        font-size: 0.9rem;
    }

    .form-error {
        color: var(--hh-danger);
        font-size: 0.875rem;
        margin-top: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    /* Complaint Type Cards */
    .type-card {
        border: 2px solid #e2e8f0;
        border-radius: 1.5rem;
        padding: 1.5rem;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: white;
    }

    .type-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px -5px rgba(0, 0, 0, 0.1);
    }

    .type-card.active {
        border-color: var(--hh-blue);
        background: linear-gradient(135deg, var(--hh-light) 0%, #e0f2fe 100%);
    }

    .type-card-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1rem;
        transition: transform 0.3s ease;
    }

    .type-card:hover .type-card-icon {
        transform: scale(1.1);
    }

    .type-card-icon.complaint {
        background: linear-gradient(135deg, #fee2e2, #fecaca);
    }

    .type-card-icon.appreciation {
        background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    }

    /* Info Cards */
    .info-card {
        border-radius: 1rem;
        padding: 1.5rem;
        border: 2px solid;
        transition: all 0.3s ease;
    }

    .info-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--hh-shadow-lg);
    }

    .info-card.ai {
        background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
        border-color: #bfdbfe;
    }

    .info-card.sla {
        background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%);
        border-color: #fdba74;
    }

    .info-card-header {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .info-card-icon {
        width: 40px;
        height: 40px;
        border-radius: 0.75rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .info-card.ai .info-card-icon {
        background: #dbeafe;
    }

    .info-card.sla .info-card-icon {
        background: #fed7aa;
    }

    .info-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .info-list li {
        display: flex;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        font-size: 0.875rem;
    }

    .info-list-icon {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .info-card.ai .info-list-icon {
        background: #dbeafe;
    }

    .info-card.sla .info-list-icon {
        background: white;
    }

    /* Buttons */
    .btn-submit {
        background: linear-gradient(135deg, var(--hh-navy) 0%, var(--hh-blue) 100%);
        color: white;
        padding: 1rem 2rem;
        border-radius: 1rem;
        font-weight: 700;
        font-size: 1rem;
        border: none;
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        box-shadow: 0 4px 12px rgba(0, 86, 150, 0.25);
    }

    .btn-submit:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0, 86, 150, 0.35);
    }

    .btn-submit:disabled {
        background: #94a3b8;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

    .btn-cancel {
        background: #f1f5f9;
        color: #475569;
        padding: 1rem 2rem;
        border-radius: 1rem;
        font-weight: 700;
        font-size: 1rem;
        border: 2px solid #e2e8f0;
        cursor: pointer;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        width: 100%;
        text-decoration: none;
    }

    .btn-cancel:hover {
        background: #e2e8f0;
        border-color: #cbd5e1;
        transform: translateY(-1px);
    }

    /* Required mark */
    .required-mark {
        color: var(--hh-danger);
    }

    /* Animations */
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-in {
        animation: fadeIn 0.5s ease-out forwards;
    }
</style>
{% endblock %}

{% block content %}
<div class="px-4 py-6">
    <!-- Page Header -->
    <div class="page-header animate-in">
        <div>
            {% if source_user %}
            <a href="{% url 'px_sources:source_user_complaint_list' %}" class="back-link">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Back to My Complaints" %}
            </a>
            {% else %}
            <a href="{% url 'complaints:complaint_list' %}" class="back-link">
                <i data-lucide="arrow-left" class="w-4 h-4"></i>
                {% trans "Back to Complaints" %}
            </a>
            {% endif %}
            <h1 class="text-2xl font-bold mb-2">
                <i data-lucide="plus-circle" class="w-7 h-7 inline-block me-2"></i>
                {% trans "Create New Complaint" %}
            </h1>
            <p class="text-white/90">{% trans "File a new patient complaint with SLA tracking" %}</p>
        </div>
    </div>

    <form method="post" action="{% url 'complaints:complaint_create' %}" id="complaintForm" novalidate data-loading data-loading-text="{% trans 'Submitting...' %}">
        {% csrf_token %}

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Main Form Content -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Patient Information -->
                <input type="hidden" name="complaint_type" value="complaint">
                <input type="hidden" name="patient_id" id="patientId" value="">
                <div id="patientFoundBanner" class="hidden bg-green-50 border border-green-200 rounded-xl p-3 mb-4 animate-in">
                    <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 class="form-section animate-in">
                    <div class="form-section-header">
                        <div class="section-icon">
                            <i data-lucide="user" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <h2>{% trans "Patient Information" %}</h2>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                        <div>
                            <label for="{{ form.relation_to_patient.id_for_label }}" class="form-label">
                                {{ form.relation_to_patient.label }} <span class="required-mark">*</span>
                            </label>
                            {{ form.relation_to_patient }}
                            {% if form.relation_to_patient.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.relation_to_patient.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.patient_name.id_for_label }}" class="form-label">
                                {{ form.patient_name.label }} <span class="required-mark">*</span>
                            </label>
                            {{ form.patient_name }}
                            {% if form.patient_name.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.patient_name.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.national_id.id_for_label }}" class="form-label">
                                {{ form.national_id.label }} <span class="required-mark">*</span>
                            </label>
                            {{ form.national_id }}
                            {% if form.national_id.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.national_id.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.incident_date.id_for_label }}" class="form-label">
                                {{ form.incident_date.label }} <span class="required-mark">*</span>
                            </label>
                            {{ form.incident_date }}
                            {% if form.incident_date.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.incident_date.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.encounter_id.id_for_label }}" class="form-label">
                                {{ form.encounter_id.label }}
                            </label>
                            {{ form.encounter_id }}
                            {% if form.encounter_id.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.encounter_id.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- Organization Information -->
                <div class="form-section animate-in">
                    <div class="form-section-header">
                        <div class="section-icon">
                            <i data-lucide="building" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <h2>{% trans "Organization & Location" %}</h2>
                    </div>

                    <div class="space-y-5">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label for="{{ form.complaint_source_type.id_for_label }}" class="form-label">
                                    {{ form.complaint_source_type.label }}
                                </label>
                                {{ form.complaint_source_type }}
                                {% if form.complaint_source_type.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.complaint_source_type.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>

                            <div>
                                <label for="{{ form.source.id_for_label }}" class="form-label">
                                    {{ form.source.label }}
                                </label>
                                {{ form.source }}
                                {% if form.source.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.source.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                                <p class="text-xs text-slate mt-1">
                                    <i data-lucide="info" class="w-3 h-3 inline mr-1"></i>
                                    {% trans "Select if complaint is from a specific PX source" %}
                                </p>
                            </div>
                        </div>

                        <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="form-label">
                                    {{ form.hospital.label }} <span class="required-mark">*</span>
                                </label>
                                {{ form.hospital }}
                                {% if form.hospital.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.hospital.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>
                            {% else %}
                                {{ form.hospital }}
                            {% endif %}

                            <div>
                                <label for="{{ form.department.id_for_label }}" class="form-label">
                                    {{ form.department.label }}
                                </label>
                                {{ form.department }}
                                {% if form.department.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.department.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>
                        </div>

                        <!-- Location Hierarchy -->
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-5">
                            <div>
                                <label for="{{ form.location.id_for_label }}" class="form-label">
                                    {{ form.location.label }} <span class="required-mark">*</span>
                                </label>
                                {{ form.location }}
                                {% if form.location.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.location.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>

                            <div>
                                <label for="{{ form.main_section.id_for_label }}" class="form-label">
                                    {{ form.main_section.label }} <span class="required-mark">*</span>
                                </label>
                                {{ form.main_section }}
                                {% if form.main_section.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.main_section.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>

                            <div>
                                <label for="{{ form.subsection.id_for_label }}" class="form-label">
                                    {{ form.subsection.label }} <span class="required-mark">*</span>
                                </label>
                                {{ form.subsection }}
                                {% if form.subsection.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.subsection.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                            <div>
                                <label for="{{ form.staff.id_for_label }}" class="form-label">
                                    {{ form.staff.label }}
                                </label>
                                {{ form.staff }}
                                {% if form.staff.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.staff.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>

                            <div>
                                <label for="{{ form.staff_name.id_for_label }}" class="form-label">
                                    {{ form.staff_name.label }}
                                </label>
                                {{ form.staff_name }}
                                {% if form.staff_name.errors %}
                                <p class="form-error">
                                    <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                    {% for error in form.staff_name.errors %}{{ error }}{% endfor %}
                                </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Complaint Details -->
                <div class="form-section animate-in">
                    <div class="form-section-header">
                        <div class="section-icon">
                            <i data-lucide="file-text" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <h2>{% trans "Complaint Details" %}</h2>
                    </div>

                    <div class="space-y-5">
                        <div>
                            <label for="{{ form.description.id_for_label }}" class="form-label">
                                {{ form.description.label }} <span class="required-mark">*</span>
                            </label>
                            {{ form.description }}
                            {% if form.description.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.description.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>

                        <div>
                            <label for="{{ form.expected_result.id_for_label }}" class="form-label">
                                {{ form.expected_result.label }}
                            </label>
                            {{ form.expected_result }}
                            {% if form.expected_result.errors %}
                            <p class="form-error">
                                <i data-lucide="alert-circle" class="w-4 h-4"></i>
                                {% for error in form.expected_result.errors %}{{ error }}{% endfor %}
                            </p>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="lg:col-span-1 space-y-6">
                <!-- AI Information -->
                <div class="info-card ai animate-in">
                    <div class="info-card-header">
                        <div class="info-card-icon">
                            <i data-lucide="bot" class="w-5 h-5 text-blue-600"></i>
                        </div>
                        <h3 class="font-bold text-navy m-0">{% trans "AI Classification" %}</h3>
                    </div>
                    <p class="text-sm text-slate mb-4">
                        {% trans "AI will automatically analyze and classify your feedback:" %}
                    </p>
                    <ul class="info-list">
                        <li>
                            <div class="info-list-icon">
                                <i data-lucide="check" class="w-3 h-3 text-blue-600"></i>
                            </div>
                            <div><strong class="text-navy">{% trans "Title" %}:</strong> <span class="text-slate">{% trans "AI-generated title" %}</span></div>
                        </li>
                        <li>
                            <div class="info-list-icon">
                                <i data-lucide="check" class="w-3 h-3 text-blue-600"></i>
                            </div>
                            <div><strong class="text-navy">{% trans "Category" %}:</strong> <span class="text-slate">{% trans "AI-determined category" %}</span></div>
                        </li>
                        <li>
                            <div class="info-list-icon">
                                <i data-lucide="check" class="w-3 h-3 text-blue-600"></i>
                            </div>
                            <div><strong class="text-navy">{% trans "Severity" %}:</strong> <span class="text-slate">{% trans "AI-calculated severity" %}</span></div>
                        </li>
                        <li>
                            <div class="info-list-icon">
                                <i data-lucide="check" class="w-3 h-3 text-blue-600"></i>
                            </div>
                            <div><strong class="text-navy">{% trans "Priority" %}:</strong> <span class="text-slate">{% trans "AI-calculated priority" %}</span></div>
                        </li>
                    </ul>
                </div>

                <!-- SLA Information -->
                <div class="info-card sla animate-in">
                    <div class="info-card-header">
                        <div class="info-card-icon">
                            <i data-lucide="clock" class="w-5 h-5 text-orange-600"></i>
                        </div>
                        <h3 class="font-bold text-navy m-0">{% trans "SLA Information" %}</h3>
                    </div>
                    <p class="text-sm text-slate mb-4">
                        {% trans "SLA deadline will be automatically calculated based on severity:" %}
                    </p>
                    <ul class="info-list">
                        <li>
                            <span class="inline-flex items-center justify-center w-6 h-6 bg-red-100 text-red-600 rounded-full text-xs font-bold flex-shrink-0">C</span>
                            <div><strong class="text-navy">{% trans "Critical" %}:</strong> <span class="text-slate">{% trans "4 hours" %}</span></div>
                        </li>
                        <li>
                            <span class="inline-flex items-center justify-center w-6 h-6 bg-orange-100 text-orange-600 rounded-full text-xs font-bold flex-shrink-0">H</span>
                            <div><strong class="text-navy">{% trans "High" %}:</strong> <span class="text-slate">{% trans "24 hours" %}</span></div>
                        </li>
                        <li>
                            <span class="inline-flex items-center justify-center w-6 h-6 bg-yellow-100 text-yellow-600 rounded-full text-xs font-bold flex-shrink-0">M</span>
                            <div><strong class="text-navy">{% trans "Medium" %}:</strong> <span class="text-slate">{% trans "72 hours" %}</span></div>
                        </li>
                        <li>
                            <span class="inline-flex items-center justify-center w-6 h-6 bg-green-100 text-green-600 rounded-full text-xs font-bold flex-shrink-0">L</span>
                            <div><strong class="text-navy">{% trans "Low" %}:</strong> <span class="text-slate">{% trans "168 hours (7 days)" %}</span></div>
                        </li>
                    </ul>
                </div>

                <!-- Action Buttons -->
                <div class="space-y-3 animate-in">
                    <button type="submit" class="btn-submit">
                        <i data-lucide="check-circle" class="w-5 h-5"></i>
                        {% trans "Create Complaint" %}
                    </button>
                    {% if source_user %}
                    <a href="{% url 'px_sources:source_user_complaint_list' %}" class="btn-cancel">
                        <i data-lucide="x-circle" class="w-5 h-5"></i>
                        {% trans "Cancel" %}
                    </a>
                    {% else %}
                    <a href="{% url 'complaints:complaint_list' %}" class="btn-cancel">
                        <i data-lucide="x-circle" class="w-5 h-5"></i>
                        {% trans "Cancel" %}
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();

    // Hospital field - could be select or hidden input depending on user role
    const hospitalSelect = document.getElementById('hospitalSelect');
    const hospitalField = hospitalSelect || document.querySelector('input[name="hospital"]');
    
    const departmentSelect = document.getElementById('departmentSelect');
    const staffSelect = document.getElementById('staffSelect');
    const locationSelect = document.getElementById('locationSelect');
    const mainSectionSelect = document.getElementById('mainSectionSelect');
    const subsectionSelect = document.getElementById('subsectionSelect');
    const complaintTypeCards = document.querySelectorAll('.type-card');
    const complaintTypeInput = document.getElementById('complaintTypeInput');

    // Load departments on page load if hospital is already selected
    function loadDepartments(hospitalId) {
        if (!hospitalId || !departmentSelect) {
            if (departmentSelect) {
                departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';
            }
            return;
        }

        departmentSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';

        fetch('/organizations/api/departments/?hospital=' + hospitalId)
            .then(response => response.json())
            .then(data => {
                const results = data.results || data;
                departmentSelect.innerHTML = '<option value="">{% trans "Select Department" %}</option>';

                results.forEach(dept => {
                    const option = document.createElement('option');
                    option.value = dept.id;
                    option.textContent = {% if LANG == 'ar' %}dept.name_ar || dept.name{% else %}dept.name{% endif %};
                    departmentSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error loading departments:', error);
                departmentSelect.innerHTML = '<option value="">{% trans "Error loading departments" %}</option>';
            });
    }

    // Location hierarchy cascading dropdowns
    if (locationSelect) {
        locationSelect.addEventListener('change', function () {
            const locationId = this.value;
            if (!locationId) {
                if (mainSectionSelect) mainSectionSelect.innerHTML = '<option value="">{% trans "Select Section" %}</option>';
                if (subsectionSelect) subsectionSelect.innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
                return;
            }
            if (mainSectionSelect) {
                mainSectionSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
            }
            fetch('{% url "organizations:ajax_main_sections" %}?location_id=' + locationId)
                .then(r => r.json())
                .then(data => {
                    const sections = data.sections || [];
                    if (mainSectionSelect) {
                        mainSectionSelect.innerHTML = '<option value="">{% trans "Select Section" %}</option>';
                        sections.forEach(section => {
                            const opt = document.createElement('option');
                            opt.value = section.id;
                            opt.textContent = {% if LANG == 'ar' %}section.name_ar || section.name{% else %}section.name{% endif %};
                            mainSectionSelect.appendChild(opt);
                        });
                    }
                    if (subsectionSelect) {
                        subsectionSelect.innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
                    }
                })
                .catch(err => {
                    console.error('Failed to load main sections:', err);
                    if (mainSectionSelect) mainSectionSelect.innerHTML = '<option value="">{% trans "Error loading sections" %}</option>';
                });
        });
    }

    if (mainSectionSelect) {
        mainSectionSelect.addEventListener('change', function () {
            const locationId = locationSelect ? locationSelect.value : '';
            const mainSectionId = this.value;
            if (!locationId || !mainSectionId) {
                if (subsectionSelect) subsectionSelect.innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
                return;
            }
            if (subsectionSelect) {
                subsectionSelect.innerHTML = '<option value="">{% trans "Loading..." %}</option>';
            }
            fetch('{% url "organizations:ajax_subsections" %}?location_id=' + locationId + '&main_section_id=' + mainSectionId)
                .then(r => r.json())
                .then(data => {
                    const subsections = data.subsections || [];
                    if (subsectionSelect) {
                        subsectionSelect.innerHTML = '<option value="">{% trans "Select Subsection" %}</option>';
                        subsections.forEach(sub => {
                            const opt = document.createElement('option');
                            opt.value = sub.internal_id || sub.id;
                            opt.textContent = {% if LANG == 'ar' %}sub.name_ar || sub.name{% else %}sub.name{% endif %};
                            subsectionSelect.appendChild(opt);
                        });
                    }
                })
                .catch(err => {
                    console.error('Failed to load subsections:', err);
                    if (subsectionSelect) subsectionSelect.innerHTML = '<option value="">{% trans "Error loading subsections" %}</option>';
                });
        });
    }

    // Complaint type selection
    complaintTypeCards.forEach(card => {
        card.addEventListener('click', function() {
            complaintTypeCards.forEach(c => {
                c.classList.remove('active');
            });
            this.classList.add('active');
            complaintTypeInput.value = this.dataset.value;
        });
    });

    // Patient auto-lookup by national_id
    const nationalIdField = document.getElementById('id_national_id');
    const patientIdField = document.getElementById('patientId');
    const patientFoundBanner = document.getElementById('patientFoundBanner');
    const patientFoundName = document.getElementById('patientFoundName');
    const patientFoundMrn = document.getElementById('patientFoundMrn');
    const patientNameField = document.getElementById('id_patient_name');

    let patientLookupTimer = null;

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

    if (nationalIdField) {
        nationalIdField.addEventListener('input', function () {
            clearTimeout(patientLookupTimer);
            const val = this.value.trim();
            if (val.length < 5) {
                clearPatientLink();
                return;
            }
            patientLookupTimer = setTimeout(function () {
                fetch(`/complaints/api/lookup-patient/?national_id=${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 (patientNameField && !patientNameField.value.trim()) {
                                patientNameField.value = data.name;
                            }
                            lucide.createIcons();
                        } else {
                            clearPatientLink();
                        }
                    })
                    .catch(error => console.error('Patient lookup error:', error));
            }, 500);
        });
    }
});
</script>
{% endblock %}