<?= $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-receipt"></i> Detalle de Venta #<?= $sale['id_venta'] ?></h2>
    <a href="<?= site_url('sales') ?>" class="bg-teal-100 border border-gray-200 rounded-lg px-4 py-2 text-sm transition hover:bg-gray-50 text-gray-600 no-underline inline-flex items-center gap-2">
        <i class="bi bi-arrow-left"></i> Volver
    </a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <div class="bg-emerald-100 rounded-xl shadow-sm border border-gray-100 p-5">
        <h6 class="text-gray-500 text-xs font-semibold uppercase tracking-wider mb-3">Informacion de la Venta</h6>
        <div class="space-y-2 text-sm">
            <p><span class="font-semibold text-gray-600">Ticket:</span> <span class="bg-emerald-100 text-emerald-700 rounded-lg px-2.5 py-1 text-xs font-semibold">#<?= $sale['id_venta'] ?></span></p>
            <p><span class="font-semibold text-gray-600">Fecha:</span> <?= date('d/m/Y H:i', strtotime($sale['fecha'])) ?></p>
            <p><span class="font-semibold text-gray-600">Vendedor:</span> <?= $sale['username'] ?></p>
            <p><span class="font-semibold text-gray-600">Total:</span> <span class="text-emerald-700 font-bold text-lg">S/ <?= number_format($sale['total'], 2) ?></span></p>
            <p><span class="font-semibold text-gray-600">Observaciones:</span> <?= $sale['observaciones'] ?? 'Ninguna' ?></p>
        </div>
    </div>
    <div class="lg:col-span-2">
        <div class="bg-emerald-100 rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-4">
            <div class="border-b border-gray-100 px-5 py-3">
                <h5 class="font-semibold text-gray-900">Productos</h5>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead class="bg-gray-50 text-gray-500 text-xs uppercase tracking-wider font-semibold">
                        <tr>
                            <th class="text-left px-4 py-3">Producto</th>
                            <th class="text-left px-4 py-3">Codigo</th>
                            <th class="text-center px-4 py-3">Cantidad</th>
                            <th class="text-right px-4 py-3">P. Unitario</th>
                            <th class="text-right px-4 py-3">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100">
                        <?php foreach ($sale['details'] as $detail): ?>
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3 text-gray-600"><?= esc($detail['producto_nombre']) ?></td>
                            <td class="px-4 py-3 text-gray-600"><?= esc($detail['codigo_unico']) ?></td>
                            <td class="px-4 py-3 text-center text-gray-600"><?= $detail['cantidad'] ?></td>
                            <td class="px-4 py-3 text-right text-gray-600">S/ <?= number_format($detail['precio_unitario'], 2) ?></td>
                            <td class="px-4 py-3 text-right font-medium text-gray-600">S/ <?= number_format($detail['subtotal'], 2) ?></td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                    <tfoot class="bg-gray-900 text-white">
                        <tr>
                            <th colspan="4" class="text-right px-4 py-3 font-bold">TOTAL <span class="text-xs font-normal text-white/60">(IGV incluido)</span></th>
                            <th class="text-right px-4 py-3 font-bold">S/ <?= number_format($sale['total'], 2) ?></th>
                        </tr>
                        <tr class="text-xs text-white/60 bg-gray-900/80">
                            <th colspan="4" class="text-right px-4 py-1">Base Imponible</th>
                            <th class="text-right px-4 py-1">S/ <?= number_format($sale['total'] / 1.18, 2) ?></th>
                        </tr>
                        <tr class="text-xs text-white/60 bg-gray-900/80">
                            <th colspan="4" class="text-right px-4 py-1">IGV (18%)</th>
                            <th class="text-right px-4 py-1">S/ <?= number_format($sale['total'] * 0.18 / 1.18, 2) ?></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
        <div class="bg-emerald-100 rounded-xl shadow-sm border border-gray-100 p-5">
            <h6 class="text-gray-500 text-xs font-semibold uppercase tracking-wider mb-2">Forma(s) de Pago</h6>
            <div class="flex flex-wrap gap-2">
                <?php foreach ($sale['payments'] as $payment): ?>
                <span class="bg-rose-100 text-rose-700 rounded-lg px-2.5 py-1 text-xs font-semibold"><?= ucfirst($payment['forma_pago_nombre']) ?>: S/ <?= number_format($payment['monto'], 2) ?></span>
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>

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