<%@ include file="/includes.jsp"%>
<%@ taglib prefix="smvc" uri="http://www.springframework.org/tags/form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<script type="text/javascript">
function processEditDelete(id) {
	var isProceed  = confirm("Are you sure you want to delete this Escalation?");
	if (isProceed) {
	    document.location.href="../emdt/escalation.form?actionRequired=delete&escalationId="+id;
    }else{
        return false;
     }
}
function addEvent(){
	document.getElementById('action').value="addEvent";
	document.getElementById('escalationForm').submit();
}
function addRecepient(){
	document.getElementById('action').value="addRecepient";
	document.getElementById('escalationForm').submit();
}
function removeAttendee(userId){
	document.getElementById('newRecepientId').value=userId;
	document.getElementById('action').value="removeRecepient";
	document.getElementById('escalationForm').submit();
}
function saveEscalation(){
	document.getElementById('action').value="";
	document.getElementById('escalationForm').submit();
}
function editEvent(rowId){
	var id=rowId.replace('eventRow','');
	var row= document.getElementById(rowId);
	var rowIndex= row.rowIndex;
	var rowContent = row.cells[0].innerHTML;
	row.cells[0].innerHTML="";
    var element=document.createElement("textarea");
    element.setAttribute("cols","40");
    element.setAttribute("rows","2");
    element.setAttribute("id","editedContent"+id);
    var t =document.createTextNode(rowContent);
    element.appendChild(t);
    row.cells[0].appendChild(element);
    document.getElementById('editimgId'+id).style.display='none';
    document.getElementById('saveimgId'+id).style.display='block';
  }
  
function deleteEvent(eventId){
	var isProceed  = confirm("Are you sure you want to delete this Event?");
	if (isProceed) {
		document.getElementById('action').value="deleteEvent";
		document.getElementById('eventToEditOrDelete').value=eventId;
		document.getElementById('escalationForm').submit();
    }else{
        return false;
     }
}
function saveEditEvent(eventId){
	document.getElementById('action').value="editEvent";
	document.getElementById('eventToEditOrDelete').value=eventId;
	document.getElementById('editedEventTitle').value=document.getElementById("editedContent"+eventId).value;
	document.getElementById('escalationForm').submit();
}
</script>
<br />
<smvc:form id="escalationForm" action="../emdt/escalation.form" modelAttribute="escalation" method="post" >
	<input type="hidden" name="redirectParams" value="<c:out value="${requestScope['javax.servlet.forward.query_string']}" />" />
	<smvc:hidden path="id" />
	<smvc:hidden path="action" id="action" />

	<c:if test="${errorMsg ne null}">
		<span class="warning"><c:out value="${errorMsg}"/></span>
	</c:if>
	<c:if test="${successMsg != null}">
		<span class="info"><c:out value="${successMsg}"/></span>
	</c:if>
	<table align="center" width="1000px">
		<tr>
			<td>
				<fieldset class="nobg">
					<legend>Escalations</legend>
					<table>
						<tr>
							<td width="60%">
								<fieldset>
									<table width="100%" border="1" bordercolor="#F8F8FF"cellspacing="0" cellpadding="4">
									<c:choose>
										<c:when test="${escalationList!=null and fn:length(escalationList)>0}">
											<tr>
												<td colspan="4" class="sectionTitle"><B>List of Escalations</B></td>
											</tr>
											<tr>
												<td>&#160;</td>
											</tr>
										
											<tr>
												<th align="left">Title</th>
												<th align="left">Days</th>
												<th align="left">Enabled</th>
												<th align="left">Edit</th>
											</tr>
											<c:forEach var="escalation" items="${escalationList}">
												<tr>
													<td><c:out value="${escalation.title}"/></td>
													<td><c:out value="${escalation.days}"/></td>
													<td><c:out value="${escalation.enabled}"/></td>
													<td><a
														href="../emdt/escalation.form?actionRequired=edit&escalationId=<c:out value="${escalation.id}"/>"
														title="Edit Escalation"
														onmouseover="this.style.cursor = cursorPointer; "> <img
															src="../images/page_white_edit.png" border="0" alt="Edit" />
													</a></td>
												</tr>
											</c:forEach>
										</c:when>
										<c:otherwise>
											<tr>
												<th colspan="4">-- No Escalations defined --</th>
											</tr>
										</c:otherwise>
									</c:choose>
										<tr>
											<td>&#160;</td>
										</tr>
										<tr>
											<td colspan="4"><input type="button" value="Add new Escalation" onclick="document.location='../emdt/escalation.form'"/></td>
										</tr>
									</table>
								</fieldset>
							<fieldset class="nobg">
							<table>
								<tr>
									<td>
										<fieldset class="dialogBox">
											<table class="dialogTitle" width="100%">
												<tr>
													<th><c:choose>
															<c:when test="${escalation.id gt 0}">
																<div>Edit Escalation <c:out value="${escalation.title}"/></div>
															</c:when>
															<c:otherwise>
																<div>Create New Escalation</div>
															</c:otherwise>
														</c:choose>
													</th>
												</tr>
											</table>
											<br />
	
											<table id="editEscalationTable">
												<tr>
													<td width="20%"><smvc:label path="title">Title</smvc:label></td>
													<td align="left" valign="top"><smvc:input
															path="title" size="50" maxlength="255" />
													</td>
												</tr>
												<tr>
													<td><smvc:label path="days">Days</smvc:label></td>
													<td><smvc:input path="days" size="5" type="number" min="0" max="1000" /></td>
												</tr>
												<tr>
													<td><smvc:label path="enabled">Enabled</smvc:label>:</td>
													<td><smvc:radiobutton path="enabled" value="true"/>Yes
														<smvc:radiobutton path="enabled" value="false" /> No
													</td>
												</tr>
												<tr>
													<td><smvc:label path="escalationEventId">Event</smvc:label></td>
													<td><smvc:select path="escalationEventId">
															<smvc:option value="" />
															<smvc:options items="${eventList}" itemValue="id" itemLabel="title" />
														</smvc:select></td>
												</tr>
												<tr>
													<td valign="top"><smvc:label path="newRecepientId">Recipients</smvc:label></td>
													<c:if test="${fn:length(escalation.recepients)>0}">
														<td><table id="editEscalationRecepients">
																<c:forEach var="user" items="${escalation.recepients}"
																	varStatus="i">
																	<tr>
																		<td><smvc:hidden path="recepientsIdList[${i.count-1}]" />
																			<c:out value="${user.name}"/>&nbsp;</td>
																		<td><img src="../images/delete.png" border="0"
																			alt="Delete"
																			onmouseover="this.style.cursor = cursorPointer; "
																			onclick="removeRecepients(<c:out value="${user.id}"/>);" />
																		</td>
																	</tr>
																</c:forEach>
															</table>
														</td>
													</c:if>
												</tr>
												<tr>
													<td class="label" />
													<td class="input"><smvc:select path="newRecepientId"
															id="newRecepientId">
														<smvc:option value="" />
														<c:forEach var="usersByHospitalMap" items="${webapp.usersByHospitalIdMap}">
															<optgroup label="${webapp.hospMap[usersByHospitalMap.key]}">
																<c:forEach var="userId" items="${usersByHospitalMap.value}">
																	<smvc:option  value="${webapp.userIdUsernameMap[userId]}" ><c:out value="${webapp.userIdNameMap[userId]}"/></smvc:option>
																</c:forEach>
															</optgroup>
														</c:forEach>
														</smvc:select> &nbsp;&nbsp;&nbsp; <input type="button" value="Add" onclick="addRecepient();" />
													</td>
												</tr>
												<tr>
													<td height="25"></td>
												</tr>
											</table>
											<table width="100%"
												style="background: #DFE5EB; height: 40px; padding: 2px 5px 2px 10px;">
												<tr>
													<td width="65%"><c:if test="${escalation.id ne null}">
															<input type="button"
																onclick="processEditDelete(<c:out value="${escalation.id}"/>);return false;"
																value="Delete" />
														</c:if>
													</td>
													<td style="text-align: right;"><input type="button"
														value="Save" onclick="saveEscalation();" /></td>
												</tr>
											</table>
										</fieldset> <br /> <br />
									</td>
								</tr>
							</table>
	
						</fieldset>
					</td>
					<td width="60%" valign="top" style="display:none;">
						<fieldset class="nobg"><legend>Escalation Events</legend>
						<fieldset>
							<table><tr>
								<td>
									<b>Add New Event:</b> &nbsp;&nbsp;&nbsp;<smvc:input path="newEvent" size="30"/><br/>
								</td>
							</tr>
							<tr>
								<td align="right"><input type="button" value="Add Event" onclick="addEvent();"></td>
							</tr>
							</table>
						</fieldset>
						<fieldset>
						<b>Events List</b><br />
						<c:choose>
							<c:when test="${fn:length(eventList) gt 0 }">
								<smvc:hidden path="eventToEditOrDelete" id="eventToEditOrDelete"/>
								<smvc:hidden path="editedEventTitle" id="editedEventTitle"/>
								<table id="eventListTable" >
								<c:forEach var="event" items="${eventList}">
									<tr id="eventRow<c:out value="${event.id}"/>">
										<td><c:out value="${event.title}"/></td>
										<td align="center"><img src="../images/16x16/edit.png" onclick="editEvent('eventRow<c:out value="${event.id}"/>');"
											onmouseover="this.style.cursor = cursorPointer" id="editimgId<c:out value="${event.id}"/>"/>
											<img src="../images/16x16/save.png" onclick="saveEditEvent('<c:out value="${event.id}"/>')" onmouseover="this.style.cursor = cursorPointer" id="saveimgId<c:out value="${event.id}"/>" style="display: none"/>
										</td>
										<td align="center"><a onclick="deleteEvent('<c:out value="${event.id}"/>')" title="Remove this event"> 
											<img src="../images/delete.png" border="0" alt="Delete" onmouseover="this.style.cursor = cursorPointer; " /></a>
										</td>
									</tr> 
								</c:forEach>
								</table>
							</c:when>
							<c:otherwise>No Events defined</c:otherwise>
						</c:choose>
						</fieldset></fieldset>
					</td>
					</tr></table>
				</fieldset>
			</td>
		</tr>
	</table>
</smvc:form>
