<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{/web/layout/homeLayout}">
<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/web/webCategorySelectList.css?v2.0">
    <link rel="stylesheet" href="/css/web/grid.css?v1.1">
    <link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.6.1/dist/css/tabulator.min.css">
    <link rel="stylesheet" href="/css/web/categoryTree.css?v1.1">
</th:block>
<th:block layout:fragment="layout_top_script">
    <script src="/js/web/jquery.twbsPagination.js" type="text/javascript"></script>
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
        let categoryDivCd = "[[${param.categoryDivCd}]]" == "" ? "" : "[[${param.categoryDivCd}]]";
        categoryDivCd = "[[${categoryDivCd}]]" == "" ? "" : "[[${categoryDivCd}]]";

        let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
        let insertUseYn = "[[${insertUseYn}]]" == "" ? "N" : "[[${insertUseYn}]]";
        let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
        let deleteUseYn = "[[${deleteUseYn}]]" == "" ? "N" : "[[${deleteUseYn}]]";
        let downloadUseYn = "[[${downloadUseYn}]]" == "" ? "N" : "[[${downloadUseYn}]]";

        /* 검색 관련 변수 */
        let categoryNm = "[[${param.categoryName}]]" == "" ? "" : "[[${param.categoryName}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
    <!-- 센터쪽 -->
    <div class="center_box">
        <p class="page_title">카테고리 관리</p>

        <div class="filter_box">
            <div class="form_box">

                <!-- 검색 영역 삭제됨 -->
                <div class="search_list" style="display:none;"></div>

                <!-- Right Btn Box Removed as buttons moved to Tree Header -->
            </div>
        </div>

        <!-- 트리 + 상세 레이아웃 -->
        <div class="category-tree-layout">
            <!-- 좌측: 트리 영역 -->
            <div class="category-tree-panel">
                <div class="tree-panel-header">
                    <span class="tree-panel-title">카테고리 목록</span>
                    <div class="tree-panel-actions">

                        <button id="btnInsertWebCategory" class="put_btn">
                            <img src="/image/web/notice_btn_icon.svg" alt="추가">추가
                        </button>
                        <button id="btnDeleteWebCategory" class="delete_btn">
                            <img src="/image/web/delete_btn_icon.svg" alt="삭제">삭제
                        </button>
                    </div>
                </div>
                <!-- Sub Header for Expand/Collapse -->
                <div class="tree-sub-header">
                    <button id="btnExpandAll" class="tree-action-btn" title="모두 펼치기">▼ 펼치기</button>
                    <button id="btnCollapseAll" class="tree-action-btn" title="모두 접기">▶ 접기</button>
                </div>
                <div id="categoryTreeContainer" class="category-tree-container"></div>
            </div>

            <!-- 우측: 상세/편집 영역 -->
            <div class="category-detail-panel">
                <div class="detail-panel-header">
                    <span class="detail-panel-title">카테고리 정보</span>
                </div>
                <div id="categoryDetailContent" class="detail-panel-content">
                    <div class="detail-empty-state">
                        <p>좌측 목록에서 카테고리를 선택하세요.</p>
                    </div>
                </div>

                <!-- 등록 폼 (숨김 상태) -->
                <div id="categoryInsertForm" class="detail-panel-content" style="display:none;">
                    <div class="detail-form-group">
                        <label>카테고리 구분</label>
                        <select id="insertCategoryDivCd" class="detail-form-select">
                            <option value="">선택</option>
                            <option value="01">다이어트 시술</option>
                            <option value="02">다이어트 이벤트</option>
                            <option value="03">쁘띠 시술</option>
                            <option value="04">쁘띠 이벤트</option>
                            <option value="05">다이어트 전후사진</option>
                            <option value="06">쁘띠 전후사진</option>
                        </select>
                    </div>
                    <div class="detail-form-group">
                        <label>카테고리명</label>
                        <input type="text" id="insertCategoryNm" class="detail-form-input" placeholder="카테고리명을 입력하세요">
                    </div>
                    <div class="detail-form-actions">
                        <button id="btnSaveCategory" class="detail-save-btn">저장</button>
                        <button id="btnCancelInsert" class="detail-cancel-btn">취소</button>
                    </div>
                </div>

                <!-- 수정 폼 (숨김 상태) -->
                <div id="categoryEditForm" class="detail-panel-content" style="display:none;">
                    <div class="detail-form-group">
                        <label>카테고리 구분</label>
                        <input type="text" id="editCategoryDivNm" class="detail-form-input" readonly>
                        <input type="hidden" id="editCategoryNo">
                        <input type="hidden" id="editCategoryDivCd">
                    </div>
                    <div class="detail-form-group">
                        <label>카테고리명</label>
                        <input type="text" id="editCategoryNm" class="detail-form-input" placeholder="카테고리명을 입력하세요">
                    </div>
                    <div class="detail-form-group">
                        <label>정렬 순서</label>
                        <input type="number" id="editOrderNo" class="detail-form-input" placeholder="정렬 순서를 입력하세요">
                    </div>
                    <div class="detail-form-group">
                        <label>등록일</label>
                        <input type="text" id="editRegDate" class="detail-form-input" readonly>
                    </div>
                    <div class="detail-form-actions">
                        <button id="btnUpdateCategory" class="detail-save-btn">수정</button>
                        <button id="btnCancelEdit" class="detail-cancel-btn">취소</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
    <script src="https://unpkg.com/tabulator-tables@5.6.1/dist/js/tabulator.min.js"></script>
    <script src="/js/web/categoryManagement/CategoryManagement.js?v2.0"></script>
</th:block>

</html>