<!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>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>메이드유 CRM</title>

    <!-- jQuery -->
    <script src="/js/web/jquery.min.js"></script>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
	<script src="/js/web/jquery-ui.js"></script>
	<script src="/js/web/signature_pad.js"></script>
	

    <!-- Choices.js -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css">
    <script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

    <!-- CSS -->
    <link rel="stylesheet" href="/css/web/font.css">
    <link rel="stylesheet" href="/css/kiosk/new-patient.css">
	
	<!--KAKAO 주소API-->
	<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
</head>

<th:block layout:fragment="layout_top_script">
    <script src="/js/kiosk/new-patient.js"></script>
	
</th:block>
<!--<th:block th:replace="/web/include/modal :: layout_modal"></th:block>-->

<th:block layout:fragment="layout_content">
    <div id="newPatientForm" class="new-patient-container">

        <!-- Header -->
        <header class="page-header">
            <h1 class="title">신규 고객 등록</h1>
			<button type="button" id="btnFillTestData" style="padding: 5px 15px; background: #ff4757; color: #fff; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: bold;">
			        테스트 데이터 채우기
			    </button>
        </header>

        <!-- Body -->
        <main class="page-body">
            <div class="form-grid-layout">

                <!-- Column 1: Basic Info -->
                <section class="form-section-card col-card">
                    <div class="section-title">기본 정보<span id="msg-basic" class="validation-msg"></span></div>
					<!-- Name -->
                    <div class="form-row">
                        <label class="required">고객명</label>
                        <input type="text" name="modalUserName" placeholder="이름을 입력하세요" />
                    </div>
					<!-- Nationality -->
                    <div class="form-row">
                        <label class="required">국적</label>
                        <select id="selectNationality" name="nationality">
                            <option value="">국적 선택</option>
                        </select>
                    </div>
					
					<div class="form-row">
                        <label class="required">주민등록번호</label>
                        <div class="split-inputs">
                            <input name="modalUserRrn1" type="text" placeholder="000000" maxlength="6" />
                            <span class="split-divider">-</span>
                            <input name="modalUserRrn2" type="password" placeholder="0000000" maxlength="7" />
                        </div>
                    </div>
					<!-- Identification (Dynamic) -->
                    <div class="form-row foreigner_box">
                        <label class="required">여권번호</label>
                        <div class="passport_number_box">
                            <input name="modalUserPno" type="text" placeholder="여권번호 입력" />
                        </div>
                    </div>
					<!-- Birthday -->
					<div class="form-row">
					    <label for="modalBirthday" class="required">생년월일</label>
					    <div class="date-input-wrapper">
					        <input 
					            type="text" 
					            id="modalBirthday" 
					            name="modalBirthday" 
					            placeholder="YYYYMMDD"
					            maxlength="10"
					        />
					        <span class="age-text txtAge">만 0세</span>
					    </div>
					</div>

                    <!-- Gender -->
                    <div class="form-row">
                        <label>성별</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" name="modalGender" id="genderF" value="F" checked />
                                <label for="genderF">여자</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" name="modalGender" id="genderM" value="M" />
                                <label for="genderM">남자</label>
                            </div>
                        </div>
                    </div>
					
					<div class="form-row">
                        <label class="required">연락처</label>
                        <input name="modalPhoneNumber" type="tel" placeholder="010-0000-0000" />
                    </div>
					
					<div class="form-row">
					    <label for="address" class="required">주소</label>
					    <div class="address-input-group" style="display: flex; gap: 8px;">
					        <input id="address" name="address" type="text" placeholder="주소를 검색하세요" readonly style="flex: 1; cursor: pointer;" />
					        <button type="button" id="btnSearchAddress" class="btn-small" style="padding: 0 15px; background: #333; color: #fff; border-radius: 4px;">검색</button>
					    </div>
					    <input id="addressDtl" name="addressDtl" type="text" placeholder="상세 주소를 입력하세요" style="margin-top: 8px;" />
					</div>
					
					<div class="form-row">
                        <label for="email">이메일</label>
                        <input id="email" name="email" type="text" placeholder="imadeu@naver.com" />
                    </div>
                </section>

                <!-- Column 2: Contact Info -->
                <section class="form-section-card col-card">
                    <div class="section-title">개인정보 수집 및 이용동의<span id="msg-consent" class="validation-msg"></div>
					
					<div class="form-row checkbox-row">
					    <label for="agreePrivacy">개인정보 수집 및 이용안내</label>
					    <div class="checkbox-line">
					        <input type="checkbox" id="agreePrivacy" name="agreePrivacy" onclick="return false;" />
					        <a href="#" class="consent-link" data-type="agreePrivacy">개인정보 수집 및 이용안내 동의서 보기</a>
					    </div>
					</div>

					<div class="form-row checkbox-row">
					    <label for="agreeProcedure">시술동의서</label>
					    <div class="checkbox-line">
					        <input type="checkbox" id="agreeProcedure" name="agreeProcedure" onclick="return false;" />
					        <a href="#" class="consent-link" data-type="agreeProcedure">시술 동의서 보기</a>
					    </div>
					</div>

					<div class="form-row checkbox-row">
					    <label for="agreeTerms">이용약관동의서</label>
					    <div class="checkbox-line">
					        <input type="checkbox" id="agreeTerms" name="agreeTerms" onclick="return false;" />
					        <a href="#" class="consent-link" data-type="agreeTerms">이용약관 동의서 보기</a>
					    </div>
					</div>

					<div class="form-row checkbox-row">
					    <label for="refusePhoto">사진촬영동의서</label>
					    <div class="checkbox-line">
					        <input type="checkbox" id="refusePhoto" name="refusePhoto" onclick="return false;" />
					        <a href="#" class="consent-link" data-type="refusePhoto">사진촬영 동의서 보기</a>
					    </div>
					</div>

                    <!-- SMS -->
                    <div class="form-row">
                        <label>SMS 수신여부</label>
                        <div class="radio-group">
                            <div class="radio-item">
                                <input type="radio" name="modalSmsYn" id="smsY" value="Y" checked />
                                <label for="smsY">예</label>
                            </div>
                            <div class="radio-item">
                                <input type="radio" name="modalSmsYn" id="smsN" value="N" />
                                <label for="smsN">아니오</label>
                            </div>
                        </div>
                    </div>
                </section>

                <!-- Column 3: Additional Info -->
                <section class="form-section-card col-card">
                    <div class="section-title">기타 정보<span id="msg-etc" class="validation-msg"></div>

                    <!-- Channel -->
                    <div class="form-row">
                        <label>방문경로</label>
                        <select id="selectChannel" name="channel">
                            <option value="">방문경로 선택</option>
                        </select>
                    </div>

                    <!-- Recommender -->
                    <div class="form-row">
                        <label for="introName">추천인</label>
                        <div class="searchIntroUser" style="position:relative; cursor:pointer;">
                            <input type="text" id="introName" name="introName" placeholder="추천인 성함을 입력해주세요" style="cursor:pointer; padding-right:40px;" />
                        </div>
                    </div>

                    <!-- Etc -->
                    <div class="form-row">
                        <label>특이 사항 (시술/약물)</label>
                        <textarea name="modalEtc" placeholder="특이사항을 입력하세요"></textarea>
                    </div>

                </section>

            </div>
        </main>

        <!-- Footer -->
        <footer class="page-footer">
            <!-- Use project standard classes -->
            <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">
    
</th:block>

</html>