<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
	require_once 'conf/link.php';
	require_once '_cargar_almacen.php';


?>
<html>
<head>
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
<link rel="stylesheet" href="css/dragcss.css" media="screen" type="text/css" />
<script type="text/javascript" src='js/drag.js'></script>
<script src="js/jquery-3.6.3.min.js"></script>
<script type="text/javascript">
function remove(link) { 
    link.parentNode.parentNode.removeChild(link.parentNode);
}

function validarForm(formlist)
{
	if(formlist.nombrelista.value.length==0)
	{
		formlist.nombrelista.focus();    // Damos el foco al control
		alert('No has escrito el nombre de la lista'); //Mostramos el mensaje
		return false;
	}
	else
	{
		saveDragDropNodes();
		formlist.submit();
	}
}


$(document).ready(function() {		
    $("#nombrelista").change(function(){
			//console.log($("#nombrelista").val());
            $.ajax({
            url: "_functions_aux.php",
            type: "POST",
            data: {
                data_list : $("#nombrelista").val(),
				query : "data_list"
            },
            success: function (jsonStr) {
				//console.log("success");
				$('#seleccionados').empty();
				var json = jsonStr;
				//console.log(json);

				//console.log(json[1].thumbnail);

				//console.log(json.length);
				//$("#seleccionados").parent.remove();
				
				//document.getElementById('seleccionados').empty();
				
				for (var i = 0; i < json.length; ++i) {
                    console.log(json[i].filename);
					$("#seleccionados").append('<li id="'+json[i].id+'"><img src="almacen/'+json[i].thumbnail+'" height="40">'+json[i].filename+'<a href="#" onClick="remove(this)" style="float: right;">X</a></li>');
                };
			
            }
			});
		});
	 });
</script> 
</head>
	<body>
	<div id="result-playername" name="result-playername"></div>
		<form method='post' action='_list_edit.php' name='formlist' id='formlist' >
		<input type='hidden' name='listOfItems' id='listOfItems' value=''/>
			Nombre de Lista : 
			<select name='nombrelista' id='nombrelista' >
			<option value="">Seleccione una Lista</option>
			<?php
				cargar_listas($conexion);
			?>
			</select>
			<br>
			Elementos Multimedia<br>
			

<div id="dhtmlgoodies_dragDropContainer">
	<div id="dhtmlgoodies_listOfItems">
		<div>
			<p>Almac&eacute;n Multimedia</p>
			<ul id="allItems">
				<?php echo cargar_almacen($conexion); ?>
			</ul>
		</div>
	</div>
	<div id="dhtmlgoodies_mainContainer">
		<!-- ONE <UL> for each "room" -->
		<div>
			<p>Nueva Lista de Reproducción</p>
			<ul id="seleccionados">
				
			</ul>
		</div>
		
	</div>
</div>
<div id="footer">
<input type="button" value="Enviar" onClick='validarForm(formlist);'></form>
</div>
<ul id="dragContent"></ul>
<div id="dragDropIndicator"><img src="images/insert.gif"></div>
	</body>
</html>