@extends('layouts.app')

@section('title', 'Nueva Factura de Venta')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <form action="{{ route('admin.sales.invoices.store') }}" method="POST" id="invoice-form">
                @csrf
                
                <!-- Header Actions -->
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <h3 class="m-0 font-weight-bold text-primary">
                        <i class="fas fa-file-invoice-dollar mr-2"></i>Nueva Factura de Venta
                    </h3>
                    <a href="{{ route('admin.sales.invoices.index') }}" class="btn btn-secondary shadow-sm">
                        <i class="fas fa-arrow-left mr-1"></i> Volver
                    </a>
                </div>

                <div class="card shadow-sm mb-2 border-top-primary">
                    <div class="card-body p-2">
                        <input type="hidden" name="salesman_id" id="salesman_id" value="{{ Auth::user()->id }}">
                        
                        <!-- ROW 1: HEADER INFO -->
                        <div class="row no-gutters align-items-end mb-2">
                            <!-- Document -->
                            <div class="col-2 px-1">
                                <label class="small font-weight-bold text-dark mb-0">Documento</label>
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend">
                                        <select name="document_type" id="document_type" class="custom-select custom-select-sm font-weight-bold border-right-0 px-1 text-dark bg-light" style="width: 55px;">
                                            <option value="invoice" selected>FAC</option>
                                            <option value="note">NOT</option>
                                        </select>
                                    </div>
                                    <input type="text" name="invoice_number" id="invoice_number" class="form-control form-control-sm text-center font-weight-bold text-primary px-1" value="{{ $invoiceNumber }}" readonly>
                                </div>
                            </div>

                            <!-- Client Search -->
                            <div class="col-3 px-1">
                                <div class="d-flex justify-content-between align-items-center">
                                    <label class="small font-weight-bold text-dark mb-0">Cliente</label>
                                    <a href="#" onclick="window.open('{{ route('admin.gestor.clients.create') }}', '_blank')" class="small text-success font-weight-bold pb-1" style="font-size: 0.65rem; line-height: 1;">+NUEVO</a>
                                </div>
                                <div class="input-group input-group-sm">
                                    <input type="text" class="form-control" id="client_search" placeholder="Buscar (Nombre/RIF)..." onkeydown="if(event.key === 'Enter'){ event.preventDefault(); openClientSearch(); }">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-primary px-2" type="button" onclick="openClientSearch()"><i class="fas fa-search"></i></button>
                                    </div>
                                </div>
                            </div>

                            <!-- Client Name -->
                            <div class="col-5 px-1">
                                <label class="small font-weight-bold text-dark mb-0">Razón Social</label>
                                <input type="text" id="client_name_display" class="form-control form-control-sm bg-light font-weight-bold text-dark" readonly placeholder="--- Seleccione Cliente ---">
                            </div>

                            <!-- Import -->
                            <div class="col-2 px-1 text-right">
                                <label class="small text-white mb-0 d-block">.</label>
                                <button type="button" class="btn btn-sm btn-outline-secondary btn-block" onclick="openImportModal()">
                                    <i class="fas fa-file-import mr-1"></i> Importar
                                </button>
                            </div>
                        </div>
                        
                        <!-- NEW ROW: ADDRESS (Full Width, stylized) -->
                        <div id="client_address_container" class="row px-1 mb-2" style="display:none;">
                            <div class="col-12">
                                 <div class="bg-light rounded p-1 d-flex align-items-center border">
                                    <i class="fas fa-map-marker-alt text-danger mr-2 ml-1"></i>
                                    <span id="client_address_text" class="small text-dark font-weight-bold text-truncate" style="font-size: 0.75rem;"></span>
                                 </div>
                            </div>
                        </div>

                        <!-- ROW 3: CONDITIONS STRIP (Styled better) -->
                        <div class="card bg-gray-100 border-0 mb-0">
                            <div class="card-body p-2">
                                <div class="row no-gutters">
                                    <!-- Date -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-muted mb-0">Emisión</label>
                                        <input type="date" name="invoice_date" id="invoice_date" class="form-control form-control-sm border-0 shadow-none bg-white" value="{{ date('Y-m-d') }}" required>
                                    </div>
                                    <!-- Due -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-muted mb-0">Vencimiento</label>
                                        <input type="date" name="due_date" id="due_date" class="form-control form-control-sm border-0 shadow-none bg-white" readonly>
                                    </div>
                                    <!-- Terms -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-primary mb-0">Términos</label>
                                         <select name="payment_terms" id="payment_terms" class="custom-select custom-select-sm border-0 shadow-none font-weight-bold text-primary bg-white">
                                            <option value="immediate" selected>Contado</option>
                                            <option value="15_days">15 Días</option>
                                            <option value="30_days">30 Días</option>
                                            <option value="45_days">45 Días</option>
                                            <option value="60_days">60 Días</option>
                                        </select>
                                    </div>
                                    <!-- Price -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-success mb-0">Precios</label>
                                        <select name="price_level" id="price_level" class="custom-select custom-select-sm border-0 shadow-none font-weight-bold text-success bg-white">
                                            <option value="1">General</option>
                                            <option value="2">Mayorista</option>
                                            <option value="3">Especial</option>
                                        </select>
                                    </div>
                                    <!-- Currency -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-info mb-0">Moneda</label>
                                         <div class="input-group input-group-sm">
                                            <select name="currency" id="currency" class="custom-select custom-select-sm border-0 shadow-none font-weight-bold text-info bg-white" style="padding-right: 0;">
                                                @php
                                                    $currencyNames = ['USD' => 'USD', 'EUR' => 'EUR', 'VES' => 'VES', 'COP' => 'COP'];
                                                @endphp
                                                @foreach($currencies as $currency)
                                                    @php
                                                        $cCode = is_object($currency) ? $currency->to_currency : $currency;
                                                        $cName = $currencyNames[$cCode] ?? $cCode;
                                                        
                                                        // Determine effective rate based on calculation type
                                                        if (is_object($currency)) {
                                                            $type = $currency->calculation_type ?? 'direct';
                                                            $real = $currency->rate_real ?? null;
                                                            // For Dual types (VES), use rate_real. For Direct (EUR), use rate.
                                                            $rate = ($type === 'dual') ? ($currency->rate_real ?? 1.0) : ($currency->rate ?? 1.0);
                                                        } else {
                                                            $rate = 1.0; $type = 'direct'; $real = null;
                                                        }
                                                    @endphp
                                                    <option value="{{ $cCode }}" 
                                                            data-rate="{{ $rate }}" 
                                                            data-type="{{ $type }}" 
                                                            data-real="{{ $real }}"
                                                            {{ $cCode == 'USD' ? 'selected' : '' }}>{{ $cName }}</option>
                                                @endforeach
                                            </select>
                                            <div class="input-group-append">
                                                <span class="input-group-text border-0 bg-transparent small px-1 font-weight-bold text-muted" id="exchange_rate_display" style="font-size: 0.7rem;">1.00</span>
                                            </div>
                                        </div>
                                        <input type="hidden" name="exchange_rate" id="exchange_rate" value="1.0000">
                                    </div>
                                    <!-- Salesman -->
                                    <div class="col-2 px-1">
                                        <label class="small font-weight-bold text-muted mb-0">Vendedor</label>
                                        <input type="text" class="form-control form-control-sm border-0 shadow-none bg-white" id="salesman_search" placeholder="Vendedor...">
                                        <div id="salesman_search_results" class="list-group position-absolute w-100 shadow-sm" style="display:none; z-index: 1000; top: 100%;"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- COMPACT PRODUCT BAR (Forced Horizontal) -->
                <div class="card shadow-sm mb-3 border-left-success">
                    <div class="card-body p-2">
                        <div class="row no-gutters align-items-center">
                            <!-- Code -->
                            <div class="col-3 px-1">
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend">
                                        <button class="btn btn-success" type="button" onclick="openProductSearch()"><i class="fas fa-search"></i></button>
                                    </div>
                                    <input type="text" class="form-control" id="quick_product_code" placeholder="Código / SKU" onkeydown="if(event.key === 'Enter'){ event.preventDefault(); quickSearchProduct(); }">
                                </div>
                            </div>
                            
                            <!-- Name -->
                            <div class="col-5 px-1">
                                <input type="text" class="form-control form-control-sm bg-white font-weight-bold text-dark" id="quick_product_name" readonly placeholder="--- Nombre del Producto ---">
                                <input type="hidden" id="quick_product_id">
                                <input type="hidden" id="quick_product_price">
                                <input type="hidden" id="quick_product_data">
                            </div>
                            
                            <!-- Quantity -->
                            <div class="col-2 px-1">
                                <div class="input-group input-group-sm">
                                    <div class="input-group-prepend"><span class="input-group-text">Cant.</span></div>
                                    <input type="number" class="form-control text-center font-weight-bold" id="quick_product_qty" value="1" min="0.01" step="0.01">
                                </div>
                            </div>
                            
                            <!-- Add Button -->
                            <div class="col-2 px-1">
                                <button class="btn btn-block btn-sm btn-success font-weight-bold" type="button" onclick="addQuickProduct()">
                                    AGREGAR
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Products Card -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                        <h6 class="m-0 font-weight-bold text-primary">Detalle de Productos</h6>
                        <button type="button" class="btn btn-sm btn-primary shadow-sm" onclick="addProduct()">
                            <i class="fas fa-plus mr-1"></i> Agregar Producto
                        </button>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover mb-0" id="products-table">
                                <thead class="bg-light text-dark">
                                    <tr>
                                        <th style="width: 25%;" class="pl-3 border-top-0">Producto</th>
                                        <th style="width: 12%;" class="border-top-0">Unidad</th>
                                        <th style="width: 12%;" class="border-top-0">Nivel Precio</th>
                                        <th style="width: 10%;" class="border-top-0">Cant.</th>
                                        <th style="width: 12%;" class="border-top-0">Precio Unit.</th>
                                        <th style="width: 10%;" class="border-top-0">Desc. %</th>
                                        <th style="width: 12%;" class="border-top-0 text-right">Total</th>
                                        <th style="width: 5%;" class="border-top-0 text-center"><i class="fas fa-cog"></i></th>
                                    </tr>
                                </thead>
                                <tbody id="products-tbody">
                                    <!-- Dynamic content -->
                                </tbody>
                                <tfoot class="bg-light">
                                    <tr>
                                        <td colspan="8" class="text-center py-3 text-muted" id="empty-cart-msg">
                                            <i class="fas fa-cart-plus fa-2x mb-2"></i><br>
                                            No hay productos en la factura. Agregue uno para comenzar.
                                        </td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>

                <!-- Footer Totals -->
                <div class="row">
                    <div class="col-md-8">
                        <div class="card shadow-sm mb-4">
                            <div class="card-body">
                                <label for="notes" class="font-weight-bold text-muted small text-uppercase">Notas Internas / Comentarios</label>
                                <textarea name="notes" id="notes" class="form-control" rows="4" placeholder="Escriba aquí cualquier observación sobre la factura..."></textarea>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="card shadow-sm mb-4 border-left-primary">
                            <div class="card-body">
                                <h5 class="card-title font-weight-bold mb-4">Resumen</h5>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Subtotal:</span>
                                    <span class="font-weight-bold" id="subtotal-display">$0.00</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span class="text-muted">Descuento:</span>
                                    <span class="text-success" id="discount-display">$0.00</span>
                                </div>
                                <div class="d-flex justify-content-between mb-3">
                                    <span class="text-muted">Impuestos:</span>
                                    <span class="text-danger" id="tax-display">$0.00</span>
                                </div>
                                <div class="separator mb-3 border-bottom"></div>
                                <div class="d-flex justify-content-between align-items-center">
                                    <span class="h5 font-weight-bold m-0">Total:</span>
                                    <span class="h4 font-weight-bold text-primary m-0" id="total-display">$0.00</span>
                                </div>
                                <input type="hidden" name="total_amount" id="total_amount_input">
                            </div>
                            <div class="card-footer bg-white border-top-0 pt-0 pb-4">
                                <button type="submit" class="btn btn-success btn-lg btn-block shadow-sm">
                                    <i class="fas fa-check-circle mr-2"></i> Crear Factura
                                </button>
                                <button type="button" class="btn btn-outline-secondary btn-block" onclick="saveDraft()">
                                    <i class="fas fa-save mr-2"></i> Guardar Borrador
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
    </div>
</div>

<!-- Modals -->
<!-- Client Search Modal -->
<div class="modal fade" id="clientSearchModal" tabindex="-1" aria-labelledby="clientSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold text-primary" id="clientSearchModalLabel">
                    <i class="fas fa-users mr-2"></i>Buscar Cliente
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-light">
                <input type="text" class="form-control form-control-lg shadow-sm mb-3" id="client_search_input" placeholder="Escriba nombre o documento..." autofocus>
                <div id="client_search_results" class="list-group shadow-sm"></div>
            </div>
        </div>
    </div>
</div>

<!-- Product Search Modal -->
<div class="modal fade" id="productSearchModal" tabindex="-1" aria-labelledby="productSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title font-weight-bold text-primary" id="productSearchModalLabel">
                    <i class="fas fa-box-open mr-2"></i>Buscar Producto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body bg-light">
                <input type="text" class="form-control form-control-lg shadow-sm mb-3" id="product_search_input" placeholder="Escriba código, nombre o escanee código de barras..." autofocus>
                <div id="product_search_results" class="list-group shadow-sm"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('styles')
<style>
    .product-row:hover { background-color: #f8f9fa; }
    .card-header { border-bottom: 1px solid #e3e6f0; }
    .table th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; }
    .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(78, 115, 223, 0.25); border-color: #bac8f3; }
</style>
@endpush

@push('scripts')
<script>
let productCounter = 0;
let selectedClient = null;

$(document).ready(function() {
    // 1. Currency & Exchange Rate
    function updateExchangeRate() {
        const option = $('#currency').find('option:selected');
        const rate = parseFloat(option.data('rate') || 1);
        const calcType = option.data('calculation-type');
        const rateReal = parseFloat(option.data('rate-real') || rate);
        
        let finalRate = (calcType === 'dual' && rateReal) ? rateReal : rate;
        
        $('#exchange_rate').val(finalRate.toFixed(4));
        $('#exchange_rate_display').text(finalRate.toFixed(4));
        calculateTotals();
    }
    $('#currency').on('change', updateExchangeRate);
    updateExchangeRate();

    // 2. Due Date Automation
    function updateDueDate() {
        const terms = $('#payment_terms').val();
        const invoiceDateVal = $('#invoice_date').val();
        
        if (!invoiceDateVal) return;

        const date = new Date(invoiceDateVal + 'T00:00:00'); // Append Time to force local date interpretation-ish or basically start of day
        let daysToAdd = 0;

        switch(terms) {
            case '15_days': daysToAdd = 15; break;
            case '30_days': daysToAdd = 30; break;
            case '45_days': daysToAdd = 45; break;
            case '60_days': daysToAdd = 60; break;
            case '90_days': daysToAdd = 90; break;
            default: daysToAdd = 0;
        }

        date.setDate(date.getDate() + daysToAdd);
        
        const yyyy = date.getFullYear();
        const mm = String(date.getMonth() + 1).padStart(2, '0');
        const dd = String(date.getDate()).padStart(2, '0');
        
        $('#due_date').val(`${yyyy}-${mm}-${dd}`);
    }
    $('#payment_terms, #invoice_date').on('change', updateDueDate);
    updateDueDate(); // Init
});

// 3. Totals Calculation
function calculateTotals() {
    let subtotal = 0;
    let totalDiscount = 0;
    let totalTax = 0;
    const isNote = $('#document_type').val() === 'note';
    let hasProducts = false;

    $('#products-tbody tr').each(function() {
        hasProducts = true;
        const qty = parseFloat($(this).find('.quantity-input').val()) || 0;
        const price = parseFloat($(this).find('.price-input').val()) || 0;
        const discPct = parseFloat($(this).find('.discount-input').val()) || 0;
        
        const gross = qty * price;
        const discountAmt = gross * (discPct / 100);
        const net = gross - discountAmt;
        const taxAmt = isNote ? 0 : (net * 0.16);

        subtotal += net;
        totalDiscount += discountAmt;
        totalTax += taxAmt;

        $(this).find('.total-price').text('$' + net.toFixed(2));
    });

    if(hasProducts) $('#empty-cart-msg').hide(); else $('#empty-cart-msg').show();

    const total = subtotal + totalTax;
    
    $('#subtotal-display').text('$' + subtotal.toFixed(2));
    $('#discount-display').text('$' + totalDiscount.toFixed(2));
    $('#tax-display').text('$' + totalTax.toFixed(2));
    $('#total-display').text('$' + total.toFixed(2));
    $('#total_amount_input').val(total.toFixed(2));
}

$(document).on('input', '.quantity-input, .price-input, .discount-input', calculateTotals);
$('#document_type').on('change', calculateTotals);

// 4. Product Management
function addProduct() {
    if (typeof openProductSearch === 'function') openProductSearch();
    else alert('Error: Función de búsqueda de productos no cargada.');
}

function removeProduct(rowId) {
    $(`#${rowId}`).remove();
    calculateTotals();
}

// 5. Product Selection Callback (invoked by modal)
function selectProduct(product, initialQty = 1) {
    const rowId = `row_${productCounter++}`;
    
    // Units construction
    let unitsHtml = '';
    let selectedUnit = 1;

    // Helper to add option
    const addUnitOpt = (val, name, selected = false) => {
        unitsHtml += `<option value="${val}" ${selected ? 'selected' : ''}>${name}</option>`;
    };

    // Determine default unit and available units
    let hasEnabled = false;
    if (product.tab_enabled_1 !== false) { addUnitOpt(1, product.tab_name_1 || 'Unidad', true); hasEnabled = true; }
    if (product.tab_enabled_2) { addUnitOpt(2, product.tab_name_2 || 'Caja'); hasEnabled = true; }
    if (product.tab_enabled_3) { addUnitOpt(3, product.tab_name_3 || 'Bulto'); hasEnabled = true; }
    if (!hasEnabled) addUnitOpt(1, 'Unidad Standard', true);

    const row = `
        <tr id="${rowId}" class="product-row">
            <td class="pl-3 align-middle">
                <div><strong>${product.name}</strong></div>
                <div class="small text-muted">${product.code}</div>
                <input type="hidden" name="products[${productCounter}][product_id]" value="${product.id}">
            </td>
            <td class="align-middle">
                <select class="form-control form-control-sm unit-select" name="products[${productCounter}][unit]" onchange="updateRowPrice('${rowId}')">${unitsHtml}</select>
            </td>
            <td class="align-middle">
                <select class="form-control form-control-sm level-select" name="products[${productCounter}][level]" onchange="updateRowPrice('${rowId}')">
                    <option value="1">Precio 1</option><option value="2">Precio 2</option><option value="3">Precio 3</option>
                </select>
            </td>
            <td class="align-middle">
                <input type="number" class="form-control form-control-sm quantity-input" name="products[${productCounter}][quantity]" value="${initialQty}" min="0.01" step="0.01">
            </td>
            <td class="align-middle">
                <input type="number" class="form-control form-control-sm price-input" name="products[${productCounter}][unit_price]" value="0" min="0" step="0.01">
                <input type="hidden" class="cost-hidden" name="products[${productCounter}][unit_cost]" value="0">
            </td>
            <td class="align-middle">
                <input type="number" class="form-control form-control-sm discount-input" name="products[${productCounter}][discount_percentage]" value="0" min="0" max="100">
            </td>
            <td class="align-middle text-right total-price font-weight-bold">$0.00</td>
            <td class="align-middle text-center">
                <button type="button" class="btn btn-sm btn-outline-danger border-0" onclick="removeProduct('${rowId}')"><i class="fas fa-times"></i></button>
            </td>
        </tr>
    `;

    $('#products-tbody').append(row);
    $(`#${rowId}`).data('product', product); // Store data for price updates
    
    // Close modal
    if(typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        // Bootstrap 5
        const el = document.getElementById('productSearchModal');
        const modal = bootstrap.Modal.getInstance(el);
        if(modal) modal.hide();
    } else {
        $('#productSearchModal').modal('hide');
    }

    updateRowPrice(rowId);
}

// 6. Price Update Logic
function updateRowPrice(rowId) {
    const $row = $(`#${rowId}`);
    const product = $row.data('product');
    const unit = $row.find('.unit-select').val();
    const level = $row.find('.level-select').val();

    if(!product) return;

    // Price
    let price = parseFloat(product[`unit_${unit}_pvp_${level}`]) || 0;
    if (price === 0 && unit == 1 && level == 1) price = parseFloat(product.selling_price) || 0;

    // Cost
    let baseCost = (parseFloat(product.base_cost_price) || parseFloat(product.cost_price) || 0) + 
                   (parseFloat(product.expense_1) || 0) + (parseFloat(product.expense_2) || 0);
    
    let cost = baseCost;
    if (unit != 1) {
        const op = product[`unit_${unit}_operation`]; // 'multiply' or 'divide'
        const qty = parseFloat(product[`unit_${unit}_quantity`]) || 1;
        if(op === 'divide') cost = baseCost / qty;
        else cost = baseCost * qty; // Default to multiply
    }

    $row.find('.price-input').val(price.toFixed(2));
    $row.find('.cost-hidden').val(cost.toFixed(2));
    calculateTotals();
}

// 7. Client Search Logic
function openClientSearch() {
    if(typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        new bootstrap.Modal(document.getElementById('clientSearchModal')).show();
    } else {
        $('#clientSearchModal').modal('show');
    }
}

function openProductSearch() {
    if(typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        new bootstrap.Modal(document.getElementById('productSearchModal')).show();
    } else {
        $('#productSearchModal').modal('show');
    }
}

// Quick Product Search (Enter in code field)
function quickSearchProduct() {
    const code = document.getElementById('quick_product_code').value;
    if (!code) return;

    $.get("{{ route('admin.inventory.products.search') }}", { q: code })
        .done(function(data) {
            // Logic: exact match first, or open modal if multiple/none
            const exactMatch = data.find(p => p.code === code || p.sku === code || p.barcode === code);
            
            if (exactMatch) {
                setQuickProduct(exactMatch);
            } else if (data.length === 1) {
                setQuickProduct(data[0]);
            } else {
                // Open search modal with term
                openProductSearch();
                setTimeout(() => {
                    $('#product_search_input').val(code).trigger('input');
                }, 500); 
            }
        });
}

function setQuickProduct(product) {
    $('#quick_product_id').val(product.id);
    $('#quick_product_name').val(product.name);
    $('#quick_product_price').val(product.selling_price);
    $('#quick_product_data').val(JSON.stringify(product));
    
    // Focus quantity
    $('#quick_product_qty').focus().select();
}

function addQuickProduct() {
    const id = $('#quick_product_id').val();
    const productData = $('#quick_product_data').val();
    
    if(!id || !productData) {
        // If empty, maybe try to search first
        if ($('#quick_product_code').val()) {
            quickSearchProduct();
            return;
        }
        alert('Seleccione un producto primero');
        return;
    }

    const product = JSON.parse(productData);
    const qty = parseFloat($('#quick_product_qty').val()) || 1;
    
    // Use existing selectProduct logic
    selectProduct(product, qty);
    
    // Clear inputs
    $('#quick_product_code').val('').focus();
    $('#quick_product_name').val('');
    $('#quick_product_id').val('');
    $('#quick_product_data').val('');
    $('#quick_product_qty').val(1);
}

function openImportModal() {
    alert('Funcionalidad de Importar Documento en desarrollo.');
    // TODO: Implement modal to select document to import
}

// Client Search - Input listener
$('#client_search_input').on('input', function() {
    const term = $(this).val();
    if(term.length < 2) return;

    $.get("{{ route('admin.gestor.clients.search') }}", { q: term })
        .done(function(data) {
            let html = '';
            if(!data.length) html = '<div class="alert alert-warning py-2">No se encontraron resultados.</div>';
            else {
                data.forEach(c => {
                    html += `
                        <div class="list-group-item list-group-item-action cursor-pointer" onclick='selectClient(${JSON.stringify(c)})'>
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1 font-weight-bold">${c.business_name}</h6>
                                <small>${c.tax_id || ''}</small>
                            </div>
                            <small class="text-muted"><i class="fas fa-phone mr-1"></i> ${c.phone || 'Sin teléfono'}</small>
                        </div>
                    `;
                });
            }
            $('#client_search_results').html(html);
        });
});

// Product Search - Input listener
$('#product_search_input').on('input', function() {
    const term = $(this).val();
    if(term.length < 2) return;

    $.get("{{ route('admin.inventory.products.search') }}", { q: term })
        .done(function(data) {
            let html = '';
            if(!data.length) html = '<div class="alert alert-warning py-2">No se encontraron productos.</div>';
            else {
                data.forEach(p => {
                    html += `
                        <div class="list-group-item list-group-item-action cursor-pointer" onclick='selectProduct(${JSON.stringify(p)})'>
                            <div class="d-flex w-100 justify-content-between">
                                <h6 class="mb-1 font-weight-bold">${p.name}</h6>
                                <small class="text-primary font-weight-bold">$${p.selling_price || 0}</small>
                            </div>
                            <small class="text-muted">Code: ${p.code} | Stock: ${p.stock || 0}</small>
                        </div>
                    `;
                });
            }
            $('#product_search_results').html(html);
        });
});


// Prepare salesmen data from Blade
const salesmenList = @json($salesmen);

function selectClient(client) {
    $('#client_id').val(client.id);
    // Clear search input but show name in display field
    $('#client_search').val('');
    $('#client_search').attr('placeholder', 'Cliente seleccionado...'); 
    $('#client_name_display').val(client.business_name || client.name); 
    
    // Update and show Address Container
    if (client.address) {
        $('#client_address_text').text(client.address);
        // Ensure container is visible (row)
        $('#client_address_container').removeClass('d-none').show();
    } else {
        $('#client_address_container').addClass('d-none').hide();
    }
    
    // Legacy badges support if kept
    $('#client_info').html(`<span class="badge badge-info p-2"><i class="fas fa-id-card mr-1"></i> ${client.tax_id || 'N/A'}</span> <span class="badge badge-secondary p-2"><i class="fas fa-phone mr-1"></i> ${client.phone || 'N/A'}</span>`);
    
    if(typeof bootstrap !== 'undefined' && bootstrap.Modal) {
        const el = document.getElementById('clientSearchModal');
        if (el) {
            const modal = bootstrap.Modal.getInstance(el);
            if(modal) modal.hide();
             else $(el).modal('hide');
        }
    } else {
        $('#clientSearchModal').modal('hide');
    }
}

// Salesman Search
$('#salesman_search').on('input focus', function() {
    const term = $(this).val().toLowerCase();
    const resultsContainer = $('#salesman_search_results');
    
    if (term.length === 0 && !$(this).is(':focus')) {
        resultsContainer.hide();
        return;
    }
    
    // Filter local array
    const matches = salesmenList.filter(s => 
        (s.first_name + ' ' + s.last_name).toLowerCase().includes(term) ||
        (s.email && s.email.toLowerCase().includes(term))
    );
    
    let html = '';
    
    if (matches.length === 0) {
        html = '<div class="list-group-item text-muted">No se encontraron vendedores</div>';
    } else {
        matches.forEach(s => {
            html += `
                <button type="button" class="list-group-item list-group-item-action" onclick="selectSalesman(${s.id}, '${s.first_name} ${s.last_name}')">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-0 font-weight-bold opacity-75">${s.first_name} ${s.last_name}</h6>
                    </div>
                </button>
            `;
        });
    }
    
    resultsContainer.html(html).show();
});

// Hide results when clicking outside
$(document).on('click', function(e) {
    if (!$(e.target).closest('#salesman_search, #salesman_search_results').length) {
        $('#salesman_search_results').hide();
    }
});

function selectSalesman(id, name) {
    $('#salesman_id').val(id);
    $('#salesman_search').val(name);
    $('#salesman_search_results').hide();
}

// Update consecutive number on document type change
$('#document_type').on('change', function() {
    const type = $(this).val();
    // Show loading state
    $('#invoice_number').addClass('text-muted').val('Cargando...');
    
    $.get("{{ route('admin.sales.invoices.next-number') }}", { type: type })
        .done(function(res) {
            $('#invoice_number').removeClass('text-muted').val(res.number);
        })
        .fail(function() {
            $('#invoice_number').val('Error');
            alert('Error al generar el consecutivo');
        });
});

function saveDraft() {
    alert('Funcionalidad de guardar borrador pronto disponible.');
}
</script>
@endpush