<?= $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> Caja Abierta</h2>
        <p class="text-gray-500 text-sm mt-1">Abierta el <?= date('d/m/Y H:i', strtotime($caja['fecha_apertura'])) ?> por <strong><?= esc($caja['username']) ?></strong></p>
    </div>
    <div class="flex items-center gap-2">
        <form method="post" action="<?= site_url('caja/close') ?>" onsubmit="return confirmClose(event)" class="inline">
            <?= csrf_field() ?>
            <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg inline-flex items-center gap-2 border-0 cursor-pointer shadow-sm transition">
                <i class="bi bi-x-lg"></i> Cerrar Caja
            </button>
        </form>
        <div class="flex gap-2">
            <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-clock-history"></i> Historial
            </a>
            <a href="<?= site_url('dashboard') ?>" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 no-underline inline-flex items-center gap-2 text-gray-600 hover:bg-gray-50 transition">
                <i class="bi bi-arrow-left"></i> Volver
            </a>
        </div>
    </div>
</div>

<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($caja['monto_esperado'], 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1">Heredado de sesion anterior</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">(Aqui se acumulan las ventas)</p>
                <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight mt-2">S/ <?= number_format($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($caja['total_efectivo'], 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1">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>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-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 - Movimientos
            <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 aun</p>
        <?php else: ?>
        <div class="overflow-x-auto" style="max-height: 300px; 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('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">#<?= $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 class="mt-3 pt-3 border-t border-gray-100">
            <button onclick="document.getElementById('addGeneralModal').classList.remove('hidden')" class="bg-teal-600 hover:bg-teal-700 text-white text-xs px-3 py-1.5 rounded-lg border-0 cursor-pointer shadow-sm transition">
                <i class="bi bi-plus-circle"></i> Agregar Movimiento
            </button>
        </div>
    </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 - Movimientos
            <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 Actual: S/ <?= number_format($caja['saldo_chica_actual'], 2) ?></p>
                <p class="text-xs text-[#EBDF00]">Fondo fijo: S/ <?= number_format($caja['fondo_chica'], 2) ?> | Gastado: S/ <?= number_format($caja['total_chica_gastos'], 2) ?> | Repuesto: 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: 250px; 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('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 class="mt-3 pt-3 border-t border-gray-100 flex gap-2">
            <button onclick="document.getElementById('addChicaGastoModal').classList.remove('hidden')" class="bg-teal-600 hover:bg-teal-700 text-white text-xs px-3 py-1.5 rounded-lg border-0 cursor-pointer shadow-sm transition">
                <i class="bi bi-wallet2"></i> Gasto
            </button>
            <button onclick="document.getElementById('addChicaRepoModal').classList.remove('hidden')" class="bg-emerald-600 hover:bg-emerald-700 text-white text-xs px-3 py-1.5 rounded-lg border-0 cursor-pointer shadow-sm transition">
                <i class="bi bi-arrow-repeat"></i> Reponer
            </button>
        </div>
    </div>
</div>

<div id="addGeneralModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-teal-100 rounded-xl shadow-sm p-6 w-full max-w-sm mx-4 border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-2"><i class="bi bi-plus-circle text-teal-600"></i> Movimiento General</h3>
        <form method="post" action="<?= site_url('caja/add-movement') ?>">
            <?= csrf_field() ?>
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Tipo</label>
                <select name="tipo" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                    <option value="ingreso">Ingreso</option>
                    <option value="egreso">Egreso</option>
                </select>
            </div>
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Concepto</label>
                <input type="text" name="concepto" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Ej: Pago proveedor" required>
            </div>
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Monto (S/)</label>
                <input type="number" name="monto" step="0.01" min="0.01" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
            </div>
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('addGeneralModal').classList.add('hidden')" class="flex-1 bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium cursor-pointer">Cancelar</button>
                <button type="submit" class="flex-1 bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 rounded-lg text-sm border-0 cursor-pointer shadow-sm transition"><i class="bi bi-check-circle"></i> Registrar</button>
            </div>
        </form>
    </div>
</div>

<div id="addChicaGastoModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-teal-100 rounded-xl shadow-sm p-6 w-full max-w-sm mx-4 border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-2"><i class="bi bi-wallet2 text-rose-500"></i> Gasto Caja Chica</h3>
        <form method="post" action="<?= site_url('caja/add-chica-movement') ?>">
            <?= csrf_field() ?>
            <input type="hidden" name="tipo" value="gasto">
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Concepto</label>
                <input type="text" name="concepto" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Ej: Cafe, pasajes" required>
            </div>
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Monto (S/)</label>
                <input type="number" name="monto" step="0.01" min="0.01" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
            </div>
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('addChicaGastoModal').classList.add('hidden')" class="flex-1 bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium cursor-pointer">Cancelar</button>
                <button type="submit" class="flex-1 bg-teal-600 hover:bg-teal-700 text-white font-medium py-2 rounded-lg text-sm border-0 cursor-pointer shadow-sm transition"><i class="bi bi-check-circle"></i> Registrar Gasto</button>
            </div>
        </form>
    </div>
</div>

<div id="addChicaRepoModal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/50">
    <div class="bg-teal-100 rounded-xl shadow-sm p-6 w-full max-w-sm mx-4 border border-gray-100">
        <h3 class="text-lg font-semibold text-gray-900 mb-2"><i class="bi bi-arrow-repeat text-emerald-500"></i> Reponer Caja Chica</h3>
        <form method="post" action="<?= site_url('caja/add-chica-movement') ?>">
            <?= csrf_field() ?>
            <input type="hidden" name="tipo" value="reposicion">
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Concepto</label>
                <input type="text" name="concepto" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" placeholder="Reposicion de fondo" value="Reposicion de caja chica">
            </div>
            <div class="mb-3">
                <label class="block text-xs font-medium text-gray-500 mb-1">Monto (S/)</label>
                <input type="number" name="monto" step="0.01" min="0.01" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-sm focus:outline-none focus:ring-2 focus:ring-teal-500" required>
            </div>
            <div class="flex gap-2">
                <button type="button" onclick="document.getElementById('addChicaRepoModal').classList.add('hidden')" class="flex-1 bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium cursor-pointer">Cancelar</button>
                <button type="submit" class="flex-1 bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 rounded-lg text-sm border-0 cursor-pointer shadow-sm transition"><i class="bi bi-check-circle"></i> Reponer</button>
            </div>
        </form>
    </div>
</div>

<script>
function confirmClose(e) {
    e.preventDefault();
    Swal.fire({
        title: 'Cerrar Caja',
        text: 'Las ventas de caja chica se sumaran automaticamente a caja general',
        icon: 'question',
        showCancelButton: true,
        confirmButtonText: 'Si, cerrar',
        cancelButtonText: 'Cancelar'
    }).then(r => { if (r.isConfirmed) e.target.submit(); });
}

document.querySelectorAll('[id$="Modal"]').forEach(m => {
    m.addEventListener('click', function(e) {
        if (e.target === this) this.classList.add('hidden');
    });
});
</script>

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