<%@ 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="ui" uri="http://egovframework.gov/ctl/ui" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>


<script language=javascript>

    function drawPagination(pagination, element, onClick) {
        var html = '';

        if (!pagination || pagination.totalPages === 0) {
            element.empty();
            return;
        }

        var currentPage = pagination.currentPage;
        var totalPages = pagination.totalPages;
        var pageSize = 10;
        var firstPage = Math.floor((currentPage - 1) / pageSize) * pageSize + 1;
        var lastPage = Math.min(firstPage + pageSize - 1, totalPages);

        html += '<li class="page_first"><button type="button" data-page="1"' + (currentPage === 1 ? ' disabled' : '') + '><img src="/publish/images/content/page_first.png" alt="첫 페이지"></button></li>';
        html += '<li class="page_prev"><button type="button" data-page="' + Math.max(1, firstPage - 1) + '"' + (firstPage === 1 ? ' disabled' : '') + '><img src="/publish/images/content/page_prev.png" alt="이전 페이지"></button></li>';

        for (var page = firstPage; page <= lastPage; page++) {
            if (page === currentPage) {
                html += '<li class="on"><button type="button" title="현재페이지">' + page + '</button></li>';
            } else {
                html += '<li><button type="button" data-page="' + page + '" title="' + page + '페이지">' + page + '</button></li>';
            }
        }

        html += '<li class="page_next"><button type="button" data-page="' + Math.min(totalPages, lastPage + 1) + '"' + (lastPage === totalPages ? ' disabled' : '') + '><img src="/publish/images/content/page_next.png" alt="다음 페이지"></button></li>';
        html += '<li class="page_last"><button type="button" data-page="' + totalPages + '"' + (currentPage === totalPages ? ' disabled' : '') + '><img src="/publish/images/content/page_last.png" alt="마지막 페이지"></button></li>';

        element.html(html);

        element.find('button[data-page]:not(:disabled)').on('click', function () {
            onClick($(this).data('page'));
        });
    }

</script>
<div class="mask"></div>

<div class="tooltip-wrap">
    <div class="popup-com auth_manage_popup auth_add_number_popup" tabindex="0" data-tooltip-con="auth_add_number_popup"
         data-focus="auth_add_number_popup" data-focus-prev="auth_add_number_popup-close" style="width:550px;">
        <div class="popup_heading">
            <p>인증 휴대폰번호 추가</p>
            <button type="button" class="tooltip-close" data-focus="auth_add_number_popup-close"><img
                    src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
        </div>
        <div class="layer_in" style="padding:20px 30px 30px 30px;">

            <ul class="stage_area">
                <li class="stage active"><p><strong>1</strong>본인확인</p></li>
                <li class="stage"><p><strong>2</strong>번호 선택·인증</p></li>
            </ul>

            <div class="stage_content stage01">
                <div class="gray_box fill">
                    인증 휴대폰번호를 추가하려면 기존 등록된 휴대폰 번호로 본인 확인을 해야합니다.
                </div>


                <table class="layer_tType1">
                    <caption>본인인증(step1) 표</caption>
                    <colgroup>
                        <col style="width: 95px;">
                        <col style="width: auto;">
                    </colgroup>
                    <tbody>
                    <tr>
                        <th>본인확인</th>
                        <td>
                            <div class="form_row">
                                <select id="certPhoneAddExistingSelect" class="select_number"></select>
                                <button type="button" id="certPhoneAddExistingSend" class="btnType btnType6 btn_auth_send">인증요청</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>인증번호</th>
                        <td>
                            <div class="form_row">
                                <input type="text" id="certPhoneAddExistingCode" maxlength="6" inputmode="numeric"
                                       placeholder="인증번호 6자리 입력" class="inputLight">
                                <div class="timer" id="certPhoneAddExistingTimer">03:00</div>
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="desc_text" id="certPhoneAddExistingDesc">인증번호를 받지 못했다면 인증요청을 다시 눌러주세요. (남은 재발송 <b class="fwBold">3</b>회)</div>
                <div class="popup_btn_wrap2">
                    <button type="button" id="certPhoneAddNext" class="btnType btnType2 btn_next">다음</button>
                    <button type="button" class="tooltip-close" data-focus="auth_add_number_popup-close"
                            data-focus-next="auth_add_number_popup">닫기
                    </button>
                </div>
            </div>

            <div class="stage_content stage02">
                <div class="gray_box fill">
                    승인 완료된 발신번호 중 휴대폰번호만 선택할 수 있습니다.
                </div>


                <table class="layer_tType1">
                    <caption>본인인증(step1) 표</caption>
                    <colgroup>
                        <col style="width: 95px">
                        <col style="width: auto">
                    </colgroup>
                    <tbody>
                    <tr>
                        <th>휴대폰번호</th>
                        <td>
                            <div class="form_row">
                                <select id="certPhoneAddCandidateSelect" class="select_number"></select>
                                <button type="button" id="certPhoneAddCandidateSend" class="btnType btnType6 btn_auth_send">인증요청</button>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>인증번호</th>
                        <td>
                            <div class="form_row">
                                <input type="text" id="certPhoneAddCandidateCode" maxlength="6" inputmode="numeric"
                                       placeholder="인증번호 6자리 입력" class="inputLight">
                                <div class="timer" id="certPhoneAddCandidateTimer">03:00</div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <th>별칭</th>
                        <td>
                            <div class="form_row">
                                <input type="text" id="certPhoneAddAlias" maxlength="20"
                                       placeholder="예: 업무용(선택)" class="inputLight">
                            </div>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="desc_text" id="certPhoneAddCandidateDesc">유선번호·대표번호는 등록할 수 없습니다.</div>
                <div class="popup_btn_wrap2">
                    <button type="button" id="certPhoneAddRegister" class="btnType btnType2"
                            data-focus="auth_add_number_popup-close" data-focus-next="auth_add_number_popup">등록
                    </button>
                    <button type="button" class="tooltip-close" data-focus="auth_add_number_popup-close"
                            data-focus-next="auth_add_number_popup">취소
                    </button>
                </div>
            </div>

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

<div class="tooltip-wrap">
    <div class="popup-com auth_manage_popup auth_del_number_popup" tabindex="0" data-tooltip-con="auth_del_number_popup"
         data-focus="auth_del_number_popup" data-focus-prev="auth_del_number_popup-close" style="width:550px;">
        <div class="popup_heading">
            <p>인증 휴대폰번호 삭제</p>
            <button type="button" class="tooltip-close" data-focus="auth_del_number_popup-close"><img
                    src="/publish/images/content/layerPopup_close.png" alt="팝업 닫기"></button>
        </div>
        <div class="layer_in" style="padding:20px 30px 30px 30px;">
            <div class="gray_box fill"><span id="certPhoneDeleteTargetText"></span>을 인증수단에서 삭제합니다. 삭제 후에는 이 번호로 인증번호를 받을 수 없습니다.</div>
            <table class="layer_tType1">
                <caption>인증 휴대폰번호 삭제 본인확인 표</caption>
                <colgroup><col style="width:95px"><col style="width:auto"></colgroup>
                <tbody>
                <tr>
                    <th>본인확인</th>
                    <td><div class="form_row">
                        <select id="certPhoneDeleteExistingSelect" class="select_number"></select>
                        <button type="button" id="certPhoneDeleteSend" class="btnType btnType6 btn_auth_send">인증요청</button>
                    </div></td>
                </tr>
                <tr>
                    <th>인증번호</th>
                    <td><div class="form_row">
                        <input type="text" id="certPhoneDeleteCode" maxlength="6" inputmode="numeric" placeholder="인증번호 6자리 입력" class="inputLight">
                        <div class="timer" id="certPhoneDeleteTimer">03:00</div>
                    </div></td>
                </tr>
                </tbody>
            </table>
            <div class="desc_text" id="certPhoneDeleteDesc">인증번호를 받지 못했다면 인증요청을 다시 눌러주세요. (남은 재발송 <b class="fwBold">3</b>회)</div>
            <div class="popup_btn_wrap2">
                <button type="button" id="certPhoneDeleteConfirm" class="btnType btnType2">삭제</button>
                <button type="button" class="tooltip-close" data-focus="auth_del_number_popup-close"
                        data-focus-next="auth_del_number_popup">닫기</button>
            </div>
        </div>
    </div>
</div>

<%@ include file="include/secure/certPhone.jspf" %>

<div class="inner">
    <div class="send_top">
        <%@include file="/WEB-INF/jsp/web/user/mypageHeader.jsp" %>
        <div class="mypage_content current" id="tab5_7">
            <div class="heading">
                <h2>보안로그인</h2>
            </div>
            <div class="my_dashboard">

                <!-- 보안로그인 -->
                <div class="security_login">

                    <ul class="explanation_wrap box info">
                        <li>· 사이트 부정로그인으로 인한 피해를 방지할 수 있는 2차 로그인 인증 서비스입니다.</li>
                        <li>· 인증 휴대폰번호는 가입 휴대폰번호와 발신번호 등록이 완료된 휴대폰번호 중에서 추가할 수 있습니다.</li>
                        <li>· 인증 휴대폰번호 추가·삭제 시에는 이미 등록된 번호로 본인 확인을 거쳐야 합니다.</li>
                    </ul>


                    <div class="title_area">
                        <p class="dashboard_title">인증 휴대폰번호 관리
                            <span class="small_text">최대 <b id="certPhoneMaxCount">3</b>개까지 등록할 수 있습니다.</span>
                        </p>
                        <button type="button" id="phonePlus" class="btn_plus"><img src="/publish/images/content/mypage_plus.png" alt="더보기"></button>
                        <button type="button" data-tooltip="auth_add_number_popup" id="phonePlusPopupOpen" style="display:none;"></button>
                    </div>

                    <div class="table_wrap" id="phoneTable">
                        <table>
                            <colgroup>
                                <col style="width: auto;">
                                <col style="width: 10%;">
                                <col style="width: auto;">
                                <col style="width: 15%;">
                                <col style="width: 15%;">
                            </colgroup>
                            <thead>
                            <tr>
                                <th scope="col">휴대폰번호</th>
                                <th scope="col">구분</th>
                                <th scope="col">별칭</th>
                                <th scope="col">등록일시</th>
                                <th scope="col">관리</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td colspan="5">인증 휴대폰번호를 조회하고 있습니다.</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <p class="desc_text">기본 번호(가입 휴대폰번호)는 회원정보 변경 메뉴에서 본인인증 후 변경할 수 있습니다.</p>
                    <!-- //인증 휴대폰번호 관리 -->

                    <%@ include file="include/secure/secondAuthMethodLog.jspf" %>

                    <%@ include file="include/secure/secondAuthLog.jspf" %>
                </div>
                <!-- //보안로그인 -->
            </div>
        </div>
        <!--// 마이페이지 - 회원해지 -->
    </div>
    <!--// send top -->
</div>
<!--// content 영역 -->
