@extends('dashboard.layouts.app')

@section('title', 'Nueva 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">Nueva Transacción</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Registre una nueva transacción en la caja</p>
            </div>
            <div class="flex items-center gap-3">
                <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>

        <!-- Formulario -->
        <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>
                <p class="text-sm text-gray-600 dark:text-gray-400">Complete los datos de la transacción</p>
            </div>

            <form method="POST" action="{{ route('dashboard.caja-transacciones.store') }}" class="p-6">
                @csrf

                <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                    <!-- Caja -->
                    <div>
                        <label for="caja_id" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Caja <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select 
                                name="caja_id" 
                                id="caja_id"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('caja_id') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                required
                            >
                                <option value="">Seleccione una caja</option>
                                <option value="{{ $cajaActiva->public_id }}" selected>Caja #{{ $cajaActiva->public_id }} - {{ $cajaActiva->usuario->name }}</option>
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        @error('caja_id')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Tipo -->
                    <div>
                        <label for="tipo" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Tipo <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select 
                                name="tipo" 
                                id="tipo"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('tipo') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                required
                            >
                                <option value="">Seleccione el tipo</option>
                                <option value="ingreso" {{ old('tipo') === 'ingreso' ? 'selected' : '' }}>Ingreso</option>
                                <option value="egreso" {{ old('tipo') === 'egreso' ? 'selected' : '' }}>Egreso</option>
                                <option value="transferencia" {{ old('tipo') === 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        @error('tipo')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Método de Pago -->
                    <div>
                        <label for="metodo_pago" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Método de Pago <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <select 
                                name="metodo_pago" 
                                id="metodo_pago"
                                class="h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 pr-11 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('metodo_pago') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                required
                            >
                                <option value="">Seleccione el método</option>
                                <option value="efectivo" {{ old('metodo_pago') === 'efectivo' ? 'selected' : '' }}>Efectivo</option>
                                <option value="tarjeta" {{ old('metodo_pago') === 'tarjeta' ? 'selected' : '' }}>Tarjeta</option>
                                <option value="transferencia" {{ old('metodo_pago') === 'transferencia' ? 'selected' : '' }}>Transferencia</option>
                                <option value="yape" {{ old('metodo_pago') === 'yape' ? 'selected' : '' }}>Yape</option>

                            </select>
                            <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                                <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke="" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </span>
                        </div>
                        @error('metodo_pago')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Monto -->
                    <div>
                        <label for="monto" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Monto <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <span class="absolute left-4 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400">S/</span>
                            <input 
                                type="number" 
                                name="monto" 
                                id="monto"
                                step="0.01"
                                min="0.01"
                                placeholder="0.00"
                                value="{{ old('monto') }}"
                                class="h-11 appearance-none rounded-lg border bg-transparent pl-12 pr-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('monto') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                                required
                            >
                        </div>
                        @error('monto')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Descripción -->
                    <div class="lg:col-span-2">
                        <label for="descripcion" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Descripción <span class="text-red-500">*</span>
                        </label>
                        <input 
                            type="text" 
                            name="descripcion" 
                            id="descripcion"
                            placeholder="Descripción de la transacción..."
                            value="{{ old('descripcion') }}"
                            class="h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('descripcion') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            required
                        >
                        @error('descripcion')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Referencia -->
                    <div class="lg:col-span-2">
                        <label for="referencia" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                            Referencia
                        </label>
                        <input 
                            type="text" 
                            name="referencia" 
                            id="referencia"
                            placeholder="Número de referencia, comprobante, etc..."
                            value="{{ old('referencia') }}"
                            class="h-11 appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden border-gray-300 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30 dark:border-gray-700 dark:focus:border-brand-800 @error('referencia') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                        >
                        @error('referencia')
                            <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                        @enderror
                    </div>
                </div>

                <!-- Información de la Caja -->
                <div class="mt-8 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 de la Caja</h3>
                            <div class="mt-2 text-sm text-blue-800 dark:text-blue-200">
                                <p><strong>Caja:</strong> #{{ $cajaActiva->public_id }}</p>
                                <p><strong>Usuario:</strong> {{ $cajaActiva->usuario->name }}</p>
                                <p><strong>Cochera:</strong> {{ $cajaActiva->cochera->nombre }}</p>
                                <p><strong>Balance Actual:</strong> S/ {{ number_format($cajaActiva->calcularBalance(), 2) }}</p>
                                <p><strong>Fecha y Hora:</strong> {{ now()->format('d/m/Y H:i:s') }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Botones -->
                <div class="mt-8 flex items-center gap-3">
                    <button type="submit" 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="check" class="h-4 w-4"></i>
                        Registrar Transacción
                    </button>
                    <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="x" class="h-4 w-4"></i>
                        Cancelar
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection