<%@ 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> 
<style>
 #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span { position: absolute; margin-left: -1.3em; }
</style>
<SCRIPT type=text/javascript>
	$(document).ready(function(){
		$('#sortable').nestedSortable({
			forcePlaceholderSize: true,
			items: 'li',
			handle: 'a',
			placeholder: 'menu-highlight',
			listType: 'ul',
			opacity: .6,
		});

		$('#serialize').click(function(event){
			var s = $('#sortable').sortable('serialize');
			var check = true;
			if(s != null){
				var itemsArr = s.split("&");
				if(itemsArr.length > 0){
					for(var i=0;i<itemsArr.length;i++){
						var elements = itemsArr[i].split("=");
						if(elements[0].substring(0,7) == "item_5/"){
							if(elements[1] != null && elements[1] != ""){
								var title=document.getElementById('item_'+elements[1]).title;
								var test = eval(title);
								check = false;
								alert("Error in hierarchy structure: Check element :"+test);
							}
						}
						
					}
				}
			}
			if(check){
				document.getElementById('reorderStr').value = s;
				document.getElementById("dispatchMethod").value = "reOrderField";
				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="${formObjectForm.formObject.id}"/>"/>
<input type="hidden" name="type" id="type" value="<c:out value="${formObjectForm.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 Fields in Section '<c:out value="${formObjectForm.formObject.name}"/>'</div>
<div class="wrap">
			
			<ul id="sortable">
				<webapp:forEach id="child" items="${formObject.children}" statusId="s2">
					<li title="<c:out value="${child.label}"/>" id="item_<c:out value="${child.type}"/>/<c:out value="${child.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="${child.label}"/></a>
					</li>
				</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 Fields" onclick="backScreen()"/>
</div>
</div>
</smvc:form></sec:authorize>