<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ 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 src="https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
<script>

function juso() {
    new daum.Postcode({
        oncomplete: function(data) {
            // 팝업에서 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.

            // 각 주소의 노출 규칙에 따라 주소를 조합한다.
            // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
            var addr = ''; // 주소 변수
            var extraAddr = ''; // 참고항목 변수

            //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
            if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
                addr = data.roadAddress;
            } else { // 사용자가 지번 주소를 선택했을 경우(J)
                addr = data.jibunAddress;
            }

            // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
            if(data.userSelectedType === 'R'){
                // 법정동명이 있을 경우 추가한다. (법정리는 제외)
                // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
                if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
                    extraAddr += data.bname;
                }
                // 건물명이 있고, 공동주택일 경우 추가한다.
                if(data.buildingName !== '' && data.apartment === 'Y'){
                    extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
                }
                // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
                if(extraAddr !== ''){
                    extraAddr = ' (' + extraAddr + ')';
                }
                // 조합된 참고항목을 해당 필드에 넣는다.
                //document.getElementById("detailAddr").value = extraAddr;
            
            } else {
                //document.getElementById("detailAddr").value = '';
            }

            // 우편번호와 주소 정보를 해당 필드에 넣는다.
            /* document.getElementById('sample6_postcode').value = data.zonecode; */
            
            document.getElementById("mainAddr").value = addr + " " + extraAddr;
            // 커서를 상세주소 필드로 이동한다.
            document.getElementById("detailAddr").focus();
            
        }
    }).open();
}

function onlyNumber() {
    if((event.keyCode<48) || (event.keyCode>57)) {
        event.returnValue = false;
    }
}

$( function(){
    $( "#newForm" ).validate({
        submitHandler: function(form) {
            $("#mainAddr").removeAttr("disabled");
            form.submit();
        }
    });
})

</script>
</head>
<body>
    <div class="wrapper">
        <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include>
        
        <div class="main">
            <nav class="navbar navbar-expand navbar-light bg-white">
                <a class="sidebar-toggle d-flex mr-2">
                    <i class="hamburger align-self-center"></i>
                </a>

                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item dropdown">
                            <a class="nav-icon dropdown-toggle d-inline-block d-sm-none" href="#" data-toggle="dropdown">
                                <i class="align-middle" data-feather="settings"></i>
                            </a>

                            <a class="nav-link dropdown-toggle d-none d-sm-inline-block" href="#" data-toggle="dropdown">
                               <span class="text-dark">홍길동 선생님</span>
                            </a>
                            <div class="dropdown-menu dropdown-menu-right">
                                <a class="dropdown-item" href="pages-profile.html"><i class="align-middle mr-1" data-feather="user"></i> 정보변경</a>
                                <a class="dropdown-item" href="#"><i class="align-middle mr-1" data-feather="pie-chart"></i> 로그아웃</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>

            <main class="content">
                <div class="container-fluid p-0">
                    <!-- 환자관리 : 신규환자 등록 START -->
                    <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">
                                <form action="./newRegist" method="post" id="newForm">
                                    <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><span class="fix">*</span>생활치료센터명</th>
                                                <td>
                                                    <input type="text" class="form-control" name="centerName" required>
                                                </td>
                                                <th><span class="fix">*</span>지역</th>
                                                <td>
                                                    <select class="custom-select" name="locationCode">
                                                        <option>지역</option>
                                                        <c:forEach var="i" items="${locationList}">
                                                            <option value="${i.locationCode}"><c:out value="${i.locationName}"/></option>
                                                        </c:forEach>
                                                    <!-- <option>1</option>
                                                    <option>2</option>
                                                    <option>3</option>
                                                    <option>4</option>
                                                    <option>5</option>
                                                    <option>6</option>
                                                    <option>7</option> -->
                                                    </select>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="fix">*</span>주소</th>
                                                <td colspan="3">
                                                    <div class="form-row">
                                                        <div class="col-lg-10"><input type="text" class="form-control" disabled id="mainAddr" name="centerAddress" required></div>
                                                        <div class="col-lg-2"><span class="btn btn-primary w100" onclick="juso();">주소찾기</span></div>
                                                        <div class="col-lg-10"><input type="text" class="form-control mt8" id="detailAddr" name="detailAddr" placeholder="상세주소" required></div>
                                                    </div>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="fix">*</span>전화번호</th>
                                                <td colspan="3">
                                                    <input type="text" class="form-control" name="centerNumber" placeholder="010-1234-1234" required onkeypress="onlyNumber()">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="fix">*</span>수용인원(명)</th>
                                                <td>
                                                    <input type="text" class="form-control" name="totalCapacity" required onkeypress="onlyNumber();">
                                                </td>
                                                <th><span class="fix">*</span>의료진수 (명)</th>
                                                <td>
                                                    <input type="text" class="form-control" name="totalStaff" required onkeypress="onlyNumber();">
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="fix">*</span>아이디</th>
                                                <td>
                                                    <input type="text" class="form-control" name="staffId" required>
                                                </td>
                                                <th><span class="fix">*</span>비밀번호</th>
                                                <td>
                                                    <input type="password" class="form-control" name="staffPw" placeholder="숫자, 영문, 특수문자 조합 8자리 이상" required>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th><span class="fix">*</span>담당자 이름</th>
                                                <td>
                                                    <input type="text" class="form-control" name="staffName" required>
                                                </td>
                                                <th><span class="fix">*</span>담당자 휴대전화번호</th>
                                                <td>
                                                    <input type="text" class="form-control" name="staffPhoneNumber" placeholder="010-1234-1234" required onkeypress="onlyNumber();">
                                                </td>
                                            </tr>
                                        </table>
                                        <div class="row mt-3">
                                            <div class="col-12">
                                                <div class="text-right">
                                                    <button type="button" class="btn btn-outline-primary w100" onclick="history.back();">취소</button>
                                                    <button type="submit" class="btn btn-primary w100">등록</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- 환자관리 : 신규환자 등록 END -->
                </div>
            </main>

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