{% extends "base.html" %}

{% block title %}{% if case %}Edit{% else %}New{% endif %} Case - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-3xl font-bold text-gray-800">
        {% if case %}Edit Case{% else %}New Case{% endif %}
    </h1>
    <p class="text-gray-600">
        {% if case %}Update case information{% else %}Create a new medical assessment case{% endif %}
    </p>
</div>

<div class="max-w-6xl">
    <form method="POST" class="bg-white rounded-lg shadow-md p-6 space-y-6">
        
        <!-- 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-blue-600"></i>Case Information
            </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">Case ID</label>
                    <input type="text" name="file_case_id"
                           value="{{ case['file_case_id'] if case else next_case_id }}"
                           readonly
                           disabled
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-100 cursor-not-allowed">
                    <p class="text-xs text-gray-500 mt-1">{% if case %}Non-editable{% else %}Auto-generated (non-editable){% endif %}</p>
                    {% if not case %}
                    <input type="hidden" name="file_case_id" value="{{ next_case_id }}">
                    {% endif %}
                </div>
                {% if case %}
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Record ID</label>
                    <input type="text"
                           value="{{ case['record_id'] if case else '' }}"
                           readonly
                           disabled
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-100 cursor-not-allowed">
                    <p class="text-xs text-gray-500 mt-1">Non-editable (display only)</p>
                </div>
                {% endif %}
                <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>
                        {% if service_codes %}
                            {% for code in service_codes %}
                            <option value="{{ code['code'] }}" 
                                    {% if case and case['assessment_type'] == code['code'] %}selected{% endif %}>
                                {{ code['code'] }} - {{ code['description'][:50] }}{% if code['description']|length > 50 %}...{% endif %}
                            </option>
                            {% endfor %}
                        {% else %}
                            <option value="IME - Standard" {% if case and case['assessment_type'] == 'IME - Standard' %}selected{% endif %}>IME - Standard</option>
                            <option value="IME - Legal" {% if case and case['assessment_type'] == 'IME - Legal' %}selected{% endif %}>IME - Legal</option>
                            <option value="IME - Ortho" {% if case and case['assessment_type'] == 'IME - Ortho' %}selected{% endif %}>IME - Ortho</option>
                            <option value="Other" {% if case and case['assessment_type'] == 'Other' %}selected{% endif %}>Other</option>
                        {% endif %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Service Location</label>
                    <select name="service_location"
                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                        <option value="">Select city...</option>
                        <option value="Calgary, AB" {% if case and case['service_location'] == 'Calgary, AB' %}selected{% endif %}>Calgary, AB</option>
                        <option value="Edmonton, AB" {% if case and case['service_location'] == 'Edmonton, AB' %}selected{% endif %}>Edmonton, AB</option>
                        <option value="Vancouver, BC" {% if case and case['service_location'] == 'Vancouver, BC' %}selected{% endif %}>Vancouver, BC</option>
                        <option value="Victoria, BC" {% if case and case['service_location'] == 'Victoria, BC' %}selected{% endif %}>Victoria, BC</option>
                        <option value="Winnipeg, MB" {% if case and case['service_location'] == 'Winnipeg, MB' %}selected{% endif %}>Winnipeg, MB</option>
                        <option value="Fredericton, NB" {% if case and case['service_location'] == 'Fredericton, NB' %}selected{% endif %}>Fredericton, NB</option>
                        <option value="St. John's, NL" {% if case and case['service_location'] == 'St. John\'s, NL' %}selected{% endif %}>St. John's, NL</option>
                        <option value="Halifax, NS" {% if case and case['service_location'] == 'Halifax, NS' %}selected{% endif %}>Halifax, NS</option>
                        <option value="Toronto, ON" {% if case and case['service_location'] == 'Toronto, ON' %}selected{% endif %}>Toronto, ON</option>
                        <option value="Ottawa, ON" {% if case and case['service_location'] == 'Ottawa, ON' %}selected{% endif %}>Ottawa, ON</option>
                        <option value="Hamilton, ON" {% if case and case['service_location'] == 'Hamilton, ON' %}selected{% endif %}>Hamilton, ON</option>
                        <option value="London, ON" {% if case and case['service_location'] == 'London, ON' %}selected{% endif %}>London, ON</option>
                        <option value="Mississauga, ON" {% if case and case['service_location'] == 'Mississauga, ON' %}selected{% endif %}>Mississauga, ON</option>
                        <option value="Brampton, ON" {% if case and case['service_location'] == 'Brampton, ON' %}selected{% endif %}>Brampton, ON</option>
                        <option value="Windsor, ON" {% if case and case['service_location'] == 'Windsor, ON' %}selected{% endif %}>Windsor, ON</option>
                        <option value="Kitchener, ON" {% if case and case['service_location'] == 'Kitchener, ON' %}selected{% endif %}>Kitchener, ON</option>
                        <option value="Sudbury, ON" {% if case and case['service_location'] == 'Sudbury, ON' %}selected{% endif %}>Sudbury, ON</option>
                        <option value="Thunder Bay, ON" {% if case and case['service_location'] == 'Thunder Bay, ON' %}selected{% endif %}>Thunder Bay, ON</option>
                        <option value="Charlottetown, PE" {% if case and case['service_location'] == 'Charlottetown, PE' %}selected{% endif %}>Charlottetown, PE</option>
                        <option value="Montreal, QC" {% if case and case['service_location'] == 'Montreal, QC' %}selected{% endif %}>Montreal, QC</option>
                        <option value="Quebec City, QC" {% if case and case['service_location'] == 'Quebec City, QC' %}selected{% endif %}>Quebec City, QC</option>
                        <option value="Saskatoon, SK" {% if case and case['service_location'] == 'Saskatoon, SK' %}selected{% endif %}>Saskatoon, SK</option>
                        <option value="Regina, SK" {% if case and case['service_location'] == 'Regina, SK' %}selected{% endif %}>Regina, SK</option>
                        <option value="Whitehorse, YT" {% if case and case['service_location'] == 'Whitehorse, YT' %}selected{% endif %}>Whitehorse, YT</option>
                        <option value="Yellowknife, NT" {% if case and case['service_location'] == 'Yellowknife, NT' %}selected{% endif %}>Yellowknife, NT</option>
                        <option value="Iqaluit, NU" {% if case and case['service_location'] == 'Iqaluit, NU' %}selected{% endif %}>Iqaluit, NU</option>
                        <option value="Other" {% if case and case['service_location'] and case['service_location'] not in ['Calgary, AB', 'Edmonton, AB', 'Vancouver, BC', 'Victoria, BC', 'Winnipeg, MB', 'Fredericton, NB', 'St. John\'s, NL', 'Halifax, NS', 'Toronto, ON', 'Ottawa, ON', 'Hamilton, ON', 'London, ON', 'Mississauga, ON', 'Brampton, ON', 'Windsor, ON', 'Kitchener, ON', 'Sudbury, ON', 'Thunder Bay, ON', 'Charlottetown, PE', 'Montreal, QC', 'Quebec City, QC', 'Saskatoon, SK', 'Regina, SK', 'Whitehorse, YT', 'Yellowknife, NT', 'Iqaluit, NU'] %}selected{% endif %}>Other</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">File Open Date{% if not case %} *{% endif %}</label>
                    {% set is_new = (is_new_case is defined and is_new_case) or (case is not defined or case is none) %}
                    {% if is_new %}
                    {# Auto-populate with today's date for new cases - use hidden field since disabled fields don't submit #}
                    {% set date_value = today_date if today_date is defined and today_date else '' %}
                    <input type="date" 
                           id="file_open_date_display"
                           value="{{ date_value }}"
                           readonly
                           disabled
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-100 cursor-not-allowed">
                    <input type="hidden" name="file_open_date" id="file_open_date_hidden" value="{{ date_value }}" required>
                    <p class="text-xs text-gray-500 mt-1">Auto-populated (non-editable)</p>
                    {% else %}
                    {# Edit mode - show existing date, readonly, not required #}
                    <input type="date" name="file_open_date"
                           value="{{ case['file_open_date'] if case and case['file_open_date'] else '' }}"
                           readonly
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 bg-gray-100 cursor-not-allowed">
                    <p class="text-xs text-gray-500 mt-1">Non-editable</p>
                    {% endif %}
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">File Close Date</label>
                    <input type="date" name="file_close_date"
                           value="{{ case['file_close_date'] if case and case['file_close_date'] 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 of Loss</label>
                    <input type="date" name="date_of_loss"
                           value="{{ case['date_of_loss'] if case and case['date_of_loss'] else '' }}"
                           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">Case Notes</label>
                    <textarea name="case_notes" rows="4"
                              class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">{{ case['case_notes'] if case and case['case_notes'] else '' }}</textarea>
                </div>
            </div>
        </div>
        
        <!-- Claimant Details -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-user mr-2 text-green-600"></i>Claimant 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">Title</label>
                    <select name="claimant_title"
                            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="Mr." {% if case and claimant and claimant['title'] == 'Mr.' %}selected{% endif %}>Mr.</option>
                        <option value="Mrs." {% if case and claimant and claimant['title'] == 'Mrs.' %}selected{% endif %}>Mrs.</option>
                        <option value="Ms." {% if case and claimant and claimant['title'] == 'Ms.' %}selected{% endif %}>Ms.</option>
                        <option value="Dr." {% if case and claimant and claimant['title'] == 'Dr.' %}selected{% endif %}>Dr.</option>
                        <option value="Rev." {% if case and claimant and claimant['title'] == 'Rev.' %}selected{% endif %}>Rev.</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Gender</label>
                    <select name="claimant_gender"
                            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="Male" {% if case and claimant and claimant['gender'] == 'Male' %}selected{% endif %}>Male</option>
                        <option value="Female" {% if case and claimant and claimant['gender'] == 'Female' %}selected{% endif %}>Female</option>
                        <option value="Other" {% if case and claimant and claimant['gender'] == 'Other' %}selected{% endif %}>Other</option>
                        <option value="Prefer not to say" {% if case and claimant and claimant['gender'] == 'Prefer not to say' %}selected{% endif %}>Prefer not to say</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">First Name{% if not case %} *{% endif %}</label>
                    <input type="text" name="claimant_first_name" id="claimant_first_name"{% if not case %} required{% endif %}
                           value="{{ claimant['first_name'] if case and claimant and claimant['first_name'] 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">Last Name{% if not case %} *{% endif %}</label>
                    <input type="text" name="claimant_last_name" id="claimant_last_name"{% if not case %} required{% endif %}
                           value="{{ claimant['last_name'] if case and claimant and claimant['last_name'] else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                    <!-- Hidden field to store selected existing claimant ID -->
                    <input type="hidden" name="use_existing_claimant_id" id="use_existing_claimant_id" value="">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Date of Birth</label>
                    <input type="date" name="claimant_date_of_birth"
                           value="{{ claimant['date_of_birth'] if case and claimant and claimant['date_of_birth'] 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">Email</label>
                    <input type="email" name="claimant_email"
                           value="{{ claimant['email'] if case and claimant and claimant['email'] else '' }}"
                           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">Address</label>
                    <input type="text" name="claimant_address"
                           value="{{ claimant['address'] if case and claimant and claimant['address'] 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">City</label>
                    <input type="text" name="claimant_city"
                           value="{{ claimant['city'] if case and claimant and claimant['city'] 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">Province</label>
                    <input type="text" name="claimant_province"
                           value="{{ claimant['province'] if case and claimant and claimant['province'] 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">Postal Code</label>
                    <input type="text" name="claimant_postal_code"
                           value="{{ claimant['postal_code'] if case and claimant and claimant['postal_code'] else '' }}"
                           placeholder="A1A 1A1"
                           title="Canadian postal code format: A1A 1A1"
                           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">Home Phone</label>
                    <input type="tel" name="claimant_home_phone"
                           value="{{ claimant['home_phone'] if case and claimant and claimant['home_phone'] else '' }}"
                           placeholder="(123) 456-7890"
                           title="Phone format: (123) 456-7890"
                           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">Work Phone</label>
                    <input type="tel" name="claimant_work_phone"
                           value="{{ claimant['work_phone'] if case and claimant and claimant['work_phone'] else '' }}"
                           placeholder="(123) 456-7890"
                           title="Phone format: (123) 456-7890"
                           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">Cell Phone</label>
                    <input type="tel" name="claimant_cel_phone"
                           value="{{ claimant['cel_phone'] if case and claimant and claimant['cel_phone'] else '' }}"
                           placeholder="(123) 456-7890"
                           title="Phone format: (123) 456-7890"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Client Details -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-building mr-2 text-purple-600"></i>Client 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">Company Name{% if not case %} *{% endif %}</label>
                    <input type="text" name="client_company_name"{% if not case %} required{% endif %}
                           value="{{ client['company_name'] if case and client and client['company_name'] 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">Client Name</label>
                    <input type="text" name="client_name"
                           value="{{ client['client_name'] if case and client and client['client_name'] else '' }}"
                           placeholder="Contact name at company"
                           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">Client File #</label>
                    <input type="text" name="client_file_number"
                           value="{{ case['client_file_number'] if case and case['client_file_number'] 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">Email</label>
                    <input type="email" name="client_email"
                           value="{{ client['email'] if case and client and client['email'] 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">Fax</label>
                    <input type="text" name="client_fax"
                           value="{{ client['fax'] if case and client and client['fax'] else '' }}"
                           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">Company Address</label>
                    <input type="text" name="client_address"
                           value="{{ client['address'] if case and client and client['address'] 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">City</label>
                    <input type="text" name="client_city"
                           value="{{ client['city'] if case and client and client['city'] 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">Province</label>
                    <input type="text" name="client_province"
                           value="{{ client['province'] if case and client and client['province'] 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">Postal Code</label>
                    <input type="text" name="client_postal_code"
                           value="{{ client['postal_code'] if case and client and client['postal_code'] else '' }}"
                           placeholder="A1A 1A1"
                           title="Canadian postal code format: A1A 1A1"
                           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">Direct Phone</label>
                    <input type="tel" name="client_assistant_phone"
                           value="{{ client['assistant_phone'] if case and client and client['assistant_phone'] else '' }}"
                           placeholder="(123) 456-7890"
                           title="Phone format: (123) 456-7890"
                           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">Assistant Name</label>
                    <input type="text" name="client_assistant_name"
                           value="{{ client['assistant_name'] if case and client and client['assistant_name'] 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">Assistant Email</label>
                    <input type="email" name="client_assistant_email"
                           value="{{ client['assistant_email'] if case and client and client['assistant_email'] else '' }}"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Opposing Lawyer -->
        <div class="border-b pb-6">
            <h2 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-balance-scale mr-2 text-indigo-600"></i>Opposing Lawyer
            </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">Company Name</label>
                    <input type="text" name="lawyer_firm_name"
                           value="{{ lawyer_firm['firm_name'] if case and lawyer_firm 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">Phone</label>
                    <input type="tel" name="lawyer_firm_phone"
                           value="{{ lawyer_firm['phone'] if case and lawyer_firm else '' }}"
                           placeholder="(123) 456-7890"
                           title="Phone format: (123) 456-7890"
                           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">Firm Address</label>
                    <input type="text" name="lawyer_firm_address"
                           value="{{ lawyer_firm['address'] if case and lawyer_firm 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">Lawyer First Name</label>
                    <input type="text" name="lawyer_contact_first_name"
                           value="{{ lawyer_contact['first_name'] if case and lawyer_contact 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">Lawyer Last Name</label>
                    <input type="text" name="lawyer_contact_last_name"
                           value="{{ lawyer_contact['last_name'] if case and lawyer_contact 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">Title</label>
                    <input type="text" name="lawyer_contact_title"
                           value="{{ lawyer_contact['title'] if case and lawyer_contact else '' }}"
                           placeholder="e.g. Partner, Associate"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
        </div>
        
        <!-- Form Actions -->
        <div class="flex {% if case %}justify-between{% else %}justify-end{% endif %} items-center pt-4 border-t">
            {% if case %}
            <!-- Delete Button (only shown when editing) -->
            <button type="button" 
                    onclick="confirmDeleteCase({{ case['id'] }})"
                    class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold transition flex items-center">
                <i class="fas fa-trash-alt mr-2"></i>
                Delete Case
            </button>
            {% endif %}
            
            <!-- Right side buttons -->
            <div class="flex space-x-4">
                <a href="{{ url_for('cases_list') }}" 
                   class="px-6 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 transition">
                    Cancel
                </a>
                <button type="submit" 
                        class="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 case %}Update{% else %}Create{% endif %} Case
                </button>
            </div>
        </div>
    </form>

    {% if case %}
    <div class="mt-10">
        {% set embedded = True %}
        {% set appointment = None %}
        {% set appointment_form_action = url_for('appointment_new', case_id=case['id']) %}
        {% set reference_number = appointment_reference_number %}
        {% set case_id = case['id'] %}
        {% set case_data = appointment_case_data %}
        {% include 'partials/appointment_form_block.html' %}
    </div>
    {% else %}
    <div class="mt-10 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-sm text-yellow-900">
        <p class="font-semibold flex items-center gap-2">
            <i class="fas fa-info-circle"></i>Appointments & Reports
        </p>
        <p class="mt-2 text-gray-700">
            Save the case first to enable appointments and generate templates. After the case is created you can return to this page to add appointments and upload reports.
        </p>
    </div>
    {% endif %}
</div>

<script>
// Auto-populate file_open_date for new cases (backup in case template variable not set)
(function() {
    const today = new Date().toISOString().split('T')[0];
    const setFileOpenDate = function() {
        const fileOpenDateDisplay = document.getElementById('file_open_date_display');
        const fileOpenDateHidden = document.getElementById('file_open_date_hidden');
        // Always set the date (template should set it, but ensure it's set)
        if (fileOpenDateDisplay) {
            if (!fileOpenDateDisplay.value) {
                fileOpenDateDisplay.value = today;
            }
        }
        if (fileOpenDateHidden) {
            if (!fileOpenDateHidden.value) {
                fileOpenDateHidden.value = today;
            }
        }
    };
    
    // Run immediately and on DOM ready
    setFileOpenDate();
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', setFileOpenDate);
    } else {
        setTimeout(setFileOpenDate, 50);
    }
})();

// Setup contextual helpers once the DOM is ready
window.addEventListener('DOMContentLoaded', function() {
    setupAutocomplete('client_company_name', '/api/search/clients', function(data, input) {
        input.value = data.company_name;
        const address = document.querySelector('input[name=\"client_address\"]');
        const city = document.querySelector('input[name=\"client_city\"]');
        const province = document.querySelector('input[name=\"client_province\"]');
        const postal = document.querySelector('input[name=\"client_postal_code\"]');
        const phone = document.querySelector('input[name=\"client_assistant_phone\"]');
        if (address) address.value = data.address || '';
        if (city) city.value = data.city || '';
        if (province) province.value = data.province || '';
        if (postal) postal.value = data.postal_code || '';
        if (phone) phone.value = data.phone || '';
    });
    
    setupAutocomplete('lawyer_firm_name', '/api/search/lawyers', function(data, input) {
        input.value = data.firm_name;
        const phone = document.querySelector('input[name=\"lawyer_firm_phone\"]');
        const address = document.querySelector('input[name=\"lawyer_firm_address\"]');
        if (phone) phone.value = data.phone || '';
        if (address) address.value = data.address || '';
    });
});

function setupAutocomplete(inputId, apiUrl, onSelect) {
    const input = document.querySelector(`input[name="${inputId}"]`);
    if (!input) return;
    
    const dropdownId = inputId + '_dropdown';
    
    // Create dropdown element
    const dropdown = document.createElement('div');
    dropdown.id = dropdownId;
    dropdown.className = 'absolute z-50 w-full bg-white border border-gray-300 rounded-lg shadow-lg mt-1 max-h-60 overflow-y-auto';
    dropdown.style.display = 'none';
    
    // Insert dropdown after input's parent
    input.parentElement.style.position = 'relative';
    input.parentElement.appendChild(dropdown);
    
    let currentResults = [];
    
    input.addEventListener('input', function() {
        const query = this.value.trim();
        
        if (query.length < 2) {
            dropdown.style.display = 'none';
            return;
        }
        
        fetch(`${apiUrl}?q=${encodeURIComponent(query)}`)
            .then(response => response.json())
            .then(data => {
                currentResults = data;
                renderDropdown(data);
            })
            .catch(error => {
                console.error('Autocomplete error:', error);
                dropdown.style.display = 'none';
            });
    });
    
    function renderDropdown(results) {
        if (results.length === 0) {
            dropdown.style.display = 'none';
            return;
        }
        
        dropdown.innerHTML = results.map(item => {
            const key = Object.keys(item).find(k => k.includes('name') || k.includes('company'));
            const displayName = item[key] || JSON.stringify(item);
            return `<div class="px-4 py-2 hover:bg-gray-100 cursor-pointer" data-value='${JSON.stringify(item)}'>${displayName}</div>`;
        }).join('');
        
        dropdown.style.display = 'block';
    }
    
    dropdown.addEventListener('click', function(e) {
        const item = e.target.closest('[data-value]');
        if (item) {
            const data = JSON.parse(item.getAttribute('data-value'));
            onSelect(data, input);
            dropdown.style.display = 'none';
        }
    });
    
    // Close dropdown when clicking outside
    document.addEventListener('click', function(e) {
        if (!input.parentElement.contains(e.target) && !dropdown.contains(e.target)) {
            dropdown.style.display = 'none';
        }
    });
}

// Check for existing claimants with same name
let claimantCheckTimeout;
const firstNameInput = document.getElementById('claimant_first_name');
const lastNameInput = document.getElementById('claimant_last_name');
const useExistingInput = document.getElementById('use_existing_claimant_id');
const isEditMode = {% if case %}true{% else %}false{% endif %};

if (firstNameInput && lastNameInput && !isEditMode) {
    // Only check for new cases, not when editing
    function checkExistingClaimant() {
        const firstName = firstNameInput.value.trim();
        const lastName = lastNameInput.value.trim();
        
        if (firstName.length >= 2 && lastName.length >= 2) {
            fetch(`/api/check/claimant?first_name=${encodeURIComponent(firstName)}&last_name=${encodeURIComponent(lastName)}`)
                .then(response => response.json())
                .then(data => {
                    if (data.exists && data.claimants.length > 0) {
                        showClaimantConfirmationModal(data.claimants, firstName, lastName);
                    }
                })
                .catch(error => {
                    console.error('Error checking claimant:', error);
                });
        }
    }
    
    // Debounce the check
    firstNameInput.addEventListener('input', function() {
        clearTimeout(claimantCheckTimeout);
        claimantCheckTimeout = setTimeout(checkExistingClaimant, 500);
    });
    
    lastNameInput.addEventListener('input', function() {
        clearTimeout(claimantCheckTimeout);
        claimantCheckTimeout = setTimeout(checkExistingClaimant, 500);
    });
}

function showClaimantConfirmationModal(claimants, firstName, lastName) {
    // Don't show if user already selected to use existing
    if (useExistingInput && useExistingInput.value) {
        return;
    }
    
    // Create modal if it doesn't exist
    let modal = document.getElementById('claimantExistsModal');
    if (!modal) {
        modal = document.createElement('div');
        modal.id = 'claimantExistsModal';
        modal.className = 'hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center';
        modal.innerHTML = `
            <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
                <div class="bg-yellow-500 px-6 py-4 rounded-t-lg">
                    <h3 class="text-xl font-bold text-white">Claimant Name Already Exists</h3>
                </div>
                <div class="p-6">
                    <p class="mb-4 text-gray-700">
                        A claimant with the name <strong>${firstName} ${lastName}</strong> already exists in the database.
                        Is this the same person?
                    </p>
                    <div id="existingClaimantsList" class="mb-4 space-y-3"></div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" id="btnCreateNewClaimant" 
                                class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg font-semibold transition">
                            No, Create New Claimant
                        </button>
                        <button type="button" id="btnUseExistingClaimant" 
                                class="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition">
                            Yes, Use Existing Claimant
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        
        // Handle button clicks
        document.getElementById('btnCreateNewClaimant').addEventListener('click', function() {
            useExistingInput.value = '';
            modal.classList.add('hidden');
        });
        
        document.getElementById('btnUseExistingClaimant').addEventListener('click', function() {
            const selectedClaimant = document.querySelector('input[name="selected_claimant_id"]:checked');
            if (selectedClaimant) {
                const selectedData = claimants.find(c => String(c.id) === selectedClaimant.value);
                useExistingInput.value = selectedClaimant.value;
                if (selectedData) {
                    fillClaimantFields(selectedData);
                }
                modal.classList.add('hidden');
            } else if (claimants.length === 1) {
                const selectedData = claimants[0];
                useExistingInput.value = selectedData.id;
                fillClaimantFields(selectedData);
                modal.classList.add('hidden');
            } else {
                alert('Please select which claimant to use.');
            }
        });
    }
    
    // Populate claimants list
    const listContainer = document.getElementById('existingClaimantsList');
    listContainer.innerHTML = '';
    
    claimants.forEach((claimant, index) => {
        const claimantDiv = document.createElement('div');
        claimantDiv.className = 'border border-gray-300 rounded-lg p-4 hover:bg-gray-50';
        if (claimants.length === 1) {
            claimantDiv.className += ' bg-blue-50';
        }
        claimantDiv.innerHTML = `
            <label class="flex items-start cursor-pointer">
                <input type="radio" name="selected_claimant_id" value="${claimant.id}" 
                       ${claimants.length === 1 ? 'checked' : ''} 
                       class="mt-1 mr-3">
                <div class="flex-1">
                    <div class="font-semibold text-gray-800">${claimant.first_name} ${claimant.last_name}</div>
                    ${claimant.date_of_birth ? `<div class="text-sm text-gray-600">DOB: ${claimant.date_of_birth}</div>` : ''}
                    ${claimant.email ? `<div class="text-sm text-gray-600">Email: ${claimant.email}</div>` : ''}
                    ${claimant.address ? `<div class="text-sm text-gray-600">Address: ${claimant.address}, ${claimant.city || ''} ${claimant.province || ''}</div>` : ''}
                    ${claimant.home_phone || claimant.cel_phone ? `<div class="text-sm text-gray-600">Phone: ${claimant.home_phone || claimant.cel_phone || ''}</div>` : ''}
                </div>
            </label>
        `;
        listContainer.appendChild(claimantDiv);
    });
    
    // Show modal
    modal.classList.remove('hidden');
    
    // Close on outside click
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.classList.add('hidden');
        }
    });
}

function fillClaimantFields(claimant) {
    const fieldMap = {
        claimant_first_name: claimant.first_name,
        claimant_last_name: claimant.last_name,
        claimant_date_of_birth: claimant.date_of_birth,
        claimant_email: claimant.email,
        claimant_address: claimant.address,
        claimant_city: claimant.city,
        claimant_province: claimant.province,
        claimant_postal_code: claimant.postal_code,
        claimant_home_phone: claimant.home_phone,
        claimant_work_phone: claimant.work_phone,
        claimant_cel_phone: claimant.cel_phone
    };
    
    Object.entries(fieldMap).forEach(([field, value]) => {
        if (!value) return;
        const input = document.querySelector(`[name="${field}"]`);
        if (input) {
            input.value = value;
        }
    });
}

// Delete case confirmation
function confirmDeleteCase(caseId) {
    // Create confirmation modal
    const modal = document.createElement('div');
    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center';
    modal.innerHTML = `
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
            <div class="bg-red-600 px-6 py-4 rounded-t-lg">
                <h3 class="text-xl font-bold text-white flex items-center">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Confirm Delete Case
                </h3>
            </div>
            <div class="p-6">
                <p class="mb-4 text-gray-700">
                    Are you sure you want to delete this case? This action cannot be undone.
                </p>
                <p class="mb-4 text-sm text-red-600 font-semibold">
                    <i class="fas fa-warning mr-1"></i>
                    Warning: This will permanently delete the case and all associated data.
                </p>
                <div class="flex justify-end space-x-3 mt-6">
                    <button type="button" onclick="this.closest('.fixed').remove()" 
                            class="px-6 py-2 bg-gray-300 hover:bg-gray-400 text-gray-800 rounded-lg font-semibold transition">
                        Cancel
                    </button>
                    <button type="button" onclick="deleteCase(${caseId})" 
                            class="px-6 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg font-semibold transition">
                        <i class="fas fa-trash-alt mr-2"></i>
                        Yes, Delete Case
                    </button>
                </div>
            </div>
        </div>
    `;
    document.body.appendChild(modal);
    
    // Close on outside click
    modal.addEventListener('click', function(e) {
        if (e.target === modal) {
            modal.remove();
        }
    });
}

function deleteCase(caseId) {
    // Create a form and submit it
    const form = document.createElement('form');
    form.method = 'POST';
    form.action = `/cases/${caseId}/delete`;
    document.body.appendChild(form);
    form.submit();
}


</script>
{% endblock %}