<?php $__env->startSection('title', 'Nueva Compra'); ?>
<?php $__env->startSection('header', 'Registrar Compra'); ?>

<?php $__env->startSection('content'); ?>
<?php $moneda = $empresaGlobal->moneda ?? 'S/'; ?>

<form method="POST" action="<?php echo e(route('compras.store')); ?>" x-data="compraForm()" @submit="prepararSubmit">
    <?php echo csrf_field(); ?>
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <div class="lg:col-span-2 space-y-5">
            <div class="bg-white rounded-2xl shadow-md p-6">
                <h3 class="font-bold mb-4">Datos de la compra</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold mb-1">Proveedor *</label>
                        <select name="proveedor_id" required class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                            <option value="">— Seleccionar —</option>
                            <?php $__currentLoopData = $proveedores; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?><option value="<?php echo e($p->id); ?>"><?php echo e($p->razon_social); ?></option><?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">N° Factura</label>
                        <input type="text" name="numero_factura" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">Fecha</label>
                        <input type="date" name="fecha_compra" value="<?php echo e(now()->toDateString()); ?>" required class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold mb-1">Forma de pago</label>
                        <select name="forma_pago" class="w-full px-3 py-2.5 border border-slate-300 rounded-lg">
                            <option value="efectivo">Efectivo</option>
                            <option value="transferencia">Transferencia</option>
                            <option value="credito">Crédito</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-2xl shadow-md p-6">
                <h3 class="font-bold mb-4">Productos</h3>
                <div class="grid grid-cols-1 md:grid-cols-12 gap-2 mb-3">
                    <select x-model="nuevoItem.producto_id" class="md:col-span-5 px-3 py-2 border border-slate-300 rounded-lg">
                        <option value="">— Producto —</option>
                        <?php $__currentLoopData = $productos; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $p): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
                            <option value="<?php echo e($p->id); ?>" data-precio="<?php echo e($p->precio_compra); ?>" data-nombre="<?php echo e($p->nombre); ?>" data-codigo="<?php echo e($p->codigo); ?>"><?php echo e($p->codigo); ?> - <?php echo e($p->nombre); ?></option>
                        <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
                    </select>
                    <input type="number" step="0.001" x-model.number="nuevoItem.cantidad" placeholder="Cantidad" class="md:col-span-2 px-3 py-2 border border-slate-300 rounded-lg">
                    <input type="number" step="0.01" x-model.number="nuevoItem.precio_unitario" placeholder="Precio" class="md:col-span-3 px-3 py-2 border border-slate-300 rounded-lg">
                    <button type="button" @click="agregar" class="md:col-span-2 gradient-primary text-white py-2 rounded-lg"><i class="fas fa-plus mr-1"></i>Agregar</button>
                </div>

                <table class="w-full text-sm">
                    <thead class="text-xs uppercase text-slate-500 border-b">
                        <tr>
                            <th class="text-left py-2">Producto</th>
                            <th class="text-right py-2">Cantidad</th>
                            <th class="text-right py-2">Precio</th>
                            <th class="text-right py-2">Total</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(item, idx) in items" :key="idx">
                            <tr class="border-b">
                                <td class="py-2" x-text="item.nombre"></td>
                                <td class="py-2 text-right" x-text="item.cantidad"></td>
                                <td class="py-2 text-right" x-text="`<?php echo e($moneda); ?>${item.precio_unitario.toFixed(2)}`"></td>
                                <td class="py-2 text-right font-semibold" x-text="`<?php echo e($moneda); ?>${(item.cantidad * item.precio_unitario).toFixed(2)}`"></td>
                                <td class="py-2 text-right"><button type="button" @click="items.splice(idx,1)" class="text-red-500"><i class="fas fa-times"></i></button></td>
                            </tr>
                        </template>
                        <tr x-show="items.length === 0"><td colspan="5" class="text-center py-6 text-slate-400">Sin productos agregados</td></tr>
                    </tbody>
                </table>
            </div>
        </div>

        <div class="space-y-5">
            <div class="bg-white rounded-2xl shadow-md p-6 sticky top-20">
                <h3 class="font-bold mb-3">Resumen</h3>
                <div class="space-y-2 text-sm pb-3 border-b">
                    <div class="flex justify-between"><span class="text-slate-600">Items:</span><span x-text="items.length"></span></div>
                    <div class="flex justify-between"><span class="text-slate-600">Cantidad:</span><span x-text="items.reduce((s,i) => s + parseFloat(i.cantidad), 0).toFixed(2)"></span></div>
                </div>
                <div class="flex justify-between text-2xl font-bold pt-3"><span>Total:</span><span class="text-emerald-600" x-text="`<?php echo e($moneda); ?>${total.toFixed(2)}`"></span></div>
                <textarea name="observaciones" placeholder="Observaciones..." rows="2" class="w-full mt-3 px-3 py-2 border border-slate-300 rounded-lg text-sm"></textarea>
                <button type="submit" :disabled="items.length === 0" class="w-full mt-3 gradient-primary text-white py-3 rounded-lg font-semibold disabled:opacity-50">
                    <i class="fas fa-save mr-2"></i>Registrar Compra
                </button>
                <input type="hidden" name="items_json" :value="JSON.stringify(items)">
                <template x-for="(item, idx) in items" :key="idx">
                    <div>
                        <input type="hidden" :name="`items[${idx}][producto_id]`" :value="item.producto_id">
                        <input type="hidden" :name="`items[${idx}][cantidad]`" :value="item.cantidad">
                        <input type="hidden" :name="`items[${idx}][precio_unitario]`" :value="item.precio_unitario">
                    </div>
                </template>
            </div>
        </div>
    </div>
</form>

<?php $__env->startSection('scripts'); ?>
<script>
function compraForm() {
    return {
        items: [],
        nuevoItem: { producto_id: '', cantidad: 1, precio_unitario: 0 },
        get total() { return this.items.reduce((s, i) => s + i.cantidad * i.precio_unitario, 0); },
        agregar() {
            if (!this.nuevoItem.producto_id || this.nuevoItem.cantidad <= 0) return alert('Complete los datos');
            const opt = document.querySelector(`option[value="${this.nuevoItem.producto_id}"]`);
            this.items.push({
                producto_id: this.nuevoItem.producto_id,
                nombre: opt.dataset.nombre,
                cantidad: this.nuevoItem.cantidad,
                precio_unitario: this.nuevoItem.precio_unitario || parseFloat(opt.dataset.precio),
            });
            this.nuevoItem = { producto_id: '', cantidad: 1, precio_unitario: 0 };
        },
        prepararSubmit(e) { if (this.items.length === 0) { e.preventDefault(); alert('Agregue al menos un producto'); } }
    }
}
</script>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', array_diff_key(get_defined_vars(), ['__data' => 1, '__path' => 1]))->render(); ?><?php /**PATH C:\TVP\tvp-minimarket\resources\views/compras/create.blade.php ENDPATH**/ ?>