@extends('dashboard.layouts.app')

@section('title', 'Cerrar 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">Cerrar Caja #{{ $caja->public_id }}</h1>
                <p class="text-sm text-gray-600 dark:text-gray-400">Realice el arqueo y cierre de la caja</p>
            </div>
            <div class="flex items-center gap-3">
                <a href="{{ route('dashboard.cajas.show', $caja) }}" 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">
            <!-- Formulario de Cierre -->
            <div class="lg:col-span-2">
                <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">Arqueo de Caja</h2>
                        <p class="text-sm text-gray-600 dark:text-gray-400">Ingrese los montos reales por método de pago</p>
                    </div>

                    <form method="POST" action="{{ route('dashboard.cajas.update', $caja) }}" class="p-6">
                        @csrf
                        @method('PUT')

                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2">
                            <!-- Efectivo Real -->
                            <div>
                                <label for="monto_efectivo_real" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                                    Efectivo Real <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_efectivo_real" 
                                        id="monto_efectivo_real"
                                        step="0.01"
                                        min="0"
                                        placeholder="0.00"
                                        value="{{ old('monto_efectivo_real', '0.00') }}"
                                        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_efectivo_real') 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_efectivo_real')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Esperado: S/ {{ number_format($montosEsperados['efectivo'], 2) }}
                                    <br>
                                    <span class="text-blue-600">(Inicial: S/ {{ number_format($caja->monto_inicial, 2) }} + Transacciones)</span>
                                </p>
                            </div>

                            <!-- Tarjeta -->
                            <div>
                                <label for="monto_tarjeta_real" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                                    Tarjeta (Real) <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_tarjeta_real" 
                                        id="monto_tarjeta_real"
                                        step="0.01"
                                        min="0"
                                        placeholder="0.00"
                                        value="{{ old('monto_tarjeta_real', '0.00') }}"
                                        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_tarjeta_real') 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_tarjeta_real')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Esperado: S/ {{ number_format($montosEsperados['tarjeta'], 2) }}
                                </p>
                            </div>

                            <!-- Transferencia -->
                            <div>
                                <label for="monto_transferencia_real" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                                    Transferencia (Real) <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_transferencia_real" 
                                        id="monto_transferencia_real"
                                        step="0.01"
                                        min="0"
                                        placeholder="0.00"
                                        value="{{ old('monto_transferencia_real', '0.00') }}"
                                        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_transferencia_real') 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_transferencia_real')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Esperado: S/ {{ number_format($montosEsperados['transferencia'], 2) }}
                                </p>
                            </div>

                            <!-- Yape -->
                            <div>
                                <label for="monto_yape_real" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                                    Yape (Real) <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_yape_real" 
                                        id="monto_yape_real"
                                        step="0.01"
                                        min="0"
                                        placeholder="0.00"
                                        value="{{ old('monto_yape_real', '0.00') }}"
                                        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_yape_real') 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_yape_real')
                                    <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                                @enderror
                                <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                    Esperado: S/ {{ number_format($montosEsperados['yape'], 2) }}
                                </p>
                            </div>


                        </div>

                        <!-- Observaciones -->
                        <div class="mt-6">
                            <label for="observaciones" class="mb-2.5 block text-sm font-medium text-gray-800 dark:text-white/90">
                                Observaciones del Cierre
                            </label>
                            <textarea 
                                name="observaciones" 
                                id="observaciones"
                                rows="3"
                                placeholder="Observaciones sobre el cierre de caja, diferencias encontradas, etc..."
                                class="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('observaciones') border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700 dark:focus:border-error-800 @enderror"
                            >{{ old('observaciones') }}</textarea>
                            @error('observaciones')
                                <p class="mt-1 text-sm text-error-600 dark:text-error-400">{{ $message }}</p>
                            @enderror
                        </div>

                        <!-- Botones -->
                        <div class="mt-8 flex items-center gap-3">
                            <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-red-500 px-4 py-2.5 text-sm font-medium text-white hover:bg-red-600 focus:ring-4 focus:ring-red-500/20 dark:bg-red-600 dark:hover:bg-red-700">
                                <i data-lucide="lock" class="h-4 w-4"></i>
                                Cerrar Caja
                            </button>
                            <a href="{{ route('dashboard.cajas.show', $caja) }}" 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>

            <!-- Sidebar con Información -->
            <div class="space-y-6">
                <!-- Resumen de la Caja -->
                <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 de la Caja</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">Caja ID</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">#{{ $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">Usuario</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ $caja->usuario->name }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Cochera</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ $caja->cochera->nombre }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Fecha Apertura</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">{{ $caja->fecha_apertura->format('d/m/Y') }}</span>
                        </div>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Monto Inicial</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">S/ {{ number_format($caja->monto_inicial, 2) }}</span>
                        </div>
                    </div>
                </div>

                <!-- Montos Esperados -->
                <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">Montos Esperados</h3>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-3">
                        Montos que deberían estar disponibles por método de pago
                    </p>
                    <div class="space-y-3">
                        @foreach($montosEsperados as $metodo => $monto)
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-medium text-gray-700 dark:text-gray-300 capitalize">{{ $metodo }}</span>
                            <span class="text-sm font-semibold text-gray-900 dark:text-white">S/ {{ number_format($monto, 2) }}</span>
                        </div>
                        @endforeach
                        <div class="border-t border-gray-200 pt-3 mt-3">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-bold text-gray-900 dark:text-white">Total Esperado</span>
                                <span class="text-sm font-bold text-gray-900 dark:text-white">
                                    S/ {{ number_format(array_sum($montosEsperados), 2) }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Información del Cierre -->
                <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 del Cierre</h3>
                            <div class="mt-2 text-sm text-blue-800 dark:text-blue-200">
                                <p><strong>Usuario:</strong> {{ auth()->user()->name }}</p>
                                <p><strong>Fecha y Hora:</strong> {{ now()->format('d/m/Y H:i:s') }}</p>
                                <p class="mt-2"><strong>Nota:</strong> Al cerrar la caja se creará automáticamente un registro de cierre con las diferencias encontradas.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection