{% extends "base.html" %}

{% block title %}Search Results - Vera Medical CRM{% endblock %}

{% block content %}
<!-- Search Header -->
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-3xl font-bold text-gray-800">Search Results</h1>
        <p class="text-gray-600">
            Found <span class="font-semibold text-blue-600">{{ cases|length }}</span> case(s)
            {% if query %} matching "{{ query }}"{% endif %}
        </p>
    </div>
    <a href="{{ url_for('index') }}" class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold transition">
        <i class="fas fa-search mr-2"></i>New Search
    </a>
</div>

<!-- Case Cards -->
{% if cases %}
<div class="space-y-6">
    {% for case in cases %}
    <div class="bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow border-l-4 {% if case['file_close_date'] %}border-gray-400{% else %}border-green-500{% endif %}">
        <!-- Card Header -->
        <div class="bg-gradient-to-r {% if case['file_close_date'] %}from-gray-500 to-gray-600{% else %}from-blue-500 to-blue-600{% endif %} px-6 py-4">
            <div class="flex justify-between items-center">
                <div>
                    <h2 class="text-white font-bold text-2xl">
                        Case #{{ case['file_case_id'] or case['record_id'] }}
                    </h2>
                    <p class="text-gray-100 text-sm">{{ case['assessment_type'] or 'Assessment' }}</p>
                </div>
                <div class="text-right">
                    {% if case['file_close_date'] %}
                    <span class="px-4 py-2 bg-gray-100 text-gray-800 rounded-full text-sm font-semibold">
                        <i class="fas fa-check-circle mr-1"></i>Closed
                    </span>
                    {% else %}
                    <span class="px-4 py-2 bg-green-100 text-green-800 rounded-full text-sm font-semibold">
                        <i class="fas fa-folder-open mr-1"></i>Active
                    </span>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Card Body -->
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <!-- Claimant -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">
                        <i class="fas fa-user mr-2"></i>Claimant
                    </h3>
                    <p class="text-lg font-bold text-gray-800">
                        {{ case['claimant_first_name'] }} {{ case['claimant_last_name'] }}
                    </p>
                    {% if case['claimant_city'] %}
                    <p class="text-sm text-gray-600">{{ case['claimant_city'] }}</p>
                    {% endif %}
                    {% if case['claimant_phone'] %}
                    <p class="text-sm text-gray-600">{{ case['claimant_phone']|format_phone }}</p>
                    {% endif %}
                </div>
                
                <!-- Client -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">
                        <i class="fas fa-building mr-2"></i>Insurance Client
                    </h3>
                    <p class="text-lg font-bold text-gray-800">
                        {{ case['client_company_name'] or 'N/A' }}
                    </p>
                    {% if case['adjuster_display_name'] %}
                    <p class="text-sm text-gray-600">
                        Adjuster: {{ case['adjuster_display_name'] }}
                    </p>
                    {% endif %}
                </div>
                
                <!-- Opposing Lawyer -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">
                        <i class="fas fa-balance-scale mr-2"></i>Opposing Lawyer
                    </h3>
                    <p class="text-lg font-bold text-gray-800">
                        {% if case['lawyer_first_name'] or case['lawyer_last_name'] %}
                            {{ case['lawyer_first_name'] }} {{ case['lawyer_last_name'] }}
                        {% else %}
                            N/A
                        {% endif %}
                    </p>
                    {% if case['lawyer_firm_name'] %}
                    <p class="text-sm text-gray-600">{{ case['lawyer_firm_name'] }}</p>
                    {% endif %}
                </div>
                
                <!-- Dates -->
                <div>
                    <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">
                        <i class="fas fa-calendar-alt mr-2"></i>Important Dates
                    </h3>
                    <p class="text-sm text-gray-600">
                        <strong>Opened:</strong> {{ case['file_open_date']|format_date }}
                    </p>
                    {% if case['date_of_loss'] %}
                    <p class="text-sm text-gray-600">
                        <strong>Date of Loss:</strong> {{ case['date_of_loss']|format_date }}
                    </p>
                    {% endif %}
                    {% if case['file_close_date'] %}
                    <p class="text-sm text-gray-600">
                        <strong>Closed:</strong> {{ case['file_close_date']|format_date }}
                    </p>
                    {% endif %}
                </div>
            </div>
            
            <!-- Case Notes -->
            {% if case['case_notes'] %}
            <div class="mt-6 pt-6 border-t">
                <h3 class="text-sm font-semibold text-gray-500 uppercase mb-2">
                    <i class="fas fa-sticky-note mr-2"></i>Case Notes
                </h3>
                <div class="bg-gray-50 rounded-lg p-4">
                    <p class="text-sm text-gray-700 whitespace-pre-wrap">{{ case['case_notes'][:200] }}{% if case['case_notes']|length > 200 %}...{% endif %}</p>
                </div>
            </div>
            {% endif %}
            
            <!-- Actions -->
            <div class="mt-6 flex gap-4">
                <a href="{{ url_for('case_view', case_id=case['id']) }}" 
                   class="flex-1 bg-blue-600 hover:bg-blue-700 text-white text-center py-3 rounded-lg font-semibold transition">
                    <i class="fas fa-eye mr-2"></i>View Full Details
                </a>
                <a href="{{ url_for('case_edit', case_id=case['id']) }}" 
                   class="flex-1 bg-green-600 hover:bg-green-700 text-white text-center py-3 rounded-lg font-semibold transition">
                    <i class="fas fa-edit mr-2"></i>Edit Case
                </a>
                <form method="POST" action="{{ url_for('case_delete', case_id=case['id']) }}" 
                      onsubmit="return confirm('Are you sure you want to delete this case?');" 
                      class="flex-1">
                    <button type="submit" 
                            class="w-full bg-red-600 hover:bg-red-700 text-white py-3 rounded-lg font-semibold transition">
                        <i class="fas fa-trash mr-2"></i>Delete
                    </button>
                </form>
            </div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination Info -->
{% if cases|length >= 100 %}
<div class="mt-8 bg-yellow-50 border-l-4 border-yellow-400 p-4">
    <div class="flex">
        <div class="flex-shrink-0">
            <i class="fas fa-exclamation-triangle text-yellow-400"></i>
        </div>
        <div class="ml-3">
            <p class="text-sm text-yellow-700">
                Showing first 100 results. Please refine your search for more specific results.
            </p>
        </div>
    </div>
</div>
{% endif %}

{% else %}
<!-- No Results -->
<div class="max-w-2xl mx-auto text-center py-16">
    <div class="mb-8">
        <i class="fas fa-search text-9xl text-gray-300"></i>
    </div>
    <h2 class="text-3xl font-bold text-gray-800 mb-4">No Cases Found</h2>
    <p class="text-xl text-gray-600 mb-8">
        Try adjusting your search criteria or filters
    </p>
    <a href="{{ url_for('index') }}" 
       class="inline-block bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
        <i class="fas fa-search mr-2"></i>New Search
    </a>
</div>
{% endif %}
{% endblock %}