<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ page session="false"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="${data._INCLUDE}/header.jsp"></jsp:include>
<script>
    $(function() {
        // Datatables basic
        $("#datatables-basic").DataTable({
            responsive : true
        });
        // Datatables with Buttons
        var datatablesButtons = $("#datatables-buttons").DataTable({
            responsive : true,
            lengthChange : !1,
            buttons : [ "copy", "print" ]
        });
        datatablesButtons.buttons().container().appendTo(
                "#datatables-buttons_wrapper .col-md-6:eq(0)");
        // Datatables with Multiselect
        var datatablesMulti = $("#datatables-multi").DataTable({
            responsive : true,
            select : {
                style : "multi"
            }
        });
    });
</script>
<script type="text/javascript">
$( function(){
    setCookieCheck();
    
    $( "#id" ).focus();
    
    $( "#loginForm" ).validate({
        onfocusout: function (element) {
            $( element ).valid();
            $( "#msg" ).remove();
        },
        messages : {
            id : {
                required : "아이디를 입력해주세요."
            },
            password : {
                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 ){
                    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(){
                    $( "#submitLoading" ).toggleClass( "d-none", true );
                    $( "#submitBtn" ).toggleClass( "d-none", false );
                }
            }).done( function(){
                if( $( "#saveId" ).is( ":checked" ) ) {
                    setCookie( "userInputId", $( "#id" ).val(), 365 );
                } else {
                    deleteCookie( "userInputId" );
                }
            });
        }
    });
});

function setCookieCheck() {
    var cookieId   = $.trim( getCookie( "userInputId" ) );
    var cookieSave = $.trim( getCookie( "saveIdChecked" ) );
    
    if( cookieId != "" ) { 
        $( "#id" ).val( cookieId );
    }
    
    if( cookieSave != "" ){
        cookieSave = ( cookieSave === 'true' );
        $( "#saveId" ).prop( "checked", cookieSave );
    }
    
    $( "#saveId" ).on( "change", function(){
        var $this = $( this );
        
        console.log( $this );
        console.log( $this.is( ":checked" ) );
        
        if( $this.is( ":checked" ) === false ) {
            deleteCookie( "userInputId" );
        }
        setCookie( "saveIdChecked", $this.is( ":checked" ), 365 );
    });
};
</script>
</head>
<body>
    <%-- <jsp:include page="${data._INCLUDE}/sidebar.jsp"></jsp:include> --%>

    <main class="main d-flex w-100">
        <div class="container d-flex flex-column">
            <div class="row h-100">
                <div
                    class="col-sm-10 col-md-8 col-lg-6 mx-auto d-table h-100">
                    <div class="d-table-cell align-middle">

                        <div class="text-center mt-4">
                            <h1 class="h2">생활치료센터 의료진 시스템</h1>
                            <p class="lead">Life Care Center Medical Staff System</p>
                        </div>

                        <div class="card">
                            <div class="card-body">
                                <div class="m-sm-4">
                                    <form id="loginForm" action="./check" method="post">
                                        <div class="form-group">
                                            <label>아이디</label>
                                            <input id="id" class="form-control form-control-lg" type="text" name="id" placeholder="아이디" tabindex="1" maxlength="20" required>
                                        </div>
                                        <div class="form-group">
                                            <label>비밀번호</label>
                                            <input id="password" class="form-control form-control-lg" type="password" name="password" placeholder="비밀번호" autocomplete="off" tabindex="2" maxlength="15" required>
                                        </div>
                                        <div>
                                            <div class="custom-control custom-checkbox align-items-center text-right">
                                                <input type="checkbox" id="saveId" class="custom-control-input" value="remember-me" name="remember-me" checked="checked">
                                                <label for="saveId" class="custom-control-label text-small">아이디 저장</label>
                                            </div>
                                        </div>
                                        <div class="text-center mt-3">
                                            <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>
<!--                                             <a href="../patient/list" class="btn btn-lg btn-primary">로그인</a> -->
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </main>

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