<%@page import="com.rms.tfc.entity.Producto"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="com.rms.tfc.util.DateUtil"%>
<%@page import="com.rms.tfc.util.SessionUtil"%>
<%
	List<Producto> listaProductos =  (List<Producto>) request.getAttribute("objetoJSP");
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Gesti&oacute;n de tienda</title>
<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<link href="../css/tienda.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-1.10.2.js"></script>
<script type="text/javascript">
var submitDone = false;

var numLineas = 0;

function crearPedido(){
	if (!submitDone){
		var formulario = document.getElementById("newPedido");
		if (validar(formulario)){
			formulario.numLineas.value = numLineas;
			submitDone = true;
			formulario.submit();
		}
	}
}

function creaLinea(){
	numLineas++;
	$('#lineasPedido tr:last').after(nuevaLinea());
}

function nuevaLinea(){
	var ret = "<tr><td class='texto' align='center'>" + numLineas + "</td>";
	ret += "<td class='texto' align='center'>" + selectorProductos() + "</td>";
	ret += "<td class='texto' align='center'><input type='text' name='cantidadPedida_" + numLineas + "' id='cantidadPedida_" + numLineas + "' value=''/></td>"; 
	ret += "</tr>";
	return ret;
}

function selectorProductos(){
	var ret = "<select name='idProducto_" + numLineas + "' id='idProducto_" + numLineas + "' class='texto'>";
	<% 
		if (listaProductos != null && !listaProductos.isEmpty()){
			Iterator<Producto> itProductos = listaProductos.iterator();
			Producto producto = null;
			while (itProductos.hasNext()){
				producto = itProductos.next();
	%>
	ret += "<option value='<%=producto.getIdProducto()%>'><%=producto.getDescripcion()%></option>";
	<%
			}
		}
	%>
	ret += "</select>";
	return ret;
}

function validar(formulario){
	var campoDescripcion = document.getElementById("descripcionPedido");
	if (campoDescripcion.value == ""){
		alert("Por favor, introduzca una descripción para el pedido");
		return false;
	}
	if (numLineas == 0){
		alert("Por favor, agregue al menos una línea al pedido");
		return false;
	}
	var campoCantidad = null;
	var cantidad = null;
	for (var i = 1; i <= numLineas; i++){
		campoCantidad = document.getElementById("cantidadPedida_" + i);
		cantidad = trim(campoCantidad.value);
		campoCantidad.value = cantidad;
		if (cantidad == '' || !/^([0-9])*$/.test(cantidad)){
			alert("La cantidad pedida debe ser un número entero");
			return false;
		}
	}
	return true;
}

function trim(cadena){
	for(var i=0; i<cadena.length; ){
		if(cadena.charAt(i)==" "){
			cadena=cadena.substring(i+1, cadena.length);
		} else {
			break;
		}
	}
	for(var i=cadena.length-1; i>=0; i=cadena.length-1){
		if(cadena.charAt(i)==" "){
			cadena=cadena.substring(0,i);
		} else {
			break;
		}
	}
	return cadena;
}
</script>
</head>
<body>
<table width="945" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td bgcolor="#272e96" width="945" height="75" align="center"><span style="color: #FFFFFF; font-weight:bold; font-size: 35px;">Aplicaci&oacute;n de gesti&oacute;n de tienda</span></td>
  </tr>
  <tr>
    <td><%@ include file="cabecera.jsp" %>
		<table width="912" border="0" align="center" cellpadding="0" cellspacing="0">
		  <tr>
		    <td class="texto">Usuario: <strong><%=SessionUtil.getUserSession()%></strong></td>
		    <td class="volver">&nbsp;</td>
		  </tr>
		  <tr>
		    <td class="texto"><a href="admin.html">Administraci&oacute;n</a> &gt; <strong>Crear pedido</strong></td>
            <td class="volver"><div align="right" class="volver"></div></td>
		  </tr>
		  <tr>
		    <td colspan="2" class="texto"><img src="../img/sp.gif" width="2" height="5"></td>
		  </tr>
		  <tr>
		    <td colspan="2" class="texto"><img src="../img/sp-gris.gif" width="912" height="1"></td>
		  </tr>
		</table>
	</td>
  </tr>
  <tr>
    <td height="20">&nbsp;</td>
  </tr>
  <tr>
    <td>
    <form action="SavePedido.html" method="post" name="newPedido" id="newPedido">
    <table width="400" border="0" align="center" cellpadding="2" cellspacing="0">
      <tr>
      	<td bgcolor="#E1E1E1" class="titulos" align="center">Nuevo pedido</td>
      </tr>
      <tr>
      	<td class="texto"><b>Descripci&oacute;n: </b><input type="text" class="texto" name="descripcionPedido" id="descripcionPedido" size="100" length="255" value=""/></td>
      </tr>
      <tr>
      	<td class="texto"><b>Fecha: </b><input type="text" class="disabled" name="fechaPedido" id="fechaPedido" size="10" disabled value="<%=DateUtil.getStringFromDate(DateUtil.getNow(), "dd/MM/yyyy") %>"/></td>
      </tr>
      <tr>
        <td align="right" class="texto">
        	<a href="javascript:creaLinea();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('CrearLinea','','../img/creaLinea2.gif',1)">
        	<img src="../img/creaLinea.gif" name="CrearLinea" width="123" height="25" border="0"></a>
        </td>
      </tr>
      <tr>
      	<td bgcolor="#E1E1E1" class="titulos" align="center">L&iacute;neas</td>
      </tr>
      <tr>
      	<td align="center">
      		<table width="100%" border="0" align="center" cellpadding="2" cellspacing="0" id="lineasPedido">
      			<tbody>
      				<tr>
      					<td bgcolor="#E1E1E1" class="titulos" align="center">N&uacute;mero l&iacute;nea</td>
      					<td bgcolor="#E1E1E1" class="titulos" align="center">Producto</td>
      					<td bgcolor="#E1E1E1" class="titulos" align="center">Cantidad pedida</td>
      				</tr>
      			</tbody>
      		</table>
      	</td>
      </tr>
      <tr>
      	<td colspan="2" align="right">
			<input type="hidden" name="numLineas" id="numLineas" value=""/>
			<a href="javascript:crearPedido();" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Guardar','','../img/guardar2.gif',1)"><img src="../img/guardar.gif" alt="Guardar" name="Guardar" width="172" height="35" border="0"></a>
		</td>
      </tr>
    </table>
	</form>
	</td>
  </tr>  
  <tr>
  	<td>
		<table width="934" border="0" align="center" cellpadding="0" cellspacing="0">
	  		<tr>
	  			<td>&nbsp;</td>
	  		</tr>
	  		<tr>
	  			<td><div align="center">
	        		<p><img src="../img/line.gif" width="913" height="10"></p></div>
	        	</td>
	  		</tr>
	  		<tr>
	    		<td><div align="center"><span class="pie">2015 TFC Roberto Mart&iacute;nez Sierra</span></div></td>
	  		</tr>
      	</table>
    </td>
  </tr>
</table>
</body>
</html>