<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorate="~{/web/layout/homeLayout}">

<head>
    <title>통합 진료유형 관리</title>
</head>

<th:block layout:fragment="layout_css">
    <link rel="stylesheet" href="/css/web/webCategorySelectList.css?v2.1">
    <link rel="stylesheet" href="/css/web/hospital_work.css?v1.1">
    <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.2">
    <link rel="stylesheet" href="/css/web/hospital_info.css?v1.1">
    <style>
        .project_wrap .content_section .hospital_wrap .center_box .tab_panel {
            height: 100%;
            overflow: hidden;
        }

        .project_wrap .content_section .hospital_wrap .center_box .tab_panel .tab-content {
            height: calc(100% - 52px);
            overflow: hidden;
        }

        /* 탭 내 그리드 헤더 배경색 변경 및 고정 */
        #gridOverview .tabulator-header {
            background-color: #EDF5FF !important;
            border-bottom: 1px solid #ddd !important;
        }

        #gridOverview .tabulator-header .tabulator-col {
            background-color: #EDF5FF !important;
        }

        .project_wrap .content_section .hospital_wrap .center_box .tab_panel .tab-content .tab-pane {
            height: 100%;
            overflow: hidden;
        }

        /* 현재 화면 전용 여백 제거 */
        .project_wrap .content_section .hospital_wrap .center_box .filter_box .form_box .select_box {
            margin-left: 0 !important;
        }

        /* 그리드 폭이 좁아질 때 Tabulator 공식 트리 아이콘(SVG)이 찌그러지는 현상 방지 */
        #gridOverview .tabulator-row .tabulator-cell .tabulator-data-tree-branch,
        #gridOverview .tabulator-row .tabulator-cell .tabulator-data-tree-control {
            flex-shrink: 0 !important;
            /* 공간이 부족해도 아이콘 원형 유지 */
        }

        #gridOverview .tabulator-row .tabulator-cell .tabulator-data-tree-control svg {
            width: 14px !important;
            min-width: 14px !important;
            height: 14px !important;
            min-height: 14px !important;
            flex-shrink: 0 !important;
            display: block !important;
        }

        /* dataTreeChildIndent: 0 에 추가로, 모든 트리 컨트롤의 고정 마진 제거 및 1뎁스 여백 완전 밀착 */
        #gridOverview .tabulator-row .tabulator-cell .tabulator-data-tree-control {
            margin-right: 4px !important;
            /* 기호와 텍스트 사이 간격만 유지 */
            margin-left: 0 !important;
        }

        /* 1뎁스(진료과목)의 들여쓰기 공간 완전 제거 */
        #gridOverview .tabulator-row .tabulator-cell[tabulator-field="divi_name"] .tabulator-data-tree-control,
        #gridOverview .tabulator-row .tabulator-cell[tabulator-field="divi_name"] .tabulator-data-tree-branch {
            margin-left: 0 !important;
            padding-left: 0 !important;
        }
    </style>
</th:block>

<th:block layout:fragment="layout_top_script">
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
    </script>
</th:block>

<th:block layout:fragment="layout_content">
    <div class="center_box">

        <div class="tab_panel" role="tabpanel">
            <!-- Nav tabs -->
            <div class="nav_box">
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tabManage" aria-controls="tabManage" role="tab" data-toggle="tab">
                            <p>진료유형 관리</p>
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="#tabOverview" aria-controls="tabOverview" role="tab" data-toggle="tab">
                            <p>전체보기</p>
                        </a>
                    </li>
                </ul>
            </div>

            <!-- Tab panes -->
            <div class="tab-content">
                <!-- ===== 탭1: 진료유형 관리 ===== -->
                <div role="tabpanel" class="tab-pane active" id="tabManage">
                    <div class="filter_box">
                        <div class="form_box"
                            style="display: flex; align-items: center; justify-content: space-between;">
                            <div style="display: flex; align-items: center; gap: 10px;">
                                <div class="select_list first" style="margin: 0;">
                                    <div class="select_box dropdown" id="depth1SelectBox">
                                        <button type="button" class="label dropdown-toggle" data-toggle="dropdown"
                                            aria-haspopup="true" aria-expanded="false">진료과목 전체</button>
                                        <input type="hidden" id="depth1Select">
                                        <ul class="select_option_list dropdown-menu" id="depth1OptionList"></ul>
                                    </div>
                                </div>
                                <div class="right_btn_box" style="margin: 0; display: flex; gap: 5px;">
                                    <button type="button" class="grid-link-btn grid-link-edit" onclick="editDepth1()"
                                        style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 13px; height: 32px; line-height: 26px; color: #555; background: #fff; font-weight: 600;">
                                        수정
                                    </button>
                                    <button type="button" class="grid-link-btn grid-link-add"
                                        onclick="addChildCategory('0', '1', '최상위 항목')"
                                        style="border: 1px solid #3985EA; padding: 2px 8px; border-radius: 3px; font-size: 13px; height: 32px; line-height: 26px; color: #fff; background: #3985EA; font-weight: 600;">
                                        추가
                                    </button>
                                </div>
                            </div>
                            <button type="button" id="btnHelpManage" class="grid-link-btn grid-link-add"
                                style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 13px; height: 32px; line-height: 26px; color: #555; background: #fff; font-weight: 600;">도움말</button>
                        </div>

                        <!-- 진료유형 관리 사용 가이드 (기본 숨김) -->
                        <div id="manageGuideBox"
                            style="display: none; margin-top: 15px; padding: 15px; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 5px; font-size: 13px; color: #333; line-height: 1.6;">
                            <h5
                                style="margin-top: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #1a73e8;">
                                💡 진료유형 관리 탭 사용 가이드</h5>
                            <ul style="padding-left: 20px; margin-bottom: 0;">
                                <li><b>조회 및 이동:</b> 좌측 표에서 항목을 <b>클릭</b>하면 우측 표에 해당 항목의 하위 데이터가 로드됩니다.</li>
                                <li><b>항목 추가:</b> 각 패널 우측 상단이나 그리드 안의 <b>[추가/등록]</b> 버튼을 눌러 새 하위 항목을 손쉽게 생성할 수 있습니다.
                                </li>
                                <li><b>상세 수정:</b> 표 안의 데이터를 <b>더블클릭</b>하면 상세 정보를 수정할 수 있는 팝업창이 열립니다.
                                </li>
                                <li><b>항목 삭제 (우클릭):</b> 삭제할 항목 위에서 <b>마우스 우클릭</b>을 하면 [삭제] 메뉴가 나타납니다. 하위 항목이 딸려있으면 삭제되지
                                    않으므로 주의하세요.</li>
                                <li><b>다중 선택 (Shift / Ctrl):</b> <b>Shift + 클릭</b>으로 여러 범위를 한 번에 연속 선택하거나, <b>Ctrl +
                                        클릭</b>으로 띄엄띄엄 다중 선택한 뒤 <b>우클릭 삭제</b>할 수 있습니다.</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 2depth | 3depth | 4depth | 5depth 가로 배치 -->
                    <div class="category-tree-layout">
                        <!-- Depth 2: 진료유형 -->
                        <div class="category-tree-panel" style="flex:20; width:auto; min-width:0;">
                            <div class="tree-panel-header">
                                <span class="tree-panel-title">진료유형</span>
                                <div class="tree-panel-actions" id="btnArea2"></div>
                            </div>
                            <div id="gridDepth2" class="category-tree-container"></div>
                        </div>

                        <!-- Depth 3: 제품 -->
                        <div class="category-tree-panel" style="flex:30; width:auto; min-width:0;">
                            <div class="tree-panel-header">
                                <span class="tree-panel-title">제품/시술</span>
                                <div class="tree-panel-actions" id="btnArea3"></div>
                            </div>
                            <div id="gridDepth3" class="category-tree-container"></div>
                        </div>

                        <!-- Depth 4: 용량 -->
                        <div class="category-tree-panel" style="flex:35; width:auto; min-width:0;">
                            <div class="tree-panel-header">
                                <span class="tree-panel-title">용량/출력</span>
                                <div class="tree-panel-actions" id="btnArea4"></div>
                            </div>
                            <div id="gridDepth4" class="category-tree-container"></div>
                        </div>

                        <!-- Depth 5: 부위 -->
                        <div class="category-tree-panel" style="flex:15; width:auto; min-width:0;">
                            <div class="tree-panel-header">
                                <span class="tree-panel-title">부위</span>
                                <div class="tree-panel-actions" id="btnArea5"></div>
                            </div>
                            <div id="gridDepth5" class="category-tree-container"></div>
                        </div>
                    </div>
                </div>

                <!-- ===== 탭2: 전체보기 ===== -->
                <div role="tabpanel" class="tab-pane" id="tabOverview">
                    <div class="filter_box">
                        <div class="form_box"
                            style="display: flex; align-items: center; justify-content: space-between;">
                            <div class="select_list first" style="display: flex; align-items: center; gap: 10px;">
                                <div class="select_box dropdown" id="depth1SelectBoxOverview">
                                    <button type="button" class="label dropdown-toggle" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">진료과목 전체</button>
                                    <input type="hidden" id="depth1SelectOverview">
                                    <ul class="select_option_list dropdown-menu" id="depth1OptionListOverview"></ul>
                                </div>
                            </div>
                            <button type="button" id="btnHelpOverview" class="grid-link-btn grid-link-add"
                                style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 13px; height: 32px; line-height: 26px; color: #555; background: #fff; font-weight: 600;">도움말</button>
                        </div>

                        <!-- 전체보기 사용 가이드 (기본 숨김) -->
                        <div id="overviewGuideBox"
                            style="display: none; margin-top: 15px; padding: 15px; background-color: #f8f9fa; border: 1px solid #e0e0e0; border-radius: 5px; font-size: 13px; color: #333; line-height: 1.6;">
                            <h5
                                style="margin-top: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; color: #1a73e8;">
                                💡 전체보기 탭 사용 가이드</h5>
                            <ul style="padding-left: 20px; margin-bottom: 0;">
                                <li><b>데이터 수정 (더블클릭):</b> 수정하고자 하는 항목(명칭, 단가, 할인가 등)의 셀 위에서 <b>더블클릭</b>하면 즉시 입력창이 표시되어
                                    데이터를 수정할 수 있습니다.</li>
                                <li><b>트리 작동 (+/-버튼):</b> 좌측의 <b>+ / - 버튼</b>을 클릭하면 하위 진료유형, 제품/시술, 용량/출력, 부위가 단계별로
                                    펼쳐지거나 접힙니다.</li>
                                <li><b>일괄 저장:</b> 항목을 하나라도 수정하면 표 우측 상단에 <b>[일괄저장]</b> 및 <b>[일괄취소]</b> 버튼이 나타납니다. 여러 항목을
                                    연속해서 수정한 뒤 마지막에 한 번만 저장하시면 됩니다.</li>
                                <li><b>취소:</b> 저장 전 <b>[일괄취소]</b>를 누르면 모든 수정 내역이 원래 상태로 되돌아갑니다.</li>
                            </ul>
                        </div>
                    </div>

                    <div class="form_box first"
                        style="margin-top: 20px; height: calc(100vh - 290px); display: flex; flex-direction: column;">
                        <div class="hospital_box"
                            style="margin-top: 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; height: 100%; display: flex; flex-direction: column; overflow: hidden; background-color: #fff;">
                            <div
                                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-shrink: 0; min-height: 26px;">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <span class="tree-panel-title" style="font-size: 17px; margin: 0;">전체 진료유형</span>
                                    <button type="button" id="btnExpandAll" class="grid-link-btn grid-link-add"
                                        style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 12px; height: 24px; line-height: 18px; color: #555; background: #fff;">전체펼치기</button>
                                    <button type="button" id="btnCollapseAll" class="grid-link-btn grid-link-edit"
                                        style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 12px; height: 24px; line-height: 18px; color: #555; background: #fff;">전체접기</button>
                                </div>
                                <div class="tree-panel-actions" style="min-height: 26px; display: flex;">
                                    <button type="button" id="btnSaveOverview" class="put_btn"
                                        style="display: none;"><img src="/image/web/check.svg" alt="일괄저장"
                                            style="filter: brightness(0) invert(1);">일괄저장</button>
                                    <button type="button" id="btnCancelOverview" class="delete_btn"
                                        style="display: none;"><img src="/image/web/close.svg" alt="일괄취소"
                                            style="filter: brightness(0) invert(1);">일괄취소</button>
                                </div>
                            </div>
                            <div id="gridOverview" style="width: 100%; flex-grow: 1; border: 1px solid #e0e0e0;"></div>
                        </div>
                    </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 th:src="@{/js/web/settings/medicalcategory/medicalCategoryList.js(v=202602296)}"></script>
</th:block>


</html>