{{-- resources/views/livewire/caja/index.blade.php --}}
<div>
    {{-- ── HEADER ──────────────────────────────────── --}}
    <div style="margin-bottom:20px;">
        <div class="page-title">🧮 Caja</div>
        <div class="page-sub">Apertura · movimientos · cierre y arqueo</div>
    </div>

    {{-- ── MENSAJES ─────────────────────────────────── --}}
    @if($mensaje_exito)
    <div class="alert alert-green" x-data x-init="setTimeout(() => $wire.set('mensaje_exito',''), 5000)">
        ✅ {{ $mensaje_exito }}
    </div>
    @endif
    @if($mensaje_error)
    <div class="alert alert-red" x-data x-init="setTimeout(() => $wire.set('mensaje_error',''), 5000)">
        ❌ {{ $mensaje_error }}
    </div>
    @endif

    @if($ventas_sin_turno['cantidad'] > 0)
    <div class="alert alert-orange" style="margin-bottom:16px;display:block;">
        ⚠️ Hay {{ $ventas_sin_turno['cantidad'] }} venta(s) aceptada(s) por ₡{{ number_format($ventas_sin_turno['monto'], 2) }}
        sin turno de caja asignado — no aparecen en ningún cierre. Revíselas aparte para la conciliación contable.
    </div>
    @endif

    @if(! $turno_activo)
    {{-- ──────────────────────────────────────────────
         SIN TURNO ACTIVO → PANTALLA DE APERTURA
    ─────────────────────────────────────────────── --}}
    <div style="max-width:420px;margin:40px auto 0;">
        <div class="inset-card" style="padding:32px;">
            <div style="text-align:center;margin-bottom:28px;">
                <div style="font-size:48px;margin-bottom:12px;">🧮</div>
                <div style="font-size:20px;font-weight:700;margin-bottom:6px;">Abrir turno de caja</div>
                <div style="font-size:13px;color:var(--label2);">
                    Registra el efectivo inicial para comenzar las ventas del turno
                </div>
            </div>

            @if($apertura_error)
            <div class="alert alert-red" style="margin-bottom:16px;">❌ {{ $apertura_error }}</div>
            @endif

            <div class="field" style="margin-bottom:14px;">
                <label>Caja</label>
                <select wire:model="caja_id">
                    <option value="">Seleccionar…</option>
                    @foreach($cajas as $caja)
                    <option value="{{ $caja->id }}">{{ $caja->nombre }}</option>
                    @endforeach
                </select>
            </div>

            <div class="field" style="margin-bottom:24px;">
                <label>Efectivo inicial en caja (₡)</label>
                <input type="number"
                       wire:model="monto_apertura"
                       step="1000" min="0"
                       placeholder="0.00"
                       style="font-size:20px;text-align:center;font-weight:700;padding:14px;" />
            </div>

            <button wire:click="abrirTurno"
                    wire:loading.attr="disabled"
                    class="btn-blue"
                    style="width:100%;justify-content:center;padding:14px;font-size:15px;">
                <span wire:loading.remove>🟢 Abrir turno</span>
                <span wire:loading>Abriendo…</span>
            </button>
        </div>
    </div>

    @else
    {{-- ──────────────────────────────────────────────
         CON TURNO ACTIVO → PANEL DE OPERACIÓN
    ─────────────────────────────────────────────── --}}

    {{-- Estado del turno --}}
    <div style="display:flex;align-items:center;gap:12px;background:#fff;border-radius:16px;
                padding:16px 20px;box-shadow:var(--shadow);margin-bottom:20px;">
        <div style="width:10px;height:10px;border-radius:50%;background:var(--green);
                    animation:blink 2.5s infinite;flex-shrink:0;"></div>
        <div style="flex:1;">
            <div style="font-size:14px;font-weight:600;">
                Turno activo · {{ $turno_activo->caja?->nombre }}
            </div>
            <div style="font-size:12px;color:var(--label2);">
                Apertura: {{ $turno_activo->apertura_at->format('d/m/Y H:i') }} ·
                Efectivo inicial: ₡{{ number_format($turno_activo->monto_apertura, 2) }}
            </div>
        </div>
        <div style="display:flex;gap:8px;">
            <button wire:click="$set('mostrar_movimiento', true)"
                    class="btn-plain" style="font-size:12px;padding:8px 14px;">
                💸 Movimiento
            </button>
            <button wire:click="$set('mostrar_cierre', true)"
                    class="btn-blue" style="font-size:12px;padding:8px 14px;
                    background:var(--red);">
                🔴 Cerrar turno
            </button>
        </div>
    </div>

    {{-- KPIs del turno --}}
    @if($resumen)
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px;">
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">Ventas turno</div>
            <div style="font-size:22px;font-weight:700;">₡{{ number_format($resumen['total_ventas'], 0) }}</div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">Efectivo</div>
            <div style="font-size:22px;font-weight:700;color:var(--green2);">
                ₡{{ number_format($resumen['total_efectivo'], 0) }}
            </div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">Tarjeta + SINPE</div>
            <div style="font-size:22px;font-weight:700;color:var(--blue);">
                ₡{{ number_format($resumen['total_tarjeta'] + $resumen['total_sinpe'], 0) }}
            </div>
        </div>
        <div style="background:#fff;border-radius:16px;padding:16px;box-shadow:var(--shadow);">
            <div style="font-size:11px;color:var(--label2);margin-bottom:6px;
                        text-transform:uppercase;letter-spacing:.4px;">IVA cobrado</div>
            <div style="font-size:22px;font-weight:700;color:var(--purple);">
                ₡{{ number_format($resumen['total_iva'], 0) }}
            </div>
        </div>
    </div>
    @endif

    {{-- Movimientos del turno --}}
    @if($turno_activo->movimientos && $turno_activo->movimientos->count() > 0)
    <div class="group-label">Movimientos del turno</div>
    <div class="inset-card" style="margin-bottom:18px;">
        <table class="ios-table">
            <thead>
                <tr>
                    <th>Tipo</th>
                    <th>Motivo</th>
                    <th>Hora</th>
                    <th style="text-align:right;">Monto</th>
                </tr>
            </thead>
            <tbody>
                @foreach($turno_activo->movimientos as $mov)
                <tr wire:key="mov-{{ $mov->id }}">
                    <td>
                        <span class="chip {{ $mov->tipo === 'retiro' ? 'ch-red' : 'ch-green' }}">
                            {{ $mov->tipo === 'retiro' ? '↓ Retiro' : '↑ Depósito' }}
                        </span>
                    </td>
                    <td style="font-size:12px;">{{ $mov->motivo }}</td>
                    <td style="font-size:11px;color:var(--label2);">
                        {{ $mov->created_at->format('H:i') }}
                    </td>
                    <td style="text-align:right;font-weight:700;font-family:'Courier New',monospace;
                               color:{{ $mov->tipo === 'retiro' ? 'var(--red)' : 'var(--green2)' }};">
                        {{ $mov->tipo === 'retiro' ? '-' : '+' }}₡{{ number_format($mov->monto, 2) }}
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    @endif

    @endif {{-- fin if turno_activo --}}

    {{-- ── MODAL MOVIMIENTO ─────────────────────────── --}}
    @if($mostrar_movimiento)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_movimiento', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:380px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div style="font-size:17px;font-weight:700;margin-bottom:20px;">💸 Movimiento de caja</div>

            @if($movimiento_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $movimiento_error }}</div>
            @endif

            <div style="display:flex;gap:8px;margin-bottom:16px;">
                <button wire:click="$set('tipo_movimiento','retiro')"
                        class="{{ $tipo_movimiento === 'retiro' ? 'btn-blue' : 'btn-plain' }}"
                        style="flex:1;justify-content:center;background:{{ $tipo_movimiento === 'retiro' ? 'var(--red)' : '' }};">
                    ↓ Retiro
                </button>
                <button wire:click="$set('tipo_movimiento','deposito')"
                        class="{{ $tipo_movimiento === 'deposito' ? 'btn-blue' : 'btn-plain' }}"
                        style="flex:1;justify-content:center;">
                    ↑ Depósito
                </button>
            </div>

            <div class="field" style="margin-bottom:14px;">
                <label>Monto (₡)</label>
                <input type="number" wire:model="monto_movimiento" step="500" min="0.01" placeholder="0.00" />
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Motivo</label>
                <input type="text" wire:model="motivo_movimiento"
                       placeholder="Ej: Pago de proveedor, cambio de turno…" />
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_movimiento', false)"
                        class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="guardarMovimiento"
                        wire:loading.attr="disabled"
                        class="btn-blue" style="flex:1;justify-content:center;">
                    <span wire:loading.remove>✅ Registrar</span>
                    <span wire:loading>Guardando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

    {{-- ── MODAL CIERRE ─────────────────────────────── --}}
    @if($mostrar_cierre && $resumen)
    <div style="position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:100;
                display:flex;align-items:center;justify-content:center;"
         wire:click.self="$set('mostrar_cierre', false)">
        <div style="background:#fff;border-radius:22px;padding:28px;width:440px;
                    box-shadow:0 20px 60px rgba(0,0,0,.2);max-height:90vh;overflow-y:auto;">

            <div style="font-size:17px;font-weight:700;margin-bottom:6px;">🔴 Cierre de turno</div>
            <div style="font-size:13px;color:var(--label2);margin-bottom:20px;">
                Arqueo de caja · {{ now()->format('d/m/Y H:i') }}
            </div>

            @if($cierre_error)
            <div class="alert alert-red" style="margin-bottom:14px;">❌ {{ $cierre_error }}</div>
            @endif

            {{-- Resumen del turno --}}
            <div style="background:var(--bg);border-radius:14px;padding:16px;margin-bottom:18px;">
                <div style="font-size:12px;font-weight:600;margin-bottom:12px;color:var(--label2);
                            text-transform:uppercase;letter-spacing:.4px;">Resumen del turno</div>
                @foreach([
                    ['Ventas totales', $resumen['total_ventas']],
                    ['N. de crédito', -$resumen['total_nc']],
                    ['Efectivo en ventas', $resumen['total_efectivo']],
                    ['Tarjeta / SINPE', $resumen['total_tarjeta'] + $resumen['total_sinpe']],
                    ['Transferencias', $resumen['total_transferencia']],
                    ['Retiros', -$resumen['total_retiros']],
                    ['Depósitos', $resumen['total_depositos']],
                    ['IVA cobrado', $resumen['total_iva']],
                ] as [$label, $valor])
                <div style="display:flex;justify-content:space-between;padding:4px 0;
                            border-bottom:.5px solid var(--separator);font-size:12px;">
                    <span style="color:var(--label2);">{{ $label }}</span>
                    <span style="font-weight:500;font-family:'Courier New',monospace;
                                 color:{{ $valor < 0 ? 'var(--red)' : 'var(--label)' }};">
                        {{ $valor < 0 ? '-' : '' }}₡{{ number_format(abs($valor), 2) }}
                    </span>
                </div>
                @endforeach
                <div style="display:flex;justify-content:space-between;padding:8px 0 4px;
                            font-size:14px;font-weight:700;">
                    <span>Efectivo esperado en caja</span>
                    <span style="font-family:'Courier New',monospace;">
                        ₡{{ number_format($resumen['efectivo_esperado'], 2) }}
                    </span>
                </div>
            </div>

            <div class="field" style="margin-bottom:14px;">
                <label>Efectivo contado en caja (₡)</label>
                <input type="number"
                       wire:model.live="efectivo_contado"
                       step="1000" min="0"
                       placeholder="0.00"
                       style="font-size:18px;text-align:center;font-weight:700;padding:12px;" />
            </div>

            {{-- Diferencia --}}
            @php $diferencia = $efectivo_contado - $resumen['efectivo_esperado']; @endphp
            <div style="text-align:center;padding:10px;border-radius:10px;margin-bottom:16px;
                        background:{{ abs($diferencia) < 1000 ? 'rgba(52,199,89,.08)' : 'rgba(255,59,48,.08)' }};
                        font-size:13px;font-weight:600;
                        color:{{ abs($diferencia) < 1000 ? 'var(--green2)' : 'var(--red)' }}">
                {{ $diferencia >= 0 ? 'Sobrante: +' : 'Faltante: -' }}
                ₡{{ number_format(abs($diferencia), 2) }}
            </div>

            <div class="field" style="margin-bottom:20px;">
                <label>Notas de cierre (opcional)</label>
                <input type="text" wire:model="notas_cierre"
                       placeholder="Observaciones sobre diferencias…" />
            </div>

            <div style="display:flex;gap:10px;">
                <button wire:click="$set('mostrar_cierre', false)"
                        class="btn-plain" style="flex:1;justify-content:center;">Cancelar</button>
                <button wire:click="cerrarTurno"
                        wire:loading.attr="disabled"
                        class="btn-blue"
                        style="flex:1;justify-content:center;background:var(--red);">
                    <span wire:loading.remove>🔴 Cerrar turno</span>
                    <span wire:loading>Cerrando…</span>
                </button>
            </div>
        </div>
    </div>
    @endif

</div>