@extends('dashboard.layouts.app')

@section('title', 'Transacciones 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">Transacciones de Caja</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Registro de todas las transacciones de caja</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('dashboard.caja-transacciones.create') }}" 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="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="briefcase" class="h-4 w-4"></i>
                    Ver Cajas
                </a>
            </div>
        </div>

        <!-- Estadísticas -->
        <div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-900/20">
                        <i data-lucide="dollar-sign" class="h-6 w-6 text-blue-600 dark:text-blue-400"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Transacciones</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">{{ $estadisticas['total_transacciones'] }}</p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-green-50 dark:bg-green-900/20">
                        <i data-lucide="arrow-down" class="h-6 w-6 text-green-600 dark:text-green-400"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Ventas</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">S/ {{ number_format($estadisticas['total_ventas'], 2) }}</p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-red-50 dark:bg-red-900/20">
                        <i data-lucide="arrow-up" class="h-6 w-6 text-red-600 dark:text-red-400"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Total Egresos</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">S/ {{ number_format($estadisticas['total_egresos'], 2) }}</p>
                    </div>
                </div>
            </div>

            <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <div class="flex items-center gap-3">
                    <div class="flex h-12 w-12 items-center justify-center rounded-lg bg-purple-50 dark:bg-purple-900/20">
                        <i data-lucide="repeat" class="h-6 w-6 text-purple-600 dark:text-purple-400"></i>
                    </div>
                    <div>
                        <p class="text-sm font-medium text-gray-600 dark:text-gray-400">Transferencias</p>
                        <p class="text-2xl font-semibold text-gray-900 dark:text-white">S/ {{ number_format($estadisticas['total_transferencias'], 2) }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabla de Transacciones -->
        <div class="rounded-lg border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
            <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">Código</th>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Caja</th>
                            <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>
                            <th class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider text-gray-500 dark:text-gray-400">Acciones</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-200 bg-white dark:divide-gray-700 dark:bg-gray-900">
                        @forelse($transacciones as $transaccion)
                        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800">
                            <td class="whitespace-nowrap px-6 py-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">{{ $transaccion->public_id }}</div>
                            </td>
                            <td class="whitespace-nowrap px-6 py-4">
                                <div class="text-sm font-medium text-gray-900 dark:text-white">Caja #{{ $transaccion->caja->public_id }}</div>
                                <div class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->caja->usuario->name }}</div>
                            </td>
                            <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, 40) }}</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>
                            <td class="whitespace-nowrap px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <a href="{{ route('dashboard.caja-transacciones.show', $transaccion) }}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-300 bg-white 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="eye" class="h-4 w-4"></i>
                                    </a>
                                    
                                    @if($transaccion->caja->estado === 'abierta')
                                        <a href="{{ route('dashboard.caja-transacciones.edit', $transaccion) }}" class="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-gray-300 bg-white 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="edit" class="h-4 w-4"></i>
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center">
                                <div class="flex flex-col items-center gap-3">
                                    <div class="flex h-16 w-16 items-center justify-center rounded-full bg-gray-100 dark:bg-gray-800">
                                        <i data-lucide="dollar-sign" class="h-8 w-8 text-gray-400"></i>
                                    </div>
                                    <div>
                                        <h3 class="text-lg font-medium text-gray-900 dark:text-white">No hay transacciones registradas</h3>
                                        <p class="text-sm text-gray-500 dark:text-gray-400">Comience registrando una nueva transacción</p>
                                    </div>
                                    <a href="{{ route('dashboard.caja-transacciones.create') }}" 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="plus" class="h-4 w-4"></i>
                                        Nueva Transacción
                                    </a>
                                </div>
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <!-- Paginación -->
            @if($transacciones->hasPages())
            <div class="border-t border-gray-200 px-6 py-4 dark:border-gray-700">
                {{ $transacciones->links() }}
            </div>
            @endif
        </div>
    </div>
</div>
@endsection