<!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="@{/js/admin/codeMgt.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 text-center" style="max-width: 800px;">
        <div class="card-body">
          <div class="row justify-content-start">
            <div class="col-5">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th></th>
                  <th>분류</th>
                </tr>
                </thead>
                <tbody th:if="${categoryList.size()==0}">
                <tr>
                  <td colspan="2">검색된 분류가 없습니다.</td>
                </tr>
                </tbody>
                <tbody  th:if="${categoryList.size()>0}">
                <tr class="categoryTr" th:each="commonCode:${categoryList}">
                  <td>
                    <input type="checkbox" class="categoryCheckBox" th:value="${commonCode.category}">
                  </td>
                  <td th:text="${commonCode.category}"></td>
                </tr>
                </tbody>
              </table>
            </div>
            <div class="col-7" id="valueDiv">
              <table class="table table-striped">
                <thead>
                <tr>
                  <th>
                    <input type="checkbox" class="valueCheckBox" id="allValueCheckBox">
                  </th>
                  <th>값</th>
                  <th>설명</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                  <td colspan="3">분류를 선택해주세요.</td>
                </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="card-footer row justify-content-end">
          <div class="col-auto">
            <input type="button" class="btn btn-success" value="추가" data-bs-toggle="modal" data-bs-target="#commonCodeModal">
            <input type="button" class="btn btn-danger" value="삭제" id="deleteCommonCodeBtn">
          </div>
        </div>
      </div>
    </div>
  </main>

  <div class="modal fade" id="commonCodeModal" tabindex="-1" aria-labelledby="commonCodeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="commonCodeModalLabel">코드 추가</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div  class="modal-body">
          <form id="commonCodeForm" action="#" th:action="@{/admin/insertCommonCode}" method="post">
          <div class="mb-3 row">
            <input type="hidden" name="category" id="category">
            <label class="col-sm-2 col-form-label">분류</label>
            <div class="col-sm-5" id="categorySelectDiv">
              <select class="form-select" id="categorySelector">
                <option value="" selected disabled>선택해주세요.</option>
                <option th:each="commonCode:${categoryList}" th:value="${commonCode.category}" th:text="${commonCode.category}"></option>
              </select>
            </div>
            <div class="col-sm-5" id="categoryInputDiv" style="display: none">
              <input type="text" id="categoryInput" class="form-control">
            </div>
            <div class="col-sm-4">
              <input type="checkbox" id="inputSelector">
              <label for="inputSelector">직접입력</label>
            </div>
          </div>
          <div class="mb-3 row">
            <label for="value" class="col-sm-2 col-form-label">값</label>
            <div class="col-sm-5">
              <input type="text" class="form-control" id="value" name="value">
            </div>
          </div>
          <div class="mb-3 row">
            <label for="description" class="col-sm-2 col-form-label">설명</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" id="description" name="description">
            </div>
          </div>
        </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="closeModalBtn">닫기</button>
          <button type="button" class="btn btn-primary" id="saveBtn">저장</button>
        </div>
      </div>
    </div>
  </div>
</div>
</html>