<?= $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-wallet2"></i> Caja</h2>
    <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>

<?php 
$genClosed = $lastCaja ? $lastCaja['monto_inicial'] + ($lastCaja['total_chica_ingresos'] ?? 0) - ($lastCaja['total_chica_gastos'] ?? 0) : 0;
?>
<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($genClosed, 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= $lastCaja ? ('Inicial S/ ' . number_format($lastCaja['monto_inicial'], 2) . ' + Ventas Chica') : 'Apertura pendiente' ?></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">(Fondo fijo)</p>
                <h3 class="text-3xl font-extrabold text-gray-900 tracking-tight mt-2">S/ <?= number_format(($lastCaja['fondo_chica'] ?? 0), 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= $lastCaja ? ('Fondo: S/ ' . number_format($lastCaja['fondo_chica'], 2) . ' | Ventas: S/ ' . number_format($lastCaja['total_chica_ingresos'] ?? 0, 2) . ' | Gastos: S/ ' . number_format($lastCaja['total_chica_gastos'], 2) . ' | Reposiciones: S/ ' . number_format($lastCaja['total_chica_reposiciones'], 2)) : 'Apertura pendiente' ?></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($genClosed + ($lastCaja['fondo_chica'] ?? 0), 2) ?></h3>
                <p class="text-gray-400 text-xs mt-1"><?= $lastCaja ? '(Inicial + Ventas Chica) + Fondo Chica' : 'Apertura pendiente' ?></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 (!empty($todayCajas)): ?>
<div class="bg-pink-300 rounded-xl shadow-sm border border-gray-100 p-5 mb-6">
    <h5 class="font-semibold text-gray-900 flex items-center gap-2 mb-3">
        <i class="bi bi-clock-history text-gray-400"></i> Cajas de Hoy
    </h5>
    <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-3 py-2">Abierta por</th>
                    <th class="text-left px-3 py-2">Apertura</th>
                    <th class="text-left px-3 py-2">Cerrada por</th>
                    <th class="text-left px-3 py-2">Cierre</th>
                    <th class="text-right px-3 py-2">Total Ventas</th>
                    <th class="text-right px-3 py-2">General</th>
                    <th class="text-right px-3 py-2">C. Chica</th>
                    <th class="text-center px-3 py-2">Estado</th>
                    <th class="text-center px-3 py-2"></th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php foreach ($todayCajas as $c): ?>
                <tr class="hover:bg-gray-50">
                    <td class="px-3 py-2 text-gray-600"><?= esc($c['username_apertura']) ?></td>
                    <td class="px-3 py-2 text-xs text-gray-500"><?= date('d/m/Y H:i', strtotime($c['fecha_apertura'])) ?></td>
                    <td class="px-3 py-2 text-gray-600"><?= $c['username_cierre'] ? esc($c['username_cierre']) : '-' ?></td>
                    <td class="px-3 py-2 text-xs text-gray-500"><?= $c['fecha_cierre'] ? date('d/m/Y H:i', strtotime($c['fecha_cierre'])) : '-' ?></td>
                    <td class="px-3 py-2 text-right font-black text-rose-600">S/ <?= number_format($c['total_ventas'], 2) ?></td>
                    <td class="px-3 py-2 text-right text-gray-600">S/ <?= number_format($c['monto_inicial'], 2) ?></td>
                    <td class="px-3 py-2 text-right text-gray-600">S/ <?= number_format($c['fondo_chica'], 2) ?></td>
                    <td class="px-3 py-2 text-center">
                        <span class="text-xs px-2 py-1 rounded-lg font-semibold <?= $c['estado'] == 'cerrado' ? 'bg-[#EBDF00]/20 text-[#D4C800]' : 'bg-emerald-100 text-emerald-700' ?>">
                            <?= ucfirst($c['estado']) ?>
                        </span>
                    </td>
                    <td class="px-3 py-2 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; ?>
            </tbody>
        </table>
    </div>
</div>
<?php endif; ?>

<?php if (session()->get('role') == 'admin' || session()->get('role') == 'vendedor'): ?>
<div class="max-w-md mx-auto">
    <div class="bg-teal-100 rounded-xl shadow-sm border border-gray-100 p-6">
        <div class="text-center mb-6">
            <div class="w-16 h-16 rounded-full bg-rose-100 text-[#EBDF00] flex items-center justify-center mx-auto mb-3">
                <i class="bi bi-wallet2 text-3xl"></i>
            </div>
            <h3 class="text-lg font-semibold text-gray-900">Aperturar Caja Chica</h3>
            <p class="text-gray-500 text-sm mt-1">Ingresa el monto para la caja chica</p>
        </div>

        <form method="post" action="<?= site_url('caja/open') ?>">
            <?= csrf_field() ?>
            <div class="mb-4">
                <label for="fondo_chica" class="block text-sm font-medium text-gray-500 mb-1">Caja Chica (S/)</label>
                <input type="number" name="fondo_chica" id="fondo_chica" step="0.01" min="0" value="<?= number_format($lastCaja['fondo_chica'] ?? 200.00, 2, '.', '') ?>" class="w-full bg-teal-100 border border-gray-200 rounded-lg px-4 py-2.5 text-lg font-bold text-center focus:outline-none focus:ring-2 focus:ring-teal-500" required>
                <p class="text-xs text-gray-400 mt-1">Fondo para dar cambio y gastos menores</p>
            </div>
            <button type="submit" class="w-full bg-teal-600 hover:bg-teal-700 text-white font-medium py-2.5 rounded-lg inline-flex items-center justify-center gap-2 border-0 cursor-pointer shadow-sm transition">
                <i class="bi bi-check-circle"></i> Abrir Caja Chica
            </button>
        </form>
    </div>
</div>
<?php else: ?>
<div class="bg-slate-100 rounded-xl shadow-sm border border-gray-100 p-12 text-center">
    <i class="bi bi-wallet2 text-5xl text-gray-300"></i>
    <h3 class="text-xl font-semibold text-gray-600 mt-4">No hay caja abierta</h3>
    <p class="text-gray-400 mt-1">Espera a que el administrador abra la caja para comenzar a operar.</p>
</div>
<?php endif; ?>

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