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

function checkMobile(){
     
    var varUA = navigator.userAgent.toLowerCase(); //userAgent 값 얻기
 
    if ( varUA.indexOf('android') > -1) {
        //안드로이드
        return "android";
    } else if ( varUA.indexOf("iphone") > -1||varUA.indexOf("ipad") > -1||varUA.indexOf("ipod") > -1 ) {
        //IOS
        return "ios";
    } else {
        //아이폰, 안드로이드 외
        return "other";
    }
    
}

$( function(){
    $( "#id" ).focus();
    
    $( "#loginForm" ).validate({
        onfocusout: function (element) {
            $( element ).valid();
//             $( "#msg" ).remove();
        },
        messages : {
            id : {
                required : "아이디를 입력해주세요."
            },
            pw : {
                required : "비밀번호를 입력해주세요."
            }
        },
        submitHandler: function(form) {
//             $( "#submitLoading" ).toggleClass( "d-none", false );
//             $( "#submitBtn" ).toggleClass( "d-none", true );
            
            $.ajax({
                url      : "./check",
                data     : $("#loginForm").serialize(),
                method   : "POST",
                dataType : "json",
                success  : function( data ){
                    console.log("data -- > " + JSON.stringify(data));
                    var resultCode = data.code;
                    var resultMsg  = data.message;
                    
                    if( data.code == "00" ) {
                        console.log("checkMobile() -- > " + checkMobile());
                        if (checkMobile() == "android") {
                            window.android.login(data.id, data.pw);
                        }
                        
                        location.href="/mobile/menu";
                    } else {
                    	$("#errMsg").text(resultMsg);
//                         $( "#submitLoading" ).toggleClass( "d-none", true );
//                         $( "#submitBtn" ).toggleClass( "d-none", false );
                    };
                },
                error : function(){
//                     $("#errMsg").attr("")
//                     $( "#submitLoading" ).toggleClass( "d-none", true );
//                     $( "#submitBtn" ).toggleClass( "d-none", false );
                }
            }).done( function(){
//                 if( $( "#saveId" ).is( ":checked" ) ) {
//                     setCookie( "userInputId", $( "#id" ).val(), 365 );
//                 } else {
//                     deleteCookie( "userInputId" );
//                 }
            });
        }
    });
});
</script>
</head>
<body>
    <div id="login">
        <div class="container">
            <div class="title">
                생활치료센터
            </div>
            <form id="loginForm" action="./check" method="post">
                <div class="login_box">
                    <div class="visual">
                        <img src="/resources/images/mobile/login_visual.png" />
                    </div>
                    <div class="form">
                        <div class="part">
                            <div class="selectbox">
                                <label for="ex_select">치료센터 확인</label>
                                <select id="ex_select" name="centerCode">
                                    <c:forEach var="i" items="${centerList}">
                                        <option value="${i.centerCode}"><c:out value="${i.centerName}" /></option> 
                                    </c:forEach>
    <!--                                 <option selected>치료센터 확인</option> -->
    <!--                                 <option>레몬병원</option> -->
    <!--                                 <option>레몬병원</option> -->
    <!--                                 <option>레몬병원</option> -->
                                </select>
                            </div>
                        </div>
                        <div class="part">
                            <div class="input">
                                <input type="text" id="id" name="id" class="number1" placeholder="병동번호" tabindex="1" maxlength="20" required>
                            </div>
                        </div>
                        <div class="part">
                            <div class="input">
                                <input type="password" id="pw" name="pw" class="date1" placeholder="생년월일 6자리" autocomplete="off" tabindex="2" maxlength="15" required>
                            </div>
                        </div>
                        <div class="part">
                            <div class="alert" id="errMsg">
<!--                                 입력하신 정보가 일치하지 않습니다. -->
                            </div>
                        </div>
                        <div class="part">
                            <div class="button">
                                <!-- <button id="submitBtn">로그인</button> -->
                                <button id="submitBtn" type="submit" class="btn btn-lg btn-primary">로그인</button>
                                <div id="submitLoading" class="d-none align-bottom spinner-border text-primary" role="status">
                                  <span class="sr-only">Loading...</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>