<!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_payment.css">
		<link rel="stylesheet" href="../css/modal_customer_sub_payment.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">고객 정보</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" class="on">수납 내역</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="filter_box">
                            <div class="form_box">
                                <!-- 캘린더input -->
								<div class="select_box first 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">최근 30일</li>

										<li class="option_list_item">최근 90일</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>

										<li class="option_list_item">지난달</li>
									</ul>
								</div>
                                <div class="calendar_box">
                                    <div class="date_box">
                                        <img src="../image/calendar.svg" alt="calendar"/>
                                        <input type="date" class="date_picker" id="hidden_userCareerStartDate0">
                                    </div>

                                    <span class="slash">-</span>

                                    <div class="date_box last">
                                        <img src="../image/calendar.svg" alt="calendar"/>
                                        <input type="date" class="date_picker" id="hidden_userCareerEndDate0">
                                    </div>
                                </div>

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

                                <!-- 이름input -->
                                <div class="search_list">
                                    <div class="search_box">
                                        <img src="../image/search_G.svg" alt="search"/>
                                        <input type="text" placeholder="고객, 시술명">

                                        <div class="search_list"></div><!-- 검색내역 나오는곳 -->
                                    </div>
                                    <button class="search_btn">조회</button>
                                </div>
                            </div>

                            <div class="right_btn_box">
                                <button class="receive_btn">수납</button>
                                <button class="cancel_btn">수납 취소</button>
                                <button class="download_btn">
                                    <img src="../image/download.svg" alt="내려받기"/>
                                    <p>내려받기</p>
                                </button>
                            </div>
                        </div>
                        <div class="table_box">
                            <p class="dlatl" data-toggle="modal" data-target=".payment_detail_modal" style="transition: all 0.2s ease-in-out 0s;">테이블 상세모달연결</p>
                        </div>
						
						<!-- 페이지게이션 -->
						<div class="page_box">
							<nav aria-label="Page navigation" class="navigation">
								<ul class="pagination" id="pagination">
									<li class="page-item prev disabled">
										<a href="#" class="page-link">
											<img src="../image/page_navigation_arrow.svg" alt="prev"/>
										</a>
									</li>
									
									<li class="page-item active">
										<a href="#" class="page-link">1</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">2</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">3</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">4</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">5</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">6</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">7</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">8</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">9</a>
									</li>
									
									<li class="page-item">
										<a href="#" class="page-link">10</a>
									</li>
									
									<li class="page-item next">
										<a href="#" class="page-link">
											<img src="../image/page_navigation_arrow.svg" alt="next"/>
										</a>
									</li>
								</ul>
							</nav>
						</div>
                    </div>
                </div>
            </section>
        </div>

        <!-- 결제모달 -->
		<div class="modal payment_detail_modal fade in" id="" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<p clsss="title">결제</p>
					</div>
		
					<div class="modal-body">
						<div class="detail_box">
							<ul>
                                <li>
                                    <label>수납방법</label>
                                    <p class="pbold">신용카드</p>
                                </li>
                                <li>
                                    <label>결제 총액</label>
                                    <p class="pbold"><span>3,330,000</span>원</p>
                                </li>
                                <li>
                                    <label>기본수납 금액</label>
                                    <p>3,000,000</p>
                                </li>
                                <li>
                                    <label>수납 추가 금액</label>
                                    <p>330,000</p>
                                </li>
                                <li>
                                    <label>할부기간</label>
                                    <p>일시불</p>
                                </li>
                                <li>
                                    <label>카드번호</label>
                                    <p>000-0000-000</p>
                                </li>
                                <li>
                                    <label>승인번호</label>
                                    <p>00000000</p>
                                </li>
                                <li>
                                    <label>단말기번호</label>
                                    <p>00000000</p>
                                </li>
                                <li>
                                    <label>카드종류</label>
                                    <p>BC카드</p>
                                </li>
                            </ul>
                        </div>

                        <div class="table_box">
                            <p class="title">수납 추가 내용</p>
                            <table>
                                <thead>
                                    <tr>
                                        <th>진료일시</th>
                                        <th>진료유형</th>
                                        <th>금액</th>
                                        <th>vat</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-06-18</td>
                                        <td>비만주사-메쉬다</td>
                                        <td>300,000</td>
                                        <td>30,000</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <ul>
                            <li class="textarea_box">
                                <label>수납메모</label>
                                <textarea placeholder="미수 추가 수납"></textarea>
                            </li>
                            <li>
                                <label>총 수납금액</label>
                                <p class="pbold">3,330,000</p>
                            </li>
                            <li>
                                <label>미수금</label>
                                <p>0</p>
                            </li>
                        </ul> 
					</div>
				</div>
			</div>
		</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();
			});



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

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