<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script>

function changeButtonSelected(buttonId) {
	var buttonIds = ["buttonPhr", "buttonSymptom", "buttonMemo"];

	buttonIds.forEach(el => {
		if (el === buttonId) {
			$("#"+el).addClass("btn-success");
			$("#"+el).removeClass("btn-outline-success");
		}
		else {
			$("#"+el).removeClass("btn-success");
			$("#"+el).addClass("btn-outline-success");
		}
	});
}

function changeTabSelected(tabId) {
	var tabIds = ["tabPhr", "tabSymptom", "tabMemo"];

	tabIds.forEach(el => {
		if (el === tabId) {
			$("#"+el).show();
		}
		else {
			$("#"+el).hide();
		}
	});
}

function showUntactTab() {
/* 	alert("비대면 진료를 실행합니다!"); */
}

function showPhrTab() {
	changeButtonSelected("buttonPhr");
	changeTabSelected("tabPhr");
}

function showSymptomTab() {
	changeButtonSelected("buttonSymptom");
	changeTabSelected("tabSymptom");
}

function showMemoTab() {
	changeButtonSelected("buttonMemo");
	changeTabSelected("tabMemo");
}

function retrievePhrData() {
	var phrType = $("#phrTypeSelect option:selected").val();
	var phrName = $("#phrTypeSelect option:selected").text();
	var params = {patientIdx: ${patientIdx}, phrType: phrType};

	$.ajax({
        url      : "./api/phrDatas",
        data     : params,
        method   : "GET",
        dataType : "json",
        success  : function( datas ){
            console.log(datas);

           	var html = "<thead><tr>";
			html += "<th>진료일시</th>";
			html += "<th>"+phrName+"</th>";
			html += "<th>진료담당자</th>";
			html += "</tr></thead>";
			html += "<tbody>";
			var contents = "<tr><td colspan=3>데이터가 없습니다.</td></tr>" ;
			if (datas.length > 0) {
				contents = datas.map(d => {
					var h = "<tr>";
					h += "<td>" + d.createDate + "</td>";
					h += "<td><span class='text-danger'>" + d.phrValue + "</span></td>";
					h += "<td>" + d.recordedBy + "</td>";
					h += "</tr>";
					return h;
				});
			};
			html += contents;
			html += "</tbody>";

			$("#phrDataTable").html(html);

            
/*             var resultCode = data.code;
            var resultMsg  = data.message;
            
            if( data.code == "00" ) {
                location.href="/patient/list";
            } else {
                $( "#password" ).after( "<label id='msg' class='error'>" + resultMsg + "</label>" );
                $( "#submitLoading" ).toggleClass( "d-none", true );
                $( "#submitBtn" ).toggleClass( "d-none", false );
            }; */
        },
        error : function(){
            console.error('error!');
/*             $( "#submitLoading" ).toggleClass( "d-none", true );
            $( "#submitBtn" ).toggleClass( "d-none", false ); */
        }
    }).done( function(){
        console.log('done!');
/*         if( $( "#saveId" ).is( ":checked" ) ) {
            setCookie( "userInputId", $( "#id" ).val(), 365 );
        } else {
            deleteCookie( "userInputId" );
        } */
    });
}
</script>
</head>

<body>
    <div class="wrapper">
        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>

        <div class="main">
            <jsp:include page="${data._INCLUDE}/top.jsp"></jsp:include>

            <main class="content">
            	<div class="container-fluid p-0">
				<div class="row">
					<div class="col-12 col-lg-6">
						<h1 class="h3 mb-3">
							건강정보 조회
						</h1>
					</div>
					<div class="col-12 col-lg-6  text-right">
						<nav aria-label="breadcrumb">
							<ol class="breadcrumb">
								<li class="breadcrumb-item"><a href="javscript:;">Home</a></li>
								<li class="breadcrumb-item">진료관리</li>
								<li class="breadcrumb-item active">건강정보 조회</li>
							</ol>
						</nav>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h1 class="h4">- 환자 기본정보</h1>
							</div>
							<div class="card-body">
								<table class="table mobile-table">
									<colgroup>
										<col style="width: 15%">
										<col style="width: 35%">
										<col style="width: 15%">
										<col style="width: 35%">
									</colgroup>
									<tr>
										<th>입소일시</th>
										<td colspan="3">
											2020-10-10 10:25 <button class="btn btn-primary ml-2">진료시작</button>
										</td>
									</tr>
									<tr>
										<th>병동번호</th>
										<td>
											1501
										</td>
										<th>이름</th>
										<td>
											김레몬
										</td>
									</tr>
									<tr>
										<th>성별</th>
										<td>
											남
										</td>
										<th>생년월일</th>
										<td>
											1975년 8월 8일
										</td>
									</tr>
									<tr>
										<th>연락처</th>
										<td>
											010-1234-1234
										</td>
										<th>보호자 연락처</th>
										<td>
											010-1234-1234
										</td>
									</tr>
									<tr>
										<th>증상시작일</th>
										<td>
											2020-10-08
										</td>
										<th>확진일</th>
										<td>
											2020-10-09
										</td>
									</tr>
									<tr>
										<th>격리해제(퇴소)예정일</th>
										<td colspan="3">
											2020-10-25
											<!-- BEGIN primary modal -->
											<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary">변경</button>
											<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title">격리해제(퇴소) 예정일 변경</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
														</div>
														<div class="modal-body m-3">
															<table class="table mobile-table">
																<colgroup>
																	<col style="width: 15%">
																	<col style="width: 35%">
																	<col style="width: 15%">
																	<col style="width: 35%">
																</colgroup>
																<tr>
																	<th>입소일시</th>
																	<td>
																		2020-10-10 10:25
																	</td>
																	<th>병동번호</th>
																	<td >
																		1501
																	</td>
																</tr>
																<tr>
																	<th>이름</th>
																	<td>
																		김레몬
																	</td>
																	<th>성별</th>
																	<td>
																		남
																	</td>
																</tr>
																<tr>
																	<th>생년월일</th>
																	<td colspan="3">
																		1975년 8월 8일
																	</td>
																</tr>
																<tr>
																	<th>연락처</th>
																	<td>
																		010-1234-1234
																	</td>
																	<th>보호자 연락처</th>
																	<td>
																		010-1234-1234
																	</td>
																</tr>
																<tr>
																	<th>증상시작일</th>
																	<td>
																		2020-10-08
																	</td>
																	<th>보호자 연락처</th>
																	<td>
																		2020-10-09
																	</td>
																</tr>
																<tr>
																	<th>격리해제(퇴소)예정일</th>
																	<td colspan="3">
																		<div class="form-group calendar-bar mb-xl-0">
																			<input class="form-control" type="text" name="datesingle">
																			<i class="align-middle mr-2 fas fa-fw fa-calendar-alt"></i>
																		</div>
																	</td>
																</tr>
																<tr>
																	<th>변경사유</th>
																	<td colspan="3">
																		<div class="form-row">
																			<div class="col-5">
																				<select class="custom-select">
																			          <option selected="">귀가조치(격지해제)</option>
																			          <option>지정병원이송</option>
																			          <option>기타</option>
																		        </select>
																			</div>
																			<div class="col-7">
																				<input type="text" name="" class="form-control">
																			</div>
																		</div>
																	</td>
																</tr>
															</table>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
															<button type="button" class="btn btn-primary">등록</button>
														</div>
													</div>
												</div>
											</div>
											<!-- END primary modal -->
										</td>
									</tr>
									<tr>
										<th>기저질환</th>
										<td>
											무
										</td>
										<th>임신</th>
										<td >
											무
										</td>
									</tr>
									<tr>
										<th>중증도 분류</th>
										<td>
											하
										</td>
										<th>흉부 X선 결과</th>
										<td>
											정상
										</td>
									</tr>
									<tr>
										<th>산소포화도</th>
										<td colspan="3">
											90%
										</td>
									</tr>
									<tr>
										<th>상태 및 특이사항</th>
										<td colspan="3">
											없음
										</td>
									</tr>
								</table>
								<div class="row mt-3">
									<div class="col-lg-6">
									</div>
									<div class="col-lg-6">
										<div class="text-right">
											<button id="buttonUntact" class="btn btn-outline-success" onclick="showUntactTab()">비대면 진료</button>
											<button id="buttonPhr" class="btn btn-success" onclick="showPhrTab()">건강정보이력</button>
											<button id="buttonSymptom" class="btn btn-outline-success" onclick="showSymptomTab()">임상증상</button>
											<button id="buttonMemo" class="btn btn-outline-success" onclick="showMemoTab()">의료진 메모</button>
											<button class="btn btn-primary" onclick="location='./state'">목록</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="tabPhr" class="row">
					<div class="col-12">
						<div class="card">
							<div class="card-header">
								<h1 class="h4">
									- 건강정보 조회
									<label>
										<select class="custom-select ml-1 form-control" id=phrTypeSelect name="inputState" onchange="retrievePhrData">
									        <option value="temperature" selected>체온</option>
									        <option value="oxygenSaturation">산소포화도</option>
									        <option value=pulseRate>혈압</option>
									    </select>
									</label>
									<label class="ml-1">
										<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary_1">기록추가</button>
										<div class="modal fade" id="defaultModalPrimary_1" tabindex="-1" role="dialog" aria-hidden="true">
											<div class="modal-dialog max360" role="document">
												<div class="modal-content">
													<div class="modal-header">
														<h5 class="modal-title">건강정보 입력</h5>
														<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
													</div>
													<div class="modal-body m-3">
														<table class="table mobile-table">
															<colgroup>
																<col style="width: 30%">
																<col style="width: 70%">
															</colgroup>
															<tr>
																<th>기록자</th>
																<td>
																	<div class="form-group mb-xl-0">
																		<input class="form-control" type="text">
																	</div>
																</td>
															</tr>
															<tr>
																<th>건강정보</th>
																<td>
																	<div class="form-group mb-xl-0">
																		<input class="form-control" type="text">
																	</div>
																</td>
															</tr>
														</table>
													</div>
													<div class="modal-footer">
														<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
														<button type="button" class="btn btn-primary">등록</button>
													</div>
												</div>
											</div>
										</div>
									</label>
								</h1>
							</div>
							<div class="card-body">
								<div class="graph-area mb-4">
									<div style="height:400px;background-color:#dddddd;">그래프영역</div>
								</div>
								<div class="table-responsive">
									<table id="phrDataTable" class="table data-table text-center">
										<thead>
											<tr>
												<th>진료일시</th>
												<th>체온</th>
												<th>진료담당자</th>
											</tr>
										</thead>
										<tbody>
										  <c:choose>
										  <c:when test="${phrTotal > 0}">
										  <c:forEach var="phr" items="${phrItems}">
											<tr>
												<td><c:out value="${phr.createDate}" /></td>
												<td>
													<span class="text-danger"><c:out value="${phr.phrValue} ℃" /></span>
												</td>
												<td><c:out value="${phr.recordedBy}" /></td>
											</tr>
										  </c:forEach>
										  </c:when>
										  <c:otherwise>
										  	<tr>
												<td colspan=3>데이터가 없습니다.</td>
											</tr>
										  </c:otherwise>
										  </c:choose>
										</tbody>
									</table>
								</div>
								<div class="row mt-3">
									<div class="col-lg-6">
									</div>
									<div class="col-lg-6">
										<div class="text-right">
											<button class="btn btn-primary w100">확인</button>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div id="tabSymptom" class="row" style="display:none;">
						<div class="col-12">
							<div class="card">
								<div class="card-header">
									<h1 class="h4">
										- 임상증상 (2020-10-10 ~ 2020-10-26)
										<label class="ml-1">
											<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimary_1">증상추가</button>
											<div class="modal fade" id="defaultModalPrimary_1" tabindex="-1" role="dialog" aria-hidden="true">
												<div class="modal-dialog" role="document">
													<div class="modal-content">
														<div class="modal-header">
															<h5 class="modal-title">임상증상 입력</h5>
															<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
														</div>
														<div class="modal-body m-3">
															<table class="table mobile-table">
																<colgroup>
																	<col style="width: 30%">
																	<col style="width: 70%">
																</colgroup>
																<tr>
																	<th>기록자</th>
																	<td>
																		<div class="form-group mb-xl-0">
																			<input class="form-control" type="text">
																		</div>
																	</td>
																</tr>
																<tr>
																	<th>임상증상</th>
																	<td>
																		<div class="form-group mb-xl-0">
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	기침
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	호흡곤란
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	오한
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	근육통
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	두통
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	인후통
																	            </span>
																	        </label>
																			<label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	후각/미각 손실
																	            </span>
																	        </label>
																	        <label class="form-check form-check-inline">
																	            <input class="form-check-input" type="checkbox" value="option1">
																	            <span class="form-check-label">
																	            	기타 ( <input type="text" class="form-control form-control-sm w150" name=""> )
																	            </span>
																	        </label>
																		</div>
																	</td>
																</tr>
															</table>
														</div>
														<div class="modal-footer">
															<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
															<button type="button" class="btn btn-primary">등록</button>
														</div>
													</div>
												</div>
											</div>
										</label>
									</h1>
								</div>
								<div class="card-body">
									<div class="table-responsive">
										<table class="table data-table text-center">
											<thead>
												<tr>
													<th>증상정보</th>
													<th>기침</th>
													<th>호흡곤란</th>
													<th>오한</th>
													<th>근육통</th>
													<th>두통</th>
													<th>인후통</th>
													<th>후각/미각 손실</th>
													<th>기타증상</th>
													<th>기록자</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<th>2020-11-05 09:23:526</th>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>-</td>
													<td>-</td>
													<td>-</td>
													<td><span class="text-danger">설사</span></td>
													<td>김레몬</td>
												</tr>
												<tr>
													<th>2020-11-05 09:23:526</th>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>-</td>
													<td>-</td>
													<td>-</td>
													<td><span class="text-danger">설사</span></td>
													<td>김레몬</td>
												</tr>
												<tr>
													<th>2020-11-05 09:23:526</th>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>-</td>
													<td>-</td>
													<td>-</td>
													<td><span class="text-danger">설사</span></td>
													<td>김레몬</td>
												</tr>
												<tr>
													<th>2020-11-05 09:23:526</th>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>V</td>
													<td>-</td>
													<td>-</td>
													<td>-</td>
													<td><span class="text-danger">설사</span></td>
													<td>김레몬</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="row mt-3">
										<div class="col-lg-6">
										</div>
										<div class="col-lg-6">
											<div class="text-right">
												<button class="btn btn-primary w100">확인</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				<div id="tabMemo" class="row" style="display:none;">
						<div class="col-12">
							<div class="card">
								<div class="card-header">
									<h1 class="h4">
										- 의료진 메모 (2020-10-10 ~2020-10-26)
										<button type="button" class="btn btn-primary ml-2" data-toggle="modal" data-target="#defaultModalPrimaryMemo">메모추가</button>
										<div class="modal fade" id="defaultModalPrimaryMemo" tabindex="-1" role="dialog" aria-hidden="true">
											<div class="modal-dialog" role="document">
												<div class="modal-content">
													<div class="modal-header">
														<h5 class="modal-title">의료진 메모 입력</h5>
														<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button>
													</div>
													<div class="modal-body m-3">
														<table class="table mobile-table">
															<colgroup>
																<col style="width: 20%">
																<col style="width: 80%">
															</colgroup>
															<tr>
																<th>작성자</th>
																<td>
																	<div class="form-row">
																		<input type="text" name="" class="form-control" placeholder="이름을 입력하세요">
																	</div>
																</td>
															</tr>
															<tr>
																<th>소견</th>
																<td>
																	<div class="form-row">
																		<textarea class="form-control" rows="2" placeholder="내용을 입력하세요"></textarea>
																	</div>
																</td>
															</tr>
														</table>
													</div>
													<div class="modal-footer">
														<button type="button" class="btn btn-outline-primary" data-dismiss="modal">취소</button>
														<button type="button" class="btn btn-primary">등록</button>
													</div>
												</div>
											</div>
										</div>
									</h1>
								</div>
								<div class="card-body">
									<div class="table-responsive">
										<table class="table data-table text-center">
											<thead>
												<tr>
													<th>진료일시</th>
													<th>진료내용</th>
													<th>특이사항</th>
													<th>진료담당자</th>
												</tr>
											</thead>
											<tbody>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
												<tr>
													<td>2020-10-10 10:25</td>
													<td>소화가 잘 안된다고 소화제 복용 문의...</td>
													<td>-</td>
													<td>홍길동</td>
												</tr>
											</tbody>
										</table>
									</div>
									<div class="row mt-3">
										<div class="col-lg-6">
										</div>
										<div class="col-lg-6">
											<div class="text-right">
												<button class="btn btn-primary w100">확인</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
            </main>

            <jsp:include page="${data._INCLUDE}/footer.jsp"></jsp:include>
        </div>
    </div>
</body>
</html>