@extends('dashboard.layouts.app')

@section('title', 'Detalles de Caja')

@section('content')
<div class="min-h-screen p-6">
    <div class="mx-auto max-w-screen-2xl">
        <!-- Header -->
        <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Caja #{{ $caja->public_id }}</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Detalles y transacciones de la caja</p>
            </div>
            <div class="flex items-center gap-3">
                @if($caja->estado === 'abierta')
                    <a href="{{ route('dashboard.cajas.edit', $caja) }}" class="inline-flex items-center gap-2 rounded-lg bg-brand-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-brand-600 focus:ring-4 focus:ring-brand-500/20 dark:bg-brand-600 dark:hover:bg-brand-700">
                        <i data-lucide="lock" class="h-4 w-4"></i>
                        Cerrar Caja
                    </a>
                @endif
                <a href="{{ route('dashboard.caja-transacciones.create') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
                    <i data-lucide="plus" class="h-4 w-4"></i>
                    Nueva Transacción
                </a>
                <a href="{{ route('dashboard.cajas.index') }}" class="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50 hover:border-gray-400 dark:border-gray-600 dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06] dark:hover:border-gray-500">
                    <i data-lucide="arrow-left" class="h-4 w-4"></i>
                    Volver
                </a>
            </div>
        </div>

        <div class="space-y-6">
                <!-- Detalles de la Caja -->
                <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                    <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">Información de la Caja</h2>
                    </div>
                    <div class="p-6">
                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Caja ID</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">#{{ $caja->public_id }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado</h3>
                                <div class="mt-1">
                                    @if($caja->estado === 'abierta')
                                        <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-3 py-1 text-sm font-semibold text-green-800 dark:bg-green-900 dark:text-green-200">
                                            <i data-lucide="check-circle" class="h-4 w-4"></i>
                                            Abierta
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-600 dark:bg-gray-700 dark:text-gray-300">
                                            <i data-lucide="lock" class="h-4 w-4"></i>
                                            Cerrada
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Usuario</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $caja->usuario->name }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $caja->usuario->email }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Cochera</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $caja->cochera->nombre }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $caja->cochera->direccion }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Apertura</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $caja->fecha_apertura->format('d/m/Y') }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $caja->fecha_apertura->format('H:i:s') }}</p>
                            </div>
                            @if($caja->fecha_cierre)
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Cierre</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $caja->fecha_cierre->format('d/m/Y') }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $caja->fecha_cierre->format('H:i:s') }}</p>
                            </div>
                            @endif
                        </div>
                        
                        @if($caja->observaciones)
                        <div class="mt-6">
                            <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Observaciones</h3>
                            <p class="mt-1 text-sm text-gray-900 dark:text-white">{{ $caja->observaciones }}</p>
                        </div>
                        @endif
                    </div>
                </div>

                <!-- Balance y Arqueo -->
                <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                    <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
                        <h2 class="text-lg font-medium text-gray-900 dark:text-white">
                            @if($caja->estado === 'abierta')
                                Balance Actual
                            @else
                                Resumen del Último Cierre
                            @endif
                        </h2>
                    </div>
                    <div class="p-6">
                        @if($caja->estado === 'abierta')
                            <!-- Balance para cajas abiertas -->
                            <div class="grid grid-cols-2 gap-6 sm:grid-cols-4">
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-brand-600 dark:text-brand-400">S/ {{ number_format($estadisticas['monto_inicial'], 2) }}</div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">Monto Inicial</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-green-600 dark:text-green-400">S/ {{ number_format($estadisticas['total_ventas'], 2) }}</div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">Total Ventas</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-bold text-red-600 dark:text-red-400">S/ {{ number_format($estadisticas['total_egresos'], 2) }}</div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">Total Egresos</div>
                                </div>
                                <div class="text-center">
                                    @php
                                        $balanceTotal = $estadisticas['balance_total'];
                                        $isNegative = $balanceTotal < 0;
                                    @endphp
                                    <div class="text-2xl font-bold {{ $isNegative ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' }}">
                                        S/ {{ $isNegative ? '-' : '' }}{{ number_format(abs($balanceTotal), 2) }}
                                    </div>
                                    <div class="text-sm text-gray-500 dark:text-gray-400">
                                        @if($isNegative)
                                            Balance Negativo
                                        @else
                                            Balance Total
                                        @endif
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Desglose por Método de Pago -->
                            <div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
                                <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Desglose por Método de Pago</h4>
                                
                                <!-- Tabla de Desglose -->
                                <div class="overflow-x-auto">
                                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                        <thead class="bg-gray-100 dark:bg-gray-700">
                                            <tr>
                                                <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Método de Pago
                                                </th>
                                                <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Balance Actual
                                                </th>
                                                <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Ingresos
                                                </th>
                                                <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                    Egresos
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
                                            <!-- Efectivo -->
                                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                    Efectivo
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                    S/ {{ number_format($caja->getTotalPorMetodoPago('efectivo'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-green-600 dark:text-green-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'ingreso')->where('metodo_pago', 'efectivo')->sum('monto'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-red-600 dark:text-red-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'egreso')->where('metodo_pago', 'efectivo')->sum('monto'), 2) }}
                                                </td>
                                            </tr>
                                            
                                            <!-- Tarjeta -->
                                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                    Tarjeta
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                    S/ {{ number_format($caja->getTotalPorMetodoPago('tarjeta'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-green-600 dark:text-green-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'ingreso')->where('metodo_pago', 'tarjeta')->sum('monto'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-red-600 dark:text-red-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'egreso')->where('metodo_pago', 'tarjeta')->sum('monto'), 2) }}
                                                </td>
                                            </tr>
                                            
                                            <!-- Transferencia -->
                                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                    Transferencia
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                    S/ {{ number_format($caja->getTotalPorMetodoPago('transferencia'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-green-600 dark:text-green-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'ingreso')->where('metodo_pago', 'transferencia')->sum('monto'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-red-600 dark:text-red-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'egreso')->where('metodo_pago', 'transferencia')->sum('monto'), 2) }}
                                                </td>
                                            </tr>
                                            
                                            <!-- Yape -->
                                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                    Yape
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                    S/ {{ number_format($caja->getTotalPorMetodoPago('yape'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-green-600 dark:text-green-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'ingreso')->where('metodo_pago', 'yape')->sum('monto'), 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right text-red-600 dark:text-red-400">
                                                    S/ {{ number_format($caja->transacciones()->where('tipo', 'egreso')->where('metodo_pago', 'yape')->sum('monto'), 2) }}
                                                </td>
                                            </tr>
                                            
                                            <!-- Total -->
                                            <tr class="bg-gray-50 dark:bg-gray-700 font-medium">
                                                <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                    Total
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right font-bold text-gray-900 dark:text-white">
                                                    S/ {{ number_format($estadisticas['balance_total'], 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right font-bold text-green-600 dark:text-green-400">
                                                    S/ {{ number_format($estadisticas['total_ingresos'], 2) }}
                                                </td>
                                                <td class="px-4 py-3 text-sm text-right font-bold text-red-600 dark:text-red-400">
                                                    S/ {{ number_format($estadisticas['total_egresos'], 2) }}
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                        @else
                            <!-- Arqueo para cajas cerradas -->
                            @if($cierres->count() > 0)
                                @php
                                    $ultimoCierre = $cierres->first();
                                    $montoEsperado = $ultimoCierre->monto_efectivo_esperado;
                                    $montoReal = $ultimoCierre->monto_efectivo_real;
                                    $diferencia = $ultimoCierre->diferencia;
                                @endphp

                                
                                <!-- Resumen del Cierre -->
                                <div class="mt-6 p-4 bg-gray-50 rounded-lg dark:bg-gray-800">
                                    <h4 class="text-sm font-medium text-gray-900 dark:text-white mb-4">Resumen del Cierre</h4>
                                    
                                    <!-- Tabla de Resumen -->
                                    <div class="overflow-x-auto">
                                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                                            <thead class="bg-gray-100 dark:bg-gray-700">
                                                <tr>
                                                    <th class="px-4 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                        Método de Pago
                                                    </th>
                                                    <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                        Monto Real
                                                    </th>
                                                    <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                        Monto Esperado
                                                    </th>
                                                    <th class="px-4 py-3 text-right text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                                        Diferencia
                                                    </th>
                                                </tr>
                                            </thead>
                                            <tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-700">
                                                <!-- Efectivo -->
                                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                        Efectivo
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                        S/ {{ number_format($ultimoCierre->monto_efectivo_real, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
                                                        S/ {{ number_format($ultimoCierre->monto_efectivo_esperado, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right">
                                                        @if($ultimoCierre->diferencia != 0)
                                                            <span class="font-medium {{ $ultimoCierre->diferencia > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                                {{ $ultimoCierre->diferencia > 0 ? '+' : '' }}S/ {{ number_format($ultimoCierre->diferencia, 2) }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                
                                                <!-- Tarjeta -->
                                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                        Tarjeta
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                        S/ {{ number_format($ultimoCierre->monto_tarjeta_real, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
                                                        S/ {{ number_format($ultimoCierre->monto_tarjeta_esperado, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right">
                                                        @if($ultimoCierre->diferencia_tarjeta != 0)
                                                            <span class="font-medium {{ $ultimoCierre->diferencia_tarjeta > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                                {{ $ultimoCierre->diferencia_tarjeta > 0 ? '+' : '' }}S/ {{ number_format($ultimoCierre->diferencia_tarjeta, 2) }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                
                                                <!-- Transferencia -->
                                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                        Transferencia
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                        S/ {{ number_format($ultimoCierre->monto_transferencia_real, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
                                                        S/ {{ number_format($ultimoCierre->monto_transferencia_esperado, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right">
                                                        @if($ultimoCierre->diferencia_transferencia != 0)
                                                            <span class="font-medium {{ $ultimoCierre->diferencia_transferencia > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                                {{ $ultimoCierre->diferencia_transferencia > 0 ? '+' : '' }}S/ {{ number_format($ultimoCierre->diferencia_transferencia, 2) }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                
                                                <!-- Yape -->
                                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
                                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                        Yape
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                        S/ {{ number_format($ultimoCierre->monto_yape_real, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
                                                        S/ {{ number_format($ultimoCierre->monto_yape_esperado, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right">
                                                        @if($ultimoCierre->diferencia_yape != 0)
                                                            <span class="font-medium {{ $ultimoCierre->diferencia_yape > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                                {{ $ultimoCierre->diferencia_yape > 0 ? '+' : '' }}S/ {{ number_format($ultimoCierre->diferencia_yape, 2) }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                                
                                                <!-- Línea separadora -->
                                                <tr class="border-t-2 border-gray-300 dark:border-gray-600">
                                                    <td class="px-4 py-3"></td>
                                                    <td class="px-4 py-3"></td>
                                                    <td class="px-4 py-3"></td>
                                                    <td class="px-4 py-3"></td>
                                                </tr>
                                                
                                                <!-- Totales -->
                                                <tr class="bg-gray-50 dark:bg-gray-700 font-semibold">
                                                    <td class="px-4 py-3 text-sm font-medium text-gray-900 dark:text-white">
                                                        Total Cierre
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-900 dark:text-white">
                                                        S/ {{ number_format($ultimoCierre->total_cierre, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right text-gray-500 dark:text-gray-400">
                                                        S/ {{ number_format($ultimoCierre->total_esperado, 2) }}
                                                    </td>
                                                    <td class="px-4 py-3 text-sm text-right">
                                                        @php
                                                            $diferenciaTotal = $ultimoCierre->total_cierre - $ultimoCierre->total_esperado;
                                                        @endphp
                                                        @if($diferenciaTotal != 0)
                                                            <span class="font-medium {{ $diferenciaTotal > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400' }}">
                                                                {{ $diferenciaTotal > 0 ? '+' : '' }}S/ {{ number_format($diferenciaTotal, 2) }}
                                                            </span>
                                                        @else
                                                            <span class="text-gray-400 dark:text-gray-500">-</span>
                                                        @endif
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @else
                                <div class="text-center py-8">
                                    <div class="text-gray-500 dark:text-gray-400">No hay información de arqueo disponible</div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>

                <!-- Transacciones Recientes -->
                <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                    <div class="border-b border-gray-200 px-6 py-4 dark:border-gray-700">
                        <div class="flex items-center justify-between">
                            <h2 class="text-lg font-medium text-gray-900 dark:text-white">Transacciones Recientes</h2>
                            <a href="{{ route('dashboard.caja-transacciones.index', ['caja_id' => $caja->public_id]) }}" class="text-sm text-brand-600 hover:text-brand-700 dark:text-brand-400 dark:hover:text-brand-300">
                                Ver todas
                            </a>
                        </div>
                    </div>
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-gray-800">
                                <tr>
                                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Tipo</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Monto</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Método</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Descripción</th>
                                    <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Fecha</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
                                @forelse($transaccionesRecientes as $transaccion)
                                <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                                    <td class="whitespace-nowrap px-6 py-4">
                                        @if($transaccion->tipo === 'ingreso')
                                            <span class="inline-flex items-center gap-1 rounded-full bg-green-100 px-2 text-xs font-semibold text-green-800 dark:bg-green-900 dark:text-green-200">
                                                <i data-lucide="arrow-down" class="h-3 w-3"></i>
                                                Ingreso
                                            </span>
                                        @elseif($transaccion->tipo === 'egreso')
                                            <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-2 text-xs font-semibold text-red-800 dark:bg-red-900 dark:text-red-200">
                                                <i data-lucide="arrow-up" class="h-3 w-3"></i>
                                                Egreso
                                            </span>
                                        @else
                                            <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 text-xs font-semibold text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                                <i data-lucide="repeat" class="h-3 w-3"></i>
                                                Transferencia
                                            </span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-6 py-4">
                                        <div class="text-sm font-medium text-gray-900 dark:text-white">
                                            S/ {{ number_format($transaccion->monto, 2) }}
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-6 py-4">
                                        <div class="text-sm text-gray-900 dark:text-white capitalize">
                                            {{ $transaccion->metodo_pago }}
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="text-sm text-gray-900 dark:text-white">
                                            {{ Str::limit($transaccion->descripcion, 30) }}
                                        </div>
                                    </td>
                                    <td class="whitespace-nowrap px-6 py-4">
                                        <div class="text-sm text-gray-900 dark:text-white">
                                            {{ $transaccion->created_at->format('d/m/Y') }}
                                        </div>
                                        <div class="text-sm text-gray-500 dark:text-gray-400">
                                            {{ $transaccion->created_at->format('H:i') }}
                                        </div>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-8 text-center">
                                        <div class="flex flex-col items-center gap-2">
                                            <i data-lucide="dollar-sign" class="h-8 w-8 text-gray-400"></i>
                                            <p class="text-sm text-gray-500 dark:text-gray-400">No hay transacciones registradas</p>
                                        </div>
                                    </td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
@endsection