@extends('layouts.app')
@section('title', 'Registrar Venta')

@section('content')
<div class="container pb-5">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h3 class="fw-bold m-0 text-primary"><i class="bi bi-cart-plus"></i> Registrar Venta</h3>
        <a href="{{ route('ventas.index') }}" class="btn btn-outline-secondary rounded-pill shadow-sm">
            <i class="bi bi-arrow-left"></i> Volver
        </a>
    </div>

    <div class="card shadow-sm border-0 rounded-4">
        <div class="card-body p-4">
            <form action="{{ route('ventas.store') }}" method="POST" onsubmit="return validarFormulario('crear')">
                @csrf
                <!-- Cabecera Maestro -->
                <div class="row g-2 mb-3">
                    <div class="col-12 col-md-4 form-floating">
                        <input type="date" class="form-control" name="fecha" value="{{ date('Y-m-d') }}" required>
                        <label>Fecha</label>
                    </div>
                    <div class="col-12 col-md-8">
                        <label class="small text-muted mb-1">Buscar Cliente (RUC, CI o Denominación)</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="buscar_cliente" list="lista_clientes" placeholder="Tipee para buscar..." autocomplete="off">
                            <datalist id="lista_clientes">
                                @foreach($clientes as $cli)
                                    <option data-id="{{ $cli->idcliente }}" value="{{ $cli->ruc_ci }} | {{ $cli->denominacion }}"></option>
                                @endforeach
                            </datalist>
                            <!-- ID real que se enviará al procesar la venta -->
                            <input type="hidden" name="cliente" id="id_cliente" required>
                            <button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#modalCrearClienteRapido">
                                <i class="bi bi-person-plus"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Zona de Agregar Artículos -->
                <div class="p-3 bg-light border rounded-3 mb-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <h6 class="fw-bold m-0 text-primary">Detalles de Venta</h6>
                        <button type="button" class="btn btn-sm btn-outline-dark" onclick="iniciarEscaner()">
                            <i class="bi bi-upc-scan"></i> Escanear
                        </button>
                    </div>
                    
                    <!-- Contenedor de la cámara (oculto por defecto) -->
                    <div id="reader" style="width:100%; display:none; margin-bottom: 10px;"></div>

                    <div class="form-floating mb-2">
                        <select class="form-select" id="crear_articulo" onchange="cargarPrecio(this)">
                            <option value="">Seleccione artículo...</option>
                            @foreach($articulos as $art)
                                <option value="{{ $art->idarticulo }}" data-codigo="{{ $art->codigo }}" data-precio="{{ $art->precio }}" data-costo="{{ $art->costo }}">{{ $art->nombre }} (St: {{ $art->stock }})</option>
                            @endforeach
                        </select>
                        <label>Seleccionar Artículo</label>
                    </div>
                    <div class="row g-2 mb-2">
                        <div class="col-4 form-floating">
                            <input type="number" class="form-control" id="crear_cantidad" value="1" min="1">
                            <label>Cant.</label>
                        </div>
                        <div class="col-8 form-floating">
                            <input type="number" class="form-control" id="crear_precio" placeholder="0">
                            <label>Precio Unit.</label>
                        </div>
                    </div>
                    <input type="hidden" id="crear_costo" value="0">
                    <input type="hidden" id="crear_nombre_art" value="">
                    
                    <button type="button" class="btn btn-secondary w-100" onclick="agregarArticulo()">
                        <i class="bi bi-plus-circle"></i> Agregar a la lista
                    </button>
                </div>
                
                <!-- Tabla de Artículos Agregados -->
                <div class="table-responsive mb-2">
                    <table class="table table-sm align-middle table-striped border">
                        <thead class="table-light">
                            <tr>
                                <th>Art.</th>
                                <th class="text-center">Cant</th>
                                <th class="text-end">Subt</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="crear_tbody">
                            <!-- JS inyecta filas aquí -->
                        </tbody>
                    </table>
                </div>

                <div class="d-flex justify-content-between align-items-center mb-3 bg-white p-2 rounded border">
                    <span class="text-muted fw-bold">TOTAL Gs.</span>
                    <h5 class="fw-bold m-0 text-success" id="crear_total_lbl">0</h5>
                </div>

                <div class="form-floating mb-4">
                    <textarea class="form-control" name="observacion" placeholder="..." style="height: 60px"></textarea>
                    <label>Observación (Opcional)</label>
                </div>

                <button type="submit" class="btn btn-primary w-100 rounded-pill py-3 fw-bold">
                    <i class="bi bi-check2-circle"></i> Procesar Venta
                </button>
            </form>
        </div>
    </div>
</div>

<!-- Modal CREAR Cliente Rápido -->
<div class="modal fade" id="modalCrearClienteRapido" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4 border-0 shadow">
            <div class="modal-header bg-primary text-white rounded-top-4">
                <h1 class="modal-title fs-5"><i class="bi bi-person-plus"></i> Nuevo Cliente</h1>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-4">
                <form id="formClienteRapido">
                    @csrf
                    <div class="form-floating mb-2">
                        <input type="text" class="form-control" id="cli_denominacion" required maxlength="60">
                        <label>Denominación / Nombre</label>
                    </div>
                    <div class="form-floating mb-2">
                        <input type="text" class="form-control" id="cli_ruc_ci" maxlength="15">
                        <label>RUC / CI</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer border-0 pb-4 pe-4">
                <button type="button" class="btn btn-light rounded-pill px-4" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary rounded-pill px-4" onclick="guardarClienteAJAX()">Guardar</button>
            </div>
        </div>
    </div>
</div>

<!-- 1. IMPORTAR LIBRERÍA (Estrictamente fuera de tu etiqueta script principal) -->
<script src="https://unpkg.com/html5-qrcode"></script>

<!-- 2. LÓGICA DE LA VISTA -->
<script>
    // Validación en tiempo real del datalist y llamada al modal si no existe
    document.getElementById('buscar_cliente').addEventListener('change', function() {
        let inputVal = this.value;
        let options = document.getElementById('lista_clientes').options;
        let idInput = document.getElementById('id_cliente');
        
        let encontrado = false;
        for (let i = 0; i < options.length; i++) {
            if (options[i].value === inputVal) {
                idInput.value = options[i].getAttribute('data-id');
                encontrado = true;
                break;
            }
        }
        
        if (!encontrado && inputVal.trim() !== "") {
            idInput.value = "";
            if(confirm("Cliente no encontrado. ¿Desea registrarlo ahora?")) {
                document.getElementById('cli_denominacion').value = inputVal;
                new bootstrap.Modal(document.getElementById('modalCrearClienteRapido')).show();
            }
        }
    });

    // Guardado asíncrono del cliente vía Fetch API
    function guardarClienteAJAX() {
        let denominacion = document.getElementById('cli_denominacion').value;
        let ruc = document.getElementById('cli_ruc_ci').value;
        let token = document.querySelector('input[name="_token"]').value;

        if(!denominacion) { alert("El nombre es obligatorio"); return; }

        fetch("{{ route('clientes.store') }}", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "X-CSRF-TOKEN": token
            },
            body: JSON.stringify({ denominacion: denominacion, ruc_ci: ruc })
        })
        .then(response => response.json())
        .then(data => {
            if(data.success) {
                let nuevoValor = ruc + " | " + denominacion;
                document.getElementById('lista_clientes').insertAdjacentHTML('beforeend', `<option data-id="${data.cliente.idcliente}" value="${nuevoValor}"></option>`);
                
                document.getElementById('buscar_cliente').value = nuevoValor;
                document.getElementById('id_cliente').value = data.cliente.idcliente;
                
                bootstrap.Modal.getInstance(document.getElementById('modalCrearClienteRapido')).hide();
                alert("Cliente guardado y seleccionado.");
            }
        })
        .catch(error => console.error('Error:', error));
    }

    let detalles = [];

    // --- FUNCIONES DEL DETALLE DE VENTA ---
    function cargarPrecio(select) {
        let option = select.options[select.selectedIndex];
        document.getElementById('crear_precio').value = option.getAttribute('data-precio') || 0;
        document.getElementById('crear_costo').value = option.getAttribute('data-costo') || 0;
        document.getElementById('crear_nombre_art').value = option.text;
    }

    function agregarArticulo() {
        let select = document.getElementById('crear_articulo');
        let idart = select.value;
        let nombreCompleto = document.getElementById('crear_nombre_art').value;
        let cant = parseInt(document.getElementById('crear_cantidad').value);
        let precio = parseInt(document.getElementById('crear_precio').value);
        let costo = parseInt(document.getElementById('crear_costo').value);

        if (!idart || isNaN(cant) || cant <= 0 || isNaN(precio)) {
            alert("Seleccione un artículo e ingrese valores válidos.");
            return;
        }

        let nombreLimpio = nombreCompleto.split(' (St')[0];

        detalles.push({
            idarticulo: idart,
            nombre: nombreLimpio,
            cantidad: cant,
            precio: precio,
            costo: costo,
            subtotal: cant * precio
        });

        actualizarTabla('crear');

        // Limpieza de campos tras agregar
        select.value = '';
        document.getElementById('crear_cantidad').value = '1';
        document.getElementById('crear_precio').value = '';
        document.getElementById('crear_costo').value = '';
        document.getElementById('crear_nombre_art').value = '';
    }

    function actualizarTabla(prefix) {
        let tbody = document.getElementById(prefix + '_tbody');
        let lblTotal = document.getElementById(prefix + '_total_lbl');
        
        tbody.innerHTML = '';
        let total = 0;

        detalles.forEach((det, index) => {
            total += det.subtotal;
            let tr = `
                <tr>
                    <td class="small text-truncate" style="max-width: 120px;">
                        ${det.nombre}
                        <input type="hidden" name="idarticulo[]" value="${det.idarticulo}">
                        <input type="hidden" name="cantidad[]" value="${det.cantidad}">
                        <input type="hidden" name="precio[]" value="${det.precio}">
                        <input type="hidden" name="costo[]" value="${det.costo}">
                    </td>
                    <td class="text-center">${det.cantidad}</td>
                    <td class="text-end">${det.subtotal.toLocaleString('es-PY')}</td>
                    <td class="text-center">
                        <button type="button" class="btn btn-sm text-danger p-0" onclick="eliminarArticulo(${index}, '${prefix}')">
                            <i class="bi bi-x-circle fs-5"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.insertAdjacentHTML('beforeend', tr);
        });

        lblTotal.innerText = total.toLocaleString('es-PY');
    }

    function eliminarArticulo(index, prefix) {
        detalles.splice(index, 1);
        actualizarTabla(prefix);
    }

    function validarFormulario(prefix) {
        if (detalles.length === 0) {
            alert("Debe agregar al menos un artículo a la lista.");
            return false;
        }
        return true;
    }

    // --- FUNCIONES DEL ESCÁNER ---
    let html5QrcodeScanner;

    function iniciarEscaner() {
        const readerDiv = document.getElementById('reader');
        readerDiv.style.display = 'block';

        if (!html5QrcodeScanner) {
            html5QrcodeScanner = new Html5QrcodeScanner("reader", { fps: 10, qrbox: {width: 250, height: 150} }, false);
        }

        html5QrcodeScanner.render((textoEscaneado) => {
            // Detener el escáner al encontrar un código
            html5QrcodeScanner.clear();
            readerDiv.style.display = 'none';

            // Buscar el artículo en el select por su data-codigo
            let selectArticulo = document.getElementById('crear_articulo');
            let opciones = selectArticulo.options;
            let encontrado = false;

            for (let i = 0; i < opciones.length; i++) {
                if (opciones[i].getAttribute('data-codigo') === textoEscaneado) {
                    selectArticulo.selectedIndex = i;
                    encontrado = true;
                    break;
                }
            }

            if (encontrado) {
                cargarPrecio(selectArticulo); // Cargamos los datos visuales
                document.getElementById('crear_cantidad').value = 1; // Forzamos cantidad a 1
                agregarArticulo(); // Reciclamos tu propia función manual para enviarlo a la tabla
            } else {
                alert("Artículo no encontrado con el código: " + textoEscaneado);
            }
        }, (errorMensaje) => {
            // Se ignora para no saturar la consola
        });
    }
</script>
@endsection