<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="s" uri="http://www.springframework.org/tags"%>

<%--<jsp:include page="../../../template/header.jsp" flush="false" />--%>

<div id="wrapper">
	<div class="bg"></div>
	<header id="header" class="fixed-top">
		<div class="page-header">
		  <div class="pull-left back_btn"><a href="#" id="all_menu"><span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a></div>
		  <h2 class="text-center">수혈정보</h2>
		</div>
	</header>
	<div class="container" style="padding-bottom: 0px;">
		<div class="s_box" style="width: 97% !important">
			<div class="panel info_box">
				<div class="panel-heading">
					<div class="row">
					  <div class="col-xs-4 w-30">
						<input class="form-control" type="number" id="txtTransFusionSearch" max="9999999" placeholder="환자번호" >
					  </div>
					  <div class="col-xs-8 pl-0 pr-0">
              <span
                      class="patient-name">환자명</span>
						 <!-- <button type="button" class="btn btn-blood basic-blood-type" id="basicBloodType">B+</button> -->
					  </div>
					</div>
				</div>
				 <div class="panel-body" style="font-size: 14px;">
					<p id="patientInfo">
					</p>
					<p><strong>실시부서</strong><span>&nbsp;:&nbsp;</span><span class="dept-name">실시부서</span><span>&nbsp;|&nbsp;</span><span class="user-name">실시자명</span> <span class="user-code">(사번)</span></p>
				 </div>
			</div>
		</div>
	</div>	
    <div class="row line" style="margin-top: 0em !important;">
        <button type="button" class="btn btn-secondary btn-block btn-lg" id="btnTransFusionSearch">조회</button>
    </div>
	<div id="con">
      <div class="default text-center mt-5" id="scanBarcodeGroup" >
			<button type="button" class="btn btn-default btn-lg"  data-toggle="modal" data-target="#Modal01" ><h3><span class="glyphicon glyphicon-barcode" aria-hidden="true"></span></h3></button>
			<p><h4>환자 바코드를 스캔해주세요.</h4></p>
      </div>
		<div class="sub_title pt-3" id="bloodDetail" style="display: none;">
		  <span class="pl-2 pr-2">혈액내역</span>
		</div>
		<div class="pre-scrollable" id="trans">
			<ul class="list-group" id="bloodListGroup">
			  
			</ul>
		</div>
	</div>
</div>

<!--모달창--->
<div class="modal basic" tabindex="-1" role="dialog" id="ModalDetail">
  <div class="modal-dialog" role="document">
    <div class="modal-content">      
      <div class="modal-header">
        <h3 class="modal-title text-center">혈액내역 상세정보</h3>
        <div class="btn_close float-right"><button type="button" class="p-0 btn-lg" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button></div>
      </div>
      <div class="modal-body info">
        <table class="table">
          <tbody>
            <tr>
              <th scope="row">혈액번호</th>
              <!-- td><strong id="bloodNo">2019902704</strong></td -->
              <td><strong id="bloodNo"></strong></td>
            </tr>
            <tr>
              <th scope="row">성분제제</th>
              <!-- <td id="bloodProduct">Filterd RBC [수혈용 혈액]</td> -->
              <td id="bloodProduct"></td>
            </tr>
            <tr>
              <th scope="row">ABO</th>
              <!-- <td id="bloodType" class="blood"><strong>B+</strong></td> -->
              <td id="bloodType" class="blood"><strong></strong></td>
            </tr>
            <!-- <tr>
              <th scope="row">IRD</th>
              <td id="ird">Y</td>
              <td id="ird"></td>
            </tr> -->
            <tr id="detailBloodSeq">
              <th scope="row">항번</th>
              <!-- <td id="bloodSeq">1</td> -->
              <td id="bloodSeq"></td>
            </tr>
            <tr>
              <th scope="row">불출일시</th>
              <!-- <td id="releaseDtTm">2020-01-14 10:10:00</td> -->
              <td id="releaseDtTm"></td>
            </tr>
            <tr id="detailBloodCheckupNm">
              <th scope="row" rowspan="2">혈액확인</th>
              <!-- <td id="transCheckupNm1">정준원</td> -->
              <td id="transCheckupNm1"></td>
            </tr>
            <tr id="detailBloodCheckupNm2">
              <!-- <td id="transCheckupNm2">박영선</td> -->
              <td id="transCheckupNm2"></td>
            </tr>
            <tr>
              <th scope="row">확인일시</th>
              <!-- <td id="approvalDtTm">2020-01-14 10:10:00</td> -->
              <td id="approvalDtTm"></td>
            </tr>
            <tr>
              <th scope="row">수령자</th>
              <!-- <td id="receiveNm">박현주</td> -->
              <td id="receiveNm"></td>
            </tr>
            <!-- <tr>
              <th scope="row">혈액제제</th>
              <td>04064</td>
            </tr> -->
            <tr id="detailStartDtTm">
              <th scope="row">수혈시작</th>
              <!-- <td id="startDtTm">2020-01-14 10:10:00</td> -->
              <td id="startDtTm"></td>
            </tr>
            <tr id="detailBf">
              <th scope="row">수혈전</th>
              <td>
                <!-- <p id="transBfPulseRespiration">맥박 : 86회, 호흡 : 18회   </p>
                <p id="transBfBodytemperature">체온 : 36.4, 혈압 : 127 / 71</p> -->
                <p id="transBfPulseRespiration"></p>
                <p id="transBfBodytemperature"></p>
              </td>
            </tr>
            <tr id="detail15">
              <th scope="row" >15분
                <!--업데이트 발생시 --><button id="newBadge" type="button" class="p-0 pl-2 pr-2 btn btn-councel">
                  <span aria-hidden="true">N</span>
                </button>  <!--업데이트 발생시 -->
              </th>
              <td>
                <!-- <p id="trans15PulseRespiration">맥박 : 86회, 호흡 : 18회   </p>
                <p id="trans15Bodytemperature">체온 : 36.4, 혈압 : 127 / 71</p> -->
                <p id="trans15PulseRespiration"></p>
                <p id="trans15Bodytemperature"></p>
              </td>
            </tr>
            <tr id="detailSideEffect">
              <th scope="row">부작용증상명</th>
              <td id="detailSideEffectNm">
                <!-- <p id="transBfPulseRespiration"></p>
                <p id="transBfBodytemperature"></p> -->
              </td>
            </tr>
            <tr id="detailTransYn">
              <th scope="row">수혈중단여부</th>
              <td>
                <p id="detailTransYn2"></p>
              </td>
            </tr>
            <tr id="detailTransNm">
              <th scope="row">수혈중단사유</th>
              <td>
                <p id="detailTransNms"></p>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<!--모달창--->
<!-- 기본 Alert 모달 -->
<div class="modal basic" tabindex="-1" role="dialog" id="Modal01">
  <div class="modal-dialog" role="document">
    <div class="modal-content">      
      <div class="modal-body text-center align-middle">
        <h4>수혈실시 바코드가 아닙니다.</h4>
		    <p>바코드를 다시 확인해주세요.</p>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-ok btn-block btn-lg" data-dismiss="modal" aria-label="Close">확인</button>
      </div>
    </div>
  </div>
</div>

<%-- <jsp:include page="process.jsp" flush="false" /> --%>
<%-- <jsp:include page="process2.jsp" flush="false" /> --%>
<jsp:include page="process3.jsp" flush="false" />
<jsp:include page="process4.jsp" flush="false" />
<jsp:include page="process5.jsp" flush="false" />

<script type="text/javascript" src="<c:url value="/resources/js/mobile_poc/transfusion.js?version=" /><s:message code="mp.version"/>"></script>
<script type="text/javascript">
$(document).ready(function () {
	//==== 페이지 기본 설정 { ====

	//==== 페이지 기본 설정 } ====

	//==== 서비스 객체 { ====
	var mplusTransFusion = new mplus_transfusion();
	mplusTransFusion.setGlobal(mplusTransFusion);
	mplusTransFusion.init();
	//==== 서비스 객체 } ====
	curPage = mplusTransFusion;
});

this.maxLengthCheck = function(data) {
  curPage.maxLengthCheck(data);
}

this.barcodeCallback = function(data){
  curPage.barcodeCallback(data);
};

this.nfctagCallback = function(data){
	curPage.nfctagCallback(data);
}

var curPage;
</script>

<%-- <jsp:include page="../../../template/tail.jsp" flush="false" /> --%>