@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <i class="fas fa-edit me-2"></i>Editar Orden de Venta
                    </h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('admin.sales.orders.update', $order) }}" method="POST">
                        @csrf
                        @method('PUT')
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="client_id">Cliente</label>
                                    <div class="input-group">
                                        <input type="text" class="form-control" id="client_search" placeholder="Buscar cliente..." readonly>
                                        <input type="hidden" name="client_id" id="client_id" value="{{ $order->client_id }}">
                                        <button type="button" class="btn btn-outline-secondary" onclick="searchClients()">
                                            <i class="fas fa-search"></i>
                                        </button>
                                    </div>
                                    @error('client_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="order_date">Fecha de Orden</label>
                                    <input type="date" class="form-control" id="order_date" name="order_date" value="{{ old('order_date', $order->order_date) }}" required>
                                    @error('order_date')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="delivery_date">Fecha de Entrega</label>
                                    <input type="date" class="form-control" id="delivery_date" name="delivery_date" value="{{ old('delivery_date', $order->delivery_date) }}">
                                    @error('delivery_date')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="currency_id">Moneda</label>
                                    <select class="form-control" id="currency_id" name="currency_id" required>
                                        <option value="">Seleccionar moneda</option>
                                        @foreach(\App\Models\ExchangeRate::where('is_active', true)->get() as $currency)
                                            <option value="{{ $currency->id }}" {{ old('currency_id', $order->currency_id) == $currency->id ? 'selected' : '' }}>
                                                {{ $currency->currency_code }} - {{ $currency->currency_name }}
                                            </option>
                                        @endforeach
                                    </select>
                                    @error('currency_id')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="exchange_rate">Tasa de Cambio</label>
                                    <input type="number" class="form-control" id="exchange_rate" name="exchange_rate" step="0.0001" value="{{ old('exchange_rate', $order->exchange_rate) }}" required>
                                    @error('exchange_rate')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="status">Estado</label>
                                    <select class="form-control" id="status" name="status" required>
                                        <option value="draft" {{ old('status', $order->status) == 'draft' ? 'selected' : '' }}>Borrador</option>
                                        <option value="confirmed" {{ old('status', $order->status) == 'confirmed' ? 'selected' : '' }}>Confirmado</option>
                                        <option value="in_progress" {{ old('status', $order->status) == 'in_progress' ? 'selected' : '' }}>En Progreso</option>
                                        <option value="completed" {{ old('status', $order->status) == 'completed' ? 'selected' : '' }}>Completado</option>
                                        <option value="cancelled" {{ old('status', $order->status) == 'cancelled' ? 'selected' : '' }}>Cancelado</option>
                                    </select>
                                    @error('status')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="notes">Notas</label>
                            <textarea class="form-control" id="notes" name="notes" rows="3">{{ old('notes', $order->notes) }}</textarea>
                            @error('notes')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                        
                        <!-- Productos -->
                        <div class="card mt-4">
                            <div class="card-header">
                                <h5 class="card-title">Productos</h5>
                                <button type="button" class="btn btn-primary btn-sm" onclick="addProduct()">
                                    <i class="fas fa-plus me-2"></i>Agregar Producto
                                </button>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered" id="products_table">
                                        <thead>
                                            <tr>
                                                <th>Producto</th>
                                                <th>Cantidad</th>
                                                <th>Precio Unitario</th>
                                                <th>Descuento %</th>
                                                <th>Subtotal</th>
                                                <th>Acciones</th>
                                            </tr>
                                        </thead>
                                        <tbody id="products_tbody">
                                            @foreach($order->details as $index => $detail)
                                            <tr>
                                                <td>
                                                    <input type="hidden" name="products[{{ $index }}][product_id]" value="{{ $detail->product_id }}">
                                                    <input type="text" class="form-control" value="{{ $detail->product->name }}" readonly>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control quantity" name="products[{{ $index }}][quantity]" value="{{ $detail->quantity }}" min="0" step="0.01" required>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control unit_price" name="products[{{ $index }}][unit_price]" value="{{ $detail->unit_price }}" min="0" step="0.01" required>
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control discount_percentage" name="products[{{ $index }}][discount_percentage]" value="{{ $detail->discount_percentage }}" min="0" max="100" step="0.01">
                                                </td>
                                                <td>
                                                    <input type="number" class="form-control subtotal" name="products[{{ $index }}][subtotal]" value="{{ $detail->subtotal }}" readonly>
                                                </td>
                                                <td>
                                                    <button type="button" class="btn btn-danger btn-sm" onclick="removeProduct(this)">
                                                        <i class="fas fa-trash"></i>
                                                    </button>
                                                </td>
                                            </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <th colspan="4" class="text-right">Total:</th>
                                                <th><span id="total_amount">{{ number_format($order->total_amount, 2) }}</span></th>
                                                <th></th>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-2"></i>Actualizar Orden
                            </button>
                            <a href="{{ route('admin.sales.orders.index') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-2"></i>Cancelar
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de búsqueda de clientes -->
<div class="modal fade" id="clientSearchModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Buscar Cliente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="form-group mb-3">
                    <input type="text" class="form-control" id="client_search_input" placeholder="Buscar por nombre, documento o email...">
                </div>
                <div id="client_search_results"></div>
            </div>
        </div>
    </div>
</div>

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

@endsection

@push('scripts')
<script>
let productIndex = {{ count($order->details) }};

function searchClients() {
    $('#clientSearchModal').modal('show');
}

function searchProducts() {
    $('#productSearchModal').modal('show');
}

function addProduct() {
    searchProducts();
}

function removeProduct(button) {
    $(button).closest('tr').remove();
    calculateTotal();
}

function calculateSubtotal(row) {
    const quantity = parseFloat($(row).find('.quantity').val()) || 0;
    const unitPrice = parseFloat($(row).find('.unit_price').val()) || 0;
    const discountPercentage = parseFloat($(row).find('.discount_percentage').val()) || 0;
    
    const subtotal = quantity * unitPrice;
    const discountAmount = subtotal * (discountPercentage / 100);
    const finalSubtotal = subtotal - discountAmount;
    
    $(row).find('.subtotal').val(finalSubtotal.toFixed(2));
    calculateTotal();
}

function calculateTotal() {
    let total = 0;
    $('.subtotal').each(function() {
        total += parseFloat($(this).val()) || 0;
    });
    $('#total_amount').text(total.toFixed(2));
}

// Event listeners
$(document).on('input', '.quantity, .unit_price, .discount_percentage', function() {
    calculateSubtotal($(this).closest('tr'));
});

// Búsqueda de clientes
$('#client_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length >= 2) {
        $.get('{{ route("admin.sales.orders.search-clients") }}', { q: query }, function(data) {
            let html = '<div class="list-group">';
            data.forEach(function(client) {
                html += `<a href="#" class="list-group-item list-group-item-action" onclick="selectClient(${client.id}, '${client.business_name}')">
                    <strong>${client.business_name}</strong><br>
                    <small>${client.document_type}: ${client.document_number}</small>
                </a>`;
            });
            html += '</div>';
            $('#client_search_results').html(html);
        });
    }
});

// Búsqueda de productos
$('#product_search_input').on('input', function() {
    const query = $(this).val();
    if (query.length >= 2) {
        $.get('{{ route("admin.sales.orders.search-products") }}', { q: query }, function(data) {
            let html = '<div class="table-responsive"><table class="table table-sm">';
            html += '<thead><tr><th>Producto</th><th>Código</th><th>Precio</th><th>Stock</th><th>Acción</th></tr></thead><tbody>';
            data.forEach(function(product) {
                html += `<tr>
                    <td>${product.name}</td>
                    <td>${product.code}</td>
                    <td>${product.selling_price}</td>
                    <td>${product.stock}</td>
                    <td><button class="btn btn-sm btn-primary" onclick="selectProduct(${product.id}, '${product.name}', ${product.selling_price})">Agregar</button></td>
                </tr>`;
            });
            html += '</tbody></table></div>';
            $('#product_search_results').html(html);
        });
    }
});

function selectClient(id, name) {
    $('#client_id').val(id);
    $('#client_search').val(name);
    $('#clientSearchModal').modal('hide');
}

function selectProduct(id, name, price) {
    const row = `<tr>
        <td>
            <input type="hidden" name="products[${productIndex}][product_id]" value="${id}">
            <input type="text" class="form-control" value="${name}" readonly>
        </td>
        <td>
            <input type="number" class="form-control quantity" name="products[${productIndex}][quantity]" value="1" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control unit_price" name="products[${productIndex}][unit_price]" value="${price}" min="0" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control discount_percentage" name="products[${productIndex}][discount_percentage]" value="0" min="0" max="100" step="0.01">
        </td>
        <td>
            <input type="number" class="form-control subtotal" name="products[${productIndex}][subtotal]" value="${price}" readonly>
        </td>
        <td>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeProduct(this)">
                <i class="fas fa-trash"></i>
            </button>
        </td>
    </tr>`;
    
    $('#products_tbody').append(row);
    productIndex++;
    calculateTotal();
    $('#productSearchModal').modal('hide');
}
</script>
@endpush