<!DOCTYPE html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <meta name="theme-color" content="#000000"/>
    <meta name="description" content="포항시 교통정보센터입니다"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>포항시 교통정보센터</title>
    <th:block th:include="/include/head.html"></th:block>
    <th:block th:include="/include/daterangepicker.html"></th:block>
    <script th:src="@{/js/naverEditor/js/HuskyEZCreator.js}" charset="UTF-8"></script>
    <link rel="stylesheet" th:href="@{/css/notice.css}">
</head>
<body id="body">
<th:block th:include="/include/admin-header.html"></th:block>
<div class="noticeWrap">
    <div class="container view">
        <h2 class="admin-header">팝업 공지</h2>
        <div class="content admin-view">
            <div class="button-box">
                <div class="bl-button" onclick="movePath('/phits/popup-list')">목록</div>
                <div style="display: flex;">
                    <div class="bl-button save-btn" onclick="save()">저장</div>
                </div>
            </div>
            <div class="view-box">
                <div>
                    <input class="title modify" name="b_subject" placeholder="팝업 제목을 입력해주세요.">
                    <textarea id="content" class="b_content" rows="16" name="b_content"></textarea>
                    <div class="post-box">
                        <div>공지 기간</div>
                        <input type="text" id="post" th:class="modify" name="post">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="/include/footer.html"></th:block>
</body>
</html>
<script th:inline="javascript">
    const $title      = $('.title');
    const $content    = $('.b_content');
    const $attach     = $('.attach');
    const $attachFile = $('#attach-file');
    const $post       = $('#post');
    const 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", ['']);
        }
    });

    const post = $post.daterangepicker({
        timePicker: false,
        startDate: new Date(),
        endDate: new Date(new Date().setDate(new Date().getDate() + 1)),
        locale: {
            format: 'YYYY-MM-DD',
            separator: " ~ ",
            applyLabel: "확인",
            cancelLabel : "취소",
            daysOfWeek: ["일", "월", "화", "수", "목", "금", "토"],
            monthNames: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
        },
        disabled : true,
        autoApply: true,
        opens: 'center',
        drops: 'up',
    });

    function attachFile() {
        $attachFile.click();
    }

    $attachFile.on("change", function() {
        const changeFile = $(this)[0].files[0];
        if (changeFile) {
            const fileName = changeFile.name;
            $attach.html('<div><span class="attach-delete" title="첨부파일 제거" onclick="deleteAttach()"></span>'+fileName+'</div>');
        }
    })

    function deleteAttach() {
        $attachFile.val("");
        $attach.html("<div>첨부파일 없음</div>")
    }

    function save() {
        object.getById["content"].exec("UPDATE_CONTENTS_FIELD", []);
        const title    = $title.val();
        const pcontent = $content.val();
        // const file    = $attachFile[0].files[0];
        const postVal  = $post.val();

        let postFrom  = "";
        let postTo    = "";

        //첨부파일 기간값 유효성 체크
        if (!isNull(postVal)) {
            const postArray = postVal.split(" ~ "); // separator " ~ " 를 이용해 post_from, post_to 값을 구분
            if (postArray.length === 2) {
                postFrom = postArray[0];
                postTo   = postArray[1];
            }
        }

        const formData = new FormData();

        // 유효성 체크
        if (isNull(title)) {
            $title.focus();
            return alert("팝업 공지 제목을 입력해주세요.");
        }

        if (isNull(pcontent)) {
            $content.focus();
            return alert("팝업 공지 내용을 입력해주세요.");
        }

        if (isNull(postFrom)) {
            $post.focus();
            return alert("팝업 공지 기간 시작일을 입력해주세요.");
        }

        if (isNull(postTo)) {
            $post.focus();
            return alert("팝업 공지 기간 종료일을 입력해주세요.");
        }

        // if (!file) {
        //     return alert("팝업 이미지 파일을 첨부해주세요.")
        // }

        formData.append("title", title);
        formData.append("url", null);
        formData.append("pcontent", pcontent);
        formData.append("postForm", postFrom);
        formData.append("postTo", postTo);
        formData.append("attachFile", null);

        $.ajax({
            url: '/api/popup/writePopup',
            processData : false,
            contentType: false,
            data: formData,
            type: 'POST',
            success: function(jsonData) {
                if (jsonData) {
                    alert(jsonData.message);
                    if (jsonData.success === "S") {
                        window.location.href = "/phits/popup-list";
                    }
                }
            },
            error: function(error) {
                alert(error.responseJSON.message);
            }
        });
    }
</script>