<!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">

<head>
	<th:block th:replace="/web/include/head :: layout_head"></th:block>
	<th:block layout:fragment="layout_css">
		<link rel="stylesheet" href="/css/kiosk/agreement.css">
	</th:block>
</head>

<th:block layout:fragment="layout_top_script">
	<script src="/js/kiosk/common.js"></script>
	<script src="/js/web/signature_pad.js"></script>
	<!-- Common Sign Logic if needed, typically inlined or external -->
	<script src="/js/web/common_sign.js"></script>
</th:block>

<th:block layout:fragment="layout_content">
	<div id="agreementInsertModal" class="kiosk-container">

		<header class="page-header">
			<h1 class="title">동의서 작성</h1>
		</header>

		<main class="page-body">
			<div class="form-grid-layout" style="grid-template-columns: 350px 1fr;">

				<!-- Left Column: Settings -->
				<section class="form-section-card">
					<div class="section-title">기본 설정</div>

					<div class="form-row">
						<label>동의서 선택</label>
						<div class="select_box dropdown">
							<button class="label" data-toggle="dropdown">선택하세요</button>
							<input type="hidden" id="modalAgreementType" name="modalAgreementType">
							<ul class="select_option_list dropdown-menu">
								<!-- Options will be populated or static -->
								<li class="option_list_item"><span style="display:none;">C</span><input type="hidden"
										name="comboId" value="C">이용약관동의서</li>
								<li class="option_list_item"><span style="display:none;">F</span><input type="hidden"
										name="comboId" value="F">미성년자 시술동의서</li>
								<li class="option_list_item"><span style="display:none;">E</span><input type="hidden"
										name="comboId" value="E">문진표</li>
							</ul>
						</div>
					</div>

					<div class="form-row" style="margin-top:20px;">
						<label>고객 정보</label>
						<table class="info-table">
							<tr>
								<th>성명</th>
								<td>
									<p class="userName"></p><input type="hidden" name="modalUserName">
								</td>
							</tr>
							<tr>
								<th>생년월일</th>
								<td>
									<p class="birthday"></p><input type="hidden" name="modalBirthday">
								</td>
							</tr>
							<tr>
								<th>연락처</th>
								<td>
									<p class="phoneNumber"></p><input type="hidden" name="modalPhoneNumber">
								</td>
							</tr>
						</table>
					</div>
				</section>

				<!-- Right Column: Form Content -->
				<section class="form-section-card" style="position:relative;">
					<div class="section-title">동의서 내용</div>

					<!-- Form Container -->
					<div class="agreement-content">
						<!-- C: Terms -->
						<div class="print_form" style="display:none;">
							<h3>이용약관 동의서</h3>
							<div class="terms_box"
								style="height:300px; overflow-y:auto; background:#f9f9f9; padding:10px; border:1px solid #ddd;">
								<p><strong>제1조 (목적)</strong><br>본 약관은...</p>
								<!-- Content truncated for brevity, would contain full text -->
							</div>
							<div class="check_box" style="margin-top:10px;">
								<label><input type="checkbox" name="modalAgree3Yn" value="Y"> 위 내용을 모두 확인하였으며 이에
									동의합니다.</label>
							</div>
							<div class="signPad signature-box" style="margin-top:20px;">
								<div class="signature-placeholder">서명해 주세요</div>
								<canvas></canvas>
							</div>
						</div>

						<!-- F: Minor -->
						<div class="print_form" style="display:none;">
							<h3>미성년자 시술 동의서</h3>
							<div class="form-row">
								<label>보호자 성함</label>
								<input type="text" name="modalNokUserName">
							</div>
							<div class="signPad signature-box" style="margin-top:20px;">
								<div class="signature-placeholder">법정대리인 서명</div>
								<canvas></canvas>
							</div>
						</div>

						<!-- E: Questionnaire -->
						<div class="print_form" style="display:none;">
							<h3>문진표</h3>
							<div class="form-row">
								<label>현재 앓고 있는 질환이 있습니까?</label>
								<div class="radio-group">
									<label><input type="radio" name="modalQuestionnaireItem1" value="Y"> 예</label>
									<label><input type="radio" name="modalQuestionnaireItem1" value="N"> 아니오</label>
								</div>
							</div>
							<div class="signPad signature-box" style="margin-top:20px;">
								<div class="signature-placeholder">서 명</div>
								<canvas></canvas>
							</div>
						</div>

						<!-- Default Message -->
						<div class="initial-msg" style="text-align:center; padding-top:100px; color:#999;">
							왼쪽에서 동의서를 선택해주세요.
						</div>
					</div>
				</section>

			</div>
		</main>

		<footer class="page-footer">
			<button type="button" class="cancel_btn btnCancle">취소</button>
			<button type="button" class="registration_bth btnSave">작성 완료</button>
		</footer>

	</div>
</th:block>

<th:block layout:fragment="layout_script">
	<script type="text/javascript">
		$(document).ready(function () {
			agreementPage.init();
		});

		let agreementPage = {
			init: function () {
				this.setEvent();
				// Load user info (mock or param)
				this.searchUser();
			},
			setEvent: function () {
				$('.btnCancle').on('click', function () { history.back(); });
				$('.btnSave').on('click', function () { agreementPage.save(); });

				// Dropdown logic
				$('.dropdown-menu .option_list_item').on('click', function () {
					let txt = $(this).text();
					let val = $(this).find('input').val();

					// UI Update
					$(this).closest('.dropdown').find('.label').text(txt);
					$('#modalAgreementType').val(val);

					// Show Form
					$('.print_form').hide();
					$('.initial-msg').hide();

					let index = $(this).index(); // 0-based
					let form = $('.print_form').eq(index);
					form.show();

					// Init Signature Pad
					let canvas = form.find('canvas')[0];
					if (canvas) {
						resizeCanvas(canvas);
						new SignaturePad(canvas, { minWidth: 1, maxWidth: 2, penColor: "rgb(0,0,0)" });
					}
				});
			},

			searchUser: function () {
				// Demo: Set user info
				$('.userName').text('홍길동');
				$('.birthday').text('1990-01-01');
				$('.phoneNumber').text('010-1234-5678');
			},

			save: function () {
				let type = $('#modalAgreementType').val();
				if (!type) { modalEvent.warning("알림", "동의서를 선택해주세요."); return; }

				modalEvent.info("저장", "동의서를 저장하시겠습니까?", function () {
					// Save Logic mock
					modalEvent.success("완료", "저장되었습니다.");
				});
			}
		};

		function resizeCanvas(canvas) {
			var ratio = Math.max(window.devicePixelRatio || 1, 1);
			canvas.width = canvas.offsetWidth * ratio;
			canvas.height = canvas.offsetHeight * ratio;
			canvas.getContext("2d").scale(ratio, ratio);
		}
	</script>
</th:block>

</html>