<!DOCTYPE html>
<html lang="kr">
    <head> 
		<meta charset="utf-8" />

		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<meta name="keyword" content="HTML, meta, tag, element, reference">
		<meta name="description" content="HTML meta tag page">
		<meta name="author" content="NTSOFT">
		<meta name="description" content={props.description} data-react-helmet="true" />

		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
		<meta http-equiv="Cache-Control" content="No-Cache" />
		<meta http-equiv="pragma" content="No-cache" />
		<meta http-equiv="expires" content="0" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">

		<!-- sns미리보기 -->
		<meta property="og:type" content="website">
		<!-- <meta property="og:url" content="https://ntsoft.kr/"> -->
		<meta property="og:image" content="">
		<meta property="og:title" content="메이드유 CRM">
		<meta property="og:description" content="설명문구">

		<!-- 사이트등록및소유확인 -->
		<meta name="naver-site-verification" content="" />

		<title>메이드유 CRM</title>

		<!-- 파비콘 -->
		<link rel="shortcut icon" href="/image/favicon.ico" type="image/x-icon">
		<link rel="icon" href="/image/favicon.ico" type="image/x-icon">

		<!-- 베이스css -->
		<link rel="stylesheet" href="../bootstrap/bootstrap-3.4.1-dist/css/bootstrap.min.css">

		<!-- 적용css -->
		<link rel="stylesheet" href="../css/font.css?v1.1">
		<link rel="stylesheet" href="../css/common.css?v1.1">
		<link rel="stylesheet" href="../css/header.css?v1.1">
		<link rel="stylesheet" href="../css/customer_sub.css">
		<link rel="stylesheet" href="../css/modal.css?v1.1">
		<link rel="stylesheet" href="../css//jquery-ui.css">
		<link rel="stylesheet" href="../js/bootstrap-datetimepicker/bootstrap-datetimepicker.css">

		<!-- 베이스script -->
		<script src="../js/jquery.min.js"></script>
		<script src="../bootstrap/bootstrap-3.4.1-dist/js/bootstrap.bundle.min.js"></script>
		<script src="../bootstrap/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>

		<!-- 적용script -->
		<script src="../js/jquery-ui.js"></script>
		<script src="../js/data.js"></script>
		<script src="../js/bootstrap-datetimepicker/moment-with-locales.min.js"></script>
		<script src="../js/bootstrap-datetimepicker/ko.js"></script>
		<script src="../js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
	</head>
    <body>
        <div class="project_wrap">
            <!--상단네비-->
			<header class="header_section">
				<a href="0_home.html" class="logo_wrap">
					<img class="logo" src="../image/logo.svg" alt="logo"/>
					<span>메이드유 CRM</span>
				</a>
				
				<div class="search_wrap">
					<div class="search_box">
						<img src="../image/search_B.svg" alt="검색"/>
						<input type="text" id="name" placeholder="검색 (고객명, 연락처)">
					</div>

					<div class="btn_box">
						<button class="reservation_btn" data-toggle="modal" data-target=".reservation_modal" style="transition: all 0.2s ease-in-out 0s;">
							<img src="../image/reservation.svg" alt="예약"/>
							예약
						</button>

						<button data-toggle="modal" data-target=".receipt_modal" style="transition: all 0.2s ease-in-out 0s;">
							<img src="../image/receipt.svg" alt="바로접수"/>
							바로접수
						</button>
						
						<button class="last" data-toggle="modal" data-target=".new_patient_modal" style="transition: all 0.2s ease-in-out 0s;">
							<img src="../image/registration.svg" alt="신환등록"/>
							신환등록
						</button>
					</div>

					<div class="dropdown_box">
						<a class="enrollment_btn" href="#" aria-haspopup="true">
							<img src="../image/userActive.svg" alt="내정보"/>
							<p>박실장</p>
						</a>

						<ul class="dropdown_list" aria-label="submenu">
							<li>
								<a href="#reservation" data-toggle="modal" data-target="#reservation" style="transition: all 0.2s ease-in-out 0s;">
									<span>내정보</span>
								</a>
							</li>

							<li>
								<a href="#consulting" data-toggle="modal" data-target="#consulting" style="transition: all 0.2s ease-in-out 0s;">
									<span>로그아웃</span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</header>

            <!--오른쪽영역-->
            <section class="content_section">
                <!--왼쪽메뉴-->
				<ul class="menu_list">
					<li>
						<a href="home.html">
							<img src="../image/menu_1_off.svg" alt="병원현황"/>
							<span>병원현황</span>
						</a>
					</li>
					<li>
						<a href="customer.html" class="on">
							<img src="../image/menu_2_on.svg" alt="고객"/>
							<span>고객</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="../image/menu_3_off.svg" alt="수납"/>
							<span>수납</span>
						</a>
					</li>
					<li>
						<a href="stock.html">
							<img src="../image/menu_4_off.svg" alt="재고"/>
							<span>재고</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="../image/menu_5_off.svg" alt="통계"/>
							<span>통계</span>
						</a>
					</li>
					<li>
						<a href="hospital.html">
							<img src="../image/menu_6_off.svg" alt="원무"/>
							<span>원무</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="../image/menu_7_off.svg" alt="마케팅"/>
							<span>마케팅</span>
						</a>
					</li>
					<li>
						<a href="#">
							<img src="../image/menu_8_off.svg" alt="멤버십"/>
							<span>멤버십</span>
						</a>
					</li>
				</ul>

                <div class="hospital_wrap">
					<!-- 왼쪽 -->
					<div class="left_box">
                        <a href="customer.html" class="back"><img src='../image/right_arrow_B.svg' alt="back"/>고객 목록</a>
						<ul class="sub_menu_list">
							<li class="title_menu first">고객 상세정보</li>
                            <li><a href="customer_sub.html" class="on">고객 정보</a></li>
                            <li><a href="customer_sub_records.html">신체기록</a></li>
                            <li><a href="customer_sub_agreement.html">동의서</a></li>
                            <li class="title_menu">이용내역</li>
                            <li><a href="customer_sub_reservation.html">예약(진료) 내역</a></li>
                            <li><a href="customer_sub_payment.html">수납 내역</a></li>
                            <li><a href="customer_sub_consulting.html">상담 차트</a></li>
                            <li><a href="customer_sub_sisul.html">시술 차트</a></li>
                            <li><a href="customer_sub_membership.html">멤버십</a></li>
                            <li><a href="customer_sub_alarm.html">알림 내역</a></li>
						</ul>
					</div>

                    <!-- 센터쪽 -->
                    <div class="center_box">
                        <p class="page_title">고객 상세정보</p>

                        <div class="info_box">
							<div class="info">
								<p class="title">
									고객 정보
									<span>U20220405-0000</span>
								</p>
								<div class="form_box">
									<div class="input_box essential">
										<label>국적</label>
										<input type="text" placeholder="KR">
									</div>
									<div class="input_box essential">
										<label>성함</label>
										<input type="text" placeholder="김쁘띠">
									</div>
									<div class="input_box essential">
										<label>주민등록번호</label>
										<input type="text" placeholder="900000">
										<span class="division">-</span>
										<input type="text" placeholder="2******">
									</div>
									<div class="input_box essential">
										<label>여권번호</label>
										<input type="text" placeholder="여권번호">
									</div>
									<div class="input_box essential">
										<label>외국인등록번호</label>
										<input type="text" placeholder="123456">
										<span class="division">-</span>
										<input type="text" placeholder="2******">
									</div>
									<div class="input_box essential">
										<label>생년월일</label>
										<input type="text" placeholder="1995-05-05">
										<p class="identity">만 33세</p>
									</div>
									<div class="input_box essential">
										<label>성별</label>
										<div class="gender">
											<input type="radio" name="gender" id="female">
											<label for="female">여자</label>
										</div>
										<div class="gender">
											<input type="radio" name="gender" id="man">
											<label for="man">남자</label>
										</div>
									</div>
									<div class="input_box essential">
										<label>고객구분</label>
										<div class="select_box dropdown">
											<button class="label" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">선택</button>
											<ul class="select_option_list dropdown-menu">
												<li class="option_list_item"><img src="../image/fruit1.svg" alt="고객구분"></li>
												<li class="option_list_item"><img src="../image/fruit2.svg" alt="고객구분"></li>
												<li class="option_list_item"><img src="../image/fruit3.svg" alt="고객구분"></li>
											</ul>
										</div>
									</div>
									<div class="input_box essential">
										<label>연락처</label>
										<input type="text" placeholder="010-0000-0000">
										<label class="sub_label">보조 연락처</label>
										<input type="text" placeholder="010-0000-0000">
									</div>
									<div class="input_box">
										<label>이메일</label>
										<input type="text" placeholder="user">
										<span class="division">@</span>
										<input type="text" placeholder="gmail.com">
									</div>
									<div class="input_box">
										<label>주소</label>
										<input class="address" type="text" placeholder="(12345)서울시 강남구 논현로 1">
										<button class="address_btn">주소 찾기</button>
										<input class="address_detail" type="text" placeholder="쁘띠오피스텔101호">
									</div>
									<p class="title">멤버십 정보</p>
									<div class="input_box">
										<label>계정명</label>
										<input type="text" placeholder="user@gmail.com">
									</div>
									<p class="title">기타 정보</p>
									<div class="input_box">
										<label>관심진료</label>
										<div class="select_box dropdown">
											<button class="label" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">관심진료 선택</button>
											<ul class="select_option_list dropdown-menu">
												<li class="option_list_item">피부</li>
												<li class="option_list_item">쁘띠</li>
												<li class="option_list_item">비만</li>
												<li class="option_list_item">제모</li>
												<li class="option_list_item">기타</li>
											</ul>
										</div>
									</div>
									<div class="input_box two">
										<div>
											<label>방문경로</label>
											<div class="select_box dropdown">
												<button class="label" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">방문경로</button>
												<ul class="select_option_list dropdown-menu">
													<li class="option_list_item">워킹</li>
													<li class="option_list_item">네이버</li>
													<li class="option_list_item">SNS</li>
													<li class="option_list_item">홈페이지</li>
													<li class="option_list_item">카카오플러스친구</li>
													<li class="option_list_item">지인소개</li>
												</ul>
											</div>
										</div>
										<div class="last">
											<label>추천인</label>
											<div class="search_box">
												<button class="search_btn"><img src="../image/search_B.svg" alt="검색"/></button>
												<input type="text" placeholder="추천인 검색">
											</div>
										</div>
									</div>
									<p class="title">특이 사항 <span>*시술 및 약물 관련 특이사항 기록</span></p>
									<div class="input_box">
										<textarea placeholder="특정 약품 알러지 있으심."></textarea>
									</div>
									<p class="title">고객 메모</p>
									<div class="input_box">
										<textarea placeholder="우선 예약 필요 고객"></textarea>
									</div>
									<div class="button_box">
										<button>수정</button>
									</div>
								</div>
							</div>

							<div class="body_info_box">
								<p class="title">고객 정보</p>
								<a href="customer_sub_records.html">신체 기록 확인<img src='../image/right_arrow_B.svg' alt="버튼"/></a>
								<div class="body_info">
									<p>2020-12-00 기준</p>
									<ul>
										<li>
											<p>키</p>
											<p>165cm</p>
										</li>
										<li>
											<p>몸무게</p>
											<p>60kg</p>
										</li>
										<li>
											<p>골격근량</p>
											<p>39.4kg</p>
										</li>
										<li>
											<p>체지방량</p>
											<p>17.8kg</p>
										</li>
										<li>
											<p>체지방률</p>
											<p>20.4%</p>
										</li>
										<li>
											<p>BMI</p>
											<p>29.6kg/m2</p>
										</li>
									</ul>
								</div>
							</div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
		<script>
			// 옵션 선택 이벤트
			$('.option_list_item').on('click', function() {
				var selectedOption = $(this).text();
				$(this).closest('.select_box').find('.label').text(selectedOption);
			});
		</script>
    </body>
</html>