{% extends "base.html" %}

{% block title %}{{ client['company_name'] }} - Vera Medical CRM{% endblock %}

{% block content %}
<div class="mb-6">
    <div class="flex justify-between items-center">
        <div>
            <h1 class="text-3xl font-bold text-gray-800">{{ client['company_name'] }}</h1>
            <p class="text-gray-600">Insurance Client Profile</p>
        </div>
        <div class="flex gap-3">
            <a href="{{ url_for('client_edit', client_id=client['id']) }}" 
               class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-edit mr-2"></i>Edit Company Info
            </a>
            <a href="{{ url_for('clients_list') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg font-semibold transition">
                <i class="fas fa-arrow-left mr-2"></i>Back to Clients
            </a>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Client Details -->
    <div class="lg:col-span-2">
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-purple-500 to-purple-600 px-6 py-4">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-building mr-2"></i>Company Information
                </h2>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-2 gap-4">
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Company Name</p>
                        <p class="font-semibold text-gray-800 text-lg">{{ client['company_name'] }}</p>
                    </div>
                    {% if client['company_alias'] %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Alias</p>
                        <p class="font-semibold text-gray-800">{{ client['company_alias'] }}</p>
                    </div>
                    {% endif %}
                    <div class="col-span-2">
                        <p class="text-sm text-gray-600">Address</p>
                        <p class="font-semibold text-gray-800">
                            {{ client['address'] or 'N/A' }}<br>
                            {% if client['city'] or client['province'] %}
                            {{ client['city'] }}{% if client['province'] %}, {{ client['province'] }}{% endif %} {{ client['postal_code'] }}
                            {% endif %}
                        </p>
                    </div>
                    {% if client['assistant_phone'] %}
                    <div>
                        <p class="text-sm text-gray-600">Phone</p>
                        <p class="font-semibold text-gray-800">{{ client['assistant_phone']|format_phone }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <!-- Client Contacts -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden mb-6">
            <div class="bg-gradient-to-r from-orange-500 to-orange-600 px-6 py-4 flex justify-between items-center">
                <h2 class="text-xl font-bold text-white">
                    <i class="fas fa-users mr-2"></i>Contacts / Adjusters ({{ contacts|length }} of {{ total_contacts|default(0) }})
                </h2>
                <a href="{{ url_for('contact_new', client_id=client['id']) }}" 
                   class="bg-white hover:bg-orange-50 text-orange-600 px-4 py-2 rounded-lg font-semibold transition">
                    <i class="fas fa-plus mr-2"></i>Add Contact
                </a>
            </div>
            <div class="p-6">
                {% if contacts %}
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {% for contact in contacts %}
                    <div class="border rounded-lg p-4 hover:shadow-md transition relative">
                        <div class="flex justify-between items-start mb-2">
                            <div>
                                <p class="font-semibold text-gray-800">
                                    {{ contact['first_name'] }} {{ contact['last_name'] }}
                                </p>
                                {% if contact['title'] %}
                                <p class="text-sm text-gray-600">{{ contact['title'] }}</p>
                                {% endif %}
                                {% if contact['phone'] %}
                                <p class="text-sm text-gray-600 mt-2">
                                    <i class="fas fa-phone mr-1 text-orange-500"></i>
                                    {{ contact['phone']|format_phone }}
                                </p>
                                {% endif %}
                            </div>
                            <div class="flex gap-2">
                                <a href="{{ url_for('contact_edit', client_id=client['id'], contact_id=contact['id']) }}" 
                                   class="text-blue-600 hover:text-blue-800">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form method="POST" 
                                      action="{{ url_for('contact_delete', client_id=client['id'], contact_id=contact['id']) }}" 
                                      onsubmit="return confirm('Are you sure you want to delete this contact?');"
                                      style="display: inline;">
                                    <button type="submit" class="text-red-600 hover:text-red-800">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <p class="text-center text-gray-500 py-8">No contacts added yet. <a href="{{ url_for('contact_new', client_id=client['id']) }}" class="text-blue-600 hover:text-blue-800">Add one now</a></p>
                {% endif %}
                
                <!-- Contacts Pagination -->
                {% if total_contact_pages > 1 %}
                <div class="mt-6 flex justify-center items-center gap-2">
                    {% if contact_page > 1 %}
                    <a href="{{ url_for('client_view', client_id=client['id'], contact_page=contact_page-1) }}#contacts" 
                       class="px-4 py-2 bg-orange-200 hover:bg-orange-300 text-orange-700 rounded-lg font-semibold transition">
                        <i class="fas fa-chevron-left mr-1"></i>Prev
                    </a>
                    {% endif %}
                    
                    <span class="px-4 py-2 text-orange-700">
                        Page {{ contact_page }} of {{ total_contact_pages }}
                    </span>
                    
                    {% if contact_page < total_contact_pages %}
                    <a href="{{ url_for('client_view', client_id=client['id'], contact_page=contact_page+1) }}#contacts" 
                       class="px-4 py-2 bg-orange-200 hover:bg-orange-300 text-orange-700 rounded-lg font-semibold transition">
                        Next <i class="fas fa-chevron-right ml-1"></i>
                    </a>
                    {% endif %}
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Recent Cases -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <div class="bg-gradient-to-r from-blue-500 to-blue-600 px-6 py-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold text-white">
                        <i class="fas fa-folder-open mr-2"></i>Recent Cases
                    </h2>
                    <div class="flex gap-2">
                        <a href="{{ url_for('client_view', client_id=client['id'], filter='all', page=1) }}" 
                           class="px-3 py-1 text-sm rounded {% if case_filter == 'all' %}bg-white text-blue-600{% else %}bg-blue-400 text-white{% endif %} hover:bg-blue-300 transition">
                            All Cases
                        </a>
                        <a href="{{ url_for('client_view', client_id=client['id'], filter='active', page=1) }}" 
                           class="px-3 py-1 text-sm rounded {% if case_filter == 'active' %}bg-white text-blue-600{% else %}bg-blue-400 text-white{% endif %} hover:bg-blue-300 transition">
                            Active Only
                        </a>
                        <a href="{{ url_for('client_view', client_id=client['id'], filter='closed', page=1) }}" 
                           class="px-3 py-1 text-sm rounded {% if case_filter == 'closed' %}bg-white text-blue-600{% else %}bg-blue-400 text-white{% endif %} hover:bg-blue-300 transition">
                            Closed Only
                        </a>
                    </div>
                </div>
            </div>
            <div class="p-6">
                {% if cases %}
                <div class="space-y-4">
                    {% for case in cases %}
                    <a href="{{ url_for('case_view', case_id=case['id'], return_to=request.url) }}" class="block">
                        <div class="border-l-4 border-blue-400 pl-4 py-3 hover:bg-gray-50 transition cursor-pointer rounded-r">
                            <div class="flex justify-between items-start">
                                <div>
                                    <p class="font-semibold text-gray-800">
                                        {{ case['claimant_first_name'] }} {{ case['claimant_last_name'] }}
                                    </p>
                                    <p class="text-sm text-gray-600">
                                        Case #{{ case['file_case_id'] or case['record_id'][:8] }}
                                    </p>
                                    <p class="text-xs text-gray-500 mt-1">
                                        {{ case['assessment_type'] or 'N/A' }}
                                    </p>
                                </div>
                                <div class="text-right">
                                    <p class="text-xs text-gray-500">
                                        {{ case['file_open_date']|format_date }}
                                    </p>
                                    {% if case['file_close_date'] %}
                                    <span class="inline-block mt-1 px-2 py-1 text-xs rounded bg-gray-100 text-gray-600">
                                        Closed
                                    </span>
                                    {% else %}
                                    <span class="inline-block mt-1 px-2 py-1 text-xs rounded bg-green-100 text-green-600">
                                        Active
                                    </span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </a>
                    {% endfor %}
                </div>
                <!-- Pagination -->
                {% if total_pages > 1 %}
                <div class="mt-6 flex justify-center items-center gap-2">
                    {% if page > 1 %}
                    <a href="{{ url_for('client_view', client_id=client['id'], filter=case_filter, page=page-1) }}" 
                       class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-semibold transition">
                        <i class="fas fa-chevron-left mr-1"></i>Prev
                    </a>
                    {% endif %}
                    
                    <span class="px-4 py-2 text-gray-700">
                        Page {{ page }} of {{ total_pages }}
                    </span>
                    
                    {% if page < total_pages %}
                    <a href="{{ url_for('client_view', client_id=client['id'], filter=case_filter, page=page+1) }}" 
                       class="px-4 py-2 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg font-semibold transition">
                        Next <i class="fas fa-chevron-right ml-1"></i>
                    </a>
                    {% endif %}
                </div>
                {% endif %}
                
                <div class="mt-6 text-center">
                    <a href="{{ url_for('cases_list') }}?client={{ client['id'] }}" 
                       class="text-blue-600 hover:text-blue-800 font-semibold">
                        View All Cases <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
                {% else %}
                <p class="text-center text-gray-500 py-8">
                    No {% if case_filter == 'active' %}active{% elif case_filter == 'closed' %}closed{% endif %} cases for this client
                </p>
                {% endif %}
            </div>
        </div>
    </div>
    
    <!-- Sidebar Stats -->
    <div class="space-y-6">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="font-bold text-gray-800 mb-4">
                <i class="fas fa-chart-pie mr-2 text-purple-500"></i>
                Case Statistics
            </h3>
            <div class="space-y-4">
                <div class="text-center p-4 bg-blue-50 rounded-lg">
                    <p class="text-sm text-gray-600">Total Cases</p>
                    <p class="text-4xl font-bold text-blue-600">{{ all_cases|length }}</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div class="text-center p-4 bg-green-50 rounded-lg">
                        <p class="text-xs text-gray-600">Active</p>
                        <p class="text-2xl font-bold text-green-600">
                            {{ all_cases|selectattr('file_close_date', 'none')|list|length }}
                        </p>
                    </div>
                    <div class="text-center p-4 bg-gray-50 rounded-lg">
                        <p class="text-xs text-gray-600">Closed</p>
                        <p class="text-2xl font-bold text-gray-600">
                            {{ all_cases|rejectattr('file_close_date', 'none')|list|length }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="font-bold text-gray-800 mb-4">
                <i class="fas fa-users mr-2 text-orange-500"></i>
                Contacts
            </h3>
            <p class="text-center">
                <span class="text-4xl font-bold text-orange-600">{{ contacts|length }}</span>
                <span class="block text-sm text-gray-600 mt-1">Adjusters</span>
            </p>
        </div>
    </div>
</div>
{% endblock %}