@extends('layouts.app')
@section('title', 'Cerrar Caja')
@section('content')
<style>
    .arqueo-row { display:flex; justify-content:space-between; padding:3px 0; border-bottom:1px solid #f0f0f0; font-size:.75rem; }
    .arqueo-row:last-child { border-bottom:none; font-weight:700; color:#1e1b3a; font-size:.78rem; }
</style>
<div class="container-fluid py-2" style="max-height:calc(100vh - 80px);overflow:hidden;">
<div class="row justify-content-center g-2">

    {{-- Panel izquierdo: arqueo previo --}}
    <div class="col-lg-5">
        <div class="card border-0 shadow-sm h-100" style="border-radius:16px;">
            <div class="card-header border-0 fw-bold py-2 px-3" style="background:#1e1b3a;color:#fff;border-radius:14px 14px 0 0;font-size:.85rem;">
                <i class="bi bi-calculator me-2"></i> Resumen del Turno
            </div>
            <div class="card-body px-3 py-2">
                {{-- Info básica --}}
                <div class="d-flex gap-2 mb-2 flex-wrap">
                    <div class="flex-fill p-2 rounded-3 text-center" style="background:#f5f3ff;">
                        <div style="font-size:.65rem;text-transform:uppercase;color:#6366f1;font-weight:700;">Cajero</div>
                        <div class="fw-bold" style="font-size:.8rem;">{{ auth()->user()->name }}</div>
                    </div>
                    <div class="flex-fill p-2 rounded-3 text-center" style="background:#fff7ed;">
                        <div style="font-size:.65rem;text-transform:uppercase;color:#f97316;font-weight:700;">Apertura</div>
                        <div class="fw-bold" style="font-size:.8rem;">{{ $cashRegister->opening_time->format('H:i') }}</div>
                    </div>
                    <div class="flex-fill p-2 rounded-3 text-center" style="background:#f0fdf4;">
                        <div style="font-size:.65rem;text-transform:uppercase;color:#16a34a;font-weight:700;">Inicio S/</div>
                        <div class="fw-bold" style="font-size:.8rem;">{{ number_format($cashRegister->opening_amount,2) }}</div>
                    </div>
                </div>

                {{-- Ventas por método --}}
                <div class="mb-2">
                    <div class="fw-bold mb-1" style="font-size:.68rem;text-transform:uppercase;color:#64748b;">Ventas por método</div>
                    @php
                        $methods = [
                            ['Efectivo','cash',$totalCash,'#16a34a','#f0fdf4'],
                            ['Tarjeta','card',$totalCard,'#2563eb','#eff6ff'],
                            ['Yape','yape',$totalYape,'#d97706','#fffbeb'],
                            ['Plin','plin',$totalPlin,'#0891b2','#ecfeff'],
                            ['Transferencia','transferencia',$totalTransfer,'#7c3aed','#f5f3ff'],
                        ];
                    @endphp
                    @foreach($methods as [$label,$key,$amount,$color,$bg])
                    @if($amount > 0 || $key === 'cash')
                    <div class="d-flex justify-content-between align-items-center py-2" style="border-bottom:1px solid #f0f0f0;">
                        <span class="d-flex align-items-center gap-2">
                            <span class="rounded-2 px-2 py-1 fw-bold" style="background:{{ $bg }};color:{{ $color }};font-size:.7rem;">{{ $label }}</span>
                        </span>
                        <span class="fw-bold" style="color:{{ $color }};">S/ {{ number_format($amount,2) }}</span>
                    </div>
                    @endif
                    @endforeach
                </div>

                {{-- Arqueo --}}
                <div class="p-2 rounded-3" style="background:#f8f9fa;">
                    <div class="arqueo-row"><span>Apertura</span><span>S/ {{ number_format($cashRegister->opening_amount,2) }}</span></div>
                    <div class="arqueo-row"><span class="text-success">+ Efectivo vendido</span><span class="text-success">S/ {{ number_format($totalCash,2) }}</span></div>
                    <div class="arqueo-row"><span class="text-danger">− Gastos</span><span class="text-danger">S/ {{ number_format($totalExpenses,2) }}</span></div>
                    <div class="arqueo-row"><span>= Esperado en caja</span><span class="text-primary">S/ {{ number_format($expectedAmount,2) }}</span></div>
                </div>

                {{-- Total ventas --}}
                <div class="text-center mt-2 p-2 rounded-3" style="background:#1e1b3a;">
                    <div style="font-size:.65rem;text-transform:uppercase;color:rgba(255,255,255,.6);">Total Ventas del Turno</div>
                    <div class="fw-bold text-white" style="font-size:1rem;">S/ {{ number_format($totalSales,2) }}</div>
                    <small class="text-white opacity-50">{{ $orders->count() }} operaciones</small>
                </div>
            </div>
        </div>
    </div>

    {{-- Panel derecho: formulario cierre --}}
    <div class="col-lg-4">
        <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
            <div class="py-2 px-3 text-center text-white" style="background:linear-gradient(135deg,#1e1b3a,#f97316);">
                <div class="d-inline-flex align-items-center justify-content-center bg-white rounded-circle mb-1" style="width:36px;height:36px;">
                    <i class="bi bi-box-arrow-left" style="font-size:1rem;color:#f97316;"></i>
                </div>
                <div class="fw-bold mb-0" style="font-size:.9rem;">Cerrar Turno de Caja</div>
                <small class="opacity-75">Turno abierto: {{ $cashRegister->opening_time->format('d/m/Y H:i') }}</small>
            </div>

            <div class="card-body p-3">
                {{-- Monto esperado destacado --}}
                <div class="text-center p-2 rounded-3 mb-2 border" style="background:#eff6ff;">
                    <div style="font-size:.65rem;text-transform:uppercase;color:#2563eb;font-weight:700;">Monto Esperado</div>
                    <div class="fw-bold" style="font-size:1.2rem;color:#1e40af;">S/ {{ number_format($expectedAmount,2) }}</div>
                    <small class="text-muted">Según registros del sistema</small>
                </div>

                <form action="{{ route('cash_registers.processClose') }}" method="POST" onsubmit="return confirmarEnvio(this, '¿Confirmas el cierre de caja? Esta operación no se puede deshacer.', {confirmText:'Sí, cerrar caja'})">
                    @csrf
                    <div class="mb-2">
                        <label class="form-label fw-bold small text-uppercase text-muted mb-1" style="font-size:.7rem;">Dinero físico contado</label>
                        <div class="input-group shadow-sm">
                            <span class="input-group-text bg-white fw-bold">S/</span>
                            <input type="number" step="0.01" min="0" class="form-control fw-bold text-center"
                                   name="closing_amount" placeholder="0.00" required autofocus
                                   oninput="calcDiff(this.value)">
                        </div>
                        <div id="diffResult" class="text-center mt-2 py-2 rounded-2 d-none" style="font-size:.85rem;"></div>
                    </div>

                    <div class="mb-2">
                        <label class="form-label fw-bold small text-uppercase text-muted mb-1" style="font-size:.7rem;">Observaciones</label>
                        <textarea name="notes" class="form-control" rows="1" placeholder="¿Ocurrió alguna eventualidad?"></textarea>
                    </div>

                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-lg fw-bold text-white border-0"
                                style="background:#1e1b3a;border-radius:10px;">
                            <i class="bi bi-lock-fill me-1"></i> Confirmar Cierre
                        </button>
                        <a href="{{ route('dashboard') }}" class="btn btn-light fw-bold" style="border-radius:10px;">
                            Cancelar
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>

</div>
</div>

<script>
function calcDiff(val) {
    const expected = {{ $expectedAmount }};
    const real = parseFloat(val) || 0;
    const diff = real - expected;
    const el = document.getElementById('diffResult');
    el.classList.remove('d-none');
    if (Math.abs(diff) < 0.01) {
        el.style.cssText = 'background:#f0fdf4;color:#16a34a;font-size:.85rem;';
        el.innerHTML = '<i class="bi bi-check-circle me-1"></i> ✔ Cuadrado exacto';
    } else if (diff > 0) {
        el.style.cssText = 'background:#eff6ff;color:#2563eb;font-size:.85rem;';
        el.innerHTML = '<i class="bi bi-arrow-up-circle me-1"></i> Sobrante: S/ +' + diff.toFixed(2);
    } else {
        el.style.cssText = 'background:#fef2f2;color:#dc2626;font-size:.85rem;';
        el.innerHTML = '<i class="bi bi-arrow-down-circle me-1"></i> Faltante: S/ ' + diff.toFixed(2);
    }
}
</script>
@endsection