<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<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 name="popupForm" id="popupForm" method="post" enctype="multipart/form-data" action="/admin/updatePopup.do">
                    <div class="board-form">
                        <input type="hidden" name="popupId" id="id" value="${popup.popupId }"/>
                        <dl>
                            <dt><span>제목</span></dt>
                            <dd><input type="text" id="title" name="title" placeholder="제목을 입력하세요." value="${popup.title}" style="width: 100%;"></dd>
                        </dl>
                        <dl>
                            <dt><span>링크(URL)</span></dt>
                            <dd><input type="text" id="url" name="url" placeholder="http://는 생략" value="${popup.url}" style="width: 100%;"></dd>
                        </dl>
                        <dl>
                            <dt><span>기간</span></dt>
                            <dd>
                                <input
                                    title="팝업기간언제부터"
                                    type="text"
                                    name="postFrom"
                                    id="postFrom"
                                    value="${popup.post_from}"
                                    style="width: 120px; text-align: center;"
                                />
                                <span>&nbsp;~&nbsp;</span>
                                <input
                                    title="팝업기간언제부터"
                                    type="text"
                                    name="postTo"
                                    id="postTo"
                                    value="${popup.post_to}"
                                    style="width: 120px; text-align: center;"
                                >
                            </dd>
                        </dl>
                        <dl>
                            <dt><span>팝업 이미지</span></dt>
                            <dd>
                                <div class="editor" style="width: 100%;"><img class="popup-img" style="max-width: 100%;" src="/upload/${popup.img_id}.do"></div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><span>파일첨부</span></dt>
                            <dd style="display: flex; align-items: center;">
                                <div class="img-name">${popup.img_name}</div>
                                <div class="button" title="파일 선택" style="width: 85px; margin-left: 5px;" onclick="$('#popupImg').click()">파일 선택</div>
                                <input id="popupImg" name="popupImg" type="file" accept="image/*" style="display:none;" onchange="setFileChangeEvt(this)">
                            </dd>
                        </dl>
                    </div>
                </form>
                <div class="btnArea">
                    <button type="button" class="button" onclick="savePopupInfo()">작성완료</button>
                    <button type="button" class="button" onclick="goBack()">취소</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    const dayArray   = ['일', '월', '화', '수', '목', '금', '토'];
    const monthArray =  ['1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월'];

    //시작 날짜
    $("#postFrom").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: monthArray,
        monthNamesShort: monthArray,
        dayNames: dayArray,
        dayNamesShort: dayArray,
        dayNamesMin: dayArray,
        showMonthAfterYear: true,
        yearSuffix: '년'
    });

    //종료날짜
    $("#postTo").datepicker({
        dateFormat: 'yy-mm-dd',
        prevText: '이전 달',
        nextText: '다음 달',
        monthNames: monthArray,
        monthNamesShort: monthArray,
        dayNames: dayArray,
        dayNamesShort: dayArray,
        dayNamesMin: dayArray,
        showMonthAfterYear: true,
        yearSuffix: '년'
    });

    /**
     * 팝업 수정 정보 저장
     * @returns {boolean}
     */
    function savePopupInfo(){
        const from = $("#postFrom");
        const to   = $("#postTo");
        const title = $("#title");
        const image = $('#popupImg');
        const imgName = $('.img-name');
        const dateType = RegExp(/^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/);
        if (title.val() == "") {
            alert("팝업 제목을 입력해주세요.");
            title.focus();
            return false;
        }
        if (from.val() == "") {
            alert("팝업 시작일을 입력해주세요.");
            from.focus();
            return false;
        }
        if (to.val() == "") {
            alert("팝업 종료일을 입력해주세요.");
            to.focus()
            return false;
        }
        if (imgName.text() == "") {
            alert("팝업 이미지를 업로드 해주세요");
            return false;
        }
        if (!dateType.test(from.val())) {
            alert("팝업 시작 날짜 형식이 올바르지 않습니다.");
            from.focus();
            return false;
        }
        if (!dateType.test(to.val())) {
            alert("팝업 종료 날짜 형식이 올바르지 않습니다.");
            to.focus();
            return false;
        }
        if (from.val() > to.val()) {
            alert("팝업 시작일이 종료 일보다 큽니다.");
            to.focus();
            return false;
        }
        let files = image[0].files;
        if (files && files[0] && files[0].size > 200000000) {
            alert("팝업 이미지 첨부 파일 사이즈는 190MB 이내로 등록 가능합니다.");
            return false;
        }

        $("#popupForm").submit();
    }

    /**
     * 이미지 파일 변경 시 이미지 이름 표출사진 변경
     * @param fileInput file input
     */
    function setFileChangeEvt(fileInput) {
        if (fileInput.files && fileInput.files[0] && fileInput.files[0].name) {
            const fileName = fileInput.files[0].name;
            $('.img-name').text(fileName);

            const reader = new FileReader();

            reader.onload = function(event) {
                const popupImage = $('.popup-img');
                popupImage.attr('src', event.target.result)
            };

            reader.readAsDataURL(fileInput.files[0]);
        }
    }
</script>