@extends('dashboard.layouts.app')

@section('title', 'Detalles de Transacción')

@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">Transacción #{{ $transaccion->public_id }}</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Detalles de la transacción de caja</p>
            </div>
            <div class="flex items-center gap-3">
                @if($transaccion->caja->estado === 'abierta')
                    <a href="{{ route('dashboard.caja-transacciones.edit', $transaccion) }}" 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="edit" class="h-4 w-4"></i>
                        Editar
                    </a>
                @endif
                <a href="{{ route('dashboard.caja-transacciones.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="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <!-- Información Principal -->
            <div class="lg:col-span-2 space-y-6">
                <!-- Detalles de la Transacción -->
                <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 Transacción</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">Transacción ID</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">#{{ $transaccion->public_id }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Tipo</h3>
                                <div class="mt-1">
                                    @if($transaccion->tipo === 'ingreso')
                                        <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="arrow-down" class="h-4 w-4"></i>
                                            Ingreso
                                        </span>
                                    @elseif($transaccion->tipo === 'egreso')
                                        <span class="inline-flex items-center gap-1 rounded-full bg-red-100 px-3 py-1 text-sm font-semibold text-red-800 dark:bg-red-900 dark:text-red-200">
                                            <i data-lucide="arrow-up" class="h-4 w-4"></i>
                                            Egreso
                                        </span>
                                    @else
                                        <span class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-3 py-1 text-sm font-semibold text-blue-800 dark:bg-blue-900 dark:text-blue-200">
                                            <i data-lucide="repeat" class="h-4 w-4"></i>
                                            Transferencia
                                        </span>
                                    @endif
                                </div>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Monto</h3>
                                <p class="mt-1 text-2xl font-bold text-gray-900 dark:text-white">S/ {{ number_format($transaccion->monto, 2) }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Método de Pago</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white capitalize">{{ $transaccion->metodo_pago }}</p>
                            </div>
                            <div class="sm:col-span-2">
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Descripción</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->descripcion }}</p>
                            </div>
                            @if($transaccion->referencia)
                            <div class="sm:col-span-2">
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Referencia</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->referencia }}</p>
                            </div>
                            @endif
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Fecha de Creación</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->created_at->format('d/m/Y') }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->created_at->format('H:i:s') }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Última Actualización</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->updated_at->format('d/m/Y') }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->updated_at->format('H:i:s') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información 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">#{{ $transaccion->caja->public_id }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Estado de la Caja</h3>
                                <div class="mt-1">
                                    @if($transaccion->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 de la Caja</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->caja->usuario->name }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->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">{{ $transaccion->caja->cochera->nombre }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->caja->cochera->direccion }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información del Usuario que Creó la Transacción -->
                <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 del Usuario</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">Usuario que Registró</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">{{ $transaccion->creadoPor->name }}</p>
                                <p class="text-sm text-gray-500 dark:text-gray-400">{{ $transaccion->creadoPor->email }}</p>
                            </div>
                            <div>
                                <h3 class="text-sm font-medium text-gray-500 dark:text-gray-400">Rol del Usuario</h3>
                                <p class="mt-1 text-lg font-semibold text-gray-900 dark:text-white">
                                    @if($transaccion->creadoPor->hasRole('super_admin'))
                                        Super Administrador
                                    @elseif($transaccion->creadoPor->hasRole('admin'))
                                        Administrador
                                    @else
                                        Usuario Operativo
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="space-y-6">
                <!-- Resumen de la Transacción -->
                <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Resumen</h3>
                    <div class="space-y-3">
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Tipo</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white capitalize">{{ $transaccion->tipo }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Monto</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">S/ {{ number_format($transaccion->monto, 2) }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Método</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white capitalize">{{ $transaccion->metodo_pago }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Caja</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">#{{ $transaccion->caja->public_id }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Estado Caja</span>
                            <span class="text-sm font-semibold {{ $transaccion->caja->estado === 'abierta' ? 'text-green-600 dark:text-green-400' : 'text-gray-600 dark:text-gray-400' }}">
                                {{ ucfirst($transaccion->caja->estado) }}
                            </span>
                        </div>
                    </div>
                </div>

                <!-- Acciones -->
                <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-700 dark:bg-gray-900">
                    <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">Acciones</h3>
                    <div class="space-y-3">
                        <a href="{{ route('dashboard.cajas.show', $transaccion->caja) }}" class="flex w-full items-center justify-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 Caja
                        </a>
                        
                        @if($transaccion->caja->estado === 'abierta')
                            <a href="{{ route('dashboard.caja-transacciones.edit', $transaccion) }}" class="flex w-full items-center justify-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="edit" class="h-4 w-4"></i>
                                Editar Transacción
                            </a>
                        @endif
                        
                        <a href="{{ route('dashboard.caja-transacciones.index') }}" class="flex w-full items-center justify-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="list" class="h-4 w-4"></i>
                            Ver Todas las Transacciones
                        </a>
                    </div>
                </div>

                <!-- Información Adicional -->
                <div class="rounded-lg border border-blue-200 bg-blue-50 p-4 dark:border-blue-800 dark:bg-blue-900/20">
                    <div class="flex items-start gap-3">
                        <div class="flex h-6 w-6 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-800">
                            <i data-lucide="info" class="h-4 w-4 text-blue-600 dark:text-blue-400"></i>
                        </div>
                        <div>
                            <h3 class="text-sm font-medium text-blue-900 dark:text-blue-100">Información</h3>
                            <div class="mt-2 text-sm text-blue-800 dark:text-blue-200">
                                <p>Solo se pueden editar transacciones de cajas abiertas.</p>
                                <p class="mt-1">Las transacciones quedan registradas permanentemente para auditoría.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection