@extends('layouts.app')

@section('titulo', 'Caja / Arqueo')
@section('subtitulo', 'Apertura, movimientos y cierre de caja')

@php $sim = auth()->user()->empresa?->simbolo ?? 'S/'; @endphp

@section('contenido')
@if ($abierta)
    {{-- Caja abierta --}}
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden mb-6">
        <div class="h-1.5 bg-emerald-500"></div>
        <div class="p-6 sm:p-7">
            <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                <div class="h-14 w-14 rounded-2xl bg-gradient-to-br from-emerald-500 to-teal-400 text-white flex items-center justify-center shadow-lg shrink-0">
                    @include('partials.icon', ['name' => 'cash', 'class' => 'h-7 w-7'])
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex items-center gap-2">
                        <span class="text-xs font-bold px-2 py-0.5 rounded-md bg-emerald-50 text-emerald-600">ABIERTA</span>
                        <span class="text-xs text-slate-400 font-mono">{{ $abierta->codigo }}</span>
                    </div>
                    <h2 class="mt-1 text-lg font-extrabold text-slate-800">Caja en curso</h2>
                    <p class="text-sm text-slate-500">Abierta el {{ $abierta->fecha_apertura->format('d/m/Y H:i') }} @if($abierta->responsable) por {{ $abierta->responsable->name }} @endif</p>
                </div>
                <a href="{{ route('caja.show', $abierta) }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-brand-500 hover:bg-brand-600 text-white font-semibold px-5 py-2.5 shadow-lg shadow-brand-500/30 transition shrink-0">
                    Gestionar caja
                    <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="M9 5l7 7-7 7"/></svg>
                </a>
            </div>

            <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 mt-5 pt-5 border-t border-slate-100">
                @foreach ([
                    ['Monto inicial', $sim.' '.number_format($abierta->monto_inicial, 2)],
                    ['Ingresos', $sim.' '.number_format($abierta->totalIngresos(), 2)],
                    ['Egresos', $sim.' '.number_format($abierta->totalEgresos(), 2)],
                    ['Saldo esperado', $sim.' '.number_format($abierta->esperado(), 2)],
                ] as [$label, $valor])
                    <div class="rounded-xl bg-slate-50 p-3">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">{{ $label }}</p>
                        <p class="text-sm font-bold text-slate-800">{{ $valor }}</p>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@else
    {{-- Abrir caja --}}
    <div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 p-6 sm:p-7 mb-6 max-w-xl">
        <h3 class="font-bold text-slate-800 mb-1">Abrir caja</h3>
        <p class="text-sm text-slate-500 mb-4">No hay una caja abierta. Registra el monto inicial para comenzar el turno.</p>

        @if ($errors->any())
            <div class="mb-4 rounded-xl bg-red-50 border border-red-100 px-4 py-3 text-sm text-red-600">{{ $errors->first() }}</div>
        @endif

        @php $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'; @endphp
        <form method="POST" action="{{ route('caja.abrir') }}" class="space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Monto inicial ({{ $sim }}) <span class="text-red-500">*</span></label>
                <input type="number" step="0.01" min="0" name="monto_inicial" value="{{ old('monto_inicial', 0) }}" required class="{{ $in }}">
            </div>
            <div>
                <label class="block text-sm font-medium text-slate-700 mb-1.5">Observación</label>
                <input type="text" name="observacion" value="{{ old('observacion') }}" class="{{ $in }}">
            </div>
            <button type="submit" class="w-full rounded-xl bg-emerald-500 hover:bg-emerald-600 text-white font-semibold py-2.5 shadow-lg shadow-emerald-500/30 transition">Abrir caja</button>
        </form>
    </div>
@endif

{{-- Historial --}}
<div class="bg-white rounded-2xl shadow-sm shadow-slate-200/60 overflow-hidden">
    <div class="px-6 py-4 border-b border-slate-100"><h3 class="font-bold text-slate-800">Historial de turnos</h3></div>
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-left text-slate-400 bg-slate-50/60">
                    <th class="px-6 py-3 font-semibold">Código</th>
                    <th class="px-6 py-3 font-semibold">Responsable</th>
                    <th class="px-6 py-3 font-semibold">Cierre</th>
                    <th class="px-6 py-3 font-semibold text-right">Esperado</th>
                    <th class="px-6 py-3 font-semibold text-right">Contado</th>
                    <th class="px-6 py-3 font-semibold text-right">Diferencia</th>
                    <th class="px-6 py-3 font-semibold text-right"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-50">
                @forelse ($historial as $c)
                    <tr class="hover:bg-slate-50/60 transition">
                        <td class="px-6 py-3 font-mono text-xs text-slate-500">{{ $c->codigo }}</td>
                        <td class="px-6 py-3 text-slate-700">{{ $c->responsable?->name ?? '—' }}</td>
                        <td class="px-6 py-3 text-slate-500">{{ $c->fecha_cierre?->format('d/m/Y H:i') ?? '—' }}</td>
                        <td class="px-6 py-3 text-right text-slate-600">{{ $sim }} {{ number_format($c->monto_esperado, 2) }}</td>
                        <td class="px-6 py-3 text-right text-slate-700 font-medium">{{ $sim }} {{ number_format($c->monto_final, 2) }}</td>
                        <td class="px-6 py-3 text-right font-semibold {{ (float) $c->diferencia == 0 ? 'text-emerald-600' : ((float) $c->diferencia < 0 ? 'text-red-600' : 'text-amber-600') }}">{{ $sim }} {{ number_format($c->diferencia, 2) }}</td>
                        <td class="px-6 py-3 text-right"><a href="{{ route('caja.show', $c) }}" class="text-sm font-medium text-brand-600 hover:underline">Ver</a></td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-6 py-10 text-center text-slate-400">Aún no hay turnos cerrados.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

<div class="mt-5">{{ $historial->links() }}</div>
@endsection