<%@ include file="/includes.jsp" %>
<%@ taglib prefix="smvc" uri="http://www.springframework.org/tags/form"%>
<link rel="stylesheet" href="../css/webapp.css" type="text/css" />
<script src="../js/jquery/jquery-3.7.1.min.js"></script>
<script src="../js/jquery/jquery-ui.min.js"></script> 
<script src="../js/jquery/jquery.mjs.nestedSortable.js"></script> 
<SCRIPT type=text/javascript>
	$(document).ready(function(){
		$('#sortable').nestedSortable({
			forcePlaceholderSize: true,
			items: 'li',
			handle: 'a',
			placeholder: 'menu-highlight',
			listType: 'ul',
			opacity: .6,
		});
		
		$('.ui-state-default2').hide();
		$('.ui-state-default3').hide();
		
		$('.imgCls1').click(function() {
			if($(this).attr('src') == '../images/page_down.png'){
				$(this).attr('src','../images/media_right.png');
			}
			else{
				$(this).attr('src','../images/page_down.png');
			}
			$(this).parent().parent().find('.ui-state-default2').toggle('fast');
			return false;
		});
		
		$('.imgCls2').click(function() {
			if($(this).attr('src') == '../images/bullet_arrow_down.png'){
				$(this).attr('src','../images/bullet_arrow_right.png');
			}
			else{
				$(this).attr('src','../images/bullet_arrow_down.png');
			}
			$(this).parent().parent().find('.ui-state-default3').toggle('fast');
			return false;
		});
		
			
		
		$('#serialize').click(function(event){
			var s = $('#sortable').sortable('serialize');
			var check = true;
			if(s != null){
				var itemsArr = s.split("&");
				if(itemsArr.length > 0){
					for(i=0;i<itemsArr.length;i++){
						var elements = itemsArr[i].split("=");
						if(elements[0] == "item[]" && elements[1].substring(0,2) != "3/"){
							var test = eval('document.getElementById("item_'+elements[1]+'").title');
							check = false;
							alert("Error in hierarchy structure: Check element :"+test);
						}
						if(elements[0].substring(0,7) == "item_3/"){
							if(elements[1].substring(0,2) != "4/"){
								var test = eval('document.getElementById("item_'+elements[1]+'").title');
								check = false;
								alert("Error in hierarchy structure: Check element :"+test);
							
							}
						}
						if(elements[0].substring(0,7) == "item_4/"){
							if(elements[1].substring(0,2) != "5/"){
							var test = eval('document.getElementById("item_'+elements[1]+'").title');
							check = false;
							alert("Error in hierarchy structure: Check element :"+test);
							
							}
						}
						
						if(elements[0].substring(0,7) == "item_5/"){
							if(elements[1] != null && elements[1] != ""){
								var test = eval('document.getElementById("item_'+elements[1]+'").title');
								check = false;
								alert("Error in hierarchy structure: Check element :"+test);
							
							}
						}
						
					}
				}
			}
			if(check){
				document.getElementById('reorderStr').value = s;
				document.getElementById("dispatchMethod").value = "reOrderPage";
				document.getElementById("form").submit();
			}
			
		})
		
	});
	</script>
<sec:authorize access="hasRole('ADMIN')">
<smvc:form action="../emdt/formObject.form" id="form" modelAttribute="formObjectForm">
<input type="hidden" name="redirectParams" id="redirectParams" value="${requestScope['javax.servlet.forward.query_string']}" />
<smvc:hidden path="reorderStr" id="reorderStr"/>
<input type="hidden" name="id" id="id" value="<c:out value="${formObject.id}"/>"/>
<input type="hidden" name="type" id="type" value="<c:out value="${formObject.type}"/>"/>
<input type="hidden" name="method" id="dispatchMethod"/><br/><br/>
<c:if test="${not empty successMsg}">
   <div align="center" class="message"><c:out value="${successMsg}"/></div><br/>
</c:if>
<div class="menuSectionTitle">Re-order Pages in Form '<c:out value="${formObject.name}"/>'</div>
<div class="wrap">
			
			<ul id="sortable">
			<webapp:forEach id="child" items="${formObject.children}" statusId="s">
			<c:if test="${child != null}">
					
				<li title="<c:out value="${child.label}"/>" id="item_<c:out value="${child.type}"/>/<c:out value="${child.id}"/>" class="ui-state-default1">
				<a href="javascript:void(0);"><img src="../images/media_right.png" class="imgCls1"/>&nbsp;&nbsp;<c:out value="${child.label}"/></a>
				<c:if test="${child ne null and (child.children ne null) and (fn:length(child.children) ne 0)}">
				<ul>
				<webapp:forEach id="child1" items="${child.children}" statusId="s1">
					
					<li title="<c:out value="${child1.label}"/>" id="item_<c:out value="${child1.type}"/>/<c:out value="${child1.id}"/>" class="ui-state-default2">
						<a href="javascript:void(0);"><img src="../images/bullet_arrow_right.png" class="imgCls2"/>&nbsp;&nbsp;<c:out value="${child1.label}"/></a>
						<c:if test="${child1 ne null and (child1.children ne null) and (fn:length(child1.children) ne 0)}">
							<ul>
							<webapp:forEach id="child2" items="${child1.children}" statusId="s2">
						
								<li title="<c:out value="${child2.label}"/>" id="item_<c:out value="${child2.type}"/>/<c:out value="${child2.id}"/>" class="ui-state-default3">
									<a href="javascript:void(0);"><img src="../images/Arrow_dot_horiz.png" class="imgCls3" style="cursor:hand"/>&nbsp;&nbsp;<c:out value="${child2.label}"/></a>
									
								</li>
							</webapp:forEach>
						</ul>
						</c:if>
					</li>
				</webapp:forEach>
				</ul>
				</c:if>
				</li>
			</c:if>
		</webapp:forEach>

			</ul>
</div>
<div>
<div align="right" style="width: 500px"><br/>
<input type="button" name="serialize" id="serialize" value="Save" />
<input type="button" value="Cancel" onclick="cancelSort()"/>
<input type="button" value="Back to Pages" onclick="backScreen()"/>
</div>
</div>
</smvc:form></sec:authorize>