@extends('layouts.app')

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

@section('content')
<div class="container-fluid">
    <!-- Page Heading -->
    <div class="d-sm-flex align-items-center justify-content-between mb-4">
        <h1 class="h3 mb-0 text-gray-800">
            <i class="fas fa-plus me-2"></i>Nueva Orden de Compra
        </h1>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.purchases.orders.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <form action="{{ route('admin.purchases.orders.store') }}" method="POST" id="purchaseOrderForm">
        @csrf
        
        <!-- Información General -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-info-circle me-2"></i>Información General
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="order_number" class="form-label">Número de Orden <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('order_number') is-invalid @enderror" 
                                   id="order_number" name="order_number" value="{{ $orderNumber }}" readonly>
                            @error('order_number')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="mb-3">
                            <label for="supplier_id" class="form-label">Proveedor <span class="text-danger">*</span></label>
                            <div class="input-group">
                                <select class="form-select @error('supplier_id') is-invalid @enderror" 
                                        id="supplier_id" name="supplier_id" required>
                                    <option value="">Seleccionar proveedor</option>
                                    @foreach($suppliers as $supplier)
                                        <option value="{{ $supplier->id }}" {{ old('supplier_id') == $supplier->id ? 'selected' : '' }}>
                                            {{ $supplier->business_name }}
                                        </option>
                                    @endforeach
                                </select>
                                <button type="button" class="btn btn-outline-primary" onclick="searchSuppliers()">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                            @error('supplier_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="mb-3">
                            <label for="order_date" class="form-label">Fecha de Orden <span class="text-danger">*</span></label>
                            <input type="date" class="form-control @error('order_date') is-invalid @enderror" 
                                   id="order_date" name="order_date" 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-3">
                        <div class="mb-3">
                            <label for="expected_delivery_date" class="form-label">Fecha Esperada de Entrega</label>
                            <input type="date" class="form-control @error('expected_delivery_date') is-invalid @enderror" 
                                   id="expected_delivery_date" name="expected_delivery_date" value="{{ old('expected_delivery_date') }}">
                            @error('expected_delivery_date')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="mb-3">
                            <label for="currency" class="form-label">Moneda <span class="text-danger">*</span></label>
                            <select class="form-select @error('currency') is-invalid @enderror" 
                                    id="currency" name="currency" required onchange="updateExchangeRate()">
                                <option value="USD" {{ old('currency', 'USD') == 'USD' ? 'selected' : '' }}>USD - Dólar</option>
                                <option value="EUR" {{ old('currency') == 'EUR' ? 'selected' : '' }}>EUR - Euro</option>
                                <option value="COP" {{ old('currency') == 'COP' ? 'selected' : '' }}>COP - Peso Colombiano</option>
                                <option value="MXN" {{ old('currency') == 'MXN' ? 'selected' : '' }}>MXN - Peso Mexicano</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="mb-3">
                            <label for="exchange_rate" class="form-label">Tasa de Cambio <span class="text-danger">*</span></label>
                            <input type="number" class="form-control @error('exchange_rate') is-invalid @enderror" 
                                   id="exchange_rate" name="exchange_rate" value="{{ old('exchange_rate', '1.0000') }}" 
                                   step="0.0001" min="0.0001" required>
                            @error('exchange_rate')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="mb-3">
                            <label for="notes" class="form-label">Notas</label>
                            <textarea class="form-control @error('notes') is-invalid @enderror" 
                                      id="notes" name="notes" rows="2" placeholder="Notas adicionales sobre la orden">{{ old('notes') }}</textarea>
                            @error('notes')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Productos -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-boxes me-2"></i>Productos
                </h6>
                <button type="button" class="btn btn-success btn-sm" onclick="addProduct()">
                    <i class="fas fa-plus me-1"></i>Agregar Producto
                </button>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" id="productsTable">
                        <thead class="table-dark">
                            <tr>
                                <th width="5%">#</th>
                                <th width="35%">Producto</th>
                                <th width="15%">Cantidad</th>
                                <th width="15%">Precio Unit.</th>
                                <th width="15%">Total</th>
                                <th width="10%">Notas</th>
                                <th width="5%">Acciones</th>
                            </tr>
                        </thead>
                        <tbody id="productsTableBody">
                            <!-- Los productos se agregarán dinámicamente -->
                        </tbody>
                        <tfoot>
                            <tr class="table-secondary">
                                <td colspan="4" class="text-end"><strong>Subtotal:</strong></td>
                                <td><strong id="subtotal">$0.00</strong></td>
                                <td colspan="2"></td>
                            </tr>
                            <tr class="table-secondary">
                                <td colspan="4" class="text-end"><strong>IVA (16%):</strong></td>
                                <td><strong id="taxAmount">$0.00</strong></td>
                                <td colspan="2"></td>
                            </tr>
                            <tr class="table-dark">
                                <td colspan="4" class="text-end"><strong>TOTAL:</strong></td>
                                <td><strong id="totalAmount">$0.00</strong></td>
                                <td colspan="2"></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>

        <!-- Términos y Condiciones -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-file-contract me-2"></i>Términos y Condiciones
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label for="terms_conditions" class="form-label">Términos y Condiciones</label>
                    <textarea class="form-control @error('terms_conditions') is-invalid @enderror" 
                              id="terms_conditions" name="terms_conditions" rows="4" 
                              placeholder="Términos y condiciones de la orden">{{ old('terms_conditions') }}</textarea>
                    @error('terms_conditions')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Botones de Acción -->
        <div class="card shadow mb-4">
            <div class="card-body text-center">
                <button type="submit" class="btn btn-primary btn-lg me-3">
                    <i class="fas fa-save me-2"></i>Guardar Orden
                </button>
                <a href="{{ route('admin.purchases.orders.index') }}" class="btn btn-secondary btn-lg">
                    <i class="fas fa-times me-2"></i>Cancelar
                </a>
            </div>
        </div>
    </form>
</div>

<!-- Modal para buscar productos -->
<div class="modal fade" id="productSearchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buscar Producto</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="productSearchInput" 
                           placeholder="Buscar por nombre, código o código de barras">
                </div>
                <div id="productSearchResults" class="list-group">
                    <!-- Los resultados se mostrarán aquí -->
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal para buscar proveedores -->
<div class="modal fade" id="supplierSearchModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buscar Proveedor</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <input type="text" class="form-control" id="supplierSearchInput" 
                           placeholder="Buscar por nombre comercial o contacto">
                </div>
                <div id="supplierSearchResults" class="list-group">
                    <!-- Los resultados se mostrarán aquí -->
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

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

// Datos de productos disponibles
const availableProducts = @json($products);

// Datos de proveedores disponibles
const availableSuppliers = @json($suppliers);

// Tasas de cambio por defecto
const exchangeRates = {
    'USD': 1.0000,
    'EUR': 0.8500,
    'COP': 4000.0000,
    'MXN': 20.0000,
    'VES': 36.0000
};

function addProduct() {
    const modal = new bootstrap.Modal(document.getElementById('productSearchModal'));
    modal.show();
}

function searchProducts() {
    const searchTerm = document.getElementById('productSearchInput').value.toLowerCase();
    const results = availableProducts.filter(product => 
        product.name.toLowerCase().includes(searchTerm) ||
        product.code.toLowerCase().includes(searchTerm) ||
        (product.barcode && product.barcode.toLowerCase().includes(searchTerm))
    );

    const resultsContainer = document.getElementById('productSearchResults');
    resultsContainer.innerHTML = '';

    if (results.length === 0) {
        resultsContainer.innerHTML = '<div class="text-center text-muted py-3">No se encontraron productos</div>';
        return;
    }

    results.forEach(product => {
        const item = document.createElement('div');
        item.className = 'list-group-item list-group-item-action';
        item.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-1">${product.name}</h6>
                    <small class="text-muted">Código: ${product.code} | Categoría: ${product.category?.name || 'N/A'}</small>
                </div>
                <button type="button" class="btn btn-primary btn-sm" onclick="selectProduct(${product.id})">
                    Seleccionar
                </button>
            </div>
        `;
        resultsContainer.appendChild(item);
    });
}

function selectProduct(productId) {
    const product = availableProducts.find(p => p.id === productId);
    if (!product) return;

    productCounter++;
    const productData = {
        id: productId,
        name: product.name,
        code: product.code,
        category: product.category?.name || 'N/A',
        brand: product.brand?.name || 'N/A',
        quantity: 1,
        unitPrice: 0,
        total: 0,
        notes: ''
    };

    products.push(productData);
    updateProductsTable();
    
    const modal = bootstrap.Modal.getInstance(document.getElementById('productSearchModal'));
    modal.hide();
    
    document.getElementById('productSearchInput').value = '';
    document.getElementById('productSearchResults').innerHTML = '';
}

function updateProductsTable() {
    const tbody = document.getElementById('productsTableBody');
    tbody.innerHTML = '';

    products.forEach((product, index) => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${index + 1}</td>
            <td>
                <div>
                    <strong>${product.name}</strong>
                    <br><small class="text-muted">${product.code} | ${product.category}</small>
                </div>
            </td>
            <td>
                <input type="number" class="form-control form-control-sm" 
                       value="${product.quantity}" min="1" 
                       onchange="updateProduct(${index}, 'quantity', this.value)">
            </td>
            <td>
                <input type="number" class="form-control form-control-sm" 
                       value="${product.unitPrice}" step="0.01" min="0" 
                       onchange="updateProduct(${index}, 'unitPrice', this.value)">
            </td>
            <td><strong>$${product.total.toFixed(2)}</strong></td>
            <td>
                <input type="text" class="form-control form-control-sm" 
                       value="${product.notes}" 
                       onchange="updateProduct(${index}, 'notes', this.value)">
            </td>
            <td>
                <button type="button" class="btn btn-danger btn-sm" onclick="removeProduct(${index})">
                    <i class="fas fa-trash"></i>
                </button>
            </td>
        `;
        tbody.appendChild(row);
    });

    updateTotals();
}

function updateProduct(index, field, value) {
    if (field === 'quantity' || field === 'unitPrice') {
        products[index][field] = parseFloat(value) || 0;
        products[index].total = products[index].quantity * products[index].unitPrice;
    } else {
        products[index][field] = value;
    }
    
    updateProductsTable();
}

function removeProduct(index) {
    products.splice(index, 1);
    updateProductsTable();
}

function updateTotals() {
    const subtotal = products.reduce((sum, product) => sum + product.total, 0);
    const taxAmount = subtotal * 0.16;
    const totalAmount = subtotal + taxAmount;

    document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
    document.getElementById('taxAmount').textContent = `$${taxAmount.toFixed(2)}`;
    document.getElementById('totalAmount').textContent = `$${totalAmount.toFixed(2)}`;
}

function searchSuppliers() {
    const modal = new bootstrap.Modal(document.getElementById('supplierSearchModal'));
    modal.show();
}

function updateExchangeRate() {
    const currency = document.getElementById('currency').value;
    const rate = exchangeRates[currency] || 1.0000;
    document.getElementById('exchange_rate').value = rate.toFixed(4);
}

// Event listeners
document.getElementById('productSearchInput').addEventListener('input', searchProducts);
document.getElementById('supplierSearchInput').addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const results = availableSuppliers.filter(supplier => 
        supplier.business_name.toLowerCase().includes(searchTerm) ||
        supplier.contact_person.toLowerCase().includes(searchTerm)
    );

    const resultsContainer = document.getElementById('supplierSearchResults');
    resultsContainer.innerHTML = '';

    results.forEach(supplier => {
        const item = document.createElement('div');
        item.className = 'list-group-item list-group-item-action';
        item.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h6 class="mb-1">${supplier.business_name}</h6>
                    <small class="text-muted">Contacto: ${supplier.contact_person} | ${supplier.email}</small>
                </div>
                <button type="button" class="btn btn-primary btn-sm" onclick="selectSupplier(${supplier.id})">
                    Seleccionar
                </button>
            </div>
        `;
        resultsContainer.appendChild(item);
    });
});

function selectSupplier(supplierId) {
    document.getElementById('supplier_id').value = supplierId;
    const modal = bootstrap.Modal.getInstance(document.getElementById('supplierSearchModal'));
    modal.hide();
    document.getElementById('supplierSearchInput').value = '';
    document.getElementById('supplierSearchResults').innerHTML = '';
}

// Validación del formulario
document.getElementById('purchaseOrderForm').addEventListener('submit', function(e) {
    if (products.length === 0) {
        e.preventDefault();
        alert('Debe agregar al menos un producto a la orden');
        return;
    }

    // Agregar productos al formulario
    products.forEach((product, index) => {
        const productInput = document.createElement('input');
        productInput.type = 'hidden';
        productInput.name = `products[${index}][product_id]`;
        productInput.value = product.id;
        this.appendChild(productInput);

        const quantityInput = document.createElement('input');
        quantityInput.type = 'hidden';
        quantityInput.name = `products[${index}][quantity_ordered]`;
        quantityInput.value = product.quantity;
        this.appendChild(quantityInput);

        const priceInput = document.createElement('input');
        priceInput.type = 'hidden';
        priceInput.name = `products[${index}][unit_price]`;
        priceInput.value = product.unitPrice;
        this.appendChild(priceInput);

        const notesInput = document.createElement('input');
        notesInput.type = 'hidden';
        notesInput.name = `products[${index}][notes]`;
        notesInput.value = product.notes;
        this.appendChild(notesInput);
    });
});

// Inicializar
updateExchangeRate();
</script>
@endpush