@extends('layouts.app')

@section('titulo', 'Nueva nota de debito')

@section('content')
    <h1 class="h4 mb-3">Nota de debito para factura {{ $factura->numero_documento }}</h1>

    <form method="POST" action="{{ route('ventas.notas-debito.store', $factura) }}" class="card p-4">
        @csrf
        <div class="mb-3">
            <label class="form-label">Motivo</label>
            <textarea name="motivo" class="form-control" required placeholder="Ej: diferencial cambiario, flete adicional, interes de mora..."></textarea>
        </div>

        <table class="table" id="tabla-items">
            <thead><tr><th>Descripcion</th><th>Cantidad</th><th>Monto</th><th>% IVA</th><th></th></tr></thead>
            <tbody></tbody>
        </table>
        <button type="button" class="btn btn-sm btn-outline-primary" id="btn-agregar">+ Agregar linea</button>

        <button type="submit" class="btn btn-primary mt-4 d-block">Emitir nota de debito</button>
    </form>
@endsection

@section('scripts')
<script>
let i = 0;
const tbody = document.querySelector('#tabla-items tbody');
function agregar() {
    const idx = i++;
    const fila = document.createElement('tr');
    fila.innerHTML = `
        <td><input type="text" class="form-control form-control-sm" name="items[${idx}][descripcion]" required></td>
        <td><input type="number" step="0.0001" class="form-control form-control-sm" name="items[${idx}][cantidad]" value="1" required></td>
        <td><input type="number" step="0.0001" class="form-control form-control-sm" name="items[${idx}][precio_unitario]" value="0" required></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm" name="items[${idx}][porcentaje_iva]" value="16" required></td>
        <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('tr').remove()">x</button></td>
    `;
    tbody.appendChild(fila);
}
document.getElementById('btn-agregar').addEventListener('click', agregar);
agregar();
</script>
@endsection