<%@ include file="/includes.jsp"%>
<%@ taglib prefix="smvc" uri="http://www.springframework.org/tags/form"%>
<link rel="stylesheet" href="../css/webapp.css" type="text/css" />
<link rel="stylesheet" href="../css/tables.css" type="text/css" />
<link rel="stylesheet" href="../css/draggable.css" type="text/css" />
<link rel="stylesheet" href="../css/dialog.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/webapp.js" type="text/javascript"></script>
<script type="text/javascript">
	var requiresUpdate = false;
	function doUpdate() {
		console.log('doUpdate() requires update? ' + requiresUpdate);
		if (requiresUpdate) {
			console.log('doUpdate() - update parent');
			updateParent();
		}
	}
	function doAdd() {
		requiresUpdate = true;
		dispatch('add')
		document.getElementById("form").submit();
	}

	function doSave() {
		console.log('doSave');
		var val = document.getElementById("newListName").value;
		if (val && val.length > 0) {
			// editList("EMDT", val);
		} else {
			window.alert("You must enter a list name");
		}
		requiresUpdate = true;
		updateListIndex();
		dispatch('save')
		document.getElementById("form").submit();
		console.log('exit doSave');
	}

	function doDelete(selectedPairId) {
		requiresUpdate = true;
		if (confirmAndDispatch('delete','Are you sure you wish to remove the selected items?')) {
			document.getElementById("selectedPairId").value = selectedPairId;
			document.getElementById("form").submit();
		}
		return false;
	}
	function showHospitalList() {
		var isLocalList = document.getElementById('isLocalList');
		if (isLocalList.checked) {
			document.getElementById('showHospitalListId').style.display = "block";
		} else {
			document.getElementById('filterHospitalCodeId').value = "";
			document.getElementById('showHospitalListId').style.display = "none";
		}
	}
    function updateListIndex() {
        var table = document.getElementById("editListTableId");
        var rowCount = table.rows.length;
        var listIndex = "";
        if (rowCount > 1) {
            for (var i = 1; i < rowCount; i++) {
                if (listIndex.length > 0) {
                    listIndex = listIndex + ","
                }
                listIndex = listIndex + table.rows[i].id
            }
            document.getElementById('listIndex').value = listIndex;
        }
    }

	function on_submit_handler(){
		document.getElementById('saveButton').disabled = true;
		document.getElementById('addButton').disabled = true;
	}

	function editListPairs(domain, listName,selectedPairId) {
		if(!domain || domain.length === 0) {
			domain = "EMDT";
		}
		if(selectedPairId) {
			location.href="../admin/editList.form?domain=" + domain + "&name=" + listName+"&selectedPairId="+selectedPairId;
		} else {
			window.alert("pair id missing");
		}
	}
</script>

<br />
<fieldset style="max-width: 800px;" class="nobg">
	<legend>
		List Editor - Editing List '<c:out value="${param.name}" />'
	</legend>

	<table width="100%">
		<c:set var="queryParam" value="" />
		<smvc:form action="../admin/editList.form${queryParam}" id="form" modelAttribute="listForm" onsubmit="on_submit_handler()">
			<input type="hidden" name="redirectParams" value="<c:out value="${requestScope['javax.servlet.forward.query_string']}" />" />
			<smvc:hidden path="domain" />
			<smvc:hidden path="name" />
			<input type="hidden" name="listIndex" id="listIndex" />
			<input type="hidden" name="moveId" value="" id="moveId" />
			<input type="hidden" name="moveAmount" value="" id="moveAmount" />
			<input type="hidden" name="method" value="save" id="dispatchMethod" />
			<smvc:hidden path="selectedPairId" id="selectedPairId"/>
			<c:choose>
			<c:when test="${empty (listForm.selectedPairId)}">
				<tr>
					<td class="tableTitleBar">Edit List: <smvc:input path="namedList.name" id="newListName" size="50" /></td>
				</tr>
			</c:when>
			<c:otherwise><smvc:hidden path="namedList.name" id="newListName" size="50" /></c:otherwise></c:choose>
			<tr>
				<td colspan="2">
					<table width="100%">
						<tr>
							<td>
								<table width="100%" class="table" id="editListTableId">
									<thead>
										<tr class="tableHeader">
											<th class="tableColHeader"></th>
											<th class="tableColHeader">Key</th>
											<th class="tableColHeader">Value</th>
											<th class="tableColHeader">Hospital</th>
											<c:if test="${listForm.selectedPairId eq null}">
											<th class="tableColHeader">Edit</th>
											<th class="tableColHeader">Delete</th></c:if>
										</tr>
									</thead>
									<tbody>
										<c:set var="hospitalsList" value="${webapp.hospitalsList }" />
										<c:if test="${not empty (listForm.namedList.pairs) }">
											<c:forEach var="pair" items="${listForm.namedList.pairs}" varStatus="index">
												<c:if test="${empty (listForm.selectedPairId)  or (not empty (listForm.selectedPairId) and listForm.selectedPairId eq pair.id)}">
													<c:set var="rowClass" value="oddRow" />
													<c:if test="${index.count % 2 eq 0 }"> <c:set var="rowClass" value="evenRow" /> </c:if>
													<tr id="${pair.getId()}" class="grabableRow" >
														<td class="grabable" title="Drag and drop to change ordering"  style="size: 50px;"></td>
														<td style="text-align: center"><c:choose>
																<c:when test="${listForm.selectedPairId ne null}">
																	<smvc:input maxlength="200" path="selectedKey" placeholder="Unique key" />
																</c:when>
																<c:otherwise><c:out value="${pair.first}"/></c:otherwise>
															</c:choose>
														</td>
														<td style="text-align: center"><c:choose>
																<c:when test="${listForm.selectedPairId ne null}">
																<smvc:input maxlength="200" path="selectedValue" placeholder="Unique key" />
																</c:when>
																<c:otherwise><c:out value="${pair.second}"/></c:otherwise>
														</c:choose>
														<td style="text-align: center">
															<c:choose>
																<c:when test="${listForm.selectedPairId ne null}">
																	<smvc:select path="selectedfilterHospitalCode">
																		<smvc:option value="Global">Global</smvc:option>
																		<smvc:options items="${hospitalsList}" itemValue="hospitalCode" itemLabel="hospitalName" />
																	</smvc:select>
																</c:when>
																<c:otherwise>
																	<c:choose>
																		<c:when test="${not empty pair.filterHospitalCode and  pair.filterHospitalCode ne 'Global'}">
																			<c:forEach var="hospitals" items="${hospitalsList }">
																				<c:if test="${pair.filterHospitalCode eq hospitals.hospitalCode}">
																					<c:out value="${hospitals.hospitalName}" />
																				</c:if>
																			</c:forEach>
																		</c:when>
																		<c:otherwise>Global</c:otherwise>
																	</c:choose>
																</c:otherwise>
															</c:choose>
														</td>
														<c:if test="${listForm.selectedPairId eq null}">
														<td style="text-align: center"><img src="../images/16x16/edit.png" onmouseover="this.style.cursor = cursorPointer" onclick="editListPairs('<c:out value="${listForm.namedList.domain}"/>', '<c:out value="${listForm.namedList.name}"/>', '<c:out value="${pair.id}"/>')"/>
														<td style="text-align: center"><img src="../images/delete.png" onclick="doDelete('${pair.id}')" border="0" alt="Delete" onmouseover="this.style.cursor = cursorPointer; " /></td>
														</c:if>
													</tr>
												</c:if>
											</c:forEach>
										</c:if>
									</tbody>
									<tfoot>
										<c:if test="${listForm.selectedPairId eq null}">
											<tr style="border: none;">
												<td align="left" colspan="6">
													<c:if test="${empty (listForm.namedList.pairs) }"> -- No items --  </c:if>
		                                            <c:if test="${!empty(listForm.namedList.pairs)}"> <c:out value="${listForm.namedList.pairs.size()}" /> items </c:if>
	                                            </td>
											</tr>
										</c:if>
										<tr style="background-color: unset">
											<c:choose>
												<c:when test="${listForm.selectedPairId eq null}">
													<td colspan="4"></td>
													<td align="right" colspan="2"><input type="button" value="Save" onclick="doSave()" /></td>
												</c:when>
												<c:otherwise>
													<td colspan="3"></td>
													<td style="text-align: right"><input type="button" value="Save" onclick="doSave()" /></td>
												</c:otherwise>
											</c:choose>
										</tr>
									</tfoot>
								</table>
							</td>
						</tr>
					</table>
				</td>
			</tr>
			<c:if test="${(not empty (listForm.namedList.id )) and (empty listForm.selectedPairId)}">
			<tr>
				<td colspan="2">
					<table width="100%">
						<tr>
							<th colspan="5">Add new item</th>
						</tr>
						<tr>
							<td colspan="5">
								<table width="100%" cellspacing="0" class="table">
									<tr class="tableHeader">
										<th class="tableColHeader" style="width: 50px">&nbsp;</th>
										<th class="tableColHeader" style="width: 80px">Key</th>
										<th class="tableColHeader">Value</th>
										<th class="tableColHeader" style="width: 120px">Hospital</th>

									</tr>
									<tr style="background-color: unset">
										<td></td>
										<td><smvc:input maxlength="200" title="Enter a name for the new item" path="newKey" placeholder="Unique key" /></td>
										<td><smvc:input maxlength="200" size="50" title="Enter a label for the new item" path="newValue" placeholder="Descriptive title" /></td>
										<td><input type="radio" id="isGlobalList" name="listFilter" onchange="showHospitalList();" value="global" <c:if test="${empty listFilter}"> checked="checked"</c:if> />
											<label for="isGlobalList">Global item</label> <br /> 
											<input type="radio" id="isLocalList" name="listFilter" onchange="showHospitalList();" value="local"
											<c:if test="${not empty listFilter  and listFilter eq 'local' }">checked="checked"</c:if> />
											<label for="isLocalList">Local item</label> <br />
											<div <c:if test="${empty listFilter}"> style="display: none;"</c:if> id="showHospitalListId">
												<smvc:select path="filterHospitalCode" id="filterHospitalCodeId">
													<smvc:option value="">--- Hospital ----</smvc:option>
													<c:forEach var="hospitals" items="${hospitalsList}">
														<smvc:option value="${hospitals.hospitalCode}">
															<c:out value="${hospitals.hospitalName}" />
														</smvc:option>
													</c:forEach>
												</smvc:select>
											</div></td>
									</tr>
									<tr style="background-color: unset">
										<td colspan="3"></td>
										<td align="right"><input type="button" value="Add" onclick="doAdd()" />
									</tr>
								</table>
							</td>
						</tr>
					</table> <br />
				</td>

			</tr>
			</c:if>

			<smvc:errors cssClass="error">
			</smvc:errors>
			<c:if test="${not empty (successMsg) }">
				<span class="info"> <c:out value="${successMsg}" /></span>
			</c:if>

		</smvc:form>
	</table>
</fieldset>

<br />

<script type="text/javascript">
	// enable drag and drop
	$('#editListTableId tbody').sortable();
</script>