<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
        <!--contents-->
<section class="sub-container">
    <article class="menu-history">
        <ul>
            <li><a href="/main/main.do" class="home">홈</a></li>
            <li><a href="/ptatms/popupList.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">공지사항</a></p>
            <p><a href="/ptatms/archiveList.do">자료실</a></p>
            <p><a href="/ptatms/popupList.do" class="active">팝업창 관리</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>

        <form name="popEditForm" id="popEditForm" method="post">
            <input type="hidden" name="id" id="id"/>
            <input type="hidden" name="useYN" id="useYN"/>
                <!--//탭버튼-->
                <div class='board-form'>
                    <div class="board-head">
                        <dl>
                            <dd class="width5">순번</dd>
                            <dd class="width30">제목</dd>
                            <dd class="width15">파일</dd>
                            <dd class="width20">기간</dd>
                            <dd class="width10">등록일</dd>
                            <dd class="width10">사용여부</dd>
                            <dd class="width10">관리</dd>
                        </dl>
                    </div>

                    <div class="board-list">
                        <c:forEach var="item" items="${popupList}" varStatus="status">
                            <dl title="${item.title}" style="width:100%;">
                                <dd class="width5 board-no">${status.index + 1}</dd>
                                <dd class="width30 board-tit">${item.title}</dd>
                                <dd class="width15 board-file">${item.img_name}</dd>
                                <dd class="width20 board-term">${item.post_from} ~ ${item.post_to }</dd>
                                <dd class="width10 board-day">${item.regdate }</dd>
                                <c:if test="${item.use_yn == 'Y'}">
                                    <dd class="width10 board-use" title="팝업 사용중"><a href="javascript:setUseYN('N', ${item.popupid }, '${item.title}')"><span class="useY">사용중</span></a></dd>
                                </c:if>
                                <c:if test="${item.use_yn == 'N'}">
                                    <dd class="width10 board-use" title="팝업 사용안함"><a href="javascript:setUseYN('Y', ${item.popupid }, '${item.title}')"><span>사용안함</span></a></dd>
                                </c:if>
                                <dd class="width10 board-manage">
                                    <input type="button" value="삭제" title="팝업 삭제" onclick="javascript:deletePopup(${item.popupid }, '${item.title}')" />
                                    <input type="button" value="수정" title="팝업 수정" onclick="javascript:editPopup(${item.popupid })" />
                                </dd>
                            </dl>
                        </c:forEach>
                    </div>
                </div>
            </form>

            <form
                    name="popupForm"
                    id="popupForm"
                    method="post"
                    enctype="multipart/form-data">
                <div class='board-write-form'>
                    <dl>
                        <dt>제목</dt>
                        <dd><input
                                type="text"
                                title="팝업제목"
                                id="title"
                                name="title"
                                class="form"
                                style="width: 96%;"
                                placeholder="제목을 입력하세요"/>
    <%--                        <input type="text" name="" placeholder="제목을 입력하세요." value="" style="width: 96%;" /></dd>--%>
                    </dl>
                    <dl>
                        <dt>링크(url)</dt>
                        <dd>
                            <input
                                    type="text"
                                    title="팝업링크"
                                    id="url"
                                    name="url"
                                    class="form"
                                    style="width: 96%;"
                                    placeholder="http://는 생략"/>
    <%--                        <input type="text" name="" value="" style="width: 96%;" />--%>
                        </dd>
                    </dl>
                    <dl>
                        <dt>팝업기간</dt>
                        <dd>
                            <input
                                    type="text"
                                    title="팝업기간언제부터"
                                    name="postFrom"
                                    id="postFrom"
                                    class="form"
                                    style="width:40%;"
                                    value="${mTime }"/>
                            ~
                            <input
                                    type="text"
                                    title="팝업기간언제까지"
                                    name="postTo"
                                    id="postTo"
                                    class="form"
                                    style="width:40%;"
                                    value="${mTime }"/>

    <%--                        <input type="text" name=""  value="" style="width:40%;"/> ~ <input type="text" name="" value="" style="width:40%;"/>--%>
                        </dd>
                    </dl>
                    <dl>
                        <dt>이미지</dt>
    <%--                    <dd><input type="file" name="" placeholder="" value="" style='border:none' /></dd>--%>
                        <dd class="attach"><input style='border:none;' type="file" name="popupImg" id="popupImg" title="팝업이미지 파일 선택" accept="image/*"/></dd>
                    </dl>
                </div>
            </form>
            <div class='board-form-btn'>
                <input type="button" name="" id="popupInsert" class='send' value="팝업등록" title="팝업등록" onsubmit="false" />
<%--                <a href="javascript:void(0)" class="bt" id="popupInsert">팝업 등록</a>--%>
            </div>
        <!-- //result-list -->
    </article>
</section>
        <!--//contents-->
        <script type="text/javascript">
            $("#postFrom").datepicker({
                dateFormat: 'yy-mm-dd',
                prevText: '이전 달',
                nextText: '다음 달',
                monthNames: [
                    '1월',
                    '2월',
                    '3월',
                    '4월',
                    '5월',
                    '6월',
                    '7월',
                    '8월',
                    '9월',
                    '10월',
                    '11월',
                    '12월'
                ],
                monthNamesShort: [
                    '1월',
                    '2월',
                    '3월',
                    '4월',
                    '5월',
                    '6월',
                    '7월',
                    '8월',
                    '9월',
                    '10월',
                    '11월',
                    '12월'
                ],
                dayNames: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                dayNamesShort: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                dayNamesMin: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                showMonthAfterYear: true,
                yearSuffix: '년'
            });

            $("#postTo").datepicker({
                dateFormat: 'yy-mm-dd',
                prevText: '이전 달',
                nextText: '다음 달',
                monthNames: [
                    '1월',
                    '2월',
                    '3월',
                    '4월',
                    '5월',
                    '6월',
                    '7월',
                    '8월',
                    '9월',
                    '10월',
                    '11월',
                    '12월'
                ],
                monthNamesShort: [
                    '1월',
                    '2월',
                    '3월',
                    '4월',
                    '5월',
                    '6월',
                    '7월',
                    '8월',
                    '9월',
                    '10월',
                    '11월',
                    '12월'
                ],
                dayNames: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                dayNamesShort: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                dayNamesMin: [
                    '일',
                    '월',
                    '화',
                    '수',
                    '목',
                    '금',
                    '토'
                ],
                showMonthAfterYear: true,
                yearSuffix: '년'
            });

            $("#popupInsert").click(function () {
            	const from = $("#postFrom");
            	const to   = $("#postTo");
            	const title = $("#title");
            	const image = $('#popupImg');
            	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 (image.val() === "") {
                    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].size > 200000000) {
                	alert("팝업이미지 첨부 파일 사이즈는 190MB 이내로 등록 가능합니다.");
                	return false;
                }
                // if (files && !files[0].type.includes('image/')) {
                //     alert("파일 형식이 올바르지 않습니다. 이미지 형식의 파일을 등록해주세요.");
                //     return false;
                // }
                $("#popupForm").attr("action", "/ptatms/popupAdd.do");
                $("#popupForm").submit();
            });

            function setUseYN(use, popId, popupTitle) {
                let setUseConfirm = confirm("제목 : " + popupTitle + "\n해당 게시물 상태를 변경하시겠습니까?");
                if (setUseConfirm) {
                    $("#id").val(popId);
                    $("#useYN").val(use);

                    $("#popEditForm").attr("action", "/ptatms/modifyPopupUseYN.do");
                    $("#popEditForm").submit();
                }
            }

            function editPopup(popId) {
                $("#id").val(popId);
                $("#popEditForm").attr("action", "/ptatms/editPopup.do");
                $("#popEditForm").submit();
            }

            function deletePopup(popId, popupTitle) {
                let delConfirm = confirm("제목 : " + popupTitle + "\n해당 게시물을 삭제 하시겠습니까?");
                if (delConfirm) {
                    $("#id").val(popId);
                    $("#popEditForm").attr("action", "/ptatms/removePopup.do");
                    $("#popEditForm").submit();
                }
            }

        </script>