@extends('layouts.app')
@section('title', 'Nueva compra')
@section('content')

<form action="{{ route('compras.store') }}" method="POST" x-data="compraForm()">
    @csrf
    <div class="row g-3">
        <div class="col-lg-8">
            <div class="card mb-3">
                <div class="card-header">Datos de la compra</div>
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-4"><label class="form-label">Proveedor *</label>
                            <select name="proveedor_id" class="form-select" required>
                                <option value="">Selecciona...</option>
                                @foreach($proveedores as $p)<option value="{{ $p->id }}">{{ $p->nombre }}</option>@endforeach
                            </select>
                        </div>
                        <div class="col-md-3"><label class="form-label">N° Factura</label>
                            <input type="text" name="numero_factura" class="form-control"></div>
                        <div class="col-md-3"><label class="form-label">Fecha *</label>
                            <input type="date" name="fecha" value="{{ date('Y-m-d') }}" class="form-control" required></div>
                        <div class="col-md-2"><label class="form-label">Método pago</label>
                            <select name="metodo_pago" class="form-select"><option value="efectivo">Efectivo</option><option value="tarjeta">Tarjeta</option><option value="transferencia">Transferencia</option><option value="credito">Crédito</option></select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header d-flex justify-content-between"><span>Productos</span>
                    <button type="button" class="btn btn-sm btn-primary" @click="agregar()"><i class="bi bi-plus"></i> Añadir línea</button>
                </div>
                <div class="card-body">
                    <table class="table">
                        <thead><tr><th>Producto</th><th>Cantidad</th><th>Precio</th><th>Subtotal</th><th></th></tr></thead>
                        <tbody>
                            <template x-for="(item, i) in items" :key="i">
                                <tr>
                                    <td>
                                        <select :name="`items[${i}][producto_id]`" class="form-select" x-model="item.producto_id" @change="setPrecio(i)">
                                            <option value="">Selecciona...</option>
                                            @foreach($productos as $p)
                                                <option value="{{ $p->id }}" data-precio="{{ $p->precio_compra }}">{{ $p->nombre }}</option>
                                            @endforeach
                                        </select>
                                    </td>
                                    <td><input type="number" step="0.001" :name="`items[${i}][cantidad]`" class="form-control" x-model.number="item.cantidad" @input="recalc()" required></td>
                                    <td><input type="number" step="0.01" :name="`items[${i}][precio_unitario]`" class="form-control" x-model.number="item.precio_unitario" @input="recalc()" required></td>
                                    <td class="text-end fw-semibold" x-text="formato(item.cantidad * item.precio_unitario)"></td>
                                    <td><button type="button" class="btn btn-sm btn-light text-danger" @click="quitar(i)"><i class="bi bi-x"></i></button></td>
                                </tr>
                            </template>
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="card mb-3">
                <div class="card-header">Observaciones</div>
                <div class="card-body"><textarea name="observaciones" class="form-control" rows="2"></textarea></div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card sticky-top" style="top: calc(var(--header-height) + 1rem);">
                <div class="card-header">Total</div>
                <div class="card-body text-center">
                    <div class="display-5 fw-bold" style="color:var(--primary)" x-text="formato(total)"></div>
                    <p class="text-muted">Total de la compra</p>
                    <button class="btn btn-primary btn-lg w-100"><i class="bi bi-check-circle"></i> Registrar compra</button>
                    <a href="{{ route('compras.index') }}" class="btn btn-light w-100 mt-2">Cancelar</a>
                </div>
            </div>
        </div>
    </div>
</form>

<script>
function compraForm() {
    return {
        items: [{ producto_id: '', cantidad: 1, precio_unitario: 0 }],
        get total() { return this.items.reduce((s,i)=>s + ((i.cantidad||0) * (i.precio_unitario||0)), 0); },
        agregar() { this.items.push({ producto_id:'', cantidad:1, precio_unitario:0 }); },
        quitar(i) { this.items.splice(i, 1); if (!this.items.length) this.agregar(); },
        recalc() {},
        setPrecio(i) {
            const select = event.target;
            const opt = select.options[select.selectedIndex];
            const precio = parseFloat(opt.dataset.precio || 0);
            if (precio > 0) this.items[i].precio_unitario = precio;
        },
        formato(n) {
            return '{{ $config->moneda_simbolo }}' + parseFloat(n||0).toFixed({{ $config->decimales ?? 2 }});
        }
    };
}
</script>
@endsection