<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>진료유형 정보</title>
    <link rel="stylesheet" th:href="@{/css/common.css}">
    <link rel="stylesheet" href="https://unpkg.com/tabulator-tables@5.6.1/dist/css/tabulator.min.css">
    <script th:src="@{/js/web/jquery.min.js}"></script>
    <script src="https://unpkg.com/tabulator-tables@5.6.1/dist/js/tabulator.min.js"></script>
    <style>
        .pop_wrap {
            max-width: 750px;
            margin: 0 auto;
        }

        .pop_wrap h3 {
            font-size: 16px;
            margin-bottom: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #3985EA;
            color: #333;
        }

        .board_write {
            width: 100%;
            border-collapse: collapse;
        }

        .board_write th {
            background: #f8f9fb;
            padding: 10px 12px;
            text-align: left;
            font-size: 13px;
            font-weight: 600;
            color: #555;
            border: 1px solid #e9ecf0;
            white-space: nowrap;
        }

        .board_write td {
            padding: 8px 12px;
            border: 1px solid #e9ecf0;
        }

        .board_write input[type="text"],
        .board_write input[type="number"] {
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 13px;
        }

        .board_write select {
            height: 30px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 8px;
            font-size: 13px;
        }

        .w100p {
            width: 100%;
            box-sizing: border-box;
        }

        .w80 {
            width: 80px;
        }

        .w120 {
            width: 120px;
        }

        .ess {
            color: #ff0000;
        }

        .txt_info {
            font-size: 11px;
            color: #999;
        }

        .pop_btn_area {
            text-align: center;
            margin-top: 20px;
        }

        .btn_blue {
            padding: 8px 24px;
            background: #3985EA;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }

        .btn_blue:hover {
            background: #2c6fd1;
        }

        .btn_gray {
            padding: 8px 24px;
            background: #fff;
            color: #666;
            border: 1px solid #ddd;
            border-radius: 5px;
            font-size: 14px;
            cursor: pointer;
            margin-left: 6px;
        }

        .btn_gray:hover {
            background: #f5f5f5;
        }

        .btn_red {
            padding: 8px 24px;
            background: #ff4444;
            color: #fff;
            border: none;
            border-radius: 5px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            margin-left: 6px;
        }

        .btn_red:hover {
            background: #cc0000;
        }

        .section-title {
            font-size: 13px;
            font-weight: 700;
            color: #3985EA;
            padding: 8px 0 4px 0;
            border-bottom: 1px solid #e9ecf0;
            margin-top: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .section-title .btn_sm {
            padding: 3px 10px;
            font-size: 11px;
            font-weight: 600;
            background: #3985EA;
            color: #fff;
            border: none;
            border-radius: 3px;
            cursor: pointer;
        }

        .section-title .btn_sm:hover {
            background: #2c6fd1;
        }

        /* 약품 그리드 영역 */
        #productGridWrap {
            margin-top: 8px;
            border: 1px solid #e9ecf0;
            border-radius: 4px;
            overflow: hidden;
        }

        #productGrid {
            font-size: 12px;
        }

        /* 편집 가능한 셀 스타일 */
        .editable-cell {
            background-color: #f0f7ff !important;
            cursor: pointer;
        }

        .editable-cell:hover {
            background-color: #e0efff !important;
        }

        .no-product-msg {
            text-align: center;
            padding: 20px;
            color: #999;
            font-size: 12px;
        }

        /* ===== 제품 검색 레이어팝업 ===== */
        .search-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.45);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .search-overlay.active {
            display: flex;
        }

        .search-popup {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
            width: 680px;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .search-popup-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 14px 18px;
            background: #3985EA;
            color: #fff;
        }

        .search-popup-header h4 {
            margin: 0;
            font-size: 14px;
            font-weight: 700;
        }

        .search-popup-header .popup-close {
            background: none;
            border: none;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            line-height: 1;
        }

        .search-popup-body {
            padding: 14px 18px;
            flex: 1;
            overflow-y: auto;
        }

        .search-input-row {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
        }

        .search-input-row input {
            flex: 1;
            height: 34px;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 0 10px;
            font-size: 13px;
        }

        .search-input-row button {
            padding: 0 18px;
            height: 34px;
            background: #3985EA;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            white-space: nowrap;
        }

        .search-input-row button:hover {
            background: #2c6fd1;
        }

        #searchResultGrid {
            font-size: 12px;
        }
    </style>
</head>

<body style="padding: 20px;">
    <div class="pop_wrap">
        <h3 id="popTitle">용량/출력(Depth 4) 등록</h3>
        <input type="hidden" id="pid" value="">
        <input type="hidden" id="diviDept" value="4">
        <input type="hidden" id="diviParent" value="">
        <input type="hidden" id="storePid" value="1">

        <!-- 기본 정보 -->
        <table class="board_write">
            <colgroup>
                <col width="120px">
                <col width="*">
            </colgroup>
            <tbody>
                <tr id="parentNameRow" style="display:none;">
                    <th>상위 카테고리</th>
                    <td><span id="parentNameTxt"></span></td>
                </tr>
                <tr>
                    <th><span class="ess">*</span> 항목 명칭</th>
                    <td><input type="text" id="diviName" class="w100p" placeholder="예: 피부, 보톡스, 제모 등"></td>
                </tr>
                <tr>
                    <th>정렬 순서</th>
                    <td><input type="number" id="diviSort" class="w80" value="0"> <span class="txt_info">숫자가 낮을수록 먼저
                            표시됩니다.</span></td>
                </tr>
                <tr>
                    <th>색상 코드</th>
                    <td><input type="color" id="diviColor" value="#000000"></td>
                </tr>
            </tbody>
        </table>

        <!-- 용량/출력 정보 (Depth 4 전용) -->
        <div class="section-title">용량/출력 정보</div>
        <table class="board_write">
            <colgroup>
                <col width="120px">
                <col width="*">
            </colgroup>
            <tbody>
                <tr>
                    <th>단가</th>
                    <td>
                        <input type="text" id="kindCost" class="w120" value="0" style="text-align: right;"> 원
                    </td>
                </tr>
                <tr>
                    <th>할인가</th>
                    <td>
                        <input type="text" id="dcCost" class="w120" value="0" style="text-align: right;"> 원
                    </td>
                </tr>
                <tr>
                    <th>사용량</th>
                    <td>
                        <input type="number" id="kindUnitVol" class="w120" value="0" step="0.1" placeholder="용량">
                        <select id="kindUnit" style="width: 100px; margin-left: 5px;">
                            <option value="">선택</option>
                        </select>
                    </td>
                </tr>
            </tbody>
        </table>

        <!-- 약품 관리 (재고관리용) - 수정 모드에서만 표시 -->
        <div id="productSection" style="display:none;">
            <div class="section-title">
                <span>사용 약품 관리 (재고관리)</span>
                <button type="button" class="btn_sm" id="btn_add_product">+ 약품 추가 (검색)</button>
            </div>

            <!-- 약품 그리드 -->
            <div id="productGridWrap">
                <div id="productGrid"></div>
            </div>
        </div>

        <!-- ===== 제품 검색 레이어 팝업 ===== -->
        <div id="productSearchOverlay" class="search-overlay">
            <div class="search-popup">
                <div class="search-popup-header">
                    <h4>약품(제품) 검색</h4>
                    <button type="button" class="popup-close" id="btn_close_search">&times;</button>
                </div>
                <div class="search-popup-body">
                    <div class="search-input-row">
                        <input type="text" id="searchProductKeyword" placeholder="제품명을 입력하세요">
                        <button type="button" id="btn_search_product">검색</button>
                    </div>
                    <div id="searchResultGrid"></div>
                    <p style="margin-top:8px; font-size:11px; color:#999;">* 제품명을 클릭하면 약품이 자동 추가됩니다.</p>
                </div>
            </div>
        </div>

        <div class="pop_btn_area">
            <button type="button" class="btn_blue" id="btn_save">저장</button>
            <button type="button" class="btn_red" id="btn_delete" style="display:none;">삭제</button>
            <button type="button" class="btn_gray" id="btn_close">닫기</button>
        </div>
    </div>

    <script th:src="@{/js/web/settings/medicalcategory/popup/medicalCategoryInfoPopDept4.js}"></script>
</body>

</html>