<!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_consulting_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_sub_consulting.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">고객 정보</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" class="on">상담 차트</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">
                        <div class="info_box_top">
                            <p class="page_title">차트 상세정보</p>
                            <button class="print_btn">차트 인쇄</button>
                        </div>

                        <div class="info_box">
							<div class="info">
								<div class="form_box">
									<p class="chart_numder">차트번호 U20220405-0000-A1</p>
									<p class="patient_name">김쁘띠</p>
									<p class="patient_info">(
										<span>9000101</span>,
										<span>여</span>,
										<span>KR</span>,
										<span>010-9999-9999</span>
										)
									</p>

									<div class="textarea_box">
										<label>특이 사항</label>
										<p class="title_info">*시술 및 약물 관련 특이사항</p>
										<textarea placeholder="특정 약품 알러지 있으심"></textarea>
									</div>

									<div class="chart_info_box">
										<label>차트 내용</label>
										<div class="right_text">
											<p class="first">
												작성일자
												<span>2023-01-01</span>
											</p>
											<p>
												작성자
												<span>김상담</span>
											</p>
										</div>

										<ul class="chart_info_list">
											<li>
												<div class="info_right">
													<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" id="">
															<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="info_left">
													<label>시술(상품)명</label>
													<div class="search_box">
														<img src="../image/search_B.svg" alt="search"/>
														<input class="search_input" type="text" placeholder="루비레이저" disabled>
													</div>
												</div>
											</li>
											<li>
												<div class="info_right">
													<label>담당의사</label>
													<div class="select_box dropdown">
														<button class="label" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dr.김피부</button>
														<ul class="select_option_list dropdown-menu" id="">
															<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="info_left correction">
													<label>진료 예약</label>
													
													<button>예약수정</button>
													<input type="text" placeholder="2023-01-02, 10:00" disabled>
												</div>
											</li>
											<li class="single">
												<label>사전 진행 항목</label>
												
												<div class="check_list">
													<div>
														<label for="progress1" class="chk_box">
															<input type="checkbox" name="progress" id="progress1" checked="checked">
															<span class="on"></span>
															피부
														</label>
													</div>
													<div>
														<label for="progress2" class="chk_box">
															<input type="checkbox" name="progress" id="progress2">
															<span class="on"></span>
															x-ray
														</label>
													</div>
													<div>
														<label for="progress3" class="chk_box">
															<input type="checkbox" name="progress" id="progress3">
															<span class="on"></span>
															피부
														</label>
													</div>
												</div>
											</li>
											<li class="single">
												<label>상세 내용</label>
												<div class="textarea_box">
													<textarea class="area" placeholder="레이져 시술" disabled></textarea>
												</div>
											</li>
											<li>
												<div class="button_box">
													<button class="modify_btn">수정</button>
												</div>
											</li>
										</ul>
									</div>
								</div>
							</div>
                        </div>
                    </div>
                </div> 
            </section>
        </div>

		<script>
			/****************************************************************************
			* datePicker 1개일때
			****************************************************************************/
			function fn_datePicker(){
				$("#userCertificateLicenseDate0").datetimepicker({
					allowInputToggle: true,
					format: 'YYYY-MM-DD'
				});
				
			}
			

			/****************************************************************************
			* datePicker 2개일때
			****************************************************************************/
			function fn_searchDatePicker(){
				$("#userCareerStartDate0").datetimepicker({
					allowInputToggle: true,
					format: 'YYYY-MM-DD'
					});
				
					$("#userCareerEndDate0").datetimepicker({
					allowInputToggle: true,
					useCurrent: false, //Important! See issue #1075
					format: 'YYYY-MM-DD'
				});
					
			}

			$(function(){
				fn_searchDatePicker();
				fn_datePicker();
			});


			// modify_btn 클릭 시 .select_box 활성화
			$('.modify_btn').on('click', function() {
				$('.select_box').addClass('modify_active');
				$('.chart_info_list').addClass('modify');
				$('.search_input').prop('disabled', false);
				$('.area').prop('disabled', false);
				$(this).text('저장');
			});

			// 옵션 선택 이벤트
			$('.option_list_item').on('click', function() {
				var selectedOption = $(this).text();
				$(this).closest('.select_box').find('.label').text(selectedOption);
			});

		</script>
    </body>
</html>