BryamE
263 lines
13 KiB
PHP
263 lines
13 KiB
PHP
<x-layout title="Nueva Venta">
|
|
|
|
<x-section-header subtitle="Punto de Venta" title="Registrar " highlight="Venta" />
|
|
|
|
<!-- Mensajes de Alerta -->
|
|
<x-ui.alert />
|
|
|
|
<form action="{{ route('sales.store') }}" method="POST" id="sale-form" class="pb-20">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- COLUMNA IZQUIERDA: DATOS GENERALES -->
|
|
<div class="lg:col-span-1 space-y-6">
|
|
<!-- Tarjeta Cliente -->
|
|
<div class="bg-panel-bg border border-neutral-800 rounded-xl p-6 shadow-lg">
|
|
<h3 class="text-white font-bold mb-4 uppercase tracking-wider text-sm border-b border-neutral-700 pb-2">
|
|
1. Datos del Cliente
|
|
</h3>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-400 uppercase mb-2">Seleccionar Cliente</label>
|
|
<!-- Select Nativo Simple -->
|
|
<select name="client_id" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
|
|
<option value="">-- Consumidor Final --</option>
|
|
@foreach($clients as $client)
|
|
<option value="{{ $client->id }}">{{ $client->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-xs font-bold text-gray-400 uppercase mb-2">Método de Pago</label>
|
|
<select name="payment_method" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
|
|
<option value="Efectivo">Efectivo</option>
|
|
<option value="Tarjeta de Débito">Tarjeta de Débito</option>
|
|
<option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
|
|
<option value="Transferencia">Transferencia</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- COLUMNA DERECHA: CARRITO -->
|
|
<div class="lg:col-span-2">
|
|
<div class="bg-panel-bg border border-neutral-800 rounded-xl shadow-lg overflow-hidden flex flex-col min-h-[500px]">
|
|
|
|
<div class="p-4 border-b border-neutral-800 bg-neutral-900/50 flex justify-between items-center">
|
|
<h3 class="text-white font-bold uppercase tracking-wider text-sm">2. Detalle de Venta</h3>
|
|
<button type="button" onclick="agregarFila()" class="text-xs bg-neutral-800 hover:bg-neutral-700 text-neon-lime border border-neon-lime/30 px-3 py-1.5 rounded uppercase font-bold transition-colors">
|
|
+ Agregar Producto
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Tabla de Ítems -->
|
|
<div class="flex-grow overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-gray-400">
|
|
<thead class="text-xs text-gray-300 uppercase bg-neutral-800 border-b border-neutral-700">
|
|
<tr>
|
|
<th class="px-4 py-3 w-[40%]">Producto</th>
|
|
<th class="px-4 py-3 text-center w-[15%]">Cant.</th>
|
|
<th class="px-4 py-3 text-right w-[20%]">Precio</th>
|
|
<th class="px-4 py-3 text-right w-[20%]">Subtotal</th>
|
|
<th class="px-4 py-3 text-center w-[5%]"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="items-container">
|
|
<!-- Las filas se generan con JS -->
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- Mensaje vacío -->
|
|
<div id="empty-message" class="flex flex-col items-center justify-center h-40 text-gray-600">
|
|
<p>El carrito está vacío</p>
|
|
<p class="text-xs mt-1">Presiona "Agregar Producto" para comenzar</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Totales -->
|
|
<div class="bg-neutral-900 border-t border-neutral-800 p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<span class="text-xl font-bold text-white uppercase">Total a Pagar</span>
|
|
<span class="text-3xl font-black text-neon-lime">$<span id="total-display">0.00</span></span>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-4">
|
|
<a href="{{ route('sales.index') }}" class="px-6 py-3 text-gray-400 hover:text-white transition-colors font-medium">Cancelar</a>
|
|
<button type="submit" class="px-8 py-3 bg-neon-lime text-neutral-900 font-black uppercase tracking-wide rounded-lg hover:bg-[#b3e600] shadow-lg shadow-neon-lime/20 transition-transform hover:-translate-y-1">
|
|
Confirmar Venta
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
|
|
@push('scripts')
|
|
{{-- SCRIPTS --}}
|
|
<script type="module">
|
|
// 1. Base de datos de productos en JS (Para búsqueda rápida)
|
|
const productsDB = @json($products);
|
|
let rowIndex = 0;
|
|
|
|
$(document).ready(function() {
|
|
// Agregamos una fila inicial
|
|
agregarFila();
|
|
});
|
|
|
|
// Función para agregar nueva fila
|
|
window.agregarFila = function() {
|
|
$('#empty-message').hide();
|
|
|
|
const rowId = `row-${rowIndex}`;
|
|
|
|
const html = `
|
|
<tr class="item-row border-b border-neutral-800 hover:bg-neutral-800/30 transition-colors" id="${rowId}">
|
|
<td class="px-4 py-3 relative">
|
|
<!-- Input Oculto para ID del producto -->
|
|
<input type="hidden" name="items[${rowIndex}][product_id]" class="product-id">
|
|
|
|
<!-- Buscador Visual -->
|
|
<input type="text"
|
|
class="product-search w-full bg-neutral-900 border border-neutral-700 text-white rounded p-2 text-xs focus:ring-neon-lime focus:border-neon-lime placeholder-gray-600"
|
|
placeholder="Buscar por nombre o SKU..."
|
|
autocomplete="off">
|
|
|
|
<!-- Lista de sugerencias (Dropdown) -->
|
|
<div class="suggestions absolute left-4 right-4 z-50 bg-neutral-800 border border-neutral-600 rounded-b-lg shadow-xl max-h-48 overflow-y-auto hidden mt-1"></div>
|
|
</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<input type="number" name="items[${rowIndex}][quantity]" value="1" min="1"
|
|
class="quantity-input w-16 bg-neutral-900 border border-neutral-700 text-white text-center rounded p-1 text-xs focus:ring-neon-lime focus:border-neon-lime"
|
|
readonly> <!-- Readonly hasta que seleccione producto -->
|
|
</td>
|
|
<td class="px-4 py-3 text-right font-mono text-gray-300 price-display">$0.00</td>
|
|
<td class="px-4 py-3 text-right font-mono font-bold text-white subtotal-display">$0.00</td>
|
|
<td class="px-4 py-3 text-center">
|
|
<button type="button" class="text-red-500 hover:text-red-400 p-1" onclick="eliminarFila('${rowId}')">
|
|
×
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
|
|
$('#items-container').append(html);
|
|
rowIndex++;
|
|
}
|
|
|
|
// Función para eliminar fila
|
|
window.eliminarFila = function(id) {
|
|
$(`#${id}`).remove();
|
|
if($('#items-container').children().length === 0) {
|
|
$('#empty-message').show();
|
|
}
|
|
calcularTotalGeneral();
|
|
}
|
|
|
|
// --- LÓGICA DE BÚSQUEDA Y CÁLCULOS (Delegación de eventos) ---
|
|
|
|
// 1. Al escribir en el buscador
|
|
$(document).on('keyup focus', '.product-search', function() {
|
|
let input = $(this);
|
|
let term = input.val().toLowerCase();
|
|
let suggestionsBox = input.siblings('.suggestions');
|
|
|
|
// Si está vacío, ocultar
|
|
if(term.length === 0) {
|
|
suggestionsBox.addClass('hidden').empty();
|
|
return;
|
|
}
|
|
|
|
// Filtrar productos
|
|
let matches = productsDB.filter(p =>
|
|
p.name.toLowerCase().includes(term) ||
|
|
(p.sku && p.sku.toLowerCase().includes(term))
|
|
);
|
|
|
|
// Renderizar resultados
|
|
let html = '';
|
|
if(matches.length > 0) {
|
|
matches.forEach(p => {
|
|
html += `
|
|
<div class="p-2 hover:bg-neutral-700 cursor-pointer text-xs text-white border-b border-neutral-700 last:border-0 suggestion-item flex justify-between"
|
|
data-id="${p.id}"
|
|
data-name="${p.name}"
|
|
data-price="${p.price}"
|
|
data-stock="${p.stock_quantity}">
|
|
<span>${p.name} <span class="text-gray-500">(${p.sku || 'N/A'})</span></span>
|
|
<span class="text-neon-lime font-mono">$${p.price}</span>
|
|
</div>
|
|
`;
|
|
});
|
|
} else {
|
|
html = '<div class="p-2 text-xs text-gray-500 italic">No encontrado</div>';
|
|
}
|
|
|
|
suggestionsBox.html(html).removeClass('hidden');
|
|
});
|
|
|
|
// 2. Al hacer click en una sugerencia
|
|
$(document).on('click', '.suggestion-item', function() {
|
|
let item = $(this);
|
|
let row = item.closest('tr');
|
|
|
|
// Llenar datos en la fila
|
|
row.find('.product-id').val(item.data('id'));
|
|
row.find('.product-search').val(item.data('name')); // Mostrar nombre en el input
|
|
row.find('.price-display').text('$' + parseFloat(item.data('price')).toFixed(2));
|
|
row.find('.price-display').data('price', item.data('price')); // Guardar precio crudo
|
|
|
|
// Activar cantidad
|
|
let qtyInput = row.find('.quantity-input');
|
|
qtyInput.prop('readonly', false).attr('max', item.data('stock')).val(1).focus();
|
|
|
|
// Esconder sugerencias
|
|
item.closest('.suggestions').addClass('hidden');
|
|
|
|
// Calcular
|
|
calcularFila(row);
|
|
});
|
|
|
|
// 3. Cerrar sugerencias al hacer click fuera
|
|
$(document).click(function(e) {
|
|
if(!$(e.target).closest('.product-search-container').length) {
|
|
$('.suggestions').addClass('hidden');
|
|
}
|
|
});
|
|
|
|
// 4. Al cambiar cantidad
|
|
$(document).on('input', '.quantity-input', function() {
|
|
let row = $(this).closest('tr');
|
|
calcularFila(row);
|
|
});
|
|
|
|
// Funciones de Cálculo
|
|
function calcularFila(row) {
|
|
let price = parseFloat(row.find('.price-display').data('price')) || 0;
|
|
let qty = parseInt(row.find('.quantity-input').val()) || 0;
|
|
let subtotal = price * qty;
|
|
|
|
row.find('.subtotal-display').text('$' + subtotal.toFixed(2));
|
|
row.find('.subtotal-display').data('subtotal', subtotal);
|
|
|
|
calcularTotalGeneral();
|
|
}
|
|
|
|
function calcularTotalGeneral() {
|
|
let total = 0;
|
|
$('.subtotal-display').each(function() {
|
|
total += $(this).data('subtotal') || 0;
|
|
});
|
|
$('#total-display').text(total.toFixed(2));
|
|
}
|
|
|
|
</script>
|
|
@endpush
|
|
</x-layout>
|