<%@page import="java.util.List"%>
<%@page import="com.ardeo.entities.User"%>
<%@page import="com.ardeo.entities.Hospitals"%>
<%@ include file="/includes.jsp"%>
<style type="text/css">
.contentPopup {
	display: none;
	position: fixed;
	height: auto;
	width: 500px;
	overflow: scroll;
	border: 2px solid #668B8B;
	z-index: 2;
	padding: 2px 0px 0px 0px;
	font-size: 13px;
}

#addReferralDetailstoTable {
	width: 100%;
}

#addReferralDetailstoTable button {
	color: black;
	cursor: pointer;
	height: 48px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	width: 270px;
	margin-bottom: 10px;
}

#selectReferralDetailsTable {
	width: 100%;
	text-align: center;
}
</style>
<script type="text/javascript">
function changeReferringUserByHospital(){
	var selectedHospitalId= document.getElementById("referringHospital").value;
	var select=document.getElementById("referredFromUser");
	while (select.options.length>1){
		var j=1;
			select.remove(j);
			select=document.getElementById("referredFromUser");
	 }
     
	if(selectedHospitalId==""){
		
	}else{
		var usersList=document.getElementById("usersList"+selectedHospitalId).value;
		var res = usersList.split(",");
		for(var i = 0; i <res.length; i++) {
			if(res[i].length>0){
				var resvalue= res[i].split("=");
				var opt = document.createElement('option');
		        opt.value = resvalue[0];
		        opt.innerHTML = resvalue[1];
		        select.appendChild(opt);
			}
		}
	}
}
</script>
<c:forEach var="hospitals" items="${webapp.usersByHospitalIdMap}">
	<input type="hidden" name="hospital<c:out value="${hospitals.key}"/>" id="usersList<c:out value="${hospitals.key}"/>"
		value="<c:forEach var="userId" items="${hospitals.value}"><c:out value="${webapp.userIdUsernameMap[userId]}=${webapp.userIdNameMap[userId]},"></c:out> </c:forEach>" />
</c:forEach>

<link href="../referrals/css/main.css" type="text/css" rel="stylesheet" />
<div id="selectReferralDetailsId" class="contentPopup">
	<table align="center" id="selectReferralDetailsTable" width="100%">
		<tr>
			<td><br /></td>
		</tr>
		<tr>
			<td valign="top">
				<fieldset>
					<legend>Select Referral Details </legend>
						<table id="addReferralDetailstoTable" width="100%">
							<tr>
								<td>Referring Hospital</td>
								<td width="60%" align="left" valign="top">
									<select  id="referringHospital" onchange="changeReferringUserByHospital();">
										<option value="">---select a hospital----</option>
											<c:forEach var="hospitals" items="${webapp.hospMap}">
												<option value="<c:out value="${hospitals.key}"/>"><c:out value="${hospitals.value}"/></option>
											</c:forEach>
									</select>
								</td>
							</tr>
							<tr>
								<td>Referring specialist</td>
								<td width="60%" align="left" valign="top">
									<input type="hidden" id="referringSpecialistUser"  value="<c:out value="${webapp.currentUser.username}"/>"/>
									<input type="text" value="<c:out value="${webapp.currentUser.name}"/>" readonly="readonly" />
								</td>
							</tr>
							<tr>
								<td>Referring user</td>
								<td width="60%" align="left" valign="top"><select id="referredFromUser" >
									<option value="">---select Referring user----</option>
									</select>
								</td>
							</tr>
							<tr>
								<td>Referred to user</td>
								<td width="60%" align="left" valign="top"><select id="referredToUser">
									<option value="">---select Referred to user----</option>
									<c:forEach var="managementClinicians" items="${webapp.allManagementClinicians}">
										<option value="<c:out value="${managementClinicians.username}"/>"><c:out value="${managementClinicians.name}"/></option>
									</c:forEach>
								</select></td>
							</tr>
							<tr>
							<td>Referral Method</td>
							<td width="60%" align="left" valign="top">
								<select id="referralMethod">
									<option value="1">eMDT</option>
									<option value="2">Letter/Fax</option>
									<option value="3">eReferrals</option>
								</select>
							
							</td>
							</tr>
						</table>
						<table style="width: 100%">
							<tr><td><br/></td></tr>
							<tr style="width: 100%">
								<td style="width: 100%" align="center">
									<input type="button" value="Save" onclick="addReferralDetails();" />
									<input type="button" value="Cancel" onclick="disablePopup('selectReferralDetailsId', '');" />
								</td>
							</tr>
						</table>
				</fieldset>
			</td>
		</tr>
	</table>
</div>