{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}
{% block header %}Dashboard{% endblock %}
{% block content %}
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-check-circle text-green-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 font-medium">Envíos Exitosos</p>
                <p class="text-2xl font-bold text-gray-800">{{ stats.total_exitosos or 0 }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-times-circle text-red-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 font-medium">Envíos Fallidos</p>
                <p class="text-2xl font-bold text-gray-800">{{ stats.total_errores or 0 }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-user text-blue-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 font-medium">Terceros</p>
                <p class="text-2xl font-bold text-gray-800">{{ stats.total_terceros or 0 }}</p>
            </div>
        </div>
    </div>
    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
        <div class="flex items-center">
            <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                <i class="fas fa-file-invoice text-purple-600 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm text-gray-500 font-medium">Transacciones</p>
                <p class="text-2xl font-bold text-gray-800">{{ stats.total_transacciones or 0 }}</p>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-history mr-2 text-blue-500"></i>Últimos Envíos</h3>
        </div>
        <div class="p-6">
            {% if ultimos %}
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="text-left text-gray-500 border-b border-gray-100">
                            <th class="pb-3 font-medium">Tipo</th>
                            <th class="pb-3 font-medium">Factura</th>
                            <th class="pb-3 font-medium">Estado</th>
                            <th class="pb-3 font-medium">Fecha</th>
                            <th class="pb-3 font-medium">Usuario</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for e in ultimos %}
                        <tr class="border-b border-gray-50 hover:bg-gray-50">
                            <td class="py-3">
                                <span class="px-2 py-1 rounded text-xs font-medium {% if e.tipo == 'terceros' %}bg-blue-100 text-blue-700{% else %}bg-purple-100 text-purple-700{% endif %}">
                                    {{ e.tipo }}
                                </span>
                            </td>
                            <td class="py-3 text-gray-600">{{ e.factura or '-' }}</td>
                            <td class="py-3">
                                <span class="px-2 py-1 rounded text-xs font-medium {% if e.status == 'success' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                                    {{ 'Exitoso' if e.status == 'success' else 'Error' }}
                                </span>
                            </td>
                            <td class="py-3 text-gray-500 text-xs">{{ e.created_at[:19] }}</td>
                            <td class="py-3 text-gray-500">{{ e.username }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% else %}
            <div class="text-center py-8 text-gray-400">
                <i class="fas fa-inbox text-4xl mb-3 block"></i>
                <p>No hay envíos registrados</p>
                <p class="text-xs mt-1">Usa el menú lateral para comenzar</p>
            </div>
            {% endif %}
        </div>
    </div>

    <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-6 py-4 border-b border-gray-200">
            <h3 class="font-semibold text-gray-800"><i class="fas fa-rocket mr-2 text-blue-500"></i>Acciones Rápidas</h3>
        </div>
        <div class="p-6 space-y-4">
            <a href="/terceros" class="block p-4 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors">
                <div class="flex items-center">
                    <i class="fas fa-user text-blue-500 text-xl mr-4"></i>
                    <div>
                        <p class="font-medium text-gray-800">Enviar Terceros</p>
                        <p class="text-xs text-gray-500">Genera y envía datos maestros de pacientes</p>
                    </div>
                    <i class="fas fa-chevron-right text-blue-400 ml-auto"></i>
                </div>
            </a>
            <a href="/transaccion" class="block p-4 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors">
                <div class="flex items-center">
                    <i class="fas fa-exchange-alt text-purple-500 text-xl mr-4"></i>
                    <div>
                        <p class="font-medium text-gray-800">Enviar Transacción RIPS</p>
                        <p class="text-xs text-gray-500">Genera y envía procedimientos por factura</p>
                    </div>
                    <i class="fas fa-chevron-right text-purple-400 ml-auto"></i>
                </div>
            </a>
            <a href="/automation" class="block p-4 bg-green-50 rounded-xl hover:bg-green-100 transition-colors">
                <div class="flex items-center">
                    <i class="fas fa-robot text-green-500 text-xl mr-4"></i>
                    <div>
                        <p class="font-medium text-gray-800">Automatización Completa</p>
                        <p class="text-xs text-gray-500">Paso 1 (terceros) + Paso 2 (transacción) automático</p>
                    </div>
                    <i class="fas fa-chevron-right text-green-400 ml-auto"></i>
                </div>
            </a>
        </div>
    </div>
</div>
{% endblock %}