@extends('layouts.app')

@section('title', 'Nueva Devolución 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-undo me-2"></i>
                            Nueva Devolución de Venta
                        </h3>
                        <div>
                            <a href="{{ route('admin.sales.returns.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.returns.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="sales_invoice_id">Factura de Venta <span class="text-danger">*</span></label>
                                    <select name="sales_invoice_id" id="sales_invoice_id" class="form-control @error('sales_invoice_id') is-invalid @enderror" required>
                                        <option value="">Seleccionar Factura</option>
                                    </select>
                                    @error('sales_invoice_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="return_date">Fecha de Devolución <span class="text-danger">*</span></label>
                                    <input type="date" name="return_date" id="return_date" class="form-control @error('return_date') is-invalid @enderror" value="{{ old('return_date', date('Y-m-d')) }}" required>
                                    @error('return_date')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="return_reason">Motivo de Devolución <span class="text-danger">*</span></label>
                                    <select name="return_reason" id="return_reason" class="form-control @error('return_reason') is-invalid @enderror" required>
                                        <option value="">Seleccionar Motivo</option>
                                        <option value="defective" {{ old('return_reason') == 'defective' ? 'selected' : '' }}>Producto Defectuoso</option>
                                        <option value="wrong_item" {{ old('return_reason') == 'wrong_item' ? 'selected' : '' }}>Producto Incorrecto</option>
                                        <option value="damaged" {{ old('return_reason') == 'damaged' ? 'selected' : '' }}>Producto Dañado</option>
                                        <option value="not_as_described" {{ old('return_reason') == 'not_as_described' ? 'selected' : '' }}>No Coincide con Descripción</option>
                                        <option value="customer_request" {{ old('return_reason') == 'customer_request' ? 'selected' : '' }}>Solicitud del Cliente</option>
                                        <option value="other" {{ old('return_reason') == 'other' ? 'selected' : '' }}>Otro</option>
                                    </select>
                                    @error('return_reason')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="refund_method">Método de Reembolso</label>
                                    <select name="refund_method" id="refund_method" class="form-control @error('refund_method') is-invalid @enderror">
                                        <option value="credit_note" {{ old('refund_method', 'credit_note') == 'credit_note' ? 'selected' : '' }}>Nota de Crédito</option>
                                        <option value="cash_refund" {{ old('refund_method') == 'cash_refund' ? 'selected' : '' }}>Reembolso en Efectivo</option>
                                        <option value="bank_transfer" {{ old('refund_method') == 'bank_transfer' ? 'selected' : '' }}>Transferencia Bancaria</option>
                                        <option value="exchange" {{ old('refund_method') == 'exchange' ? 'selected' : '' }}>Cambio por Otro Producto</option>
                                    </select>
                                    @error('refund_method')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                        
                        <hr>
                        
                        <h5><i class="fas fa-boxes me-2"></i>Productos a Devolver</h5>
                        
                        <div class="table-responsive">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>Producto</th>
                                        <th>Cantidad Vendida</th>
                                        <th>Cantidad a Devolver</th>
                                        <th>Precio Unit.</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>Seleccione una factura para ver los productos
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </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 sobre la devolución">{{ 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 Devolución</h6>
                                    </div>
                                    <div class="card-body">
                                        <div class="d-flex justify-content-between">
                                            <span>Productos:</span>
                                            <span id="total-products">0</span>
                                        </div>
                                        <div class="d-flex justify-content-between">
                                            <span>Cantidad Total:</span>
                                            <span id="total-quantity">0</span>
                                        </div>
                                        <hr>
                                        <div class="d-flex justify-content-between font-weight-bold">
                                            <span>Valor Total:</span>
                                            <span id="total-value">$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="process" class="btn btn-primary">
                                <i class="fas fa-check me-1"></i>Procesar Devolución
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    let selectedProducts = [];
    
    // Cargar facturas cuando se selecciona un cliente
    $('#client_id').change(function() {
        const clientId = $(this).val();
        const invoiceSelect = $('#sales_invoice_id');
        
        invoiceSelect.empty().append('<option value="">Seleccionar Factura</option>');
        
        if (clientId) {
            $.get(`/admin/sales/invoices/by-client/${clientId}`)
                .done(function(invoices) {
                    invoices.forEach(function(invoice) {
                        invoiceSelect.append(`<option value="${invoice.id}">${invoice.invoice_number} - $${invoice.total_amount}</option>`);
                    });
                })
                .fail(function() {
                    console.error('Error al cargar facturas');
                });
        }
    });
    
    // Cargar productos cuando se selecciona una factura
    $('#sales_invoice_id').change(function() {
        const invoiceId = $(this).val();
        const tbody = $('#products-tbody');
        
        tbody.empty();
        
        if (invoiceId) {
            $.get(`/admin/sales/invoices/${invoiceId}/products`)
                .done(function(products) {
                    if (products.length > 0) {
                        products.forEach(function(product) {
                            const row = `
                                <tr data-product-id="${product.product_id}">
                                    <td>
                                        <strong>${product.product.name}</strong><br>
                                        <small class="text-muted">${product.product.code}</small>
                                    </td>
                                    <td class="text-center">${product.quantity_shipped}</td>
                                    <td class="text-center">
                                        <input type="number" name="products[${product.product_id}][quantity]" 
                                               class="form-control quantity-input" 
                                               min="1" max="${product.quantity_shipped}" 
                                               value="0" style="width: 80px;">
                                    </td>
                                    <td class="text-right">$${parseFloat(product.unit_price).toFixed(2)}</td>
                                    <td class="text-right product-total">$0.00</td>
                                    <td class="text-center">
                                        <input type="hidden" name="products[${product.product_id}][product_id]" value="${product.product_id}">
                                        <input type="hidden" name="products[${product.product_id}][unit_price]" value="${product.unit_price}">
                                    </td>
                                </tr>
                            `;
                            tbody.append(row);
                        });
                    } else {
                        tbody.append('<tr><td colspan="6" class="text-center text-muted">No hay productos disponibles en esta factura</td></tr>');
                    }
                })
                .fail(function() {
                    tbody.append('<tr><td colspan="6" class="text-center text-danger">Error al cargar productos</td></tr>');
                });
        } else {
            tbody.append('<tr id="no-products-row"><td colspan="6" class="text-center text-muted"><i class="fas fa-info-circle me-2"></i>Seleccione una factura para ver los productos</td></tr>');
        }
        
        updateSummary();
    });
    
    // Actualizar totales cuando cambia la cantidad
    $(document).on('input', '.quantity-input', function() {
        const row = $(this).closest('tr');
        const quantity = parseFloat($(this).val()) || 0;
        const unitPrice = parseFloat(row.find('input[name*="[unit_price]"]').val()) || 0;
        const total = quantity * unitPrice;
        
        row.find('.product-total').text('$' + total.toFixed(2));
        updateSummary();
    });
    
    function updateSummary() {
        let totalProducts = 0;
        let totalQuantity = 0;
        let totalValue = 0;
        
        $('.quantity-input').each(function() {
            const quantity = parseFloat($(this).val()) || 0;
            if (quantity > 0) {
                totalProducts++;
                totalQuantity += quantity;
                
                const row = $(this).closest('tr');
                const unitPrice = parseFloat(row.find('input[name*="[unit_price]"]').val()) || 0;
                totalValue += quantity * unitPrice;
            }
        });
        
        $('#total-products').text(totalProducts);
        $('#total-quantity').text(totalQuantity);
        $('#total-value').text('$' + totalValue.toFixed(2));
        
        // Habilitar/deshabilitar botón de envío
        $('#submit-btn').prop('disabled', totalProducts === 0);
    }
});
</script>
@endpush