{% extends "base.html" %}

{% block title %}Doctors - 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 mb-2">Doctors</h1>
            <p class="text-gray-600">Medical professionals performing assessments</p>
        </div>
        <div class="flex gap-3">
            <div class="bg-green-600 text-white px-4 py-2 rounded-lg">
                <i class="fas fa-user-md mr-2"></i>Total: {{ doctors|length }}
            </div>
            <a href="{{ url_for('doctor_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>Add Doctor
            </a>
        </div>
    </div>
    
    <!-- Search Bar -->
    <form method="GET" action="{{ url_for('doctors_list') }}" class="mb-6">
        <div class="flex gap-3">
            <div class="flex-1">
                <input type="text" 
                       name="search" 
                       value="{{ request.args.get('search', '') }}"
                       placeholder="Search by name, specialty, or city..."
                       class="w-full px-6 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <button type="submit" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-lg font-semibold transition">
                <i class="fas fa-search mr-2"></i>Search
            </button>
            {% if request.args.get('search') %}
            <a href="{{ url_for('doctors_list') }}" 
               class="bg-gray-600 hover:bg-gray-700 text-white px-6 py-3 rounded-lg font-semibold transition">
                <i class="fas fa-times mr-2"></i>Clear
            </a>
            {% endif %}
        </div>
    </form>
</div>

{% if doctors %}
<!-- Doctors Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
    {% for doctor in doctors %}
    <div class="bg-white rounded-lg shadow-md hover:shadow-lg transition p-6 border-l-4 border-blue-500">
        <div class="mb-4">
            <div class="flex items-center mb-2">
                <i class="fas fa-user-md text-blue-600 text-2xl mr-3"></i>
                <div class="flex-1">
                    <h3 class="font-semibold text-gray-800 text-lg">
                        {% if doctor['prefix'] %}{{ doctor['prefix'] }} {% endif %}{% if doctor['first_name'] %}{{ doctor['first_name'] }} {% endif %}{% if doctor['last_name'] %}{{ doctor['last_name'] }}{% else %}{{ doctor['name'] }}{% endif %}
                    </h3>
                    {% if doctor['specialty'] %}
                    <p class="text-sm text-blue-600 font-medium">{{ doctor['specialty'] }}</p>
                    {% else %}
                    <p class="text-sm text-gray-500 italic">Specialty not specified</p>
                    {% endif %}
                </div>
            </div>
        </div>
        
        <div class="space-y-2 mb-4">
            {% if doctor['clinic_city'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-hospital text-gray-400 mr-2"></i>
                <span>{{ doctor['clinic_city'] }}{% if doctor['clinic_province'] %}, {{ doctor['clinic_province'] }}{% endif %}</span>
            </div>
            {% elif doctor['mailing_city'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                <span>{{ doctor['mailing_city'] }}{% if doctor['mailing_province'] %}, {{ doctor['mailing_province'] }}{% endif %}</span>
            </div>
            {% elif doctor['city'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-map-marker-alt text-gray-400 mr-2"></i>
                <span>{{ doctor['city'] }}</span>
            </div>
            {% endif %}
            
            {% if doctor['phone'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-phone text-gray-400 mr-2"></i>
                <span>{{ doctor['phone'] }}</span>
            </div>
            {% endif %}
            
            {% if doctor['cell_phone'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-mobile-alt text-gray-400 mr-2"></i>
                <span>{{ doctor['cell_phone'] }}</span>
            </div>
            {% endif %}
            
            {% if doctor['email'] %}
            <div class="flex items-center text-sm text-gray-700">
                <i class="fas fa-envelope text-gray-400 mr-2"></i>
                <span>{{ doctor['email'] }}</span>
            </div>
            {% endif %}
        </div>
        
        {% if doctor['notes'] %}
        <p class="text-sm text-gray-700 mb-4 border-t pt-4">{{ doctor['notes'] }}</p>
        {% endif %}
        
        <!-- Actions -->
        <div class="flex justify-end gap-2 pt-4 border-t">
            <a href="{{ url_for('doctor_edit', doctor_id=doctor['id']) }}" 
               class="text-blue-600 hover:text-blue-800 text-sm font-semibold">
                <i class="fas fa-edit mr-1"></i>Edit
            </a>
            <form method="POST" 
                  action="{{ url_for('doctor_delete', doctor_id=doctor['id']) }}" 
                  onsubmit="return confirm('Are you sure you want to delete this doctor?');"
                  style="display: inline;">
                <button type="submit" class="text-red-600 hover:text-red-800 text-sm font-semibold">
                    <i class="fas fa-trash mr-1"></i>Delete
                </button>
            </form>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="bg-gray-50 rounded-lg shadow-md p-12 text-center">
    <i class="fas fa-user-md text-6xl text-gray-400 mb-4"></i>
    <h2 class="text-2xl font-bold text-gray-600 mb-2">No Doctors Found</h2>
    <p class="text-gray-500 mb-6">Start by adding your first doctor</p>
    <a href="{{ url_for('doctor_new') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition">
        <i class="fas fa-plus mr-2"></i>Add First Doctor
    </a>
</div>
{% endif %}
{% endblock %}