@extends('layouts.app')

@section('titulo', 'Nueva factura')

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

    <form method="POST" action="{{ route('ventas.facturas.store') }}" id="form-factura" class="card p-4">
        @csrf
        <div class="row g-3">
            <div class="col-md-4">
                <label class="form-label">Cliente</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-2">
                <label class="form-label">Fecha</label>
                <input type="date" name="fecha" class="form-control" value="{{ now()->toDateString() }}" required>
            </div>
            <div class="col-md-2">
                <label class="form-label">Condicion</label>
                <select name="condicion_pago" id="condicion_pago" class="form-select">
                    <option value="contado">Contado</option>
                    <option value="credito">Credito</option>
                </select>
            </div>
            <div class="col-md-2" id="dias-credito-wrap" style="display:none;">
                <label class="form-label">Dias de credito</label>
                <input type="number" name="dias_credito" class="form-control" value="30" min="0">
            </div>
            <div class="col-md-2">
                <label class="form-label">Formato factura</label>
                <select name="formato_pdf" class="form-select">
                    <option value="{{ $empresa->formato_factura }}" selected>{{ ucfirst(str_replace('_',' ',$empresa->formato_factura)) }} (por defecto)</option>
                    <option value="cuartilla">Cuartilla completa</option>
                    <option value="media_cuartilla">Media cuartilla</option>
                    <option value="termico_8cm">Termico 8cm</option>
                </select>
            </div>

            <div class="col-md-3">
                <label class="form-label">Moneda</label>
                <input type="text" name="moneda_code" class="form-control" value="{{ $empresa->moneda_base_code }}" required>
            </div>
            <div class="col-md-3">
                <label class="form-label">Tasa de cambio (a Bs.)</label>
                <input type="number" step="0.000001" name="tasa_cambio" class="form-control" value="1" required>
            </div>
        </div>

        <hr>
        <h2 class="h6">Lineas de factura</h2>
        <table class="table" id="tabla-items">
            <thead>
                <tr>
                    <th style="width:30%">Producto/Servicio</th>
                    <th>Descripcion</th>
                    <th style="width:10%">Cantidad</th>
                    <th style="width:12%">Precio Unit.</th>
                    <th style="width:8%">% IVA</th>
                    <th style="width:12%" class="text-end">Subtotal</th>
                    <th></th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
        <button type="button" class="btn btn-sm btn-outline-primary" id="btn-agregar-linea">+ Agregar linea</button>

        <div class="row justify-content-end mt-3">
            <div class="col-md-4">
                <table class="table table-sm">
                    <tr><td>Exento</td><td class="text-end" id="tot-exento">0.00</td></tr>
                    <tr><td>Gravado general</td><td class="text-end" id="tot-gravado">0.00</td></tr>
                    <tr><td>IVA</td><td class="text-end" id="tot-iva">0.00</td></tr>
                    <tr class="fw-bold"><td>Total</td><td class="text-end" id="tot-total">0.00</td></tr>
                </table>
            </div>
        </div>

        <hr>
        <h2 class="h6">Retenciones aplicadas por el cliente (opcional)</h2>
        <div class="row g-3">
            <div class="col-md-2"><label class="form-label">Monto Ret. IVA</label><input type="number" step="0.01" name="retencion_iva_monto" class="form-control" value="0"></div>
            <div class="col-md-2"><label class="form-label">N° Comprobante IVA</label><input type="text" name="retencion_iva_comprobante_numero" class="form-control"></div>
            <div class="col-md-2"><label class="form-label">Fecha Ret. IVA</label><input type="date" name="retencion_iva_fecha" class="form-control"></div>
            <div class="col-md-2"><label class="form-label">Monto Ret. ISLR</label><input type="number" step="0.01" name="retencion_islr_monto" class="form-control" value="0"></div>
            <div class="col-md-2"><label class="form-label">N° Comprobante ISLR</label><input type="text" name="retencion_islr_comprobante_numero" class="form-control"></div>
            <div class="col-md-2"><label class="form-label">Fecha Ret. ISLR</label><input type="date" name="retencion_islr_fecha" class="form-control"></div>
        </div>

        <button type="submit" class="btn btn-primary mt-4">Emitir factura</button>
    </form>
@endsection

@section('scripts')
<script>
const productos = @json($productos->map(fn($p) => ['id'=>$p->id,'nombre'=>$p->nombre,'precio'=>$p->precio_venta,'iva'=>$p->porcentaje_iva]));
const tbody = document.querySelector('#tabla-items tbody');
let contador = 0;

function agregarLinea() {
    const idx = contador++;
    const opciones = productos.map(p => `<option value="${p.id}" data-precio="${p.precio}" data-iva="${p.iva}">${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]">
                <option value="">-- Libre --</option>
                ${opciones}
            </select>
        </td>
        <td><input type="text" class="form-control form-control-sm inp-descripcion" name="items[${idx}][descripcion]" required></td>
        <td><input type="number" step="0.0001" class="form-control form-control-sm inp-cantidad" name="items[${idx}][cantidad]" value="1" required></td>
        <td><input type="number" step="0.0001" class="form-control form-control-sm inp-precio" name="items[${idx}][precio_unitario]" value="0" required></td>
        <td><input type="number" step="0.01" class="form-control form-control-sm inp-iva" name="items[${idx}][porcentaje_iva]" value="16" required></td>
        <td class="text-end inp-subtotal">0.00</td>
        <td><button type="button" class="btn btn-sm btn-outline-danger btn-quitar">x</button></td>
    `;
    tbody.appendChild(fila);

    fila.querySelector('.sel-producto').addEventListener('change', function () {
        const opt = this.selectedOptions[0];
        if (opt && opt.dataset.precio !== undefined) {
            fila.querySelector('.inp-descripcion').value = opt.textContent;
            fila.querySelector('.inp-precio').value = opt.dataset.precio;
            fila.querySelector('.inp-iva').value = opt.dataset.iva;
        }
        recalcular();
    });

    fila.querySelectorAll('.inp-cantidad, .inp-precio, .inp-iva').forEach(el => el.addEventListener('input', recalcular));
    fila.querySelector('.btn-quitar').addEventListener('click', () => { fila.remove(); recalcular(); });

    recalcular();
}

function recalcular() {
    let exento = 0, gravado = 0, iva = 0;
    tbody.querySelectorAll('tr').forEach(fila => {
        const cantidad = parseFloat(fila.querySelector('.inp-cantidad').value) || 0;
        const precio = parseFloat(fila.querySelector('.inp-precio').value) || 0;
        const pIva = parseFloat(fila.querySelector('.inp-iva').value) || 0;
        const subtotal = cantidad * precio;
        const montoIva = subtotal * (pIva / 100);
        fila.querySelector('.inp-subtotal').textContent = (subtotal + montoIva).toFixed(2);

        if (pIva <= 0) exento += subtotal; else { gravado += subtotal; iva += montoIva; }
    });

    document.getElementById('tot-exento').textContent = exento.toFixed(2);
    document.getElementById('tot-gravado').textContent = gravado.toFixed(2);
    document.getElementById('tot-iva').textContent = iva.toFixed(2);
    document.getElementById('tot-total').textContent = (exento + gravado + iva).toFixed(2);
}

document.getElementById('btn-agregar-linea').addEventListener('click', agregarLinea);
document.getElementById('condicion_pago').addEventListener('change', function () {
    document.getElementById('dias-credito-wrap').style.display = this.value === 'credito' ? '' : 'none';
});

agregarLinea();
</script>
@endsection