@extends('layouts.app')
@section('title', 'Punto de venta')

@section('content')
<div class="page-head">
    <div>
        <h1>Punto de venta</h1>
        <div class="crumb"><a href="{{ route('dashboard') }}">Inicio</a> · Punto de venta</div>
    </div>
    <a href="{{ route('facturacion.index') }}" class="btn btn-light"><i class="fa-solid fa-file-invoice-dollar"></i> Ver comprobantes</a>
</div>

@include('partials.form_errors')

<div class="grid" style="grid-template-columns: 1.6fr 1fr; gap: 20px; align-items:start;">
    {{-- ===================== Buscador + catálogo ===================== --}}
    <div class="panel">
        <div class="panel-head">
            <div><h3>Repuestos y servicios</h3><div class="sub">Busca por nombre o código y toca para agregar al carrito</div></div>
        </div>
        <div class="panel-body">
            <div class="search" style="max-width:100%; margin-bottom:16px;">
                <i class="fa-solid fa-magnifying-glass"></i>
                <input type="text" id="buscador" placeholder="Buscar repuesto o servicio..." autocomplete="off">
            </div>
            <div id="resultados" class="pos-grid"></div>
        </div>
    </div>

    {{-- ===================== Carrito / checkout ===================== --}}
    <form id="formVenta" method="POST" action="{{ route('pos.store') }}">
        @csrf
        <div class="panel" style="margin-bottom:20px;">
            <div class="panel-head"><h3>Carrito</h3></div>
            <div class="panel-body">
                <div class="table-wrap">
                    <table class="tbl" id="tablaCarrito">
                        <thead><tr><th>Item</th><th style="width:70px;">Cant.</th><th style="width:90px;">P. Unit.</th><th style="width:90px;">Total</th><th></th></tr></thead>
                        <tbody id="carritoBody">
                            <tr id="carritoVacio"><td colspan="5" class="cell-muted" style="text-align:center; padding:24px;">El carrito está vacío.</td></tr>
                        </tbody>
                    </table>
                </div>

                <div class="totals-box" style="margin-top:16px;">
                    <div class="trow"><span>Subtotal 0%</span><b id="tSub0">$0.00</b></div>
                    <div class="trow"><span>Subtotal {{ number_format($config->igv ?? 15, 0) }}%</span><b id="tSub15">$0.00</b></div>
                    <div class="trow"><span>IVA</span><b id="tIva">$0.00</b></div>
                    <div class="trow grand"><span>Total</span><span id="tTotal">$0.00</span></div>
                </div>
            </div>
        </div>

        <div class="panel" style="margin-bottom:20px;">
            <div class="panel-head"><h3>Cliente y pago</h3></div>
            <div class="panel-body">
                <div class="form-grid" style="grid-template-columns:1fr;">
                    <div>
                        <label class="form-label">Cliente</label>
                        <select name="cliente_id" id="clienteSel" class="form-control">
                            <option value="">Consumidor final</option>
                            @foreach ($clientesRecientes as $cl)
                                <option value="{{ $cl->id }}">{{ $cl->nombre_completo }} · {{ $cl->documento }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Tipo de identificación (si emites factura a nombre del cliente)</label>
                        <select name="tipo_identificacion" class="form-control">
                            <option value="05">Cédula</option>
                            <option value="04">RUC</option>
                            <option value="06">Pasaporte</option>
                        </select>
                    </div>
                    <div>
                        <label class="form-label">Método de pago *</label>
                        <select name="metodo_pago" class="form-control" required>
                            <option value="efectivo">Efectivo</option>
                            <option value="tarjeta">Tarjeta</option>
                            <option value="transferencia">Transferencia</option>
                        </select>
                    </div>
                    @if ($config->sri_activo)
                        <div>
                            <label class="form-label" style="display:flex; align-items:center; gap:8px;">
                                <input type="checkbox" name="emitir_electronico" value="1" checked style="width:auto;">
                                Emitir electrónicamente ante el SRI al confirmar
                            </label>
                        </div>
                    @else
                        <div class="cell-muted" style="font-size:12.5px;">
                            La facturación electrónica no está activada todavía. Puedes activarla en
                            <a href="{{ route('configuracion.index') }}">Configuración → SRI</a>.
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <button type="submit" class="btn btn-primary" style="width:100%; height:48px; font-size:15px;" id="btnCobrar" disabled>
            <i class="fa-solid fa-cash-register"></i> Cobrar venta
        </button>
    </form>
</div>

<style>
    .pos-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; max-height:520px; overflow-y:auto; }
    .pos-item { border:1px solid #e4e9ee; border-radius:10px; padding:10px; cursor:pointer; transition:.15s; background:#fff; }
    .pos-item:hover { border-color:#0d9488; box-shadow:0 2px 10px rgba(13,148,136,.12); }
    .pos-item .nombre { font-weight:600; font-size:13px; margin-bottom:4px; }
    .pos-item .precio { color:#0d9488; font-weight:700; font-size:13.5px; }
    .pos-item .meta { font-size:11px; color:#9aa8af; }
</style>
@endsection

@push('scripts')
<script>
(() => {
    const IVA_DEFAULT = {{ (float) ($config->igv ?? 15) }};
    const carrito = []; // {tipo,item_id,codigo,descripcion,cantidad,precio_unitario,porcentaje_iva,stock}
    const buscador = document.getElementById('buscador');
    const resultados = document.getElementById('resultados');
    const carritoBody = document.getElementById('carritoBody');
    const btnCobrar = document.getElementById('btnCobrar');
    const money = n => '$' + (Math.round((n + Number.EPSILON) * 100) / 100).toFixed(2);

    async function buscar(q) {
        const res = await fetch(`{{ route('pos.buscarItems') }}?q=${encodeURIComponent(q)}`);
        const data = await res.json();
        const items = [...data.repuestos, ...data.servicios];
        resultados.innerHTML = items.length ? items.map((it, i) => `
            <div class="pos-item" data-i="${i}">
                <div class="nombre">${it.descripcion}</div>
                <div class="precio">${money(it.precio)}</div>
                <div class="meta">${it.tipo === 'repuesto' ? 'Stock: ' + it.stock : 'Servicio'}</div>
            </div>
        `).join('') : '<div class="cell-muted" style="padding:20px;">Sin resultados.</div>';

        resultados.querySelectorAll('.pos-item').forEach(el => {
            el.addEventListener('click', () => agregarAlCarrito(items[el.dataset.i]));
        });
    }

    function agregarAlCarrito(it) {
        const existente = carrito.find(c => c.tipo === it.tipo && c.item_id === it.item_id);
        if (existente) {
            existente.cantidad += 1;
        } else {
            carrito.push({
                tipo: it.tipo, item_id: it.item_id, codigo: it.codigo, descripcion: it.descripcion,
                cantidad: 1, precio_unitario: it.precio, descuento: 0,
                porcentaje_iva: IVA_DEFAULT, stock: it.stock,
            });
        }
        render();
    }

    function render() {
        if (!carrito.length) {
            carritoBody.innerHTML = '<tr id="carritoVacio"><td colspan="5" class="cell-muted" style="text-align:center; padding:24px;">El carrito está vacío.</td></tr>';
            btnCobrar.disabled = true;
        } else {
            carritoBody.innerHTML = carrito.map((c, i) => `
                <tr>
                    <td>${c.descripcion}<div class="cell-muted" style="font-size:11px;">IVA ${c.porcentaje_iva}%</div></td>
                    <td><input type="number" min="0.001" step="0.001" value="${c.cantidad}" data-i="${i}" data-f="cantidad" class="form-control cant-input" style="padding:6px;"></td>
                    <td>${money(c.precio_unitario)}</td>
                    <td class="cell-strong">${money((c.cantidad * c.precio_unitario) - c.descuento)}</td>
                    <td><button type="button" class="ico-btn ico-danger btn-quitar" data-i="${i}"><i class="fa-solid fa-trash"></i></button></td>
                </tr>
            `).join('');
            btnCobrar.disabled = false;

            carritoBody.querySelectorAll('.cant-input').forEach(inp => {
                inp.addEventListener('change', () => {
                    carrito[inp.dataset.i].cantidad = parseFloat(inp.value) || 1;
                    render();
                });
            });
            carritoBody.querySelectorAll('.btn-quitar').forEach(btn => {
                btn.addEventListener('click', () => { carrito.splice(btn.dataset.i, 1); render(); });
            });
        }

        let sub0 = 0, sub15 = 0, iva = 0;
        carrito.forEach(c => {
            const base = (c.cantidad * c.precio_unitario) - c.descuento;
            const ivaItem = base * c.porcentaje_iva / 100;
            if (c.porcentaje_iva > 0) { sub15 += base; } else { sub0 += base; }
            iva += ivaItem;
        });
        document.getElementById('tSub0').textContent = money(sub0);
        document.getElementById('tSub15').textContent = money(sub15);
        document.getElementById('tIva').textContent = money(iva);
        document.getElementById('tTotal').textContent = money(sub0 + sub15 + iva);
    }

    let temporizador;
    buscador.addEventListener('input', () => {
        clearTimeout(temporizador);
        temporizador = setTimeout(() => buscar(buscador.value.trim()), 250);
    });
    buscar(''); // catálogo inicial

    document.getElementById('formVenta').addEventListener('submit', (e) => {
        if (!carrito.length) { e.preventDefault(); return; }
        carrito.forEach((c, i) => {
            ['tipo','item_id','codigo','descripcion','cantidad','precio_unitario','descuento','porcentaje_iva'].forEach(campo => {
                const input = document.createElement('input');
                input.type = 'hidden';
                input.name = `items[${i}][${campo}]`;
                input.value = c[campo] ?? '';
                e.target.appendChild(input);
            });
        });
    });
})();
</script>
@endpush