<?php
session_start();
include('config.php');
include($rutaPhp.$rutaHtml.'/maqueta/includes.php');

include($rutaPhp.$rutaHtml.'/acceso/control.php');
include($rutaPhp.$rutaHtml.'/maqueta/arriba.php');

if($_GET['ubicacion']) $esperarCarga=true;

include($rutaPhp.$rutaHtml.'/contenidos/popup-playas.php');

?>
<?php include($rutaPhp.$rutaHtml.'/librerias/teclado.php'); ?>
<h2>Productos por Ubicación</h2>

<form id="formularioUbicacion" name="formularioUbicacion" method="post" action="">
	<p>Ubicación:<br />
	<img src="<?php echo DIR_IMAGENES; ?>/teclado.png" alt="Mostrar teclado" class="iconoTeclado" id="tecladoUbicacion" /><input type="text" name="ubicacion" id="ubicacion" value="<?php echo $_GET['ubicacion']; ?>" class="campo mayusculas"/><img src="<?php echo DIR_IMAGENES; ?>/x.png" alt="Borrar" class="boton-x" id="borrarUbicacion"/><img src="<?php echo DIR_IMAGENES; ?>/playa.png" alt="Seleccionar Playa" id="botonPlayas" style="width:45px;cursor:pointer;padding-left:20px;margin-right:-50px;margin-bottom:-10px"/></p>
</form>

<div id="listaContenedores">
</div>

<script>

function carga() {

	$('#popupCargando').show();
		
	$.post( "<?php echo $rutaHtml; ?>/contenidos/cargar-contenedores-ubicacion-U.php?traza=<?php echo $_GET['traza']; ?>", { ubicacion:$("#ubicacion").val() })
		.done(function(data) {
			$('#popupCargando').hide();
			$('#listaContenedores').html(data);
	});

}

$(document).ready(function() {

	$("#ubicacion").focus();

	if($("#ubicacion").val()!='') carga();

	$('#formularioUbicacion').on("submit",function(e){
		
		e.preventDefault();
		carga();
		
	});
	
	$('#borrarUbicacion').on("click",function(){
		
		$("#ubicacion").val('');
		$("#listaContenedores").empty();
		$("#ubicacion").focus();
		
	});
	
	$('#tecladoUbicacion').on("click",function(){
		
		$('#teclado').show();
		$('#valor').val( $('#ubicacion').val() );
		$('#valorOculto').val( $('#ubicacion').val() );
		$('#enter').attr('campoValor','ubicacion');
		$('#enter').attr('formulario','formularioUbicacion');
		
	});
	
	$('#botonPlayas').on("click",function(e){
		e.preventDefault();
		$('#popupPlayas').show();
	});
		
	$('.selectorPlaya').on("click",function(e){
		e.preventDefault();
		$('#popupPlayas').hide();
		$("#ubicacion").val( $(this).attr('id') );
		$('#formularioUbicacion').submit();
	});

});

</script>

<?php
include($rutaPhp.$rutaHtml.'/maqueta/abajo.php');
?>
