@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title mb-0">
                        <i class="fas fa-file-invoice-dollar mr-2"></i>
                        Nueva Factura de Compra
                    </h3>
                </div>
                <form action="{{ route('admin.purchases.invoices.store') }}" method="POST" id="invoice-form">
                    @csrf
                    <div class="card-body">
                        <!-- Información General -->
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="supplier_id" class="required">Proveedor</label>
                                    <select name="supplier_id" id="supplier_id" class="form-control @error('supplier_id') is-invalid @enderror" required>
                                        <option value="">Seleccionar proveedor...</option>
                                        @foreach($suppliers as $supplier)
                                            <option value="{{ $supplier->id }}" 
                                                    data-business-name="{{ $supplier->business_name }}"
                                                    data-contact-name="{{ $supplier->contact_person }}"
                                                    data-email="{{ $supplier->email }}"
                                                    data-phone="{{ $supplier->phone }}"
                                                    data-address="{{ $supplier->address }}"
                                                    data-credit-limit="{{ $supplier->credit_limit }}"
                                                    data-credit-days="{{ $supplier->credit_days }}">
                                                {{ $supplier->business_name }} - {{ $supplier->contact_person }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('supplier_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="purchase_order_id">Orden de Compra</label>
                                    <select name="purchase_order_id" id="purchase_order_id" class="form-control">
                                        <option value="">Seleccionar orden de compra...</option>
                                        @foreach($purchaseOrders as $order)
                                            <option value="{{ $order->id }}" 
                                                    data-supplier-id="{{ $order->supplier_id }}"
                                                    data-total="{{ $order->total_amount }}">
                                                {{ $order->order_number }} - {{ $order->supplier ? $order->supplier->business_name : 'N/A' }} ({{ number_format($order->total_amount, 2) }})
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Información del Proveedor -->
                        <div class="row" id="supplier-info" style="display: none;">
                            <div class="col-12">
                                <div class="alert alert-info">
                                    <h6><i class="fas fa-building mr-1"></i> Información del Proveedor</h6>
                                    <div class="row">
                                        <div class="col-md-3">
                                            <strong>Empresa:</strong><br>
                                            <span id="supplier-business-name"></span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Contacto:</strong><br>
                                            <span id="supplier-contact-name"></span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Email:</strong><br>
                                            <span id="supplier-email"></span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Teléfono:</strong><br>
                                            <span id="supplier-phone"></span>
                                        </div>
                                    </div>
                                    <div class="row mt-2">
                                        <div class="col-md-6">
                                            <strong>Dirección:</strong><br>
                                            <span id="supplier-address"></span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Límite de Crédito:</strong><br>
                                            <span id="supplier-credit-limit"></span>
                                        </div>
                                        <div class="col-md-3">
                                            <strong>Días de Crédito:</strong><br>
                                            <span id="supplier-credit-days"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Información de la Factura -->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="invoice_number" class="required">N° Factura</label>
                                    <input type="text" name="invoice_number" id="invoice_number" 
                                           class="form-control @error('invoice_number') is-invalid @enderror" 
                                           value="{{ old('invoice_number') }}" required>
                                    @error('invoice_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="document_number">N° Documento</label>
                                    <input type="text" name="document_number" id="document_number" 
                                           class="form-control @error('document_number') is-invalid @enderror" 
                                           value="{{ old('document_number') }}">
                                    @error('document_number')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="invoice_date" class="required">Fecha de Factura</label>
                                    <input type="date" name="invoice_date" id="invoice_date" 
                                           class="form-control @error('invoice_date') is-invalid @enderror" 
                                           value="{{ old('invoice_date', date('Y-m-d')) }}" required>
                                    @error('invoice_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="due_date" class="required">Fecha de Vencimiento</label>
                                    <input type="date" name="due_date" id="due_date" 
                                           class="form-control @error('due_date') is-invalid @enderror" 
                                           value="{{ old('due_date') }}" required>
                                    @error('due_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="received_date">Fecha de Recepción</label>
                                    <input type="date" name="received_date" id="received_date" 
                                           class="form-control @error('received_date') is-invalid @enderror" 
                                           value="{{ old('received_date') }}">
                                    @error('received_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="currency" class="required">Moneda</label>
                                    <select name="currency" id="currency" class="form-control @error('currency') is-invalid @enderror" required>
                                        <option value="USD" {{ old('currency') == 'USD' ? 'selected' : '' }}>USD - Dólar Americano</option>
                                        <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                        <option value="COP" {{ old('currency') == 'COP' ? 'selected' : '' }}>COP - Peso Colombiano</option>
                                        <option value="VES" {{ old('currency') == 'VES' ? 'selected' : '' }}>VES - Bolívar Venezolano</option>
                                    </select>
                                    @error('currency')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="exchange_rate" class="required">Tasa de Cambio</label>
                                    <input type="number" name="exchange_rate" id="exchange_rate" 
                                           class="form-control @error('exchange_rate') is-invalid @enderror" 
                                           value="{{ old('exchange_rate', 1) }}" step="0.0001" min="0" required>
                                    @error('exchange_rate')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="discount_amount">Descuento</label>
                                    <input type="number" name="discount_amount" id="discount_amount" 
                                           class="form-control @error('discount_amount') is-invalid @enderror" 
                                           value="{{ old('discount_amount', 0) }}" step="0.01" min="0">
                                    @error('discount_amount')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Gastos de Importación -->
                        <div class="row mt-4">
                            <div class="col-12">
                                <h5><i class="fas fa-ship mr-2"></i> Gastos de Importación</h5>
                                <div class="alert alert-info">
                                    <i class="fas fa-info-circle mr-2"></i>
                                    Los gastos de importación se distribuirán proporcionalmente entre los productos según su valor.
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="import_cost">Gasto de Importación</label>
                                    <input type="number" name="import_cost" id="import_cost" 
                                           class="form-control @error('import_cost') is-invalid @enderror" 
                                           value="{{ old('import_cost', 0) }}" step="0.01" min="0">
                                    @error('import_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="customs_cost">Gasto de Aduanas</label>
                                    <input type="number" name="customs_cost" id="customs_cost" 
                                           class="form-control @error('customs_cost') is-invalid @enderror" 
                                           value="{{ old('customs_cost', 0) }}" step="0.01" min="0">
                                    @error('customs_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="freight_cost">Gasto de Fletes</label>
                                    <input type="number" name="freight_cost" id="freight_cost" 
                                           class="form-control @error('freight_cost') is-invalid @enderror" 
                                           value="{{ old('freight_cost', 0) }}" step="0.01" min="0">
                                    @error('freight_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="variable_cost">Gastos Variables</label>
                                    <input type="number" name="variable_cost" id="variable_cost" 
                                           class="form-control @error('variable_cost') is-invalid @enderror" 
                                           value="{{ old('variable_cost', 0) }}" step="0.01" min="0">
                                    @error('variable_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="nationalization_cost">Gasto de Nacionalización</label>
                                    <input type="number" name="nationalization_cost" id="nationalization_cost" 
                                           class="form-control @error('nationalization_cost') is-invalid @enderror" 
                                           value="{{ old('nationalization_cost', 0) }}" step="0.01" min="0">
                                    @error('nationalization_cost')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="form-group">
                                    <label for="total_import_costs">Total Gastos</label>
                                    <input type="number" name="total_import_costs" id="total_import_costs" 
                                           class="form-control" readonly value="0" step="0.01">
                                    <small class="form-text text-muted">Calculado automáticamente</small>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="import_cost_notes">Notas sobre Gastos de Importación</label>
                                    <textarea name="import_cost_notes" id="import_cost_notes" rows="2" 
                                              class="form-control @error('import_cost_notes') is-invalid @enderror" 
                                              placeholder="Detalles adicionales sobre los gastos de importación...">{{ old('import_cost_notes') }}</textarea>
                                    @error('import_cost_notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <!-- Productos -->
                        <div class="row">
                            <div class="col-12">
                                <h5><i class="fas fa-boxes mr-2"></i> Productos</h5>
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="products-table">
                                        <thead class="thead-dark">
                                            <tr>
                                                <th width="5%">#</th>
                                                <th width="25%">Producto</th>
                                                <th width="10%">Cantidad</th>
                                                <th width="15%">Precio Unit.</th>
                                                <th width="15%">Total</th>
                                                <th width="10%">Recibido</th>
                                                <th width="10%">Actualizar Precio</th>
                                                <th width="10%">Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="products-tbody">
                                            <!-- Los productos se agregarán dinámicamente -->
                                        </tbody>
                                    </table>
                                </div>
                                <button type="button" class="btn btn-success btn-sm" id="add-product">
                                    <i class="fas fa-plus mr-1"></i>
                                    Agregar Producto
                                </button>
                            </div>
                        </div>

                        <!-- Totales -->
                        <div class="row mt-4">
                            <div class="col-md-8"></div>
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-body">
                                        <div class="row">
                                            <div class="col-6"><strong>Subtotal:</strong></div>
                                            <div class="col-6 text-right" id="subtotal-display">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>Descuento:</strong></div>
                                            <div class="col-6 text-right" id="discount-display">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>Impuestos:</strong></div>
                                            <div class="col-6 text-right" id="tax-display">$0.00</div>
                                        </div>
                                        <div class="row">
                                            <div class="col-6"><strong>Gastos de Importación:</strong></div>
                                            <div class="col-6 text-right" id="import-costs-display">$0.00</div>
                                        </div>
                                        <hr>
                                        <div class="row">
                                            <div class="col-6"><strong>Total:</strong></div>
                                            <div class="col-6 text-right" id="total-display">$0.00</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Notas -->
                        <div class="row mt-4">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="notes">Notas</label>
                                    <textarea name="notes" id="notes" rows="3" 
                                              class="form-control @error('notes') is-invalid @enderror">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_terms">Términos de Pago</label>
                                    <textarea name="payment_terms" id="payment_terms" rows="3" 
                                              class="form-control @error('payment_terms') is-invalid @enderror">{{ old('payment_terms') }}</textarea>
                                    @error('payment_terms')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-md-6">
                                <a href="{{ route('admin.purchases.invoices.index') }}" class="btn btn-secondary">
                                    <i class="fas fa-arrow-left mr-1"></i>
                                    Cancelar
                                </a>
                            </div>
                            <div class="col-md-6 text-right">
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save mr-1"></i>
                                    Guardar Factura
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Modal para buscar productos -->
<div class="modal fade" id="product-search-modal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buscar Producto</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" id="product-search" class="form-control" placeholder="Buscar por nombre, código o código de barras...">
                </div>
                <div id="product-search-results"></div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
let productCounter = 0;
let selectedProducts = [];

$(document).ready(function() {
    // Mostrar información del proveedor
    $('#supplier_id').on('change', function() {
        const option = $(this).find('option:selected');
        if (option.val()) {
            $('#supplier-business-name').text(option.data('business-name'));
            $('#supplier-contact-name').text(option.data('contact-name'));
            $('#supplier-email').text(option.data('email'));
            $('#supplier-phone').text(option.data('phone'));
            $('#supplier-address').text(option.data('address'));
            $('#supplier-credit-limit').text('$' + parseFloat(option.data('credit-limit')).toFixed(2));
            $('#supplier-credit-days').text(option.data('credit-days') + ' días');
            $('#supplier-info').show();
        } else {
            $('#supplier-info').hide();
        }
    });

    // Filtrar órdenes de compra por proveedor
    $('#supplier_id').on('change', function() {
        const supplierId = $(this).val();
        $('#purchase_order_id option').show();
        if (supplierId) {
            $('#purchase_order_id option').each(function() {
                if ($(this).data('supplier-id') != supplierId) {
                    $(this).hide();
                }
            });
        }
    });

    // Cargar productos de la orden de compra
    $('#purchase_order_id').on('change', function() {
        const orderId = $(this).val();
        if (orderId) {
            loadOrderProducts(orderId);
        }
    });

    // Agregar producto
    $('#add-product').on('click', function() {
        $('#product-search-modal').modal('show');
    });

    // Búsqueda de productos
    $('#product-search').on('input', function() {
        const query = $(this).val();
        if (query.length >= 2) {
            searchProducts(query);
        }
    });

    // Calcular totales
    $('#discount_amount').on('input', calculateTotals);
    $('#products-tbody').on('input', 'input[name*="quantity"], input[name*="unit_price"]', calculateTotals);
    
    // Calcular gastos de importación
    $('#import_cost, #customs_cost, #freight_cost, #variable_cost, #nationalization_cost').on('input', calculateTotals);

    // Establecer fecha de vencimiento por defecto
    $('#invoice_date').on('change', function() {
        const invoiceDate = new Date($(this).val());
        const dueDate = new Date(invoiceDate);
        dueDate.setDate(dueDate.getDate() + 30);
        $('#due_date').val(dueDate.toISOString().split('T')[0]);
    });
});

function loadOrderProducts(orderId) {
    // Implementar carga de productos de la orden de compra
    // Por ahora, limpiar la tabla
    $('#products-tbody').empty();
    selectedProducts = [];
    productCounter = 0;
}

function searchProducts(query) {
    $.get('{{ route("admin.purchases.invoices.search-products") }}', {
        q: query
    }).done(function(products) {
        let html = '';
        if (products.length > 0) {
            products.forEach(function(product) {
                html += `
                    <div class="product-item border p-2 mb-2 cursor-pointer" data-product-id="${product.id}">
                        <div class="row">
                            <div class="col-md-6">
                                <strong>${product.name}</strong><br>
                                <small class="text-muted">Código: ${product.code}</small>
                            </div>
                            <div class="col-md-3">
                                <small>Precio Compra: $${parseFloat(product.purchase_price).toFixed(2)}</small>
                            </div>
                            <div class="col-md-3 text-right">
                                <button type="button" class="btn btn-sm btn-primary add-product-btn" data-product-id="${product.id}">
                                    Agregar
                                </button>
                            </div>
                        </div>
                    </div>
                `;
            });
        } else {
            html = '<p class="text-muted">No se encontraron productos</p>';
        }
        $('#product-search-results').html(html);
    });
}

$(document).on('click', '.add-product-btn', function() {
    const productId = $(this).data('product-id');
    
    // Buscar el producto en los resultados de búsqueda
    let product = null;
    $('.product-item').each(function() {
        if ($(this).data('product-id') == productId) {
            // Reconstruir el objeto producto desde los datos mostrados
            const $item = $(this);
            product = {
                id: productId,
                name: $item.find('strong').text(),
                code: $item.find('small.text-muted').text().replace('Código: ', ''),
                purchase_price: parseFloat($item.find('small').last().text().replace('Precio Compra: $', ''))
            };
            return false; // Salir del loop
        }
    });
    
    if (product) {
        addProductToTable(product);
        $('#product-search-modal').modal('hide');
        $('#product-search').val('');
        $('#product-search-results').empty();
    } else {
        console.error('Producto no encontrado');
    }
});

function addProductToTable(product) {
    if (selectedProducts.includes(product.id)) {
        alert('Este producto ya está agregado');
        return;
    }

    selectedProducts.push(product.id);
    productCounter++;

    const row = `
        <tr data-product-id="${product.id}">
            <td>${productCounter}</td>
            <td>
                <strong>${product.name}</strong><br>
                <small class="text-muted">${product.code}</small>
                <input type="hidden" name="products[${productCounter}][product_id]" value="${product.id}">
            </td>
            <td>
                <input type="number" name="products[${productCounter}][quantity_ordered]" 
                       class="form-control form-control-sm" value="1" min="1" required>
            </td>
            <td>
                <input type="number" name="products[${productCounter}][unit_price]" 
                       class="form-control form-control-sm" value="${product.purchase_price}" 
                       step="0.01" min="0" required>
            </td>
            <td class="total-price">$0.00</td>
            <td>
                <input type="number" name="products[${productCounter}][quantity_received]" 
                       class="form-control form-control-sm" value="0" min="0">
            </td>
            <td>
                <div class="form-check">
                    <input type="hidden" name="products[${productCounter}][update_product_price]" value="0">
                    <input type="checkbox" name="products[${productCounter}][update_product_price]" 
                           class="form-check-input" value="1" checked>
                </div>
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm remove-product">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        </tr>
    `;

    $('#products-tbody').append(row);
    calculateTotals();
}

$(document).on('click', '.remove-product', function() {
    const row = $(this).closest('tr');
    const productId = parseInt(row.data('product-id'));
    selectedProducts = selectedProducts.filter(id => id !== productId);
    row.remove();
    calculateTotals();
});

function calculateTotals() {
    let subtotal = 0;
    
    $('#products-tbody tr').each(function() {
        const quantity = parseFloat($(this).find('input[name*="quantity_ordered"]').val()) || 0;
        const unitPrice = parseFloat($(this).find('input[name*="unit_price"]').val()) || 0;
        const total = quantity * unitPrice;
        subtotal += total;
        $(this).find('.total-price').text('$' + total.toFixed(2));
    });

    const discount = parseFloat($('#discount_amount').val()) || 0;
    const taxRate = 0.16; // 16% IVA
    const taxAmount = (subtotal - discount) * taxRate;
    
    // Calcular gastos de importación
    const importCost = parseFloat($('#import_cost').val()) || 0;
    const customsCost = parseFloat($('#customs_cost').val()) || 0;
    const freightCost = parseFloat($('#freight_cost').val()) || 0;
    const variableCost = parseFloat($('#variable_cost').val()) || 0;
    const nationalizationCost = parseFloat($('#nationalization_cost').val()) || 0;
    const totalImportCosts = importCost + customsCost + freightCost + variableCost + nationalizationCost;
    
    const total = subtotal - discount + taxAmount + totalImportCosts;

    $('#subtotal-display').text('$' + subtotal.toFixed(2));
    $('#discount-display').text('$' + discount.toFixed(2));
    $('#tax-display').text('$' + taxAmount.toFixed(2));
    $('#import-costs-display').text('$' + totalImportCosts.toFixed(2));
    $('#total_import_costs').val(totalImportCosts.toFixed(2));
    $('#total-display').text('$' + total.toFixed(2));
}

// Validación del formulario
$('#invoice-form').on('submit', function(e) {
    if (selectedProducts.length === 0) {
        e.preventDefault();
        alert('Debe agregar al menos un producto');
        return false;
    }
});
</script>
@endpush
@endsection