<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
	response.setHeader("Pragma", "No-cache");
	response.setHeader("Cache-Control", "no-cache");
	response.setHeader("Expires", "0");
%>
<html>
<head>
	<title>Q&A 문의</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<jsp:include page="/jsp/common/include/css.jsp"/>
	<jsp:include page="/jsp/common/include/script.jsp"/>
	<style>
		.inquiry-section {
			margin-bottom: 15px;
			border: 1px solid #e0e0e0;
			padding: 20px;
			border-radius: 5px;
		}

		.response-section {
			margin-bottom: 30px;
			border: 1px solid #e0e0e0; /* 동일한 박스 스타일 */
			padding: 20px;
			border-radius: 5px;
		}

		.section-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 2px solid #e0e0e0; /* 제목 아래 줄 긋기 */
		}

		.info-row {
			margin-bottom: 10px;
			display: flex;
		}

		.info-label {
			font-weight: bold;
			width: 80px;
		}

		.info-content {
			flex: 1;
			padding-left: 5px;
			border-radius: 4px;
		}

		#responseDetail {
			width: 100%;
			min-height: 200px;
		}

		.required-mark {
			color: red;
			margin-left: 2px;
			font-weight: bold;
		}
	</style>
	<script language="javascript">
		var url = '<c:url value="/onl/apim/portalinquiry/portalInquiryMan.json" />';
		var url_view = '<c:url value="/onl/apim/portalinquiry/portalInquiryMan.view" />';
		var file_download = '<c:url value="/file/download.do" />';

		function decodeHTMLEntities(text) {
			var textArea = document.createElement('textarea');
			textArea.innerHTML = text;
			return textArea.value;
		}

		function detail(key) {
			$.ajax({
				type: "POST",
				url: url,
				dataType: "json",
				data: {cmd: 'DETAIL', id: key},
				success: function (data) {
					$("#id").val(key);
					$("#inquirySubject").text(data.inquirySubject);
					$("#inquiryDetail").html(data.inquiryDetail);
					$("#inquiryStatus").text(data.inquiryStatus === 'PENDING' ? '문의중' : '답변완료');
					$("#inquirer").text(data.inquirer.userName);
					$("#createdDate").text(timeStampFormat(data.createdDate));
					$("#responder").text(data.responderName || '');
					$("#responseDate").text(timeStampFormat(data.responseDate));

					var decodedContent = decodeHTMLEntities(data.responseDetail);
					$("#responseDetail").summernote('code', decodedContent || '');


					// 첨부 파일 표시
					displayAttachFiles(data.fileInfo);

				},
				error: function (e) {
					alert(e.responseText);
				}
			});
		}

		$(document).ready(function () {
			var returnUrl = getReturnUrlForReturn();
			var key = "${param.id}";

			$('#responseDetail').summernote({
				height: 200,
				toolbar: [
					['style', ['style']],
					['font', ['bold', 'underline', 'clear']],
					['color', ['color']],
					['para', ['ul', 'ol', 'paragraph']],
					['table', ['table']],
					['insert', ['link']],
					['view', ['codeview', 'help']]
				],
				callbacks: {
					onInit: function () {
						$('.note-editable').on('keydown', function (e) {
							if (e.keyCode === 8) {
								e.stopPropagation();
							}
						});
					}
				}
			});

			if (key) {
				detail(key);
			}

			$("#btn_modify").click(function () {
				if (!checkRequired("ajaxForm")) return;
				if (!confirm("<%= localeMessage.getString("common.checkSave")%>")) return;

				var postData = $('#ajaxForm').serializeArray();
				postData.push({name: "cmd", value: "INSERT"});

				$.ajax({
					type: "POST",
					url: url,
					data: postData,
					success: function (json) {
						alert("<%= localeMessage.getString("common.saveMsg") %>");
						goNav(returnUrl);
					},
					error: function (e) {
						alert(e.responseText);
					}
				});
			});

			$("#btn_previous").click(function () {
				goNav(returnUrl);
			});
		});

		function displayAttachFiles(fileInfo) {
			var $attachFileRow = $('#attachFileRow');
			var $attachFiles = $('#attachFiles');

			if (fileInfo && fileInfo.fileDetails && fileInfo.fileDetails.length > 0) {
				var attachFilesHtml = '';
				fileInfo.fileDetails.forEach(function(file) {
					attachFilesHtml += '<span style="cursor: pointer;" onclick="downloadFile(\'' + file.fileId + '\', \'' + file.fileSn + '\')">';
					attachFilesHtml += file.originalFileName + '.' + file.fileExtension;
					var iconPath = '${pageContext.request.contextPath}/images/icon_file.png';
					attachFilesHtml += '<img src="' + iconPath + '" style="vertical-align: middle; margin-left: 5px; height: 1.2em">';
					attachFilesHtml += '</span><br>';
				});
				$attachFiles.html(attachFilesHtml);
				$attachFileRow.show().css("cursor", "pointer");
			} else {
				$attachFileRow.hide();
			}
		}

		function downloadFile(fileId, fileSn) {
			window.location.href = file_download + '?fileId=' + fileId + '&fileSn=' + fileSn;
		}
	</script>
</head>
<body>
<div class="right_box">
<div class="content_top">
		<ul class="path">
			<li><a href="#">${rmsMenuPath}</a></li>
		</ul>
	</div>
	<div class="content_middle">
		<div class="search_wrap">
			<button type="button" class="cssbtn" id="btn_modify" level="W" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.modify") %></button>
			<button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
		</div>
		<div class="title">Q&A 상세</div>
		<form id="ajaxForm">
			<div class="inquiry-section">
				<div class="section-title" id="inquirySubject"></div>
				<div class="info-row">
					<div class="info-label">작성자</div>
					<div id="inquirer" class="info-content"></div>
				</div>
				<div class="info-row">
					<div class="info-label">작성일</div>
					<div id="createdDate" class="info-content"></div>
				</div>
				<div class="info-row" id="attachFileRow" style="display: none;">
					<div class="info-label">첨부파일</div>
					<div id="attachFiles" class="info-content"></div>
				</div>
				<div class="info-row">
					<div class="info-label">문의 내용</div>
					<div id="inquiryDetail" class="info-content" style="white-space: pre-line;"></div>
				</div>
			</div>

			<!-- 답변 작성 부분 -->
			<div class="response-section">
				<div class="info-row">
					<div class="info-label">답변자</div>
					<div id="responder" class="info-content"></div>
				</div>
				<div class="info-row">
					<div class="info-label">답변일</div>
					<div id="responseDate" class="info-content"></div>
				</div>
				<div class="info-row">
					<div class="info-label">답변 내용<span class="required-mark">*</span></div>
					<div style="flex: 1; padding-top: 5px;">
						<textarea id="responseDetail" name="responseDetail" data-required data-warning="답변 내용을 입력하여 주십시오."></textarea>
					</div>
				</div>
			</div>
			<input type="hidden" name="id" id="id">
		</form>
	</div>
</div>
</body>
</html>