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

{% block title %}{% trans "Submit Feedback" %} - PX360{% endblock %}

{% block extra_css %}
<style>
/* Hide the header on this page */
header.glass-card {
    display: none !important;
}

/* Language switcher styles */
.lang-switcher {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100;
    display: flex;
    gap: 0.5rem;
}

.lang-switcher a {
    padding: 0.5rem 1rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lang-switcher a:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

.lang-switcher a.active {
    background: white;
    color: #005696;
    border-color: white;
}

[dir="rtl"] .lang-switcher {
    right: auto;
    left: 1rem;
}
/* PX360 Theme */
.selection-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.selection-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px -10px rgba(0, 86, 150, 0.3);
}

.form-container.active {
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.severity-option {
    transition: all 0.2s ease;
    cursor: pointer;
}
.severity-option:hover {
    transform: translateY(-2px);
}
.severity-option.selected {
    border-color: #007bbd !important;
    background-color: #eef6fb !important;
    box-shadow: 0 4px 12px rgba(0, 123, 189, 0.2);
}

.file-upload-area {
    transition: all 0.2s ease;
}
.file-upload-area:hover {
    border-color: #007bbd;
    background-color: #eef6fb;
}

/* Custom scrollbar for form content */
#formContent::-webkit-scrollbar {
    width: 6px;
}
#formContent::-webkit-scrollbar-track {
    background: #f1f5f9;
}
#formContent::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

/* Complaint Form Styles */
.complaint-form {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 0;
}

.form-section {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    transition: all 0.3s ease;
}

.form-section:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.form-section h3 {
    color: #005696;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #eef6fb;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.25rem;
    font-weight: 700;
}

.form-control {
    width: 100%;
    padding: 0.875rem 1.125rem;
    border: 2px solid #cbd5e1;
    border-radius: 0.875rem;
    font-size: 0.95rem;
    transition: all 0.2s;
    background: white;
    color: #1e293b;
    font-family: 'Inter', sans-serif;
}

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

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

.form-text {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.825rem;
    color: #64748b;
}

.required-mark {
    color: #ef4444;
}

.alert-box {
    padding: 1.5rem 1.75rem;
    border-radius: 1.25rem;
    margin-bottom: 2rem;
}

.alert-box.info {
    background: linear-gradient(135deg, #eef6fb 0%, #e0f2fe 100%);
    color: #005696;
    border: 2px solid #bae6fd;
}

.location-hierarchy-help {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-left: 4px solid #f59e0b;
    padding: 1.25rem;
    margin: 1.25rem 0;
    border-radius: 1rem;
    font-size: 0.9rem;
    color: #4b5563;
}

[dir="rtl"] .location-hierarchy-help {
    border-left: none;
    border-right: 4px solid #f59e0b;
}

.btn-submit {
    background: linear-gradient(135deg, #005696 0%, #007bbd 100%);
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 1rem;
    color: white;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 16px rgba(0, 86, 150, 0.25);
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 86, 150, 0.35);
}

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

.spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.form-input {
    transition: all 0.2s ease;
}

.form-input:focus {
    transform: translateY(-1px);
}

.btn-hover {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 86, 150, 0.2);
}
</style>
{% endblock %}

{% block content %}
<!-- Language Switcher -->
<div class="lang-switcher">
    {% get_available_languages as LANGUAGES %}
    {% get_current_language as LANGUAGE_CODE %}
    {% for lang_code, lang_name in LANGUAGES %}
        <a href="{% url 'core:set_language' %}?language={{ lang_code }}"
           class="{% if LANGUAGE_CODE == lang_code %}active{% endif %}">
            <span>{% if lang_code == 'en' %}🇬🇧{% elif lang_code == 'ar' %}🇸🇦{% endif %}</span>
            <span>{{ lang_name }}</span>
        </a>
    {% endfor %}
</div>

<div class="max-w-6xl mx-auto">
    <!-- Welcome Card -->
    <div id="welcomeCard" class="rounded-3xl shadow-2xl overflow-hidden mb-8 text-center animate-fade-in">
        <!-- Logo Banner - Full Width White -->
        <div class="bg-white w-full py-8 px-6 flex items-center justify-center">
            <img src="{% static 'img/hh-logo.png' %}" alt="Al Hammadi Hospital" class="max-h-16 w-auto object-contain">
        </div>
        <!-- Text Content Below - White Background -->
        <div class="bg-white p-8">
            <h1 class="text-2xl font-bold text-navy mb-3">{% trans "We Value Your Feedback" %}</h1>
            <p class="text-slate text-base max-w-xl mx-auto">
                {% trans "Your feedback helps us improve our services and provide better care for everyone. Choose a category below to get started." %}
            </p>
        </div>
    </div>

    <!-- Selection Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-8" id="selectionCards">
        <!-- Complaint Card -->
        <div class="selection-card glass-card rounded-2xl shadow-xl border-2 border-transparent p-8 text-center cursor-pointer relative overflow-hidden group"
             data-type="complaint">
            <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-red-400 to-red-600"></div>
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-red-50 to-red-100 mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <i data-lucide="alert-circle" class="w-8 h-8 text-red-600"></i>
            </div>
            <h3 class="text-xl font-bold text-navy mb-3">{% trans "Complaint" %}</h3>
            <p class="text-slate text-sm leading-relaxed">
                {% trans "Report an issue with our services. We take all concerns seriously and will investigate thoroughly." %}
            </p>
        </div>

        <!-- Observation Card -->
        <div class="selection-card glass-card rounded-2xl shadow-xl border-2 border-transparent p-8 text-center cursor-pointer relative overflow-hidden group"
             data-type="observation">
            <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-purple-400 to-purple-600"></div>
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-50 to-purple-100 mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <i data-lucide="eye" class="w-8 h-8 text-purple-600"></i>
            </div>
            <h3 class="text-xl font-bold text-navy mb-3">{% trans "Observation" %}</h3>
            <p class="text-slate text-sm leading-relaxed">
                {% trans "Help us improve safety by sharing what you've noticed. Anonymous submissions are welcome." %}
            </p>
        </div>

        <!-- Inquiry Card -->
        <div class="selection-card glass-card rounded-2xl shadow-xl border-2 border-transparent p-8 text-center cursor-pointer relative overflow-hidden group"
             data-type="inquiry">
            <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-amber-400 to-amber-600"></div>
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-amber-50 to-amber-100 mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <i data-lucide="help-circle" class="w-8 h-8 text-amber-600"></i>
            </div>
            <h3 class="text-xl font-bold text-navy mb-3">{% trans "Inquiry" %}</h3>
            <p class="text-slate text-sm leading-relaxed">
                {% trans "Have questions? We're here to help with appointments, services, or general information." %}
            </p>
        </div>

        <!-- Appreciation Card -->
        <div class="selection-card glass-card rounded-2xl shadow-xl border-2 border-transparent p-8 text-center cursor-pointer relative overflow-hidden group"
             data-type="appreciation">
            <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-green-400 to-emerald-600"></div>
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-green-50 to-green-100 mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <i data-lucide="heart" class="w-8 h-8 text-green-600"></i>
            </div>
            <h3 class="text-xl font-bold text-navy mb-3">{% trans "Appreciation" %}</h3>
            <p class="text-slate text-sm leading-relaxed">
                {% trans "Recognize a staff member or team who made a positive difference in your experience." %}
            </p>
        </div>

        <!-- Suggestion Card -->
        <div class="selection-card glass-card rounded-2xl shadow-xl border-2 border-transparent p-8 text-center cursor-pointer relative overflow-hidden group"
             data-type="suggestion">
            <div class="absolute top-0 left-0 right-0 h-2 bg-gradient-to-r from-cyan-400 to-blue-600"></div>
            <div class="w-16 h-16 rounded-2xl bg-gradient-to-br from-cyan-50 to-cyan-100 mx-auto mb-4 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
                <i data-lucide="lightbulb" class="w-8 h-8 text-cyan-600"></i>
            </div>
            <h3 class="text-xl font-bold text-navy mb-3">{% trans "Suggestion" %}</h3>
            <p class="text-slate text-sm leading-relaxed">
                {% trans "Share your ideas to help us improve our services and facilities for everyone." %}
            </p>
        </div>
    </div>

    <!-- Form Container -->
    <div class="form-container glass-card rounded-3xl shadow-2xl p-8 mb-8 hidden animate-slide-up" id="publicFormContainer">
        <!-- Back Button -->
        <div class="mb-6">
            <button class="inline-flex items-center gap-2 px-6 py-3 bg-white text-navy border-2 border-navy font-bold rounded-xl hover:bg-navy hover:text-white transition-all duration-200 shadow-md hover:shadow-lg"
                    onclick="resetToSelection()">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
                {% trans "Back to Selection" %}
            </button>
        </div>

        <!-- Loading Spinner -->
        <div class="loading-spinner text-center py-16 hidden" id="loadingSpinner">
            <div class="inline-block w-14 h-14 border-4 border-slate-200 border-t-blue rounded-full animate-spin mb-4"></div>
            <p class="text-slate text-sm font-medium">{% trans "Loading form..." %}</p>
        </div>

        <!-- Form Content -->
        <div id="formContent" class="pr-2"></div>
    </div>

    <!-- Track Submission Links -->
    <div class="glass-card rounded-2xl shadow-xl p-8 text-center">
        <p class="text-slate mb-4 font-medium">{% trans "Already submitted something?" %}</p>
        <a href="{% url 'core:public_track' %}"
           class="inline-flex items-center gap-2 px-8 py-3.5 bg-navy text-white rounded-xl hover:bg-blue transition font-semibold shadow-lg shadow-navy/30 btn-hover text-lg">
            <i data-lucide="search" class="w-5 h-5"></i>
            {% trans "Track Your Submission" %}
        </a>
    </div>
</div>

<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-3xl shadow-2xl w-full max-w-sm p-8 text-center animate-slide-up">
        <div class="inline-flex items-center justify-center w-20 h-20 bg-gradient-to-br from-emerald-400 to-emerald-600 rounded-full mb-6 shadow-xl">
            <i data-lucide="check" class="w-10 h-10 text-white"></i>
        </div>
        <h3 class="text-2xl font-bold text-navy mb-3">{% trans "Submitted Successfully!" %}</h3>
        <p class="text-slate text-sm mb-4">{% trans "Your submission has been received and will be reviewed." %}</p>
        <div class="bg-light rounded-xl p-4 mb-6">
            <p class="text-slate text-xs font-semibold mb-1">{% trans "Reference Number:" %}</p>
            <span id="referenceNumber" class="text-2xl font-bold text-navy tracking-wide"></span>
        </div>
        <button onclick="closeSuccessModal()" class="w-full bg-gradient-to-r from-navy to-blue text-white px-6 py-3.5 rounded-xl font-semibold hover:shadow-xl transition btn-hover">
            {% trans "Done" %}
        </button>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'vendor/sweetalert2/sweetalert2.all.min.js' %}"></script>{% trans "Error" as t_error %}
{% trans "Failed to load form." as t_failed_to_load_form %}
{% trans "Select Category" as t_select_category %}
{% trans "optional" as t_optional %}
{% trans "Report an Observation" as t_report_an_observation %}
{% trans "Help us improve by reporting issues you notice. Your input is valuable." as t_help_us_improve_by_reporting_issues_you_notice_you %}
{% trans "Category" as t_category %}
{% trans "Severity" as t_severity %}
{% trans "Low" as t_low %}
{% trans "Medium" as t_medium %}
{% trans "High" as t_high %}
{% trans "Critical" as t_critical %}
{% trans "Title" as t_title %}
{% trans "Brief descriptive title" as t_brief_descriptive_title %}
{% trans "Description" as t_description %}
{% trans "Describe what you observed in detail..." as t_describe_what_you_observed_in_detail %}
{% trans "Location" as t_location %}
{% trans "Where did this occur?" as t_where_did_this_occur %}
{% trans "When" as t_when %}
{% trans "Attachments" as t_attachments %}
{% trans "Click to upload files" as t_click_to_upload_files %}
{% trans "Images, PDF, Word (max 10MB)" as t_images_pdf_word_max_10mb %}
{% trans "Your Info" as t_your_info %}
{% trans "optional - leave blank for anonymous" as t_optional_leave_blank_for_anonymous %}
{% trans "Staff ID" as t_staff_id %}
{% trans "Name" as t_name %}
{% trans "Phone" as t_phone %}
{% trans "Email" as t_email %}
{% trans "Submit Observation" as t_submit_observation %}
{% trans "Submitting..." as t_submitting %}
{% trans "Failed to submit" as t_failed_to_submit %}
{% trans "Select Hospital" as t_select_hospital %}
{% trans "Inquiry Details" as t_inquiry_details %}
{% trans "Your full name" as t_your_full_name %}
{% trans "Email Address" as t_email_address %}
{% trans "Phone Number" as t_phone_number %}
{% trans "Your phone number" as t_your_phone_number %}
{% trans "Hospital" as t_hospital %}
{% trans "General Inquiry" as t_general_inquiry %}
{% trans "Services Information" as t_services_information %}
{% trans "Appointments" as t_appointments %}
{% trans "Billing & Insurance" as t_billing_insurance %}
{% trans "Medical Records" as t_medical_records %}
{% trans "Other" as t_other %}
{% trans "Subject" as t_subject %}
{% trans "Brief subject of your inquiry" as t_brief_subject_of_your_inquiry %}
{% trans "Message" as t_message %}
{% trans "Please describe your inquiry in detail..." as t_please_describe_your_inquiry_in_detail %}
{% trans "Submit Inquiry" as t_submit_inquiry %}
{% trans "Failed" as t_failed %}
{% trans "Select Location" as t_select_location %}
{% trans "Main Section" as t_main_section %}
{% trans "Subsection" as t_subsection %}
{% trans "Select Main Section" as t_select_main_section %}
{% trans "Select Subsection" as t_select_subsection %}
{% trans "Select Domain" as t_select_domain %}
{% trans "Select Subcategory" as t_select_subcategory %}
{% trans "Select Classification" as t_select_classification %}
{% trans "Failed to submit. Please try again." as t_failed_to_submit_please_try_again %}
{% trans "Share Your Appreciation" as t_share_your_appreciation %}
{% trans "Recognize a staff member or team who made a difference in your experience." as t_recognize_a_staff_member_or_team_who_made_a_differ %}
{% trans "Your Name" as t_your_name %}
{% trans "Your Phone" as t_your_phone %}
{% trans "Staff / Department Name" as t_staff_department_name %}
{% trans "Name of staff or department" as t_name_of_staff_or_department %}
{% trans "Your Appreciation" as t_your_appreciation %}
{% trans "Share what this person or team did that made your experience special..." as t_share_what_this_person_or_team_did_that_made_your_ %}
{% trans "Submit Appreciation" as t_submit_appreciation %}
{% trans "Thank You!" as t_thank_you %}
{% trans "Thank you for your appreciation! Your kind words will be reviewed and shared with the staff member or department you recognized." as t_thank_you_for_your_appreciation_your_kind_words_wi %}
{% trans "Share Your Suggestion" as t_share_your_suggestion %}
{% trans "Your ideas help us improve. Share how we can make our services better for everyone." as t_your_ideas_help_us_improve_share_how_we_can_make_o %}
{% trans "Suggestion Area" as t_suggestion_area %}
{% trans "General" as t_general %}
{% trans "Clinical Care" as t_clinical_care %}
{% trans "Facility & Environment" as t_facility_environment %}
{% trans "Staff Service" as t_staff_service %}
{% trans "Communication" as t_communication %}
{% trans "Technology & Systems" as t_technology_systems %}
{% trans "Food Service" as t_food_service %}
{% trans "Appointment & Scheduling" as t_appointment_scheduling %}
{% trans "Suggestion Title" as t_suggestion_title %}
{% trans "Brief title for your suggestion" as t_brief_title_for_your_suggestion %}
{% trans "Your Suggestion" as t_your_suggestion %}
{% trans "Describe your suggestion in detail. What would you like to see improved or changed?" as t_describe_your_suggestion_in_detail_what_would_you_ %}
{% trans "Submit Suggestion" as t_submit_suggestion %}
{% trans "Thank you for your suggestion! We appreciate your input and will review it carefully." as t_thank_you_for_your_suggestion_we_appreciate_your_i %}
{% trans "Failed to load hospitals." as t_failed_to_load_hospitals %}
{% trans "Ask a question. We'll respond within 24-48 hours." as t_ask_a_question_we_ll_respond_within_24_48_hours %}
<script>
var T = {
    error: '{{ t_error|escapejs }}',
    failed_to_load_form: '{{ t_failed_to_load_form|escapejs }}',
    select_category: '{{ t_select_category|escapejs }}',
    optional: '{{ t_optional|escapejs }}',
    report_an_observation: '{{ t_report_an_observation|escapejs }}',
    help_us_improve_by_reporting_issues_you_notice_you: '{{ t_help_us_improve_by_reporting_issues_you_notice_you|escapejs }}',
    category: '{{ t_category|escapejs }}',
    severity: '{{ t_severity|escapejs }}',
    low: '{{ t_low|escapejs }}',
    medium: '{{ t_medium|escapejs }}',
    high: '{{ t_high|escapejs }}',
    critical: '{{ t_critical|escapejs }}',
    title: '{{ t_title|escapejs }}',
    brief_descriptive_title: '{{ t_brief_descriptive_title|escapejs }}',
    description: '{{ t_description|escapejs }}',
    describe_what_you_observed_in_detail: '{{ t_describe_what_you_observed_in_detail|escapejs }}',
    location: '{{ t_location|escapejs }}',
    where_did_this_occur: '{{ t_where_did_this_occur|escapejs }}',
    when: '{{ t_when|escapejs }}',
    attachments: '{{ t_attachments|escapejs }}',
    click_to_upload_files: '{{ t_click_to_upload_files|escapejs }}',
    images_pdf_word_max_10mb: '{{ t_images_pdf_word_max_10mb|escapejs }}',
    your_info: '{{ t_your_info|escapejs }}',
    optional_leave_blank_for_anonymous: '{{ t_optional_leave_blank_for_anonymous|escapejs }}',
    staff_id: '{{ t_staff_id|escapejs }}',
    name: '{{ t_name|escapejs }}',
    phone: '{{ t_phone|escapejs }}',
    email: '{{ t_email|escapejs }}',
    submit_observation: '{{ t_submit_observation|escapejs }}',
    submitting: '{{ t_submitting|escapejs }}',
    failed_to_submit: '{{ t_failed_to_submit|escapejs }}',
    select_hospital: '{{ t_select_hospital|escapejs }}',
    inquiry_details: '{{ t_inquiry_details|escapejs }}',
    your_full_name: '{{ t_your_full_name|escapejs }}',
    email_address: '{{ t_email_address|escapejs }}',
    phone_number: '{{ t_phone_number|escapejs }}',
    your_phone_number: '{{ t_your_phone_number|escapejs }}',
    hospital: '{{ t_hospital|escapejs }}',
    general_inquiry: '{{ t_general_inquiry|escapejs }}',
    services_information: '{{ t_services_information|escapejs }}',
    appointments: '{{ t_appointments|escapejs }}',
    billing_insurance: '{{ t_billing_insurance|escapejs }}',
    medical_records: '{{ t_medical_records|escapejs }}',
    other: '{{ t_other|escapejs }}',
    subject: '{{ t_subject|escapejs }}',
    brief_subject_of_your_inquiry: '{{ t_brief_subject_of_your_inquiry|escapejs }}',
    message: '{{ t_message|escapejs }}',
    please_describe_your_inquiry_in_detail: '{{ t_please_describe_your_inquiry_in_detail|escapejs }}',
    submit_inquiry: '{{ t_submit_inquiry|escapejs }}',
    failed: '{{ t_failed|escapejs }}',
    select_location: '{{ t_select_location|escapejs }}',
    main_section: '{{ t_main_section|escapejs }}',
    subsection: '{{ t_subsection|escapejs }}',
    select_main_section: '{{ t_select_main_section|escapejs }}',
    select_subsection: '{{ t_select_subsection|escapejs }}',
    select_domain: '{{ t_select_domain|escapejs }}',
    select_subcategory: '{{ t_select_subcategory|escapejs }}',
    select_classification: '{{ t_select_classification|escapejs }}',
    failed_to_submit_please_try_again: '{{ t_failed_to_submit_please_try_again|escapejs }}',
    share_your_appreciation: '{{ t_share_your_appreciation|escapejs }}',
    recognize_a_staff_member_or_team_who_made_a_differ: '{{ t_recognize_a_staff_member_or_team_who_made_a_differ|escapejs }}',
    your_name: '{{ t_your_name|escapejs }}',
    your_phone: '{{ t_your_phone|escapejs }}',
    staff_department_name: '{{ t_staff_department_name|escapejs }}',
    name_of_staff_or_department: '{{ t_name_of_staff_or_department|escapejs }}',
    your_appreciation: '{{ t_your_appreciation|escapejs }}',
    share_what_this_person_or_team_did_that_made_your_: '{{ t_share_what_this_person_or_team_did_that_made_your_|escapejs }}',
    submit_appreciation: '{{ t_submit_appreciation|escapejs }}',
    thank_you: '{{ t_thank_you|escapejs }}',
    thank_you_for_your_appreciation_your_kind_words_wi: '{{ t_thank_you_for_your_appreciation_your_kind_words_wi|escapejs }}',
    share_your_suggestion: '{{ t_share_your_suggestion|escapejs }}',
    your_ideas_help_us_improve_share_how_we_can_make_o: '{{ t_your_ideas_help_us_improve_share_how_we_can_make_o|escapejs }}',
    suggestion_area: '{{ t_suggestion_area|escapejs }}',
    general: '{{ t_general|escapejs }}',
    clinical_care: '{{ t_clinical_care|escapejs }}',
    facility_environment: '{{ t_facility_environment|escapejs }}',
    staff_service: '{{ t_staff_service|escapejs }}',
    communication: '{{ t_communication|escapejs }}',
    technology_systems: '{{ t_technology_systems|escapejs }}',
    food_service: '{{ t_food_service|escapejs }}',
    appointment_scheduling: '{{ t_appointment_scheduling|escapejs }}',
    suggestion_title: '{{ t_suggestion_title|escapejs }}',
    brief_title_for_your_suggestion: '{{ t_brief_title_for_your_suggestion|escapejs }}',
    your_suggestion: '{{ t_your_suggestion|escapejs }}',
    describe_your_suggestion_in_detail_what_would_you_: '{{ t_describe_your_suggestion_in_detail_what_would_you_|escapejs }}',
    submit_suggestion: '{{ t_submit_suggestion|escapejs }}',
    thank_you_for_your_suggestion_we_appreciate_your_i: '{{ t_thank_you_for_your_suggestion_we_appreciate_your_i|escapejs }}',
    failed_to_load_hospitals: '{{ t_failed_to_load_hospitals|escapejs }}',
    ask_a_question_we_ll_respond_within_24_48_hours: '{{ t_ask_a_question_we_ll_respond_within_24_48_hours|escapejs }}'
};
var CSRF_INPUT = '<input type="hidden" name="csrfmiddlewaretoken" value="{{ csrf_token|escapejs }}">';
</script>

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

    // Card selection
    document.querySelectorAll('.selection-card').forEach(function(card) {
        card.addEventListener('click', function() {
            const formType = this.getAttribute('data-type');
            currentFormType = formType;
            document.getElementById('selectionCards').style.display = 'none';
            document.getElementById('welcomeCard').style.display = 'none';
            const formContainer = document.getElementById('publicFormContainer');
            formContainer.classList.remove('hidden');
            formContainer.classList.add('active');
            loadForm(formType);
        });
    });

    function loadForm(formType) {
        document.getElementById('loadingSpinner').classList.remove('hidden');
        document.getElementById('formContent').classList.add('hidden');

        fetch('/core/api/hospitals/')
            .then(r => r.json())
            .then(data => {
                const hospitals = data.hospitals || [];

                if (formType === 'complaint') {
                    fetch('{% url "complaints:public_complaint_submit" %}')
                        .then(r => r.text())
                        .then(html => {
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(html, 'text/html');
                            const formHtml = doc.querySelector('.complaint-form')?.innerHTML || '';
                            document.getElementById('formContent').innerHTML = formHtml;

                            setTimeout(() => {
                                lucide.createIcons();
                                initComplaintFormInLanding();
                            }, 100);

                            showForm();
                        })
                        .catch((error) => {
                            console.error('Error loading complaint form:', error);
                            document.getElementById('loadingSpinner').classList.add('hidden');
                            Swal.fire({ icon: 'error', title: T.error, text: T.failed_to_load_form });
                        });
                } else if (formType === 'observation') {
                    fetchCategoriesAndRenderObservationForm(hospitals);
                } else if (formType === 'inquiry') {
                    renderInquiryForm(hospitals);
                } else if (formType === 'appreciation') {
                    renderAppreciationForm(hospitals);
                } else if (formType === 'suggestion') {
                    renderSuggestionForm(hospitals);
                }
            })
            .catch(() => {
                document.getElementById('loadingSpinner').classList.add('hidden');
                Swal.fire({ icon: 'error', title: T.error, text: T.failed_to_load_hospitals });
            });
    }

    function fetchCategoriesAndRenderObservationForm(hospitals) {
        fetch('/core/api/observation-categories/')
            .then(r => r.json())
            .then(data => { renderObservationForm(data.categories || [], hospitals); })
            .catch(() => {
                document.getElementById('loadingSpinner').classList.add('hidden');
                Swal.fire({ icon: 'error', title: T.error, text: T.failed_to_load_form });
            });
    }

    function renderObservationForm(categories, hospitals) {
        const lang = '{{ LANGUAGE_CODE }}';
        let catOptions = '<option value="">' + T.select_category + ' (' + T.optional + ')</option>';
        categories.forEach(c => {
            const name = lang === 'ar' ? c.name_ar : c.name_en;
            catOptions += `<option value="${c.id}">${name}</option>`;
        });

        let hospOpts = '<option value="">' + T.select_hospital + '</option>';
        hospitals.forEach(h => hospOpts += `<option value="${h.id}">${h.name}</option>`);

        const formHtml = `
            <form id="observationForm" enctype="multipart/form-data">
                ${CSRF_INPUT}
                <div class="mb-6">
                    <h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
                        <i data-lucide="eye" class="w-6 h-6 text-purple-600"></i>
                        ${T.report_an_observation}
                    </h3>
                    <p class="text-slate text-sm">${T.help_us_improve_by_reporting_issues_you_notice_you}</p>
                </div>

                <input type="hidden" name="severity" id="severityInput" value="medium">
                <input type="hidden" name="category" value="">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.name} <span class="text-red-500">*</span></label>
                        <input type="text" name="reporter_name" required placeholder="${T.your_full_name}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.phone_number} <span class="text-red-500">*</span></label>
                        <input type="tel" name="reporter_phone" maxlength="20" required placeholder="${T.your_phone_number}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 form-input">
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.hospital} <span class="text-red-500">*</span></label>
                    <select name="hospital" required
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 bg-white form-input">
                        ${hospOpts}
                    </select>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.description} <span class="text-red-500">*</span></label>
                    <textarea name="description" rows="5" required placeholder="${T.describe_what_you_observed_in_detail}"
                              class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 resize-none form-input"></textarea>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.location}</label>
                    <select id="id_location" name="location"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 bg-white form-input">
                        <option value="">${T.select_location}</option>
                    </select>
                </div>

                <div id="main_section_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.main_section}</label>
                    <select id="id_main_section" name="main_section"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 bg-white form-input">
                        <option value="">${T.select_main_section}</option>
                    </select>
                </div>

                <div id="subsection_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.subsection}</label>
                    <select id="id_subsection" name="subsection"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-purple-500/20 bg-white form-input">
                        <option value="">${T.select_subsection}</option>
                    </select>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.attachments}</label>
                    <div class="file-upload-area border-2 border-dashed border-slate-300 rounded-xl p-6 text-center cursor-pointer bg-slate-50 hover:bg-blue/5 transition"
                         onclick="document.getElementById('obsFiles').click()">
                        <i data-lucide="upload-cloud" class="w-10 h-10 text-purple-600 mx-auto mb-2"></i>
                        <p class="text-navy text-sm font-semibold">${T.click_to_upload_files}</p>
                        <p class="text-slate text-xs mt-1">${T.images_pdf_word_max_10mb}</p>
                    </div>
                    <input type="file" id="obsFiles" name="attachments" multiple accept=".jpg,.jpeg,.png,.pdf,.doc,.docx" class="hidden" onchange="updateObsFileList()">
                    <div id="obsFileList" class="mt-3 space-y-2"></div>
                </div>

                <div class="text-center pt-4 border-t border-slate-100">
                    <button type="submit" class="bg-gradient-to-r from-purple-600 to-purple-700 text-white px-8 py-3.5 rounded-xl font-semibold hover:shadow-xl transition inline-flex items-center gap-2 btn-hover" id="obsSubmitBtn">
                        <i data-lucide="send" class="w-5 h-5"></i> ${T.submit_observation}
                    </button>
                </div>
            </form>
        `;

        document.getElementById('formContent').innerHTML = formHtml;
        lucide.createIcons();

        document.getElementById('observationForm').addEventListener('submit', handleObservationSubmit);
        initLocationHierarchy();
        showForm();
    }

    function updateObsFileList() {
        const input = document.getElementById('obsFiles');
        const list = document.getElementById('obsFileList');
        list.innerHTML = '';
        if (input.files.length > 0) {
            const div = document.createElement('div');
            div.className = 'space-y-2';
            for (let f of input.files) {
                const size = (f.size / 1024 / 1024).toFixed(2);
                div.innerHTML += `
                    <div class="flex items-center gap-3 text-sm text-navy p-3 bg-slate-50 rounded-xl">
                        <i data-lucide="file" class="w-5 h-5 text-slate-500"></i>
                        <span class="flex-1 truncate font-medium">${f.name}</span>
                        <span class="text-slate text-xs">${size} MB</span>
                    </div>
                `;
            }
            list.appendChild(div);
            lucide.createIcons();
        }
    }

    function handleObservationSubmit(e) {
        e.preventDefault();
        const btn = document.getElementById('obsSubmitBtn');
        const original = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>' + T.submitting;

        fetch('/core/public/observation/submit/', {
            method: 'POST',
            body: new FormData(this),
            headers: { 'X-CSRFToken': getCSRFToken() }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('referenceNumber').textContent = data.tracking_code;
                document.getElementById('successModal').classList.remove('hidden');
                this.reset();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: data.errors?.join('\\n') || T.failed_to_submit });
            }
        })
        .catch(() => Swal.fire({ icon: 'error', title: T.error, text: T.failed_to_submit }))
        .finally(() => { btn.disabled = false; btn.innerHTML = original; });
    }

    function renderInquiryForm(hospitals) {
        let opts = '<option value="">' + T.select_hospital + '</option>';
        hospitals.forEach(h => opts += `<option value="${h.id}">${h.name}</option>`);

        const formHtml = `
            <form id="inquiryForm">
                ${CSRF_INPUT}
                <div class="mb-6">
                    <h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
                        <i data-lucide="help-circle" class="w-6 h-6 text-amber-600"></i>
                        ${T.inquiry_details}
                    </h3>
                    <p class="text-slate text-sm">${T.ask_a_question_we_ll_respond_within_24_48_hours}</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.name} <span class="text-red-500">*</span></label>
                        <input type="text" name="name" required placeholder="${T.your_full_name}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.email_address}</label>
                        <input type="email" name="email" placeholder="your@email.com"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 form-input">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.phone_number} <span class="text-red-500">*</span></label>
                        <input type="tel" name="phone" maxlength="20" required placeholder="${T.your_phone_number}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.hospital} <span class="text-red-500">*</span></label>
                        <select name="hospital" required                                class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 bg-white form-input">
                            ${opts}
                        </select>
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.location}</label>
                    <select id="id_location" name="location"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 bg-white form-input">
                        <option value="">${T.select_location}</option>
                    </select>
                </div>

                <div id="main_section_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.main_section}</label>
                    <select id="id_main_section" name="main_section"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 bg-white form-input">
                        <option value="">${T.select_main_section}</option>
                    </select>
                </div>

                <div id="subsection_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.subsection}</label>
                    <select id="id_subsection" name="subsection"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 bg-white form-input">
                        <option value="">${T.select_subsection}</option>
                    </select>
                </div>

                <input type="hidden" name="category" value="general">

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.message} <span class="text-red-500">*</span></label>
                    <textarea name="message" rows="5" required placeholder="${T.please_describe_your_inquiry_in_detail}"
                              class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-amber/20 resize-none form-input"></textarea>
                </div>

                <div class="text-center pt-4 border-t border-slate-100">
                    <button type="submit" class="bg-gradient-to-r from-amber-600 to-amber-700 text-white px-8 py-3.5 rounded-xl font-semibold hover:shadow-xl transition inline-flex items-center gap-2 btn-hover" id="inqSubmitBtn">
                        <i data-lucide="send" class="w-5 h-5"></i> ${T.submit_inquiry}
                    </button>
                </div>
            </form>
        `;

        document.getElementById('formContent').innerHTML = formHtml;
        lucide.createIcons();
        document.getElementById('inquiryForm').addEventListener('submit', handleInquirySubmit);
        initLocationHierarchy();
        showForm();
    }

    function handleInquirySubmit(e) {
        e.preventDefault();
        const btn = document.getElementById('inqSubmitBtn');
        const original = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>' + T.submitting;

        fetch('{% url "core:public_inquiry_submit" %}', {
            method: 'POST',
            body: new FormData(this),
            headers: { 'X-CSRFToken': getCSRFToken() }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                document.getElementById('referenceNumber').textContent = data.reference_number;
                document.getElementById('successModal').classList.remove('hidden');
                this.reset();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: data.message || T.failed });
            }
        })
        .catch(() => Swal.fire({ icon: 'error', title: T.error, text: T.failed }))
        .finally(() => { btn.disabled = false; btn.innerHTML = original; });
    }

    function renderAppreciationForm(hospitals) {
        let opts = '<option value="">' + T.select_hospital + '</option>';
        hospitals.forEach(h => opts += `<option value="${h.id}">${h.name}</option>`);

        const formHtml = `
            <form id="appreciationForm">
                ${CSRF_INPUT}
                <div class="mb-6">
                    <h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
                        <i data-lucide="heart" class="w-6 h-6 text-green-600"></i>
                        ${T.share_your_appreciation}
                    </h3>
                    <p class="text-slate text-sm">${T.recognize_a_staff_member_or_team_who_made_a_differ}</p>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.your_name} <span class="text-red-500">*</span></label>
                        <input type="text" name="contact_name" required placeholder="${T.your_full_name}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.your_phone} <span class="text-red-500">*</span></label>
                        <input type="tel" name="contact_phone" required placeholder="${T.your_phone_number}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 form-input">
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.hospital} <span class="text-red-500">*</span></label>
                        <select name="hospital" required class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 bg-white form-input">
                            ${opts}
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.staff_department_name} <span class="text-xs font-normal text-slate">(${T.optional})</span></label>
                        <input type="text" name="staff_name" placeholder="${T.name_of_staff_or_department}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 form-input">
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.location}</label>
                    <select id="id_location" name="location"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 bg-white form-input">
                        <option value="">${T.select_location}</option>
                    </select>
                </div>

                <div id="main_section_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.main_section}</label>
                    <select id="id_main_section" name="main_section"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 bg-white form-input">
                        <option value="">${T.select_main_section}</option>
                    </select>
                </div>

                <div id="subsection_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.subsection}</label>
                    <select id="id_subsection" name="subsection"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 bg-white form-input">
                        <option value="">${T.select_subsection}</option>
                    </select>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.your_appreciation} <span class="text-red-500">*</span></label>
                    <textarea name="message" rows="5" required placeholder="${T.share_what_this_person_or_team_did_that_made_your_}"
                              class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-green/20 resize-none form-input"></textarea>
                </div>

                <div class="text-center pt-4 border-t border-slate-100">
                    <button type="submit" class="bg-gradient-to-r from-green-500 to-emerald-600 text-white px-8 py-3.5 rounded-xl font-semibold hover:shadow-xl transition inline-flex items-center gap-2 btn-hover" id="apprSubmitBtn">
                        <i data-lucide="heart" class="w-5 h-5"></i> ${T.submit_appreciation}
                    </button>
                </div>
            </form>
        `;

        document.getElementById('formContent').innerHTML = formHtml;
        lucide.createIcons();
        document.getElementById('appreciationForm').addEventListener('submit', handleAppreciationSubmit);
        initLocationHierarchy();
        showForm();
    }

    function handleAppreciationSubmit(e) {
        e.preventDefault();
        const btn = document.getElementById('apprSubmitBtn');
        const original = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>' + T.submitting;

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        fetch('/appreciation/public/submit/', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: { 'X-CSRFToken': getCSRFToken(), 'Content-Type': 'application/json' }
        })
        .then(r => {
            if (!r.ok) return r.text().then(t => { throw new Error('HTTP ' + r.status + ': ' + t); });
            return r.text().then(t => { try { return JSON.parse(t); } catch(e) { throw new Error('Invalid JSON: ' + t.substring(0, 200)); } });
        })
        .then(data => {
            if (data.success) {
                var refBlock = document.getElementById('referenceNumber').closest('.bg-light');
                if (refBlock) refBlock.style.display = 'none';
                document.querySelector('#successModal h3').textContent = T.thank_you;
                document.querySelector('#successModal p').textContent = T.thank_you_for_your_appreciation_your_kind_words_wi;
                document.getElementById('successModal').classList.remove('hidden');
                this.reset();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: data.message || T.failed });
            }
        })
        .catch(err => Swal.fire({ icon: 'error', title: T.error, text: err.message || T.failed }))
        .finally(() => { btn.disabled = false; btn.innerHTML = original; });
    }

    function renderSuggestionForm(hospitals) {
        let opts = '<option value="">' + T.select_hospital + '</option>';
        hospitals.forEach(h => opts += `<option value="${h.id}">${h.name}</option>`);

        const formHtml = `
            <form id="suggestionForm">
                ${CSRF_INPUT}
                <div class="mb-6">
                    <h3 class="text-2xl font-bold text-navy mb-2 flex items-center gap-3">
                        <i data-lucide="lightbulb" class="w-6 h-6 text-cyan-600"></i>
                        ${T.share_your_suggestion}
                    </h3>
                    <p class="text-slate text-sm">${T.your_ideas_help_us_improve_share_how_we_can_make_o}</p>
                </div>

                <input type="hidden" name="category" value="general">

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.your_name} <span class="text-red-500">*</span></label>
                        <input type="text" name="contact_name" required placeholder="${T.your_full_name}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 form-input">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-navy mb-2">${T.your_phone} <span class="text-red-500">*</span></label>
                        <input type="tel" name="contact_phone" required placeholder="${T.your_phone_number}"
                               class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 form-input">
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.hospital} <span class="text-red-500">*</span></label>
                    <select name="hospital" required class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 bg-white form-input">
                        ${opts}
                    </select>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.location}</label>
                    <select id="id_location" name="location"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 bg-white form-input">
                        <option value="">${T.select_location}</option>
                    </select>
                </div>

                <div id="main_section_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.main_section}</label>
                    <select id="id_main_section" name="main_section"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 bg-white form-input">
                        <option value="">${T.select_main_section}</option>
                    </select>
                </div>

                <div id="subsection_container" style="display: none;" class="mb-5">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.subsection}</label>
                    <select id="id_subsection" name="subsection"
                            class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 bg-white form-input">
                        <option value="">${T.select_subsection}</option>
                    </select>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-semibold text-navy mb-2">${T.your_suggestion} <span class="text-red-500">*</span></label>
                    <textarea name="message" rows="5" required placeholder="${T.describe_your_suggestion_in_detail_what_would_you_}"
                              class="w-full px-4 py-3 border border-slate-200 rounded-xl text-navy focus:outline-none focus:ring-2 focus:ring-cyan/20 resize-none form-input"></textarea>
                </div>

                <div class="text-center pt-4 border-t border-slate-100">
                    <button type="submit" class="bg-gradient-to-r from-cyan-500 to-blue-600 text-white px-8 py-3.5 rounded-xl font-semibold hover:shadow-xl transition inline-flex items-center gap-2 btn-hover" id="suggSubmitBtn">
                        <i data-lucide="lightbulb" class="w-5 h-5"></i> ${T.submit_suggestion}
                    </button>
                </div>
            </form>
        `;

        document.getElementById('formContent').innerHTML = formHtml;
        lucide.createIcons();
        document.getElementById('suggestionForm').addEventListener('submit', handleSuggestionSubmit);
        initLocationHierarchy();
        showForm();
    }

    function handleSuggestionSubmit(e) {
        e.preventDefault();
        const btn = document.getElementById('suggSubmitBtn');
        const original = btn.innerHTML;
        btn.disabled = true;
        btn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>' + T.submitting;

        const formData = new FormData(this);
        const data = Object.fromEntries(formData.entries());

        fetch('/suggestions/public/suggestion/', {
            method: 'POST',
            body: JSON.stringify(data),
            headers: { 'X-CSRFToken': getCSRFToken(), 'Content-Type': 'application/json' }
        })
        .then(r => {
            if (!r.ok) return r.text().then(t => { throw new Error('HTTP ' + r.status + ': ' + t); });
            return r.text().then(t => { try { return JSON.parse(t); } catch(e) { throw new Error('Invalid JSON: ' + t.substring(0, 200)); } });
        })
        .then(data => {
            if (data.success) {
                var refBlock = document.getElementById('referenceNumber').closest('.bg-light');
                if (refBlock) refBlock.style.display = 'none';
                document.querySelector('#successModal h3').textContent = T.thank_you;
                document.querySelector('#successModal p').textContent = T.thank_you_for_your_suggestion_we_appreciate_your_i;
                document.getElementById('successModal').classList.remove('hidden');
                this.reset();
            } else {
                Swal.fire({ icon: 'error', title: T.error, text: data.message || T.failed });
            }
        })
        .catch(err => Swal.fire({ icon: 'error', title: T.error, text: err.message || T.failed }))
        .finally(() => { btn.disabled = false; btn.innerHTML = original; });
    }


    function showForm() {
        document.getElementById('loadingSpinner').classList.add('hidden');
        document.getElementById('formContent').classList.remove('hidden');
    }

    function getCSRFToken() {
        return document.cookie.split('; ').find(r => r.startsWith('csrftoken='))?.split('=')[1] ||
               document.querySelector('[name="csrfmiddlewaretoken"]')?.value;
    }

    window.resetToSelection = function() {
        document.getElementById('publicFormContainer').classList.add('hidden');
        document.getElementById('formContent').innerHTML = '';
        document.getElementById('selectionCards').style.display = 'grid';
        document.getElementById('welcomeCard').style.display = '';
        currentFormType = null;
    };

    window.closeSuccessModal = function() {
        document.getElementById('successModal').classList.add('hidden');
        var refBlock = document.getElementById('referenceNumber').closest('.bg-light');
        if (refBlock) refBlock.style.display = '';
        resetToSelection();
    };

    // Complaint form helper functions - defined at global scope
    window.updateFileList = function() {
        const input = document.getElementById('id_attachments');
        const list = document.getElementById('fileList');
        if (!input || !list) return;
        
        list.innerHTML = '';
        if (input.files.length > 0) {
            const div = document.createElement('div');
            div.className = 'space-y-2';
            for (let f of input.files) {
                const size = (f.size / 1024 / 1024).toFixed(2);
                div.innerHTML += `
                    <div class="flex items-center gap-3 text-sm text-navy p-3 bg-slate-50 rounded-xl">
                        <i data-lucide="file" class="w-5 h-5 text-slate-500"></i>
                        <span class="flex-1 truncate font-medium">${f.name}</span>
                        <span class="text-slate text-xs">${size} MB</span>
                    </div>
                `;
            }
            list.appendChild(div);
            lucide.createIcons();
        }
    };

    // Location hierarchy loading functions for complaint form
    window.loadLocationsForForm = function() {
        const locationSelect = document.getElementById('id_location');
        if (!locationSelect) {
            console.error('Location select not found');
            return;
        }
        
        locationSelect.innerHTML = '<option value="">' + T.select_location + '</option>';
        
        fetch('/organizations/dropdowns/locations/')
            .then(r => r.json())
            .then(data => {
                data.forEach(loc => {
                    const opt = document.createElement('option');
                    opt.value = loc.id;
                    opt.textContent = loc.name;
                    locationSelect.appendChild(opt);
                });
            })
            .catch(err => console.error('Failed to load locations:', err));
    };

    window.loadMainSectionsForForm = function(locationId) {
        const mainSectionSelect = document.getElementById('id_main_section');
        const mainSectionContainer = document.getElementById('main_section_container');
        const subsectionSelect = document.getElementById('id_subsection');
        const subsectionContainer = document.getElementById('subsection_container');
        
        if (!mainSectionSelect) return;
        
        mainSectionSelect.innerHTML = '<option value="">' + T.select_main_section + '</option>';
        if (subsectionSelect) subsectionSelect.innerHTML = '<option value="">' + T.select_subsection + '</option>';
        
        if (!locationId) {
            if (mainSectionContainer) mainSectionContainer.style.display = 'none';
            if (subsectionContainer) subsectionContainer.style.display = 'none';
            return;
        }
        
        fetch('/organizations/ajax/main-sections/?location_id=' + locationId)
            .then(r => r.json())
            .then(data => {
                const sections = data.sections || [];
                sections.forEach(section => {
                    const opt = document.createElement('option');
                    opt.value = section.id;
                    opt.textContent = section.name;
                    mainSectionSelect.appendChild(opt);
                });
                if (mainSectionContainer) mainSectionContainer.style.display = sections.length ? 'block' : 'none';
                if (subsectionContainer && sections.length === 0) subsectionContainer.style.display = 'none';
            })
            .catch(err => console.error('Failed to load main sections:', err));
    };

    window.loadSubsectionsForForm = function(locationId, mainSectionId) {
        const subsectionSelect = document.getElementById('id_subsection');
        const subsectionContainer = document.getElementById('subsection_container');
        
        if (!subsectionSelect) return;
        
        subsectionSelect.innerHTML = '<option value="">' + T.select_subsection + '</option>';
        
        if (!locationId || !mainSectionId) {
            if (subsectionContainer) subsectionContainer.style.display = 'none';
            return;
        }
        
        fetch('/organizations/ajax/subsections/?location_id=' + locationId + '&main_section_id=' + mainSectionId)
            .then(r => r.json())
            .then(data => {
                const subsections = data.subsections || [];
                subsections.forEach(sub => {
                    const opt = document.createElement('option');
                    opt.value = sub.id;
                    opt.textContent = sub.name;
                    subsectionSelect.appendChild(opt);
                });
                if (subsectionContainer) subsectionContainer.style.display = subsections.length ? 'block' : 'none';
            })
            .catch(err => console.error('Failed to load subsections:', err));
    };

    window.initLocationHierarchy = function() {
        window.loadLocationsForForm();

        const locationSelect = document.getElementById('id_location');
        if (locationSelect) {
            locationSelect.addEventListener('change', function() {
                window.loadMainSectionsForForm(this.value);
            });
        }

        const mainSectionSelect = document.getElementById('id_main_section');
        if (mainSectionSelect) {
            mainSectionSelect.addEventListener('change', function() {
                const locationId = document.getElementById('id_location').value;
                window.loadSubsectionsForForm(locationId, this.value);
            });
        }
    };

    // Global variable to store all categories for taxonomy (legacy)
    window.allComplaintCategories = [];

    // Load taxonomy data
    window.loadTaxonomy = function(hospitalId) {
        fetch('{% url "complaints:api_load_categories" %}?hospital_id=' + (hospitalId || ''))
            .then(r => r.json())
            .then(data => {
                window.allComplaintCategories = data.categories || [];
                const domainSelect = document.getElementById('id_domain');
                if (!domainSelect) return;
                domainSelect.innerHTML = '<option value="">' + T.select_domain + '</option>';
                window.allComplaintCategories.filter(c => c.level === 1).forEach(cat => {
                    const opt = document.createElement('option');
                    opt.value = cat.id;
                    opt.textContent = cat.get_localized_name;
                    domainSelect.appendChild(opt);
                });
            })
            .catch(err => console.error('Load taxonomy error:', err));
    };

    // Load categories for selected domain
    window.loadCategories = function(domainId) {
        const catSelect = document.getElementById('id_category');
        const catContainer = document.getElementById('category_container');
        if (!catSelect) return;
        catSelect.innerHTML = '<option value="">' + T.select_category + '</option>';
        if (!domainId) {
            if (catContainer) catContainer.style.display = 'none';
            window.loadSubcategories('');
            return;
        }
        const categories = window.allComplaintCategories.filter(c => c.level === 2 && c.parent_id == domainId);
        categories.forEach(cat => {
            const opt = document.createElement('option');
            opt.value = cat.id;
            opt.textContent = cat.get_localized_name;
            catSelect.appendChild(opt);
        });
        if (catContainer) catContainer.style.display = categories.length ? 'block' : 'none';
    };

    // Load subcategories for selected category
    window.loadSubcategories = function(categoryId) {
        const subSelect = document.getElementById('id_subcategory');
        const subContainer = document.getElementById('subcategory_container');
        if (!subSelect) return;
        subSelect.innerHTML = '<option value="">' + T.select_subcategory + '</option>';
        if (!categoryId) {
            if (subContainer) subContainer.style.display = 'none';
            window.loadClassifications('');
            return;
        }
        const subcategories = window.allComplaintCategories.filter(c => c.level === 3 && c.parent_id == categoryId);
        subcategories.forEach(cat => {
            const opt = document.createElement('option');
            opt.value = cat.id;
            opt.textContent = cat.get_localized_name;
            subSelect.appendChild(opt);
        });
        if (subContainer) subContainer.style.display = subcategories.length ? 'block' : 'none';
    };

    // Load classifications for selected subcategory
    window.loadClassifications = function(subcategoryId) {
        const clsSelect = document.getElementById('id_classification');
        const clsContainer = document.getElementById('classification_container');
        if (!clsSelect) return;
        clsSelect.innerHTML = '<option value="">' + T.select_classification + '</option>';
        if (!subcategoryId) {
            if (clsContainer) clsContainer.style.display = 'none';
            return;
        }
        const classifications = window.allComplaintCategories.filter(c => c.level === 4 && c.parent_id == subcategoryId);
        classifications.forEach(cat => {
            const opt = document.createElement('option');
            opt.value = cat.id;
            opt.textContent = cat.get_localized_name;
            clsSelect.appendChild(opt);
        });
        if (clsContainer) clsContainer.style.display = classifications.length ? 'block' : 'none';
    };

    // Initialize complaint form when loaded in landing page
    window.initComplaintFormInLanding = function() {
        // Add file upload click handler
        const uploadArea = document.querySelector('.border-dashed');
        if (uploadArea) {
            uploadArea.addEventListener('click', function() {
                document.getElementById('id_attachments').click();
            });
        }

        // Add file list update handler
        const fileInput = document.getElementById('id_attachments');
        if (fileInput) {
            fileInput.addEventListener('change', window.updateFileList);
        }

        // Load locations on form init
        window.loadLocationsForForm();

        // Location change -> load main sections
        const locationSelect = document.getElementById('id_location');
        if (locationSelect) {
            locationSelect.addEventListener('change', function() {
                window.loadMainSectionsForForm(this.value);
            });
        }

        // Main section change -> load subsections
        const mainSectionSelect = document.getElementById('id_main_section');
        if (mainSectionSelect) {
            mainSectionSelect.addEventListener('change', function() {
                const locationId = document.getElementById('id_location').value;
                window.loadSubsectionsForForm(locationId, this.value);
            });
        }

        // Add form submission handler
        const complaintForm = document.getElementById('public_complaint_form');
        if (complaintForm) {
            complaintForm.addEventListener('submit', function(e) {
                e.preventDefault();
                
                const submitBtn = complaintForm.querySelector('button[type="submit"]');
                const originalHTML = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<span class="inline-block w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></span>' + T.submitting;
                
                const formData = new FormData(complaintForm);
                
                fetch('/complaints/public/submit/', {
                    method: 'POST',
                    body: formData,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': getCSRFToken()
                    }
                })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('referenceNumber').textContent = data.reference_number;
                        document.getElementById('successModal').classList.remove('hidden');
                        complaintForm.reset();
                        // Hide cascading dropdowns
                        const mainSectionContainer = document.getElementById('main_section_container');
                        const subsectionContainer = document.getElementById('subsection_container');
                        if (mainSectionContainer) mainSectionContainer.style.display = 'none';
                        if (subsectionContainer) subsectionContainer.style.display = 'none';
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: T.error,
                            text: data.errors ? data.errors.join('\n') : (data.message || T.failed_to_submit_please_try_again)
                        });
                    }
                })
                .catch(err => {
                    console.error('Submit error:', err);
                    Swal.fire({
                        icon: 'error',
                        title: T.error,
                        text: T.failed_to_submit_please_try_again
                    });
                })
                .finally(() => {
                    submitBtn.disabled = false;
                    submitBtn.innerHTML = originalHTML;
                });
            });
            
            // Initialize icons
            lucide.createIcons();
        }
    };
});
</script>
{% endblock %}