@extends('layouts.app')

@section('styles')
<link rel="stylesheet" href="{{asset('ventas/estilos.css')}}">
<link rel="stylesheet" href="{{asset('plugins/slim-select/slimselect.min.css')}}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<style>
    /* --- ESTILOS MODERNOS POS --- */
    :root {
        --primary-color: #4e73df;
        --secondary-color: #858796;
        --success-color: #1cc88a;
        --danger-color: #e74a3b;
        --bg-light: #f8f9fc;
    }

    body {
        background-color: var(--bg-light);
        font-family: 'Nunito', sans-serif;
        /* O la fuente que uses */
    }

    /* Tarjetas de Productos */
    .product-card {
        border: none;
        border-radius: 15px;
        transition: all 0.3s ease;
        background: white;
        overflow: hidden;
        height: 100%;
        position: relative;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

    .product-img-container {
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        padding: 10px;
    }

    .product-img-container img {
        max-height: 100%;
        width: auto !important;
        object-fit: contain;
    }

    .product-price-badge {
        position: absolute;
        top: 10px;
        right: 10px;
        background: var(--primary-color);
        color: white;
        font-weight: bold;
        padding: 5px 10px;
        border-radius: 20px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    /* Tabla de Venta */
    .table-pos {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
    }

    .table-pos thead th {
        background-color: #f1f3f9;
        color: #5a5c69;
        border: none;
        text-transform: uppercase;
        font-size: 0.85rem;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .table-pos tbody td {
        vertical-align: middle !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Inputs Personalizados en Tabla */
    .input-pos {
        border: 1px solid #e3e6f0;
        border-radius: 20px !important;
        background-color: #f8f9fc;
        font-weight: 600;
        color: #444;
    }

    .input-pos:focus {
        background-color: #fff;
        border-color: var(--primary-color);
        box-shadow: none;
    }

    /* Panel Totales */
    .total-panel {
        background: white;
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
    }

    .display-total {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--primary-color);
    }

    /* Scrollbar bonito */
    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: #f1f1f1;
    }

    ::-webkit-scrollbar-thumb {
        background: #c1c1c1;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: #a8a8a8;
    }
</style>
@endsection

@section('content')
<div class="container-fluid mt-3">
    <div class="row">

        <div class="col-md-7">
            <div class="card shadow-none border-0 bg-transparent">
                <div class="card-header bg-white border-0 rounded-lg shadow-sm mb-3 py-3">
                    <div class="input-group input-group-lg">
                        <div class="input-group-prepend">
                            <span class="input-group-text bg-white border-0 text-primary"><i class="fas fa-search"></i></span>
                        </div>
                        <input type="text" id="producto" class="form-control border-0 bg-light rounded-pill px-4" placeholder="Escanear código o buscar producto (F8 para Cobrar)..." autofocus>
                    </div>
                </div>

                <div class="card-body p-0">
                    <div class="row" id="result" style="max-height: 75vh; overflow-y: auto; padding-right: 5px;">
                        <div class="col-12 text-center mt-5 text-muted opacity-50">
                            <i class="fas fa-barcode fa-4x mb-3"></i>
                            <h4>Use el buscador para comenzar</h4>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-5">

            <form action="{{ route('venta.store') }}" method="POST" id="form_venta" onsubmit="return validarVenta()">
                @csrf

                <input type="hidden" name="tipo" value="CONTADO" id="input_tipo_venta">

                <div class="card shadow border-0" style="height: 85vh; display: flex; flex-direction: column;">

                    <div class="card-header bg-white border-bottom py-3">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h5 class="m-0 font-weight-bold text-primary"><i class="fas fa-shopping-cart mr-2"></i>Venta</h5>

                            <div class="form-group">
                                <label for=""></label>
                                <select class="form-control" name="user_id" id="user_id">

                                    <!-- usuario por defecto -->

                                    <!-- <option value="{{auth()->user()->id}}" selected>{{auth()->user()->name}}</option>
                                    @foreach ($users as $user)
                                    @if ($user->id != auth()->user()->id)
                                    <option value="{{$user->id}}">{{$user->name}}</option>
                                    @endif
                                    @endforeach -->

                                    <!-- usuario por defecto nombre Caja 1 -->

                                    @foreach ($users as $user)
                                    @if (strpos($user->name, 'Caja 1') !== false)
                                    <option value="{{$user->id}}" selected>{{ $user->name }}</option>
                                    @else
                                    <option value="{{$user->id}}">{{$user->name}}</option>
                                    @endif
                                    @endforeach

                                </select>
                            </div>




                            <span class="badge badge-light text-muted">{{ date('d/m/Y') }}</span>
                        </div>

                        <div class="form-group mb-0">
                            <label class="small font-weight-bold text-muted mb-1">Cliente</label>
                            <div class="input-group">
                                <select name="cliente_id" id="cliente_id" class="form-control">
                                    <option value="" data-placeholder="true">Usar datos manuales (Nombre/NIT)</option>

                                    <option value="0" class="text-primary font-weight-bold">+ CREAR NUEVO CLIENTE</option>

                                    <option value="14" selected>Consumidor Final</option>

                                    @foreach($clientes as $c)
                                    @if ($c->id != 14)
                                    <option value="{{ $c->id }}">{{ $c->nombre }} {{ $c->apellido ?? '' }} / {{ $c->nit }} / {{$c->onbservacion}}</option>
                                    @endif
                                    @endforeach
                                </select>
                                <div class="input-group-append">
                                    <button class="btn btn-outline-primary" type="button" onclick="abrirModalNuevoCliente()">
                                        <i class="fas fa-user-plus"></i>
                                    </button>
                                </div>
                            </div>

                            <small id="aviso_cliente_nuevo" class="text-success font-weight-bold mt-1" style="display:none;">
                                <i class="fas fa-check-circle"></i> Se creará un cliente nuevo con los datos ingresados.
                            </small>
                        </div>
                    </div>

                    <div class="card-body p-0 table-responsive" style="flex: 1; overflow-y: auto;">
                        <table class="table table-pos w-100 mb-0">
                            <thead class="sticky-top bg-light" style="z-index: 1;">
                                <tr>
                                    <th width="5%"></th>
                                    <th width="30%">Producto</th>
                                    <th width="20%">Precio</th>
                                    <th width="15%">Cant.</th>
                                    <th width="15%">Desc. U.</th>
                                    <th width="15%" class="text-right">Total</th>
                                </tr>
                            </thead>
                            <tbody id="tabla_venta"></tbody>
                        </table>
                        <div id="empty-cart-msg" class="text-center mt-5 text-muted" style="display: none;">
                            <i class="fas fa-shopping-basket fa-3x mb-3 opacity-50"></i>
                            <p>Carrito vacío</p>
                        </div>
                    </div>

                    <div class="card-footer bg-white border-top shadow-sm" style="z-index: 2;">

                        <div class="row">
                            <div class="col-12 mb-2">
                                <div id="total" class="text-right"></div>
                            </div>
                        </div>

                        <div class="d-flex justify-content-between align-items-end mb-2" id="contenedor_pago_simple">
                            <div class="flex-grow-1 mr-3">
                                <label class="small font-weight-bold text-muted mb-1">Método de Pago Principal</label>
                                <div class="input-group">
                                    <select name="tipo" id="tipo_pago" class="form-control bg-light font-weight-bold" onchange="cambiarTipoPago()">
                                        <option value="EFECTIVO" selected>Efectivo</option>
                                        <option value="TARJETA">Tarjeta / POS</option>
                                        <option value="TRANSFERENCIA">Transferencia</option>
                                        <option value="CHEQUE">Cheque</option>
                                        <option value="CREDITO" class="text-danger">CRÉDITO</option>
                                    </select>
                                    <div class="input-group-append">
                                        <button type="button" class="btn btn-dark" onclick="abrirModalPagoMixto()" title="Usar varios métodos de pago">
                                            <i class="fas fa-layer-group"></i> Combinado
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="mb-2">
                                <div class="custom-control custom-checkbox">
                                    <input type="checkbox" class="custom-control-input" id="check_cotizacion" name="is_cititation" value="1" onchange="toggleCotizacion()">
                                    <label class="custom-control-label text-primary font-weight-bold" for="check_cotizacion">Cotización</label>
                                </div>
                            </div>
                        </div>

                        <div class="row bg-light rounded p-2 mx-1 mb-2 align-items-center" id="bloque_pagos">
                            <div class="col-6">
                                <label class="small font-weight-bold text-muted">Desc. Global (%)</label>
                                <input type="number" name="total_descuento_global" id="descuento" class="form-control border-0 shadow-sm" placeholder="0%">
                            </div>
                            <div class="col-6">
                                <label class="small font-weight-bold text-muted" id="label_pago">Paga con (Q)</label>
                                <input type="number" id="cancela" class="form-control border-0 shadow-sm font-weight-bold text-success" style="font-size: 1.2em;">
                            </div>
                        </div>

                        <div id="info_pago_mixto" class="alert alert-info py-1 px-2 mb-2" style="display: none; font-size: 0.85rem;">
                            <div class="d-flex justify-content-between align-items-center">
                                <span><i class="fas fa-layer-group mr-1"></i> <b>Pago Combinado Activo</b></span>
                                <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="cancelarPagoMixto()">Cancelar</button>
                            </div>
                            <div id="resumen_pagos_mixtos" class="mt-1 small"></div>
                        </div>

                        <div class="d-flex justify-content-between align-items-center px-2">
                            <div id="cambio" class="font-weight-bold"></div>

                            <input type="hidden" name="pagos_mixtos_data" id="pagos_mixtos_data">
                            <input type="hidden" name="es_pago_mixto" id="es_pago_mixto" value="0">

                            <button type="submit" id="bt_submit" class="btn btn-primary btn-lg rounded-pill shadow px-5">
                                <i class="fas fa-check-circle mr-2"></i> COBRAR
                            </button>
                        </div>
                    </div>

                </div>
                <div class="modal fade" id="modalCliente" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content border-0 shadow-lg">
                            <div class="modal-header bg-primary text-white">
                                <h5 class="modal-title">Datos de Facturación / Nuevo Cliente</h5>
                                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                            </div>
                            <div class="modal-body">
                                <div class="alert alert-info small">
                                    Llene esto <b>SOLO</b> si el cliente no está en la lista. Se guardará automáticamente al cobrar.
                                </div>

                                <div class="form-group">
                                    <label>Nombre Completo / Razón Social</label>
                                    <input type="text" class="form-control" name="nombre" id="input_nombre">
                                </div>
                                <div class="form-group">
                                    <label>NIT / CI</label>
                                    <input type="text" class="form-control" name="nit" id="input_nit">
                                </div>
                                <div class="form-group">
                                    <label>Dirección</label>
                                    <input type="text" class="form-control" name="direccion" id="input_direccion" value="CIUDAD">
                                </div>


                                <div class="form-group">
                                    <label>Observacion</label>
                                    <input type="text" class="form-control" name="observacion" id="input_observacion">
                                </div>


                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>

                                <button type="button" class="btn btn-success" onclick="confirmarDatosManuales()">
                                    <i class="fas fa-check"></i> Listo, usar estos datos
                                </button>
                            </div>
                        </div>
                    </div>
                </div>



                <div class="modal fade" id="modalInfoProducto" tabindex="-1" role="dialog" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content border-0 shadow-lg">
                            <div class="modal-header bg-info text-white">
                                <h5 class="modal-title font-weight-bold" id="info_nombre">Nombre del Producto</h5>
                                <button type="button" class="close text-white" data-dismiss="modal"><span>&times;</span></button>
                            </div>
                            <div class="modal-body text-center">

                                <div class="row">
                                    <div class="col-6">
                                        <img id="info_img" src="" class="img-fluid rounded shadow-sm mb-3" style="max-height: 200px;">
                                    </div>
                                    <div class="col-6">
                                        <img id="info_img2" src="" class="img-fluid rounded shadow-sm mb-3" style="max-height: 200px;">
                                    </div>
                                </div>

                                <h3 class="text-primary font-weight-bold mb-2" id="info_precio"></h3>

                                <div class="bg-light p-3 rounded text-left border mb-2">
                                    <label class="font-weight-bold text-muted small">DESCRIPCIÓN:</label>
                                    <p id="info_descripcion" class="text-dark mb-0" style="white-space: pre-wrap;"></p>
                                </div>

                                <div class="alert alert-warning text-left p-2 mb-3" id="info_descripcion_interna" style="display:none; font-size: 0.9em;">
                                </div>

                                <hr>

                                <div class="row text-left bg-white">
                                    <div class="col-6 border-right">
                                        <small class="text-muted font-weight-bold text-uppercase">Información</small>
                                        <div class="mt-1">
                                            <div class="small text-muted">Código: <span id="info_codigo" class="text-dark font-weight-bold"></span></div>
                                            <div class="small text-muted">Stock: <span id="info_stock" class="text-success font-weight-bold"></span></div>

                                            <div id="info_fabricante" class="small text-dark mt-2 border-top pt-1"></div>
                                        </div>
                                    </div>
                                    <div class="col-6">
                                        <small class="text-muted font-weight-bold text-uppercase">Detalles</small>
                                        <div class="mt-1">
                                            <div id="info_medida" class="small"></div>
                                            <div id="info_unidad" class="small"></div>
                                            <div id="info_ubicacion" class="badge badge-info mt-1 p-1" style="white-space: normal;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="modal-footer justify-content-center">
                                <button type="button" class="btn btn-secondary px-4" data-dismiss="modal">Cerrar</button>
                            </div>
                        </div>
                    </div>
                </div>


                <!-- Modal de Pagos -->

                <div class="modal fade" id="modalPagos" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static">
                    <div class="modal-dialog modal-dialog-centered" role="document">
                        <div class="modal-content">
                            <div class="modal-header bg-dark text-white">
                                <h5 class="modal-title"><i class="fas fa-coins mr-2"></i>Pago Combinado</h5>
                                <button type="button" class="close text-white" onclick="cerrarModalPagos()"><span>&times;</span></button>
                            </div>
                            <div class="modal-body bg-light">

                                <h2 class="text-center font-weight-bold mb-3 text-primary" id="monto_pendiente_display"></h2>

                                <div class="card shadow-sm mb-3">
                                    <div class="card-body p-2">
                                        <div class="form-row">
                                            <div class="col-5">
                                                <select id="mix_metodo" class="form-control form-control-sm font-weight-bold">
                                                    <option value="EFECTIVO">Efectivo</option>
                                                    <option value="TARJETA">Tarjeta</option>
                                                    <option value="TRANSFERENCIA">Transferencia</option>
                                                    <option value="CHEQUE">Cheque</option>
                                                    <option value="CREDITO">Crédito</option>
                                                </select>
                                            </div>
                                            <div class="col-4">
                                                <input type="number" id="mix_monto" class="form-control form-control-sm" placeholder="Monto">
                                            </div>
                                            <div class="col-3">
                                                <button type="button" class="btn btn-success btn-sm btn-block" onclick="agregarPagoMixto()">
                                                    <i class="fas fa-plus"></i>
                                                </button>
                                            </div>
                                        </div>
                                        <div class="mt-2">
                                            <input type="text" id="mix_referencia" class="form-control form-control-sm" placeholder="Ref: Voucher / Cheque (Opcional)">
                                        </div>
                                    </div>
                                </div>

                                <div class="table-responsive bg-white rounded shadow-sm" style="max-height: 200px; overflow-y: auto;">
                                    <table class="table table-sm table-borderless mb-0">
                                        <thead class="bg-secondary text-white">
                                            <tr>
                                                <th>Método</th>
                                                <th>Ref.</th>
                                                <th class="text-right">Monto</th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody id="lista_pagos_mixtos"></tbody>
                                    </table>
                                </div>

                            </div>
                            <div class="modal-footer justify-content-between">
                                <div>
                                    <small>Total Cubierto:</small>
                                    <h5 class="font-weight-bold text-success" id="total_cubierto_display">Q 0.00</h5>
                                </div>
                                <button type="button" class="btn btn-primary" id="btn_confirmar_mixto" onclick="confirmarPagoMixto()" disabled>
                                    <i class="fas fa-check"></i> Confirmar Pagos
                                </button>
                            </div>
                        </div>
                    </div>
                </div>


            </form>
        </div>

    </div>
</div>
@endsection

@section('scripts')
<script src="{{asset('plugins/slim-select/slimselect.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    // --- 1. CONFIGURACIÓN INICIAL ---
    const currencyFormatter = new Intl.NumberFormat('es-GT', {
        style: 'currency',
        currency: 'GTQ'
    });


    // pagos mixtos

    let arrayPagos = [];
    let totalVentaGlobal = 0; // Se actualiza en renderizarTabla()

    // 1. ABRIR MODAL
    function abrirModalPagoMixto() {
        // Calcular el total real actual (con descuentos)
        calcularTotalGlobal();

        if (totalVentaGlobal <= 0) {
            Swal.fire('Error', 'No hay total que cobrar', 'warning');
            return;
        }

        arrayPagos = []; // Reseteamos
        actualizarTablaPagosMixtos();

        // Sugerir el total restante automáticamente
        document.getElementById('mix_monto').value = totalVentaGlobal.toFixed(2);

        $('#modalPagos').modal('show');
    }

    // 2. AGREGAR PAGO AL ARRAY
    function agregarPagoMixto() {
        let metodo = document.getElementById('mix_metodo').value;
        let monto = parseFloat(document.getElementById('mix_monto').value) || 0;
        let ref = document.getElementById('mix_referencia').value;

        if (monto <= 0) return;

        // Verificar que no se pase del total (opcional, pero recomendado)
        let totalAcumulado = arrayPagos.reduce((sum, p) => sum + p.monto, 0);
        let restante = totalVentaGlobal - totalAcumulado;

        if (monto > (restante + 0.01)) { // +0.01 margen error decimales
            // Si es efectivo permitimos que se pase para calcular cambio
            if (metodo !== 'EFECTIVO') {
                Swal.fire('Atención', 'El monto excede lo pendiente de pago', 'warning');
                return;
            }
        }

        arrayPagos.push({
            metodo: metodo,
            monto: monto,
            referencia: ref
        });

        // Limpiar inputs
        document.getElementById('mix_monto').value = '';
        document.getElementById('mix_referencia').value = '';
        document.getElementById('mix_metodo').focus();

        actualizarTablaPagosMixtos();
    }

    // 3. RENDERIZAR TABLA MODAL
    function actualizarTablaPagosMixtos() {
        let tbody = document.getElementById('lista_pagos_mixtos');
        tbody.innerHTML = '';
        let totalCubierto = 0;

        arrayPagos.forEach((pago, index) => {
            totalCubierto += pago.monto;
            let row = `
            <tr>
                <td>${pago.metodo}</td>
                <td><small class="text-muted">${pago.referencia}</small></td>
                <td class="text-right font-weight-bold">Q ${pago.monto.toFixed(2)}</td>
                <td class="text-right">
                    <button type="button" class="btn btn-xs btn-outline-danger border-0" onclick="eliminarPagoMixto(${index})">&times;</button>
                </td>
            </tr>
        `;
            tbody.insertAdjacentHTML('beforeend', row);
        });

        // Actualizar visuales
        document.getElementById('total_cubierto_display').innerText = currencyFormatter.format(totalCubierto);

        let pendiente = totalVentaGlobal - totalCubierto;
        if (pendiente < 0) pendiente = 0; // Si hay cambio en efectivo

        document.getElementById('monto_pendiente_display').innerHTML = `
        <small class="d-block text-muted" style="font-size: 12px">Pendiente</small>
        Q ${pendiente.toFixed(2)}
    `;

        // Sugerir monto restante en el input
        if (pendiente > 0) {
            document.getElementById('mix_monto').value = pendiente.toFixed(2);
        }

        // Habilitar botón confirmar si ya cubrimos el total
        let btn = document.getElementById('btn_confirmar_mixto');
        if (totalCubierto >= (totalVentaGlobal - 0.05)) { // Margen de error decimal
            btn.disabled = false;
            btn.classList.remove('btn-secondary');
            btn.classList.add('btn-success');
        } else {
            btn.disabled = true;
            btn.classList.add('btn-secondary');
            btn.classList.remove('btn-success');
        }
    }

    function eliminarPagoMixto(index) {
        arrayPagos.splice(index, 1);
        actualizarTablaPagosMixtos();
    }

    // 4. CONFIRMAR Y LLEVAR A LA VISTA PRINCIPAL
    function confirmarPagoMixto() {
        // Ocultar controles simples
        document.getElementById('contenedor_pago_simple').style.display = 'none';
        document.getElementById('bloque_pagos').style.display = 'none';
        document.getElementById('tipo_pago').disabled = true; // Para que no se envíe el select normal

        // Mostrar alerta de pago mixto activo
        document.getElementById('info_pago_mixto').style.display = 'block';

        // Generar resumen texto
        let resumen = arrayPagos.map(p => `${p.metodo}: Q${p.monto}`).join(' + ');
        document.getElementById('resumen_pagos_mixtos').innerText = resumen;

        // Setear inputs hidden para el backend
        document.getElementById('es_pago_mixto').value = '1';
        document.getElementById('pagos_mixtos_data').value = JSON.stringify(arrayPagos);

        // Calcular cambio si hubo efectivo y sobró dinero
        let totalCubierto = arrayPagos.reduce((sum, p) => sum + p.monto, 0);
        let cambio = totalCubierto - totalVentaGlobal;

        let divCambio = document.getElementById('cambio');
        if (cambio > 0) {
            divCambio.innerHTML = `<small class="text-success font-weight-bold">CAMBIO:</small> <span class="h4 text-success font-weight-bold">${currencyFormatter.format(cambio)}</span>`;
        } else {
            divCambio.innerHTML = '<span class="badge badge-success">PAGADO COMPLETAMENTE</span>';
        }

        $('#modalPagos').modal('hide');
    }

    function cancelarPagoMixto() {
        // Restaurar vista normal
        document.getElementById('contenedor_pago_simple').style.display = 'flex';
        document.getElementById('bloque_pagos').style.display = 'flex';
        document.getElementById('tipo_pago').disabled = false;
        document.getElementById('info_pago_mixto').style.display = 'none';
        document.getElementById('cambio').innerHTML = '';

        // Resetear valores hidden
        document.getElementById('es_pago_mixto').value = '0';
        document.getElementById('pagos_mixtos_data').value = '';
        arrayPagos = [];
    }

    function cerrarModalPagos() {
        $('#modalPagos').modal('hide');
    }

    // Helper para obtener el total global actualizado
    function calcularTotalGlobal() {
        // Reutiliza tu logica de calcular total de la funcion renderizarTabla
        // Lo ideal es que renderizarTabla guarde el total neto en una variable global "totalVentaGlobal"
        let totalBruto = listaVentas.reduce((acc, item) => acc + ((item.precio - item.descuento) * item.cantidad), 0);
        let desc = parseFloat(document.getElementById('descuento').value) || 0;
        let montoDescuento = totalBruto * (desc / 100);
        totalVentaGlobal = totalBruto - montoDescuento;
    }

    // fin pagos mixtos
    /* DATOS DE CLIENTE */
    // Inicializar SlimSelect en el selector de clientes
    let clientePrevio = '14'; // Guardamos el ID 14 por defecto al inicio
    const selectCliente = new SlimSelect({
        select: '#cliente_id',
        placeholder: 'Busque un cliente...',
        searchText: 'No se encuentra',
    });


    // 2. Evento al cambiar la selección
    document.getElementById('cliente_id').addEventListener('change', function() {
        let valor = this.value;

        // Si selecciona "Crear Nuevo Cliente" (Value 0)
        if (valor === '0') {
            abrirModalNuevoCliente();
        }
        // Si selecciona un cliente normal (ID real)
        else if (valor !== '') {
            // Guardamos este ID como el "último válido" por si luego cancela el modal
            clientePrevio = valor;
            limpiarDatosManuales(); // Borramos inputs manuales ocultos
        }
    });

    // Función auxiliar para abrir modal
    function abrirModalNuevoCliente() {
        $('#modalCliente').modal('show');
    }

    // --- ACCIONES DENTRO DEL MODAL ---

    // A. Si el usuario da click en "Listo / Guardar" en el modal
    function confirmarDatosManuales() {
        let nombre = document.getElementById('input_nombre').value;
        let nit = document.getElementById('input_nit').value;

        if (nombre.trim() === '') {
            Swal.fire('Atención', 'Debe escribir al menos el nombre del cliente', 'warning');
            return;
        }

        // 1. Limpiamos el SlimSelect (valor vacío) para que el backend sepa que es nuevo
        selectCliente.set('');

        // 2. Mostramos aviso visual
        document.getElementById('aviso_cliente_nuevo').style.display = 'block';

        // 3. Cerramos modal
        $('#modalCliente').modal('hide');
    }

    // B. Si el usuario cierra el modal o da click en Cancelar
    $('#modalCliente').on('hidden.bs.modal', function() {
        // Verificamos si realmente escribió datos
        let nombre = document.getElementById('input_nombre').value;

        // Si NO hay nombre escrito (o sea, canceló), regresamos al cliente anterior
        if (nombre.trim() === '') {
            selectCliente.set(clientePrevio); // Regresa a Consumidor Final o el que estaba antes
            limpiarDatosManuales();
        }
    });

    function limpiarDatosManuales() {
        document.getElementById('input_nombre').value = '';
        document.getElementById('input_nit').value = '';
        document.getElementById('input_direccion').value = 'CIUDAD';
        document.getElementById('input_observacion').value = '';
        document.getElementById('aviso_cliente_nuevo').style.display = 'none';
    }

    /* fin de datos de cliente */


    let listaVentas = [];
    let debounceTimer;

    const dom = {
        inputBuscar: document.querySelector('#producto'),
        resultados: document.querySelector('#result'),
        tablaVenta: $('#tabla_venta'),
        totalLabel: document.querySelector('#total'),
        inputPago: document.querySelector('#cancela'),
        labelCambio: document.querySelector('#cambio'),
        inputDescuentoGlobal: document.querySelector('#descuento')
    };

    // --- 2. EVENTOS ---
    document.addEventListener('keyup', event => {
        if (event.keyCode === 119) {
            document.getElementById("bt_submit").click();
        }
    });

    dom.inputBuscar.addEventListener('keyup', (e) => {
        clearTimeout(debounceTimer);
        if (e.keyCode === 13) {
            buscarProductos(dom.inputBuscar.value);
            return;
        }
        debounceTimer = setTimeout(() => {
            if (dom.inputBuscar.value.length >= 3) {
                buscarProductos(dom.inputBuscar.value);
            } else {
                dom.resultados.innerHTML = '';
            }
        }, 500);
    });

    dom.inputPago.addEventListener('input', calcularCambio);
    dom.inputDescuentoGlobal.addEventListener('input', renderizarTabla);

    // --- LOGICA MODAL CLIENTE (Opcional: Simulación de guardado rápido) ---
    // Si quieres que guarde en BD via Ajax, tendrías que hacer la llamada $.ajax aqui.
    // Por ahora, solo simula cerrar el modal.
    $('#form_nuevo_cliente').on('submit', function(e) {
        e.preventDefault();
        // AQUI TU AJAX PARA GUARDAR CLIENTE...
        // success: function(nuevoCliente) {
        //    agregar option al select y seleccionarlo
        //    selectCliente.setData(...)
        //    $('#modalCliente').modal('hide');
        // }
        alert("Aquí debes implementar tu lógica AJAX para guardar el cliente");
        $('#modalCliente').modal('hide');
    });

    // --- 3. FUNCIONES DE VENTA ---

    function buscarProductos(termino) {
        let route = "{{ route('venta.findArticle') }}";
        $.ajax({
            type: "GET",
            url: route,
            data: {
                codigo: termino
            },
            dataType: "JSON",
            success: function(resp) {
                let productosValidos = resp.filter(producto => !producto.deleted_at);
                const coincidenciaExacta = productosValidos.find(p => p.cod_barras == termino || p.codigo == termino);

                if (coincidenciaExacta) {
                    prepararAgregado(coincidenciaExacta);
                    limpiarBuscador();
                    return;
                }
                if (productosValidos.length === 1) {
                    prepararAgregado(productosValidos[0]);
                    limpiarBuscador();
                    return;
                }

                renderizarResultados(productosValidos);
            }
        });
    }

    function limpiarBuscador() {
        dom.inputBuscar.value = '';
        dom.resultados.innerHTML = '';
        dom.inputBuscar.focus();
    }

    async function prepararAgregado(producto) {
        agregarAlCarrito(producto, 1);
    }

    function agregarAlCarrito(producto, cantidad) {
        if (cantidad > parseFloat(producto.stock)) {
            Swal.fire({
                icon: 'error',
                title: 'Oops...',
                text: `Stock insuficiente. Solo hay ${producto.stock}`
            });
            return;
        }
        const existeIndex = listaVentas.findIndex(p => p.id === producto.id);
        if (existeIndex !== -1) {
            listaVentas[existeIndex].cantidad += cantidad;
        } else {
            listaVentas.push({
                id: producto.id,
                nombre: producto.nombre,
                precio: parseFloat(producto.p_venta),
                cantidad: cantidad,
                descuento: 0,
                precioMayorista: producto.precio1,
                precioFinal: producto.precio2,
                stock: producto.stock
            });
        }
        renderizarTabla();
    }

    function eliminarFila(index) {
        listaVentas.splice(index, 1);
        renderizarTabla();
    }

    function renderizarTabla() {
        dom.tablaVenta.empty();
        let totalBruto = 0;

        // Ocultar/mostrar mensaje carrito vacío
        if (listaVentas.length === 0) $('#empty-cart-msg').show();
        else $('#empty-cart-msg').hide();

        listaVentas.forEach((item, index) => {
            let descuentoUnitario = parseFloat(item.descuento || 0);
            let precioFinalUnitario = parseFloat(item.precio) - descuentoUnitario;
            let totalFila = precioFinalUnitario * item.cantidad;

            item.subtotal = totalFila;
            totalBruto += totalFila;

            let fila = `
            <tr id="fila${index}" class="animate__animated animate__fadeInLeft faster">
                <td class="text-center">
                    <button type="button" class="btn btn-outline-danger btn-sm rounded-circle border-0" onclick="eliminarFila(${index})"><i class="fas fa-times"></i></button>
                </td>
                <td>
                    <input type="hidden" name="articulo_id[]" value="${item.id}">
                    <div class="d-flex flex-column">
                        <span class="font-weight-bold text-dark text-truncate" style="max-width: 150px;">${item.nombre}</span>
                        <small class="text-muted" style="font-size: 0.7rem;">Precio Mayorista: Q${parseFloat(item.precioMayorista ?? 0).toFixed(2)}</small>
                        <small class="text-muted" style="font-size: 0.7rem;">Precio Final: Q${parseFloat(item.precioFinal ?? 0).toFixed(2)}</small>
                    </div>
                </td>
                <td>
                    <div class="input-group input-group-sm">
                         <div class="input-group-prepend"><span class="input-group-text bg-white border-0 px-1">Q</span></div>
                        <input type="number" class="form-control border-0 text-right font-weight-bold text-primary px-0"
                            name="precioventa[]" value="${parseFloat(item.precio).toFixed(2)}" step="0.01"
                            onchange="actualizarFila(${index}, 'precio', this.value)">
                    </div>
                </td>
                <td>
                    <input type="number" class="form-control form-control-sm text-center input-pos shadow-sm"
                           name="cantidad[]" value="${item.cantidad}" min="1"
                           onchange="actualizarFila(${index}, 'cantidad', this.value)">
                </td>
                <td>
                     <div class="input-group input-group-sm">
                         <div class="input-group-prepend"><span class="input-group-text bg-white border-0 px-0 text-danger">-Q</span></div>
                         <input type="number" class="form-control border-0 text-danger text-right px-0 font-weight-bold"
                            name="descuento_unitario[]" value="${descuentoUnitario}" min="0" step="0.5"
                            onchange="actualizarFila(${index}, 'descuento', this.value)">
                    </div>
                </td>
                <td class="text-right">
                    <input type="hidden" name="subtotal[]" value="${totalFila}">
                    <h6 class="font-weight-bold text-dark m-0">Q. ${parseFloat(totalFila).toFixed(2)}</h6>
                </td>
            </tr>`;
            dom.tablaVenta.prepend(fila);
        });

        // Totales
        let porcentajeDescuento = parseFloat(dom.inputDescuentoGlobal.value) || 0;
        let montoDescuentoGlobal = totalBruto * (porcentajeDescuento / 100);
        let totalNeto = totalBruto - montoDescuentoGlobal;

        dom.totalLabel.innerHTML = `
        <input type="hidden" name="total_venta" value="${totalNeto}">
        <div class="d-flex justify-content-between align-items-center mb-1"><span class="text-muted small">Subtotal</span><span class="font-weight-bold">Q. ${totalBruto.toFixed(2)}</span></div>
        ${montoDescuentoGlobal > 0 ? `<div class="d-flex justify-content-between text-danger mb-2"><span class="small">Desc. Global (${porcentajeDescuento}%)</span><span>- Q. ${montoDescuentoGlobal.toFixed(2)}</span></div>` : ''}
        <div class="d-flex justify-content-between pt-2 border-top"><span class="h4 font-weight-bold text-dark">TOTAL</span><span class="display-total h3 text-primary">Q. ${totalNeto.toFixed(2)}</span></div>
        `;


        totalVentaGlobal = totalNeto;


        // Si hay pago mixto activo, recálculo el cambio visual por si el total cambió al agregar productos
        if (document.getElementById('es_pago_mixto').value == '1') {
            confirmarPagoMixto(); // Refresca cálculos
        }

        calcularCambio();
    }

    function actualizarFila(index, tipo, valor) {
        valor = parseFloat(valor) || 0;

        if (tipo === 'cantidad') {
            if (valor < 1) valor = 1;
            if (parseFloat(listaVentas[index].stock) > 0 && valor > parseFloat(listaVentas[index].stock)) {
                Swal.fire('Stock', `Máximo: ${listaVentas[index].stock}`, 'warning');
                valor = parseFloat(listaVentas[index].stock);
            }
            listaVentas[index].cantidad = valor;
        }

        if (tipo === 'precio') {
            let min = parseFloat(listaVentas[index].precioFinal) || 0;
            if (valor < min) {
                Swal.fire('Error', `Precio mínimo: Q. ${min.toFixed(2)}`, 'warning');
                valor = min;
            }
            listaVentas[index].precio = valor;
            if (listaVentas[index].descuento >= valor) listaVentas[index].descuento = 0;
        }

        if (tipo === 'descuento') {
            if (valor < 0) valor = 0;
            if (valor >= parseFloat(listaVentas[index].precio)) {
                Swal.fire('Error', 'Descuento excede precio', 'warning');
                valor = 0;
            }
            listaVentas[index].descuento = valor;
        }
        renderizarTabla();
    }

    function renderizarResultados(productos) {
        const contenedorResultados = document.querySelector('#result');
        contenedorResultados.innerHTML = '';

        if (productos.length === 0) {
            contenedorResultados.innerHTML = '<div class="col-12 text-center mt-5 text-muted"><h5><i class="fas fa-search-minus"></i> No encontrado</h5></div>';
            return;
        }

        let htmlGenerado = '';

        productos.forEach(data => {
            let imagen = data.img ? "{{ asset('storage/articulos') }}/" + data.img : data.img2;
            // Escapamos comillas para evitar errores en el HTML
            let dataJson = JSON.stringify(data).replace(/"/g, '&quot;');
            let precio = parseFloat(data.p_venta || 0).toFixed(2);

            htmlGenerado += `
            <div class="col-xl-3 col-lg-4 col-md-6 mb-3 px-2">

                <div class="card product-card shadow-sm h-100" onclick="prepararAgregado(${dataJson})">

                    <button class="btn btn-info btn-sm rounded-circle shadow position-absolute"
                            style="top: 10px; left: 10px; z-index: 10; width: 35px; height: 35px; padding: 0;"
                            title="Ver detalles"
                            onclick="verInfoProducto(event, ${dataJson})">
                        <i class="fas fa-eye"></i>
                    </button>

                    <span class="product-price-badge">Q. ${precio}</span>

                    <div class="product-img-container">
                         <img src="${imagen}" alt="${data.nombre}">
                    </div>

                    <div class="card-body p-2 text-center d-flex flex-column justify-content-between">
                        <div>
                            <h6 class="font-weight-bold text-dark mb-1 small text-truncate">${data.nombre}</h6>
                            <small class="text-muted d-block text-truncate" style="font-size: 0.75rem;">${data.descripcion || 'Sin descripción'}</small>
                        </div>
                        <div class="mt-2 pt-2 border-top">
                            <span class="badge badge-light border">Stock: ${data.stock}</span>
                        </div>
                    </div>
                </div>
            </div>`;
        });

        contenedorResultados.innerHTML = htmlGenerado;
    }

    // --- FUNCIÓN PARA VER DETALLES (SIN AGREGAR AL CARRITO) ---
    function verInfoProducto(event, data) {
        event.stopPropagation(); // Evita agregar al carrito

        // 1. Datos Básicos
        if (document.getElementById('info_nombre')) document.getElementById('info_nombre').innerText = data.nombre;
        if (document.getElementById('info_precio')) document.getElementById('info_precio').innerText = 'Q. ' + parseFloat(data.p_venta).toFixed(2);
        if (document.getElementById('info_descripcion')) document.getElementById('info_descripcion').innerText = data.descripcion || 'Sin descripción';

        if (document.getElementById('info_stock')) document.getElementById('info_stock').innerText = data.stock;
        if (document.getElementById('info_codigo')) document.getElementById('info_codigo').innerText = data.codigo || data.cod_barras || 'N/A';

        let imgUrl = data.img ? data.img : 'https://via.placeholder.com/150';

        let img2Url = data.img2 ? data.img2 : null;
        if (img2Url && document.getElementById('info_img2')) {
            document.getElementById('info_img2').src = img2Url;
            document.getElementById('info_img2').style.display = 'block';
        }

        if (document.getElementById('info_img')) document.getElementById('info_img').src = imgUrl;


        // 2. Descripción Interna (CON VALIDACIÓN PARA EVITAR ERROR 'STYLE OF NULL')
        let elDescInterna = document.getElementById('info_descripcion_interna');
        if (elDescInterna) {
            if (data.descripcion_interna) {
                elDescInterna.innerText = 'Nota Interna: ' + data.descripcion_interna;
                elDescInterna.style.display = 'block';
            } else {
                elDescInterna.style.display = 'none';
            }
        }

        // 3. Extras (Validando que existan los elementos en el HTML)
        if (document.getElementById('info_fabricante'))
            document.getElementById('info_fabricante').innerText = 'Fabricante: ' + (data.fabricante || 'N/A');

        if (document.getElementById('info_medida'))
            document.getElementById('info_medida').innerText = 'Medida: ' + (data.medida || 'N/A');

        if (document.getElementById('info_unidad'))
            document.getElementById('info_unidad').innerText = 'Unidad: ' + (data.unidad || 'N/A');

        if (document.getElementById('info_ubicacion'))
            document.getElementById('info_ubicacion').innerText = 'Ubicación: ' + (data.ubicacion || 'N/A');

        // Mostrar Modal
        $('#modalInfoProducto').modal('show');
    }

    function calcularCambio() {
        // ... (Tu misma logica de antes)
        let totalActual = listaVentas.reduce((acc, item) => acc + ((item.precio - item.descuento) * item.cantidad), 0);
        let desc = parseFloat(dom.inputDescuentoGlobal.value) || 0;
        if (desc > 0) totalActual = totalActual - (totalActual * (desc / 100));

        let efectivo = parseFloat(dom.inputPago.value) || 0;
        let cambio = efectivo - totalActual;

        dom.labelCambio.innerHTML = (cambio < 0) ?
            '<span class="badge badge-warning text-white">Faltante</span>' :
            `<small class="text-success font-weight-bold">CAMBIO:</small> <span class="h4 text-success font-weight-bold">${currencyFormatter.format(cambio)}</span>`;
    }

    // Función visual para saber si escribió algo en el modal
    function verificarDatosManuales() {
        let nombre = document.getElementById('input_nombre').value;
        let nit = document.getElementById('input_nit').value;

        if (nombre.length > 0 || nit.length > 0) {
            // Limpiamos el select para evitar conflictos (tu backend prioriza el select si existe)
            // Opcional: selectCliente.set(null);
            document.getElementById('aviso_cliente_nuevo').style.display = 'block';
        } else {
            document.getElementById('aviso_cliente_nuevo').style.display = 'none';
        }
    }

    function validarVenta() {
        // 1. Validar carrito
        if (listaVentas.length === 0) {
            Swal.fire('Carrito vacío', 'Agrega productos antes de cobrar', 'warning');
            return false;
        }

        // 2. Validar Cliente (Lógica de tu Backend)
        let clienteId = $('#cliente_id').val();
        let nombreManual = $('#input_nombre').val().trim();
        let nitManual = $('#input_nit').val().trim();

        // Si NO hay ID seleccionado Y (NO hay nombre O NO hay nit) -> ERROR
        if (!clienteId && (nombreManual === '' || nitManual === '')) {
            Swal.fire({
                icon: 'error',
                title: 'Faltan datos de Cliente',
                text: 'Debe seleccionar un cliente de la lista O ingresar Nombre y NIT manualmente en el botón (+).'
            });
            return false; // Detiene el envío
        }

        // 3. Validación de Pago (Opcional, pero recomendada)
        let totalPagar = listaVentas.reduce((acc, item) => acc + item.subtotal, 0);
        // Descuento global
        let desc = parseFloat(dom.inputDescuentoGlobal.value) || 0;
        if (desc > 0) totalPagar = totalPagar - (totalPagar * (desc / 100));

        // Si quieres validar que el pago cubra el total (si es contado)
        /* let pago = parseFloat(dom.inputPago.value) || 0;
        if(pago < totalPagar) {
             Swal.fire('Pago Insuficiente', 'El monto recibido es menor al total', 'warning');
             return false;
        }
        */

        return true; // Todo correcto, permite el submit
    }


    // --- LÓGICA DE VENTAS ESPECIALES ---

    function cambiarTipoPago() {
        const tipo = document.getElementById('tipo_pago').value;
        const inputPago = document.getElementById('cancela');
        const labelPago = document.getElementById('label_pago');
        const divCambio = document.getElementById('cambio');

        if (tipo === 'CREDITO') {
            // Lógica para CRÉDITO
            inputPago.disabled = true;
            inputPago.value = '';
            inputPago.placeholder = 'Al Crédito';
            inputPago.classList.remove('text-success');
            inputPago.classList.add('text-muted');
            labelPago.innerHTML = 'Monto a Crédito';

            divCambio.innerHTML = '<span class="badge badge-danger p-2">PENDIENTE DE PAGO</span>';
        } else {
            // Lógica para EFECTIVO, TARJETA, ETC
            inputPago.disabled = false;
            inputPago.placeholder = '';
            inputPago.classList.add('text-success');
            inputPago.classList.remove('text-muted');
            labelPago.innerHTML = 'Paga con (Q)';

            // Recalcular el cambio si ya habían números puestos
            calcularCambio();
        }
    }

    // Actualizamos toggleCotizacion para que bloquee el selector también
    function toggleCotizacion() {
        const isCotizacion = document.getElementById('check_cotizacion').checked;
        const btnSubmit = document.getElementById('bt_submit');
        const selectTipo = document.getElementById('tipo_pago');

        if (isCotizacion) {
            btnSubmit.innerHTML = '<i class="fas fa-save mr-2"></i> GUARDAR COTIZACIÓN';
            btnSubmit.classList.remove('btn-primary');
            btnSubmit.classList.add('btn-info');

            // Deshabilitar pagos
            selectTipo.disabled = true;
            document.getElementById('cancela').disabled = true;
            document.getElementById('cambio').innerHTML = '';
        } else {
            btnSubmit.innerHTML = '<i class="fas fa-check-circle mr-2"></i> COBRAR';
            btnSubmit.classList.add('btn-primary');
            btnSubmit.classList.remove('btn-info');

            selectTipo.disabled = false;
            // Restaurar estado según lo que esté seleccionado en el combo
            cambiarTipoPago();
        }
    }
</script>
@endsection