<%@ 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="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <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/css/style.css"/>
    <%--    <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>--%>
    <%--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"/>--%>
    <%--    <style>--%>
    <%--        .bx-wrapper ul.img-slider > li > a > img {--%>
    <%--            min-height: 30rem;--%>
    <%--            max-height: 45rem;--%>
    <%--            margin: auto;--%>
    <%--        }--%>
    <%--        .bx-wrapper ul.img-slider > li {--%>
    <%--            font-size: 1.5rem;--%>
    <%--        }--%>
    <%--    </style>--%>
    <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/>
    <style>
        .swiper {
            width: 100%;
            height: 100%;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-slide img {
            display: block;
            /*width: 100%;*/
            /*height: 100%;*/
            min-height: 30rem;
            max-height: 45rem;
            object-fit: cover;
        }
        .swiper-pagination-bullet {
            width: 2.5rem;
            height: 2.5rem;
            text-align: center;
            line-height: 2.3rem;
            font-size: 1.7rem;
            color: #000;
            opacity: 1;
            background: rgba(0, 0, 0, 0.2);
        }
        .swiper-pagination-bullet-active {
            color: #fff;
            background: #007aff;
        }
    </style>




    <title>고지 출력</title>
</head>
<body>
<div id="contents"></div>
</body>


<script>
    window.onload = () => {
        notRefresh();

        let errCd = '${errCode}';
        let errMsg = '${errMsg}';
        let isEmpty = (val) => {
            if (val == null || val == undefined || val == '' || val == 'OK')
                return true;

            return false;
        }
        if (!isEmpty(errCd)) {
            alert('[' + errCd + ']' + errMsg);
            return false;
        }


        draw('contents');
        // $('.img-slider').bxSlider({
        //     auto: false, // 자동으로 애니메이션 시작
        //     speed: 500,  // 애니메이션 속도
        //     pause: 3000,  // 애니메이션 유지 시간 (1000은 1초)
        //     mode: 'horizontal', // 슬라이드 모드 ('fade', 'horizontal', 'vertical' 이 있음)
        //     autoControls: true, // 시작 및 중지버튼 보여짐
        //     pager: true, // 페이지 표시 보여짐
        //     captions: true, // 이미지 위에 텍스트를 넣을 수 있음
        // });
        var swiper = new Swiper(".img-slider", {
            // slidesPerView: 3, //한페이지에 보여줄 이미지 갯수
            // spaceBetween: 30, //이미지간 간격
            // slidesPerGroup: 3, //페이지 그룹
            loop: true, //무한 루프
            zoom: true, //이미지 확대 여부(true:사용, false:미사용). 클래스 적용 필수 -> class="swiper-zoom-container"
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows: true,
            },
            pagination: {
                el: ".swiper-pagination",
                // type: "progressbar", //프로그래스바 타입 페이징
                clickable: true,    //클릭가능 설정여부
                renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + (index + 1) + "</span>";
                },
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
        });

        alinkNewWindow();
    }

    /* ===============
    * a 태그
    =============== */
    var alinkNewWindow = () => {
        //link 연결 시 새창으로 열기
        document.querySelectorAll('a').forEach((elm, idx) => elm.target = '_new' + idx);
    }
    /* ===============
    * refresh 방지
    =============== */
    var notRefresh = () => {
        //모바일에서 스크롤을 끝까지 당겨 refresh 방지
        document.body.style.overscrollBehaviorY = 'none';
        //Url 에서 queryString 을 제거하여 재호출 방지
        history.pushState(null, null, location.origin + location.pathname);
    }
    /* ===============
    * 클립보드 복사
    =============== */
    var clipboardCopy = txt => {
        const textarea = document.createElement('textarea');
        document.body.appendChild(textarea);
        textarea.value = txt;
        textarea.select();
        document.execCommand("copy");
        textarea.remove();
        alert('클립보드로 복사 되었습니다.');
    }
    /* ===============
    * a 태그로 치환
    =============== */
    const accountPttrn = /\d{2,6}\-\d{2,9}(\-\d{2,9}\-\d{2,9}|\-\d{2,9})\s?\(?(KB|국민은행|국민|IBK|기업은행|기업|NH|농협은행|농협|WOORI|우리은행|우리|KEB|하나은행|하나|SHINHAN|신한은행|신한|CITY|씨티은행|씨티|DGB|대구은행|대구|BNK|부산은행|부산|SC|제일은행|제일|케이뱅크|카카오뱅크|카카오)?\)?/g;
    var pttrnAtagReplace = (txt, pttrn) => {
        let matches = txt.match(pttrn);
        if (matches == null) return txt;
        matches.forEach((str) => txt = txt.replace(str, '<a href="#" onclick="clipboardCopy(\'' + str.replace(/\n/g, '') + '\'); return false;">' + str + '</a>'));

        return txt;
    }
    /* ===============
    * 강조문구 스타일 적용
    =============== */
    var highlightText = (txt, props) => {
        if (isEmpty(props.style)) return txt;
        if (isEmpty(props.style.highlight)) return txt;

        for (let str in props.style.highlight) {
            let style = props.style.highlight[str];
            let span = document.createElement("span");
            span.innerText = str;
            if (!isEmpty(style['font-size'])) span.style.fontSize = style['font-size'];
            if (!isEmpty(style['font-color'])) span.style.color = style['font-color'];
            if (!isEmpty(style['font-weight'])) span.style.fontWeight = style['font-weight'];
            if (!isEmpty(style['font-style'])) span.style.fontStyle = style['font-style'];
            if (style['use-clipboard']) {
                span.classList.add('clipboard');
                span.style.cursor = 'pointer';
                span.style.textDecoration = 'underline';
            }

            //정규식 기호로 인식되지 않도록 replace 처리
            str = str.replace(/\(/g, '\\(').replace(/\)/g, '\\)');
            str = str.replace(/\[/g, '\\[').replace(/\]/g, '\\]')

            txt = txt.replace(new RegExp(str, 'g'), span.outerHTML);
            if (txt.indexOf(str) > -1 && style['use-copybutton']) {
                let btn = document.createElement('button');
                let btn_text = document.createTextNode('복사');
                btn.appendChild(btn_text);
                btn.setAttribute('type', 'button');
                btn.setAttribute('data-text', str);
                btn.classList.add('clipboard');
                btn.style.backgroundColor = '#4990e2';
                btn.style.color = 'white';
                btn.style.border = 'none';
                btn.style.marginLeft = '5px';
                txt = txt+btn.outerHTML;
            }
        }
        return txt;
    }
    /* ===============
    * XSS Filter 적용
    =============== */
    var escapeXml = (txt) => {
        if (isEmpty(txt)) return txt;

        return txt.replace(/[<>&'"]/g, function (c) {
            switch (c) {
                case '<':
                    return '&lt;';
                case '>':
                    return '&gt;';
                case '&':
                    return '&amp;';
                case '\'':
                    return '&apos;';
                case '"':
                    return '&quot;';
            }
        });
    }
    /* ===============
    * 하이퍼링크 적용
    =============== */
    var hyperlink = (txt, props) => {
        if (isEmpty(props.hyperlink)) return txt;

        props.hyperlink.forEach(url => {

            let a = document.createElement('a');
            a.href = url;
            a.text = url;
            txt = txt.replace(new RegExp(url, 'g'), a.outerHTML);
        });

        return txt;
    }

    /* ===============
    * 데이터 출력
    =============== */
    var draw = (id) => {
        const jsonStr = '${details}'.replace(/\n/gi, '\\n').replace(/\r/gi, '\\r');
        var Dataset = JSON.parse(jsonStr);
        Dataset.details.forEach((row) => {
            switch (row.item_type) {
                case "TEXT":
                    document.getElementById(id).innerHTML += text(row);
                    break;
                case "PRE_TEXT":
                    document.getElementById(id).innerHTML += pretext(row);
                    break;
                case "KEY_VALUE":
                    document.getElementById(id).innerHTML += keyvalue(row);
                    break;
                case "TABLE":
                    document.getElementById(id).innerHTML += table(row);
                    break;
                case "IMAGE":
                    document.getElementById(id).innerHTML += image(row);
                    break;
                case "GRAPH":
                    document.getElementById(id).innerHTML += graph(row);
                    break;
                case "BUTTON":
                    document.getElementById(id).innerHTML += button(row);
                    break;
                case "PAY_BUTTON":
                    document.getElementById(id).innerHTML += paybutton(row);
                    break;
            }
        });

        document.querySelectorAll('span.clipboard').forEach((ele) => {
            ele.addEventListener('click', function () {
                clipboardCopy(this.innerText);
            });
        });

        document.querySelectorAll('button.clipboard').forEach((ele) => {
            ele.addEventListener('click', function () {
                clipboardCopy(this.dataset.text);
            });
        });
    }

    /* ===============
    * "Text" Type
    =============== */
    var text = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //"title" Set
        var subject = props.use_toggle ? document.createElement('summary') : document.createElement('h2');
        subject.innerHTML = nvl(item.title, '');

        //"text" Set
        var text = document.createElement('ul');
        item.elements.forEach((row) => {
            var span = document.createElement('li');
            // span.innerHTML = row;
            // span.innerHTML = pttrnAtagReplace(row, accountPttrn);
            // span.innerHTML = pttrnAtagReplace(highlightText(escapeXml(row), props), accountPttrn);
            span.innerHTML = highlightText(escapeXml(row), props);
            span.innerHTML = hyperlink(span.innerHTML, props);
            text.innerHTML += span.outerHTML;
        });

        //<section> Set
        var section = document.createElement('section');
        section.className = 'text';		//섹션 클래스명
        section.innerHTML += isEmpty(subject.innerHTML) ? '' : subject.outerHTML;
        section.innerHTML += text.outerHTML;

        //<details> Set
        if (props.use_toggle) {
            let details = document.createElement('details');
            details.innerHTML += section.innerHTML;
            section.innerHTML = details.outerHTML;
        }


        return section.outerHTML;
    }
    /* ===============
    * "Pre-Text" Type
    =============== */
    var pretext = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //"title" Set
        var subject = props.use_toggle ? document.createElement('summary') : document.createElement('h2');
        subject.innerHTML = nvl(item.title, '');

        //"text" Set
        var text = document.createElement('pre');
        // text.innerHTML = item.elements;
        // text.innerHTML = pttrnAtagReplace(item.elements, accountPttrn);
        // text.innerHTML = pttrnAtagReplace(highlightText(escapeXml(item.elements), props), accountPttrn);
        text.innerHTML = highlightText(escapeXml(item.elements), props);
        text.innerHTML = hyperlink(text.innerHTML, props);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'pretext';		//섹션 클래스명
        section.innerHTML += isEmpty(subject.innerHTML) ? '' : subject.outerHTML;
        section.innerHTML += text.outerHTML;

        //<details> Set
        if (props.use_toggle) {
            let details = document.createElement('details');
            details.innerHTML += section.innerHTML;
            section.innerHTML = details.outerHTML;
        }


        return section.outerHTML;
    }
    /* ===============
    * "Key-Value" Type
    =============== */
    var keyvalue = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //"title" Set
        var subject = props.use_toggle ? document.createElement('summary') : document.createElement('h2');
        subject.innerHTML = nvl(item.title, '');
        var table = document.createElement('table');

        //<colgroup> Set
        table.innerHTML += createColgroup();

        //<tbody> Set
        table.innerHTML += createBody(item.elements);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'keyvalue';		//섹션 클래스명
        section.innerHTML += isEmpty(subject.innerHTML) ? '' : subject.outerHTML;
        section.innerHTML += table.outerHTML;

        //<details> Set
        if (props.use_toggle) {
            let details = document.createElement('details');
            details.innerHTML += section.innerHTML;
            section.innerHTML = details.outerHTML;
        }

        //Create <colgroup>
        function createColgroup() {
            let colgroup = document.createElement('colgroup');
            let col1 = document.createElement('col');
            let col2 = document.createElement('col');
            col1.style = 'min-width: 180px;';
            col2.style = '';
            colgroup.innerHTML += col1.outerHTML;
            colgroup.innerHTML += col2.outerHTML;

            return colgroup.outerHTML;
        }

        //Create <tbody>
        function createBody(arr) {
            var tbody = document.createElement('tbody');
            arr.forEach((row) => {
                //<td> set - key, value
                var key = document.createElement('td');
                var value = document.createElement('td');
                value.style = 'text-align: left; padding-left: 20px;';
                key.innerHTML += row.key;
                // value.innerHTML += row.value;
                // value.innerHTML += pttrnAtagReplace(row.value, accountPttrn);
                // value.innerHTML = pttrnAtagReplace(highlightText(escapeXml(row.value), props), accountPttrn);
                value.innerHTML = highlightText(escapeXml(row.value), props);
                value.innerHTML = hyperlink(value.innerHTML, props);
                //<tr> set
                var tr = document.createElement('tr');
                tr.innerHTML += key.outerHTML;
                tr.innerHTML += value.outerHTML;
                //<tbody> append
                tbody.innerHTML += tr.outerHTML;
            });
            return tbody.outerHTML;
        }


        return section.outerHTML;
    }
    /* ===============
    * "Table" Type
    =============== */
    var table = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //"title" Set
        var subject = props.use_toggle ? document.createElement('summary') : document.createElement('h2');
        subject.innerHTML = nvl(item.title, '');

        //<table> Set
        var table = document.createElement('table');
        table.innerHTML += createHead(item.elements.head);
        table.innerHTML += createBody(item.elements.rows, props);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'table';		//섹션 클래스명
        section.innerHTML += isEmpty(subject.innerHTML) ? '' : subject.outerHTML;
        section.innerHTML += table.outerHTML;

        //<details> Set
        if (props.use_toggle) {
            let details = document.createElement('details');
            details.innerHTML += section.innerHTML;
            section.innerHTML = details.outerHTML;
        }

        //Create <thead>
        function createHead(arr) {
            var arrTxt = [];
            var thead = document.createElement('thead');
            var tr = document.createElement('tr');
            arr.forEach((row) => {
                var th = document.createElement('th');
                th.style = 'text-align: center;';
                th.innerHTML += row;
                tr.innerHTML += th.outerHTML;
            });
            thead.innerHTML += tr.outerHTML;
            return thead.outerHTML;
        }

        //Create <tbody>
        function createBody(arr, properties) {
            console.log(properties)
            //style...
            let styTextAlign = isEmpty(properties) || isEmpty(properties.style) || isEmpty(properties.style.text_align) ? [] : properties.style.text_align;

            let tbody = document.createElement('tbody');
            arr.forEach((row) => {
                let tr = document.createElement('tr');
                row.forEach((value, idx) => {
                    let td = document.createElement('td');
                    td.style = 'text-align: ' + (styTextAlign[idx] == undefined ? 'center' : styTextAlign[idx]) + ';';
                    // td.innerHTML += value;
                    // td.innerHTML += pttrnAtagReplace(value, accountPttrn);
                    // td.innerHTML += pttrnAtagReplace(highlightText(escapeXml(value), props), accountPttrn);
                    td.innerHTML += highlightText(escapeXml(value), props);
                    td.innerHTML = hyperlink(td.innerHTML, props);

                    tr.innerHTML += td.outerHTML;
                });
                tbody.innerHTML += tr.outerHTML;
            });
            return tbody.outerHTML;
        }


        return section.outerHTML;
    }
    /* ===============
    * "IMAGE" Type
    =============== */
    var image = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //"title" Set
        var subject = props.use_toggle ? document.createElement('summary') : document.createElement('h2');
        subject.innerHTML = nvl(item.title, '');


        //<img> Set
        var div = document.createElement('div');
        if (item.print_type == 'SLIDE')	//print_type이 슬라이드(SLIDE) 이면..
            div.innerHTML += createImgSlide(item.elements);
        else
            div.innerHTML += createImg(item.elements);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'image';	//섹션 클래스명
        section.innerHTML += isEmpty(subject.innerHTML) ? '' : subject.outerHTML;
        section.innerHTML += div.outerHTML;

        //<details> Set
        if (props.use_toggle) {
            let details = document.createElement('details');
            details.innerHTML += section.innerHTML;
            section.innerHTML = details.outerHTML;
        }

        //Create <img> Default
        function createImg(arr) {
            var arrTxt = [];
            arr.forEach((row) => {
                var img = document.createElement('img');
                img.alt = row.key;
                img.src = row.value;
                arrTxt.push(img.outerHTML);
            });

            return arrTxt.join('<br/>');
        }

        //Create <img> print Slider
        // function createImgSlide(arr) {
        //     var ul = document.createElement('ul');
        //     ul.className = 'img-slider';
        //     arr.forEach((row) => {
        //         var img = document.createElement('img');
        //         img.title = row.key;	//캡션 문구
        //         img.alt = row.key;
        //         img.src = row.value;
        //         var a = document.createElement('a');
        //         a.innerHTML = img.outerHTML;
        //         var li = document.createElement('li');
        //         li.innerHTML = a.outerHTML;
        //         ul.innerHTML += li.outerHTML;
        //     });
        //
        //     return ul.outerHTML;
        // }
        function createImgSlide(arr) {
            let ul = document.createElement('ul');
            ul.className = 'swiper img-slider';

            //이미지 Wrapper
            let imgWrapper = document.createElement('div');
            imgWrapper.className = 'swiper-wrapper';
            arr.forEach((row) => {
                let img = document.createElement('img');
                img.title = row.key;	//캡션 문구
                img.alt = row.key;
                img.src = row.value;
                let zoomContainer = document.createElement('div');
                zoomContainer.className = 'swiper-zoom-container';
                zoomContainer.innerHTML = img.outerHTML;
                let div = document.createElement('div');
                div.className = 'swiper-slide';
                div.innerHTML = zoomContainer.outerHTML;
                imgWrapper.innerHTML += div.outerHTML;
            });
            ul.innerHTML += imgWrapper.outerHTML;

            //페이징
            let pageNavBtnNext = document.createElement('div');
            let pageNavBtnPrev = document.createElement('div');
            let pageProgress = document.createElement('div');
            pageNavBtnNext.className = 'swiper-button-next';
            pageNavBtnPrev.className = 'swiper-button-prev';
            pageProgress.className = 'swiper-pagination';
            ul.innerHTML += pageNavBtnNext.outerHTML;
            ul.innerHTML += pageNavBtnPrev.outerHTML;
            ul.innerHTML += pageProgress.outerHTML;

            return ul.outerHTML;
        }

        return section.outerHTML;
    }
    /* ===============
    * "GRAPH" Type(예정)
    =============== */
    var graph = (item) => {
    }
    /* ===============
    * "BUTTON" Type
    =============== */
    var button = (item) => {
        //<button> Set
        var btn = createButton(item.title, item.link_url);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'button';	//섹션 클래스명
        section.innerHTML += btn.outerHTML;

        //Create <button> Default
        function createButton(title, link_url) {
            let a = document.createElement('a');
            a.innerText = title;
            a.href = link_url;

            let div = document.createElement('div');
            div.className = 'linkBtn';
            div.innerHTML = a.outerHTML;


            return div;
        }

        return section.outerHTML;
    }
    /* ===============
    * "Pay-BUTTON" Type
    =============== */
    var paybutton = (item) => {
        let props = isEmpty(item.properties) ? {} : item.properties;

        //<button> Set
        var btn = createButton(item.title);

        //<section> Set
        var section = document.createElement('section');
        section.className = 'paybutton';	//섹션 클래스명
        section.innerHTML += btn.outerHTML;

        //Create <button> Default
        function createButton(title) {
            let payButtonLinks = JSON.parse('${payButtonLinks}');
            let url = '';
            if (isEmpty(props.billSe))
                for (key in payButtonLinks) {
                    url = payButtonLinks[key];
                    break;
                }
            else
                url = payButtonLinks[props.billSe];


            let a = document.createElement('a');
            a.innerText = title;
            a.href = url;
            // a.target = '_blank';

            let div = document.createElement('div');
            div.className = 'linkBtn';
            div.innerHTML = a.outerHTML;


            return div;
        }

        return section.outerHTML;
    }


    var isEmpty = (val) => {
        if (val == null || val == undefined || val == '' || val == [] || val == {})
            return true;
        return false;
    }
    var nvl = (txt, replaceTxt) => {
        if (txt == null || txt == undefined || txt == '')
            return replaceTxt;
        return txt;
    }
</script>


</html>
