<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<th:block layout:fragment="script">
  <script type="text/javascript" th:src="@{/vendor/jquery-ui-1.13.0.dragSort/jquery-ui.min.js}"></script>
  <script type="text/javascript" th:src="@{/js/board/contentSearch.js}"></script>
  <script type="text/javascript" th:src="@{/js/board/contentList.js}"></script>
</th:block>
<div layout:fragment="content">
  <main class="pt-3">
    <input type="hidden" name="_csrf_header" th:value="${_csrf.headerName}"/>
    <input type="hidden" th:name="${_csrf.parameterName}" th:value="${_csrf.token}"/>
    <h4>통합 검색</h4>
    <div class="row mx-0">
      <div class="col-12 card">
        <div class="card-body">
          <div class="row justify-content-start">
            <div class="col-7">
              <div class="card">
                <div class="card-body row">
                  <div class="col-10">
                    <form action="#" method="post" id="searchForm">
                      <div class="row mb-1">
                        <label for="categoryName" class="col-sm-2 col-form-label">분류</label>
                        <div class="col-sm-8 pe-0">
                          <input type="hidden" id="searchCategorySeq" name="searchCategorySeq">
                          <input type="text" class="form-control form-control-sm" id="categoryName" placeholder="오른쪽 분류 선택 버튼으로 등록" readonly>
                        </div>
                        <div class="col-sm-2 px-0">
                          <input type="button" class="btn btn-info btn-sm" id="categorySelectModalBtn" data-bs-toggle="modal" data-bs-target="#categorySelectModal" value="분류 선택">
                        </div>
                      </div>
                      <div class="row mb-1">
                        <label for="title" class="col-sm-2 col-form-label">제목</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control form-control-sm" id="title" name="title">
                        </div>
                        <label for="createName" class="col-sm-2 col-form-label">작성자</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control form-control-sm" id="createName" name="createName">
                        </div>
                      </div>
                      <div class="row mb-1">
                        <label for="tagName" class="col-sm-2 col-form-label">해시태그</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control form-control-sm" id="tagName" name="tagName" placeholder="# 없이 ,로 구분하여 태그 입력">
                        </div>
                        <label for="startDate" class="col-sm-2 col-form-label">작성일</label>
                        <div class="col-sm-4">
                          <div class="col-auto input-group w-auto input-daterange" id="dateSelectorDiv">
                            <input type="text" class="form-control form-control-sm" id="startDate" name="startDate" placeholder="시작일" autocomplete="off" readonly>
                            <input type="text" class="form-control form-control-sm" id="endDate" name="endDate" placeholder="종료일" autocomplete="off" readonly>
                          </div>
                        </div>
                      </div>
                      <div class="row">
                        <label for="originalName" class="col-sm-2 col-form-label">첨부파일</label>
                        <div class="col-sm-4">
                          <input type="text" class="form-control form-control-sm" id="originalName" name="originalName">
                        </div>
                      </div>
                    </form>
                  </div>
                  <div class="col-2 m-auto">
                    <button class="btn btn-primary px-5 py-3" id="searchBtn" style="white-space: nowrap;"><i class="bi bi-search"></i><br>검색</button>
                  </div>
                </div>
              </div>
              <div class="row" id="searchResultDiv">

              </div>
            </div>
            <div class="col-5">
              <ul class="nav nav-tabs" id="boardTab" role="tablist">
                <li class="nav-item" role="presentation">
                  <button class="nav-link active" id="contentTab" data-bs-toggle="tab" data-bs-target="#contentDiv" type="button" role="tab">내용</button>
                </li>
                <li class="nav-item" role="presentation">
                  <button class="nav-link" id="logTab" data-bs-toggle="tab" data-bs-target="#logDiv" type="button" role="tab">이력</button>
                </li>
              </ul>
              <div class="tab-content border border-top-0" id="boardDiv">
                <div class="tab-pane fade show active" id="contentDiv" role="tabpanel" aria-labelledby="contentTab">
                  <div class="py-5 text-center">
                    <h3>검색 후 목록에서 선택해주세요.</h3>
                  </div>
                </div>
                <div class="tab-pane fade" id="logDiv" role="tabpanel" aria-labelledby="logTab">
                  <div class="py-5 text-center">
                    <h3>검색 후 목록에서 선택해주세요.</h3>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
  <div class="modal fade" id="categorySelectModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="categorySelectModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="categorySelectModalLabel">분류 선택</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <div class="row mb-3">
            <div class="col-sm">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>대분류</th>
                </tr>
                </thead>
                <tbody>
                <th:block th:each="depth1:${session.categoryList}">
                <tr class="categoryTr depth1Tr">
                  <td><input type="checkbox" class="categoryCheckBox" data-depth="1"
                             th:data-categoryseq="${depth1.categorySeq}" th:data-categoryname="${depth1.categoryName}"></td>
                  <td th:text="${depth1.categoryName}"></td>
                </tr>
                </th:block>
                </tbody>
              </table>
            </div>
            <div class="col-sm">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>연도</th>
                </tr>
                </thead>
                <tbody>
                <tr class="text-center depth2Tr">
                  <td colspan="2">상위 분류를<br>선택해주세요</td>
                </tr>
                <th:block th:each="depth1:${session.categoryList}">
                  <th:block th:each="depth2:${depth1.childCategoryList}">
                    <tr class="categoryTr depth2Tr" th:data-parentseq="${depth2.parentSeq}" style="display: none;">
                      <td><input type="checkbox" class="categoryCheckBox" data-depth="2"
                                 th:data-categoryseq="${depth2.categorySeq}" th:data-categoryname="${depth2.categoryName}"></td>
                      <td th:text="${depth2.categoryName}"></td>
                    </tr>
                  </th:block>
                </th:block>
                </tbody>
              </table>
            </div>
            <div class="col-sm">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>중분류</th>
                </tr>
                </thead>
                <tbody>
                <tr class="text-center depth3Tr">
                  <td colspan="2">상위 분류를<br>선택해주세요</td>
                </tr>
                <th:block th:each="depth1:${session.categoryList}">
                  <th:block th:each="depth2:${depth1.childCategoryList}">
                    <th:block th:each="depth3:${depth2.childCategoryList}">
                      <tr class="categoryTr depth3Tr" th:data-parentseq="${depth3.parentSeq}" style="display: none;">
                        <td><input type="checkbox" class="categoryCheckBox" data-depth="3"
                                   th:data-categoryseq="${depth3.categorySeq}" th:data-categoryname="${depth3.categoryName}"></td>
                        <td th:text="${depth3.categoryName}"></td>
                      </tr>
                    </th:block>
                  </th:block>
                </th:block>
                </tbody>
              </table>
            </div>
            <div class="col-sm">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>소분류</th>
                </tr>
                </thead>
                <tbody>
                <tr class="text-center depth4Tr">
                  <td colspan="2">상위 분류를<br>선택해주세요</td>
                </tr>
                <th:block th:each="depth1:${session.categoryList}">
                  <th:block th:each="depth2:${depth1.childCategoryList}">
                    <th:block th:each="depth3:${depth2.childCategoryList}">
                      <th:block th:each="depth4:${depth3.childCategoryList}">
                        <tr class="categoryTr depth4Tr" th:data-parentseq="${depth4.parentSeq}" style="display: none;">
                          <td><input type="checkbox" class="categoryCheckBox" data-depth="4"
                                     th:data-categoryseq="${depth4.categorySeq}" th:data-categoryname="${depth4.categoryName}"></td>
                          <td th:text="${depth4.categoryName}"></td>
                        </tr>
                      </th:block>
                    </th:block>
                  </th:block>
                </th:block>
                </tbody>
              </table>
            </div>
          </div>
          <div class="row mb-3 justify-content-center">
            <div class="col-auto"><button class="btn btn-warning" id="categoryUpBtn"><i class="bi bi-caret-up"></i></button> </div>
            <div class="col-auto"><button class="btn btn-success" id="categoryDownBtn"><i class="bi bi-caret-down"></i></button> </div>
          </div>
          <div class="card p-2">
            <ul class="nav" id="selectedCategoryDiv">

            </ul>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
          <button type="button" class="btn btn-primary" id="categorySelectBtn">선택</button>
        </div>
      </div>
    </div>
  </div>
</div>
</html>