@extends('layouts.app')

@section('title', 'Nueva Orden 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-shopping-cart me-2"></i>
                            Nueva Orden de Venta
                        </h3>
                        <div>
                            <a href="{{ route('admin.sales.orders.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i>
                                Volver al Listado
                            </a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.sales.orders.store') }}" method="POST">
                        @csrf
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_id">Cliente <span class="text-danger">*</span></label>
                                    <select name="client_id" id="client_id" class="form-control @error('client_id') is-invalid @enderror" required>
                                        <option value="">Seleccionar Cliente</option>
                                        @foreach($clients as $client)
                                            <option value="{{ $client->id }}" {{ old('client_id') == $client->id ? 'selected' : '' }}>
                                                {{ $client->business_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('client_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="salesman_id">Vendedor <span class="text-danger">*</span></label>
                                    <select name="salesman_id" id="salesman_id" class="form-control @error('salesman_id') is-invalid @enderror" required>
                                        <option value="">Seleccionar Vendedor</option>
                                        @foreach($salesmen as $salesman)
                                            <option value="{{ $salesman->id }}" {{ old('salesman_id') == $salesman->id ? 'selected' : '' }}>
                                                {{ $salesman->first_name }} {{ $salesman->last_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('salesman_id')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="order_date">Fecha de Orden <span class="text-danger">*</span></label>
                                    <input type="date" name="order_date" id="order_date" class="form-control @error('order_date') is-invalid @enderror" value="{{ old('order_date', date('Y-m-d')) }}" required>
                                    @error('order_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="delivery_date">Fecha de Entrega <span class="text-danger">*</span></label>
                                    <input type="date" name="delivery_date" id="delivery_date" class="form-control @error('delivery_date') is-invalid @enderror" value="{{ old('delivery_date', date('Y-m-d', strtotime('+7 days'))) }}" required>
                                    @error('delivery_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="currency">Moneda <span class="text-danger">*</span></label>
                                    <select name="currency" id="currency" class="form-control @error('currency') is-invalid @enderror" required>
                                        <option value="USD" {{ old('currency', 'USD') == '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>
                                    </select>
                                    @error('currency')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="payment_terms">Términos de Pago</label>
                                    <select name="payment_terms" id="payment_terms" class="form-control @error('payment_terms') is-invalid @enderror">
                                        <option value="immediate" {{ old('payment_terms', 'immediate') == 'immediate' ? 'selected' : '' }}>Inmediato</option>
                                        <option value="15_days" {{ old('payment_terms') == '15_days' ? 'selected' : '' }}>15 días</option>
                                        <option value="30_days" {{ old('payment_terms') == '30_days' ? 'selected' : '' }}>30 días</option>
                                        <option value="60_days" {{ old('payment_terms') == '60_days' ? 'selected' : '' }}>60 días</option>
                                    </select>
                                    @error('payment_terms')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="shipping_address">Dirección de Entrega</label>
                                    <textarea name="shipping_address" id="shipping_address" class="form-control @error('shipping_address') is-invalid @enderror" rows="2" placeholder="Dirección completa de entrega">{{ old('shipping_address') }}</textarea>
                                    @error('shipping_address')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <h5><i class="fas fa-boxes me-2"></i>Productos</h5>
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <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">
                                    <tr id="no-products-row">
                                        <td colspan="6" class="text-center text-muted">
                                            <i class="fas fa-info-circle me-2"></i>Agregue productos a la orden
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        
                        <div class="text-center mb-3">
                            <button type="button" class="btn btn-primary" id="add-product-btn">
                                <i class="fas fa-plus me-1"></i>Agregar Producto
                            </button>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-8">
                                <div class="form-group">
                                    <label for="notes">Notas</label>
                                    <textarea name="notes" id="notes" class="form-control @error('notes') is-invalid @enderror" rows="4" placeholder="Notas adicionales de la orden">{{ old('notes') }}</textarea>
                                    @error('notes')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="card">
                                    <div class="card-header">
                                        <h6 class="mb-0">Resumen de Totales</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <span>Subtotal:</span>
                                            <span id="subtotal">$0.00</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Descuento:</span>
                                            <span id="discount">$0.00</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Impuestos:</span>
                                            <span id="taxes">$0.00</span>
                                        </div>
                                        <hr>
                                        <div class="d-flex justify-content-between font-weight-bold">
                                            <span>Total:</span>
                                            <span id="total">$0.00</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="text-center mt-4">
                            <button type="submit" name="action" value="draft" class="btn btn-secondary me-2">
                                <i class="fas fa-save me-1"></i>Guardar Borrador
                            </button>
                            <button type="submit" name="action" value="confirm" class="btn btn-primary">
                                <i class="fas fa-check me-1"></i>Confirmar Orden
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de búsqueda de productos -->
<div class="modal fade" id="productSearchModal" tabindex="-1" aria-labelledby="productSearchModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <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">
                    <input type="text" id="product-search" class="form-control" placeholder="Buscar por nombre o código...">
                </div>
                <div id="product-search-results">
                    <!-- Los resultados se cargarán aquí -->
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let products = [];
    
    // Abrir modal de búsqueda de productos
    $('#add-product-btn').click(function() {
        $('#productSearchModal').modal('show');
    });
    
    // Búsqueda de productos
    $('#product-search').on('input', function() {
        const search = $(this).val();
        if (search.length >= 2) {
            searchProducts(search);
        }
    });
    
    function searchProducts(search) {
        $.get('/admin/inventory/products/search', { search: search })
            .done(function(data) {
                displaySearchResults(data);
            })
            .fail(function() {
                $('#product-search-results').html('<p class="text-muted">Error al buscar productos</p>');
            });
    }
    
    function displaySearchResults(products) {
        const resultsDiv = $('#product-search-results');
        resultsDiv.empty();
        
        if (products.length === 0) {
            resultsDiv.html('<p class="text-muted">No se encontraron productos</p>');
            return;
        }
        
        products.forEach(function(product) {
            const productDiv = `
                <div class="product-item border p-3 mb-2 rounded" data-product='${JSON.stringify(product)}'>
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <strong>${product.name}</strong><br>
                            <small class="text-muted">${product.code}</small><br>
                            <small class="text-success">Precio: $${product.sale_price}</small>
                        </div>
                        <button type="button" class="btn btn-sm btn-primary add-product-btn">
                            <i class="fas fa-plus"></i> Agregar
                        </button>
                    </div>
                </div>
            `;
            resultsDiv.append(productDiv);
        });
    }
    
    // Agregar producto a la tabla
    $(document).on('click', '.add-product-btn', function() {
        const productItem = $(this).closest('.product-item');
        const product = productItem.data('product');
        addProductToTable(product);
        $('#productSearchModal').modal('hide');
        $('#product-search').val('');
        $('#product-search-results').empty();
    });
    
    function addProductToTable(product) {
        const productId = product.id;
        
        // Verificar si el producto ya existe
        if (products.find(p => p.id === productId)) {
            alert('Este producto ya está agregado');
            return;
        }
        
        const productData = {
            id: product.id,
            name: product.name,
            code: product.code,
            sale_price: product.sale_price,
            quantity: 1,
            discount: 0
        };
        
        products.push(productData);
        updateProductsTable();
        updateTotals();
    }
    
    function updateProductsTable() {
        const tbody = $('#products-tbody');
        tbody.empty();
        
        if (products.length === 0) {
            tbody.append('<tr id="no-products-row"><td colspan="6" class="text-center text-muted"><i class="fas fa-info-circle me-2"></i>Agregue productos a la orden</td></tr>');
            return;
        }
        
        products.forEach(function(product, index) {
            const total = (product.sale_price * product.quantity) * (1 - product.discount / 100);
            const row = `
                <tr data-product-id="${product.id}">
                    <td>
                        <strong>${product.name}</strong><br>
                        <small class="text-muted">${product.code}</small>
                    </td>
                    <td>
                        <input type="number" name="products[${index}][quantity]" 
                               class="form-control quantity-input" 
                               min="1" value="${product.quantity}" style="width: 80px;">
                        <input type="hidden" name="products[${index}][product_id]" value="${product.id}">
                    </td>
                    <td>
                        <input type="number" name="products[${index}][unit_price]" 
                               class="form-control price-input" 
                               min="0" step="0.01" value="${product.sale_price}" style="width: 100px;">
                    </td>
                    <td>
                        <input type="number" name="products[${index}][discount]" 
                               class="form-control discount-input" 
                               min="0" max="100" value="${product.discount}" style="width: 80px;">
                    </td>
                    <td class="product-total">$${total.toFixed(2)}</td>
                    <td>
                        <button type="button" class="btn btn-sm btn-danger remove-product-btn">
                            <i class="fas fa-trash"></i>
                        </button>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
    }
    
    // Actualizar totales cuando cambian los valores
    $(document).on('input', '.quantity-input, .price-input, .discount-input', function() {
        updateTotals();
    });
    
    // Eliminar producto
    $(document).on('click', '.remove-product-btn', function() {
        const row = $(this).closest('tr');
        const productId = parseInt(row.data('product-id'));
        products = products.filter(p => p.id !== productId);
        updateProductsTable();
        updateTotals();
    });
    
    function updateTotals() {
        let subtotal = 0;
        let totalDiscount = 0;
        
        products.forEach(function(product, index) {
            const quantity = parseFloat($(`input[name="products[${index}][quantity]"]`).val()) || 0;
            const price = parseFloat($(`input[name="products[${index}][unit_price]"]`).val()) || 0;
            const discount = parseFloat($(`input[name="products[${index}][discount]"]`).val()) || 0;
            
            const productTotal = quantity * price;
            const discountAmount = productTotal * (discount / 100);
            
            subtotal += productTotal;
            totalDiscount += discountAmount;
            
            // Actualizar total del producto
            $(`tr[data-product-id="${product.id}"] .product-total`).text('$' + (productTotal - discountAmount).toFixed(2));
        });
        
        const taxes = subtotal * 0.19; // 19% IVA
        const total = subtotal - totalDiscount + taxes;
        
        $('#subtotal').text('$' + subtotal.toFixed(2));
        $('#discount').text('$' + totalDiscount.toFixed(2));
        $('#taxes').text('$' + taxes.toFixed(2));
        $('#total').text('$' + total.toFixed(2));
    }
});
</script>
@endpush