@extends('layouts.app')

@section('titulo', 'Caja '.$caja->codigo)
@section('subtitulo', $caja->estaAbierta() ? 'Turno en curso' : 'Turno cerrado')

@php
    $sim = auth()->user()->empresa?->simbolo ?? 'S/';
    $in = 'w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-2.5 text-sm outline-none focus:border-brand-400 focus:ring-4 focus:ring-brand-100 transition';
    $ing = $caja->totalIngresos(); $egr = $caja->totalEgresos(); $esp = $caja->esperado();
@endphp

@section('contenido')
<div class="max-w-5xl">
    <div class="flex items-center justify-between mb-4">
        <a href="{{ route('caja.index') }}" class="inline-flex items-center gap-1.5 text-sm text-slate-500 hover:text-brand-600">
            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
            Volver a caja
        </a>
        <span class="text-xs font-bold px-2.5 py-1 rounded-lg {{ $caja->estaAbierta() ? 'bg-emerald-50 text-emerald-600' : 'bg-slate-100 text-slate-500' }}">
            {{ $caja->estaAbierta() ? 'ABIERTA' : 'CERRADA' }}
        </span>
    </div>

    {{-- Resumen --}}
    <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-5">
        @foreach ([
            ['Monto inicial', $sim.' '.number_format($caja->monto_inicial, 2), 'from-brand-500 to-brand-400', 'wallet'],
            ['Ingresos', $sim.' '.number_format($ing, 2), 'from-emerald-500 to-teal-400', 'cash'],
            ['Egresos', $sim.' '.number_format($egr, 2), 'from-red-500 to-orange-400', 'receipt'],
            ['Saldo esperado', $sim.' '.number_format($esp, 2), 'from-violet-500 to-fuchsia-400', 'chart'],
        ] as [$label, $valor, $color, $icono])
            <div class="bg-white rounded-2xl p-5 shadow-sm shadow-slate-200/60">
                <div class="h-11 w-11 rounded-2xl bg-gradient-to-br {{ $color }} text-white flex items-center justify-center shadow-lg">@include('partials.icon', ['name' => $icono, 'class' => 'h-6 w-6'])</div>
                <p class="mt-3 text-lg font-extrabold text-slate-800">{{ $valor }}</p>
                <p class="text-sm text-slate-500">{{ $label }}</p>
            </div>
        @endforeach
    </div>

    <div class="grid lg:grid-cols-3 gap-5">
        {{-- Movimientos --}}
        <div class="lg:col-span-2 bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
            <div class="px-6 py-4 border-b border-slate-100 flex items-center justify-between">
                <h3 class="font-bold text-slate-800">Movimientos</h3>
                <span class="text-xs font-medium text-slate-400">{{ $movimientos->count() }}</span>
            </div>
            <div class="divide-y divide-slate-50 max-h-[28rem] overflow-y-auto">
                @forelse ($movimientos as $m)
                    <div class="flex items-center gap-3 px-6 py-3">
                        <div class="h-9 w-9 rounded-xl flex items-center justify-center shrink-0 {{ $m->tipo === 'ingreso' ? 'bg-emerald-50 text-emerald-600' : 'bg-red-50 text-red-600' }}">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="{{ $m->tipo === 'ingreso' ? 'M12 19V5m0 0l-7 7m7-7l7 7' : 'M12 5v14m0 0l7-7m-7 7l-7-7' }}"/>
                            </svg>
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-medium text-slate-700 truncate">{{ $m->concepto }}</p>
                            <p class="text-xs text-slate-400">{{ $m->etiquetaMetodo() }} · {{ $m->created_at->format('d/m H:i') }} @if($m->referencia) · {{ $m->referencia }} @endif</p>
                        </div>
                        <p class="text-sm font-bold shrink-0 {{ $m->tipo === 'ingreso' ? 'text-emerald-600' : 'text-red-600' }}">
                            {{ $m->tipo === 'ingreso' ? '+' : '−' }} {{ $sim }} {{ number_format($m->monto, 2) }}
                        </p>
                    </div>
                @empty
                    <p class="px-6 py-10 text-center text-slate-400">Sin movimientos registrados.</p>
                @endforelse
            </div>
        </div>

        {{-- Acciones --}}
        <div class="space-y-5">
            @if ($caja->estaAbierta())
                <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
                    <h3 class="font-bold text-slate-800 mb-4">Registrar movimiento</h3>
                    <form method="POST" action="{{ route('caja.movimiento', $caja) }}" class="space-y-3">
                        @csrf
                        <div class="grid grid-cols-2 gap-2">
                            <label class="cursor-pointer">
                                <input type="radio" name="tipo" value="ingreso" checked class="peer sr-only">
                                <span class="block text-center text-sm font-medium px-3 py-2 rounded-xl border border-slate-200 text-slate-500 peer-checked:bg-emerald-500 peer-checked:border-emerald-500 peer-checked:text-white transition">Ingreso</span>
                            </label>
                            <label class="cursor-pointer">
                                <input type="radio" name="tipo" value="egreso" class="peer sr-only">
                                <span class="block text-center text-sm font-medium px-3 py-2 rounded-xl border border-slate-200 text-slate-500 peer-checked:bg-red-500 peer-checked:border-red-500 peer-checked:text-white transition">Egreso</span>
                            </label>
                        </div>
                        <input type="text" name="concepto" placeholder="Concepto" required class="{{ $in }}">
                        <input type="number" step="0.01" min="0.01" name="monto" placeholder="Monto" required class="{{ $in }}">
                        <select name="metodo" class="{{ $in }}">
                            @foreach (['efectivo' => 'Efectivo', 'transferencia' => 'Transferencia', 'tarjeta' => 'Tarjeta', 'yape_plin' => 'Yape / Plin'] as $v => $l)
                                <option value="{{ $v }}">{{ $l }}</option>
                            @endforeach
                        </select>
                        <input type="text" name="referencia" placeholder="Referencia (opcional)" class="{{ $in }}">
                        <button type="submit" class="w-full rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold py-2.5 shadow-lg shadow-brand-500/30 transition">Registrar</button>
                    </form>
                </div>

                <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
                    <h3 class="font-bold text-slate-800 mb-1">Cerrar caja</h3>
                    <p class="text-sm text-slate-500 mb-3">Esperado: <span class="font-semibold text-slate-700">{{ $sim }} {{ number_format($esp, 2) }}</span></p>
                    <form method="POST" action="{{ route('caja.cerrar', $caja) }}" onsubmit="return confirm('¿Cerrar la caja? No podrás registrar más movimientos.');" class="space-y-3">
                        @csrf
                        <div>
                            <label class="block text-sm font-medium text-slate-700 mb-1.5">Monto contado ({{ $sim }})</label>
                            <input type="number" step="0.01" min="0" name="monto_final" value="{{ number_format($esp, 2, '.', '') }}" required class="{{ $in }}">
                        </div>
                        <input type="text" name="observacion" placeholder="Observación del arqueo" class="{{ $in }}">
                        <button type="submit" class="w-full rounded-xl bg-ink-800 hover:bg-ink-900 text-white font-semibold py-2.5 shadow-lg transition">Cerrar y hacer arqueo</button>
                    </form>
                </div>
            @else
                <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6">
                    <h3 class="font-bold text-slate-800 mb-4">Arqueo final</h3>
                    <dl class="space-y-3 text-sm">
                        @foreach ([
                            'Saldo esperado' => $sim.' '.number_format($caja->monto_esperado, 2),
                            'Monto contado' => $sim.' '.number_format($caja->monto_final, 2),
                            'Cerrada el' => $caja->fecha_cierre?->format('d/m/Y H:i') ?? '—',
                        ] as $label => $valor)
                            <div class="flex justify-between gap-4"><dt class="text-slate-400">{{ $label }}</dt><dd class="text-slate-700 font-medium text-right">{{ $valor }}</dd></div>
                        @endforeach
                    </dl>
                    <div class="mt-4 pt-4 border-t border-slate-100 flex items-center justify-between">
                        <span class="font-semibold text-slate-700">Diferencia</span>
                        <span class="text-xl font-extrabold {{ (float) $caja->diferencia == 0 ? 'text-emerald-600' : ((float) $caja->diferencia < 0 ? 'text-red-600' : 'text-amber-600') }}">
                            {{ $sim }} {{ number_format($caja->diferencia, 2) }}
                        </span>
                    </div>
                    @if ($caja->observacion)
                        <p class="mt-3 text-xs text-slate-400">{{ $caja->observacion }}</p>
                    @endif
                </div>
            @endif
        </div>
    </div>
</div>
@endsection