{% extends "base.html" %}

{% block title %}Cases - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center mb-4">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">Cases</h1>
            <p class="text-gray-600">Manage and view all medical assessment cases</p>
        </div>
        <a href="{{ url_for('case_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition shadow-md hover:shadow-lg">
            <i class="fas fa-plus mr-2"></i>New Case
        </a>
    </div>
    
    <!-- Search and Filters -->
    <div class="bg-white rounded-lg shadow-md p-4 mb-6">
        <form method="GET" action="{{ url_for('cases_list') }}" class="flex flex-col md:flex-row gap-4">
            <!-- Search -->
            <div class="flex-1">
                <input type="text" 
                       name="search" 
                       value="{{ search }}" 
                       placeholder="Search by claimant name, case ID..." 
                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            
            <!-- Status Filter -->
            <div>
                <select name="status" class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <option value="all" {% if status == 'all' %}selected{% endif %}>All Cases</option>
                    <option value="active" {% if status == 'active' %}selected{% endif %}>Active Only</option>
                    <option value="closed" {% if status == 'closed' %}selected{% endif %}>Closed Only</option>
                </select>
            </div>
            
            <!-- Search Button -->
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Search
            </button>
            
            <!-- Reset -->
            {% if search or status != 'all' %}
            <a href="{{ url_for('cases_list') }}" class="bg-gray-300 hover:bg-gray-400 text-gray-800 px-6 py-2 rounded-lg font-semibold transition text-center">
                <i class="fas fa-times mr-2"></i>Reset
            </a>
            {% endif %}
        </form>
    </div>
    
    <!-- Results Count -->
    <div class="mb-4">
        <p class="text-gray-600">
            Showing <span class="font-semibold">{{ cases|length }}</span> of 
            <span class="font-semibold">{{ "{:,}".format(total) }}</span> cases
        </p>
    </div>
</div>

<!-- Cases Table -->
<div class="bg-white rounded-lg shadow-md overflow-hidden">
    <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Case ID
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Claimant
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Client
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Assessment Type
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Open Date
                    </th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Status
                    </th>
                    <th class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                        Actions
                    </th>
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                {% if cases %}
                    {% for case in cases %}
                    <tr class="hover:bg-gray-50 transition">
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                                {{ case['file_case_id'] or case['record_id'][:8] }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm font-medium text-gray-900">
                                {{ case['claimant_first_name'] }} {{ case['claimant_last_name'] }}
                            </div>
                            <div class="text-sm text-gray-500">
                                {{ case['claimant_city'] or 'N/A' }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                                {{ case['client_company_name'] or 'N/A' }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="text-sm text-gray-900">
                                {{ case['assessment_type'] or 'N/A' }}
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ case['file_open_date']|format_date }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if case['file_close_date'] %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
                                Closed
                            </span>
                            {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                Active
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                            <a href="{{ url_for('case_view', case_id=case['id']) }}" 
                               class="text-blue-600 hover:text-blue-900 mr-3">
                                <i class="fas fa-eye"></i>
                            </a>
                            <a href="{{ url_for('case_edit', case_id=case['id']) }}" 
                               class="text-green-600 hover:text-green-900">
                                <i class="fas fa-edit"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="7" class="px-6 py-12 text-center text-gray-500">
                            <i class="fas fa-inbox text-4xl mb-4 text-gray-300"></i>
                            <p class="text-lg">No cases found</p>
                            <p class="text-sm">Try adjusting your search or filters</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
    
    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="bg-gray-50 px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
        <div class="flex-1 flex justify-between sm:hidden">
            {% if page > 1 %}
            <a href="{{ url_for('cases_list', page=page-1, search=search, status=status) }}" 
               class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Previous
            </a>
            {% endif %}
            {% if page < total_pages %}
            <a href="{{ url_for('cases_list', page=page+1, search=search, status=status) }}" 
               class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
                Next
            </a>
            {% endif %}
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
            <div>
                <p class="text-sm text-gray-700">
                    Page <span class="font-medium">{{ page }}</span> of <span class="font-medium">{{ total_pages }}</span>
                </p>
            </div>
            <div>
                <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                    {% if page > 1 %}
                    <a href="{{ url_for('cases_list', page=page-1, search=search, status=status) }}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-left"></i>
                    </a>
                    {% endif %}
                    
                    {% for p in range(1, total_pages + 1) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-blue-600 text-sm font-medium text-white">
                            {{ p }}
                        </span>
                        {% elif p == 1 or p == total_pages or (p >= page - 2 and p <= page + 2) %}
                        <a href="{{ url_for('cases_list', page=p, search=search, status=status) }}" 
                           class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% elif p == page - 3 or p == page + 3 %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
                            ...
                        </span>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page < total_pages %}
                    <a href="{{ url_for('cases_list', page=page+1, search=search, status=status) }}" 
                       class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                        <i class="fas fa-chevron-right"></i>
                    </a>
                    {% endif %}
                </nav>
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}