pos_heidiver/resources/views/filament/pages/informe-resumen.blade.php

<div class="space-y-6">
    {{-- Información del Período --}}
    <div class="bg-blue-50 rounded-lg p-4 border border-blue-200">
        <h3 class="text-lg font-semibold text-blue-900 mb-2">📅 Período Analizado</h3>
        <div class="grid grid-cols-3 gap-4 text-sm">
            <div>
                <span class="font-medium text-blue-800">Desde:</span>
                <span class="text-blue-600">{{ $resumen['periodo']['fecha_desde'] }}</span>
            </div>
            <div>
                <span class="font-medium text-blue-800">Hasta:</span>
                <span class="text-blue-600">{{ $resumen['periodo']['fecha_hasta'] }}</span>
            </div>
            <div>
                <span class="font-medium text-blue-800">Días:</span>
                <span class="text-blue-600">{{ $resumen['periodo']['dias'] }} días</span>
            </div>
        </div>
    </div>

    {{-- Métricas Principales --}}
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div class="bg-green-50 rounded-lg p-4 border border-green-200">
            <div class="text-2xl font-bold text-green-700">{{ number_format($resumen['totales']['productos_vendidos']) }}</div>
            <div class="text-sm text-green-600">Productos Vendidos</div>
        </div>
        
        <div class="bg-orange-50 rounded-lg p-4 border border-orange-200">
            <div class="text-2xl font-bold text-orange-700">${{ number_format($resumen['totales']['promedio_compra'], 0) }}</div>
            <div class="text-sm text-orange-600">Promedio Ponderado</div>
        </div>
        
        <div class="bg-red-50 rounded-lg p-4 border border-red-200">
            <div class="text-2xl font-bold text-red-700">${{ number_format($resumen['totales']['valor_total_compra'], 0) }}</div>
            <div class="text-sm text-red-600">Valor Total Compra</div>
        </div>
        
        <div class="bg-purple-50 rounded-lg p-4 border border-purple-200">
            <div class="text-2xl font-bold text-purple-700">{{ round($resumen['totales']['margen_total'], 2) }}%</div>
            <div class="text-sm text-purple-600">Margen Total</div>
        </div>
    </div>

    {{-- Análisis Financiero --}}
    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
        <h3 class="text-lg font-semibold text-gray-900 mb-3">💰 Análisis Financiero</h3>
        <div class="grid grid-cols-2 gap-4 text-sm">
            <div>
                <span class="font-medium text-gray-700">Valor Total Compra:</span>
                <span class="text-gray-900">${{ number_format($resumen['totales']['valor_total_compra'], 0) }}</span>
            </div>
            <div>
                <span class="font-medium text-gray-700">Valor Total Venta:</span>
                <span class="text-gray-900">${{ number_format($resumen['totales']['valor_total_venta'], 0) }}</span>
            </div>
            <div>
                <span class="font-medium text-gray-700">Beneficio Total:</span>
                <span class="text-{{ $resumen['totales']['beneficio_total'] >= 0 ? 'green' : 'red' }}-600 font-semibold">
                    ${{ number_format($resumen['totales']['beneficio_total'], 0) }}
                </span>
            </div>
            <div>
                <span class="font-medium text-gray-700">Promedio Venta:</span>
                <span class="text-gray-900">${{ number_format($resumen['totales']['promedio_venta'], 0) }}</span>
            </div>
        </div>
    </div>

    {{-- Top Productos --}}
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">🏆 Top 10 Productos por Valor de Compra</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Producto</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Cantidad</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Precio Compra</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Valor Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($resumen['top_productos'] as $producto)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2 text-sm text-gray-900">{{ $producto->nombre }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600 text-right">{{ number_format($producto->cantidad_vendida) }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600 text-right">${{ number_format($producto->precio_compra, 0) }}</td>
                        <td class="px-4 py-2 text-sm font-medium text-gray-900 text-right">${{ number_format($producto->valor_compra_total, 0) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Análisis por Categoría --}}
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="bg-gray-50 px-4 py-3 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-900">📊 Análisis por Categoría</h3>
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-4 py-2 text-left text-xs font-medium text-gray-500 uppercase">Categoría</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Productos</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Cantidad</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Precio Promedio</th>
                        <th class="px-4 py-2 text-right text-xs font-medium text-gray-500 uppercase">Valor Total</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-200">
                    @foreach($resumen['categorias'] as $categoria)
                    <tr class="hover:bg-gray-50">
                        <td class="px-4 py-2 text-sm font-medium text-gray-900">{{ $categoria->categoria }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600 text-right">{{ $categoria->productos_diferentes }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600 text-right">{{ number_format($categoria->cantidad_vendida) }}</td>
                        <td class="px-4 py-2 text-sm text-gray-600 text-right">${{ number_format($categoria->precio_compra_promedio, 0) }}</td>
                        <td class="px-4 py-2 text-sm font-medium text-gray-900 text-right">${{ number_format($categoria->valor_compra_total, 0) }}</td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>

    {{-- Notas Explicativas --}}
    <div class="bg-yellow-50 rounded-lg p-4 border border-yellow-200">
        <h4 class="text-sm font-semibold text-yellow-800 mb-2">📋 Notas Importantes:</h4>
        <ul class="text-xs text-yellow-700 space-y-1">
            <li>• <strong>Promedio Ponderado:</strong> Se calcula como (Σ cantidad × precio_compra) ÷ Σ cantidad</li>
            <li>• <strong>Margen:</strong> Porcentaje de ganancia sobre el precio de compra</li>
            <li>• <strong>Valor Total Compra:</strong> Inversión total en los productos vendidos durante el período</li>
            <li>• <strong>Solo se consideran productos vendidos</strong> en el rango de fechas seleccionado</li>
        </ul>
    </div>
</div>