@extends('layouts.app')

@section('title', 'Nuevo Ajuste de Precios')

@section('content')
<div class="container-fluid">
    <!-- Breadcrumb -->
    <nav aria-label="breadcrumb" class="mb-4">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item"><a href="{{ route('configuracion.index') }}">Configuración</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.inventory.products.index') }}">Inventario</a></li>
            <li class="breadcrumb-item"><a href="{{ route('admin.inventory.price-adjustments.index') }}">Ajustes de Precios</a></li>
            <li class="breadcrumb-item active">Nuevo Ajuste</li>
        </ol>
    </nav>

    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">
                <i class="fas fa-calculator text-primary me-2"></i>Nuevo Ajuste de Precios
            </h1>
            <p class="text-muted mb-0">Selecciona productos y configura el ajuste de precios</p>
        </div>
        <div class="btn-group" role="group">
            <a href="{{ route('admin.inventory.price-adjustments.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Volver
            </a>
        </div>
    </div>

    <form id="priceAdjustmentForm">
        @csrf
        
        <!-- Paso 1: Configuración del Ajuste -->
        <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-cog me-2"></i>Paso 1: Configuración del Ajuste
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="description" class="form-label">Descripción del Ajuste <span class="text-danger">*</span></label>
                        <textarea class="form-control" id="description" name="description" rows="3" 
                                  placeholder="Describe el motivo del ajuste de precios..." required></textarea>
                        <div class="form-text">Esta descripción es obligatoria y aparecerá en el historial de ajustes.</div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label for="adjustment_type" class="form-label">Tipo de Ajuste <span class="text-danger">*</span></label>
                        <select class="form-select" id="adjustment_type" name="adjustment_type" required>
                            <option value="">Seleccionar tipo...</option>
                            <option value="percentage">Porcentaje (%)</option>
                            <option value="manual">Monto Fijo ($)</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="adjustment_direction" class="form-label">Dirección <span class="text-danger">*</span></label>
                        <select class="form-select" id="adjustment_direction" name="adjustment_direction" required>
                            <option value="">Seleccionar dirección...</option>
                            <option value="increase">Aumentar Precios</option>
                            <option value="decrease">Disminuir Precios</option>
                        </select>
                    </div>
                    
                    <div class="col-md-4 mb-3">
                        <label for="adjustment_value" class="form-label">Valor del Ajuste <span class="text-danger">*</span></label>
                        <div class="input-group">
                            <input type="number" class="form-control" id="adjustment_value" name="adjustment_value" 
                                   step="0.01" min="0" placeholder="0.00" required>
                            <span class="input-group-text" id="value_unit">%</span>
                        </div>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12 mb-3">
                        <label for="notes" class="form-label">Notas Adicionales</label>
                        <textarea class="form-control" id="notes" name="notes" rows="2" 
                                  placeholder="Notas adicionales sobre el ajuste..."></textarea>
                    </div>
                </div>
            </div>
        </div>

        <!-- Paso 2: Selección de Productos -->
        <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-boxes me-2"></i>Paso 2: Selección de Productos
                </h6>
            </div>
            <div class="card-body">
                <!-- Filtros de búsqueda -->
                <div class="row mb-4">
                    <div class="col-md-4 mb-3">
                        <label for="search_product" class="form-label">Buscar Producto</label>
                        <input type="text" class="form-control" id="search_product" 
                               placeholder="Nombre, código o SKU...">
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="filter_category" class="form-label">Categoría</label>
                        <select class="form-select" id="filter_category">
                            <option value="">Todas las categorías</option>
                            @foreach(\App\Models\Category::active()->get() as $category)
                                <option value="{{ $category->id }}">{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3 mb-3">
                        <label for="filter_brand" class="form-label">Marca</label>
                        <select class="form-select" id="filter_brand">
                            <option value="">Todas las marcas</option>
                            @foreach(\App\Models\Brand::active()->get() as $brand)
                                <option value="{{ $brand->id }}">{{ $brand->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-2 mb-3">
                        <label class="form-label">&nbsp;</label>
                        <button type="button" class="btn btn-primary w-100" id="search_products">
                            <i class="fas fa-search"></i> Buscar
                        </button>
                    </div>
                </div>

                <!-- Controles de selección -->
                <div class="row mb-3">
                    <div class="col-md-12">
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-outline-primary" id="select_all">
                                <i class="fas fa-check-square"></i> Seleccionar Todos
                            </button>
                            <button type="button" class="btn btn-outline-secondary" id="deselect_all">
                                <i class="fas fa-square"></i> Deseleccionar Todos
                            </button>
                            <button type="button" class="btn btn-outline-info" id="select_visible">
                                <i class="fas fa-eye"></i> Seleccionar Visibles
                            </button>
                        </div>
                        <span class="badge bg-primary ms-3" id="selected_count">0 productos seleccionados</span>
                        <button type="button" class="btn btn-success ms-3" id="calculate_preview" style="display: none;">
                            <i class="fas fa-calculator"></i> Calcular Vista Previa
                        </button>
                    </div>
                </div>

                <!-- Lista de productos -->
                <div id="products_list">
                    <!-- Los productos se cargarán aquí dinámicamente -->
                </div>
            </div>
        </div>

        <!-- Paso 3: Vista Previa de Cambios -->
        <div class="card shadow mb-4" id="preview_card" style="display: none;">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-eye me-2"></i>Paso 3: Vista Previa de Cambios
                </h6>
            </div>
            <div class="card-body">
                <div id="preview_content">
                    <!-- El contenido de la vista previa se cargará aquí -->
                </div>
            </div>
        </div>

        <!-- Paso 4: Verificación Matemática y Aplicación -->
        <div class="card shadow mb-4" id="verification_card" style="display: none;">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <i class="fas fa-shield-alt me-2"></i>Paso 4: Verificación y Aplicación
                </h6>
            </div>
            <div class="card-body">
                <!-- Verificación matemática -->
                <div class="alert alert-warning" role="alert">
                    <h5 class="alert-heading">
                        <i class="fas fa-exclamation-triangle me-2"></i>Verificación de Seguridad
                    </h5>
                    <p>Para aplicar el ajuste de precios, debes resolver la siguiente operación matemática:</p>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="input-group">
                                <span class="input-group-text">¿Cuánto es:</span>
                                <span class="form-control" id="math_question_display"></span>
                                <span class="input-group-text">?</span>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="input-group">
                                <input type="text" class="form-control" id="math_answer" placeholder="Tu respuesta...">
                                <button type="button" class="btn btn-outline-primary" id="verify_math">
                                    <i class="fas fa-check"></i> Verificar
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="math_result" class="mt-2"></div>
                </div>

                <!-- Botones de acción -->
                <div class="d-flex justify-content-between">
                    <button type="button" class="btn btn-outline-secondary" id="cancel_adjustment">
                        <i class="fas fa-times me-2"></i>Cancelar
                    </button>
                    <div>
                        <button type="button" class="btn btn-warning me-2" id="regenerate_math">
                            <i class="fas fa-refresh me-2"></i>Nueva Pregunta
                        </button>
                        <button type="submit" class="btn btn-success" id="apply_adjustment" disabled>
                            <i class="fas fa-save me-2"></i>Guardar Ajuste de Precios
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Modal de Confirmación -->
<div class="modal fade" id="confirmationModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title" id="confirmationModalLabel">
                    <i class="fas fa-check-circle me-2"></i>Ajuste Aplicado Exitosamente
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="alert alert-success" role="alert">
                    <h6 class="alert-heading">¡Ajuste de precios aplicado correctamente!</h6>
                    <p class="mb-0">El ajuste de precios ha sido procesado y aplicado a todos los productos seleccionados.</p>
                </div>
                <div id="adjustment_summary"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    <i class="fas fa-times me-2"></i>Cerrar
                </button>
                <a href="{{ route('admin.inventory.price-adjustments.index') }}" class="btn btn-primary">
                    <i class="fas fa-list me-2"></i>Ver Historial
                </a>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .product-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    
    .product-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    
    .product-card.selected {
        border-color: #007bff;
        background-color: #f8f9fa;
    }
    
    .price-change {
        font-weight: bold;
    }
    
    .price-increase {
        color: #28a745;
    }
    
    .price-decrease {
        color: #dc3545;
    }
    
    .math-question {
        font-size: 1.2em;
        font-weight: bold;
    }
    
    .table-hover tbody tr:hover {
        background-color: rgba(0,123,255,0.1);
    }
    
    .product-row.selected {
        background-color: #e3f2fd;
    }
    
    .btn-group .btn {
        margin-right: 5px;
    }
    
    .badge {
        font-size: 0.875em;
    }
</style>
@endpush

@push('scripts')
<script>
$(document).ready(function() {
    let selectedProducts = [];
    let mathQuestion = '';
    let mathAnswer = '';
    let previewData = null;

    // Cambiar unidad del valor según el tipo
    $('#adjustment_type').change(function() {
        const unit = $(this).val() === 'percentage' ? '%' : '$';
        $('#value_unit').text(unit);
    });

    // Buscar productos
    $('#search_products').click(function() {
        searchProducts();
    });

    // Buscar productos al presionar Enter
    $('#search_product').keypress(function(e) {
        if (e.which === 13) {
            searchProducts();
        }
    });

    // Seleccionar todos los productos
    $('#select_all').click(function() {
        $('.product-checkbox').prop('checked', true);
        updateSelectedProducts();
    });

    // Deseleccionar todos los productos
    $('#deselect_all').click(function() {
        $('.product-checkbox').prop('checked', false);
        updateSelectedProducts();
    });

    // Seleccionar productos visibles
    $('#select_visible').click(function() {
        $('.product-checkbox:visible').prop('checked', true);
        updateSelectedProducts();
    });

    // Calcular vista previa
    $('#calculate_preview').click(function() {
        calculatePreview();
    });

    // Regenerar pregunta matemática
    $('#regenerate_math').click(function() {
        generateMathQuestion();
    });

    // Verificar respuesta matemática
    $('#verify_math').click(function() {
        const userAnswer = $('#math_answer').val().trim();
        if (userAnswer === mathAnswer) {
            $('#math_result').html('<div class="alert alert-success"><i class="fas fa-check me-2"></i>Respuesta correcta!</div>');
            $('#apply_adjustment').prop('disabled', false);
        } else {
            $('#math_result').html('<div class="alert alert-danger"><i class="fas fa-times me-2"></i>Respuesta incorrecta. Inténtalo de nuevo.</div>');
            $('#apply_adjustment').prop('disabled', true);
        }
    });

    // Cancelar ajuste
    $('#cancel_adjustment').click(function() {
        if (confirm('¿Estás seguro de que quieres cancelar el ajuste de precios?')) {
            location.reload();
        }
    });

    // Enviar formulario
    $('#priceAdjustmentForm').submit(function(e) {
        e.preventDefault();
        applyPriceAdjustment();
    });

    function searchProducts() {
        const search = $('#search_product').val();
        const category = $('#filter_category').val();
        const brand = $('#filter_brand').val();

        $.ajax({
            url: '{{ route("admin.inventory.price-adjustments.products.search") }}',
            method: 'GET',
            data: {
                search: search,
                category_id: category,
                brand_id: brand
            },
            success: function(response) {
                if (response.success) {
                    displayProducts(response.products);
                }
            },
            error: function() {
                alert('Error al buscar productos');
            }
        });
    }

    function displayProducts(products) {
        let html = '';
        
        if (products.length === 0) {
            html = '<div class="text-center py-4"><i class="fas fa-search fa-2x text-muted mb-3"></i><p class="text-muted">No se encontraron productos</p></div>';
        } else {
            html = `
                <div class="table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead class="table-light">
                            <tr>
                                <th width="50">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" id="select_all_table">
                                        <label class="form-check-label" for="select_all_table"></label>
                                    </div>
                                </th>
                                <th>Producto</th>
                                <th>Código</th>
                                <th>SKU</th>
                                <th>Categoría</th>
                                <th>Marca</th>
                                <th>Nivel Básico</th>
                                <th>Nivel Intermedio</th>
                                <th>Nivel Premium</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            products.forEach(function(product) {
                html += `
                    <tr class="product-row" data-product-id="${product.id}">
                        <td>
                            <div class="form-check">
                                <input class="form-check-input product-checkbox" type="checkbox" 
                                       value="${product.id}" id="product_${product.id}">
                                <label class="form-check-label" for="product_${product.id}"></label>
                            </div>
                        </td>
                        <td>
                            <strong>${product.name}</strong>
                        </td>
                        <td>
                            <span class="badge bg-secondary">${product.code}</span>
                        </td>
                        <td>
                            <small class="text-muted">${product.sku}</small>
                        </td>
                        <td>
                            ${product.category ? product.category.name : 'N/A'}
                        </td>
                        <td>
                            ${product.brand ? product.brand.name : 'N/A'}
                        </td>
                        <td>
                            <span class="text-primary fw-bold">$${parseFloat(product.unit_1_con_impuesto_1 || 0).toFixed(2)}</span>
                        </td>
                        <td>
                            <span class="text-info">$${parseFloat(product.unit_1_con_impuesto_2 || 0).toFixed(2)}</span>
                        </td>
                        <td>
                            <span class="text-success">$${parseFloat(product.unit_1_con_impuesto_3 || 0).toFixed(2)}</span>
                        </td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
            `;
        }
        
        $('#products_list').html(html);
        
        // Agregar event listeners a los checkboxes
        $('.product-checkbox').change(function() {
            updateSelectedProducts();
            updateRowSelection();
        });
        
        // Event listener para seleccionar todos en la tabla
        $('#select_all_table').change(function() {
            $('.product-checkbox').prop('checked', $(this).is(':checked'));
            updateSelectedProducts();
            updateRowSelection();
        });
        
        // Función para actualizar la selección visual de las filas
        updateRowSelection();
    }
    
    function updateRowSelection() {
        $('.product-row').each(function() {
            const checkbox = $(this).find('.product-checkbox');
            if (checkbox.is(':checked')) {
                $(this).addClass('selected');
            } else {
                $(this).removeClass('selected');
            }
        });
    }

    function updateSelectedProducts() {
        selectedProducts = $('.product-checkbox:checked').map(function() {
            return parseInt($(this).val());
        }).get();
        
        $('#selected_count').text(`${selectedProducts.length} productos seleccionados`);
        
        if (selectedProducts.length > 0) {
            $('#calculate_preview').show();
        } else {
            $('#calculate_preview').hide();
            $('#preview_card').hide();
            $('#verification_card').hide();
        }
    }

    function calculatePreview() {
        if (selectedProducts.length === 0) return;
        
        const formData = {
            adjustment_type: $('#adjustment_type').val(),
            adjustment_value: $('#adjustment_value').val(),
            adjustment_direction: $('#adjustment_direction').val(),
            product_ids: selectedProducts
        };

        // Validar datos básicos
        if (!formData.adjustment_type || !formData.adjustment_value || !formData.adjustment_direction) {
            alert('Por favor completa todos los campos del ajuste');
            return;
        }

        $.ajax({
            url: '{{ route("admin.inventory.price-adjustments.calculate") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    previewData = response;
                    displayPreview(response);
                    generateMathQuestion();
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Errores de validación:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    alert(errorMessage);
                } else {
                    alert('Error al calcular la vista previa');
                }
            }
        });
    }

    function displayPreview(data) {
        let html = `
            <div class="row mb-3">
                <div class="col-md-12">
                    <h6>Resumen del Ajuste:</h6>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-primary">${data.summary.total_products}</h5>
                                    <p class="card-text">Productos</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-info">${data.summary.total_changes}</h5>
                                    <p class="card-text">Cambios</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-success">$${data.summary.total_increase.toFixed(2)}</h5>
                                    <p class="card-text">Aumentos</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="card bg-light">
                                <div class="card-body text-center">
                                    <h5 class="card-title text-danger">$${data.summary.total_decrease.toFixed(2)}</h5>
                                    <p class="card-text">Disminuciones</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        // Mostrar detalles por producto
        html += '<div class="table-responsive"><table class="table table-bordered table-hover">';
        html += '<thead class="table-light"><tr><th>Producto</th><th>Nivel Básico</th><th>Nivel Intermedio</th><th>Nivel Premium</th><th>Cambios</th></tr></thead><tbody>';

        data.results.forEach(function(result) {
            const product = result.product;
            const changes = result.changes;
            
            // Obtener los 3 niveles de precios (Con Impuesto)
            const basicoBefore = result.prices_before.unit_1_con_impuesto_1 || 0;
            const intermedioBefore = result.prices_before.unit_1_con_impuesto_2 || 0;
            const premiumBefore = result.prices_before.unit_1_con_impuesto_3 || 0;
            
            const basicoAfter = result.prices_after.unit_1_con_impuesto_1 || 0;
            const intermedioAfter = result.prices_after.unit_1_con_impuesto_2 || 0;
            const premiumAfter = result.prices_after.unit_1_con_impuesto_3 || 0;
            
            html += `<tr>
                <td>
                    <strong>${product.name}</strong><br>
                    <small class="text-muted">${product.code}</small>
                </td>
                <td>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Antes:</span>
                        <span class="fw-bold">$${basicoBefore.toFixed(2)}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Después:</span>
                        <span class="fw-bold text-primary">$${basicoAfter.toFixed(2)}</span>
                    </div>
                </td>
                <td>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Antes:</span>
                        <span class="fw-bold">$${intermedioBefore.toFixed(2)}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Después:</span>
                        <span class="fw-bold text-info">$${intermedioAfter.toFixed(2)}</span>
                    </div>
                </td>
                <td>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Antes:</span>
                        <span class="fw-bold">$${premiumBefore.toFixed(2)}</span>
                    </div>
                    <div class="d-flex justify-content-between">
                        <span class="text-muted">Después:</span>
                        <span class="fw-bold text-success">$${premiumAfter.toFixed(2)}</span>
                    </div>
                </td>
                <td>
                    <div class="small">`;
            
            // Mostrar cambios de los 3 niveles (Con Impuesto)
            if (changes.unit_1_con_impuesto_1) {
                const change = changes.unit_1_con_impuesto_1;
                const changeClass = change.difference > 0 ? 'price-increase' : 'price-decrease';
                const sign = change.difference > 0 ? '+' : '';
                html += `<div class="${changeClass}"><strong>Básico:</strong> ${sign}$${change.difference.toFixed(2)} (${sign}${change.percentage.toFixed(1)}%)</div>`;
            }
            
            if (changes.unit_1_con_impuesto_2) {
                const change = changes.unit_1_con_impuesto_2;
                const changeClass = change.difference > 0 ? 'price-increase' : 'price-decrease';
                const sign = change.difference > 0 ? '+' : '';
                html += `<div class="${changeClass}"><strong>Intermedio:</strong> ${sign}$${change.difference.toFixed(2)} (${sign}${change.percentage.toFixed(1)}%)</div>`;
            }
            
            if (changes.unit_1_con_impuesto_3) {
                const change = changes.unit_1_con_impuesto_3;
                const changeClass = change.difference > 0 ? 'price-increase' : 'price-decrease';
                const sign = change.difference > 0 ? '+' : '';
                html += `<div class="${changeClass}"><strong>Premium:</strong> ${sign}$${change.difference.toFixed(2)} (${sign}${change.percentage.toFixed(1)}%)</div>`;
            }
            
            html += `</div></td></tr>`;
        });

        html += '</tbody></table></div>';
        
        $('#preview_content').html(html);
        $('#preview_card').show();
        $('#verification_card').show();
    }

    function generateMathQuestion() {
        $.ajax({
            url: '{{ route("admin.inventory.price-adjustments.generate-math") }}',
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    mathQuestion = response.question;
                    mathAnswer = response.answer;
                    $('#math_question_display').text(mathQuestion);
                    $('#math_answer').val('');
                    $('#math_result').empty();
                    $('#apply_adjustment').prop('disabled', true);
                }
            }
        });
    }

    function applyPriceAdjustment() {
        if (!previewData) {
            alert('No hay datos de vista previa disponibles');
            return;
        }

        const formData = {
            description: $('#description').val(),
            adjustment_type: $('#adjustment_type').val(),
            adjustment_value: $('#adjustment_value').val(),
            adjustment_direction: $('#adjustment_direction').val(),
            product_ids: selectedProducts,
            math_question: mathQuestion,
            math_answer: mathAnswer,
            math_user_answer: $('#math_answer').val(),
            notes: $('#notes').val()
        };

        $.ajax({
            url: '{{ route("admin.inventory.price-adjustments.store") }}',
            method: 'POST',
            data: formData,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    $('#adjustment_summary').html(`
                        <div class="alert alert-info">
                            <h6>Código del Ajuste: <strong>${response.adjustment_code}</strong></h6>
                            <p class="mb-0">El ajuste ha sido registrado en el sistema y aplicado a todos los productos seleccionados.</p>
                        </div>
                    `);
                    $('#confirmationModal').modal('show');
                }
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    const errors = xhr.responseJSON.errors;
                    let errorMessage = 'Errores de validación:\n';
                    for (const field in errors) {
                        errorMessage += `- ${errors[field][0]}\n`;
                    }
                    alert(errorMessage);
                } else {
                    alert('Error al aplicar el ajuste: ' + (xhr.responseJSON?.message || 'Error desconocido'));
                }
            }
        });
    }

    // Cargar productos inicialmente
    searchProducts();
});
</script>
@endpush