@extends('layouts.app')

@section('titulo', 'Nueva guia de despacho')

@section('content')
    <h1 class="h4 mb-3">Nueva guia de despacho</h1>

    <form method="POST" action="{{ route('ventas.guias.store') }}" class="card p-4">
        @csrf
        <div class="row g-3 mb-3">
            <div class="col-md-6">
                <label class="form-label">Cliente / Destinatario</label>
                <select name="customer_id" class="form-select" required>
                    <option value="">-- Selecciona --</option>
                    @foreach ($clientes as $cliente)
                        <option value="{{ $cliente->id }}">{{ $cliente->razon_social }} ({{ $cliente->rif }})</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3">
                <label class="form-label">Fecha</label>
                <input type="date" name="fecha" class="form-control" value="{{ now()->toDateString() }}" required>
            </div>
        </div>

        <table class="table" id="tabla-items">
            <thead><tr><th style="width:35%">Producto</th><th>Descripcion</th><th style="width:15%">Cantidad</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 guia de despacho</button>
    </form>
@endsection

@section('scripts')
<script>
const productos = @json($productos->map(fn($p) => ['id'=>$p->id,'nombre'=>$p->nombre]));
let i = 0;
const tbody = document.querySelector('#tabla-items tbody');
function agregar() {
    const idx = i++;
    const opciones = productos.map(p => `<option value="${p.id}">${p.nombre}</option>`).join('');
    const fila = document.createElement('tr');
    fila.innerHTML = `
        <td>
            <select class="form-select form-select-sm sel-producto" name="items[${idx}][product_id]" required>
                <option value="">-- Selecciona --</option>
                ${opciones}
            </select>
        </td>
        <td><input type="text" class="form-control form-control-sm inp-desc" 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><button type="button" class="btn btn-sm btn-outline-danger" onclick="this.closest('tr').remove()">x</button></td>
    `;
    tbody.appendChild(fila);
    fila.querySelector('.sel-producto').addEventListener('change', function () {
        fila.querySelector('.inp-desc').value = this.selectedOptions[0]?.textContent ?? '';
    });
}
document.getElementById('btn-agregar').addEventListener('click', agregar);
agregar();
</script>
@endsection