<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<section class="sub-container">
    <article class="menu-history">
        <ul>
            <li><a href="/main/main.do" class="home">홈</a></li>
            <li><a href="/notice/noticeList.do">공지사항</a></li>
        </ul>
    </article>
    <article class="contents-wrap">
        <div class="title-box">
            <h2 class="h2-title">공지사항</h2>
            <p class="title-info">시민 중심 새로운 <span>평택 교통정보센터</span></p>
        </div>
        <div id="noticeCon">
            <div name="search_form" id="search_form">
                <fieldset class="board_search">
                    <!-- <legend>공지사항 검색 영역</legend> -->
                    <select title="검색항목 선택" id="searchType" name="searchType">
                        <option value="title" selected>제목</option>
                        <option value="content">내용</option>
                    </select>
                    <span class="form_text">
								<input type="text" title="검색어 입력" name="searchText" onkeyup="getSearchList(event)" id="searchText"
                                       placeholder="검색어를 입력하세요."/>
						<a href="javascript:getSearchList();" class="bt_search"><img
                                src="/common/images/btn-src.png" alt="검색버튼"></a>
							</span>
                </fieldset>
            </div>

            <div class="board-form">
                <div class="board-head">
                    <dl>
                        <dd class="board-noti"></dd>
                        <dd class="board-no">No</dd>
                        <dd class="board-title">제목</dd>
                        <dd class="board-writer">첨부파일</dd>
                        <dd class="board-day">작성일</dd>
                        <dd class="board-count">조회수</dd>
                    </dl>
                </div>

                <div class="board-list">
                    <c:forEach items="${noticeList}" var="item">
                        <dl>
                            <a href="/notice/noticeView/${item.boardNo}.do" title="${item.bSubject }">
                                <c:if test="${item.bNotice == 'Y'}">
                                    <dd class="board-noti"><span class='blue'>공지</span></dd>
                                </c:if>
                                <c:if test="${item.bNotice == 'N'}">
                                    <dd class="board-noti"><span></span></dd>
                                </c:if>
                                <dd class="board-no">${item.boardNo }</dd>
                                <dd class="board-title">${item.bSubject }</dd>
                                <dd class="board-writer"><c:if test="${item.attachFile != '||'}"><img
                                        src="/images/icon_file.png" alt="첨부파일"/></c:if></dd>
                                <dd class="board-day">${item.regDate}</dd>
                                <dd class="board-count">${item.readCount }</dd>
                            </a>
                        </dl>
                    </c:forEach>
                </div>

                <div class="paging">
                    <c:if test="${pageMaker.prev}">
                        <p class="prev"><a href="/notice/noticeList/${pageMaker.startPage - 1}.do">&lt;</a></p>
                    </c:if>
                    <c:forEach begin="${pageMaker.startPage}" end="${pageMaker.endPage}" var="idx">
                        <c:choose>
                            <c:when test="${pageMaker.getCriteria().getPage() eq idx}">
                                <a class="active" href="/notice/noticeList/${idx}.do" title="선택됨">${idx}</a>
                            </c:when>
                            <c:otherwise>
                                <a href="/notice/noticeList/${idx}.do">${idx}</a>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                    <c:if test="${pageMaker.next && pageMaker.endPage > 0}">
                        <p class="next"><a href="/notice/noticeList/${pageMaker.endPage + 1}.do">&gt;</a></p>
                    </c:if>
                </div>

            </div>
            <!-- //result-list -->
        </div>
    </article>
</section>
<!--//contents-->

<script>
    const $boardList = $('.board-list');
    const $paging    = $('.paging');

    function getSearchList(event, searchText, searchType, page) {
        if (event && event.key !== 'Enter') {
            return
        }
        const $searchText =  $('#searchText');
        const $searchType =  $('#searchType');

        if (!searchText) {
            searchText  = $searchText.val();
        }

        if (!searchType) {
            searchType  = $searchType.val();
        }

        if (!page) {
            page = 1;
            const currentPage = $('.paging.active');
            if (currentPage[0] || currentPage.text()) {
                page = currentPage.text();
            }
        }

        $.ajax({
            url : '/notice/getNoticeList.do',
            method : 'POST',
            data : {
                page : page,
                searchType : searchType,
                searchText : searchText,
            },
            success: (res)=>{
                const {noticeList, pageMaker} = res;
                $boardList.empty();
                $paging.empty();
                if (noticeList && noticeList.length) {
                    let str = '';
                    for (let item of noticeList) {
                        str +=
                            `<dl>
                                <a href="/notice/noticeView/\${item.boardno}.do" title="\${item.bsubject}">`;
                        if (item.bNotice === 'Y') {
                            str += `<dd class="board-noti"><span class='blue'>공지</span></dd>`;
                        }
                        else {
                            str += `<dd class="board-noti"><span></span></dd>`;
                        }

                        str += `<dd class="board-no">\${item.boardno }</dd>
                                    <dd class="board-title">\${item.bsubject }</dd>
                                    <dd class="board-writer">`;

                        if (item.attachFile != '||') {
                            str += `<img src="/images/icon_file.png" alt="첨부파일" />`;
                        }
                        str +=`</dd>
                                    <dd class="board-day">\${item.regdate}</dd>
                                    <dd class="board-count">\${item.readcount }</dd>
                                </a>
                            </dl>`;
                    }

                    $boardList.html(str);
                    if (pageMaker) {
                        let pageStr = '';
                        const {startPage, endPage, prev, next, criteria} = pageMaker;
                        if (prev) {
                            pageStr += `<p class="prev"><a href="javascript:getSearchList(null, '\${searchText}', '\${searchType}', '\${prev}')">&lt;</a></p>`;
                        }
                        for (let ii = startPage; ii <= endPage; ii++) {
                            if (criteria.page === ii) {
                                pageStr += `<a class="active" title="선택됨">\${ii}</a>`;
                            }
                            else {
                                pageStr += `<a href="javascript:getSearchList(null, '\${searchText}', '\${searchType}', '\${ii}')">\${ii}</a>`;
                            }
                        }
                        if (next) {
                            pageStr += ` <p class="next"><a href="javascript:getSearchList(null, '\${searchText}', '\${searchType}', '\${next}')">&gt;</a></p>`;
                        }
                        $paging.html(pageStr);
                    }
                }
            },
            error: (error)=>{
                console.log(error);
                alert(error.message);
            }
        });
    }
</script>