<!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/hospital_info.css?v1.1">
    <style>
        .split-layout {
            display: flex;
            height: calc(100vh - 180px);
            gap: 20px;
        }

        .left-panel {
            flex: 4;
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
        }

        .right-panel {
            flex: 6;
            display: flex;
            flex-direction: column;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 5px;
            padding: 15px;
        }

        .panel-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .panel-title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }

        .tabulator-container {
            flex-grow: 1;
            width: 100%;
        }

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

        .tabulator-header .tabulator-col {
            background-color: #EDF5FF !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" style="padding: 20px;">
        <div class="filter_box" style="margin-bottom: 20px;">
            <div class="form_box" style="display: flex; align-items: center; justify-content: space-between;">
                <div style="font-size: 20px; font-weight: bold; color: #1a73e8;">공통코드 관리</div>
            </div>
        </div>

        <div class="split-layout">
            <!-- Left: Code Group -->
            <div class="left-panel">
                <div class="panel-header">
                    <span class="panel-title">코드 그룹</span>
                    <div class="right_btn_box" style="margin: 0; display: flex; gap: 5px;">
                        <input type="text" id="groupSearchInput" class="custom-input" placeholder="그룹코드/명칭 검색"
                            style="width: 150px; height: 32px;">
                        <button type="button" class="grid-link-btn grid-link-add" onclick="addGroup()"
                            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>
                <div id="gridGroup" class="tabulator-container"></div>
            </div>

            <!-- Right: Code Detail -->
            <div class="right-panel">
                <div class="panel-header">
                    <span class="panel-title" id="codePanelTitle">상세 코드 <span
                            style="font-size: 13px; color: #888; margin-left:10px;">(좌측에서 그룹을 선택하세요)</span></span>
                    <div class="right_btn_box" style="margin: 0; display: flex; gap: 5px;" id="codeBtnArea">
                        <input type="text" id="codeSearchInput" class="custom-input" placeholder="코드/명칭 검색"
                            style="width: 150px; height: 32px;" disabled>
                        <button type="button" class="grid-link-btn grid-link-add" onclick="addCode()" id="btnAddCode"
                            style="border: 1px solid #ccc; padding: 2px 8px; border-radius: 3px; font-size: 13px; height: 32px; line-height: 26px; color: #999; background: #f5f5f5; font-weight: 600;"
                            disabled>
                            추가
                        </button>
                    </div>
                </div>
                <div id="gridCode" class="tabulator-container"></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/code/codeList.js}"></script>
</th:block>

</html>