{% set embedded = embedded|default(False) %}
{% set appointment_form_action = appointment_form_action|default('') %}

<div class="mb-6">
    {% if embedded %}
    <div class="flex items-center gap-2 text-blue-800 bg-blue-50 border border-blue-200 px-4 py-2 rounded-lg text-sm">
        <i class="fas fa-info-circle"></i>
        <span>Appointments scheduled here are linked to this case automatically.</span>
    </div>
    {% else %}
    <a href="{{ url_for('appointments_list') }}" class="text-blue-600 hover:text-blue-800">
        <i class="fas fa-arrow-left mr-2"></i>Back to Appointments
    </a>
    {% endif %}
</div>

<div class="max-w-5xl mx-auto bg-white rounded-lg shadow-md p-8">
    <h1 class="text-3xl font-bold text-gray-800 mb-6 flex items-center gap-2">
        <i class="fas fa-calendar-alt text-blue-600"></i>
        {% if appointment %}Edit Appointment{% else %}Schedule New Appointment{% endif %}
        {% if embedded and case_data %}
        <span class="text-lg font-normal text-gray-500">for Case #{{ case_data['file_case_id'] }}</span>
        {% endif %}
    </h1>
    
    <form id="appointmentSchedulerForm"
          method="POST"
          action="{{ appointment_form_action }}"
          class="space-y-6">
        
        <!-- Reference Number Banner -->
        <div class="sticky top-0 z-30 bg-white pt-1 pb-4 mb-6">
            <div class="bg-gray-50 border-2 border-gray-300 rounded-lg p-4 shadow-md">
                <label for="appointment_referenceInput" class="block text-sm font-medium text-gray-700 mb-2">
                    <i class="fas fa-hashtag mr-1"></i>Reference Number
                </label>
                <div class="w-full px-4 py-3 bg-blue-50 border-2 border-blue-400 rounded-lg text-lg font-bold tracking-wider text-blue-900 min-h-[3rem] flex items-center" id="appointment_referenceDisplay">
                    <span id="appointment_referenceText">{{ reference_number or 'Reference number will be auto-generated...' }}</span>
                </div>
                <input type="hidden" 
                       name="reference"
                       id="appointment_referenceInput"
                       value="{{ reference_number or '' }}"
                       required>
            </div>
        </div>

        <!-- Case Information -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-folder-open mr-2 text-purple-600"></i>Case Information
            </h2>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Link to Case *</label>
                <input type="hidden" 
                       id="appointment_case_id" 
                       name="case_id" 
                       required
                       value="{% if appointment %}{{ appointment['case_id'] }}{% elif case_id %}{{ case_id }}{% endif %}">
                
                <div class="relative">
                    <input type="text" 
                           id="appointment_case_search" 
                           placeholder="Type case number or claimant name..." 
                           autocomplete="off"
                           value="{% if appointment %}Case #{{ appointment['file_case_id'] }} - {{ appointment['claimant_first_name'] }} {{ appointment['claimant_last_name'] }}{% elif case_data %}Case #{{ case_data['file_case_id'] }} - {{ case_data['claimant_first_name'] }} {{ case_data['claimant_last_name'] }}{% endif %}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                    <div id="appointment_case_search_results" 
                         class="hidden absolute z-50 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-96 overflow-y-auto">
                    </div>
                </div>
                
                <div id="appointment_selected_case_display" 
                     class="mt-3 {% if not appointment and not case_data %}hidden{% endif %} bg-green-50 border-l-4 border-green-500 p-4 rounded">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <i class="fas fa-check-circle text-green-500 text-xl"></i>
                        </div>
                        <div class="ml-3 flex-1">
                            <h3 class="text-sm font-medium text-green-800">Selected Case</h3>
                            <div class="mt-2 text-sm text-green-700" id="appointment_selected_case_details">
                                {% if case_data %}
                                <p class="font-semibold">Case #{{ case_data['file_case_id'] }}</p>
                                <p>Claimant: {{ case_data['claimant_first_name'] }} {{ case_data['claimant_last_name'] }}</p>
                                {% if case_data['client_company_name'] %}
                                <p>Client: {{ case_data['client_company_name'] }}</p>
                                {% endif %}
                                {% elif appointment %}
                                <p class="font-semibold">Case #{{ appointment['file_case_id'] }}</p>
                                <p>Claimant: {{ appointment['claimant_first_name'] }} {{ appointment['claimant_last_name'] }}</p>
                                {% if appointment['client_company_name'] %}
                                <p>Client: {{ appointment['client_company_name'] }}</p>
                                {% endif %}
                                {% endif %}
                            </div>
                            <button type="button" 
                                    onclick="appointmentClearCaseSelection()" 
                                    class="mt-2 text-xs text-green-600 hover:text-green-800 underline">
                                Change case
                            </button>
                        </div>
                    </div>
                </div>
                
                <p class="text-xs text-gray-500 mt-1">
                    <i class="fas fa-info-circle mr-1"></i>Search by typing the case number or claimant's name
                </p>
            </div>
        </div>
        
        <!-- Appointment Date & Time -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-clock mr-2 text-blue-600"></i>Date & Time
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Appointment Date *</label>
                    <input type="date" 
                           name="appointment_date" 
                           required
                           value="{{ (appointment['appointment_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Appointment Time</label>
                    <input type="time" 
                           name="appointment_time"
                           value="{{ (appointment['appointment_time'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Timezone</label>
                    <select name="timezone" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="America/Edmonton" {% if not appointment or (appointment and appointment['timezone'] == 'America/Edmonton') %}selected{% endif %}>Mountain Time (MT)</option>
                        <option value="America/Toronto" {% if appointment and appointment['timezone'] == 'America/Toronto' %}selected{% endif %}>Eastern Time (ET)</option>
                        <option value="America/Vancouver" {% if appointment and appointment['timezone'] == 'America/Vancouver' %}selected{% endif %}>Pacific Time (PT)</option>
                        <option value="America/Winnipeg" {% if appointment and appointment['timezone'] == 'America/Winnipeg' %}selected{% endif %}>Central Time (CT)</option>
                        <option value="America/Halifax" {% if appointment and appointment['timezone'] == 'America/Halifax' %}selected{% endif %}>Atlantic Time (AT)</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- Provider & Location -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-user-md mr-2 text-green-600"></i>Provider & Location
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Provider *</label>
                    <div class="relative">
                        <input type="text" 
                               name="doctor_name" 
                               id="appointment_doctorInput"
                               value="{{ appointment['doctor_name'] if appointment else '' }}"
                               required
                               placeholder="Type doctor name or specialty..."
                               autocomplete="off"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <div id="appointment_doctorAutocomplete" class="absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-1 max-h-60 overflow-y-auto hidden"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Provider Specialty</label>
                    <input type="text" 
                           name="provider_specialty"
                           value="{{ appointment['provider_specialty'] if appointment else '' }}"
                           placeholder="e.g., Orthopedic, Psychiatry, Neurology"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Specialist Number</label>
                    <div class="relative">
                        <input type="text" 
                               name="specialist_number"
                               id="appointment_specialistNumberInput"
                               value="{{ appointment['specialist_number'] if appointment else '' }}"
                               placeholder="e.g., SP-12345"
                               autocomplete="off"
                               class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <div id="appointment_specialistNumberAutocomplete" class="absolute z-10 w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-1 max-h-60 overflow-y-auto hidden"></div>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Clinic Location</label>
                    <input type="text" 
                           name="clinic_location"
                           value="{{ appointment['clinic_location'] if appointment else '' }}"
                           placeholder="Specific clinic location for this appointment"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Location</label>
                    <input type="text" 
                           name="location"
                           value="{{ appointment['location'] if appointment else '' }}"
                           placeholder="e.g., 123 Medical Building, Suite 100, Toronto ON"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-envelope mr-2"></i>Email
                    </label>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <input type="email" name="email_to" placeholder="Recipient email" value="" class="px-3 py-2 border border-gray-300 rounded-lg" />
                        <input type="email" name="email_cc" placeholder="CC (optional)" value="" class="px-3 py-2 border border-gray-300 rounded-lg" />
                    </div>
                    <p class="text-xs text-gray-500 mt-1">Email will be sent when you click Schedule.</p>
                </div>
            </div>
        </div>
        
        <!-- Service Code & Assessment Type -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-file-medical mr-2 text-indigo-600"></i>Assessment Details
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Service Code</label>
                    <select name="service_code" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select service code...</option>
                        {% for code in service_codes %}
                        <option value="{{ code['code'] }}" 
                                {% if appointment and appointment['service_code'] == code['code'] %}selected{% endif %}>
                            {{ code['code'] }} - {{ code['description'][:60] }}{% if code['description']|length > 60 %}...{% endif %}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Assessment Type</label>
                    <select name="assessment_type" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select...</option>
                        <option value="IME - Standard" {% if appointment and appointment['assessment_type'] == 'IME - Standard' %}selected{% endif %}>IME - Standard</option>
                        <option value="IME - Legal" {% if appointment and appointment['assessment_type'] == 'IME - Legal' %}selected{% endif %}>IME - Legal</option>
                        <option value="IME - Ortho" {% if appointment and appointment['assessment_type'] == 'IME - Ortho' %}selected{% endif %}>IME - Ortho</option>
                        <option value="Other" {% if appointment and appointment['assessment_type'] == 'Other' %}selected{% endif %}>Other</option>
                    </select>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                    <textarea name="description" 
                              rows="3"
                              placeholder="Brief description of the assessment"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{{ appointment['description'] if appointment else '' }}</textarea>
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-2">
                        <i class="fas fa-file-alt mr-2"></i>Attach Form Template
                    </label>
                    <div class="flex gap-2">
                        <select id="appointment_formTemplateSelect" 
                                class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                            <option value="">Select a form template...</option>
                        </select>
                        <button type="button" 
                                id="appointment_openFormBtn" 
                                onclick="appointmentOpenFormInWindow()"
                                disabled
                                class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition disabled:bg-gray-400 disabled:cursor-not-allowed">
                            <i class="fas fa-external-link-alt mr-2"></i>Open Form in Window
                        </button>
                    </div>
                    <p class="text-xs text-gray-500 mt-1">
                        <i class="fas fa-info-circle mr-1"></i>Select a form template to auto-populate with appointment data
                    </p>

                    <div class="mt-4">
                        <label class="block text-sm font-medium text-gray-700 mb-2">
                            <i class="fas fa-paperclip mr-2"></i>Attach Additional Files
                        </label>
                        <div class="flex flex-col sm:flex-row gap-2 items-start sm:items-center">
                            <input type="file"
                                   name="letter_file"
                                   form="appointmentLetterUploadForm"
                                   accept=".pdf,.doc,.docx,.txt,.jpg,.jpeg,.png"
                                   class="px-3 py-2 border border-gray-300 rounded-lg">
                            <select name="letter_type"
                                    form="appointmentLetterUploadForm"
                                    class="px-3 py-2 border border-gray-300 rounded-lg">
                                <option value="other" selected>Other</option>
                                <option value="medical_records">Medical Records</option>
                                <option value="referral">Referral</option>
                                <option value="consent">Consent</option>
                            </select>
                            <button type="button"
                                    class="px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white rounded-lg font-semibold"
                                    onclick="appointmentUploadFile();">
                                Upload
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">Select a case, then upload files even before saving the appointment.</p>
                        <p class="text-xs text-gray-500 mt-1">Allowed: PDF, DOC, DOCX, TXT, JPG, PNG. Max 50MB.</p>
                    </div>

                </div>
            </div>
        </div>
        
        <!-- Status & Dates -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-tasks mr-2 text-orange-600"></i>Status & Important Dates
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Status</label>
                    <select name="status" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="scheduled" {% if not appointment or appointment['status'] == 'scheduled' %}selected{% endif %}>Scheduled</option>
                        <option value="completed" {% if appointment and appointment['status'] == 'completed' %}selected{% endif %}>Completed</option>
                        <option value="cancelled" {% if appointment and appointment['status'] == 'cancelled' %}selected{% endif %}>Cancelled</option>
                        <option value="no-show" {% if appointment and appointment['status'] == 'no-show' %}selected{% endif %}>No-Show</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Confirmed</label>
                    <input type="date" 
                           name="date_confirmed"
                           value="{{ (appointment['date_confirmed'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date Received</label>
                    <input type="date" 
                           name="date_received"
                           value="{{ (appointment['date_received'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="flex items-center">
                    <label class="flex items-center cursor-pointer">
                        <input type="checkbox" 
                               name="invoiced" 
                               {% if appointment and appointment['invoiced'] == 1 %}checked{% endif %}
                               class="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500">
                        <span class="ml-3 text-sm font-medium text-gray-700">
                            <i class="fas fa-dollar-sign mr-1"></i>Invoiced
                        </span>
                    </label>
                </div>
            </div>
        </div>
        
        <!-- PIL Instructions & LOI -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-file-medical-alt mr-2 text-purple-600"></i>PIL Instructions & LOI
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">PIL Instructions Received</label>
                    <select name="pil_instructions_received" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['pil_instructions_received'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['pil_instructions_received'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">PIL Instruction Type</label>
                    <select name="pil_instruction_type" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select type...</option>
                        <option value="MVA" {% if appointment and appointment['pil_instruction_type'] == 'MVA' %}selected{% endif %}>MVA</option>
                        <option value="DISABILITY" {% if appointment and appointment['pil_instruction_type'] == 'DISABILITY' %}selected{% endif %}>DISABILITY</option>
                        <option value="PSYCH" {% if appointment and appointment['pil_instruction_type'] == 'PSYCH' %}selected{% endif %}>PSYCH</option>
                        <option value="NEURO PSYCH" {% if appointment and appointment['pil_instruction_type'] == 'NEURO PSYCH' %}selected{% endif %}>NEURO PSYCH</option>
                        <option value="LEGAL" {% if appointment and appointment['pil_instruction_type'] == 'LEGAL' %}selected{% endif %}>LEGAL</option>
                        <option value="LOI" {% if appointment and appointment['pil_instruction_type'] == 'LOI' %}selected{% endif %}>LOI</option>
                        <option value="CLIENT QUESTIONS" {% if appointment and appointment['pil_instruction_type'] == 'CLIENT QUESTIONS' %}selected{% endif %}>CLIENT QUESTIONS</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">LOI Received</label>
                    <select name="loi_received" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['loi_received'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['loi_received'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">LOI Received Date</label>
                    <input type="date" 
                           name="loi_received_date"
                           value="{{ (appointment['loi_received_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Report Tracking -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-calendar-check mr-2 text-red-600"></i>Report Tracking
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Report Deadline Date</label>
                    <input type="date" 
                           name="report_deadline_date"
                           value="{{ (appointment['report_deadline_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Report Due Date</label>
                    <input type="date" 
                           name="report_due_date"
                           value="{{ (appointment['report_due_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Confirmation Tracking -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-envelope-open-text mr-2 text-teal-600"></i>Confirmation Tracking
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirmation Deposit Letter to Client</label>
                    <select name="confirmation_deposit_letter_sent" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['confirmation_deposit_letter_sent'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['confirmation_deposit_letter_sent'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirmation Deposit Letter Date</label>
                    <input type="date" 
                           name="confirmation_deposit_letter_date"
                           value="{{ (appointment['confirmation_deposit_letter_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirmation Sent to Doctor</label>
                    <select name="confirmation_sent_to_doctor" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['confirmation_sent_to_doctor'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['confirmation_sent_to_doctor'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Confirmation Sent to Doctor Date</label>
                    <input type="date" 
                           name="confirmation_sent_to_doctor_date"
                           value="{{ (appointment['confirmation_sent_to_doctor_date'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">In Calendar</label>
                    <select name="in_calendar" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['in_calendar'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['in_calendar'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
            </div>
        </div>
        
        <!-- Retainer & ATP Tracking -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-money-bill-wave mr-2 text-green-600"></i>Retainer & ATP Tracking
            </h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Retainer Required</label>
                    <select name="retainer_required" 
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="0" {% if not appointment or (appointment and appointment['retainer_required'] == 0) %}selected{% endif %}>No</option>
                        <option value="1" {% if appointment and appointment['retainer_required'] == 1 %}selected{% endif %}>Yes</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Retainer Requested On</label>
                    <input type="date" 
                           name="retainer_requested_on"
                           value="{{ (appointment['retainer_requested_on'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Retainer Received On</label>
                    <input type="date" 
                           name="retainer_received_on"
                           value="{{ (appointment['retainer_received_on'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Retainer Amount</label>
                    <input type="number" 
                           name="retainer_amount"
                           step="0.01"
                           min="0"
                           value="{{ appointment['retainer_amount'] if appointment and appointment['retainer_amount'] else '' }}"
                           placeholder="0.00"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">ATP Requested On</label>
                    <input type="date" 
                           name="atp_requested_on"
                           value="{{ (appointment['atp_requested_on'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">ATP Received On</label>
                    <input type="date" 
                           name="atp_received_on"
                           value="{{ (appointment['atp_received_on'] or '') if appointment else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Notes -->
        <div>
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-sticky-note mr-2 text-yellow-600"></i>Additional Notes
            </h2>
            <textarea name="notes" 
                      rows="5"
                      placeholder="Any additional notes about the appointment, special instructions, follow-ups, etc."
                      class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{{ appointment['notes'] if appointment else '' }}</textarea>
        </div>

        <!-- Form Actions -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 pt-6 border-t">
            <div class="flex flex-col sm:flex-row gap-3">
                {% if not embedded %}
                <a href="{{ url_for('appointments_list') }}" 
                   class="inline-flex items-center justify-center px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                    <i class="fas fa-times mr-2"></i>Cancel
                </a>
                {% endif %}
                <button type="submit" 
                        name="form_action"
                        value="schedule"
                        class="inline-flex items-center justify-center px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition">
                    <i class="fas fa-save mr-2"></i>{% if appointment %}Update Appointment{% else %}Schedule Appointment{% endif %}
                </button>
                <button type="submit"
                        name="form_action"
                        value="schedule_invoice"
                        class="inline-flex items-center justify-center px-6 py-2 bg-green-600 hover:bg-green-700 text-white rounded-lg font-semibold transition">
                    <i class="fas fa-file-invoice-dollar mr-2"></i>{% if appointment %}Update & Create Invoice{% else %}Schedule & Create Invoice{% endif %}
                </button>
            </div>
        </div>
        
    </form>

    {% if appointment %}
    <form id="appointmentLetterUploadForm"
          action="{{ url_for('appointment_upload_letter', appointment_id=appointment['id']) }}"
          method="POST"
          enctype="multipart/form-data"
          style="display:none;"></form>
    {% else %}
    <form id="appointmentLetterUploadForm"
          action="{{ url_for('appointment_temp_upload') }}"
          method="POST"
          enctype="multipart/form-data"
          style="display:none;">
        <input type="hidden" name="case_id" id="appointment_upload_case_id" value="">
    </form>
    {% endif %}
</div>

<script>
(function() {
// Guard if template is included multiple times
if (window.__appointmentFormInitialized) { return; }
window.__appointmentFormInitialized = true;

const appointmentForm = document.getElementById('appointmentSchedulerForm');
const appointmentCaseSearchInput = document.getElementById('appointment_case_search');
const appointmentCaseSearchResults = document.getElementById('appointment_case_search_results');
const appointmentCaseIdInput = document.getElementById('appointment_case_id');
const appointmentSelectedCaseDisplay = document.getElementById('appointment_selected_case_display');
const appointmentSelectedCaseDetails = document.getElementById('appointment_selected_case_details');
const appointmentReferenceInput = document.getElementById('appointment_referenceInput');
const appointmentReferenceDisplay = document.getElementById('appointment_referenceText');
const appointmentFormTemplateSelect = document.getElementById('appointment_formTemplateSelect');
const appointmentOpenFormBtn = document.getElementById('appointment_openFormBtn');
const appointmentDoctorInput = document.getElementById('appointment_doctorInput');
const appointmentDoctorAutocomplete = document.getElementById('appointment_doctorAutocomplete');
const appointmentSpecialistNumberInput = document.getElementById('appointment_specialistNumberInput');
const appointmentSpecialistNumberAutocomplete = document.getElementById('appointment_specialistNumberAutocomplete');

let appointmentCaseSearchTimeout = null;
let appointmentFormsList = [];
let appointmentFormWindowHandle = null;
let appointmentCurrentFormData = null;

async function appointmentUploadFile() {
    // Check if case is selected
    if (!appointmentCaseIdInput || !appointmentCaseIdInput.value) {
        alert('Please select a case first. Use the "Link to Case" search field above.');
        appointmentCaseSearchInput?.focus();
        return;
    }
    
    const fileInput = document.querySelector('input[name="letter_file"][form="appointmentLetterUploadForm"]');
    const letterTypeSelect = document.querySelector('select[name="letter_type"][form="appointmentLetterUploadForm"]');
    
    if (!fileInput || !fileInput.files || fileInput.files.length === 0) {
        alert('Please select a file to upload.');
        return;
    }
    
    const formData = new FormData();
    formData.append('letter_file', fileInput.files[0]);
    formData.append('letter_type', letterTypeSelect ? letterTypeSelect.value : 'other');
    formData.append('case_id', appointmentCaseIdInput.value);
    
    try {
        const response = await fetch('/appointments/temp_upload', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            alert(result.message);
            // Clear the file input
            fileInput.value = '';
            // Show a visual indicator
            const uploadArea = fileInput.closest('.mt-4');
            if (uploadArea) {
                const indicator = document.createElement('div');
                indicator.className = 'mt-2 p-2 bg-green-50 border border-green-200 rounded text-sm text-green-800';
                indicator.innerHTML = '<i class="fas fa-check-circle mr-2"></i>File queued: ' + result.filename;
                uploadArea.appendChild(indicator);
            }
        } else {
            alert('Error: ' + (result.error || 'Upload failed'));
        }
    } catch (error) {
        console.error('Upload error:', error);
        alert('Error uploading file. Please try again.');
    }
}
window.appointmentUploadFile = appointmentUploadFile;

function appointmentEscapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function appointmentSearchCases(query) {
    fetch(`/api/search/cases?q=${encodeURIComponent(query)}`)
        .then(response => response.json())
        .then(cases => {
            appointmentDisplayCaseResults(cases);
        })
        .catch(error => {
            console.error('Error searching cases:', error);
            appointmentCaseSearchResults.innerHTML = '<div class="p-4 text-red-600 text-sm">Error searching cases</div>';
            appointmentCaseSearchResults.classList.remove('hidden');
        });
}

function appointmentDisplayCaseResults(cases) {
    if (cases.length === 0) {
        appointmentCaseSearchResults.innerHTML = `
            <div class="p-4 text-gray-500 text-sm text-center">
                <i class="fas fa-search mr-2"></i>No cases found
            </div>
        `;
        appointmentCaseSearchResults.classList.remove('hidden');
        return;
    }
    
    let html = '<div class="divide-y divide-gray-200">';
    
    cases.forEach(caseItem => {
        const dobDisplay = caseItem.claimant_dob ? ` (DOB: ${caseItem.claimant_dob})` : '';
        const clientDisplay = caseItem.client_company ? `<div class="text-xs text-gray-500 mt-1">Client: ${caseItem.client_company}</div>` : '';
        const dateOpened = caseItem.date_opened ? `<div class="text-xs text-gray-400 mt-1">Opened: ${caseItem.date_opened}</div>` : '';
        
        html += `
            <div class="p-3 hover:bg-blue-50 cursor-pointer transition case-result-item"
                 onclick="appointmentSelectCase(${caseItem.id}, '${appointmentEscapeHtml(caseItem.file_case_id)}', '${appointmentEscapeHtml(caseItem.claimant_name)}', '${appointmentEscapeHtml(caseItem.client_company || '')}', '${appointmentEscapeHtml(caseItem.claimant_dob || '')}')">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center">
                            <span class="font-semibold text-blue-600">Case #${appointmentEscapeHtml(caseItem.file_case_id)}</span>
                            ${caseItem.client_file_number ? `<span class="ml-2 text-xs text-gray-500">(${appointmentEscapeHtml(caseItem.client_file_number)})</span>` : ''}
                        </div>
                        <div class="text-sm text-gray-700 mt-1">
                            <i class="fas fa-user mr-1"></i>${appointmentEscapeHtml(caseItem.claimant_name)}${dobDisplay}
                        </div>
                        ${clientDisplay}
                        ${dateOpened}
                    </div>
                    <div class="ml-2">
                        <i class="fas fa-arrow-right text-blue-400"></i>
                    </div>
                </div>
            </div>
        `;
    });
    
    html += '</div>';
    
    appointmentCaseSearchResults.innerHTML = html;
    appointmentCaseSearchResults.classList.remove('hidden');
}

window.appointmentSelectCase = function(id, caseNumber, claimantName, clientCompany, claimantDob) {
    appointmentCaseIdInput.value = id;
    appointmentCaseSearchInput.value = `Case #${caseNumber} - ${claimantName}`;
    appointmentCaseSearchResults.classList.add('hidden');
    
    const dobDisplay = claimantDob ? `<p>Date of Birth: ${claimantDob}</p>` : '';
    const clientDisplay = clientCompany ? `<p>Client: ${clientCompany}</p>` : '';
    
    appointmentSelectedCaseDetails.innerHTML = `
        <p class="font-semibold text-lg">Case #${appointmentEscapeHtml(caseNumber)}</p>
        <p class="mt-1"><i class="fas fa-user mr-2"></i>Claimant: ${appointmentEscapeHtml(claimantName)}</p>
        ${dobDisplay}
        ${clientDisplay}
        <p class="mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded inline-block">
            <i class="fas fa-check mr-1"></i>Verified and linked
        </p>
    `;
    
    appointmentSelectedCaseDisplay.classList.remove('hidden');
};

window.appointmentClearCaseSelection = function() {
    appointmentCaseIdInput.value = '';
    appointmentCaseSearchInput.value = '';
    appointmentCaseSearchInput.focus();
    appointmentSelectedCaseDisplay.classList.add('hidden');
    appointmentCaseSearchResults.classList.add('hidden');
};

function appointmentGenerateReferenceNumber() {
    if (!appointmentReferenceInput) return;
    if (appointmentReferenceInput.value && appointmentReferenceInput.value.trim()) {
        if (appointmentReferenceDisplay && appointmentReferenceDisplay.textContent.includes('will be auto-generated')) {
            appointmentReferenceDisplay.textContent = appointmentReferenceInput.value;
        }
        return;
    }
    fetch('/api/invoices/next_number')
        .then(res => res.json())
        .then(data => {
            if (data.invoice_number) {
                appointmentReferenceInput.value = data.invoice_number;
                if (appointmentReferenceDisplay) {
                    appointmentReferenceDisplay.textContent = data.invoice_number;
                }
            }
        })
        .catch(e => console.error('Failed to fetch next invoice number', e));
}

function appointmentLoadForms() {
    fetch('/api/forms/list')
        .then(res => res.json())
        .then(data => {
            if (!data.forms || data.forms.length === 0) return;
            appointmentFormsList = data.forms;
            data.forms.forEach(form => {
                const option = document.createElement('option');
                option.value = form.filename;
                option.textContent = form.name;
                appointmentFormTemplateSelect.appendChild(option);
            });
        })
        .catch(e => console.error('Failed to load forms:', e));
}

async function appointmentOpenFormInWindow() {
    const formName = appointmentFormTemplateSelect.value;
    if (!formName) return;
    const caseId = appointmentCaseIdInput?.value;
    if (!caseId) {
        alert('Please select a case first before opening a form. Use the "Link to Case" field above to search and select a case.');
        appointmentCaseSearchInput?.focus();
        return;
    }
    const appointmentId = {{ 'null' if not appointment else appointment['id'] }};
    try {
        const loadingMsg = document.createElement('div');
        loadingMsg.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center';
        loadingMsg.innerHTML = '<div class="bg-white rounded-lg p-6 text-center"><i class="fas fa-spinner fa-spin text-4xl text-blue-600 mb-4"></i><p>Loading form...</p></div>';
        document.body.appendChild(loadingMsg);
        
        let res;
        if (appointmentId) {
            res = await fetch(`/api/forms/${encodeURIComponent(formName)}/preview?appointment_id=${appointmentId}`);
        } else {
            const payload = {
                case_id: caseId,
                appointment_date: document.querySelector('input[name="appointment_date"]')?.value || '',
                appointment_time: document.querySelector('input[name="appointment_time"]')?.value || '',
                doctor_name: appointmentDoctorInput?.value || '',
                service_code: document.querySelector('select[name="service_code"]')?.value || ''
            };
            res = await fetch(`/api/forms/${encodeURIComponent(formName)}/preview`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
        }
        
        document.body.removeChild(loadingMsg);
        const data = await res.json();
        if (data.error) {
            alert('Error: ' + data.error);
            return;
        }
        
        // Check if a report already exists for this appointment/form combination
        let existingReportId = null;
        if (appointmentId) {
            try {
                const reportCheck = await fetch(`/api/reports/check?appointment_id=${appointmentId}&form_name=${encodeURIComponent(formName)}`);
                if (reportCheck.ok) {
                    const reportData = await reportCheck.json();
                    if (reportData.report_id) {
                        existingReportId = reportData.report_id;
                    }
                }
            } catch (e) {
                console.log('Could not check for existing report:', e);
            }
        }
        
        appointmentCurrentFormData = {
            html: data.html,
            form_name: data.form_name,
            appointment_id: data.appointment_id,
            case_id: caseId,
            report_id: existingReportId
        };
        
        appointmentSafeOpenFormWindow(data.html, formName, appointmentId, caseId, existingReportId);
    } catch (e) {
        console.error('Failed to load form:', e);
        alert('Failed to load form. Please try again.');
    }
}

function appointmentSafeOpenFormWindow(formHtml, formName, appointmentId, caseId, reportId) {
    const reportTitle = formName.replace('.html', '').replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
    if (appointmentFormWindowHandle && !appointmentFormWindowHandle.closed) {
        appointmentFormWindowHandle.close();
    }
    appointmentFormWindowHandle = window.open('', '_blank', 'width=1200,height=800,scrollbars=yes,resizable=yes');
    if (!appointmentFormWindowHandle) {
        alert('Please allow popups to open the form in a new window.');
        return;
    }
    // Escape only for HTML string generation (title, etc), but insert HTML directly into contenteditable
    const esc = s => String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/\"/g,'&quot;').replace(/'/g,'&#39;');
    // For contenteditable, we need to escape the HTML string itself, but the browser will parse it
    // So we escape quotes and special chars for the HTML attribute, but keep the HTML structure
    const escForHtmlAttr = s => String(s).replace(/\\/g,'\\\\').replace(/"/g,'&quot;').replace(/'/g,'&#39;').replace(/\n/g,'\\n').replace(/\r/g,'\\r');
    const infoBox = appointmentId ? '<div class="info-box"><i class="fas fa-info-circle mr-2"></i>Form will be linked to appointment when saved.</div>' : '<div class="info-box"><i class="fas fa-info-circle mr-2"></i>Note: This appointment has not been saved yet. The form will be linked when you save the appointment.</div>';
    let html = '';
    html += '<!DOCTYPE html>\n<html>\n<head>\n<title>' + esc(reportTitle) + '</title>\n';
    html += '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">\n';
    html += '<style>body{font-family:Arial,sans-serif;padding:20px;line-height:1.6;max-width:1400px;margin:0 auto;background:#f9fafb}.toolbar{background:linear-gradient(to right,#3b82f6,#2563eb);color:#fff;padding:15px 20px;margin-bottom:20px;border-radius:8px;display:flex;justify-content:space-between;align-items:center;box-shadow:0 2px 4px rgba(0,0,0,.1)}.toolbar h2{margin:0;color:#fff}.toolbar-buttons{display:flex;gap:10px}.toolbar button{padding:10px 20px;background:#fff;color:#3b82f6;border:none;border-radius:6px;cursor:pointer;font-weight:600;transition:all .2s}.toolbar button:hover{background:#f0f9ff;transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,.1)}.info-box{background:#dbeafe;border-left:4px solid #3b82f6;padding:12px;margin-bottom:20px;border-radius:4px;color:#1e40af;font-size:14px}#reportTitleInput{width:300px;padding:8px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px}[contenteditable=\"true\"]{min-height:600px;padding:30px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1)}[contenteditable=\"true\"]:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 3px rgba(59,130,246,.1)}</style>\n';
    html += '</head>\n<body>\n<div class="toolbar"><h2><i class="fas fa-file-alt mr-2"></i>Form Editor</h2><div class="toolbar-buttons">';
    html += '<input type="text" id="reportTitleInput" value="' + esc(reportTitle) + '" placeholder="Report Title">';
    html += '<button onclick="saveForm()"><i class="fas fa-save"></i> Save Form</button>';
    html += '<button onclick="forceClose()"><i class="fas fa-times"></i> Close</button>';
    html += '</div></div>\n' + infoBox + '\n';
    html += '<div id="editableForm" contenteditable="true"></div>\n';
    html += '<script>let saved=false;let forceClosing=false;const FORM_NAME=\"' + esc(formName) + '\";const APPOINTMENT_ID=' + (appointmentId || 'null') + ';const CASE_ID=' + (caseId || 'null') + ';const REPORT_ID=' + (reportId || 'null') + ';const FORM_HTML=' + JSON.stringify(formHtml) + ';document.getElementById(\"editableForm\").innerHTML=FORM_HTML;function saveForm(){const formContent=document.getElementById(\"editableForm\").innerHTML;const reportTitle=document.getElementById(\"reportTitleInput\").value;if(!reportTitle.trim()){alert(\"Please enter a report title.\");return;}if(window.opener){window.opener.postMessage({type:\"saveForm\",html:formContent,report_title:reportTitle,form_name:FORM_NAME,appointment_id:APPOINTMENT_ID,case_id:CASE_ID,report_id:REPORT_ID},\"*\");saved=true;alert(\"Form saved successfully!\");}else{alert(\"Unable to save: connection to parent window lost.\");}}var beforeUnloadHandler=function(e){if(!saved&&!forceClosing){e.preventDefault();e.returnValue=\"You have unsaved changes. Are you sure you want to close?\";return e.returnValue;}};function forceClose(){forceClosing=true;saved=true;window.removeEventListener(\"beforeunload\",beforeUnloadHandler);setTimeout(function(){window.close();},50);}window.addEventListener(\"beforeunload\",beforeUnloadHandler);<\/script>';
    html += '</body>\n</html>';
    appointmentFormWindowHandle.document.open();
    appointmentFormWindowHandle.document.write(html);
    appointmentFormWindowHandle.document.close();
}

window.addEventListener('message', async function(event) {
    if (event.data.type === 'saveForm') {
        try {
            const res = await fetch('/api/forms/save', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({
                    html: event.data.html,
                    form_name: event.data.form_name,
                    report_title: event.data.report_title,
                    appointment_id: event.data.appointment_id,
                    case_id: event.data.case_id,
                    report_id: event.data.report_id || appointmentCurrentFormData?.report_id || null
                })
            });
            const data = await res.json();
            if (data.error) {
                alert('Error saving form: ' + data.error);
                return;
            }
            appointmentCurrentFormData = appointmentCurrentFormData || {};
            appointmentCurrentFormData.report_id = data.report_id;
            if (appointmentFormWindowHandle && !appointmentFormWindowHandle.closed) {
                appointmentFormWindowHandle.postMessage({
                    type: 'saveSuccess',
                    report_id: data.report_id
                }, '*');
            }
            // Reload the page to show updated preview
            if (data.report_id && window.location.pathname.includes('/reports/')) {
                window.location.reload();
            } else if (!event.data.appointment_id) {
                alert('Form saved successfully! It will be linked to this appointment when you save the appointment.');
            } else {
                alert('Form saved and linked to appointment successfully!');
                // Reload if on appointment view page
                if (window.location.pathname.includes('/appointments/')) {
                    window.location.reload();
                }
            }
        } catch (e) {
            console.error('Failed to save form:', e);
            alert('Failed to save form. Please try again.');
        }
    }
});

if (appointmentCaseSearchInput) {
    appointmentCaseSearchInput.addEventListener('input', function() {
        const query = this.value.trim();
        if (appointmentCaseSearchTimeout) {
            clearTimeout(appointmentCaseSearchTimeout);
        }
        if (query.length < 2) {
            appointmentCaseSearchResults.classList.add('hidden');
            return;
        }
        appointmentCaseSearchTimeout = setTimeout(() => appointmentSearchCases(query), 300);
    });
}

document.addEventListener('click', function(event) {
    if (!event.target.closest('#appointment_case_search') && !event.target.closest('#appointment_case_search_results')) {
        appointmentCaseSearchResults?.classList.add('hidden');
    }
    if (!appointmentDoctorInput?.contains(event.target) && !appointmentDoctorAutocomplete?.contains(event.target)) {
        appointmentDoctorAutocomplete?.classList.add('hidden');
    }
    if (!appointmentSpecialistNumberInput?.contains(event.target) && !appointmentSpecialistNumberAutocomplete?.contains(event.target)) {
        appointmentSpecialistNumberAutocomplete?.classList.add('hidden');
    }
});

if (appointmentForm) {
    appointmentForm.addEventListener('submit', function(event) {
        if (!appointmentCaseIdInput.value) {
            event.preventDefault();
            alert('Please select a case from the search results');
            appointmentCaseSearchInput.focus();
            appointmentCaseSearchInput.classList.add('border-red-500');
            setTimeout(() => {
                appointmentCaseSearchInput.classList.remove('border-red-500');
            }, 3000);
        }
    });
}

let appointmentDoctorSearchTimeout;
if (appointmentDoctorInput) {
    appointmentDoctorInput.addEventListener('input', function() {
        const query = this.value.trim();
        clearTimeout(appointmentDoctorSearchTimeout);
        if (query.length < 2) {
            appointmentDoctorAutocomplete.classList.add('hidden');
            return;
        }
        appointmentDoctorSearchTimeout = setTimeout(async () => {
            try {
                const response = await fetch(`/api/search/doctors?q=${encodeURIComponent(query)}`);
                const data = await response.json();
                if (data.success && data.doctors.length > 0) {
                    appointmentDoctorAutocomplete.innerHTML = data.doctors.map(doctor => `
                        <div class="p-3 hover:bg-blue-50 cursor-pointer border-b last:border-b-0" 
                             onclick="appointmentSelectDoctor('${appointmentEscapeHtml(doctor.name)}')">
                            <div class="font-medium text-gray-900">${appointmentEscapeHtml(doctor.name)}</div>
                            ${doctor.specialty ? `<div class="text-sm text-gray-500">${appointmentEscapeHtml(doctor.specialty)}</div>` : ''}
                        </div>
                    `).join('');
                    appointmentDoctorAutocomplete.classList.remove('hidden');
                } else {
                    appointmentDoctorAutocomplete.innerHTML = '<div class="p-4 text-gray-500 text-sm">No doctors found. Type the name anyway to add new.</div>';
                    appointmentDoctorAutocomplete.classList.remove('hidden');
                }
            } catch (error) {
                console.error('Error searching doctors:', error);
            }
        }, 300);
    });
}

window.appointmentSelectDoctor = function(name) {
    appointmentDoctorInput.value = name;
    appointmentDoctorAutocomplete.classList.add('hidden');
};

let appointmentSpecialistSearchTimeout;
if (appointmentSpecialistNumberInput) {
    appointmentSpecialistNumberInput.addEventListener('input', function() {
        const query = this.value.trim();
        clearTimeout(appointmentSpecialistSearchTimeout);
        if (query.length < 1) {
            appointmentSpecialistNumberAutocomplete.classList.add('hidden');
            return;
        }
        appointmentSpecialistSearchTimeout = setTimeout(async () => {
            try {
                const response = await fetch(`/api/search/doctors?q=${encodeURIComponent(query)}`);
                const data = await response.json();
                if (data.success && data.doctors.length > 0) {
                    const filtered = data.doctors.filter(d => 
                        d.specialist_number && d.specialist_number.toLowerCase().includes(query.toLowerCase())
                    );
                    if (filtered.length > 0) {
                        appointmentSpecialistNumberAutocomplete.innerHTML = filtered.map(doctor => `
                            <div class="p-3 hover:bg-blue-50 cursor-pointer border-b last:border-b-0" 
                                 onclick="appointmentSelectSpecialist('${appointmentEscapeHtml(doctor.specialist_number)}', '${appointmentEscapeHtml(doctor.name)}')">
                                <div class="font-medium text-gray-900">${appointmentEscapeHtml(doctor.specialist_number)}</div>
                                <div class="text-sm text-gray-500">${appointmentEscapeHtml(doctor.name)}${doctor.specialty ? ' - ' + appointmentEscapeHtml(doctor.specialty) : ''}</div>
                            </div>
                        `).join('');
                        appointmentSpecialistNumberAutocomplete.classList.remove('hidden');
                    } else {
                        appointmentSpecialistNumberAutocomplete.innerHTML = '<div class="p-4 text-gray-500 text-sm">No matching specialist numbers found.</div>';
                        appointmentSpecialistNumberAutocomplete.classList.remove('hidden');
                    }
                } else {
                    appointmentSpecialistNumberAutocomplete.classList.add('hidden');
                }
            } catch (error) {
                console.error('Error searching specialist numbers:', error);
            }
        }, 300);
    });
}

window.appointmentSelectSpecialist = function(specialistNumber, doctorName) {
    appointmentSpecialistNumberInput.value = specialistNumber;
    if (!appointmentDoctorInput.value) {
        appointmentDoctorInput.value = doctorName;
    }
    appointmentSpecialistNumberAutocomplete.classList.add('hidden');
};

document.addEventListener('DOMContentLoaded', function() {
    if (appointmentReferenceInput && appointmentReferenceDisplay && appointmentReferenceInput.value) {
        appointmentReferenceDisplay.textContent = appointmentReferenceInput.value;
    }
    {% if not appointment %}
    appointmentGenerateReferenceNumber();
    {% endif %}
    
    if (appointmentFormTemplateSelect) {
        appointmentLoadForms();
        appointmentFormTemplateSelect.addEventListener('change', function() {
            appointmentOpenFormBtn.disabled = !this.value;
        });
    }
    
    {% if case_id and case_data and not appointment %}
    if (appointmentCaseIdInput && appointmentCaseSearchInput && appointmentSelectedCaseDisplay && appointmentSelectedCaseDetails) {
        appointmentCaseIdInput.value = {{ case_id }};
        appointmentCaseSearchInput.value = 'Case #{{ case_data["file_case_id"] }} - {{ case_data["claimant_first_name"] }} {{ case_data["claimant_last_name"] }}';
        appointmentSelectedCaseDetails.innerHTML = `
            <p class="font-semibold text-lg">Case #{{ case_data['file_case_id'] }}</p>
            <p class="mt-1"><i class="fas fa-user mr-2"></i>Claimant: {{ case_data['claimant_first_name'] }} {{ case_data['claimant_last_name'] }}</p>
            <p class="mt-2 text-xs bg-green-100 text-green-800 px-2 py-1 rounded inline-block">
                <i class="fas fa-check mr-1"></i>Verified and linked
            </p>
        `;
        appointmentSelectedCaseDisplay.classList.remove('hidden');
    }
    {% endif %}
});

window.appointmentOpenFormInWindow = appointmentOpenFormInWindow;

})();
</script>