@extends('layouts.app')

@section('title', 'Punto de Venta (POS)')

@section('content')
<style>
    .client-result-item:hover {
        background-color: #f8f9fa !important;
    }
    .client-result-item {
        transition: background-color 0.2s;
    }
    #client_search_results {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }
    #selected_client_display {
        border-left: 3px solid #0d6efd;
    }
    .card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        border: none;
    }
    .card-header {
        font-weight: 600;
    }
    #cart_total_legal_container {
        border-top: 2px dashed #0dcaf0;
        padding-top: 10px;
        margin-top: 10px;
    }
</style>
<div class="container-fluid">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-cash-register text-primary me-2"></i>Punto de Venta (POS)
            </h1>
            <p class="text-muted mb-0">Sistema de venta directa integrado</p>
        </div>
        <div>
            <a href="{{ route('admin.sales.invoices.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver a Facturas
            </a>
        </div>
    </div>

    <div class="row">
        <!-- Panel Izquierdo: Configuración de Venta -->
        <div class="col-lg-3">
            <!-- Configuración de Venta -->
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>Configuración de Venta
                    </h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="invoice_number" class="form-label">Nro. Comprobante</label>
                        <div class="input-group">
                            <span class="input-group-text bg-white text-muted"><i class="fas fa-hashtag"></i></span>
                            <input type="text" class="form-control fw-bold text-primary" id="invoice_number" value="{{ $invoiceNumber ?? '' }}" placeholder="Automático">
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="client_search" class="form-label">Cliente <span class="text-danger">*</span></label>
                        <div class="position-relative">
                            <div class="input-group">
                                <input type="text" 
                                       class="form-control" 
                                       id="client_search" 
                                       placeholder="Buscar cliente por nombre, RUC, teléfono..."
                                       autocomplete="off"
                                       required>
                                <button class="btn btn-outline-secondary" type="button" id="btn_clear_client" style="display: none;">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                            <input type="hidden" id="client_id" name="client_id" required>
                            <div id="client_search_results" class="position-absolute w-100 bg-white border rounded shadow-lg mt-1" 
                                 style="display: none; z-index: 1000; max-height: 300px; overflow-y: auto;">
                                <!-- Los resultados se mostrarán aquí -->
                            </div>
                        </div>
                        <div id="selected_client_display" class="mt-2 p-2 bg-light rounded" style="display: none;">
                            <small class="text-muted">Cliente seleccionado:</small>
                            <div class="fw-bold" id="selected_client_name"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="currency" class="form-label">Moneda <span class="text-danger">*</span></label>
                            <select class="form-select" id="currency" required>
                                @foreach($currencies as $curr)
                                    <option value="{{ $curr }}" {{ $curr == 'USD' ? 'selected' : '' }}>{{ $curr }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-6 mb-3">
                            <label for="document_type" class="form-label">Tipo de Documento <span class="text-danger">*</span></label>
                            <select class="form-select" id="document_type" required>
                                <option value="invoice">Factura</option>
                                <option value="note">Nota</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="salesman_id" class="form-label">Vendedor</label>
                        <select class="form-select" id="salesman_id">
                            <option value="">Seleccionar vendedor</option>
                            @foreach($salesmen as $salesman)
                                <option value="{{ $salesman->id }}">{{ $salesman->name ?? ($salesman->first_name . ' ' . $salesman->last_name) }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label for="exchange_rate" class="form-label">Tasa de Cambio</label>
                        <input type="number" step="0.0001" class="form-control" id="exchange_rate" 
                               value="{{ isset($exchangeRate->rate_real) ? $exchangeRate->rate_real : ($exchangeRate->rate ?? 1) }}" required>
                        <input type="hidden" id="exchange_rate_real" value="{{ isset($exchangeRate->rate_real) ? $exchangeRate->rate_real : ($exchangeRate->rate ?? 1) }}">
                        <input type="hidden" id="exchange_rate_legal" value="{{ isset($exchangeRate->rate_legal) ? $exchangeRate->rate_legal : '' }}">
                        <div id="exchange_rate_display" class="mt-2"></div>
                        <small class="text-muted">Tasa de cambio actual (se actualiza automáticamente)</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel Central: Búsqueda y Carrito de Compras -->
        <div class="col-lg-6">
            <!-- Búsqueda de Productos -->
            <div class="card mb-4">
                <div class="card-header bg-success text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-search me-2"></i>Buscar Productos
                    </h5>
                </div>
                <div class="card-body">
                    <div class="input-group mb-3">
                        <input type="text" class="form-control" id="product_search" 
                               placeholder="Buscar por código, nombre, SKU o código de barras...">
                        <button class="btn btn-primary" type="button" id="btn_search" title="Buscar productos">
                            <i class="fas fa-search"></i>
                        </button>
                        <button class="btn btn-secondary" type="button" id="btn_show_product_list" title="Ver lista de productos">
                            <i class="fas fa-list"></i>
                        </button>
                    </div>
                    <div id="product_results" style="max-height: 300px; overflow-y: auto;">
                        <p class="text-muted text-center">Busque productos para agregarlos al carrito</p>
                    </div>
                </div>
            </div>
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-shopping-cart me-2"></i>Carrito de Compras
                    </h5>
                </div>
                <div class="card-body">
                    <div id="cart_items" style="max-height: 500px; overflow-y: auto;">
                        <p class="text-muted text-center">El carrito está vacío</p>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <strong>Subtotal:</strong>
                        </div>
                        <div class="col-md-6 text-end">
                            <div>
                                <strong class="text-primary">$<span id="cart_subtotal_usd">0.00</span> USD</strong>
                            </div>
                            <div id="cart_subtotal_local_container" style="display: none;">
                                <small class="text-muted"><span id="cart_subtotal_local">0.00</span> <span id="cart_currency_local">VES</span></small>
                            </div>
                        </div>
                    </div>
                    <div id="cart_taxes_container">
                        <!-- Los impuestos se mostrarán aquí dinámicamente -->
                    </div>
                    <div class="row" id="cart_total_tax_row" style="display: none;">
                        <div class="col-md-6">
                            <strong>Total Impuestos:</strong>
                        </div>
                        <div class="col-md-6 text-end">
                            <div>
                                <strong class="text-primary">$<span id="cart_tax_usd">0.00</span> USD</strong>
                            </div>
                            <div id="cart_tax_local_container" style="display: none;">
                                <small class="text-muted"><span id="cart_tax_local">0.00</span> <span id="cart_currency_local2">VES</span></small>
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <strong>Retención:</strong>
                        </div>
                        <div class="col-md-6 text-end">
                            <div>
                                <strong class="text-primary">$<span id="cart_retention_usd">0.00</span> USD</strong>
                            </div>
                            <div id="cart_retention_local_container" style="display: none;">
                                <small class="text-muted"><span id="cart_retention_local">0.00</span> <span id="cart_currency_local3">VES</span></small>
                            </div>
                        </div>
                    </div>
                    <hr>
                    <div class="row">
                        <div class="col-md-6">
                            <h5><strong>Total:</strong></h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <div>
                                <h5><strong class="text-success">$<span id="cart_total_usd">0.00</span> USD</strong></h5>
                            </div>
                            <div id="cart_total_local_container" style="display: none;">
                                <h6><strong class="text-muted"><span id="cart_total_local">0.00</span> <span id="cart_currency_local4">VES</span></strong></h6>
                            </div>
                        </div>
                    </div>
                    <div id="cart_total_legal_container" class="row mt-2" style="display: none;">
                        <div class="col-md-6">
                            <strong class="text-info">Total Legal (a cobrar):</strong>
                        </div>
                        <div class="col-md-6 text-end">
                            <div>
                                <strong class="text-info">$<span id="cart_total_legal">0.00</span> USD</strong>
                            </div>
                            <small class="text-muted">Monto calculado con tasa legal</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panel Derecho: Información -->
        <div class="col-lg-3">
            <div class="card mb-4">
                <div class="card-header bg-info text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Información
                    </h5>
                </div>
                <div class="card-body">
                    <small class="text-muted">
                        <ul class="mb-0 ps-3">
                            <li>La venta se procesará inmediatamente</li>
                            <li>El inventario se descontará automáticamente</li>
                            <li>Se registrará en banco y contabilidad</li>
                            <li>Se generará la factura/nota correspondiente</li>
                        </ul>
                    </small>
                    <hr>
                    <div class="d-grid gap-2">
                        <button type="button" class="btn btn-success btn-lg" id="btn_process_sale">
                            <i class="fas fa-check-circle me-2"></i>Procesar Venta
                        </button>
                        <button type="button" class="btn btn-secondary" id="btn_clear_cart">
                            <i class="fas fa-trash me-2"></i>Limpiar Carrito
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Configuración de Producto -->
<div class="modal fade" id="productConfigModal" tabindex="-1" aria-labelledby="productConfigModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title" id="productConfigModalLabel">
                    <i class="fas fa-cog me-2"></i>Configurar Producto
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <h6 id="modal_product_name" class="text-primary"></h6>
                    <small class="text-muted" id="modal_product_stock"></small>
                </div>
                
                <div class="mb-3">
                    <label for="modal_unit_type" class="form-label">Tipo de Unidad <span class="text-danger">*</span></label>
                    <select class="form-select" id="modal_unit_type" required>
                        <option value="">Seleccionar unidad...</option>
                        <option value="1">Pestaña 1 (Unidad)</option>
                        <option value="2">Pestaña 2 (Caja)</option>
                        <option value="3">Pestaña 3 (Bulto)</option>
                    </select>
                    <small class="text-muted">Seleccione la unidad de venta del producto</small>
                </div>
                
                <div class="mb-3">
                    <label for="modal_price_level" class="form-label">Nivel de Precio <span class="text-danger">*</span></label>
                    <select class="form-select" id="modal_price_level" required disabled>
                        <option value="">Primero seleccione el tipo de unidad</option>
                    </select>
                    <small class="text-muted">Seleccione el nivel de precio</small>
                </div>
                
                <div class="mb-3">
                    <label for="modal_tax_id" class="form-label">Impuesto</label>
                    <select class="form-select" id="modal_tax_id">
                        <option value="">Sin impuesto</option>
                        @foreach($taxes as $tax)
                            <option value="{{ $tax->id }}" data-percentage="{{ $tax->percentage }}" data-name="{{ $tax->name }}">
                                {{ $tax->name }} ({{ number_format($tax->percentage, 2) }}%)
                            </option>
                        @endforeach
                    </select>
                    <small class="text-muted">Seleccione el impuesto a aplicar (se usará el del producto por defecto si existe)</small>
                </div>
                
                <div id="modal_product_info" class="alert alert-info" style="display: none;">
                    <div id="modal_unit_info"></div>
                    <div id="modal_price_info" class="mt-2"></div>
                    <div id="modal_tax_info" class="mt-2"></div>
                    <div id="modal_price_with_tax_info" class="mt-2"></div>
                    <div id="modal_stock_info" class="mt-2"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" id="btn_add_product_to_cart" disabled>
                    <i class="fas fa-plus"></i> Agregar al Carrito
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de Confirmación -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmar Venta</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>¿Está seguro de procesar esta venta?</p>
                <div id="sale_summary"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="btn_confirm_sale">Confirmar</button>
            </div>
        </div>
    </div>
</div>

<script>
let cart = [];
let currentCurrency = 'USD';
let currentExchangeRate = {{ isset($exchangeRate->rate_real) ? $exchangeRate->rate_real : ($exchangeRate->rate ?? 1) }};

document.addEventListener('DOMContentLoaded', function() {
    // Event listeners para búsqueda de productos
    const btnSearch = document.getElementById('btn_search');
    if (btnSearch) {
        btnSearch.addEventListener('click', searchProducts);
    }
    
    const btnShowProductList = document.getElementById('btn_show_product_list');
    if (btnShowProductList) {
        btnShowProductList.addEventListener('click', function() {
            // Abrir ventana emergente con la lista de productos
            const productListUrl = `{{ route('admin.sales.pos.product-list-view') }}`;
            const productListWindow = window.open(
                productListUrl,
                'productListWindow',
                'width=1200,height=800,menubar=no,toolbar=no,location=no,status=no,scrollbars=yes,resizable=yes'
            );
            
            if (productListWindow) {
                productListWindow.focus();
            } else {
                alert('Por favor, permite las ventanas emergentes para este sitio y vuelve a intentar.');
            }
        });
    }
    
    const productSearchInput = document.getElementById('product_search');
    if (productSearchInput) {
        productSearchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                searchProducts();
            }
        });
    }
    
    // Escuchar mensajes de la ventana emergente para seleccionar productos
    window.addEventListener('message', function(event) {
        // Verificar que el mensaje viene de nuestra ventana de productos
        if (event.data && event.data.type === 'SELECT_PRODUCT') {
            const product = event.data.product;
            // Cerrar la ventana emergente si está abierta
            if (event.source) {
                event.source.close();
            }
            // Abrir el modal de configuración de producto
            openProductConfigModal(product.id, product.name, product.stock || 0, product.track_stock || false);
        }
    });
    const currencySelect = document.getElementById('currency');
    if (currencySelect) {
        currencySelect.addEventListener('change', function() {
            if (typeof updateExchangeRate === 'function') {
                updateExchangeRate();
            }
            if (typeof calculateTotals === 'function') {
                calculateTotals();
            }
            if (typeof updateCartDisplay === 'function') {
                updateCartDisplay();
            }
        });
    }
    
    // Recalcular cuando cambie el tipo de documento (factura/nota)
    const documentTypeSelect = document.getElementById('document_type');
    if (documentTypeSelect) {
        documentTypeSelect.addEventListener('change', function() {
            const isNote = (this.value === 'note');
            
            // Actualizar retención en modal si está abierto
            const modalRetentionField = document.getElementById('modal_retention_percentage');
            if (modalRetentionField) {
                if (isNote) {
                    modalRetentionField.value = 0;
                }
            }
            
            if (typeof calculateTotals === 'function') {
                calculateTotals();
            }
        });
    }
    // Event listener para retención en modal
    const modalRetention = document.getElementById('modal_retention_percentage');
    if (modalRetention) {
        modalRetention.addEventListener('input', calculateTotals);
    }
    
    // ========== BÚSQUEDA DE CLIENTES ==========
    let clientSearchTimeout;
    const clientSearchInput = document.getElementById('client_search');
    const clientIdInput = document.getElementById('client_id');
    const clientSearchResults = document.getElementById('client_search_results');
    const selectedClientDisplay = document.getElementById('selected_client_display');
    const selectedClientName = document.getElementById('selected_client_name');
    const btnClearClient = document.getElementById('btn_clear_client');
    
    if (!clientSearchInput || !clientIdInput || !clientSearchResults || !selectedClientDisplay || !selectedClientName || !btnClearClient) {
        console.warn('Algunos elementos de búsqueda de clientes no se encontraron');
    }
    
    if (clientSearchInput) {
        clientSearchInput.addEventListener('input', function() {
            const query = this.value.trim();
            
            if (query.length < 2) {
                if (clientSearchResults) {
                    clientSearchResults.style.display = 'none';
                }
                return;
            }
            
            clearTimeout(clientSearchTimeout);
            clientSearchTimeout = setTimeout(() => {
                searchClients(query);
            }, 300);
        });
        
        clientSearchInput.addEventListener('focus', function() {
            if (this.value.trim().length >= 2) {
                searchClients(this.value.trim());
            }
        });
    }
    
    // Ocultar resultados al hacer clic fuera
    if (clientSearchInput && clientSearchResults) {
        document.addEventListener('click', function(e) {
            if (!clientSearchInput.contains(e.target) && !clientSearchResults.contains(e.target)) {
                clientSearchResults.style.display = 'none';
            }
        });
    }
    
    if (btnClearClient) {
        btnClearClient.addEventListener('click', function() {
            clearClientSelection();
        });
    }
    
    function searchClients(query) {
        // Usar la ruta correcta del módulo gestor (el método espera el parámetro 'q')
        const searchUrl = '{{ route("admin.gestor.clients.search") }}?q=' + encodeURIComponent(query);
        fetch(searchUrl)
            .then(response => response.json())
            .then(clients => {
                if (clients.length === 0) {
                    clientSearchResults.innerHTML = '<div class="p-3 text-muted">No se encontraron clientes</div>';
                    clientSearchResults.style.display = 'block';
                    return;
                }
                
                let html = '';
                clients.forEach(client => {
                    const clientName = client.business_name || client.legal_name || client.code || `Cliente #${client.id}`;
                    const taxId = client.tax_id || 'N/A';
                    const phone = client.phone || 'N/A';
                    
                    html += `
                        <div class="p-2 border-bottom client-result-item" 
                             style="cursor: pointer;"
                             onclick="selectClient(${JSON.stringify(client).replace(/"/g, '&quot;')})"
                             onmouseover="this.style.backgroundColor='#f8f9fa'" 
                             onmouseout="this.style.backgroundColor='white'">
                            <strong>${escapeHtml(clientName)}</strong><br>
                            <small class="text-muted">
                                RUC: ${escapeHtml(taxId)} | Tel: ${escapeHtml(phone)}
                            </small>
                        </div>
                    `;
                });
                
                clientSearchResults.innerHTML = html;
                clientSearchResults.style.display = 'block';
            })
            .catch(error => {
                console.error('Error al buscar clientes:', error);
                clientSearchResults.innerHTML = '<div class="p-3 text-danger">Error al buscar clientes</div>';
                clientSearchResults.style.display = 'block';
            });
    }
    
    function selectClient(client) {
        const clientId = client.id;
        const clientName = client.business_name || client.legal_name || client.code;
        const taxId = client.tax_id || 'N/A';
        const phone = client.phone || 'N/A';

        clientIdInput.value = clientId;
        clientSearchInput.value = clientName;
        clientSearchResults.style.display = 'none';
        selectedClientName.textContent = `${clientName} - RUC: ${taxId} | Tel: ${phone}`;
        selectedClientDisplay.style.display = 'block';
        btnClearClient.style.display = 'block';
    }
    
    function clearClientSelection() {
        clientIdInput.value = '';
        clientSearchInput.value = '';
        selectedClientDisplay.style.display = 'none';
        btnClearClient.style.display = 'none';
        clientSearchResults.style.display = 'none';
    }
    
    // Inicializar campos al cargar
    const btnProcessSale = document.getElementById('btn_process_sale');
    if (btnProcessSale) {
        btnProcessSale.addEventListener('click', openPaymentModal);
    }
    
    const btnConfirmPayment = document.getElementById('btn_confirm_payment');
    if (btnConfirmPayment) {
        btnConfirmPayment.addEventListener('click', processSale);
    }
    
    const btnClearCart = document.getElementById('btn_clear_cart');
    if (btnClearCart) {
        btnClearCart.addEventListener('click', clearCart);
    }
    
    // Event listeners para modal de pago
    const modalPaymentMethod = document.getElementById('modal_payment_method');
    if (modalPaymentMethod) {
        modalPaymentMethod.addEventListener('change', toggleModalPaymentFields);
    }
    
    // Event listener para actualizar saldo de caja chica en modal
    const modalPettyCashSelect = document.getElementById('modal_petty_cash_account_id');
    if (modalPettyCashSelect) {
        modalPettyCashSelect.addEventListener('change', function() {
            updateModalPettyCashBalance(this.value);
        });
    }
    
    
    // Cargar tasa de cambio inicial
    updateExchangeRate();
    
    // Inicializar display de tasa
    if (typeof updateExchangeRateDisplay === 'function') {
        updateExchangeRateDisplay();
    }
});

// Función helper para escapar HTML (debe estar fuera de DOMContentLoaded para ser accesible globalmente)
function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function searchProducts() {
    const search = document.getElementById('product_search').value;
    
    if (!search) {
        alert('Por favor ingrese un término de búsqueda');
        return;
    }
    
    // Buscar productos sin nivel de precio ni tipo de unidad
    fetch(`{{ route('admin.sales.pos.search-products') }}?search=${encodeURIComponent(search)}`)
        .then(response => response.json())
        .then(data => {
            displayProductResults(data);
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al buscar productos');
        });
}

function displayProductResults(products) {
    const container = document.getElementById('product_results');
    
    if (products.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">No se encontraron productos</p>';
        return;
    }
    
    let html = '<div class="list-group">';
    products.forEach(product => {
        html += `
            <div class="list-group-item">
                <div class="d-flex justify-content-between align-items-center">
                    <div class="flex-grow-1">
                        <h6 class="mb-1">${escapeHtml(product.name)}</h6>
                        <small class="text-muted">${escapeHtml(product.code || 'N/A')} | ${escapeHtml(product.category || 'Sin categoría')}</small>
                        ${product.track_stock ? `<br><small class="text-info"><i class="fas fa-box"></i> Stock: ${product.stock || 0} unidades base</small>` : '<br><small class="text-success"><i class="fas fa-infinity"></i> Stock ilimitado</small>'}
                    </div>
                    <div class="text-end ms-3">
                        <button class="btn btn-sm btn-primary" onclick="openProductConfigModal(${product.id}, '${escapeHtml(product.name)}', ${product.stock || 0}, ${product.track_stock ? 'true' : 'false'})">
                            <i class="fas fa-plus"></i> Agregar
                        </button>
                    </div>
                </div>
            </div>
        `;
    });
    html += '</div>';
    container.innerHTML = html;
}

let currentProductConfig = null;

function openProductConfigModal(productId, productName, stock, trackStock) {
    currentProductConfig = {
        product_id: productId,
        name: productName,
        stock: stock,
        track_stock: trackStock
    };
    
    // Verificar que los elementos existan antes de modificarlos
    const modalProductName = document.getElementById('modal_product_name');
    const modalProductStock = document.getElementById('modal_product_stock');
    const modalUnitType = document.getElementById('modal_unit_type');
    const modalPriceLevel = document.getElementById('modal_price_level');
    const btnAddToCart = document.getElementById('btn_add_product_to_cart');
    const modalProductInfo = document.getElementById('modal_product_info');
    const productConfigModal = document.getElementById('productConfigModal');
    
    if (!productConfigModal) {
        console.error('Modal productConfigModal no encontrado');
        alert('Error: No se pudo abrir el modal de configuración');
        return;
    }
    
    if (modalProductName) {
        modalProductName.textContent = productName;
    }
    
    if (modalProductStock) {
        modalProductStock.textContent = trackStock 
            ? `Stock disponible: ${stock} unidades base` 
            : 'Stock ilimitado';
    }
    
    // Resetear formulario
    if (modalUnitType) {
        modalUnitType.value = '';
    }
    
    if (modalPriceLevel) {
        modalPriceLevel.innerHTML = '<option value="">Primero seleccione el tipo de unidad</option>';
        modalPriceLevel.disabled = true;
    }
    
    // Resetear selector de impuesto
    const modalTaxId = document.getElementById('modal_tax_id');
    if (modalTaxId) {
        modalTaxId.value = '';
    }
    
    if (btnAddToCart) {
        btnAddToCart.disabled = true;
    }
    
    if (modalProductInfo) {
        modalProductInfo.style.display = 'none';
    }
    
    // Limpiar información de impuesto en currentProductConfig
    if (currentProductConfig) {
        currentProductConfig.tax_id = null;
        currentProductConfig.tax_percentage = 0;
        currentProductConfig.tax_name = 'Sin Impuesto';
    }
    
    const modal = new bootstrap.Modal(productConfigModal);
    modal.show();
}

// Event listeners para modal de configuración de producto (se ejecuta después del DOMContentLoaded principal)
function initializeProductConfigModal() {
    const modalUnitType = document.getElementById('modal_unit_type');
    const modalPriceLevel = document.getElementById('modal_price_level');
    const btnAddToCart = document.getElementById('btn_add_product_to_cart');
    
    if (modalUnitType) {
        modalUnitType.addEventListener('change', function() {
            const unitType = this.value;
            if (unitType) {
                // Habilitar nivel de precio y cargar opciones
                modalPriceLevel.disabled = false;
                modalPriceLevel.innerHTML = `
                    <option value="">Seleccionar nivel...</option>
                    <option value="1">Básico</option>
                    <option value="2">Intermedio</option>
                    <option value="3">Premium</option>
                `;
                
                // Cargar información del producto con la unidad seleccionada
                loadProductInfo(unitType);
            } else {
                modalPriceLevel.innerHTML = '<option value="">Primero seleccione el tipo de unidad</option>';
                modalPriceLevel.disabled = true;
                btnAddToCart.disabled = true;
                document.getElementById('modal_product_info').style.display = 'none';
            }
        });
    }
    
    if (modalPriceLevel) {
        modalPriceLevel.addEventListener('change', function() {
            if (this.value && modalUnitType.value) {
                loadProductInfo(modalUnitType.value, this.value);
                btnAddToCart.disabled = false;
            } else {
                btnAddToCart.disabled = true;
            }
        });
    }
    
    // Listener para cambio de impuesto
    const modalTaxId = document.getElementById('modal_tax_id');
    if (modalTaxId) {
        modalTaxId.addEventListener('change', function() {
            if (currentProductConfig && currentProductConfig.unit_price) {
                updatePriceWithTax(currentProductConfig.unit_price);
            }
        });
    }
    
    if (btnAddToCart) {
        btnAddToCart.addEventListener('click', function() {
            if (currentProductConfig && modalUnitType.value && modalPriceLevel.value) {
                addProductToCartFromModal();
            }
        });
    }
}

// Inicializar modal de configuración de producto cuando el DOM esté listo
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initializeProductConfigModal);
} else {
    initializeProductConfigModal();
}

function loadProductInfo(unitType, priceLevel = null) {
    if (!currentProductConfig) return;
    
    const unitTypeInt = parseInt(unitType);
    const priceLevelInt = priceLevel ? parseInt(priceLevel) : null;
    
    // Buscar información del producto con la unidad y nivel seleccionados
    fetch(`{{ route('admin.sales.pos.search-products') }}?search=${currentProductConfig.product_id}&price_level=${priceLevelInt || ''}&unit_type=${unitTypeInt}`)
        .then(response => response.json())
        .then(products => {
            if (products.length > 0) {
                const product = products[0];
                const stockInUnit = currentProductConfig.track_stock && product.unit_quantity > 1 
                    ? Math.floor(currentProductConfig.stock / product.unit_quantity) 
                    : currentProductConfig.stock;
                
                document.getElementById('modal_unit_info').innerHTML = `
                    <strong>Unidad:</strong> ${product.unit_name || 'Unidad'} (x${product.unit_quantity || 1} unidades base)
                `;
                
                if (priceLevelInt) {
                    const priceWithoutTax = parseFloat(product.price) || 0;
                    
                    // Establecer impuesto por defecto del producto si existe
                    const modalTaxId = document.getElementById('modal_tax_id');
                    if (product.tax && product.tax.id && modalTaxId) {
                        modalTaxId.value = product.tax.id;
                        currentProductConfig.tax_id = product.tax.id;
                        currentProductConfig.tax_percentage = product.tax.percentage;
                        currentProductConfig.tax_name = product.tax.name;
                    } else {
                        currentProductConfig.tax_id = null;
                        currentProductConfig.tax_percentage = 0;
                        currentProductConfig.tax_name = 'Sin Impuesto';
                    }
                    
                    // Calcular precio con impuesto
                    updatePriceWithTax(priceWithoutTax);
                    
                    document.getElementById('modal_price_info').innerHTML = `
                        <strong>Precio (sin impuesto):</strong> $${priceWithoutTax.toFixed(2)} USD
                    `;
                    document.getElementById('modal_stock_info').innerHTML = currentProductConfig.track_stock
                        ? `<strong>Stock disponible:</strong> ${stockInUnit} ${product.unit_name || 'unidades'} (${currentProductConfig.stock} unidades base)`
                        : '<strong>Stock:</strong> Ilimitado';
                    
                    document.getElementById('modal_product_info').style.display = 'block';
                    
                    // Guardar información del producto para agregar al carrito
                    currentProductConfig.unit_type = unitTypeInt;
                    currentProductConfig.price_level = priceLevelInt;
                    currentProductConfig.unit_price = priceWithoutTax; // Precio SIN impuesto
                    currentProductConfig.unit_quantity = product.unit_quantity || 1;
                    currentProductConfig.unit_name = product.unit_name || 'Unidad';
                    currentProductConfig.stock_in_unit = stockInUnit;
                } else {
                    document.getElementById('modal_price_info').innerHTML = '<em class="text-muted">Seleccione el nivel de precio para ver el precio</em>';
                    document.getElementById('modal_tax_info').innerHTML = '';
                    document.getElementById('modal_price_with_tax_info').innerHTML = '';
                    document.getElementById('modal_stock_info').innerHTML = '';
                    document.getElementById('modal_product_info').style.display = 'block';
                }
            }
        })
        .catch(error => {
            console.error('Error al cargar información del producto:', error);
        });
}

// Función para actualizar precio con impuesto cuando cambia el impuesto seleccionado
function updatePriceWithTax(priceWithoutTax) {
    const modalTaxId = document.getElementById('modal_tax_id');
    const taxInfo = document.getElementById('modal_tax_info');
    const priceWithTaxInfo = document.getElementById('modal_price_with_tax_info');
    
    if (!modalTaxId || !taxInfo || !priceWithTaxInfo) return;
    
    const selectedOption = modalTaxId.options[modalTaxId.selectedIndex];
    let taxPercentage = 0;
    let taxName = 'Sin Impuesto';
    let taxId = null;
    
    if (selectedOption && selectedOption.value) {
        taxId = selectedOption.value;
        taxPercentage = parseFloat(selectedOption.getAttribute('data-percentage')) || 0;
        taxName = selectedOption.getAttribute('data-name') || 'Impuesto';
    }
    
    // Guardar en currentProductConfig
    if (currentProductConfig) {
        currentProductConfig.tax_id = taxId;
        currentProductConfig.tax_percentage = taxPercentage;
        currentProductConfig.tax_name = taxName;
    }
    
    // Mostrar información de impuesto
    if (taxPercentage > 0) {
        const taxAmount = priceWithoutTax * (taxPercentage / 100);
        const priceWithTax = priceWithoutTax + taxAmount;
        
        taxInfo.innerHTML = `
            <strong>Impuesto:</strong> ${taxName} (${taxPercentage.toFixed(2)}%)
        `;
        priceWithTaxInfo.innerHTML = `
            <strong>Precio (con impuesto):</strong> $${priceWithTax.toFixed(2)} USD
            <small class="text-muted">($${priceWithoutTax.toFixed(2)} + $${taxAmount.toFixed(2)} impuesto)</small>
        `;
    } else {
        taxInfo.innerHTML = `
            <strong>Impuesto:</strong> Sin impuesto
        `;
        priceWithTaxInfo.innerHTML = `
            <strong>Precio (con impuesto):</strong> $${priceWithoutTax.toFixed(2)} USD
        `;
    }
}

function addProductToCartFromModal() {
    if (!currentProductConfig || !currentProductConfig.unit_type || !currentProductConfig.price_level) {
        return;
    }
    
    const config = currentProductConfig;
    
    // Verificar si ya está en el carrito con la misma unidad y nivel
    const existingItem = cart.find(item => 
        item.product_id === config.product_id && 
        item.unit_type === config.unit_type && 
        item.price_level === config.price_level
    );
    
    if (existingItem) {
        // Validar stock considerando la unidad
        if (config.track_stock) {
            const totalQuantityInBaseUnits = (existingItem.quantity + 1) * config.unit_quantity;
            if (totalQuantityInBaseUnits > config.stock) {
                alert(`No hay suficiente stock disponible. Disponible: ${config.stock_in_unit} ${config.unit_name} (${config.stock} unidades base)`);
                return;
            }
        }
        existingItem.quantity += 1;
    } else {
        if (config.track_stock && config.stock_in_unit <= 0) {
            alert(`No hay stock disponible para este producto en ${config.unit_name}. Disponible: ${config.stock_in_unit} ${config.unit_name} (${config.stock} unidades base)`);
            return;
        }
        cart.push({
            product_id: config.product_id,
            name: config.name,
            unit_price: config.unit_price, // Precio SIN impuesto
            quantity: 1,
            track_stock: config.track_stock,
            stock: config.stock,
            stock_in_unit: config.stock_in_unit,
            unit_type: config.unit_type,
            unit_quantity: config.unit_quantity,
            unit_name: config.unit_name,
            price_level: config.price_level,
            tax_id: config.tax_id || null,
            tax_percentage: config.tax_percentage || 0,
            tax_name: config.tax_name || 'Sin Impuesto'
        });
    }
    
    // Cerrar modal y actualizar display
    const modal = bootstrap.Modal.getInstance(document.getElementById('productConfigModal'));
    modal.hide();
    updateCartDisplay();
    document.getElementById('product_search').value = '';
    document.getElementById('product_results').innerHTML = '<p class="text-muted text-center">Busque productos para agregarlos al carrito</p>';
    currentProductConfig = null;
}

function removeFromCart(index) {
    cart.splice(index, 1);
    updateCartDisplay();
}

function updateQuantity(index, change) {
    const item = cart[index];
    const newQuantity = item.quantity + change;
    
    if (newQuantity < 0.01) {
        removeFromCart(index);
        return;
    }
    
    if (item.track_stock) {
        // Validar stock considerando la unidad
        const totalQuantityInBaseUnits = newQuantity * item.unit_quantity;
        if (totalQuantityInBaseUnits > item.stock) {
            const maxInUnit = Math.floor(item.stock / item.unit_quantity);
            alert(`No hay suficiente stock disponible. Máximo disponible: ${maxInUnit} ${item.unit_name || 'unidades'} (${item.stock} unidades base)`);
            updateCartDisplay(); // Refrescar para mostrar cantidad correcta
            return;
        }
    }
    
    item.quantity = newQuantity;
    updateCartDisplay();
}

function updateCartDisplay() {
    const container = document.getElementById('cart_items');
    
    if (cart.length === 0) {
        container.innerHTML = '<p class="text-muted text-center">El carrito está vacío</p>';
        calculateTotals();
        return;
    }
    
    // Verificar si es moneda dual para mostrar columna legal
    const selectedCurrency = document.getElementById('currency').value;
    const calculationType = currentExchangeRateData ? currentExchangeRateData.calculation_type : 'direct';
    const isDualCurrency = (selectedCurrency !== 'USD' && calculationType === 'dual');
    const rateLegal = isDualCurrency ? (parseFloat(document.getElementById('exchange_rate_legal').value) || 1) : 1;
    const rateReal = isDualCurrency ? (parseFloat(document.getElementById('exchange_rate_real').value) || 1) : 1;
    
    let html = '<table class="table table-sm">';
    if (isDualCurrency) {
        html += '<thead><tr><th>Producto</th><th>Cant.</th><th>Precio</th><th>% Imp.</th><th>Subtotal</th><th>Impuesto</th><th>Total</th><th>Total Legal</th><th></th></tr></thead><tbody>';
    } else {
        html += '<thead><tr><th>Producto</th><th>Cant.</th><th>Precio</th><th>% Imp.</th><th>Subtotal</th><th>Impuesto</th><th>Total</th><th></th></tr></thead><tbody>';
    }
    
    cart.forEach((item, index) => {
        const lineSubtotal = item.quantity * item.unit_price; // Subtotal sin impuesto
        const taxPercentage = item.tax_percentage || 0;
        const lineTax = lineSubtotal * (taxPercentage / 100); // Impuesto de la línea
        const lineTotal = lineSubtotal + lineTax; // Total con impuesto
        
        const totalLocal = lineTotal * rateReal; // Total en moneda local
        const totalLegal = isDualCurrency ? (totalLocal / rateLegal) : null; // Total legal en USD
        
        html += `
            <tr>
                <td>${item.name}</td>
                <td>
                    <div class="input-group input-group-sm">
                        <button class="btn btn-outline-secondary" onclick="updateQuantity(${index}, -1)">-</button>
                        <input type="number" class="form-control text-center" value="${item.quantity}" 
                               onchange="setQuantity(${index}, this.value)" style="width: 60px;">
                        <button class="btn btn-outline-secondary" onclick="updateQuantity(${index}, 1)">+</button>
                    </div>
                </td>
                <td>
                    <div>$${parseFloat(item.unit_price).toFixed(2)}</div>
                    ${isDualCurrency ? `<small class="text-muted">${(item.unit_price * rateReal).toFixed(2)} ${selectedCurrency}</small>` : ''}
                </td>
                <td>
                    <div><strong>${taxPercentage > 0 ? taxPercentage.toFixed(2) + '%' : '-'}</strong></div>
                    ${taxPercentage > 0 ? `<small class="text-muted">${item.tax_name || ''}</small>` : ''}
                </td>
                <td>
                    <div>$${parseFloat(lineSubtotal).toFixed(2)}</div>
                    ${isDualCurrency ? `<small class="text-muted">${(lineSubtotal * rateReal).toFixed(2)} ${selectedCurrency}</small>` : ''}
                </td>
                <td>
                    <div>$${parseFloat(lineTax).toFixed(2)}</div>
                    ${isDualCurrency ? `<small class="text-muted">${(lineTax * rateReal).toFixed(2)} ${selectedCurrency}</small>` : ''}
                </td>
                <td>
                    <div><strong>$${parseFloat(lineTotal).toFixed(2)}</strong></div>
                    ${isDualCurrency ? `<small class="text-muted">${totalLocal.toFixed(2)} ${selectedCurrency}</small>` : ''}
                </td>
                ${isDualCurrency ? `
                <td>
                    <div><strong class="text-info">$${totalLegal.toFixed(2)}</strong></div>
                    <small class="text-muted">Legal</small>
                </td>
                ` : ''}
                <td>
                    <button class="btn btn-sm btn-danger" onclick="removeFromCart(${index})">
                        <i class="fas fa-trash"></i>
                    </button>
                </td>
            </tr>
        `;
    });
    
    html += '</tbody></table>';
    container.innerHTML = html;
    calculateTotals();
}

function setQuantity(index, value) {
    const quantity = parseFloat(value) || 0.01;
    const item = cart[index];
    
    if (quantity < 0.01) {
        removeFromCart(index);
        return;
    }
    
    if (item.track_stock) {
        // Validar stock considerando la unidad
        const totalQuantityInBaseUnits = quantity * item.unit_quantity;
        if (totalQuantityInBaseUnits > item.stock) {
            const maxInUnit = Math.floor(item.stock / item.unit_quantity);
            alert(`No hay suficiente stock disponible. Máximo disponible: ${maxInUnit} ${item.unit_name || 'unidades'} (${item.stock} unidades base)`);
            updateCartDisplay(); // Refrescar para mostrar cantidad correcta
            return;
        }
    }
    
    item.quantity = quantity;
    updateCartDisplay();
}

function calculateTotals() {
    // Calcular subtotal (sin impuestos)
    const subtotal = cart.reduce((sum, item) => {
        return sum + (item.quantity * item.unit_price);
    }, 0);
    
    // Verificar si es nota: las notas NO llevan impuesto
    const documentType = document.getElementById('document_type').value;
    const isNote = (documentType === 'note');
    
    // Calcular impuestos por producto y agrupar por tipo
    const taxesByType = {}; // Agrupar impuestos por tipo
    let totalTax = 0;
    
    cart.forEach(item => {
        const lineSubtotal = item.quantity * item.unit_price;
        let lineTax = 0;
        
        if (!isNote && item.tax_percentage > 0) {
            lineTax = lineSubtotal * (item.tax_percentage / 100);
            totalTax += lineTax;
            
            // Agrupar impuestos por tipo
            const taxKey = item.tax_name || 'Sin Impuesto';
            if (!taxesByType[taxKey]) {
                taxesByType[taxKey] = {
                    name: item.tax_name || 'Sin Impuesto',
                    percentage: item.tax_percentage,
                    amount: 0
                };
            }
            taxesByType[taxKey].amount += lineTax;
        }
        
        // Guardar valores calculados en el item
        item.line_subtotal = lineSubtotal;
        item.line_tax = lineTax;
        item.line_total = lineSubtotal + lineTax;
    });
    
    // Retención: solo aplica si hay impuesto (facturas)
    // Obtener del modal si está abierto, sino usar 0
    const retentionInput = document.getElementById('modal_retention_percentage');
    const retentionPercentage = isNote ? 0 : (retentionInput ? (parseFloat(retentionInput.value) || 0) : 0);
    const retention = totalTax * (retentionPercentage / 100);
    const total = subtotal + totalTax - retention;
    
    // Mostrar impuestos agrupados por tipo
    const taxesContainer = document.getElementById('cart_taxes_container');
    if (taxesContainer) {
        let taxesHtml = '';
        if (isNote || Object.keys(taxesByType).length === 0) {
            taxesHtml = '<div class="row"><div class="col-md-6"><strong>Impuestos:</strong></div><div class="col-md-6 text-end"><strong class="text-muted">$0.00 USD</strong></div></div>';
        } else {
            // Mostrar cada tipo de impuesto
            Object.values(taxesByType).forEach(taxInfo => {
                if (taxInfo.amount > 0) {
                    taxesHtml += `
                        <div class="row">
                            <div class="col-md-6">
                                <strong>${taxInfo.name} (${taxInfo.percentage.toFixed(2)}%):</strong>
                            </div>
                            <div class="col-md-6 text-end">
                                <strong class="text-primary">$${parseFloat(taxInfo.amount).toFixed(2)} USD</strong>
                            </div>
                        </div>
                    `;
                }
            });
        }
        taxesContainer.innerHTML = taxesHtml;
    }
    
    // Mostrar/ocultar fila de total de impuestos
    const totalTaxRow = document.getElementById('cart_total_tax_row');
    if (totalTaxRow) {
        totalTaxRow.style.display = (totalTax > 0 && !isNote) ? 'flex' : 'none';
    }
    
    // Montos en USD (siempre se muestran)
    document.getElementById('cart_subtotal_usd').textContent = parseFloat(subtotal).toFixed(2);
    document.getElementById('cart_tax_usd').textContent = parseFloat(totalTax).toFixed(2);
    document.getElementById('cart_retention_usd').textContent = parseFloat(retention).toFixed(2);
    document.getElementById('cart_total_usd').textContent = parseFloat(total).toFixed(2);
    
    // Calcular montos en moneda local si no es USD
    const selectedCurrency = document.getElementById('currency').value;
    const exchangeRate = parseFloat(document.getElementById('exchange_rate').value) || 1;
    const calculationType = currentExchangeRateData ? currentExchangeRateData.calculation_type : 'direct';
    
    if (selectedCurrency !== 'USD' && exchangeRate > 0) {
        let subtotalLocal, taxLocal, retentionLocal, totalLocal;
        
        if (calculationType === 'dual') {
            // Moneda dual: multiplicar por rate_real
            // Ejemplo: $100 USD * 400 = 40000 VEF
            const rateReal = parseFloat(document.getElementById('exchange_rate_real').value) || exchangeRate;
            const rateLegal = parseFloat(document.getElementById('exchange_rate_legal').value) || 1;
            
            subtotalLocal = subtotal * rateReal;
            taxLocal = totalTax * rateReal;
            retentionLocal = retention * rateReal;
            totalLocal = total * rateReal;
            
            // Calcular total_legal: total en moneda local / tasa legal = monto a cobrar en USD
            // Ejemplo: 40000 VEF / 220 = $181.82 USD legal
            if (rateLegal > 0) {
                const totalLegal = totalLocal / rateLegal;
                document.getElementById('cart_total_legal').textContent = totalLegal.toFixed(2);
                document.getElementById('cart_total_legal_container').style.display = 'block';
            } else {
                document.getElementById('cart_total_legal_container').style.display = 'none';
            }
        } else {
            // Moneda directa: dividir por rate
            // Ejemplo: $100 USD / 0.92 = 108.70 EUR
            subtotalLocal = subtotal / exchangeRate;
            taxLocal = totalTax / exchangeRate;
            retentionLocal = retention / exchangeRate;
            totalLocal = total / exchangeRate;
            
            // No hay total legal para monedas directas
            document.getElementById('cart_total_legal_container').style.display = 'none';
        }
        
        // Mostrar montos en moneda local
        document.getElementById('cart_subtotal_local').textContent = subtotalLocal.toFixed(2);
        document.getElementById('cart_tax_local').textContent = taxLocal.toFixed(2);
        document.getElementById('cart_retention_local').textContent = retentionLocal.toFixed(2);
        document.getElementById('cart_total_local').textContent = totalLocal.toFixed(2);
        
        // Actualizar símbolos de moneda
        document.getElementById('cart_currency_local').textContent = selectedCurrency;
        document.getElementById('cart_currency_local2').textContent = selectedCurrency;
        document.getElementById('cart_currency_local3').textContent = selectedCurrency;
        document.getElementById('cart_currency_local4').textContent = selectedCurrency;
        
        // Mostrar contenedores
        document.getElementById('cart_subtotal_local_container').style.display = 'block';
        document.getElementById('cart_tax_local_container').style.display = 'block';
        document.getElementById('cart_retention_local_container').style.display = 'block';
        document.getElementById('cart_total_local_container').style.display = 'block';
    } else {
        // Ocultar contenedores si es USD
        document.getElementById('cart_subtotal_local_container').style.display = 'none';
        document.getElementById('cart_tax_local_container').style.display = 'none';
        document.getElementById('cart_retention_local_container').style.display = 'none';
        document.getElementById('cart_total_local_container').style.display = 'none';
        document.getElementById('cart_total_legal_container').style.display = 'none';
    }
}

let currentExchangeRateData = null; // Almacenar datos completos de la tasa

function updateExchangeRate() {
    const currency = document.getElementById('currency').value;
    
    if (currency === 'USD') {
        currentExchangeRate = 1;
        document.getElementById('exchange_rate').value = 1;
        document.getElementById('exchange_rate_real').value = 1;
        document.getElementById('exchange_rate_legal').value = '';
        currentExchangeRateData = {
            calculation_type: 'direct',
            rate: 1,
            rate_real: 1,
            rate_legal: null
        };
        updateExchangeRateDisplay();
    } else {
        fetch(`{{ route('admin.sales.pos.exchange-rate') }}?currency=${currency}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    currentExchangeRate = data.rate;
                    currentExchangeRateData = {
                        calculation_type: data.calculation_type || 'direct',
                        rate: data.rate,
                        rate_real: data.rate_real || data.rate,
                        rate_legal: data.rate_legal || null
                    };
                    
                    // Actualizar campos de tasa
                    document.getElementById('exchange_rate').value = data.rate;
                    document.getElementById('exchange_rate_real').value = data.rate_real || data.rate;
                    
                    if (data.calculation_type === 'dual' && data.rate_legal) {
                        document.getElementById('exchange_rate_legal').value = data.rate_legal;
                    } else {
                        document.getElementById('exchange_rate_legal').value = '';
                    }
                    
                    updateExchangeRateDisplay();
                    calculateTotals(); // Recalcular totales cuando se actualice la tasa
                    updateCartDisplay(); // Actualizar display del carrito para recalcular totales legales
                }
            })
            .catch(error => {
                console.error('Error:', error);
            });
    }
}

function updateExchangeRateDisplay() {
    const displayDiv = document.getElementById('exchange_rate_display');
    if (!displayDiv) return;
    
    if (!currentExchangeRateData) {
        displayDiv.innerHTML = '';
        return;
    }
    
    const currency = document.getElementById('currency').value;
    
    if (currentExchangeRateData.calculation_type === 'dual') {
        // Mostrar información de moneda dual
        displayDiv.innerHTML = `
            <div class="alert alert-info mb-2 p-2">
                <small>
                    <strong><i class="fas fa-info-circle"></i> Moneda Dual:</strong><br>
                    <span class="text-primary">Tasa Real:</span> 1 USD = ${parseFloat(currentExchangeRateData.rate_real).toFixed(4)} ${currency}<br>
                    <span class="text-secondary">Tasa Legal (informativa):</span> 1 USD = ${parseFloat(currentExchangeRateData.rate_legal || 1).toFixed(4)} ${currency}
                </small>
            </div>
        `;
    } else {
        // Moneda directa
        displayDiv.innerHTML = `
            <div class="alert alert-secondary mb-2 p-2">
                <small>
                    <strong><i class="fas fa-exchange-alt"></i> Tasa de Cambio:</strong> 1 USD = ${parseFloat(currentExchangeRateData.rate).toFixed(4)} ${currency}
                </small>
            </div>
        `;
    }
}

function toggleModalPaymentFields() {
    const paymentMethod = document.getElementById('modal_payment_method').value;
    
    // Contenedores del modal
    const pettyCashContainer = document.getElementById('modal_petty_cash_container');
    const bankContainer = document.getElementById('modal_bank_account_container');
    const referenceContainer = document.getElementById('modal_payment_reference_container');
    const checkInfoContainer = document.getElementById('modal_check_info_container');
    const cardTypeContainer = document.getElementById('modal_card_type_container');
    const notesContainer = document.getElementById('modal_payment_notes_container');
    
    // Ocultar todos primero
    if (pettyCashContainer) pettyCashContainer.style.display = 'none';
    if (bankContainer) bankContainer.style.display = 'none';
    if (referenceContainer) referenceContainer.style.display = 'none';
    if (checkInfoContainer) checkInfoContainer.style.display = 'none';
    if (cardTypeContainer) cardTypeContainer.style.display = 'none';
    if (notesContainer) notesContainer.style.display = 'none';
    
    // Limpiar campos requeridos
    const modalPettyCash = document.getElementById('modal_petty_cash_account_id');
    const modalBankAccount = document.getElementById('modal_bank_account_id');
    const modalCheckNumber = document.getElementById('modal_check_number');
    const modalIssuingBank = document.getElementById('modal_issuing_bank_id');
    const modalCardType = document.getElementById('modal_card_type');
    
    if (modalPettyCash) modalPettyCash.required = false;
    if (modalBankAccount) modalBankAccount.required = false;
    if (modalCheckNumber) modalCheckNumber.required = false;
    if (modalIssuingBank) modalIssuingBank.required = false;
    if (modalCardType) modalCardType.required = false;
    
    // Mostrar campos según método de pago
    switch(paymentMethod) {
        case 'cash':
            if (pettyCashContainer) {
                pettyCashContainer.style.display = 'block';
                if (modalPettyCash) modalPettyCash.required = true;
            }
            break;
            
        case 'check':
            if (bankContainer) bankContainer.style.display = 'block';
            if (checkInfoContainer) checkInfoContainer.style.display = 'block';
            if (modalBankAccount) modalBankAccount.required = true;
            if (modalCheckNumber) modalCheckNumber.required = true;
            if (modalIssuingBank) modalIssuingBank.required = true;
            break;
            
        case 'transfer':
            if (bankContainer) bankContainer.style.display = 'block';
            if (referenceContainer) referenceContainer.style.display = 'block';
            if (notesContainer) notesContainer.style.display = 'block';
            if (modalBankAccount) modalBankAccount.required = true;
            break;
            
        case 'card':
            if (bankContainer) bankContainer.style.display = 'block';
            if (cardTypeContainer) cardTypeContainer.style.display = 'block';
            if (referenceContainer) referenceContainer.style.display = 'block';
            if (modalBankAccount) modalBankAccount.required = true;
            if (modalCardType) modalCardType.required = true;
            break;
            
        case 'other':
            if (bankContainer) bankContainer.style.display = 'block';
            if (referenceContainer) referenceContainer.style.display = 'block';
            if (notesContainer) notesContainer.style.display = 'block';
            if (modalBankAccount) modalBankAccount.required = true;
            break;
    }
}

function openPaymentModal() {
    if (cart.length === 0) {
        alert('El carrito está vacío');
        return;
    }
    
    if (!document.getElementById('client_id').value) {
        alert('Por favor seleccione un cliente');
        return;
    }
    
    // Resetear campos del modal
    document.getElementById('modal_retention_percentage').value = '0';
    document.getElementById('modal_payment_method').value = 'cash';
    document.getElementById('modal_petty_cash_account_id').value = '';
    document.getElementById('modal_bank_account_id').value = '';
    document.getElementById('modal_payment_reference').value = '';
    document.getElementById('modal_check_number').value = '';
    document.getElementById('modal_issuing_bank_id').value = '';
    document.getElementById('modal_card_type').value = '';
    document.getElementById('modal_payment_notes').value = '';
    
    // Actualizar campos dinámicos
    toggleModalPaymentFields();
    
    // Mostrar modal
    const modal = new bootstrap.Modal(document.getElementById('paymentModal'));
    modal.show();
}

function updateModalPettyCashBalance(accountId) {
    if (!accountId) {
        document.getElementById('modal_petty_cash_balance').innerHTML = '<small class="text-info">Saldo actual: $0.00</small>';
        return;
    }
    
    // Aquí podrías hacer una petición AJAX para obtener el saldo actual
    // Por ahora, mostramos el saldo que viene en el option
    const select = document.getElementById('modal_petty_cash_account_id');
    const selectedOption = select.options[select.selectedIndex];
    if (selectedOption) {
        const balanceText = selectedOption.text.match(/Saldo: ([\d,]+\.\d+)/);
        if (balanceText) {
            document.getElementById('modal_petty_cash_balance').innerHTML = 
                `<small class="text-info">Saldo actual: $${balanceText[1]}</small>`;
        }
    }
}

function showConfirmModal() {
    if (cart.length === 0) {
        alert('El carrito está vacío');
        return;
    }
    
    if (!document.getElementById('client_id').value) {
        alert('Por favor seleccione un cliente');
        return;
    }
    
    const summary = `
        <p><strong>Cliente:</strong> ${document.getElementById('client_id').selectedOptions[0].text}</p>
        <p><strong>Total:</strong> ${document.getElementById('cart_total').textContent} ${currentCurrency}</p>
        <p><strong>Método de Pago:</strong> ${document.getElementById('payment_method').selectedOptions[0].text}</p>
    `;
    
    document.getElementById('sale_summary').innerHTML = summary;
    new bootstrap.Modal(document.getElementById('confirmModal')).show();
}

function processSale() {
    const btn = document.getElementById('btn_confirm_payment');
    btn.disabled = true;
    btn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Procesando...';
    
    const data = {
        invoice_number: document.getElementById('invoice_number').value,
        client_id: document.getElementById('client_id').value,
        salesman_id: document.getElementById('salesman_id').value || null,
        currency: document.getElementById('currency').value,
        document_type: document.getElementById('document_type').value,
        exchange_rate: parseFloat(document.getElementById('exchange_rate').value),
        exchange_rate_real: parseFloat(document.getElementById('exchange_rate_real').value),
        exchange_rate_legal: document.getElementById('exchange_rate_legal').value ? parseFloat(document.getElementById('exchange_rate_legal').value) : null,
        calculation_type: currentExchangeRateData ? currentExchangeRateData.calculation_type : 'direct',
        retention_percentage: parseFloat(document.getElementById('modal_retention_percentage').value) || 0,
        payment_method: document.getElementById('modal_payment_method').value,
        bank_account_id: document.getElementById('modal_bank_account_id').value || null,
        petty_cash_account_id: document.getElementById('modal_petty_cash_account_id').value || null,
        payment_reference: document.getElementById('modal_payment_reference').value || null,
        check_number: document.getElementById('modal_check_number').value || null,
        issuing_bank_id: document.getElementById('modal_issuing_bank_id').value || null,
        card_type: document.getElementById('modal_card_type').value || null,
        payment_notes: document.getElementById('modal_payment_notes').value || null,
        products: cart.map(item => ({
            product_id: item.product_id,
            quantity: item.quantity,
            unit_price: item.unit_price, // Precio SIN impuesto
            unit_type: item.unit_type,
            unit_quantity: item.unit_quantity,
            price_level: item.price_level,
            tax_id: item.tax_id || null,
            tax_percentage: item.tax_percentage || 0
        }))
    };
    
    fetch('{{ route('admin.sales.pos.process-sale') }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const paymentModal = bootstrap.Modal.getInstance(document.getElementById('paymentModal'));
            if (paymentModal) paymentModal.hide();
            alert('Venta procesada exitosamente. Factura: ' + data.invoice_number);
            clearCart();
            window.location.href = `{{ route('admin.sales.invoices.index') }}/${data.invoice_id}`;
        } else {
            alert('Error: ' + data.message);
            btn.disabled = false;
            btn.innerHTML = '<i class="fas fa-check-circle me-2"></i>Confirmar y Procesar Venta';
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Error al procesar la venta');
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-check-circle me-2"></i>Confirmar y Procesar Venta';
    });
}

function clearCart() {
    cart = [];
    updateCartDisplay();
    document.getElementById('product_search').value = '';
    document.getElementById('product_results').innerHTML = '<p class="text-muted text-center">Busque productos para agregarlos al carrito</p>';
}


document.addEventListener('DOMContentLoaded', function() {
    const documentTypeSelect = document.getElementById('document_type');
    if (documentTypeSelect) {
        documentTypeSelect.addEventListener('change', function() {
            const type = this.value;
            fetch('{{ route('admin.sales.pos.next-number') }}?document_type=' + type)
                .then(response => response.json())
                .then(data => {
                    if (data.number) {
                        const invoiceInput = document.getElementById('invoice_number');
                        if (invoiceInput) {
                            invoiceInput.value = data.number;
                        }
                    }
                })
                .catch(error => console.error('Error fetching next number:', error));
                
            // Also recalc totals because notes don't have tax
            if (typeof calculateTotals === 'function') {
                calculateTotals();
            }
        });
    }
});

</script>
@endsection