{% extends 'layouts/base.html' %}

{% block title %}Finanzas{% endblock %}

{% block content %}
<div class="mb-6 flex justify-between items-center">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Módulo de Finanzas</h1>
        <p class="text-gray-500">Historial y proyecciones de {{ vendedor.nombre_negocio }}.</p>
    </div>
    <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium shadow-sm flex items-center transition-colors">
        <i class="ph ph-download-simple mr-2 text-lg"></i> Exportar Reporte
    </button>
</div>

<!-- Tarjetas Financieras Dinámicas -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-8">
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-10">
            <i class="ph ph-wallet text-9xl"></i>
        </div>
        <div class="p-4 rounded-full bg-green-50 text-green-600 mr-5 z-10">
            <i class="ph ph-trend-up text-3xl"></i>
        </div>
        <div class="z-10">
            <p class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Ingresos del Mes</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">S/ {{ finanzas.ingresos_mes }}</p>
        </div>
    </div>
    
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center relative overflow-hidden">
        <div class="absolute right-0 top-0 opacity-10">
            <i class="ph ph-chart-line-up text-9xl"></i>
        </div>
        <div class="p-4 rounded-full bg-blue-50 text-blue-600 mr-5 z-10">
            <i class="ph ph-calendar-plus text-3xl"></i>
        </div>
        <div class="z-10">
            <p class="text-sm font-semibold text-gray-500 uppercase tracking-wider">Estimado (Próx. 30 días)</p>
            <p class="text-3xl font-bold text-gray-900 mt-1">S/ {{ finanzas.ingreso_estimado }}</p>
            <p class="text-xs text-gray-400 mt-1">Basado en próximas renovaciones</p>
        </div>
    </div>
</div>

<!-- Historial de Ventas Directo de MySQL -->
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-5 border-b border-gray-100 flex justify-between items-center bg-gray-50">
        <h2 class="text-lg font-semibold text-gray-800">Últimas Ventas Registradas</h2>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-white border-b border-gray-100 text-xs text-gray-500 uppercase tracking-wider">
                    <th class="px-6 py-4 font-semibold">ID Venta</th>
                    <th class="px-6 py-4 font-semibold">Fecha de Compra</th>
                    <th class="px-6 py-4 font-semibold">Estado</th>
                    <th class="px-6 py-4 font-semibold">Vencimiento</th>
                    <th class="px-6 py-4 font-semibold text-right">Monto (S/)</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% if finanzas.ultimas_ventas %}
                    {% for venta in finanzas.ultimas_ventas %}
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="px-6 py-4 font-medium text-gray-900">#{{ venta.id }}</td>
                        <td class="px-6 py-4 text-gray-600">{{ venta.fecha_venta.strftime('%d/%m/%Y') }}</td>
                        <td class="px-6 py-4">
                            {% if venta.estado == 'activo' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">Activo</span>
                            {% elif venta.estado == 'pendiente' %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800">Pendiente</span>
                            {% else %}
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Vencido</span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 text-gray-600">{{ venta.fecha_vencimiento.strftime('%d/%m/%Y') }}</td>
                        <td class="px-6 py-4 text-right font-bold text-gray-900">S/ {{ venta.precio_aplicado }}</td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="5" class="px-6 py-10 text-center text-gray-500">
                            <i class="ph ph-receipt text-4xl mb-2 text-gray-300"></i>
                            <p>Aún no hay registros de ventas para mostrar en este negocio.</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}