@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <!-- Header -->
                <div class="card-header bg-light">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title mb-0">
                            <i class="fas fa-edit me-2"></i>
                            Editar Factura de Venta: {{ $invoice->invoice_number }}
                        </h3>
                            <a href="{{ route('admin.sales.invoices.index') }}" class="btn btn-secondary">
                            <i class="fas fa-arrow-left me-1"></i>
                                Volver
                            </a>
                    </div>
                </div>

                <form action="{{ route('admin.sales.invoices.update', $invoice) }}" method="POST" id="invoice-form">
                    @csrf
                    @method('PUT')
                    <input type="hidden" id="price_type_hidden" name="price_type" value="{{ $invoice->price_type === 'retail' ? 'basic' : ($invoice->price_type === 'wholesale' ? 'intermediate' : 'premium') }}">
                    <div id="ajax-error-box" class="alert alert-danger d-none" role="alert">
                        <div class="d-flex justify-content-between align-items-center">
                            <strong><i class="fas fa-exclamation-triangle me-2"></i>Error al actualizar la factura de venta (AJAX)</strong>
                            <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#ajaxErrorDetails" aria-expanded="false" aria-controls="ajaxErrorDetails">
                                Ver detalles
                                                </button>
                                            </div>
                        <ul id="ajax-error-list" class="mb-2 mt-2"></ul>
                        <div class="collapse" id="ajaxErrorDetails">
                            <div class="card card-body bg-light p-2">
<pre id="ajax-error-raw" class="mb-0" style="white-space: pre-wrap; word-break: break-word;"></pre>
                            </div>
                                            </div>
                                        </div>
                                        
                    @if ($errors->any())
                        <div class="alert alert-danger alert-creation-error" role="alert">
                            <div class="d-flex justify-content-between align-items-center">
                                <strong><i class="fas fa-exclamation-triangle me-2"></i>Error al actualizar la factura de venta</strong>
                                <button class="btn btn-sm btn-outline-light" type="button" data-bs-toggle="collapse" data-bs-target="#errorDetails" aria-expanded="false" aria-controls="errorDetails">
                                    Ver detalles
                                </button>
                            </div>
                            <ul class="mb-2 mt-2">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                                @endforeach
                            </ul>
                            <div class="collapse" id="errorDetails">
                                <div class="card card-body bg-light p-2">
<pre class="mb-0" style="white-space: pre-wrap; word-break: break-word;">@json($errors->toArray(), JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE)</pre>
                                        </div>
                                        </div>
                                        </div>
                    @endif
                    @if (session('error'))
                        <div class="alert alert-danger alert-creation-error" role="alert">
                            <strong><i class="fas fa-exclamation-circle me-2"></i>Error al actualizar la factura de venta</strong>
                            <div class="mt-2">{{ session('error') }}</div>
                                        </div>
                    @endif
                    @if (old())
                        <div class="alert alert-secondary" role="alert">
                            <div class="d-flex justify-content-between align-items-center">
                                <strong><i class="fas fa-info-circle me-2"></i>Datos enviados</strong>
                                <button class="btn btn-sm btn-outline-dark" type="button" data-bs-toggle="collapse" data-bs-target="#sentPayload" aria-expanded="false" aria-controls="sentPayload">Ver JSON</button>
                            </div>
                            <div class="collapse" id="sentPayload">
                                <div class="card card-body bg-light p-2">
<pre class="mb-0" style="white-space: pre-wrap; word-break: break-word;">@json(old(), JSON_PRETTY_PRINT|JSON_UNESCAPED_UNICODE)</pre>
                                </div>
                            </div>
                        </div>
                    @endif
                                        
                    <div class="card-body">
                    <!-- Información General -->
                        <div class="row mb-4">
                            <div class="col-md-6">
                                        <div class="form-group mb-3">
                                    <label for="client_id" class="form-label fw-bold">
                                        <i class="fas fa-user me-1 text-primary"></i>Cliente <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="client_search" 
                                               placeholder="Buscar cliente..." readonly value="{{ $invoice->client->business_name ?? '' }}">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="openClientSearch()">
                                                <i class="fas fa-search"></i>
                                            </button>
                                    </div>
                                    <input type="hidden" name="client_id" id="client_id" value="{{ $invoice->client_id }}">
                                    <div id="client_info" class="mt-2">@if($invoice->client)<div class="alert alert-info py-2"><strong>{{ $invoice->client->business_name }}</strong><br><small>NIT: {{ $invoice->client->tax_id ?? 'N/A' }} | Teléfono: {{ $invoice->client->phone ?? 'N/A' }}</small></div>@endif</div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                        <div class="form-group mb-3">
                                    <label for="salesman_id" class="form-label fw-bold">
                                        <i class="fas fa-user-tie me-1 text-primary"></i>Vendedor
                                    </label>
                                            <div class="input-group">
                                        <input type="text" class="form-control" id="salesman_search" 
                                               placeholder="Seleccionar vendedor" readonly value="{{ $invoice->salesman ? ($invoice->salesman->first_name . ' ' . $invoice->salesman->last_name) : '' }}">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="openSalesmanSearch()">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                </div>
                                    <input type="hidden" name="salesman_id" id="salesman_id" value="{{ $invoice->salesman_id ?? '' }}">
                                    <div id="salesman_info" class="mt-2">@if($invoice->salesman)<div class="alert alert-info py-2"><strong>{{ $invoice->salesman->first_name }} {{ $invoice->salesman->last_name }}</strong><br><small>Código: {{ $invoice->salesman->code ?? 'N/A' }}</small></div>@endif</div>
                                </div>
                            </div>
                        </div>

                        <div class="row mb-4">
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="invoice_date" class="form-label fw-bold">
                                        <i class="fas fa-calendar me-1 text-primary"></i>Fecha de Factura <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <input type="date" name="invoice_date" id="invoice_date" 
                                               class="form-control" value="{{ $invoice->invoice_date ? $invoice->invoice_date->format('Y-m-d') : date('Y-m-d') }}" required>
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                </div>
                            </div>
                                        </div>
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="due_date" class="form-label fw-bold">
                                        <i class="fas fa-calendar me-1 text-primary"></i>Fecha de Vencimiento
                                    </label>
                                    <div class="input-group">
                                        <input type="date" name="due_date" id="due_date" class="form-control" value="{{ $invoice->due_date ? $invoice->due_date->format('Y-m-d') : '' }}">
                                        <span class="input-group-text">
                                            <i class="fas fa-calendar-alt"></i>
                                        </span>
                                        </div>
                                        </div>
                                    </div>
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="credit_days" class="form-label fw-bold">
                                        <i class="fas fa-clock me-1 text-primary"></i>Días de Crédito
                                    </label>
                                    <input type="number" name="credit_days" id="credit_days" 
                                           class="form-control" min="0" max="365" value="{{ $invoice->credit_days ?? 30 }}">
                                </div>
                                        </div>
                            <input type="hidden" name="status" value="{{ $invoice->status }}">
                            </div>
                            
                        <div class="row mb-4">
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="document_type" class="form-label fw-bold">
                                        <i class="fas fa-file-invoice me-1 text-primary"></i>Tipo de Documento <span class="text-danger">*</span>
                                    </label>
                                    <select name="document_type" id="document_type" class="form-control" required>
                                        <option value="invoice" {{ $invoice->document_type === 'invoice' ? 'selected' : '' }}>Factura (Con IVA)</option>
                                        <option value="note" {{ $invoice->document_type === 'note' ? 'selected' : '' }}>Nota (Sin IVA)</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="price_type" class="form-label fw-bold">
                                        <i class="fas fa-tags me-1 text-primary"></i>Tipo de Precio
                                    </label>
                                    <select name="price_type" id="price_type" class="form-control">
                                        <option value="basic" {{ ($invoice->price_type === 'retail' || $invoice->price_type === 'basic') ? 'selected' : '' }}>Nivel Básico</option>
                                        <option value="intermediate" {{ ($invoice->price_type === 'wholesale' || $invoice->price_type === 'intermediate') ? 'selected' : '' }}>Nivel Intermedio</option>
                                        <option value="premium" {{ ($invoice->price_type === 'special' || $invoice->price_type === 'premium') ? 'selected' : '' }}>Nivel Premium</option>
                                            </select>
                                </div>
                            </div>
                            <div class="col-md-4">
                                        <div class="form-group mb-3">
                                    <label for="currency" class="form-label fw-bold">
                                        <i class="fas fa-dollar-sign me-1 text-primary"></i>Moneda
                                    </label>
                                    <select name="currency" id="currency" class="form-control">
                                        @foreach($currencies as $cur)
                                            <option value="{{ $cur }}" {{ $invoice->currency === $cur ? 'selected' : ($cur==='USD' && !$invoice->currency ? 'selected' : '') }}>{{ $cur }}</option>
                                        @endforeach
                                    </select>
                                    <small class="text-muted" id="rate-hint">Tasa legal: 1 USD = <span id="rate-value">{{ number_format($invoice->exchange_rate_legal ?? $invoice->exchange_rate ?? 1, 4) }}</span> <span id="rate-currency">{{ $invoice->currency ?? 'USD' }}</span></small>
                                    <input type="hidden" name="exchange_rate" id="exchange_rate" value="{{ $invoice->exchange_rate ?? '1.0000' }}">
                                    <input type="hidden" name="legal_rate" id="legal_rate" value="{{ $invoice->exchange_rate_legal ?? ($invoice->exchange_rate ?? '1.0000') }}">
                                    <input type="hidden" name="legal_currency" id="legal_currency" value="{{ $invoice->legal_currency ?? 'USD' }}">
                                            </div>
                                            </div>
                                        </div>
                                        
                        <div class="row mb-4">
                            <div class="col-md-6">
                                        <div class="form-group mb-3">
                                    <label for="warehouse_id" class="form-label fw-bold">
                                        <i class="fas fa-warehouse me-1 text-primary"></i>Depósito
                                    </label>
                                            <div class="input-group">
                                        <input type="text" class="form-control" id="warehouse_search" 
                                               placeholder="Seleccionar depósito" readonly value="{{ $invoice->warehouse->name ?? '' }}">
                                        <button type="button" class="btn btn-outline-primary" 
                                                onclick="openWarehouseSearch()">
                                                    <i class="fas fa-search"></i>
                                                </button>
                                        </div>
                                    <input type="hidden" name="warehouse_id" id="warehouse_id" value="{{ $invoice->warehouse_id }}">
                                    <div id="warehouse_info" class="mt-2">@if($invoice->warehouse)<div class="alert alert-info py-2"><strong>{{ $invoice->warehouse->name }}</strong><br><small>Código: {{ $invoice->warehouse->code ?? 'N/A' }}</small></div>@endif</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Productos -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="d-flex justify-content-between align-items-center mb-3">
                                    <h5 class="text-primary mb-0">
                                        <i class="fas fa-boxes me-2"></i>Productos
                                    </h5>
                                    <button type="button" class="btn btn-primary" onclick="addProduct()">
                                        <i class="fas fa-plus me-1"></i>
                                        Agregar Producto
                                    </button>
                                    </div>
                                <div class="table-responsive">
                                    <table class="table table-bordered table-hover" id="products-table">
                                        <thead class="table-primary">
                                            <tr>
                                                <th class="text-center">
                                                    <i class="fas fa-barcode me-1"></i>Código
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-box me-1"></i>Producto
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-hashtag me-1"></i>Cantidad
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-dollar-sign me-1"></i>Precio Unit.
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-percentage me-1"></i>Descuento %
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-calculator me-1"></i>Total
                                                </th>
                                                <th class="text-center">
                                                    <i class="fas fa-cogs me-1"></i>Acciones
                                                </th>
                                            </tr>
                                        </thead>
                                        <tbody id="products-tbody">
                                            @foreach($invoice->details as $index => $detail)
                                                @php
                                                    $product = $detail->product;
                                                    $qty = $detail->quantity_ordered ?? $detail->quantity ?? 1;
                                                    $unitPrice = $detail->unit_price ?? 0;
                                                    // El unit_price guardado está en la moneda de la factura
                                                    // Para obtener el precio USD, dividimos por la tasa que se usó al guardar
                                                    // Usamos exchange_rate_legal si existe (multi-moneda), sino exchange_rate
                                                    $rateForUSD = $invoice->exchange_rate_legal ?? $invoice->exchange_rate ?? 1;
                                                    // Si la moneda es USD, el precio ya está en USD
                                                    // Si no, necesitamos convertir de la moneda local a USD
                                                    if ($invoice->currency === 'USD') {
                                                        $usdPrice = $unitPrice;
                                                        $displayPrice = $unitPrice;
                                                    } else {
                                                        // Convertir de moneda local a USD usando la tasa guardada
                                                        $usdPrice = $rateForUSD > 0 ? ($unitPrice / $rateForUSD) : $unitPrice;
                                                        // Mostrar en la moneda de la factura (ya está en esa moneda)
                                                        $displayPrice = $unitPrice;
                                                    }
                                                    $discount = $detail->discount_percentage ?? 0;
                                                @endphp
                                                <tr id="product_{{ $index }}">
                                                    <td class="text-center align-middle">
                                                        <span class="badge bg-light text-dark">{{ $product->code ?? 'N/A' }}</span>
                                                    </td>
                                                    <td>
                                                        <input type="hidden" name="products[{{ $index }}][product_id]" value="{{ $product->id ?? '' }}">
                                                        <strong>{{ $product->name ?? 'N/A' }}</strong><br>
                                                        <small class="text-muted">Stock: {{ $product->stock ?? 0 }}</small>
                                                    </td>
                                                    <td>
                                                        <input type="number" step="0.01" name="products[{{ $index }}][quantity]" 
                                                               class="form-control quantity-input" value="{{ $qty }}" min="0.01" required readonly>
                                                    </td>
                                                    <td>
                                                        <input type="number" step="0.01" name="products[{{ $index }}][unit_price]" 
                                                               class="form-control price-input" value="{{ number_format($displayPrice, 2) }}" min="0" required readonly data-usd="{{ $usdPrice }}">
                                                        <input type="hidden" name="products[{{ $index }}][usd_price]" value="{{ number_format($usdPrice, 6) }}" class="usd-price-hidden">
                                                    </td>
                                                    <td>
                                                        <input type="number" step="0.01" name="products[{{ $index }}][discount_percentage]" 
                                                               class="form-control discount-input" value="{{ $discount }}" min="0" max="100">
                                                    </td>
                                                    <td class="total-price">$0.00</td>
                                                    <td>
                                                        <button type="button" class="btn btn-sm btn-danger" onclick="removeProduct('product_{{ $index }}'); unlockPriceTypeIfEmpty();">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>

                        <!-- Notas y Totales -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="notes" class="form-label fw-bold">
                                        <i class="fas fa-sticky-note me-1 text-primary"></i>Notas Adicionales
                                    </label>
                                    <textarea name="notes" id="notes" class="form-control" rows="4" 
                                              placeholder="Ingrese notas adicionales para la factura...">{{ $invoice->notes ?? '' }}</textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card border-primary" id="usd-summary-card">
                                    <div class="card-header bg-primary text-white">
                                        <h6 class="mb-0">
                                            <i class="fas fa-calculator me-2"></i><span id="usd-summary-title">Resumen de Totales</span>
                                        </h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row mb-2">
                                            <div class="col-6 fw-bold">Subtotal:</div>
                                            <div class="col-6 text-end fw-bold" id="subtotal-display">${{ number_format($invoice->subtotal_usd ?? ($invoice->subtotal_legal ?? 0), 2) }}</div>
                                        </div>
                                        <div class="row mb-2">
                                            <div class="col-6">Descuento:</div>
                                            <div class="col-6 text-end text-danger" id="discount-display">${{ number_format($invoice->discount_usd ?? ($invoice->discount_legal ?? 0), 2) }}</div>
                                        </div>
                                        <div class="row mb-2" id="tax-row" style="{{ $invoice->document_type === 'invoice' ? '' : 'display: none;' }}">
                                            <div class="col-6">Impuestos (16%):</div>
                                            <div class="col-6 text-end text-info" id="tax-display">${{ number_format($invoice->tax_amount_usd ?? ($invoice->tax_legal ?? 0), 2) }}</div>
                                        </div>
                                        <hr class="my-3">
                                        <div class="row">
                                            <div class="col-6">
                                                <h5 class="mb-0 text-primary" id="total-label">Total:</h5>
                                        </div>
                                            <div class="col-6 text-end">
                                                <h5 class="mb-0 text-primary" id="total-display">${{ number_format($invoice->total_amount_usd ?? ($invoice->total_legal ?? 0), 2) }}</h5>
                                        </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Footer -->
                    <div class="card-footer bg-light border-top">
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <button type="button" class="btn btn-outline-secondary me-2" onclick="saveDraft()">
                                    <i class="fas fa-save me-1"></i>
                                Guardar Borrador
                            </button>
                                <button type="button" class="btn btn-outline-danger" onclick="clearInvoice()">
                                    <i class="fas fa-broom me-1"></i>
                                    Limpiar Factura
                                </button>
                                            </div>
                            <div>
                                <button type="button" class="btn btn-outline-warning me-2" onclick="previewInvoice()">
                                    <i class="fas fa-eye me-1"></i>
                                    Vista Previa
                                </button>
                                <button type="submit" class="btn btn-success btn-lg">
                                    <i class="fas fa-check me-1"></i>
                                    Actualizar Factura
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de búsqueda de clientes -->
<div class="modal fade" id="clientSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-search me-2"></i>Buscar Cliente
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="client_search_input" 
                           placeholder="Buscar por nombre, NIT, email...">
                </div>
                <div id="client_search_results"></div>
            </div>
        </div>
    </div>
</div>
                        
<!-- Modal de búsqueda de vendedores -->
<div class="modal fade" id="salesmanSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-search me-2"></i>Buscar Vendedor
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                                    </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="salesman_search_input" 
                           placeholder="Buscar por nombre, código...">
                                                            </div>
                <div id="salesman_search_results"></div>
                                        </div>
                                        </div>
                                    </div>
                                </div>

<!-- Modal de búsqueda de depósitos -->
<div class="modal fade" id="warehouseSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-search me-2"></i>Buscar Depósito
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="warehouse_search_input" 
                           placeholder="Buscar por nombre, código...">
                        </div>
                <div id="warehouse_search_results"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    

<!-- Modal de búsqueda de productos -->
<div class="modal fade" id="productSearchModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-search me-2"></i>Buscar Producto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="product_search_input" 
                           placeholder="Buscar por nombre, código, barcode...">
                </div>
                <div id="product_search_results"></div>
            </div>
        </div>
    </div>
</div>

<!-- Modal avanzado de selección de unidad/nivel -->
<div class="modal fade" id="productAdvancedModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="fas fa-layer-group me-2"></i>Seleccionar Presentación y Nivel de Precio</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="advancedModalBody">
                <div id="unitTabs" class="mb-3"></div>
                <div id="levelRadios" class="mb-3"></div>
                <div class="mb-3">
                    <label for="advanced_qty" class="form-label">Cantidad</label>
                    <input type="number" min="1" step="1" value="1" class="form-control" id="advanced_qty">
                </div>
                <div class="alert alert-info"><b>Precio Unitario Neto:</b> <span id="advanced_price_preview">$0.00</span></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="advancedConfirmBtn"><i class="fas fa-check me-1"></i>Agregar</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
            </div>
        </div>
    </div>
 </div>

@endsection

@push('styles')
<style>
    .form-section {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        border-left: 4px solid #007bff;
    }
    
    .form-section h5 {
        color: #007bff;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e9ecef;
    }
    
    .form-label {
        font-weight: 600;
        color: #495057;
    }
    
    .input-group .btn {
        border-color: #007bff;
    }
    
    .input-group .btn:hover {
        background-color: #007bff;
        color: white;
    }
    .form-control[readonly] {
        background-color: #f8f9fa;
        cursor: not-allowed;
    }
    
    .table th {
        background-color: #007bff !important;
        color: white !important;
        font-weight: 600;
        border: none;
    }
    
    .table td {
        vertical-align: middle;
    }
    
    .card {
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        border: none;
    }
    
    .card-header {
        border-bottom: 2px solid #e9ecef;
    }
    
    .btn-lg {
        padding: 12px 30px;
        font-weight: 600;
    }
    
    .alert {
        border-radius: 6px;
        border: none;
    }
    
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    }
    
    .select2-container--default .select2-selection--single {
        height: 38px;
        border: 1px solid #ced4da;
    }
    
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
    }
    /* Multimoneda UI */
    .summary-card .row-item { padding: 4px 0; }
    .bg-primary-subtle { background: rgba(0,123,255,.1); }
    .mc-price, .mc-total { margin-top: 4px; }
</style>
@endpush

@push('scripts')
<script>
// Variables globales
let productCounter = {{ count($invoice->details) }};
let selectedClient = null, selectedSalesman = null, selectedWarehouse = null;
const taxIdLabel = 'NIT'; // Estado funcional anterior

// Modales estándar
function openClientSearch() { $('#clientSearchModal').modal('show'); loadAllClients(); }
function openSalesmanSearch() { $('#salesmanSearchModal').modal('show'); loadAllSalesmen(); }
function openWarehouseSearch() { $('#warehouseSearchModal').modal('show'); loadAllWarehouses(); }
function openProductSearch() { $('#productSearchModal').modal('show'); loadAllProducts(); }
function addProduct() { openProductSearch(); }
window.addProduct = addProduct;

$.ajaxSetup({headers:{'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}});
let currentCurrency = '{{ $invoice->currency ?? 'USD' }}', currentRate = {{ $invoice->exchange_rate ?? 1.0 }}, legalRate = {{ $invoice->exchange_rate_legal ?? ($invoice->exchange_rate ?? 1.0) }};
// Variables para modal avanzado
let selectedProductAdvanced = null;
let availableTabs = [];
let availableLevelsByTab = {};
let selectedUnitAdvanced = 1;
let selectedLevelAdvanced = 'basic';
// Bloqueo de tipo de precio al agregar productos
let priceTypeLocked = false;
let initialPriceType = null;

// Helpers
function toNumber(value){if(value==null)return 0;return parseFloat(String(value).replace(/[^0-9,.-]/g,'').replace(/,/g,'.'))||0;}
function getUSDPrice(product,type){const s=toNumber(product.selling_price||product.price_basic||0);const w=toNumber(product.wholesale_price||product.price_intermediate||0);const p=toNumber(product.special_price||product.price_premium||0);switch(type){case'intermediate':return w||s;case'premium':return p||s;default:return s;}}

// Cargar todos AJAX
function loadAllClients(){$.get('/admin/gestor/clients/search',d=>displayClients(d));}
function loadAllSalesmen(){$.get('/admin/gestor/salesmen/search',d=>displaySalesmen(d));}
function loadAllWarehouses(){$.get('/admin/inventory/warehouses/search',d=>displayWarehouses(d));}
function loadAllProducts(q){
    const pt=$('#price_type').val() || 'basic';
    const url = '{{ route("admin.sales.invoices.search-products") }}';
    console.log('Buscando productos en:', url, 'query:', q);
    
    $.ajax({
        url: url,
        method: 'GET',
        data: {
            price_type: pt,
            q: (q || ''),
            search: (q || '') // También enviar 'search' por compatibilidad
        },
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
            'Accept': 'application/json'
        },
        success: function(data) {
            console.log('Productos recibidos:', data);
            if (data && Array.isArray(data)) {
                displayProducts(data);
            } else if (data && data.error) {
                $('#product_search_results').html('<div class="alert alert-danger">Error: ' + data.error + '</div>');
            } else {
                displayProducts([]);
            }
        },
        error: function(xhr, status, error) {
            console.error('Error AJAX al buscar productos:', {
                status: xhr.status,
                statusText: xhr.statusText,
                responseText: xhr.responseText,
                error: error
            });
            let errorMsg = 'Error al cargar productos';
            if (xhr.status === 401 || xhr.status === 403) {
                errorMsg = 'No tiene permisos para buscar productos';
            } else if (xhr.status === 404) {
                errorMsg = 'Ruta no encontrada. Verifique la configuración.';
            } else if (xhr.status === 500) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    errorMsg = response.error || 'Error del servidor';
                } catch(e) {
                    errorMsg = 'Error del servidor al buscar productos';
                }
            }
            $('#product_search_results').html('<div class="alert alert-warning">' + errorMsg + '</div>');
        }
    });
}

// Display funciones (sólo resumen para clientes como ejemplo)
function displayClients(clients){let html='';if(!clients.length){html='<div class="alert alert-info">No hay clientes disponibles</div>';}else{clients.forEach(c=>{html+=`<div class="card mb-2" style="cursor:pointer;" onclick="selectClient(${JSON.stringify(c).replace(/"/g,'&quot;')})"><div class="card-body py-2"><h6 class="mb-1">${c.business_name}</h6><small class="text-muted">${taxIdLabel}: ${c.tax_id||'N/A'} | Teléfono: ${c.phone||'N/A'}</small></div></div>`;});}$('#client_search_results').html(html);}
function displaySalesmen(salesmen){
    let html='';
    if(!salesmen.length){
        html='<div class="alert alert-info">No hay vendedores disponibles</div>';
    } else {
        salesmen.forEach(s=>{
            html+=`<div class="card mb-2" style="cursor:pointer;" onclick="selectSalesman(${JSON.stringify(s).replace(/"/g,'&quot;')})"><div class="card-body py-2"><h6 class="mb-1">${s.first_name} ${s.last_name}</h6><small class="text-muted">Código: ${s.code||'N/A'}</small></div></div>`;
        });
    }
    $('#salesman_search_results').html(html);
}
function displayWarehouses(warehouses){
    let html='';
    if(!warehouses.length){
        html='<div class="alert alert-info">No hay depósitos disponibles</div>';
    } else {
        warehouses.forEach(w=>{
            html+=`<div class="card mb-2" style="cursor:pointer;" onclick="selectWarehouse(${JSON.stringify(w).replace(/"/g,'&quot;')})"><div class="card-body py-2"><h6 class="mb-1">${w.name}</h6><small class="text-muted">Código: ${w.code||'N/A'}</small></div></div>`;
        });
    }
    $('#warehouse_search_results').html(html);
}
function displayProducts(products){
    let html='';
    if(!products.length){
        html='<div class="alert alert-info">No hay productos disponibles</div>';
    } else {
        products.forEach(p=>{
            html+='<div class="card mb-2" style="cursor:pointer;" onclick="openProductAdvanced('+JSON.stringify(p).replace(/"/g,'&quot;')+')"><div class="card-body py-2"><h6 class="mb-1">'+(p.name||'')+'</h6><small class="text-muted">Código:'+ (p.code||'')+' | Precio: — (selecciona) | Stock:'+ (p.stock||0) +'</small></div></div>';
        });
    }
    $('#product_search_results').html(html);
}

// Selección de Cliente y Vendedor (faltantes)
function selectClient(client){
    selectedClient = client;
    $('#client_id').val(client.id);
    $('#client_search').val(client.business_name);
    $('#client_info').html('<div class="alert alert-info py-2"><strong>'+ (client.business_name||'') +'</strong><br><small>'+taxIdLabel+': '+(client.tax_id||'N/A')+' | Teléfono: '+(client.phone||'N/A')+'</small></div>');
    if(client.credit_days){ $('#credit_days').val(client.credit_days); calculateDueDate(); }
    if(client.salesman_id){
        $('#salesman_id').val(client.salesman_id);
        // intenta usar nombre proporcionado; si no, consulta endpoint JSON
        if(client.salesman_name){
            $('#salesman_search').val(client.salesman_name);
            $('#salesman_info').html('<div class="alert alert-info py-2"><strong>'+client.salesman_name+'</strong><br><small>Asignado por el cliente</small></div>');
        } else {
            $.get('{{ route("admin.gestor.salesmen.show_json", ["id"=>0]) }}'.replace('/0', '/'+client.salesman_id), function(data){
                var label=(data.name||'Vendedor') + (data.code?(' ('+data.code+')'):'');
                $('#salesman_search').val(label);
                $('#salesman_info').html('<div class="alert alert-info py-2"><strong>'+label+'</strong><br><small>Asignado por el cliente</small></div>');
            });
        }
    }
    $('#clientSearchModal').modal('hide');
}

function selectSalesman(salesman){
    selectedSalesman = salesman;
    $('#salesman_id').val(salesman.id);
    $('#salesman_search').val((salesman.first_name||'')+' '+(salesman.last_name||''));
    $('#salesman_info').html('<div class="alert alert-info py-2"><strong>'+ ((salesman.first_name||'')+' '+(salesman.last_name||'')) +'</strong><br><small>Código: '+(salesman.code||'N/A')+'</small></div>');
    $('#salesmanSearchModal').modal('hide');
}

function selectWarehouse(warehouse){
    selectedWarehouse = warehouse;
    $('#warehouse_id').val(warehouse.id);
    $('#warehouse_search').val(warehouse.name || '');
    $('#warehouse_info').html('<div class="alert alert-info py-2"><strong>'+ (warehouse.name||'') +'</strong><br><small>Código: '+(warehouse.code||'N/A')+'</small></div>');
    $('#warehouseSearchModal').modal('hide');
}


// Selección y agregar producto
function selectProduct(product){const priceType=$('#price_type').val();let unitPrice=0;$.ajax({url:'/admin/sales/invoices/product-price',data:{product_id:product.id,level:priceType,unit:1},method:'GET',async:false,success:resp=>unitPrice=toNumber(resp.price),error:()=>unitPrice=getUSDPrice(product,priceType)});let qty=prompt('Cantidad','1');qty=parseFloat(qty||'1');if(isNaN(qty)||qty<=0)qty=1;const displayPrice=currentCurrency==='USD'?unitPrice:unitPrice*currentRate;const rowId=`product_${productCounter++}`;const row=`<tr id="${rowId}"><td class="text-center align-middle"><span class="badge bg-light text-dark">${product.code}</span></td><td><input type="hidden" name="products[${productCounter-1}][product_id]" value="${product.id}"><strong>${product.name}</strong><br><small class="text-muted">Stock: ${product.stock||0}</small></td><td><input type="number" step="0.01" name="products[${productCounter-1}][quantity]" class="form-control quantity-input" value="${qty}" min="0.01" required readonly></td><td><input type="number" step="0.01" name="products[${productCounter-1}][unit_price]" class="form-control price-input" value="${Number(displayPrice).toFixed(2)}" min="0" required readonly data-usd="${unitPrice}"><input type="hidden" name="products[${productCounter-1}][usd_price]" value="${unitPrice.toFixed(6)}" class="usd-price-hidden"></td><td><input type="number" step="0.01" name="products[${productCounter-1}][discount_percentage]" class="form-control discount-input" value="0" min="0" max="100"></td><td class="total-price">$0.00</td><td><button type="button" class="btn btn-sm btn-danger" onclick="removeProduct('${rowId}'); unlockPriceTypeIfEmpty();"><i class="fas fa-trash"></i></button></td></tr>`;
$('#products-tbody').append(row);$('#productSearchModal').modal('hide');calculateTotals();lockPriceType();}
window.selectProduct=selectProduct;

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

function lockPriceType(){
    if(!priceTypeLocked){
        priceTypeLocked = true;
        if(initialPriceType===null){ initialPriceType = $('#price_type').val(); }
        $('#price_type').prop('disabled', true).addClass('bg-light');
        $('#price_type_hidden').val(initialPriceType);
    }
}

function unlockPriceTypeIfEmpty(){
    if($('#products-tbody tr').length===0){
        priceTypeLocked = false;
        $('#price_type').prop('disabled', false).removeClass('bg-light');
    }
}

// Modal avanzado: construir UI y confirmar
function openProductAdvanced(product){
    selectedProductAdvanced = product;
    // pestañas habilitadas (1..3)
    availableTabs = [product.tab_enabled_1?1:null, product.tab_enabled_2?2:null, product.tab_enabled_3?3:null].filter(v=>v!==null);
    if(availableTabs.length===0){ availableTabs=[1]; }
    // niveles por pestaña (utilidades existentes)
    availableLevelsByTab = {};
    availableTabs.forEach(tab=>{
        const levels=[];
        if(product[`unit_${tab}_utilidad_1`]>0) levels.push('basic');
        if(product[`unit_${tab}_utilidad_2`]>0) levels.push('intermediate');
        if(product[`unit_${tab}_utilidad_3`]>0) levels.push('premium');
        availableLevelsByTab[tab] = levels.length?levels:['basic'];
    });
    selectedUnitAdvanced = availableTabs[0];
    selectedLevelAdvanced = availableLevelsByTab[selectedUnitAdvanced][0];
    renderAdvancedUI();
    updateAdvancedPricePreview();
    $('#productAdvancedModal').modal('show');
}
window.openProductAdvanced = openProductAdvanced;

function renderAdvancedUI(){
    // tabs unidades
    let tabsHtml='<div class="btn-group w-100" role="group">';
    availableTabs.forEach(tab=>{
        const label = (tab===1?(selectedProductAdvanced.unit_1_name||'Unidad'):tab===2?(selectedProductAdvanced.unit_2_name||'Caja'):(selectedProductAdvanced.unit_3_name||'Bulto'));
        tabsHtml += `<button type="button" class="btn btn-outline-primary ${selectedUnitAdvanced===tab?'active':''}" data-unit="${tab}">${label}</button>`;
    });
    tabsHtml+='</div>';
    $('#unitTabs').html(tabsHtml);
    $('#unitTabs button').off('click').on('click',function(){ selectedUnitAdvanced=parseInt($(this).data('unit')); $('#unitTabs button').removeClass('active'); $(this).addClass('active'); selectedLevelAdvanced = (availableLevelsByTab[selectedUnitAdvanced][0]||'basic'); renderLevels(); updateAdvancedPricePreview(); });
    renderLevels();
}

function renderLevels(){
    const levels = availableLevelsByTab[selectedUnitAdvanced]||['basic'];
    let html='';
    levels.forEach(lvl=>{
        const label = lvl==='basic'?'Nivel Básico':(lvl==='intermediate'?'Nivel Intermedio':'Nivel Premium');
        html += `<div class="form-check form-check-inline"><input class="form-check-input" type="radio" name="adv_level" id="adv_${lvl}" value="${lvl}" ${selectedLevelAdvanced===lvl?'checked':''}><label class="form-check-label" for="adv_${lvl}">${label}</label></div>`;
    });
    $('#levelRadios').html(html);
    $('input[name="adv_level"]').off('change').on('change',function(){ selectedLevelAdvanced=$(this).val(); updateAdvancedPricePreview(); });
}

function updateAdvancedPricePreview(){
    // solicitar precio neto al backend según nivel/pestaña
    $.get('/admin/sales/invoices/product-price',{ product_id:selectedProductAdvanced.id, level:selectedLevelAdvanced, unit:selectedUnitAdvanced },function(resp){
        const usd = toNumber(resp.price);
        const shown = currentCurrency==='USD'?usd:(usd*currentRate);
        $('#advanced_price_preview').text((currentCurrency==='USD'?'$':'') + shown.toFixed(2) + (currentCurrency!=='USD'?(' '+currentCurrency):''));
    });
}

$('#advancedConfirmBtn').off('click').on('click', function(){
    const qty = Math.max(1, parseFloat($('#advanced_qty').val())||1);
    // obtener precio definitivo
    $.get('/admin/sales/invoices/product-price',{ product_id:selectedProductAdvanced.id, level:selectedLevelAdvanced, unit:selectedUnitAdvanced },function(resp){
        const unitPriceUSD = toNumber(resp.price);
        const displayPrice = currentCurrency==='USD'?unitPriceUSD:(unitPriceUSD*currentRate);
    const rowId = `product_${productCounter++}`;
        const row=`<tr id="${rowId}"><td class="text-center align-middle"><span class="badge bg-light text-dark">${selectedProductAdvanced.code}</span></td><td><input type="hidden" name="products[${productCounter-1}][product_id]" value="${selectedProductAdvanced.id}"><strong>${selectedProductAdvanced.name}</strong><br><small class="text-muted">Unidad: ${selectedUnitAdvanced} | Nivel: ${selectedLevelAdvanced}</small></td><td><input type="number" step="0.01" name="products[${productCounter-1}][quantity]" class="form-control quantity-input" value="${qty}" min="0.01" required readonly></td><td><input type="number" step="0.01" name="products[${productCounter-1}][unit_price]" class="form-control price-input" value="${displayPrice.toFixed(2)}" min="0" required readonly data-usd="${unitPriceUSD}"><input type="hidden" name="products[${productCounter-1}][usd_price]" value="${unitPriceUSD.toFixed(6)}" class="usd-price-hidden"></td><td><input type="number" step="0.01" name="products[${productCounter-1}][discount_percentage]" class="form-control discount-input" value="0" min="0" max="100"></td><td class="total-price">$0.00</td><td><button type="button" class="btn btn-sm btn-danger" onclick="removeProduct('${rowId}')"><i class="fas fa-trash"></i></button></td></tr>`;
    $('#products-tbody').append(row);
        $('#productAdvancedModal').modal('hide');
    $('#productSearchModal').modal('hide');
    calculateTotals();
        lockPriceType();
    });
});

// Versión enriquecida con multi-moneda y cálculo desde backend para exactitud
// En modo edición, usa los valores guardados en la BD para evitar recálculos con tasas nuevas
function calculateTotals(){
    let subtotal=0,discount=0,tax=0;const dt=$('#document_type').val(),taxr=dt==='invoice'?0.16:0;
    const items=[];
    $('#products-tbody tr').each(function(){
        const quantity=parseFloat($(this).find('.quantity-input').val())||0;
        const priceUSD=parseFloat($(this).find('.price-input').data('usd'))||0;
        const desc=parseFloat($(this).find('.discount-input').val())||0;
        const line=quantity*priceUSD,descAmt=line*(desc/100),afterDesc=line-descAmt,taxAmt=afterDesc*taxr;
        subtotal+=afterDesc;discount+=descAmt;tax+=taxAmt;
        $(this).find('.total-price').text('$'+afterDesc.toFixed(2));
        items.push({ quantity: quantity, usd_price: priceUSD, discount_percentage: desc });
    });
    const total=subtotal+tax;
    $('#subtotal-display').text('$'+subtotal.toFixed(2));
    $('#discount-display').text('$'+discount.toFixed(2));
    $('#tax-display').text('$'+tax.toFixed(2));
    $('#total-display').text('$'+total.toFixed(2));
    // Mostrar/ocultar fila de impuestos en USD según tipo de documento
    if(dt==='invoice') { $('#tax-row').show(); } else { $('#tax-row').hide(); }

    // Si moneda distinta a USD, pintar resumen derecho y USD legal
    if(currentCurrency!=='USD'){
        ensureMcUI();
        // Solo hacer llamada AJAX si estamos en modo creación o si el usuario cambió algo
        // En modo edición inicial, usar los valores calculados arriba para mantener los totales correctos
        const isInitialLoad = typeof window.isInitialLoad !== 'undefined' && window.isInitialLoad === true;
        if(!isInitialLoad) {
            // Llamado autoritativo a backend (usa tasas reales/legales de BD)
            $.post(
                '{{ route('admin.sales.invoices.calculate-preview') }}',
                {
                    currency: currentCurrency,
                    current_rate: currentRate,
                    legal_rate: legalRate,
                    document_type: dt,
                    items: items
                },
                function(resp){
                    if(resp && resp.main && resp.legal){
                        // derecha (moneda seleccionada)
                        if($('#subtotal-selected').length){
                            $('#subtotal-selected').text(parseFloat(resp.main.subtotal).toFixed(2)+' '+currentCurrency);
                            $('#discount-selected').text(parseFloat(resp.main.discount).toFixed(2)+' '+currentCurrency);
                            $('#tax-selected').text(parseFloat(resp.main.tax).toFixed(2)+' '+currentCurrency);
                            $('#total-selected').text(parseFloat(resp.main.total).toFixed(2)+' '+currentCurrency);
                        }
                        // izquierda (USD legal) - Solo actualizar si no es carga inicial
                        $('#subtotal-display').text('$'+parseFloat(resp.legal.subtotal).toFixed(2));
                        $('#discount-display').text('$'+parseFloat(resp.legal.discount).toFixed(2));
                        $('#tax-display').text('$'+parseFloat(resp.legal.tax).toFixed(2));
                        $('#total-display').text('$'+parseFloat(resp.legal.total).toFixed(2));
                        if(dt==='invoice') { $('#tax-row').show(); } else { $('#tax-row').hide(); }
                    }
                }
            );
        } else {
            // En carga inicial, calcular totales en la moneda seleccionada para el panel derecho
            const selectedCurrencyRate = currentRate;
            $('#subtotal-selected').text((subtotal * selectedCurrencyRate).toFixed(2)+' '+currentCurrency);
            $('#discount-selected').text((discount * selectedCurrencyRate).toFixed(2)+' '+currentCurrency);
            $('#tax-selected').text((tax * selectedCurrencyRate).toFixed(2)+' '+currentCurrency);
            $('#total-selected').text((total * selectedCurrencyRate).toFixed(2)+' '+currentCurrency);
        }
    }
    // Marcar que ya no es carga inicial
    window.isInitialLoad = false;
}

// Event listeners
$(document).on('input', '.quantity-input, .price-input, .discount-input', calculateTotals);
$(document).on('change', '#document_type, #price_type', calculateTotals);
// Al cambiar tipo de precio, actualizar precios de las filas existentes
$('#price_type').on('change', function(){
    if(priceTypeLocked && $('#products-tbody tr').length>0){
        $(this).val(initialPriceType || $(this).val());
        return;
    }
    const type = $(this).val();
    $('#products-tbody tr').each(function(){
        // Obtener desde backend por robustez
        const row = $(this);
        const productId = row.find('input[name^="products"][name$="[product_id]"]').val();
        $.get('{{ route("admin.sales.invoices.product-price") }}', { product_id: productId, level: type, unit: 1 }, function(resp){
            const priceUSD = toNumber(resp.price);
            row.find('.price-input').data('usd', priceUSD).val((currentCurrency==='USD'?priceUSD:priceUSD*currentRate).toFixed(2));
    calculateTotals();
        });
    });
});
$('#currency').on('change', function() {
    const cur = $(this).val();
    $('#rate-currency').text(cur);
    currentCurrency = cur;
    if (cur === 'USD') {
        $('#rate-value').text('1.0000');
        $('#exchange_rate').val('1.0000');
        currentRate = 1.0; legalRate = 1.0;
        // Restaurar layout original
        if($('.mc-summary-row').length){
            const usdCard = $('.mc-summary-row .card.border-primary, .mc-summary-row .card.border-success').first();
            $('.mc-summary-row').before(usdCard);
            $('.mc-summary-row').remove();
        }
        $('.mc-price, .mc-total, .mc-summary').remove();
        $('#usd-summary-title').html('Resumen de Totales');
        $('#usd-summary-card').removeClass('border-success').addClass('border-primary');
        $('#usd-summary-card .card-header').removeClass('bg-success').addClass('bg-primary');
        $('#total-display').closest('.row').find('.text-success').removeClass('text-success').addClass('text-primary');
        $('#total-display').removeClass('text-success fs-5').addClass('text-primary');
        $('#total-display').closest('.row').find('h5').removeClass('text-success').addClass('text-primary');
        calculateTotals();
        return;
    }
    $.get('{{ route("admin.sales.invoices.exchange-rate") }}', { to_currency: cur }, function(resp) {
        if (resp) {
            const showLegal = resp.type === 'dual' ? (resp.rate_legal || resp.rate) : resp.rate;
            $('#rate-value').text(parseFloat(showLegal || 0).toFixed(4));
            currentRate = resp.type === 'dual' ? (resp.rate_real || resp.rate || 1) : (resp.rate || 1);
            legalRate = showLegal || 1;
            window.lastExchangeType = resp.type; // <--- Corregido: Detección de dual
            $('#exchange_rate').val(parseFloat(currentRate).toFixed(4));
            $('#legal_rate').val(parseFloat(legalRate).toFixed(4));
            $('#legal_currency').val(resp.legal_currency || 'USD');
            ensureMcUI();
            // Actualizar visualización de precios según nueva moneda
            $('#products-tbody .price-input').each(function(){
                const usd = parseFloat($(this).data('usd')) || 0;
                const shown = currentCurrency === 'USD' ? usd : (usd * currentRate);
                $(this).val(shown.toFixed(2));
            });
            calculateTotals();
        }
    }).fail(function() {
        $('#rate-value').text('—');
        $('#exchange_rate').val('');
    });
});

// Inicializar tasa al cargar si la moneda por defecto no es USD
$(document).ready(function() {
    // No restaurar borrador en modo edición, cargar datos existentes
    // restoreDraft(); // Comentado para edición
    // Inicializar datos desde factura existente
    @if($invoice->currency && $invoice->currency !== 'USD')
    // Configurar moneda y tasas existentes desde la factura guardada
    currentCurrency = '{{ $invoice->currency }}';
    currentRate = {{ $invoice->exchange_rate ?? 1.0 }};
    legalRate = {{ $invoice->exchange_rate_legal ?? ($invoice->exchange_rate ?? 1.0) }};
    $('#rate-value').text(parseFloat({{ $invoice->exchange_rate_legal ?? ($invoice->exchange_rate ?? 1.0) }}).toFixed(4));
    $('#rate-currency').text('{{ $invoice->currency }}');
    $('#exchange_rate').val(parseFloat({{ $invoice->exchange_rate ?? 1.0 }}).toFixed(4));
    $('#legal_rate').val(parseFloat({{ $invoice->exchange_rate_legal ?? ($invoice->exchange_rate ?? 1.0) }}).toFixed(4));
    $('#legal_currency').val('{{ $invoice->legal_currency ?? 'USD' }}');
    // Configurar UI multi-moneda sin cambiar los precios (ya están correctos desde la BD)
    ensureMcUI();
    @else
    // Si es USD, solo actualizar UI
    currentCurrency = 'USD';
    currentRate = 1.0;
    legalRate = 1.0;
    @endif
    // Marcar como carga inicial antes de calcular totales
    window.isInitialLoad = true;
    calculateTotals(); // Calcular totales iniciales con productos cargados
    lockPriceType(); // Bloquear tipo de precio si hay productos
    // NO disparar trigger('change') en modo edición para evitar recálculo de precios
    // Los precios ya están correctos desde la BD
    // Si hay errores, hacer scroll al bloque
    if($('.alert-creation-error').length){
        $('html, body').animate({scrollTop: $('.alert-creation-error').offset().top - 80}, 400);
    }
    // Evitar duplicidad de name en price_type (usar hidden para enviar)
    $('#price_type').attr('name','price_type_display');
    $('#price_type_hidden').val($('#price_type').val());
    // Guardar: validaciones mínimas antes de enviar
    $('#invoice-form').on('submit', function(e){
        // Validación: cliente requerido
        if(!$('#client_id').val()){
            e.preventDefault();
            alert('Debe seleccionar un cliente.');
            return false;
        }
        // Validación: depósito
        if(!$('#warehouse_id').val()){
            e.preventDefault();
            alert('Debe seleccionar un depósito.');
            return false;
        }
        // Validación: al menos un producto
        if($('#products-tbody tr').length===0){
            e.preventDefault();
            alert('Debe agregar al menos un producto.');
            return false;
        }
        // Asegurar tasa actual en el hidden
        $('#exchange_rate').val(parseFloat(currentRate||1).toFixed(4));
        $('#legal_rate').val(parseFloat(legalRate||1).toFixed(4));
        // Asegurar envío de price_type aunque esté deshabilitado
        $('#price_type_hidden').val($('#price_type').val());
        // Normalizar números (coma->punto) y asegurar usd_price
        $('#products-tbody tr').each(function(){
            const priceInput=$(this).find('.price-input');
            const qtyInput=$(this).find('.quantity-input');
            const discInput=$(this).find('.discount-input');
            const usdHidden=$(this).find('.usd-price-hidden');
            const fix=function(el){ if(!el.length) return; el.val(String(el.val()).replace(/,/g,'.')); };
            fix(priceInput); fix(qtyInput); fix(discInput);
            // si no hay hidden usd o viene vacío, lo creamos a partir de data-usd o divisa actual
            let usdVal = parseFloat(priceInput.data('usd'));
            if(!usdHidden.length){
                const fallback = isFinite(usdVal)?usdVal: (parseFloat(priceInput.val())/ (isFinite(currentRate)?currentRate:1));
                $(this).find('td').eq(3).append(`<input type="hidden" name="products[][usd_price]" value="${(fallback||0).toFixed(6)}" class="usd-price-hidden">`);
            } else if(!usdHidden.val()) {
                const fallback = isFinite(usdVal)?usdVal: (parseFloat(priceInput.val())/ (isFinite(currentRate)?currentRate:1));
                usdHidden.val((fallback||0).toFixed(6));
            }
        });
        // Deshabilitar botón para evitar doble submit
        const submitBtn = $(this).find('button[type="submit"]').prop('disabled', true).text('Creando...');
        // Envío vía AJAX para obtener detalle del error
        e.preventDefault();
        const action = $(this).attr('action');
        const formData = new FormData(this);
        fetch(action, {
            method: 'POST', // Laravel maneja PUT con _method
            headers: {
                'Accept': 'application/json',
                'X-Requested-With': 'XMLHttpRequest',
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            body: formData,
            redirect: 'follow'
        }).then(async (res)=>{
            const ct = (res.headers.get('Content-Type')||'').toLowerCase();
            const text = await res.text();
            
            // Si es error 500 o 422, mostrar detalle
            if(!res.ok) {
                let json=null; 
                try{ json = JSON.parse(text); }catch(_){ }
                const box = $('#ajax-error-box');
                const list = $('#ajax-error-list');
                const raw = $('#ajax-error-raw');
                list.empty(); 
                raw.text(text); 
                box.removeClass('d-none');
                
                // Scroll a la caja de error
                $('html, body').animate({ scrollTop: box.offset().top - 100 }, 300);
                
                if(json && json.errors){
                    Object.values(json.errors).flat().forEach(m=> list.append(`<li>${m}</li>`));
                } else if(json && json.message){
                    list.append(`<li>${json.message}</li>`);
                } else if(res.status === 500){
                    list.append(`<li>Error del servidor (500). Ver detalles técnicos abajo.</li>`);
                    list.append(`<li>Status: ${res.status} ${res.statusText}</li>`);
    } else {
                    list.append(`<li>Error ${res.status}: ${res.statusText}</li>`);
                    list.append('<li>Respuesta no estructurada. Revisa "Ver detalles".</li>');
                }
                return;
            }
            
            // éxito con redirección (solo si no es JSON)
            if(res.ok && (res.redirected || res.url.indexOf('/admin/sales/invoices')>-1)){
                // Limpiar formulario antes de redirigir
                clearInvoice();
                window.location = res.url || action.replace('/create','');
                return;
            }
            
            // Si devuelve JSON de éxito, redirigir
            if (ct.indexOf('application/json') !== -1) {
                let json=null; 
                try{ json = JSON.parse(text); }catch(_){ }
                if(json && json.success && json.invoice_id){
                    // Si es borrador, limpiar formulario y mostrar mensaje
                    if(json.is_draft){
                        clearInvoice();
                        alert('Borrador guardado exitosamente.');
                        return;
                    }
                    // Si es factura procesada, redirigir
                    window.location = action.replace('/create', '/' + json.invoice_id);
                    return;
                }
            }
            
            // si devuelve HTML (página renderizada con errores), reemplazar el documento
            if (ct.indexOf('text/html') !== -1) {
                const html = text;
                document.open();
                document.write(html);
                document.close();
                return;
            }
        }).catch(err=>{
            const box=$('#ajax-error-box'); 
            const list=$('#ajax-error-list'); 
            const raw=$('#ajax-error-raw');
            list.empty(); 
            list.append(`<li>Error de red: ${err.message}</li>`); 
            raw.text(String(err.stack||err)); 
            box.removeClass('d-none');
            
            // Scroll a la caja de error
            $('html, body').animate({ scrollTop: box.offset().top - 100 }, 300);
        }).finally(()=>{
            submitBtn.prop('disabled', false).text('Actualizar Factura');
        });
        return false;
    });
    // Auto-guardado (debounce)
    let autoSaveTimer=null;
    $(document).on('input change', '#invoice-form input, #invoice-form select, #invoice-form textarea', function(){
        clearTimeout(autoSaveTimer);
        autoSaveTimer=setTimeout(function(){
            try{ localStorage.setItem('invoice_draft', JSON.stringify(collectInvoiceData())); }catch(e){}
        }, 400);
    });
    // mantener espejo del tipo de precio
    $('#price_type_hidden').val($('#price_type').val());
    $('#price_type').on('change', function(){
        $('#price_type_hidden').val($(this).val());
    });
});
function ensureMcUI(){
    // Añadir placeholders para columnas secundarias en filas
    $('#products-tbody tr').each(function(){
        if($(this).find('.mc-total').length===0){
            $(this).find('.total-price').append('<div class="text-muted small mc-total"></div>');
        }
        if($(this).find('.mc-price').length===0){
            $(this).find('.price-input').closest('td').append('<div class="text-muted small mc-price"></div>');
        }
    });
    // Crear disposición lado a lado si no existe
    if($('.mc-summary-row').length===0){
        const usdCard = $('.card.border-primary').first();
        const row = $('<div class="row g-3 mc-summary-row"></div>');
        const left = $('<div class="col-md-6"></div>');
        const right = $('<div class="col-md-6"></div>');
        usdCard.after(row);
        row.append(left).append(right);
        left.append(usdCard);
        const block = $(`
            <div class="card border-secondary summary-card mc-summary">
                <div class="card-header bg-secondary text-white">
                    <h6 class="mb-0">
                        <i class="fas fa-exchange-alt me-2"></i>
                        Resumen en <span class="badge bg-light text-secondary fw-semibold">${currentCurrency}</span>
                        <small class="ms-2"><i class="fas fa-info-circle"></i> Referencial para documento</small>
                    </h6>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between row-item"><span>Subtotal</span><strong id="subtotal-selected">0</strong></div>
                    <div class="d-flex justify-content-between row-item"><span>Descuento</span><strong id="discount-selected">0</strong></div>
                    <div class="d-flex justify-content-between row-item mc-tax-row"><span>Impuestos</span><strong id="tax-selected">0</strong></div>
                    <hr class="my-3"/>
                    <div class="d-flex justify-content-between row-item"><span class="fw-semibold">Total</span><strong id="total-selected" class="text-secondary">0</strong></div>
                </div>
            </div>`);
        right.append(block);
    } else {
        // actualizar insignia de moneda
        $('.mc-summary .badge').text(currentCurrency);
    }
    // Actualizar título de tarjeta USD para indicar que es el monto a cobrar
    if(currentCurrency !== 'USD') {
        $('#usd-summary-title').html('<span>USD - Monto a Cobrar</span>');
        $('#usd-summary-card').removeClass('border-primary').addClass('border-success');
        $('#usd-summary-card .card-header').removeClass('bg-primary text-white').addClass('bg-success text-white');
        $('#total-label').html('<span>Total a Cobrar:</span>');
        $('#total-display').closest('.row').find('.text-primary').removeClass('text-primary').addClass('text-success');
        $('#total-display').removeClass('text-primary').addClass('text-success fs-5');
        $('#total-display').closest('.row').find('h5').removeClass('text-primary').addClass('text-success');
    } else {
        $('#usd-summary-title').html('Resumen de Totales');
        $('#usd-summary-card').removeClass('border-success').addClass('border-primary');
        $('#usd-summary-card .card-header').removeClass('bg-success').addClass('bg-primary');
        $('#total-label').html('Total:');
        $('#total-display').closest('.row').find('.text-success').removeClass('text-success').addClass('text-primary');
        $('#total-display').removeClass('text-success fs-5').addClass('text-primary');
        $('#total-display').closest('.row').find('h5').removeClass('text-success').addClass('text-primary');
    }
}
$(document).on('change', '#invoice_date, #credit_days', calculateDueDate);

// Búsqueda de clientes
$('#client_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length === 0) {
        loadAllClients();
        return;
    }
    
    $.get('{{ route("admin.gestor.clients.search") }}', {q: query}, function(data) {
        displayClients(data);
    });
});

// Búsqueda de vendedores
$('#salesman_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length === 0) {
        loadAllSalesmen();
        return;
    }
    
    $.get('{{ route("admin.gestor.salesmen.search") }}', {q: query}, function(data) {
        displaySalesmen(data);
    });
});

// Búsqueda de depósitos
$('#warehouse_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length === 0) {
        loadAllWarehouses();
        return;
    }
    
    $.get('{{ route("admin.inventory.warehouses.search") }}', {q: query}, function(data) {
        displayWarehouses(data);
    });
});

// Búsqueda de productos
let productSearchTimer=null;
$('#product_search_input').on('input', function() {
    const query = $(this).val();
    clearTimeout(productSearchTimer);
    productSearchTimer=setTimeout(function(){
        if (!query || query.trim().length===0) { loadAllProducts(''); return; }
        loadAllProducts(query.trim());
    }, 250);
});

function saveDraft() {
    // Validaciones mínimas
    if(!$('#client_id').val()){
        alert('Debe seleccionar un cliente.');
        return;
    }
    if(!$('#warehouse_id').val()){
        alert('Debe seleccionar un depósito.');
        return;
    }
    if($('#products-tbody tr').length===0){
        alert('Debe agregar al menos un producto.');
        return;
    }
    
    const formData = new FormData(document.getElementById('invoice-form'));
    formData.append('save_as_draft', 'true');
    
    const submitBtn = $('button[onclick="saveDraft()"]');
    const originalText = submitBtn.html();
    submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Guardando...');
    
    fetch($('#invoice-form').attr('action'), {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'X-Requested-With': 'XMLHttpRequest',
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        body: formData
    }).then(async (res)=>{
        const text = await res.text();
        
        if(!res.ok) {
            let json=null; 
            try{ json = JSON.parse(text); }catch(_){ }
            let errorMsg = 'Error al guardar el borrador.';
            if(json && json.message) errorMsg = json.message;
            else if(json && json.errors) {
                errorMsg = Object.values(json.errors).flat().join('\n');
            }
            alert(errorMsg);
            return;
        }
        
        let json=null; 
        try{ json = JSON.parse(text); }catch(_){ }
        
        if(json && json.success){
            // Limpiar formulario y localStorage
            clearInvoice();
            alert('Borrador guardado exitosamente.');
        } else {
            // Si es redirección HTML, también limpiar
            clearInvoice();
            alert('Borrador guardado exitosamente.');
        }
    }).catch(err=>{
        console.error('Error:', err);
        alert('Error al guardar el borrador: ' + err.message);
    }).finally(()=>{
        submitBtn.prop('disabled', false).html(originalText);
    });
}

function previewInvoice() {
    // Validaciones mínimas para vista previa
    if(!$('#client_id').val()){
        alert('Debe seleccionar un cliente para ver la vista previa.');
        return;
    }
    if($('#products-tbody tr').length===0){
        alert('Debe agregar al menos un producto para ver la vista previa.');
        return;
    }
    
    // Recolectar datos del formulario
    const formData = collectInvoiceData();
    
    // Obtener información del cliente
    const clientName = $('#client_search').val() || 'Cliente no seleccionado';
    const clientInfo = $('#client_info').text() || '';
    
    // Calcular tasas de cambio
    const exchangeRate = parseFloat(formData.exchange_rate || formData.legal_rate || 1);
    const legalRate = parseFloat(formData.legal_rate || formData.exchange_rate || 1);
    const currency = formData.currency || 'USD';
    
    // Construir HTML de vista previa con diseño profesional
    let previewHtml = `
        <style>
            .invoice-preview {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                color: #2c3e50;
            }
            .invoice-header {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
                padding: 2rem;
                border-radius: 8px 8px 0 0;
                margin-bottom: 2rem;
            }
            .invoice-header h2 {
                font-size: 2.5rem;
                font-weight: 700;
                margin: 0;
                letter-spacing: 2px;
            }
            .invoice-header p {
                margin: 0.5rem 0 0 0;
                opacity: 0.9;
                font-size: 0.95rem;
            }
            .invoice-details-box {
                background: #f8f9fa;
                border-left: 4px solid #667eea;
                padding: 1.5rem;
                border-radius: 6px;
                margin-bottom: 2rem;
            }
            .invoice-details-box strong {
                color: #667eea;
                display: inline-block;
                min-width: 120px;
            }
            .client-vendor-section {
                background: #ffffff;
                border: 1px solid #e9ecef;
                border-radius: 8px;
                padding: 1.5rem;
                margin-bottom: 2rem;
                box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            }
            .client-vendor-section h6 {
                color: #667eea;
                font-weight: 600;
                border-bottom: 2px solid #667eea;
                padding-bottom: 0.5rem;
                margin-bottom: 1rem;
            }
            .invoice-table {
                border-collapse: separate;
                border-spacing: 0;
                width: 100%;
                margin-bottom: 2rem;
                box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            }
            .invoice-table thead {
                background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                color: white;
            }
            .invoice-table thead th {
                padding: 1rem;
                font-weight: 600;
                text-transform: uppercase;
                font-size: 0.85rem;
                letter-spacing: 0.5px;
                border: none;
            }
            .invoice-table tbody tr {
                background: white;
                transition: background 0.2s;
            }
            .invoice-table tbody tr:hover {
                background: #f8f9fa;
            }
            .invoice-table tbody td {
                padding: 1rem;
                border-bottom: 1px solid #e9ecef;
            }
            .invoice-table tfoot {
                background: #f8f9fa;
            }
            .invoice-table tfoot td {
                padding: 0.75rem 1rem;
                font-weight: 600;
                border-top: 2px solid #dee2e6;
            }
            .invoice-table tfoot tr.total-row {
                background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
                color: white;
                font-size: 1.25rem;
            }
            .invoice-table tfoot tr.total-row td {
                padding: 1.25rem 1rem;
                border: none;
                font-weight: 700;
            }
            .usd-amount {
                background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
                color: white;
                font-size: 1.15rem;
                font-weight: 700;
                padding: 1rem;
                border-radius: 6px;
                text-align: center;
                margin-top: 1rem;
                box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            }
            .notes-section {
                background: #fff9e6;
                border-left: 4px solid #ffc107;
                padding: 1.5rem;
                border-radius: 6px;
                margin-top: 2rem;
            }
        </style>
        <div class="modal fade" id="previewInvoiceModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-fullscreen-lg-down modal-xl">
                <div class="modal-content invoice-preview" style="border: none; box-shadow: 0 10px 40px rgba(0,0,0,0.2);">
                    <div class="modal-header invoice-header" style="border: none;">
                        <div class="w-100">
                            <div class="row align-items-center">
                                <div class="col-md-8">
                                    <h2>SOSSYSTEM</h2>
                                    <p class="mb-0">Factura de Venta</p>
                    </div>
                                <div class="col-md-4 text-end">
                                    <button type="button" class="btn btn-light btn-sm" data-bs-dismiss="modal">
                                        <i class="fas fa-times me-1"></i>Cerrar
                                    </button>
                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-body" style="background: #f8f9fa; padding: 2rem;">
                        <div class="container-fluid">
                            <div class="invoice-details-box">
                                <div class="row">
                                    <div class="col-md-4">
                                        <p class="mb-2"><strong>Fecha:</strong> ${formData.invoice_date || 'No especificada'}</p>
                                        <p class="mb-2"><strong>Vencimiento:</strong> ${formData.due_date || 'No especificado'}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="mb-2"><strong>Días de Crédito:</strong> ${formData.credit_days || 0}</p>
                                        <p class="mb-2"><strong>Tipo:</strong> ${formData.document_type === 'invoice' ? 'Factura' : 'Nota de Crédito'}</p>
                                    </div>
                                    <div class="col-md-4">
                                        <p class="mb-2"><strong>Moneda:</strong> ${currency}</p>
                                        ${currency !== 'USD' ? `<p class="mb-0"><strong>Tasa Legal:</strong> ${legalRate.toFixed(4)}</p>` : ''}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <div class="client-vendor-section">
                                        <h6><i class="fas fa-user me-2"></i>Cliente</h6>
                                        <p class="mb-1"><strong style="font-size: 1.1rem;">${clientName}</strong></p>
                                        <p class="mb-0 text-muted"><small>${clientInfo.substring(0, 150)}</small></p>
                                    </div>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <div class="client-vendor-section">
                                        <h6><i class="fas fa-user-tie me-2"></i>Vendedor</h6>
                                        <p class="mb-0" style="font-size: 1rem;">${formData.salesman_search || 'No asignado'}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="table-responsive">
                                <table class="invoice-table">
                                    <thead>
                                        <tr>
                                            <th style="border-radius: 8px 0 0 0;">Código</th>
                                            <th>Producto</th>
                                            <th class="text-center">Cantidad</th>
                                            <th class="text-end">Precio Unit.</th>
                                            <th class="text-center">Desc. %</th>
                                            <th class="text-end" style="border-radius: 0 8px 0 0;">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>`;
    
    let subtotal = 0;
    let totalDiscount = 0;
    
    formData.items.forEach(function(item){
        const qty = parseFloat(item.quantity || 0);
        const price = parseFloat(item.unit_price || 0);
        const discount = parseFloat(item.discount_percentage || 0);
        const lineSubtotal = qty * price;
        const lineDiscount = lineSubtotal * (discount / 100);
        const lineTotal = lineSubtotal - lineDiscount;
        
        subtotal += lineTotal;
        totalDiscount += lineDiscount;
        
        previewHtml += `
                                        <tr>
                                            <td><code style="background: #e9ecef; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.85rem;">${item.product_code || 'N/A'}</code></td>
                                            <td><strong>${item.product_name || 'Producto'}</strong></td>
                                            <td class="text-center">${qty.toFixed(2)}</td>
                                            <td class="text-end">${currency} ${parseFloat(price).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</td>
                                            <td class="text-center">${discount > 0 ? discount.toFixed(2) + '%' : '-'}</td>
                                            <td class="text-end"><strong>${currency} ${parseFloat(lineTotal).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>`;
    });
    
    const tax = formData.document_type === 'invoice' ? (subtotal * 0.16) : 0;
    const total = subtotal + tax;
    
    // Calcular monto en USD
    let totalUSD = total;
    if (currency !== 'USD') {
        totalUSD = legalRate > 0 ? (total / legalRate) : total;
    }
    
    previewHtml += `
                                    </tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="5" class="text-end"><strong>Subtotal:</strong></td>
                                            <td class="text-end"><strong>${currency} ${parseFloat(subtotal).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>
                                        ${totalDiscount > 0 ? `
                                        <tr>
                                            <td colspan="5" class="text-end"><strong>Descuento:</strong></td>
                                            <td class="text-end"><strong>${currency} ${parseFloat(totalDiscount).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>` : ''}`;
    
    if(tax > 0) {
        previewHtml += `
                                        <tr>
                                            <td colspan="5" class="text-end"><strong>IVA (16%):</strong></td>
                                            <td class="text-end"><strong>${currency} ${parseFloat(tax).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>`;
    }
    
    previewHtml += `
                                        <tr class="total-row">
                                            <td colspan="5" class="text-end" style="border-radius: 0 0 0 8px;"><strong>Total:</strong></td>
                                            <td class="text-end" style="border-radius: 0 0 8px 0;"><strong>${currency} ${parseFloat(total).toLocaleString('es-VE', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                            
                            ${currency !== 'USD' ? `
                            <div class="usd-amount">
                                <i class="fas fa-dollar-sign me-2"></i>
                                <strong>Monto a Cobrar: USD ${parseFloat(totalUSD).toLocaleString('en-US', {minimumFractionDigits: 2, maximumFractionDigits: 2})}</strong>
                            </div>` : ''}
                            
                            ${formData.notes ? `
                            <div class="notes-section">
                                <h6 class="mb-2"><i class="fas fa-sticky-note me-2"></i>Notas Adicionales</h6>
                                <p class="mb-0">${formData.notes}</p>
                            </div>` : ''}
                        </div>
                    </div>
                    <div class="modal-footer" style="background: #f8f9fa; border: none;">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                            <i class="fas fa-times me-1"></i>Cerrar
                        </button>
                    </div>
                </div>
            </div>
        </div>`;
    
    // Eliminar modal anterior si existe
    $('#previewInvoiceModal').remove();
    
    // Agregar y mostrar modal
    $('body').append(previewHtml);
    const previewModal = new bootstrap.Modal(document.getElementById('previewInvoiceModal'));
    previewModal.show();
    
    // Limpiar modal cuando se cierre
    $('#previewInvoiceModal').on('hidden.bs.modal', function(){
        $(this).remove();
    });
}

function calculateDueDate() {
    const invoiceDate = $('#invoice_date').val();
    const creditDays = parseInt($('#credit_days').val()) || 0;
    
    if (invoiceDate && creditDays > 0) {
        const date = new Date(invoiceDate);
        date.setDate(date.getDate() + creditDays);
        $('#due_date').val(date.toISOString().split('T')[0]);
    }
}

// ---------------- Cache/Borrador ----------------
function collectInvoiceData(){
    const items=[];
    $('#products-tbody tr').each(function(){
        const $row = $(this);
        // Extraer código del badge en la primera columna
        const productCode = $row.find('td:first-child .badge').text().trim() || '';
        // Extraer nombre del producto (texto dentro de <strong> en la segunda columna)
        const productName = $row.find('td:nth-child(2) strong').text().trim() || '';
        // Extraer stock (texto dentro de <small> que contiene "Stock:")
        const stockText = $row.find('td:nth-child(2) small').text().trim() || '';
        const stockMatch = stockText.match(/Stock:\s*(\d+(?:\.\d+)?)/i);
        const productStock = stockMatch ? stockMatch[1] : '0';
        
        items.push({
            product_id: $row.find('input[name$="[product_id]"]').val(),
            product_code: productCode,
            product_name: productName,
            product_stock: productStock,
            quantity: $row.find('.quantity-input').val(),
            unit_price: $row.find('.price-input').val(),
            usd_price: $row.find('.price-input').data('usd'),
            discount_percentage: $row.find('.discount-input').val()
        });
    });
    return {
        client_id: $('#client_id').val(),
        client_search: $('#client_search').val(),
        salesman_id: $('#salesman_id').val(),
        salesman_search: $('#salesman_search').val(),
        invoice_date: $('#invoice_date').val(),
        due_date: $('#due_date').val(),
        credit_days: $('#credit_days').val(),
        document_type: $('#document_type').val(),
        price_type: $('#price_type').val(),
        currency: $('#currency').val(),
        exchange_rate: $('#exchange_rate').val(),
        legal_rate: $('#legal_rate').val(),
        legal_currency: $('#legal_currency').val(),
        warehouse_id: $('#warehouse_id').val(),
        warehouse_search: $('#warehouse_search').val(),
        notes: $('#notes').val(),
        items: items
    };
}

function restoreDraft(){
    try{
        const raw = localStorage.getItem('invoice_draft');
        if(!raw) return;
        const d = JSON.parse(raw);
        if(!d) return;
        // Campos simples
        $('#client_id').val(d.client_id||''); $('#client_search').val(d.client_search||'');
        $('#salesman_id').val(d.salesman_id||''); $('#salesman_search').val(d.salesman_search||'');
        $('#invoice_date').val(d.invoice_date||''); $('#due_date').val(d.due_date||'');
        $('#credit_days').val(d.credit_days||''); $('#document_type').val(d.document_type||'invoice');
        $('#price_type').val(d.price_type||'basic'); $('#currency').val(d.currency||'USD');
        $('#exchange_rate').val(d.exchange_rate||'1.0000');
        $('#warehouse_id').val(d.warehouse_id||''); $('#warehouse_search').val(d.warehouse_search||'');
        $('#notes').val(d.notes||'');
        // Items
        if(Array.isArray(d.items)){
            $('#products-tbody').empty();
            // Restaurar productos y cargar información faltante desde el servidor
            const productPromises = [];
            d.items.forEach(function(it, index){
                const rowId = `product_${productCounter++}`;
                const displayPrice = parseFloat(it.unit_price||0);
                const usdPrice = parseFloat(it.usd_price||it.unit_price||0);
                
                // Si faltan datos del producto, cargarlos desde el servidor
                if ((!it.product_code || !it.product_name || it.product_name === '(Producto recuperado)') && it.product_id) {
                    // Crear fila temporal y luego actualizar con datos del servidor
                    const productCode = it.product_code || '#';
                    const productName = it.product_name || 'Cargando...';
                    const productStock = it.product_stock || '0';
                    
                    const row=`<tr id="${rowId}"><td class="text-center align-middle"><span class="badge bg-light text-dark">${productCode}</span></td><td><input type="hidden" name="products[${productCounter-1}][product_id]" value="${it.product_id||''}"><strong>${productName}</strong><br><small class="text-muted">Stock: ${productStock}</small></td><td><input type="number" step="0.01" name="products[${productCounter-1}][quantity]" class="form-control quantity-input" value="${it.quantity||1}" min="0.01" required readonly></td><td><input type="number" step="0.01" name="products[${productCounter-1}][unit_price]" class="form-control price-input" value="${displayPrice.toFixed(2)}" min="0" required readonly data-usd="${usdPrice}"><input type="hidden" name="products[${productCounter-1}][usd_price]" value="${usdPrice.toFixed(6)}" class="usd-price-hidden"></td><td><input type="number" step="0.01" name="products[${productCounter-1}][discount_percentage]" class="form-control discount-input" value="${it.discount_percentage||0}" min="0" max="100"></td><td class="total-price">$0.00</td><td><button type="button" class="btn btn-sm btn-danger" onclick="removeProduct('${rowId}'); unlockPriceTypeIfEmpty();"><i class="fas fa-trash"></i></button></td></tr>`;
                    $('#products-tbody').append(row);
                    
                    // Cargar información del producto desde el servidor
                    const loadPromise = $.ajax({
                        url: '{{ route("admin.sales.invoices.search-products") }}',
                        method: 'GET',
                        data: { 
                            q: it.product_id,
                            price_type: $('#price_type').val() || 'basic'
                        },
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                            'Accept': 'application/json'
                        },
                        success: function(response) {
                            if (response && Array.isArray(response) && response.length > 0) {
                                const product = response.find(p => p.id == it.product_id) || response[0];
                                const $row = $('#' + rowId);
                                // Actualizar código
                                $row.find('td:first-child .badge').text(product.code || '#');
                                // Actualizar nombre y stock
                                const $nameCell = $row.find('td:nth-child(2)');
                                $nameCell.find('strong').text(product.name || 'Producto');
                                $nameCell.find('small').html('Stock: ' + (product.stock || 0));
                            }
                        },
                        error: function() {
                            // Si falla, mantener los datos que ya tenemos
                            console.warn('No se pudo cargar información del producto ID: ' + it.product_id);
                        }
                    });
                    productPromises.push(loadPromise);
                } else {
                    // Usar datos guardados si están completos
                    const productCode = it.product_code || '#';
                    const productName = it.product_name || 'Producto';
                    const productStock = it.product_stock || '0';
                    
                    const row=`<tr id="${rowId}"><td class="text-center align-middle"><span class="badge bg-light text-dark">${productCode}</span></td><td><input type="hidden" name="products[${productCounter-1}][product_id]" value="${it.product_id||''}"><strong>${productName}</strong><br><small class="text-muted">Stock: ${productStock}</small></td><td><input type="number" step="0.01" name="products[${productCounter-1}][quantity]" class="form-control quantity-input" value="${it.quantity||1}" min="0.01" required readonly></td><td><input type="number" step="0.01" name="products[${productCounter-1}][unit_price]" class="form-control price-input" value="${displayPrice.toFixed(2)}" min="0" required readonly data-usd="${usdPrice}"><input type="hidden" name="products[${productCounter-1}][usd_price]" value="${usdPrice.toFixed(6)}" class="usd-price-hidden"></td><td><input type="number" step="0.01" name="products[${productCounter-1}][discount_percentage]" class="form-control discount-input" value="${it.discount_percentage||0}" min="0" max="100"></td><td class="total-price">$0.00</td><td><button type="button" class="btn btn-sm btn-danger" onclick="removeProduct('${rowId}'); unlockPriceTypeIfEmpty();"><i class="fas fa-trash"></i></button></td></tr>`;
                    $('#products-tbody').append(row);
                }
            });
            
            // Esperar a que se carguen todos los productos antes de calcular totales
            Promise.all(productPromises).finally(function() {
                lockPriceType();
                calculateTotals();
            });
            
            // Si no hay promesas, calcular inmediatamente
            if (productPromises.length === 0) {
                lockPriceType();
                calculateTotals();
            }
        }
        // Aplicar moneda restaurada
        $('#currency').trigger('change');
    }catch(e){ console.warn('No se pudo restaurar borrador', e); }
}

function clearInvoice(){
    try{ localStorage.removeItem('invoice_draft'); }catch(e){}
    // Reset campos
    $('#invoice-form')[0].reset();
    $('#client_id, #salesman_id, #warehouse_id').val('');
    $('#client_search, #salesman_search, #warehouse_search').val('');
    $('#client_info, #salesman_info, #warehouse_info').html('');
    $('#products-tbody').empty();
    $('#subtotal-display').text('$0.00');$('#discount-display').text('$0.00');$('#tax-display').text('$0.00');$('#total-display').text('$0.00');
    $('#currency').val('USD').trigger('change');
    initialPriceType=null; priceTypeLocked=false; $('#price_type').prop('disabled', false).removeClass('bg-light');
    productCounter = 0; // Resetear contador de productos
    // Ocultar errores
    $('#ajax-error-box').addClass('d-none');
}
</script>
@endpush