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

<!DOCTYPE html>
<html data-useragent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

    <c:set var="ctx" value="${pageContext.request.contextPath}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="${ctx }/resource/bill/css/nvep/nvEpDetail.css"/>
    <link rel="stylesheet" href="${ctx }/resource/bill/css/nvep/nvEpLayout.css"/>
    <link rel="stylesheet" href="${ctx }/resource/bill/css/nvep/nvEpComponent.css"/>

    <title>네이버페이</title>


    <style>
        .result_message {
            text-align: center;
            color: #09aa5c;
            font-size: 1.5rem;
            letter-spacing: -0.5px;
            font-weight: 600;
            position: relative;
            padding: 15px 0px 11px;
        }
    </style>
    <script>
        window.onload = () => {
            notRefresh();
        }

        var notRefresh = () => {
            document.body.style.overscrollBehaviorY = 'none';
            history.pushState(null, null, location.origin + location.pathname);
        }
    </script>
</head>
<body>
<%--<div id="header" class="type_basic">--%>
<!-- header -->
<div id="header" class="type_end">
    <div class="gnb">
        <h1 class="pageh1">결제 상세정보</h1>

    </div>
</div>
<%--</div>--%>
<div id="container" role="main">

    <c:choose>
        <c:when test="${code eq 'Success' }">

            <div class="detail_section result_message">
                <strong>결제가 정상 처리 되었습니다</strong>
            </div>
            <div class="detail_section result_message" style="font-size: 1rem;">
                <ul class="info_list">
                    <li style="padding: 0px;">[결제내역]은 네이버페이 사이트에서</li>
                    <li style="padding: 0px;">확인 하실 수 있습니다.</li>
                    <li style="padding: 0px; color: #09aa5c" id="progress">&nbsp</li>
                </ul>
            </div>

            <script>
                window.onload = () => {
                    pageMove();
                }
                var pageMove = () => {
                    let sec = 10;
                    let timer = sec;
                    const interval = setInterval(() => {
                        document.querySelector('#progress').innerText = (timer--) + ' 초 후 이동 합니다'
                        if (timer < 0) {
                            const url = 'https://m.pay.naver.com/payments/detail/${body.paymentId}';
                            location.href = url;
                            clearInterval(interval);
                        }
                    }, 1000);
                }
            </script>
        </c:when>
        <c:otherwise>
            <div class="detail_section result_message">
                <strong>결제 처리에 실패 했습니다</strong>
            </div>
            <!-- 실패사유 -->
            <div class="detail_section type_payment_info">
                <div class="info_area">
                    <div class="info_head">
                        <h3 class="h3">실패 사유</h3>
                    </div>
                    <div class="info_cont">
                        <ul class="info_list">
                                <%-- //TODO 네이버페이 1차검수결과 수정사항 -> 안내문구 외 불필요한 코드값 노출 제거 --%>
                                <%--                            <li>--%>
                                <%--                                <div class="total">--%>
                                <%--                                    <strong>코드</strong>--%>
                                <%--                                    <p class="amount"><span><c:out value="${code}"/></span></p>--%>
                                <%--                                </div>--%>
                                <%--                            </li>--%>
                            <li>
                                <div class="total">
                                    <strong>메시지</strong>
                                    <p class="amount"><span><c:out value="${message}"/></span></p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </c:otherwise>
    </c:choose>
</div>

</body>


</html>
