<%@ include file="/includes.jsp"%>
<link rel="stylesheet" href="../webapp.css" type="text/css" />
<script src="../table.js" type="text/javascript"></script><br />
<link rel="stylesheet" href="../tables.css" type="text/css" />
<link rel="stylesheet" href="../css/draggable.css" type="text/css" />
<script src="../js/jquery/jquery-ui.js"></script>
<br />
<script type="text/javascript">
function setStyle(){
    var table=document.getElementById('table-3');
	var rowCount=table.rows.length;
	for (var i = 0, row; row = table.rows[i]; i++) {
  		if(i%2==0){
      		row.setAttribute('class','evenRow');
      	}else{
      	 	row.setAttribute('class','oddRow');
      	}
   }  
}
function saveOrder(){
	 $("#meetingItemsTblId tr").each(function() {
	    	var itemid = $(this).find("td:last").html();  
	    	var rowCount = $(this).parent().children().index($(this));
	    	document.getElementById(itemid).value=rowCount;
 	});
	document.getElementById("form").action="../meetings/moveMeetingItem.form";
	document.getElementById("form").submit();
}
</script>
<sec:authorize access="hasAnyRole('MEETING','EMDT','MANAGEMENT','NMDT_COORD')">
<form name="form" id="form" method="post" >
    <input type="hidden" name="<c:out value="${_csrf.parameterName}"/>" value="<c:out value="${_csrf.token}"/>" />

<input type="hidden" name="dispatchMethod" value="reOrderMeeting" />
<table width="70%" align="center" style="clear: both;">
	<tr>
		<td><br />
		<br />
		<c:if test="${!emdt.currentMeeting.locked}">
			<span class="helpmessage">Drag and drop the patients into the desired order</span>
		</c:if>
		<br />
		<table class="table" width="100%">
			<tr class="tableHeader">
				<th width="10%">Surname</th>
				<th width="10%">Forename</th>
				<th width="5%">Age</th>
				<th width="15%">NHS&nbsp;Number</th>
				<th width="12%">Hospital Number</th>
				<th width="12%">Last MDT</th>
				<th width="12%">Meeting&nbsp;Type</th>
				<th width="12%">Follow&nbsp;Up</th>
				<th width="12%">Primary Clinician</th>
				<th width="12%">Priority</th>
			</tr>
		</table>
		<c:forEach var="item" items="${emdt.currentMeeting.items }">
			<input type="hidden" name="<c:out value="${item.guid}"/>" id="<c:out value="${item.guid}"/>" />
		</c:forEach></td>
	</tr>
	<tr>
		<td>
		<table id="meetingItemsTblId" cellspacing="0" cellpadding="2" width="100%" class="table" onclick="setStyle();" title="Drag and drop patients to set meeting running order">
			<tbody>
			<c:forEach var="item" items="${emdt.currentMeeting.items }"
				varStatus="s">
				<tr class='<c:out value="${s.count%2 == 0 ? 'odd' : 'even' }"/>Row <c:out value="${selClass }"/>'>
					<td width="10%"><img src="../images/up-down.png"/> &nbsp; <c:out value="${item.patientDiscussed.surname }"/>&nbsp;
					</td>
					<td width="10%"><c:out value="${item.patientDiscussed.forename }"/>&nbsp;</td>
					<td width="7%"><c:out value="${item.patientDiscussed.currentAge }"/>&nbsp;</td>
					<td width="15%"><c:out value="${item.patientDiscussed.nhsNumber }"/>&nbsp;</td>
					<td width="13%"><c:out value="${item.patientDiscussed.hospitalNumber }"/>&nbsp;</td>
					<td width="12%"><fmt:formatDate value="${item.lastDiscussedDate }" pattern="dd MMM yyyy" />&nbsp;</td>
					<td width="14%"><webapp:listValue domain="EMDT" listName="MeetingItemType" key="${item.type}" />&nbsp;</td>
					<td width="10%"><fmt:formatDate value="${item.followUpDate }" pattern="dd MMM yyyy" />&nbsp;</td>
					<td width="10%"><c:out value="${item.patientDiscussed.primaryClinicianInCSMatchesMeetingTG}"/>&nbsp;</td>
					<td><webapp:listValue domain="EMDT" listName="PatientPriority" key="${item.patientDiscussed.priority}" /></td>
					<td style="display: none"><c:out value="${item.guid}"/></td>
				</tr>
			</c:forEach></tbody>
		</table>
		</td>
	</tr>
</table>
<div>
	<div align="center" >
		<br/>
		<c:choose>
			<c:when test="${emdt.currentMeeting.locked }">
				<span class="info">This meeting is locked: changes are not permitted.</span>
			</c:when>
			<c:otherwise>
				<input type="button" value="Save" onclick="saveOrder();" />
				<input type="reset" value="Undo changes" onclick="document.location='reOrderMeetingItems.jsp'" />
				<input type="button" value="Back" onclick="document.location.href = '../meetings/resumeMeeting.form'" />
			</c:otherwise>
		</c:choose>
		
		<br/>
		<br/>
		<br/>
			<div class="meetingNavigationPanel" style="width:70%;">
				<table>
					<tr>
						<td>
							<a href="createAndEditMeeting.form?action=edit">Meeting Administration <img src="../images/16x16/bullet_go.png" /></a> <br/>
						</td>
						<td>
							<a href="setMeetingFilter.form?filterId=0">Select Another Meeting <img src="../images/16x16/bullet_go.png" /> </a> <br/>
						</td>
						<td>
							<c:if test="${emdt.currentMeeting != null}">
								<a href="selectMeeting.form?forward=selectItem&id=<c:out value="${emdt.currentMeeting.guid }"/>">Return to Current Meeting <img src="../images/16x16/arrow_undo.png" /> </a> <br/>
							</c:if>
						</td>
						
					</tr>
				
				</table>
			</div>		
	</div>
</div>
</form></sec:authorize>
	<script type="text/javascript">
		$('#meetingItemsTblId tbody').sortable({
			opacity: 0.5
		});
	</script>
