<!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 href="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.snow.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/web/ContentsBbsUpd.css">
    <link rel="stylesheet" href="/css/web/grid.css?v1.1">
    <style>
        /* Quill 에디터 스타일 보정 */
        .ql-toolbar.ql-snow {
            border: 1px solid #E9ECF0;
            border-radius: 5px 5px 0 0;
            background: #F9FAFB;
        }

        .ql-container.ql-snow {
            border: 1px solid #E9ECF0;
            border-top: none;
            border-radius: 0 0 5px 5px;
            min-height: 350px;
            max-height: 600px;
            overflow-y: auto;
            font-size: 14px;
        }

        .ql-editor {
            min-height: 340px;
            line-height: 1.7;
        }

        .ql-editor.ql-blank::before {
            color: #B5BDC4;
            font-style: normal;
        }

        /* 페이지 스크롤 활성화 오버라이드 */
        .center_box {
            overflow-y: auto !important;
        }

        .project_wrap .content_section .hospital_wrap .center_box .content_box {
            background: none !important;
            border: none !important;
        }

        /* 단일 폼 레이아웃 */
        .pr-single-form {
            width: 100%;
            background: #fff;
            border: 1px solid #E9ECF0;
            border-radius: 5px;
            padding: 24px;
        }

        .pr-single-form .form-grid-row {
            display: flex;
            gap: 16px;
            margin-bottom: 16px;
        }

        .pr-single-form .form-group {
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .pr-single-form .form-group label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 6px;
        }

        .pr-single-form .form-group input[type="text"] {
            height: 38px;
            padding: 0 12px;
            border: 1px solid #E9ECF0;
            border-radius: 5px;
            font-size: 14px;
            outline: none;
        }

        .pr-single-form .form-group input[type="text"]:focus {
            border-color: #3985EA;
            box-shadow: 0 0 0 2px rgba(57, 133, 234, 0.1);
        }

        /* 내용 헤더 (라벨 + 도움말 버튼) */
        .content-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 6px;
        }

        .content-header label {
            font-size: 13px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 0 !important;
        }

        .btn-help {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 12px;
            font-size: 12px;
            font-weight: 600;
            color: #3985EA;
            background: #EFF6FF;
            border: 1px solid #BFDBFE;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.15s;
        }

        .btn-help:hover {
            background: #DBEAFE;
            border-color: #93C5FD;
        }

        /* 액션 버튼 */
        .pr-actions {
            display: flex;
            gap: 10px;
            margin-top: 20px;
        }

        /* Quill 에디터 및 미리보기 이미지 크기 제한 */
        .ql-editor img,
        #previewContent img {
            max-width: 100%;
            height: auto;
        }

        /* 도움말 모달 */
        .help-modal-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 9999;
            justify-content: center;
            align-items: center;
        }

        .help-modal-overlay.active {
            display: flex;
        }

        .help-modal {
            background: #fff;
            border-radius: 10px;
            width: 640px;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
        }

        .help-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            border-bottom: 1px solid #E5E7EB;
        }

        .help-modal-header h3 {
            font-size: 16px;
            font-weight: 700;
            color: #1F2937;
            margin: 0;
        }

        .help-modal-close {
            width: 32px;
            height: 32px;
            border: none;
            background: #F3F4F6;
            border-radius: 6px;
            cursor: pointer;
            font-size: 16px;
            color: #6B7280;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.15s;
        }

        .help-modal-close:hover {
            background: #E5E7EB;
            color: #374151;
        }

        .help-modal-body {
            padding: 24px;
            font-size: 13px;
            color: #4B5563;
            line-height: 1.8;
        }

        .help-modal-body h4 {
            font-size: 14px;
            font-weight: 700;
            color: #1F2937;
            margin: 20px 0 8px 0;
        }

        .help-modal-body h4:first-child {
            margin-top: 0;
        }

        .help-modal-body table {
            width: 100%;
            border-collapse: collapse;
            margin: 8px 0 16px 0;
        }

        .help-modal-body table th {
            background: #F9FAFB;
            padding: 8px 12px;
            text-align: left;
            font-weight: 600;
            border: 1px solid #E5E7EB;
            font-size: 12px;
        }

        .help-modal-body table td {
            padding: 8px 12px;
            border: 1px solid #E5E7EB;
            font-size: 12px;
        }

        .help-modal-body .tip-box {
            background: #F0F9FF;
            border: 1px solid #BAE6FD;
            border-radius: 6px;
            padding: 12px 16px;
            margin-top: 16px;
        }

        .help-modal-body .tip-box strong {
            color: #0284C7;
        }
    </style>
</th:block>
<th:block layout:fragment="layout_top_script">
    <script>
        let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";
        let selectUseYn = "[[${selectUseYn}]]" == "" ? "N" : "[[${selectUseYn}]]";
        let updateUseYn = "[[${updateUseYn}]]" == "" ? "N" : "[[${updateUseYn}]]";
        let muProcedureReviewId = "[[${param.muProcedureReviewId}]]";
        const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";
        let titleQuery = "[[${param.title}]]" == "" ? "" : "[[${param.title}]]";
        let categoryDivCdQuery = "[[${param.categoryDivCd}]]" == "" ? "" : "[[${param.categoryDivCd}]]";
    </script>
</th:block>
<th:block layout:fragment="layout_content">
    <div class="center_box">
        <p class="page_title" style="float:none; display:block; width:100%;">시술후기 수정</p>

        <div class="pr-single-form">
            <!-- 구분 & 제목 -->
            <div class="form-grid-row">
                <div class="form-group" style="flex: 0 0 150px;">
                    <label>구분</label>
                    <select id="categoryDivCd"
                        style="height: 38px; padding: 0 12px; border: 1px solid #E9ECF0; border-radius: 5px; font-size: 14px; outline: none; background: #fff;">
                        <option value="07">다이어트 센터</option>
                        <option value="08">쁘띠 센터</option>
                    </select>
                </div>
                <div class="form-group" style="flex: 1;">
                    <label>제목</label>
                    <input type="text" id="title" placeholder="제목을 입력해주세요." />
                </div>
            </div>

            <!-- 내용 (Quill 에디터) -->
            <div class="form-group" style="margin-bottom: 16px;">
                <div class="content-header">
                    <label>내용</label>
                    <button type="button" class="btn-help" id="btnHelp">? 도움말</button>
                </div>
                <div id="quillEditor"></div>
            </div>

            <!-- 해시태그 -->
            <div class="form-grid-row">
                <div class="form-group">
                    <label>해시태그</label>
                    <input type="text" id="hashtag" placeholder="#해시태그를 입력해주세요." />
                </div>
            </div>

            <!-- 버튼 -->
            <div class="pr-actions">
                <button class="preview_btn btnPreview"
                    style="width: 90px; height: 36px; border-radius: 4px; background: #fff; color: #3985EA; border: 1px solid #3985EA; font-weight: 600; cursor: pointer;">미리보기</button>
                <button class="registration_btn btnSave"
                    style="width: 80px; height: 36px; border-radius: 4px;">수정</button>
                <button class="cancel_btn btnCancle"
                    style="width: 80px; height: 36px; border-radius: 4px; margin-left: 10px;">취소</button>
            </div>
        </div>
    </div>

    <!-- 미리보기 모달 -->
    <div class="help-modal-overlay" id="previewModal">
        <div class="help-modal" style="width: 800px; max-height: 90vh;">
            <div class="help-modal-header">
                <h3>👁 미리보기</h3>
                <button class="help-modal-close" id="previewModalClose">✕</button>
            </div>
            <div class="help-modal-body" style="padding: 0;">
                <!-- 제목 영역 -->
                <div style="padding: 20px 24px; border-bottom: 1px solid #E5E7EB;">
                    <p style="font-size: 11px; color: #9CA3AF; margin-bottom: 4px;">제목</p>
                    <h2 id="previewTitle" style="font-size: 20px; font-weight: 700; color: #1F2937; margin: 0;"></h2>
                </div>
                <!-- 내용 영역 -->
                <div style="padding: 24px;">
                    <div id="previewContent" class="ql-editor"
                        style="min-height: 200px; max-height: 500px; overflow-y: auto; padding: 0;"></div>
                </div>
                <!-- 해시태그 영역 -->
                <div id="previewHashtagArea" style="padding: 12px 24px 20px; border-top: 1px solid #E5E7EB;">
                    <span id="previewHashtag"
                        style="display: inline-block; padding: 4px 12px; background: #EFF6FF; color: #3985EA; border-radius: 20px; font-size: 13px; font-weight: 500;"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- 도움말 모달 -->
    <div class="help-modal-overlay" id="helpModal">
        <div class="help-modal">
            <div class="help-modal-header">
                <h3>📝 에디터 사용 가이드</h3>
                <button class="help-modal-close" id="helpModalClose">✕</button>
            </div>
            <div class="help-modal-body">
                <h4>📌 텍스트 서식</h4>
                <table>
                    <tr>
                        <th>기능</th>
                        <th>설명</th>
                        <th>단축키</th>
                    </tr>
                    <tr>
                        <td><strong>B</strong> 굵게</td>
                        <td>선택한 텍스트를 굵게 표시</td>
                        <td>Ctrl+B</td>
                    </tr>
                    <tr>
                        <td><em>I</em> 기울임</td>
                        <td>선택한 텍스트를 기울임꼴로 표시</td>
                        <td>Ctrl+I</td>
                    </tr>
                    <tr>
                        <td><u>U</u> 밑줄</td>
                        <td>선택한 텍스트에 밑줄 적용</td>
                        <td>Ctrl+U</td>
                    </tr>
                    <tr>
                        <td><s>S</s> 취소선</td>
                        <td>선택한 텍스트에 취소선 적용</td>
                        <td>-</td>
                    </tr>
                </table>

                <h4>🎨 글자 스타일</h4>
                <table>
                    <tr>
                        <th>기능</th>
                        <th>설명</th>
                    </tr>
                    <tr>
                        <td>헤더 (H1~H6)</td>
                        <td>제목 크기를 설정합니다. 숫자가 작을수록 큰 제목</td>
                    </tr>
                    <tr>
                        <td>폰트</td>
                        <td>글꼴을 변경합니다</td>
                    </tr>
                    <tr>
                        <td>글자 크기</td>
                        <td>Small, Normal, Large, Huge 중 선택</td>
                    </tr>
                    <tr>
                        <td>글자색 / 배경색</td>
                        <td>텍스트 색상 또는 배경 하이라이트 색상 선택</td>
                    </tr>
                </table>

                <h4>📋 문단 서식</h4>
                <table>
                    <tr>
                        <th>기능</th>
                        <th>설명</th>
                    </tr>
                    <tr>
                        <td>순서 목록</td>
                        <td>1. 2. 3. 형태의 번호 목록</td>
                    </tr>
                    <tr>
                        <td>비순서 목록</td>
                        <td>• 형태의 글머리 기호 목록</td>
                    </tr>
                    <tr>
                        <td>체크 목록</td>
                        <td>☐ 형태의 체크박스 목록</td>
                    </tr>
                    <tr>
                        <td>들여쓰기</td>
                        <td>텍스트를 안쪽/바깥쪽으로 이동</td>
                    </tr>
                    <tr>
                        <td>정렬</td>
                        <td>좌측, 중앙, 우측, 양쪽 정렬</td>
                    </tr>
                    <tr>
                        <td>인용문</td>
                        <td>인용 블록으로 표시</td>
                    </tr>
                    <tr>
                        <td>코드 블록</td>
                        <td>코드 형태로 표시</td>
                    </tr>
                </table>

                <h4>🔗 멀티미디어</h4>
                <table>
                    <tr>
                        <th>기능</th>
                        <th>설명</th>
                    </tr>
                    <tr>
                        <td>링크</td>
                        <td>선택한 텍스트에 URL 링크 삽입</td>
                    </tr>
                    <tr>
                        <td>이미지</td>
                        <td>이미지 파일을 선택하여 삽입 (서버에 자동 업로드)</td>
                    </tr>
                    <tr>
                        <td>동영상</td>
                        <td>YouTube 등 동영상 URL을 삽입</td>
                    </tr>
                </table>

                <h4>🧹 기타</h4>
                <table>
                    <tr>
                        <th>기능</th>
                        <th>설명</th>
                    </tr>
                    <tr>
                        <td>서식 지우기</td>
                        <td>선택한 텍스트의 모든 서식을 초기화</td>
                    </tr>
                    <tr>
                        <td>위첨자 / 아래첨자</td>
                        <td>X² 또는 H₂O 같은 수식 표현</td>
                    </tr>
                </table>

                <div class="tip-box">
                    <strong>💡 TIP</strong><br>
                    • 텍스트를 드래그한 후 툴바 버튼을 클릭하면 선택 영역에만 서식이 적용됩니다.<br>
                    • 이미지는 클립보드에서 Ctrl+V로 붙여넣기도 가능합니다.<br>
                    • 실행 취소는 Ctrl+Z, 다시 실행은 Ctrl+Y 입니다.
                </div>
            </div>
        </div>
    </div>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
    <script src="https://cdn.jsdelivr.net/npm/quill@2.0.3/dist/quill.js"></script>
    <script src="/js/crm/procedureReview/procedureReviewUpdate.js"></script>
</th:block>

</html>