<ul class="list-group">
<li class="list-group-item">
		<div class="col-4 col-md-8 form-group producto-agregar">
			<input type="hidden" name="id_producto[]" class="input-id-producto">
			<input type="hidden" name="ps_id_product" class="input-ps-id-product">
			<input type="text" name="producto" class="form-control input-producto new ml-0" placeholder="Producto" autocomplete="off">
			<div class="product-warning hidden">Este producto ya se encuentra en la lista</div>
		</div>

		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th class="text-center">ID</th>
						<th class="text-center">ID Prestashop</th>
						<th>Producto</th>
						<th class="text-center">Cantidad</th>
						<th class="text-center">Acciones</th>
					</tr>
				</thead>
				<tbody class="lista-productos">
				</tbody>
			</table>
		</div>
	</li>
	<table class="d-none">
		<tbody class="copy">
			<tr id="" class="producto-existente" data-ps-id="" data-id="">
				<td class="text-center">
					<span class="badge badge-pill badge-primary id-producto ver-producto"></span>
				</td>
				<td class="text-center">
					<span class="badge badge-pill badge-primary ps-id-product ver-ps"></span>
				</td>
				<td>
					<img class="imagen-producto-view">
					<span class="nombre"></span>
				</td>
				<td class="text-center quantity">
					<input type="number" name="cantidad[]" class="form-control input-cantidad" placeholder="Cantidad" value="1">
				</td>
				<td class="text-center">
					<button type="button" class="btn btn-danger btn-xs d-lg-inline btn-remover">
						<i class="fa fa-times"></i>
					</button>
				</td>
			</tr>
		</tbody>
	</table>


</ul>



<script>
<?php
echo 'var ps_imagenes = ' . json_encode($ps_imagenes) . ';
';
echo 'var info_productos = ' . json_encode($info_productos) . ';
';
?>
$(document).ready(function() {
	$('.input-producto').autocomplete({
		source: function( request, response ) {
			let articulo = $('.input-producto').parent();
			articulo.find('.input-id-producto').val('');
			articulo.find('.input-ps-id-product').val('');

			$.ajax( {
				url: 'productos/ac_nombre',
				dataType: "jsonp",
				data: {
					term: request.term
				},
				success: function( data ) {
					response( data );
				}
			} );
		},
		minLength: 2,
		select: function( event, ui ) {
			event.preventDefault();
			let articulo = $('.input-producto').parent();
			articulo.find('.input-producto').val(ui.item.label);
			articulo.find('.input-id-producto').val(ui.item.id);
			articulo.find('.input-ps-id-product').val(ui.item.ps_id);
			$(this).blur();
		}
	});



	// Carga datos del producto
	$(document).on('change', '.input-producto', function() {
		$('.product-warning').hide();
		let input_producto = $(this);
		let producto = $(this).closest('.producto-agregar');
		let ps_id = producto.find('.input-ps-id-product').val();
		let imagen = producto.find('.imagen-producto');
		if(ps_imagenes[ps_id] != undefined) {
			muestra_imagen(imagen, ps_imagenes[ps_id]);
		}

		// Busca si producto ya está en la lista
		// En caso de no estar habilita el botón de agregar
		let existe = 0;
		$('.producto-existente').each(function() {
			if (ps_id == $(this).data('ps-id') && ps_id != '' && ps_id != 0) {
				existe++;
			}
		});

		if (existe <= 0) {
			agregar(producto);
			producto.find('.input-producto').val('');
			producto.find('.input-ps-id-product').val('');
			producto.find('.input-id-producto').val('');
			$('.imagen-producto').removeAttr('src').removeAttr('data-original-title').removeAttr('title');
		}
		else {
			// console.log('existe');
			$('.product-warning').show();
		}
	});

	$(document).on('click', '.btn-remover', function(){
		let producto = $(this).closest('.producto-existente');
		let id_product = $(this).data('id-product');

		producto.remove();
	});
});

function agregar(producto){
	let id_producto = producto.find('.input-id-producto').val();
	let ps_id = producto.find('.input-ps-id-product').val();
	let nombre = producto.find('.input-producto').val();

	let html = $($.parseHTML($('.copy').html()));

	html.attr('data-id', id_producto).attr('data-ps-id', ps_id);
	html.find('.id-producto').html(id_producto);
	html.find('.ps-id-product').html(ps_id);
	html.find('.nombre').html(nombre);

	let imagen = html.find('.imagen-producto-view');
	if(ps_imagenes[ps_id] != undefined) {
		muestra_imagen(imagen, ps_imagenes[ps_id]);
	}

	if (info_productos[id_producto]['disponibles'] < 1) {
		html.find('.quantity').prev().append('<div class="alert alert-danger mt-2">Producto AGOTADO. Validar que sea el producto correcto.</div>');
//		alert('agotado');
		//articulo.find('.product-warning-almacen').show();
		//articulo.find('.product-warning-almacen').removeClass('hidden');
		//articulo.find('.span-disponibles-almacen').addClass('danger');
	}

	$('.lista-productos').append(html);
}
</script>
