<?= $this->extend('layouts/main_layout') ?>
<?= $this->section('content') ?>

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-2xl font-bold text-gray-900"><i class="bi bi-wallet2"></i> Detalle de Caja #<?= $caja['id_caja'] ?></h2>
        <p class="text-gray-500 text-sm mt-1">Abierta por <strong><?= esc($caja['username']) ?></strong>
        <?php if ($caja['estado'] == 'cerrado' && $caja['id_usuario_cierre']): ?>
        &mdash; Cerrada por <strong><?= esc($caja['username_cierre'] ?? 'Desconocido') ?></strong>
        <?php endif; ?>
        </p>
    </div>
    <a href="<?= site_url('caja/history') ?>" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg no-underline inline-flex items-center gap-2 shadow-sm transition">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<?php $isClosed = $caja['estado'] == 'cerrado'; ?>
<?php $genDisplay = $isClosed ? ($caja['monto_inicial'] + ($caja['total_chica_ingresos'] ?? 0) - ($caja['total_chica_gastos'] ?? 0)) : $caja['monto_esperado']; ?>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-5 mb-6">
    <div class="bg-rose-300 rounded-xl shadow-sm border-l-4 border-rose-600 p-5">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Caja General</p>
                <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight">S/ <?= number_format($genDisplay, 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= $isClosed ? ('Inicial S/ ' . number_format($caja['monto_inicial'], 2) . ' + Ventas Chica') : 'Capital inicial fijo' ?></p>
            </div>
            <div class="w-12 h-12 bg-rose-50 rounded-xl flex items-center justify-center">
                <i class="bi bi-bank text-xl text-rose-600"></i>
            </div>
        </div>
    </div>
    <div class="bg-[#EBDF00] rounded-xl shadow-sm border-l-4 border-[#D4C800] p-5">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Caja Chica</p>
                <p class="text-gray-400 text-xs -mt-1"><?= $isClosed ? '(Fondo fijo)' : '(Aqui se acumulan las ventas)' ?></p>
                <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight mt-2">S/ <?= number_format($isClosed ? $caja['fondo_chica'] : $caja['saldo_chica_actual'], 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= 'Fondo: S/ ' . number_format($caja['fondo_chica'], 2) . ' | Ventas: S/ ' . number_format($caja['total_chica_ingresos'] ?? 0, 2) . ' | Gastos: S/ ' . number_format($caja['total_chica_gastos'], 2) . ' | Reposiciones: S/ ' . number_format($caja['total_chica_reposiciones'], 2) ?></p>
            </div>
            <div class="w-12 h-12 bg-[#EBDF00]/20 rounded-xl flex items-center justify-center">
                <i class="bi bi-wallet2 text-xl text-[#EBDF00]"></i>
            </div>
        </div>
    </div>
    <div class="bg-violet-300 rounded-xl shadow-sm border-l-4 border-violet-600 p-5">
        <div class="flex justify-between items-start">
            <div>
                <p class="text-gray-500 text-xs font-semibold uppercase tracking-wide mb-1">Total Efectivo en Caja</p>
                <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight">S/ <?= number_format($isClosed ? ($genDisplay + $caja['fondo_chica']) : $caja['total_efectivo'], 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= $isClosed ? '(Inicial + Ventas Chica) + Fondo Chica' : 'General + Chica' ?></p>
            </div>
            <div class="w-12 h-12 bg-violet-50 rounded-xl flex items-center justify-center">
                <i class="bi bi-cash-stack text-xl text-violet-600"></i>
            </div>
        </div>
    </div>
</div>

<?php if ($caja['estado'] == 'cerrado'): ?>
<div class="bg-pink-300 rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
        <div>
            <p class="text-gray-400 text-xs font-medium">Apertura</p>
            <p class="font-semibold text-gray-900"><?= date('d/m/Y H:i', strtotime($caja['fecha_apertura'])) ?></p>
        </div>
        <div>
            <p class="text-gray-400 text-xs font-medium">Cierre</p>
            <p class="font-semibold text-gray-900"><?= $caja['fecha_cierre'] ? date('d/m/Y H:i', strtotime($caja['fecha_cierre'])) : '-' ?></p>
        </div>
        <div>
            <p class="text-gray-400 text-xs font-medium">General Final</p>
            <p class="font-black text-emerald-700">S/ <?= number_format($caja['monto_real_cierre'] ?? 0, 2) ?></p>
            <p class="text-gray-400 text-[10px]">Inicial S/ <?= number_format($caja['monto_inicial'], 2) ?> + Ventas Chica</p>
        </div>
        <div>
            <p class="text-gray-400 text-xs font-medium">Total General + Chica</p>
            <p class="font-black text-violet-700">S/ <?= number_format(($caja['monto_real_cierre'] ?? 0) + ($caja['fondo_chica'] ?? 0), 2) ?></p>
        </div>
    </div>
</div>
<?php endif; ?>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <div class="bg-rose-300 rounded-xl shadow-sm border border-gray-100 p-5">
        <h5 class="font-semibold text-gray-900 flex items-center gap-2 mb-4">
            <i class="bi bi-list-ul text-[#EBDF00]"></i> Caja General
            <span class="text-gray-400 text-xs px-2 py-0.5 rounded-full ml-auto"><?= count($caja['movements']) ?></span>
        </h5>
        <?php if (empty($caja['movements'])): ?>
        <p class="text-gray-400 text-sm text-center py-6">No hay movimientos</p>
        <?php else: ?>
        <div class="overflow-x-auto" style="max-height: 400px; overflow-y: auto;">
            <table class="w-full text-sm">
                <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold sticky top-0 bg-rose-300">
                    <tr>
                        <th class="text-left px-3 py-2">Hora</th>
                        <th class="text-left px-3 py-2">Concepto</th>
                        <th class="text-center px-3 py-2">Tipo</th>
                        <th class="text-right px-3 py-2">Monto</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php foreach ($caja['movements'] as $m): ?>
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 text-xs text-gray-500"><?= date('d/m/Y H:i', strtotime($m['fecha'])) ?></td>
                        <td class="px-3 py-2 text-gray-600">
                            <?= esc($m['concepto']) ?>
                            <?php if ($m['id_venta']): ?>
                            <a href="<?= site_url('sales/' . $m['id_venta']) ?>" class="text-[#EBDF00] no-underline text-xs">#<?= $m['id_venta'] ?></a>
                            <?php endif; ?>
                        </td>
                        <td class="px-3 py-2 text-center">
                            <span class="text-xs px-2 py-1 rounded-lg font-semibold <?= $m['tipo'] == 'ingreso' ? 'bg-emerald-100 text-emerald-700' : 'bg-[#EBDF00]/20 text-[#D4C800]' ?>">
                                <?= $m['tipo'] == 'ingreso' ? 'Ingreso' : 'Egreso' ?>
                            </span>
                        </td>
                        <td class="px-3 py-2 text-right font-black <?= $m['tipo'] == 'ingreso' ? 'text-rose-600' : 'text-[#EBDF00]' ?>">
                            <?= $m['tipo'] == 'ingreso' ? '+' : '-' ?> S/ <?= number_format($m['monto'], 2) ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>
    </div>

    <div class="bg-lime-300 rounded-xl shadow-sm border border-gray-100 p-5">
        <h5 class="font-semibold text-gray-900 flex items-center gap-2 mb-4">
            <i class="bi bi-wallet2 text-lime-700"></i> Caja Chica
            <span class="text-gray-400 text-xs px-2 py-0.5 rounded-full ml-auto"><?= count($caja['chica_movements']) ?></span>
        </h5>
        <div class="flex items-center gap-3 mb-4 p-3 bg-[#EBDF00]/10 border border-[#EBDF00]/30 rounded-xl">
            <div class="w-10 h-10 rounded-full bg-rose-100 text-[#EBDF00] flex items-center justify-center flex-shrink-0">
                <i class="bi bi-cash-stack text-lg"></i>
            </div>
            <div>
                <p class="text-sm font-semibold text-gray-900">Saldo Final: S/ <?= number_format($caja['saldo_chica_actual'], 2) ?></p>
                <p class="text-xs text-[#EBDF00]">Fondo: S/ <?= number_format($caja['fondo_chica'], 2) ?> | Gastos: S/ <?= number_format($caja['total_chica_gastos'], 2) ?> | Reposiciones: S/ <?= number_format($caja['total_chica_reposiciones'], 2) ?></p>
            </div>
        </div>
        <?php if (empty($caja['chica_movements'])): ?>
        <p class="text-gray-400 text-sm text-center py-6">No hay movimientos de caja chica</p>
        <?php else: ?>
        <div class="overflow-x-auto" style="max-height: 400px; overflow-y: auto;">
            <table class="w-full text-sm">
                <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold sticky top-0 bg-lime-300">
                    <tr>
                        <th class="text-left px-3 py-2">Hora</th>
                        <th class="text-left px-3 py-2">Concepto</th>
                        <th class="text-center px-3 py-2">Tipo</th>
                        <th class="text-right px-3 py-2">Monto</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    <?php foreach ($caja['chica_movements'] as $m): ?>
                    <tr class="hover:bg-gray-50">
                        <td class="px-3 py-2 text-xs text-gray-500"><?= date('d/m/Y H:i', strtotime($m['fecha'])) ?></td>
                        <td class="px-3 py-2 text-gray-600"><?= esc($m['concepto']) ?></td>
                        <td class="px-3 py-2 text-center">
                            <?php $tipoLabel = ['ingreso' => 'Ingreso', 'gasto' => 'Gasto', 'reposicion' => 'Reposicion'][$m['tipo']] ?? 'Gasto'; ?>
                            <?php $tipoColor = $m['tipo'] == 'ingreso' ? 'bg-emerald-100 text-emerald-700' : ($m['tipo'] == 'reposicion' ? 'bg-[#EBDF00]/20 text-[#D4C800]' : 'bg-[#EBDF00]/20 text-[#D4C800]'); ?>
                            <span class="text-xs px-2 py-1 rounded-lg font-semibold <?= $tipoColor ?>">
                                <?= $tipoLabel ?>
                            </span>
                        </td>
                        <td class="px-3 py-2 text-right font-black <?= $m['tipo'] == 'ingreso' || $m['tipo'] == 'reposicion' ? 'text-rose-600' : 'text-[#EBDF00]' ?>">
                            <?= $m['tipo'] == 'gasto' ? '-' : '+' ?> S/ <?= number_format($m['monto'], 2) ?>
                        </td>
                    </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
        <?php endif; ?>
    </div>
</div>

<?= $this->endSection() ?>
