<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<style>
	table{
		width: 100%
	}
	th {
		background-color : #f5f5f5;
		color: #777;
	}
	th,
	td {
		padding : 10px;
		border: 1px solid #e9e3e3;
	}
	.board-form{
		padding : 0 !important;
	}
	.prevnext {
		margin : 15px 0;
	}
	.button-box{
		width: 100px;
		height: 25px;
		margin-left: 5px;
		background-color : #f5f5f5;
		border: 1px solid #e9e3e3;
		display : flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		color : #777;
		font-weight: bold;
	}
	.fr{
		display: flex;
		width: 100%;
    	height: 30px;
    	align-items: center;
	}
	.button-box:hover {
		background-color: #ecebeb;
	}
	
	@media (max-width: 900px) {
		.comment {
			display:none;
		}
	}
</style>
<section class="sub-container">
    <article class="menu-history">
        <ul>
            <li><a href="/main/main.do" class="home">홈</a></li>
            <li><a href="/ptatms/noticeList.do">공지사항 관리</a></li>
        </ul>
    </article>
    <article class="contents-wrap">
        <div class="title-box">
            <h2 class="h2-title">공지사항</h2>
            <p class="title-info">평택시 교통정보센터</p>
        </div>
        <!--탭버튼-->
        <div class="tab-btn">
            <p><a href="/ptatms/noticeList.do" class="active">공지사항</a></p>
            <p><a href="/ptatms/archiveList.do">자료실</a></p>
            <p><a href="/ptatms/popupList.do">팝업창 관리</a></p>
            <p><a href="/ptatms/modifyInfo.do">계정 정보변경</a></p>
            <p><a href="/ptatms/status.do">접속통계</a></p>
            <p><a href="/ptatms/logout.do">로그아웃</a></p>
        </div>
        <!--//탭버튼-->

        <div class="cont_body">
            <div class="adminWrapper">
                <div class="boardWriteWrap">
                    <form
                            name="uploadForm"
                            id="uploadForm"
                            action="/ptatms/modifyNotice.do"
                            method="post"
                            enctype="multipart/form-data">
                        <input type="hidden" name="boardNo" value="${noticeEdit.boardNo}">
                        <table summary="이 표는 공지사항 게시판 글쓰기이며 제목, 내용, 첨부파일로 구분되어 내용을 볼 수 있는 표입니다.">
                            <caption>공지사항 게시판 글쓰기</caption>
                            <colgroup>
                            	<col width="20%"/>
                            	<col width="80%"/>
                           	</colgroup>
                            <tbody class="edit-tbody">
                            <tr>
                                <th scope="row">제목</th>
                                <td>
                                	<input
                                        type="text"
                                        class="form"
                                        style="width:100%; padding: 0 10px;"
                                        id="subject"
                                        name="subject"
                                        placeholder="제목을 입력하세요"
                                        value="${noticeEdit.bSubject}"/>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">내용</th>
                                <td>
                                    <textarea style="width:100%;" id="content" name="content" rows="5"></textarea>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">고정여부</th>
                                <td class="fix">
                                    <input type="checkbox" id="chk_fix" name="notice"/>
                                    <script>
										if ('${noticeEdit.bNotice}' === 'Y') {
											$('#chk_fix').prop('checked', true); 
										}                                    	
                                    </script>
                                	<label for="chk_fix">날짜에 상관없이 가장 상단에 고정</label>
                                </td>
                            </tr>
                            <tr>
                                <th scope="row">첨부파일</th>
                                <td class="attach">
                                    <ul>
                                        <c:forEach var="i" begin="0" end="2" varStatus="status">
                                            <li>
                                                <div class="fr">
                                                    <strong class="fileName${status.count}">
                                                        <c:choose>
                                                            <c:when test="${not empty noticeEdit.attatchFiles[i] }">
                                                                <a
                                                                        href="javascript:void(0)"
                                                                        onclick="removeEvent($(this), ${status.count})"
                                                                        title="클릭시 파일첨부가 삭제됩니다.">${noticeEdit.attatchFiles[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-box file${status.count}" title="파일 선택">파일 선택</div>
                                                    <input type="text" name="attachFileName"
                                                           id="attachFile${status.count}Name" style="display:none;" value="${noticeEdit.attatchFiles[i] }">
                                                </div>
                                            </li>
                                        </c:forEach>
                                    </ul>
                                </td>
                            </tr>
                            </tbody>
                        </table>

                    </form>
                </div>
            </div>
        </div>
        <div class="board-form">
            <div class="prevnext">
                <p>
                    <span><a href="javascript:void(0)" id="upload">글 저장</a></span>
                    <span><a href="javascript:history.back();">취소</a></span>
                </p>
            </div>
        </div>
    </article>
</section>


        <!--//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>'));
			}
             
            $("#upload").click(function () {
            	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>