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

<div class="flex items-center justify-between mb-6">
    <h2 class="text-2xl font-bold text-gray-900"><i class="bi bi-clock-history"></i> Historial de Caja</h2>
    <a href="<?= site_url('caja') ?>" 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>

<div class="bg-violet-300 rounded-xl shadow-sm border border-gray-100 mb-6">
    <div class="p-3">
        <form method="get" action="<?= site_url('caja/history') ?>" class="flex flex-col sm:flex-row gap-2 items-end">
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Desde</label>
                <input type="date" name="desde" value="<?= $desde ?? '' ?>" class="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">
            </div>
            <div>
                <label class="block text-xs font-medium text-gray-500 mb-1">Hasta</label>
                <input type="date" name="hasta" value="<?= $hasta ?? '' ?>" class="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">
            </div>
            <button type="submit" class="bg-teal-600 hover:bg-teal-700 text-white px-4 py-2 rounded-lg text-sm font-medium inline-flex items-center gap-1 border-0 cursor-pointer shadow-sm transition"><i class="bi bi-funnel"></i> Filtrar</button>
            <?php if ($desde || $hasta): ?>
            <a href="<?= site_url('caja/history') ?>" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 font-medium no-underline inline-flex items-center gap-1 text-gray-600"><i class="bi bi-x-lg"></i> Limpiar</a>
            <?php endif; ?>
        </form>
    </div>
</div>

<div class="bg-violet-100 rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="text-gray-500 text-xs uppercase tracking-wider font-semibold">
                <tr>
                    <th class="text-left px-4 py-3">#</th>
                    <th class="text-left px-4 py-3">Abrio</th>
                    <th class="text-left px-4 py-3">Cerro</th>
                    <th class="text-left px-4 py-3">Apertura</th>
                    <th class="text-left px-4 py-3">Cierre</th>
                    <th class="text-right px-4 py-3">Inicial</th>
                    <th class="text-right px-4 py-3">C. Chica</th>
                    <th class="text-right px-4 py-3">Esperado</th>
                    <th class="text-right px-4 py-3">Real</th>
                    <th class="text-right px-4 py-3">Diferencia</th>
                    <th class="text-center px-4 py-3">Estado</th>
                    <th class="text-center px-4 py-3"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php if (empty($cajas)): ?>
                <tr>
                    <td colspan="12" class="text-center text-gray-400 py-8">No hay registros de caja</td>
                </tr>
                <?php else: ?>
                <?php foreach ($cajas as $c): ?>
                <tr class="hover:bg-gray-50">
                    <td class="px-4 py-3 font-black text-gray-900"><?= $c['id_caja'] ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= esc($c['username_apertura']) ?></td>
                    <td class="px-4 py-3 text-gray-600"><?= $c['username_cierre'] ? esc($c['username_cierre']) : '-' ?></td>
                    <td class="px-4 py-3 text-xs text-gray-500"><?= date('d/m/Y H:i', strtotime($c['fecha_apertura'])) ?></td>
                    <td class="px-4 py-3 text-xs text-gray-500"><?= $c['fecha_cierre'] ? date('d/m/Y H:i', strtotime($c['fecha_cierre'])) : '-' ?></td>
                    <td class="px-4 py-3 text-right text-gray-600">S/ <?= number_format($c['monto_inicial'], 2) ?></td>
                    <td class="px-4 py-3 text-right text-gray-600">S/ <?= number_format($c['fondo_chica'], 2) ?></td>
                    <td class="px-4 py-3 text-right text-gray-600"><?= $c['monto_esperado'] ? 'S/ ' . number_format($c['monto_esperado'], 2) : '-' ?></td>
                    <td class="px-4 py-3 text-right text-gray-600"><?= $c['monto_real_cierre'] ? 'S/ ' . number_format($c['monto_real_cierre'], 2) : '-' ?></td>
                    <td class="px-4 py-3 text-right font-black <?= $c['diferencia'] > 0 ? 'text-emerald-600' : ($c['diferencia'] < 0 ? 'text-rose-600' : '') ?>">
                        <?= $c['diferencia'] !== null ? number_format($c['diferencia'], 2) : '-' ?>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <span class="text-xs px-2 py-1 rounded-lg font-semibold <?= $c['estado'] == 'abierto' ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700' ?>">
                            <?= ucfirst($c['estado']) ?>
                        </span>
                    </td>
                    <td class="px-4 py-3 text-center">
                        <a href="<?= site_url('caja/detail/' . $c['id_caja']) ?>" class="text-[#EBDF00] hover:text-[#D4C800] no-underline"><i class="bi bi-eye"></i></a>
                    </td>
                </tr>
                <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>

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