@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex justify-content-between align-items-center">
                        <h3 class="card-title">
                            <i class="fas fa-file-invoice-dollar mr-2"></i>
                            Nueva Factura de Venta
                        </h3>
                        <div>
                            <a href="{{ route('admin.sales.invoices.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left mr-1"></i>
                                Volver
                            </a>
                        </div>
                    </div>
                </div>

                <form action="{{ route('admin.sales.invoices.store') }}" method="POST" id="invoice-form">
                    @csrf
                    <div class="card-body">
                        <!-- Información básica -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_id">Cliente <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="client_search" placeholder="Buscar cliente...">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary" onclick="openClientSearch()">
                                                <i class="fas fa-search"></i>
                                            </button>
                                        </div>
                                    </div>
                                    <input type="hidden" name="client_id" id="client_id">
                                    <div id="client_info" class="mt-2"></div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="salesman_id">Vendedor</label>
                                    <select name="salesman_id" id="salesman_id" class="form-control">
                                        <option value="">Seleccionar vendedor</option>
                                        @foreach($salesmen as $salesman)
                                            <option value="{{ $salesman->id }}">{{ $salesman->first_name }} {{ $salesman->last_name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="invoice_date">Fecha de Factura <span class="text-danger">*</span></label>
                                    <input type="date" name="invoice_date" id="invoice_date" class="form-control" value="{{ date('Y-m-d') }}" required>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="due_date">Fecha de Vencimiento</label>
                                    <input type="date" name="due_date" id="due_date" class="form-control">
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="currency">Moneda</label>
                                    <select name="currency" id="currency" class="form-control" required>
                                        <option value="">Seleccionar moneda</option>
                                        @php
                                            $currencyNames = [
                                                'USD' => 'Dólar Americano',
                                                'EUR' => 'Euro',
                                                'VES' => 'Bolívar Venezolano',
                                                'COP' => 'Peso Colombiano',
                                                'MXN' => 'Peso Mexicano',
                                                'GBP' => 'Libra Esterlina',
                                                'ARS' => 'Peso Argentino',
                                                'BRL' => 'Real Brasileño',
                                            ];
                                        @endphp
                                        @foreach($currencies as $currency)
                                            @php
                                                $currencyCode = $currency->to_currency;
                                                $currencyName = $currencyNames[$currencyCode] ?? $currencyCode;
                                                $rate = $currency->rate ?? $currency->rate_real ?? 1.0000;
                                                $calculationType = $currency->calculation_type ?? 'direct';
                                            @endphp
                                            <option value="{{ $currencyCode }}" 
                                                    data-rate="{{ $rate }}"
                                                    data-calculation-type="{{ $calculationType }}"
                                                    data-rate-real="{{ $currency->rate_real ?? null }}"
                                                    data-rate-legal="{{ $currency->rate_legal ?? null }}"
                                                    {{ $currencyCode == 'USD' ? 'selected' : '' }}>
                                                {{ $currencyCode }} - {{ $currencyName }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="exchange_rate">Tipo de Cambio</label>
                                    <input type="number" step="0.0001" name="exchange_rate" id="exchange_rate" class="form-control" value="1.0000" required readonly>
                                    <small class="text-muted">Se actualiza automáticamente según la moneda seleccionada</small>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="payment_terms">Términos de Pago</label>
                                    <select name="payment_terms" id="payment_terms" class="form-control">
                                        <option value="immediate">Inmediato</option>
                                        <option value="15_days">15 días</option>
                                        <option value="30_days">30 días</option>
                                        <option value="60_days">60 días</option>
                                        <option value="90_days">90 días</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Productos -->
                        <div class="row">
                            <div class="col-12">
                                <h5>Productos</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="products-table">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th>Producto</th>
                                                <th>Cantidad</th>
                                                <th>Precio Unit.</th>
                                                <th>Descuento %</th>
                                                <th>Total</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="products-tbody">
                                            <!-- Los productos se agregarán dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                                <button type="button" class="btn btn-primary" onclick="addProduct()">
                                    <i class="fas fa-plus mr-1"></i>
                                    Agregar Producto
                                </button>
                            </div>
                        </div>

                        <!-- Totales -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="notes">Notas</label>
                                    <textarea name="notes" id="notes" class="form-control" rows="3"></textarea>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card">
                                    <div class="card-header">
                                        <h6>Resumen de Totales</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6">Subtotal:</div>
                                            <div class="col-6 text-right" id="subtotal-display">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">Descuento:</div>
                                            <div class="col-6 text-right" id="discount-display">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6">Impuestos:</div>
                                            <div class="col-6 text-right" id="tax-display">$0.00</div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-6"><strong>Total:</strong></div>
                                            <div class="col-6 text-right"><strong id="total-display">$0.00</strong></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="card-footer">
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-secondary" onclick="saveDraft()">
                                <i class="fas fa-save mr-1"></i>
                                Guardar Borrador
                            </button>
                            <div>
                                <button type="button" class="btn btn-warning mr-2" onclick="previewInvoice()">
                                    <i class="fas fa-eye mr-1"></i>
                                    Vista Previa
                                </button>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-check mr-1"></i>
                                    Crear Factura
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal de búsqueda de clientes -->
<div class="modal fade" id="clientSearchModal" tabindex="-1" aria-labelledby="clientSearchModalLabel" aria-hidden="true" style="z-index: 1055;">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="clientSearchModalLabel">
                    <i class="fas fa-user me-2"></i>Buscar Cliente
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control form-control-lg" id="client_search_input" 
                           placeholder="Buscar por nombre, NIT, email..." autofocus>
                </div>
                <div id="client_search_results" class="mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<!-- Modal de búsqueda de productos -->
<div class="modal fade" id="productSearchModal" tabindex="-1" aria-labelledby="productSearchModalLabel" aria-hidden="true" style="z-index: 1055;">
    <div class="modal-dialog modal-xl modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="productSearchModalLabel">
                    <i class="fas fa-search me-2"></i>Buscar Producto
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control form-control-lg" id="product_search_input" 
                           placeholder="Buscar por nombre, código, barcode..." autofocus>
                </div>
                <div id="product_search_results" class="mt-3"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection

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

// Actualizar tipo de cambio cuando se selecciona una moneda
$(document).ready(function() {
    function updateExchangeRate() {
        const selectedOption = $('#currency').find('option:selected');
        const currencyCode = $('#currency').val();
        
        if (!currencyCode) {
            $('#exchange_rate').val('1.0000');
            return;
        }
        
        const rate = parseFloat(selectedOption.data('rate')) || 1.0000;
        const calculationType = selectedOption.data('calculation-type') || 'direct';
        
        // Para monedas duales, usar rate_real; para directas, usar rate
        let exchangeRate = rate;
        if (calculationType === 'dual') {
            const rateReal = selectedOption.data('rate-real');
            exchangeRate = rateReal ? parseFloat(rateReal) : rate;
        }
        
        $('#exchange_rate').val(exchangeRate.toFixed(4));
        
        // Recalcular totales si hay productos
        if (typeof calculateTotals === 'function') {
            calculateTotals();
        }
    }
    
    $('#currency').on('change', updateExchangeRate);
    
    // Inicializar tipo de cambio con la moneda seleccionada por defecto
    updateExchangeRate();
});

function openClientSearch() {
    // Usar Bootstrap 5 si está disponible, sino Bootstrap 4
    if (typeof bootstrap !== 'undefined') {
        const modal = new bootstrap.Modal(document.getElementById('clientSearchModal'));
        modal.show();
    } else {
        $('#clientSearchModal').modal('show');
    }
}

function openProductSearch() {
    // Usar Bootstrap 5 si está disponible, sino Bootstrap 4
    if (typeof bootstrap !== 'undefined') {
        const modal = new bootstrap.Modal(document.getElementById('productSearchModal'));
        modal.show();
    } else {
        $('#productSearchModal').modal('show');
    }
}

function addProduct() {
    openProductSearch();
}

function selectClient(client) {
    selectedClient = client;
    $('#client_id').val(client.id);
    $('#client_info').html(`
        <div class="alert alert-info">
            <strong>${client.business_name}</strong><br>
            <small>NIT: ${client.tax_id || 'N/A'} | Teléfono: ${client.phone || 'N/A'}</small>
        </div>
    `);
    // Cerrar modal - compatible con Bootstrap 4 y 5
    if (typeof bootstrap !== 'undefined') {
        const modal = bootstrap.Modal.getInstance(document.getElementById('clientSearchModal'));
        if (modal) modal.hide();
    } else {
        $('#clientSearchModal').modal('hide');
    }
}

function selectProduct(product) {
    const rowId = `product_${productCounter++}`;
    const row = `
        <tr id="${rowId}">
            <td>
                <input type="hidden" name="products[${productCounter-1}][product_id]" value="${product.id}">
                <strong>${product.name}</strong><br>
                <small class="text-muted">${product.code} | Stock: ${product.stock || 0}</small>
            </td>
            <td>
                <input type="number" step="0.01" name="products[${productCounter-1}][quantity]" 
                       class="form-control quantity-input" value="1" min="0.01" required>
            </td>
            <td>
                <input type="number" step="0.01" name="products[${productCounter-1}][unit_price]" 
                       class="form-control price-input" value="${product.selling_price || 0}" min="0" required>
            </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);
    // Cerrar modal - compatible con Bootstrap 4 y 5
    if (typeof bootstrap !== 'undefined') {
        const modal = bootstrap.Modal.getInstance(document.getElementById('productSearchModal'));
        if (modal) modal.hide();
    } else {
        $('#productSearchModal').modal('hide');
    }
    calculateTotals();
}

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

function calculateTotals() {
    let subtotal = 0;
    let totalDiscount = 0;
    let totalTax = 0;

    $('#products-tbody tr').each(function() {
        const quantity = parseFloat($(this).find('.quantity-input').val()) || 0;
        const price = parseFloat($(this).find('.price-input').val()) || 0;
        const discount = parseFloat($(this).find('.discount-input').val()) || 0;
        
        const lineTotal = quantity * price;
        const discountAmount = lineTotal * (discount / 100);
        const afterDiscount = lineTotal - discountAmount;
        const taxAmount = afterDiscount * 0.16; // 16% IVA
        
        subtotal += afterDiscount;
        totalDiscount += discountAmount;
        totalTax += taxAmount;
        
        $(this).find('.total-price').text('$' + afterDiscount.toFixed(2));
    });

    const total = subtotal + totalTax;

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

// Event listeners
$(document).on('input', '.quantity-input, .price-input, .discount-input', calculateTotals);

// Búsqueda de clientes
$('#client_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length < 2) return;
    
    $.get('/admin/gestor/clients/search', {q: query}, function(data) {
        let html = '';
        data.forEach(client => {
            html += `
                <div class="card mb-2" onclick="selectClient(${JSON.stringify(client).replace(/"/g, '&quot;')})">
                    <div class="card-body">
                        <h6>${client.business_name}</h6>
                        <small class="text-muted">NIT: ${client.tax_id || 'N/A'} | Teléfono: ${client.phone || 'N/A'}</small>
                    </div>
                </div>
            `;
        });
        $('#client_search_results').html(html);
    });
});

// Búsqueda de productos
$('#product_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length < 2) return;
    
    $.get('/admin/inventory/products/search', {q: query}, function(data) {
        let html = '';
        data.forEach(product => {
            html += `
                <div class="card mb-2" onclick="selectProduct(${JSON.stringify(product).replace(/"/g, '&quot;')})">
                    <div class="card-body">
                        <h6>${product.name}</h6>
                        <small class="text-muted">Código: ${product.code} | Precio: $${product.selling_price || 0} | Stock: ${product.stock || 0}</small>
                    </div>
                </div>
            `;
        });
        $('#product_search_results').html(html);
    });
});

function saveDraft() {
    // Implementar guardado como borrador
    alert('Funcionalidad de borrador en desarrollo');
}

function previewInvoice() {
    // Implementar vista previa
    alert('Funcionalidad de vista previa en desarrollo');
}
</script>
@endpush