<!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/ContentsBbsUpd.css">
	<link rel="stylesheet" href="/css/web/grid.css?v1.1">
	<link rel="stylesheet" href="/css/web/datepicker-fix.css">
</th:block>
<th:block layout:fragment="layout_top_script">
	<!-- Pagination usage removed -->
	<script>
		let menuClass = "[[${param.menuClass}]]" == "" ? "" : "[[${param.menuClass}]]";

		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 categoryDivCd = "[[${param.categoryDivCd}]]";
		let categoryNo = "[[${param.categoryNo}]]";
		let postNo = "[[${param.postNo}]]";
		let categorytitle = "[[${title}]]";

		const CDN_URL = "[[${@environment.getProperty('url.cdn')}]]";

	</script>
</th:block>
<th:block layout:fragment="layout_content">
	<!-- 센터쪽 -->
	<div class="center_box">
		<p class="page_title">[[${title}]]</p>

		<!-- 테이블 -->
		<div class="content_box">
			<div class="update-container">
				<!-- Left Panel: Data Forms -->
				<div class="left-panel">
					<!-- Row 1: Category & Title -->
					<div class="form-grid-row">
						<div class="form-group" style="flex: 0 0 150px;">
							<label>카테고리</label>
							<select th:name="category" th:disabled="true">
								<option value="">선택하세요</option>
								<option th:each="item : ${category}" th:value="${item['categoryNo']}"
									th:text="${item['categoryNm']}"></option>
							</select>
							<input type="hidden" id="categoryNo" />
						</div>
						<div class="form-group">
							<label>제목</label>
							<input type="text" id="title" placeholder="제목을 입력해주세요." />
						</div>
					</div>

					<!-- Row 2: Content & Order -->
					<div class="form-grid-row">
						<div class="form-group" style="flex: 1;">
							<label>내용</label>
							<input type="text" id="content" placeholder="내용을 입력해주세요." />
						</div>
						<div class="form-group" style="flex: 0 0 70px;">
							<label>출력순서</label>
							<input type="text" id="ordNo" />
						</div>
					</div>

					<!-- Row 3: Hashtag & Old ID -->
					<div class="form-grid-row">
						<div class="form-group">
							<label>해쉬태그</label>
							<input type="text" id="hashtag" placeholder="해쉬태그를 입력해주세요." />
						</div>
						<div class="form-group">
							<label>OLD CRM 연동ID</label>
							<input type="text" id="oldCrmItemId" placeholder="OLD_CRM_ITEM_ID" />
						</div>
					</div>

					<!-- Date Selection (Event Only) -->
					<div class="form-grid-row" id="dateSelectionRow" style="display:none;">
						<div class="form-group">
							<label>시작일</label>
							<input type="text" id="eventStartDt" placeholder="YYYY-MM-DD" readonly />
						</div>
						<div class="form-group">
							<label>종료일</label>
							<input type="text" id="eventEndDt" placeholder="YYYY-MM-DD" readonly />
						</div>
					</div>

					<!-- Row 4: Treatment Grid -->
					<div class="grid-section">
						<div class="grid-header">
							<p>시술선택</p>
							<div>
								<button class="add_btn" onclick="javascript:listOpen();"
									style="border:none; background:none; cursor:pointer;">
									<img src="/image/web/add.svg" alt="추가">
								</button>
								<button class="add_btn" onclick="javascript:fn_removeRow();"
									style="border:none; background:none; cursor:pointer; margin-left: 5px;">
									<img src="/image/web/subtract.svg" alt="삭제">
								</button>
							</div>
						</div>
						<div class="custom-grid-container">
							<table class="treatment-table">
								<colgroup>
									<col style="width: 50px;">
									<col style="width: 250px;">
									<col style="width: 120px;">
									<col style="width: 120px;">
								</colgroup>
								<thead>
									<tr>
										<th>
											<input type="checkbox" id="checkAll" onclick="fn_checkAll(this)">
										</th>
										<th>시술명</th>
										<th>가격</th>
										<th>할인가</th>
									</tr>
								</thead>
								<tbody id="treatmentListBody">
									<!-- Rows will be added here dynamically -->
								</tbody>
							</table>
						</div>
					</div>

					<!-- Bottom Buttons -->
					<div class="bottom-actions">
						<button class="btn-basic btnPreview" onclick="fn_openPreview();"
							style="width: 120px; height: 36px; border-radius: 4px; background: #fff; color: #333; border: 1px solid #ccc; margin-right: auto;">미리보기</button>
						<button class="registration_btn btnSave"
							style="width: 80px; height: 36px; border-radius: 4px; background: #3985EA; color: white;">수정</button>
						<button class="cancel_btn btnCancle"
							style="width: 80px; height: 36px; border-radius: 4px;">취소</button>
					</div>
				</div>

				<!-- Right Panel: Images -->
				<div class="right-panel">
					<!-- Thumbnail Section -->
					<div class="panel-section">
						<div class="top-label">
							<span>썸네일 첨부파일</span>
							<div>
								<label for="file" class="file_btn" style="cursor: pointer;"><img
										src="/image/web/add.svg" alt="파일찾기"></label>
								<button id="delete_btn"
									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
							</div>
						</div>
						<div class="img-preview-wrapper img_box">
							<img id="thumbnailImg" src="" />
						</div>
						<input type="file" id="file" accept="image/jpeg, image/jpg, image/png" style="display: none;"
							multiple>
						<div class="photo_guide"
							style="padding: 10px; margin-top: 10px; background: #f8f9fa; border-radius: 5px; font-size: 13px; color: #555;">
							<p style="margin: 0;">※ 권장 사이즈: <strong>800 x 450 px</strong></p>
						</div>

						<label style="margin-top: 10px; font-size: 13px; font-weight: 700;">썸네일 하단글</label>
						<textarea id="thumbnailBottomTxt" placeholder="썸네일 하단글을 입력해주세요."></textarea>
					</div>

					<!-- Content File Section -->
					<div class="panel-section">
						<div class="top-label">
							<span>컨텐츠 첨부파일</span>
							<div>
								<label for="content_file" class="file_btn" style="cursor: pointer;"><img
										src="/image/web/add.svg" alt="파일찾기"></label>
								<button id="content_delete_btn"
									style="border:none; background:none; cursor:pointer; margin-left:5px; font-size:12px; color:#999;">삭제</button>
							</div>
						</div>
						<div class="img-preview-wrapper file_box">
							<!-- Using same class for consistent styling -->
							<img id="contentsImg" src="" />
						</div>
						<input type="file" id="content_file" style="display: none;" placeholder="첨부파일을 입력해주세요." />
						<div class="photo_guide"
							style="padding: 10px; margin-top: 10px; background: #f8f9fa; border-radius: 5px; font-size: 13px; color: #555;">
							<p style="margin: 0;">※ 권장 사이즈: <strong>2000 x XXXX px</strong></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<form id="excelForm" method="POST" target="_blank"></form>
</th:block>
<th:block layout:fragment="layout_popup">
</th:block>
<th:block layout:fragment="layout_script">
	<script src="/js/web/contentsBbs/ContentsBbsUpd.js"></script>
	<script src="/js/web/contentsBbs/ContentsBbsPop.js"></script>
</th:block>

</html>