<html>
<%@ include file="/includes.jsp"%>
<%@ taglib prefix="smvc" uri="http://www.springframework.org/tags/form"%>
<link rel="stylesheet" href="../css/draggable.css" type="text/css" />
<script src="../js/ReferralsDefinition.js" type="text/javascript"></script>

    <head>
        <sec:csrfMetaTags/>
    </head>
<%--
<script src="../js/jquery/jquery-ui.js"></script>
--%>
<script type="text/javascript">
if (!String.prototype.trim) {
	  (function() {
	    // Make sure we trim BOM and NBSP
	    var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
	    String.prototype.trim = function() {
	      return this.replace(rtrim, '');
	    };
	  })();
	}

	<%--
	Handler for onchange() event of the Hospitals <select> list.
	We have two lookup tables based on users per hospital,
		h_NNN where NNN = hospital primary key, value = list of user ID integers separated by commas
		u_NNN where NNN = user primary key, value = user name to display
	This handler populates the Clinician <select> with user names based on the user IDs in the selected hospital.
	--%>
function selectClinicianforTheSelectedHospital(){
	if (document.getElementById("selectedHospital") === null)
		return;
	var selectedHospitalId= document.getElementById("selectedHospital").value;
	var select=document.getElementById("clinician");
	
		if(select!=null){
			for(var i = 1; i <=select.options.length; i++) {
			  select.options.remove(i);
			  select=document.getElementById("clinician");
			 }
			select.innerHTML = "";
		}
		if(selectedHospitalId===""){
		
		}else{
			var hospitalselected = "h_"+selectedHospitalId;
			var locationList = document.getElementById(hospitalselected).value;
		
			if(locationList.charAt(0) === '['){
    			locationList= locationList.substr(1);
    		}
    		if(locationList.charAt(locationList.length-1) === ']'){
    			locationList= locationList.substr(0,locationList.length-1);
    		}
    		
    		var res = locationList.split(",");
    		var uname, cname, ctl;
		    for(var i = 0; i <res.length; i++) {
		        uname = res[i];
                if (uname==="" || uname == null)
                    continue;
                uname = "u_"+uname.trim();
		        ctl = document.getElementById(uname);
                if (ctl == null)
                   continue;
                cname = ctl.value;
				var opt = new Option(cname, uname);
				select.options[i] = opt;
		 	}
		}
	}
</script>
<smvc:form id="referralsDefinitionForm" action="../emdt/referralsDefinition.form" method="POST">
	<input type="hidden" id="${_csrf.parameterName}" value="${_csrf.token}" />
	<input type="hidden" name="redirectParams" value="<c:out value="${requestScope['javax.servlet.forward.query_string']}" />" />
	<%@ include file="saveReferralsDefinitionAspopup.jsp" %>
	<br/>
	<c:choose>
		<c:when
			test="${requestScope.successMsg != null || requestScope.errorMsg != null}">
			<c:if test="${requestScope.successMsg != null}">
				<span class="info"><c:out value="${requestScope.successMsg}"/></span>
			</c:if>
			<c:if test="${requestScope.errorMsg != null}">
				<span class="error"><c:out value="${requestScope.errorMsg}"/></span>
			</c:if>
		</c:when>
		<c:otherwise>
		</c:otherwise>
	</c:choose>
	<smvc:errors />
	<br />
	<br />

	<fieldset style="width: 70%" class="nobg"><c:choose>
		<c:when test="${referralsDefinition eq null}">
			<legend>Add Referral Pathway</legend>
		</c:when>
		<c:otherwise>
			<legend>Edit Referral Pathway</legend>
		</c:otherwise>
	</c:choose>
	<fieldset><input type="hidden" name="task" id="task" /> 
	<input type="hidden" name="referralsDefinitionId" id="referralsDefinitionId" value="<c:out value="${referralsDefinition.id}"/>"/>
	<input type="hidden" name="referralsDefinitionCreationDate" id="referralsDefinitionCreationDate" value='<fmt:formatDate  pattern="dd/MM/yyyy HH:mm:ss" value="${referralsDefinition.creationDate}" />'/>
	<table width="100%" cellspacing="0" cellpadding="8" id="referralpathwayid">
		<tr>
			<td align="left" valign="top">Pathway Title <span
				style="color: red;">*</span></td>
			<td align="left" valign="top"><c:choose>
				<c:when test="${referralsDefinition eq null}">
					<input type="text" name="title" id="title" />
				</c:when>
				<c:otherwise>
					<input type="text" name="title" id="title" 	value="<c:out value="${referralsDefinition.title}"/>" />
				</c:otherwise>
			</c:choose></td>
		</tr>
		<tr>
			<td align="left" valign="top">Speciality<span
				style="color: red;">*</span>
			<td align="left" valign="top">
					<webapp:selectAndEditList path="speciality" domain="EMDT" list="Speciality"	includeEmpty="true" id="speciality" currentValue="${referralsDefinition.speciality}" />
			</td>
		</tr>
		<tr>
			<td width="20%" align="left" valign="top">Published</td>
			<td width="80%" align="left" valign="top"><c:choose>
				<c:when test="${referralsDefinition eq null}">
					<input type="radio" name="published" value="true"/> Yes
                    <input type="radio" name="published" value="false"/> No
				</c:when>
				<c:otherwise>
					<c:choose>
						<c:when test="${referralsDefinition.published eq true}">
							<input type="radio" name="published" value="true"
								checked="checked" />Yes
		                    <input type="radio" name="published" value="false" />No
						</c:when>
						<c:otherwise>
							<input type="radio" name="published" value="true" />Yes
		                    <input type="radio" name="published" value="false"
								checked="checked" />No
						</c:otherwise>
					</c:choose>
				</c:otherwise>
			</c:choose>
		</tr>
		<tr><td width="20%" align="left" valign="top">Hospital</td>
			<td width="80%" align="left" valign="top">
				<select name="selectedHospital"  id="selectedHospital" onchange="selectClinicianforTheSelectedHospital()">
						<option value="">---select a hospital----</option>
						<c:forEach var="hospitals" items="${webapp.hospMap}">
						  <option value="<c:out value="${hospitals.key}"/>"<c:if test="${referralsDefinition.hospitalId eq hospitals.key}"> selected="selected"</c:if> ><c:out value="${hospitals.value}"/></option>
						</c:forEach>
				</select>
				<c:forEach var="hospitals" items="${webapp.usersByHospitalIdMap}">
					<input type="hidden" name="h_<c:out value="${hospitals.key}"/>" id ="h_<c:out value="${hospitals.key}"/>"
					value="<c:forEach var="userId" items="${hospitals.value}"><c:out value="${userId},"></c:out> </c:forEach>"/>
				</c:forEach>
			</td>
		</tr>
		<tr>
			<td valign="top">Clinicians <input type="hidden" name="clinicianList" id="clinicianList"></td>
			<td>
			<table width="40%" id="clinicianTblId" border="1" bordercolor="#F8F8FF">
				<tbody>
				<c:if test="${fn:length(referralsDefinition.clinicians)>0}">
					<c:forEach var="user" items="${referralsDefinition.clinicians}" varStatus="i">
						<tr id="cliniciantable${user.id}">
							<td class="grabable" title="Drag and drop to reorder"></td>
							<td class="grabableTitle"><c:out value="${user.name}"/></td>
							<td align="center"><a
								onclick="deleteRow('cliniciantable<c:out value="${user.id}"/>','clinicianTblId')">
							<img src="../images/delete.png" border="0" alt="Delete"
								onmouseover="this.style.cursor = cursorPointer; " /></a></td>
							<td style="display: none;"><c:out value="${user.name}"/></td>
						</tr>
					</c:forEach>
				</c:if>
				</tbody>
			</table>
			</td>
		</tr>
		<tr>
			<td width="10%"></td>
			<td>
			Add Clinician <select id="clinician" name="clinician"></select>
			<c:forEach var="user" items="${webapp.userIdNameMap}">
				<input type="hidden" id="u_<c:out value="${user.key}"/>" value="<c:out value="${user.value}"/>"/>
			</c:forEach>
			<a  onclick="addClinician();" title="Add selected Clinician to referral pathway">
				<img src="../images/add.png" border="0" alt="Add" onmouseover="this.style.cursor = cursorPointer;" /></a>
			</td>
		</tr>
		<tr>
			<td valign="top">Forms and <br />
			Summaries <input type="hidden" name="mandatoryForms"
				id="mandatoryForms"> <input type="hidden"
				name="nonMandatoryForms" id="nonMandatoryForms"> <input
				type="hidden" name="groups" id="groups"> <input
				type="hidden" name="summariesList" id="summariesList"></td>
			<td>
			<table width="100%" id="formsTblId" border="1" bordercolor="#F8F8FF">
				<c:if
					test="${referralsDefinition.formSummaryMapOrder!=null && fn:length(referralsDefinition.formSummaryMapOrder)>0}">
					<tr>
						<th></th>
						<th width=50%>Name</th>
						<th>Edit</th>
						<th>Mandatory</th>
						<th>Form Group</th>
						<th>Delete</th>
					</tr>
					<tbody>
					
					<c:set var="formSummaryMapOrderLength">${fn:length(referralsDefinition.formSummaryMapOrder)}</c:set>	
					<c:set var="index"/>
					  <% int rowLenth= Integer.parseInt(pageContext.getAttribute("formSummaryMapOrderLength").toString());
					     for (int index = 1; index<= rowLenth; index++) {
					    	pageContext.setAttribute("index",index);
					   %>
					<c:forEach var="formSummaryMapOrder" items="${referralsDefinition.formSummaryMapOrder}">
					   		<c:if test="${formSummaryMapOrder.location==index}">
							<c:choose>
								<c:when test="${formSummaryMapOrder.type=='Form'}">
							  	<c:if test="${fn:length(referralsDefinition.formsSet)>0}">
									<c:forEach var="form" items="${referralsDefinition.formsSet}">
										<c:if test="${form.key.formFullPath eq formSummaryMapOrder.formFullPath}">
											<tr id="formtable${form.key.formFullPath}"  class="grabableRow" <c:if test="${formSummaryMapOrder.formExists ne true}"> style="display: none" </c:if> >
												<td style="display: none;"></td>
												<td class="grabable"></td>
												<td class="grabableTitle" style="white-space:pre" title="Form full path: <c:out value="${form.key.formFullPath}"/>"><c:out value="${form.key.displayName}"/></td>
												<td align="center"><img src="../images/16x16/edit.png"
													onclick="editSummary('formtable<c:out value="${form.key.formFullPath}"/>');"
													onmouseover="this.style.cursor = cursorPointer" id="editimgId<c:out value="${form.key.formFullPath}"/>"/>
													<img src="../images/16x16/save.png"
													onclick="setEditSummary('formtable<c:out value="${form.key.formFullPath}"/>');"
													onmouseover="this.style.cursor = cursorPointer" id="saveimgId<c:out value="${form.key.formFullPath}"/>" style="display: none"/>
												</td>
												<c:choose>
													<c:when test="${form.key.isMandatory eq true}">
														<td align="center"><input type="checkbox" id="<c:out value="${form.key.formFullPath}"/>"
															checked="checked"></input></td>
													</c:when>
													<c:otherwise>
														<td align="center"><input type="checkbox" id="<c:out value="${form.key.formFullPath}"/>"></input></td>
													</c:otherwise>
												</c:choose>
												<td><select id="groupName${index}"
													name="groupName${index}">
													<c:forEach var="groupMap"
														items="${referralsDefinition.groupMap}">
														<c:choose>
															<c:when
																test="${form.key.groupName eq groupMap.key.groupName }">
																<option value="<c:out value="${groupMap.key.groupName}"/>"
																	selected="selected"><c:out value="${groupMap.key.groupName}"/></option>
															</c:when>
															<c:otherwise>
																<option value="<c:out value="${groupMap.key.groupName}"/>"><c:out value="${groupMap.key.groupName}"/></option>
															</c:otherwise>
														</c:choose>
													</c:forEach>
												</select></td>
												<td align="center"><a
													onclick="deleteRow('formtable<c:out value="${form.key.formFullPath}"/>','formsTblId')"
													title="Remove this Form from referral pathway"> <img
													src="../images/delete.png" border="0" alt="Delete"
													onmouseover="this.style.cursor = cursorPointer; " /></a></td>
												<td style="display: none"><c:out value="${form.key.formFullPath}"/></td>
												<td style="display: none"><c:out value="${formSummaryMapOrder.type}"/></td>
											</tr>
										</c:if>
									</c:forEach>
									</c:if>
								</c:when>
								<c:otherwise>
									<c:if test="${fn:length(referralsDefinition.summaries)>0}">
									<c:forEach var="summary" items="${referralsDefinition.summaries}">
										<c:if test="${summary.key.title==formSummaryMapOrder.formOrSummaryName}">
											<tr id="formtable<c:out value="${summary.key.id}"/>" class="grabableRow">
												<td style="display: none"></td>
												<td class="grabable"></td>
												<td class="grabableTitle" style="white-space:pre"><c:out value="${summary.value}"/></td>
												<td align="center"><img src="../images/16x16/edit.png"
													onclick="editSummary('formtable<c:out value="${summary.key.id}"/>');"
													onmouseover="this.style.cursor = cursorPointer" /></td>
												<td></td>											
												<td><select id="groupName<c:out value="${summary.key.id}"/>"
													name="groupName<c:out value="${summary.key.id}"/>">
													<c:forEach var="groupMap"
														items="${referralsDefinition.groupMap}">
														<c:choose>
															<c:when
																test="${formSummaryMapOrder.groupName eq groupMap.key.groupName }">
																<option value="<c:out value="${groupMap.key.groupName}"/>"
																	selected="selected"><c:out value="${groupMap.key.groupName}"/></option>
															</c:when>
															<c:otherwise>
																<option value="<c:out value="${groupMap.key.groupName}"/>"><c:out value="${groupMap.key.groupName}"/></option>
															</c:otherwise>
														</c:choose>
													</c:forEach>
												</select></td>
												<td align="center"><a
													onclick="deleteRow('formtable<c:out value="${summary.key.id}"/>','formsTblId')"
													title="Remove this Form from referral pathway"> <img
													src="../images/delete.png" border="0" alt="Delete"
													onmouseover="this.style.cursor = cursorPointer; " /></a></td>
												<td style="display: none"><c:out value="${summary.key.id}"/></td>
												<td style="display: none"><c:out value="${formSummaryMapOrder.type}"/></td>
											</tr>
										</c:if>
									</c:forEach>
									</c:if>
								</c:otherwise>
							</c:choose>
						</c:if>
					</c:forEach>
					</tbody>
				 <% }%>
				</c:if>
			</table>
			</td>
		</tr>
		<tr>
			<td width="10%"></td>
			<td> Add Form <select id="forms"
				name="forms">
				<option value=""></option>
				<optgroup label="forms">
					<c:forEach var="formGroup" items="${emdt.formDomain.children}">
						<optgroup label="<c:out value="${formGroup.label}"/>">
							<c:forEach var="formDef" items="${formGroup.children}">
								<c:if test="${formDef.liveStatus != 0}">
									<option value="<c:out value="${formDef.path}"/>"><c:out value="${formDef.label}"/></option>
								</c:if>
							</c:forEach>
						</optgroup>
					</c:forEach>
				</optgroup>
			</select> <c:forEach var="formGroup" items="${emdt.formDomain.children}">
				<c:forEach var="formDef" items="${formGroup.children}">
					<c:if test="${formDef.liveStatus != 0}">
						<input type="hidden" value="<c:out value="${formDef.label}"/>" name="<c:out value="${formDef.path}"/>" id="<c:out value="${formDef.path}"/>"/>
					</c:if>
				</c:forEach>
			</c:forEach>
			<a  onclick="addFormsAndSummaries('Form');"
				title="Add selected form to referral pathway">
				<img src="../images/add.png" border="0" alt="Add"
				onmouseover="this.style.cursor = cursorPointer; " /></a>
			</td>
		</tr>
		<tr>
			<td width="10%"></td>
			<td>Add Summary <select
				id="summaries" name="summaries">
				<c:forEach var="summary" items="${summaries}">
					<option value="<c:out value="${summary.title}"/>"><c:out value="${summary.title}"/></option>
				</c:forEach>
			</select> <c:forEach var="summary" items="${summaries}">
				<input type="hidden" id="<c:out value="${summary.title}"/>" value="<c:out value="${summary.id}"/>" />
			</c:forEach>
			<a  onclick="addFormsAndSummaries('Summary');"
				title="Add selected summary to referral pathway">
				<img src="../images/add.png" border="0" alt="Add"
				onmouseover="this.style.cursor = cursorPointer; " /></a>
			</td>
		</tr>
	</table>
	</fieldset>
	<fieldset class="fieldset"><legend>Form Groups</legend>
	<table width="80%">
		<tr>
			<td>&#160;</td>
		</tr>
		<tr>
			<td width="90%">
				<br />
			
			<table border="1" bordercolor="#F8F8FF" id="grpTblId" cellspacing="0"
				cellpadding="4" width="100%">
				<c:if test="${fn:length(referralsDefinition.groupMap)>0}">
					<tr>
						<th align="left">Name</th>
						<th align="left">Can't Be Empty</th>
						<th align="left">Delete</th>
					</tr>
				</c:if>
				<c:forEach var="groupMap" items="${referralsDefinition.groupMap}"
					varStatus="i">
					<tr id="grptable<c:out value="${groupMap.key.groupName}"/>">
						<td style="display: none"></td>
						<td><c:out value="${groupMap.key.groupName}"/></td>
						<td align="center"><c:choose>
							<c:when test="${groupMap.value}">
								<input type="checkbox" id="group<c:out value="${groupMap.key.groupName}"/>"
									name="group<c:out value="${groupMap.key.groupName}"/>" checked="checked"></input>
							</c:when>
							<c:otherwise>
								<input type="checkbox" id="group<c:out value="${groupMap.key.groupName}"/>"
									name="group<c:out value="${groupMap.key.groupName}"/>"></input>
							</c:otherwise>
						</c:choose></td>
						<td align="center"><a onclick="deleteRow('grptable<c:out value="${groupMap.key.groupName}"/>','grpTblId')"
							title="Remove this group from referral pathway"> <img
							src="../images/delete.png" border="0" alt="Delete"
							onmouseover="this.style.cursor = cursorPointer; " /></a></td>
					</tr>
				</c:forEach>
			</table>
			</td>
		</tr>
		<tr>
			<td>&#160;</td>
		</tr>
		<tr>
			<td>
				<table width="100%">
					<tr>
						<td>
							Add Form Group <select id="selectedGroup"
								name="selectedGroup">
								<c:forEach var="groupForm" items="${groupForms}">
									<option value="<c:out value="${groupForm.groupName}"/>"><c:out value="${groupForm.groupName}"/></option>
								</c:forEach>
							</select> <c:forEach var="groupForm" items="${groupForms}">
								<input type="hidden" id="<c:out value="${groupForm.groupName}"/>"
									name="<c:out value="${groupForm.groupName}"/>"></input>
								<input type="hidden" id="checkBox<c:out value="${groupForm.groupName}"/>"
									name="checkBox<c:out value="${groupForm.groupName}"/>"></input>
							</c:forEach>
							<a  onclick="addGroups();"
								title="Add selected Form Group to referral pathway">
								<img src="../images/add.png" border="0" alt="Add"
								onmouseover="this.style.cursor = cursorPointer; " /></a>
						</td>
						<td align="right">
						<input type="button" value="Form Groups Administration"	onclick="sentReq(11);"></input>
						</td>
					</tr>
				</table>
			</td>
		</tr>
		
	</table>

	</fieldset>
	<fieldset class="buttonFieldset">
		<c:if test="${referralsDefinition.id ne null}">
			<input type="button" value="Export"
				onclick="processEditDelete(12, ${referralsDefinition.id});" />
		</c:if>
		<input type="button" value="Back" onclick="sentReq(6);" /> <c:choose>
		<c:when test="${referralsDefinition.id eq null}">
			<input type="button" value="Save" onclick="processReferralsDefinitionForm(2);" />
		</c:when>
		<c:otherwise>
			<input type="button" value="Save as..." onclick="openSaveReferralsDefinitionAs();" />
			<input type="button" value="Update" onclick="processReferralsDefinitionForm(5);" />
		</c:otherwise>
	</c:choose></fieldset>
	
		<fieldset class="buttonFieldset">
	<div style="text-align: left;"><img src="../images/16x16/help.png" style="margin: 5px;"/> Help<br/>
	<p>This screen lets you specify referral pathways.  A referral pathway consists of the forms which should be provided as part of a patient referral and the clinicians who may receive the referral.</p>
	<p>The pathway should be associated with a speciality, chosen from the 'Speciality' drop down.<br/>
	First, give the pathway a descriptive name.  Next, add the clinicians who will appear to the referring user as potential recipients of the referral.
	Add forms which you want the referring user to fill in as part of the referral.  These forms can be made mandatory or not by checking the boxes.<br/></p>
	<p>Normally, the forms are shown on the patient referral screen as large buttons in a row, called the 'Top Level'.  If you would like to group related forms to make a sub-menu, add a 'Form Group' in the lower panel, and then assign the forms to that Form Group.  The forms will then be displayed as a beneath the form group button when the user clicks it.<br/>
	If the user must provide at least one form in the Form Group, tick the 'Can't be Empty' box.<br/>
	Summaries are 'mini reports', and can be used to display summary information from forms.
	</p>
	</div>
	 </fieldset>
	</fieldset>
</smvc:form></html>
<script type="text/javascript">
	$(document).ready(function(){
		selectClinicianforTheSelectedHospital();
	});
	// Initialise the JQuery Sortable widget
	$('#formsTblId').sortable({
		opacity: 0.5
	});
	$('#clinicianTblId tbody').sortable({
		opacity: 0.5
	});
</script>

