<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<div class="container">
    <div class="subHeader">
        <h1 class="logo">안동시 교통정보센터</h1>
        <div class="pageLocation">
            <%@ include file="/WEB-INF/jsp/egovframework/include/adminSubMenu.jsp" %>
        </div>
    </div>
    <div class="subContent">
        <!-- 어드민 탭메뉴 -->
        <%@ include file="/WEB-INF/jsp/egovframework/include/adminMenu.jsp" %>
        <!--// 어드민 탭메뉴 -->
        <div class="pageTitle">
            <h2>공지사항 관리</h2>
            <p>안동시 첨단교통센터 <span>관리자</span> 정보입니다.</p>
        </div>
        <div class="adminWrap">
            <div class="boardWrap">
                <form id="uploadForm" method="post" action="/admin/updateNotice.do" enctype="multipart/form-data">
                    <div class="board-form">
                        <input type="hidden" name="boardNo" value="${noticeEdit.boardNo}">
                        <dl>
                            <dt><span>제목</span></dt>
                            <dd><input type="text" name="subject" placeholder="제목을 입력하세요." value="${noticeEdit.bSubject}" style="width: 100%;"></dd>
                        </dl>
                        <dl>
                            <dt><span>내용</span></dt>
                            <dd>
                                <div class="editor" style="width: 100%;">
                                    <textarea style="width:100%; height: 400px;" id="content" name="content"></textarea>
                                </div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><span>파일첨부</span></dt>
                            <dd class="attachBox">
                                <c:forEach var="i" begin="0" end="2" varStatus="status">
                                    <li>
                                        <div style="display: flex; align-items: center; <c:if test="${i ne 2}">margin-bottom: 5px;</c:if>">
                                            <strong class="fileName${status.count}" style="width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                <c:choose>
                                                    <c:when test="${not empty noticeEdit.attachFiles[i] }">
                                                        <a href="javascript:void(0)"
                                                            onclick="removeEvent($(this), ${status.count})"
                                                            title="클릭시 파일첨부가 삭제됩니다.">${noticeEdit.attachFiles[i] }</a>
                                                    </c:when>
                                                    <c:otherwise>
                                                        <div title="선택된 파일 없음">첨부파일 #${status.count}</div>
                                                    </c:otherwise>
                                                </c:choose>
                                            </strong>
                                            <input type="file" name="attachFile" id="attachFile${status.count}" style="display:none;">
                                            <div class="button file${status.count}" title="파일 선택">파일 선택</div>
                                            <input type="text"
                                                   name="attachFileName"
                                                   id="attachFile${status.count}Name"
                                                   style="display:none;"
                                                   value="${noticeEdit.attachFiles[i]}">
                                        </div>
                                    </li>
                                </c:forEach>
                            </dd>
                        </dl>
                    </div>
                </form>
                <div class="btnArea">
                    <button type="button" class="button" onclick="saveNoticeInfo()">작성완료</button>
                    <button type="button" class="button" onclick="goBack()">취소</button>
                </div>
            </div>
        </div>
    </div>
</div>


<!--//contents-->
<script type="text/javascript" src="/js/naverEditor/js/HuskyEZCreator.js" charset="utf-8"></script>
<script>
    var editHelpWin = false;

    function editorClose() {
        $('#editHelpWin').empty();
        editHelpWin = false;
    }

    function editorHelp() {

        if (editHelpWin == false) {
            var html = '';
            html += '<div style="z-index:100;width:500px;position:absolute;top:215px;left:40%;borde' +
                'r:black 1px solid;background-color:white">';
            html += '<h3 style="padding-bottom:10px"><strong style="width:200px">※접근성 도움말</strong><' +
                '/h3>';
            html += '<strong>[툴바]</strong>';
            html += '<p style="padding-left:20px;padding-right:30px;padding-bottom:10px">ALT+F10 을 ' +
                '누르면 툴바로 이동합니다. 다음 버튼은 TAB 으로 이전 버튼은 SHIFT+TAB 으로 이동 가능합니다. ENTER 를 누르면 해당 버튼의 ' +
                '기능이 동작하고 글쓰기 영역으로 포커스가 이동합니다. ESC 를 누르면 아무런 기능을 실행하지 않고 글쓰기 영역으로 포커스가 이동합니다.</' +
                'p>';
            html += '<strong style="width:200px;padding-top:10px">[빠져 나가기]</strong>';
            html += '<p style="padding-left:20px;padding-bottom:10px"><font color="red">ALT+.</font' +
                '> 를 누르면 스마트 에디터 다음 요소로 <font color="red">ALT+,</font> 를 누르면 스마트에디터 이전 요소로 빠져나갈' +
                ' 수 있습니다.</p>';
            html += '<strong style="width:200px;padding-top:10px">[명령어 단축키]</strong>';
            html += '<ul style="padding-left:20px">';
            html += '<li>CTRL+B <span>굵게</span><span style="padding-left:100px">SHIFT+TAB<span><spa' +
                'n>내어쓰기</span></li>';
            html += '<li>CTRL+U <span>밑줄</span><span style="padding-left:100px">CTRL+F</span><span>' +
                '찾기</span></li>';
            html += '<li>CTRL+I <span>기울임 글꼴</span><span style="padding-left:62px">CTRL+H</span> <s' +
                'pan>바꾸기</span></li>';
            html += '<li>CTRL+D <span>취소선</span><span style="padding-left:87px">CTRL+K</span><span>' +
                '링크걸기</span><span style="padding-left:100px">TAB</span> <span>들여쓰기</span></li>';
            html += '<li></li>';
            html += '</ul>';
            html += '</div>';

            $('#editHelpWin').append(html);
            editHelpWin = true;
        } else {
            $('#editHelpWin').empty();
            editHelpWin = false;
        }
    }

    var object = [];

    nhn.husky.EZCreator.createInIFrame({
        oAppRef: object,
        elPlaceHolder: "content",
        sSkinURI: "/js/naverEditor/SmartEditor2Skin.html",
        fCreator: "createSEditor2",
        htParams: {
            // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseToolbar: true,
            // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
            bUseVerticalResizer: true,
            // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
            bUseModeChanger: true
        },
        fOnAppLoad: function () {
            //기존 저장된 내용의 text 내용을 에디터상에 뿌려주고자 할때 사용
            object.getById["content"].exec("PASTE_HTML", [`${noticeEdit.bContent}`]);
        }
    });

    $('#subject').keydown(function (evt) {
            if (evt.keyCode == 13)
                return false;
        }
    );

    const file1     = $("#attachFile1");
    const file2     = $("#attachFile2");
    const file3     = $("#attachFile3");
    const name1     = $("#attachFile1Name");
    const name2     = $("#attachFile2Name");
    const name3     = $("#attachFile3Name");
    const fileBtn1  = $(".file1");
    const fileBtn2  = $(".file2");
    const fileBtn3  = $(".file3");
    const fileName1 = $("name1");
    const fileName2 = $("name2");
    const fileName3 = $("name3");

    setFileChangeEvt(file1, 1);
    setFileChangeEvt(file2, 2);
    setFileChangeEvt(file3, 3);

    setBtnClick(fileBtn1, file1);
    setBtnClick(fileBtn2, file2);
    setBtnClick(fileBtn3, file3);

    /**
     * 파일 변경 이벤트
     * @param{*} file 변경된 파일
     * @param{*} nmbr 첨부파일 번호
     */
    function setFileChangeEvt(file, nmbr){
        file.on('change', function(){
            if (this.files) {
                const name      = $('#attachFile'+ nmbr + 'Name');
                const container = $('.fileName' + nmbr);
                const fileName  = this.files[0].name;
                name.val(fileName);
                container.empty();
                container.append($('<a href="javascript:void(0)" onclick="removeEvent($(this), ' + nmbr + ')"'
                    + ' title="클릭시 파일첨부가 삭제됩니다.">' + fileName + '</a>'));
            }
        })
    }

    /**
     * 파일 선택 버튼 클릭 시 이벤트
     * @param{*} btn 파일 선택 버튼
     * @param{*} file 버튼 지정 file input
     */
    function setBtnClick(btn, file){
        btn.on('click', function(){
            file.click();
        })
    }

    /**
     * 파일 삭제 이벤트
     * @param{*} el 삭제 a 링크
     * @param{*} nmbr 첨부 파일 번호
     */
    function removeEvent(el, nmbr){
        el.remove();
        const name      = $('#attachFile'+ nmbr + 'Name');
        const container = $('.fileName' + nmbr);
        const file      = $('#attachFile' + nmbr);
        file.val(null);
        name.val(null);
        container.append($('<div title="선택된 파일 없음">첨부파일 #' + nmbr+'</div>'));
    }

    function saveNoticeInfo(){
        object.getById["content"].exec("UPDATE_CONTENTS_FIELD", []);
        if ($("#subject").val() == "") {
            alert("제목은 필수 입니다.");
            return false;
        }

        let value = $("#content").val();
        if ( value === "") {
            alert("내용은 필수 입니다.");
            return false;
        }

        if (value.indexOf('img') === -1) {
            value = value.replace(/<[^>]*>?/g, '');
            if (value.replaceAll('&nbsp;', '') === ""){
                alert("내용은 필수 입니다.");
                return false;
            }
        }
        else {
            value = value.replaceAll('<img', '<img alt=""');
            $("#content").val(value);
        }

        const fileArr = [file1, file2, file3];

        for (let idx in fileArr){
            let file = fileArr[idx];
            if (file.val() && file[0].files[0].size > 200000000) {
                alert("첨부 파일 사이즈는 190MB 이내로 등록 가능합니다. [ 첨부파일 #" + (Number(idx) + 1) + " ]");
                file.focus();
                return false;
            }
        }
        $("#uploadForm").submit();
    }
</script>