{% extends "base.html" %}

{% block title %}通善口腔 - 患者画像系统{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- 头部 -->
    <div class="text-center mb-12">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">通善口腔患者画像系统</h1>
        <p class="text-xl text-gray-600">请选择要访问的门诊</p>
        <div class="mt-4 text-sm text-gray-500">
            <i class="fas fa-sync-alt mr-2"></i>
            动态加载 · 实时数据
        </div>
    </div>

    <!-- 门诊卡片网格 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        {% for clinic_id, clinic_info in clinics.items() %}
        <div class="bg-white rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 border border-gray-100">
            <div class="p-6">
                <!-- 门诊图标和名称 -->
                <div class="flex items-center mb-4">
                    <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg flex items-center justify-center mr-4">
                        <i class="fas fa-hospital text-white text-xl"></i>
                    </div>
                    <div>
                        <h3 class="text-lg font-semibold text-gray-900">{{ clinic_info.clinic_name }}</h3>
                        <p class="text-sm text-gray-500">{{ clinic_info.description }}</p>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="grid grid-cols-2 gap-4 mb-6">
                    <div class="bg-blue-50 p-3 rounded-lg text-center">
                        <div class="text-2xl font-bold text-blue-600">{{ clinic_info.expected_patients }}</div>
                        <div class="text-xs text-blue-500">预期患者</div>
                    </div>
                    <div class="bg-green-50 p-3 rounded-lg text-center">
                        <div class="text-2xl font-bold text-green-600">{{ clinic_info.get('actual_patients', '?') }}</div>
                        <div class="text-xs text-green-500">实际患者</div>
                    </div>
                </div>

                <!-- 操作按钮 -->
                <div class="space-y-2">
                    <a href="/patient_profiles/{{ clinic_id }}/index.html" 
                       class="block w-full bg-blue-500 hover:bg-blue-600 text-white text-center py-3 px-4 rounded-lg font-medium transition-colors duration-200">
                        <i class="fas fa-users mr-2"></i>
                        查看患者列表
                    </a>
                    <div class="grid grid-cols-2 gap-2">
                        <button onclick="showClinicStats('{{ clinic_id }}')" 
                                class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-3 rounded-lg text-sm transition-colors duration-200">
                            <i class="fas fa-chart-bar mr-1"></i>
                            统计
                        </button>
                        <button onclick="exportClinicData('{{ clinic_id }}')" 
                                class="bg-gray-100 hover:bg-gray-200 text-gray-700 py-2 px-3 rounded-lg text-sm transition-colors duration-200">
                            <i class="fas fa-download mr-1"></i>
                            导出
                        </button>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <!-- 系统统计 -->
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100 mb-8">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-chart-pie text-blue-600 mr-3"></i>
            系统概览
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
            <div class="text-center">
                <div class="text-3xl font-bold text-blue-600 mb-2">{{ total_clinics }}</div>
                <div class="text-sm text-gray-600">门诊数量</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-green-600 mb-2">{{ total_patients }}</div>
                <div class="text-sm text-gray-600">总患者数</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-purple-600 mb-2">{{ total_records }}</div>
                <div class="text-sm text-gray-600">回访记录</div>
            </div>
            <div class="text-center">
                <div class="text-3xl font-bold text-orange-600 mb-2">{{ active_users }}</div>
                <div class="text-sm text-gray-600">活跃用户</div>
            </div>
        </div>
    </div>

    <!-- 快速操作 -->
    <div class="bg-white rounded-xl shadow-lg p-6 border border-gray-100">
        <h2 class="text-2xl font-bold text-gray-900 mb-6 flex items-center">
            <i class="fas fa-bolt text-yellow-600 mr-3"></i>
            快速操作
        </h2>
        
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <button onclick="searchPatient()" 
                    class="bg-blue-500 hover:bg-blue-600 text-white p-4 rounded-lg transition-colors duration-200 flex items-center justify-center">
                <i class="fas fa-search mr-2"></i>
                搜索患者
            </button>
            <button onclick="generateReport()" 
                    class="bg-green-500 hover:bg-green-600 text-white p-4 rounded-lg transition-colors duration-200 flex items-center justify-center">
                <i class="fas fa-file-alt mr-2"></i>
                生成报告
            </button>
            <button onclick="systemSettings()" 
                    class="bg-purple-500 hover:bg-purple-600 text-white p-4 rounded-lg transition-colors duration-200 flex items-center justify-center">
                <i class="fas fa-cog mr-2"></i>
                系统设置
            </button>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="text-center mt-12">
        <p class="text-gray-500">
            <i class="fas fa-hospital mr-2"></i>
            共 {{ total_clinics }} 个门诊，{{ total_patients }} 个患者
        </p>
        <p class="text-xs text-gray-400 mt-2">
            © 2025 通善口腔患者画像系统 v3.0 - 动态模板版本
        </p>
    </div>
</div>

<!-- 搜索模态框 -->
<div id="searchModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-xl shadow-xl max-w-md w-full p-6">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold text-gray-900">搜索患者</h3>
                <button onclick="closeSearchModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="space-y-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">搜索条件</label>
                    <input type="text" id="searchInput" placeholder="输入患者姓名或病历号..." 
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                </div>
                
                <div class="flex justify-end space-x-3">
                    <button onclick="closeSearchModal()" 
                            class="px-4 py-2 text-gray-600 hover:text-gray-800 transition-colors">
                        取消
                    </button>
                    <button onclick="performSearch()" 
                            class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
                        搜索
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
// 显示门诊统计
function showClinicStats(clinicId) {
    alert(`显示 ${clinicId} 的统计信息`);
    // 这里可以实现具体的统计功能
}

// 导出门诊数据
function exportClinicData(clinicId) {
    alert(`导出 ${clinicId} 的数据`);
    // 这里可以实现数据导出功能
}

// 搜索患者
function searchPatient() {
    document.getElementById('searchModal').classList.remove('hidden');
    document.getElementById('searchInput').focus();
}

// 关闭搜索模态框
function closeSearchModal() {
    document.getElementById('searchModal').classList.add('hidden');
    document.getElementById('searchInput').value = '';
}

// 执行搜索
function performSearch() {
    const searchTerm = document.getElementById('searchInput').value.trim();
    if (!searchTerm) {
        alert('请输入搜索条件');
        return;
    }
    
    // 这里可以实现具体的搜索功能
    alert(`搜索: ${searchTerm}`);
    closeSearchModal();
}

// 生成报告
function generateReport() {
    alert('生成系统报告功能');
    // 这里可以实现报告生成功能
}

// 系统设置
function systemSettings() {
    alert('系统设置功能');
    // 这里可以实现系统设置功能
}

// 键盘事件
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape') {
        closeSearchModal();
    }
    if (e.key === 'Enter' && !document.getElementById('searchModal').classList.contains('hidden')) {
        performSearch();
    }
});

// 点击模态框外部关闭
document.getElementById('searchModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closeSearchModal();
    }
});
</script>
{% endblock %}