<%@page import="user.UserDAO"%>
<%@page import="user.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>TKmall</title>
<style>
        /* 스타일링을 위한 CSS 코드 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-color: white;
            color: white;
            padding: 7px;
            text-align: right;
        }
        header a {
            color: #000;
            text-decoration: none;
            margin-left: 8px;
            font-size: 10px;
        }
    </style>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
	<% 
		String ID = null;
		if (session.getAttribute("ID") != null) {
			ID = (String) session.getAttribute("ID");
		}
		
		int USER_TYPE = 2;
		if (session.getAttribute("USER_TYPE") != null) {
			USER_TYPE = (int) session.getAttribute("USER_TYPE");
		}
		
		String NAME = null;
		if(session.getAttribute("NAME") != null) {
			NAME = (String) session.getAttribute("NAME");
		}
		
		UserDAO u = new UserDAO();
		User user = new User();
		user = u.userInfo(ID);
	%>
	<!-- 위의 헤더 -->
	<header>
	    <!-- 로그인 여부에 따라 다르게 표시 -->
	    <%	if(ID == null) { %>
	        <a href="login.jsp">로그인</a>
	        <a href="join.jsp">회원가입</a>
	        <a href="cart.jsp">장바구니</a>
	        
	     <% }else if(USER_TYPE == 1) { %>
	     	<a href="main.jsp"><%=NAME %>님 어서오세요</a>
	        <a href="logoutAction.jsp">로그아웃</a>
	        <a href="mypage.jsp">마이페이지</a>
	        <a href="cart.jsp">장바구니</a>
	     <%} else { %>
	    
	    <a href="main.jsp">관리자</a>
	    <a href="logoutAction.jsp">로그아웃</a>
	    <a href="site.jsp">사이트 관리</a>
	    <%} %>
	    &nbsp;&nbsp;&nbsp;
	</header>
	
	<!-- 로고와 검색창 -->
	<div class="container">
    	<div class="row align-items-center flex-row">
    	<!-- align-items-center은 로고와 검색창 위아래정렬 flex-row는 검색 단어 가로쓰기 변경-->
        	<div class="col-md-2">
            	<!-- 상위구획 1 : 로고 -->
            	<button type="button" class="btn" style="background-color: transparent; border: none;" onclick="location.href='main.jsp'">
            		<img src="./base/base_lo.png" class="img-fluid" alt="로고 이미지 손상">
          		</button>
        	</div>
        	<div class="col-md-1">
            	<!-- 상위구획 2 : 빈 공간 -->
            
        	</div>
        	<div class="col-md-6">
            	<!-- 상위구획 3 : 검색창 공간 -->
            	<form class="d-flex" role="search">
      				<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
      				<button class="btn btn-outline-primary" type="submit">
      					<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
  						<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
						</svg>
      				</button>
    			</form>
        	</div>
        	<div class="col-md-3">
            	<!-- 상위구획 2 : 빈 공간 -->
            
        	</div>
    	</div>
	</div>
	<br>
	<!-- 카테고리창 -->
	<div class="container">
	    <div class="row align-items-center flex-row">
	    	<div class="col-md-1">
	            <!-- 빈 공간 -->
	            
	        </div>
	        <div class="col-md-10">
				<nav class="nav nav-pills nav-fill" style="border: 1px solid #dddddd; padding: 10px; background-color: #0d6efd;">
				  <a class="nav-link" href="blade.jsp"  style="color: white;">블레이드</a>
				  <a class="nav-link" href="rub.jsp" style="color: white;">러버</a>
				  <a class="nav-link" href="ball.jsp" style="color: white;">공</a>
				  <a class="nav-link" href="others.jsp" style="color: white;">기타 용품</a>
				  <a class="nav-link" href="uniform.jsp" style="color: white;">의류/신발</a>
				  <a class="nav-link" href="table.jsp" style="color: white;">탁구대</a>
				  <a class="nav-link disabled"  style="color: white;"><!-- aria-disabled="true" >-->세트</a>
				</nav>
			</div>
			<div class="col-md-1">
	            <!-- 빈 공간 -->
	            
	        </div>
	    </div>
	</div>
		<br>
	<!-- 홍보이미지칸 -->
	<div class="container">
	    <div class="row align-items-center flex-row">
	    	<div class="col-md-1">
	            <!-- 빈 공간 -->
	            
	        </div>
	        <div class="col-md-10">
				<img src="./base/base_ma.jpg" class="img-fluid" alt="대표 이미지 손상">
			</div>
			<div class="col-md-1">
	            <!-- 빈 공간 -->
	            
	        </div>
	    </div>
	</div>
	<br>
	<!-- 본문칸 -->
	<div class="container">
	   	<div class="row align-items-start flex-row">
	   		<div class="col-md-1">
	           	<!-- 빈 공간 -->
	           
	       	</div>
	   		<div class="col-md-2 text-right" style=" border-radius: 8px; border: 1px solid #dddddd; padding: 3px; text-align: right; margin-right: 1pt;">
	           	<!-- 브랜드 -->
	           	<nav class="nav nav-pills text-center" style="border-radius: 8px; border: 1px solid #0d6efd; padding: 3px; background-color: #0d6efd;">
	           	  <a style="color: white;">브랜드</a><br>
				</nav>
				<div class="brand-box ">
                <a href="bf.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">ButterFly</a>
            	</div>
            	<div class="brand-box">
                <a href="dhs.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">DHS</a>
            	</div>
            	<div class="brand-box">
                <a href="dn.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">Donic</a>
            	</div>
            	<div class="brand-box">
                <a href="ns.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">Nexy</a>
            	</div>
            	<div class="brand-box">
                <a href="st.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">STiga</a>
            	</div>
            	<div class="brand-box">
                <a href="tb.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">Tibhar</a>
            	</div>
            	<div class="brand-box">
                <a href="nt.jsp" class="brand-link" style="color: black; margin-right:5pt; text-decoration: none;">Nittaku</a>
            	</div>
			</div>
	       	<div class="col-md-8" style="border: 1px solid #dddddd; padding: 3px;">
	       		<!-- 실 판매창 -->
	       		<br>
	       		<br>
	       		<!-- 회원가입 모듈 -->
	       		<form method="post" action="userUpAction.jsp">
	       		<div class="container overflow-hidden" margin-right: 1pt;>
				  <div class="row align-items-center flex-row">
				    <div class="col-10">
				     <div class="p-3 border bg-light">

				<div class="input-group input-group-sm mb-3">
  					<span class="input-group-text" id="inputGroup-sizing-sm">이름</span>
  					<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" maxlength="20" value="<%=user.getName() %>" name="name">
				</div>
				<div class="input-group input-group-sm mb-3">
  					<span class="input-group-text" id="inputGroup-sizing-sm">&nbsp;ID&nbsp;</span>
  					<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" maxlength="20" value="<%=user.getID() %>" name="ID" readonly>
				</div>
				<div class="input-group input-group-sm mb-3">
  					<span class="input-group-text" id="inputGroup-sizing-sm">PW</span>
  					<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" maxlength="20" name="password">
				</div>
				<div class="input-group input-group-sm mb-3">
  					<span class="input-group-text" id="inputGroup-sizing-sm">new PW</span>
  					<input type="text" class="form-control" aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm" maxlength="20" name="newpassword">
				</div>
				<div class="input-group input-group-sm mb-3">
					<span class="input-group-text" id="inputGroup-sizing-sm">new PW</span>
  					<input type="text" class="form-control" aria-label="Sizing example input" placeholder="Rewrite Password" aria-describedby="inputGroup-sizing-sm" maxlength="20" name="renewpassword">
				</div>
				<div class="input-group input-group-sm mb-3">
					<span class="input-group-text" id="inputGroup-sizing-sm">생년월일</span>
  					<input type="number" class="form-control" aria-label="Sizing example input" placeholder="8자리 숫자로 입력하세요" aria-describedby="inputGroup-sizing-sm" maxlength="8" value="<%=user.getBirth() %>" disabled>
				</div>
				<div class="input-group input-group-sm mb-3">
					<span class="input-group-text" id="inputGroup-sizing-sm">E-mail</span>
  					<input type="email" class="form-control" aria-label="Sizing example input" placeholder="ex: abc@web.com" aria-describedby="inputGroup-sizing-sm" maxlength="50" value="<%=user.getEmail() %>" name="email">
				</div>
				<div>
				<div class="mb-3">
  				<label for="exampleFormControlInput1" class="form-label">성별</label></div>
				&nbsp;&nbsp;
				<%if(user.getGender() == 1) {%>
					<div class="form-check form-check-inline">
  						<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" checked disabled>
  						<label class="form-check-label" for="flexRadioDefault1">
    					남성
  						</label>
					</div>
					<div class="form-check form-check-inline">
  						<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" disabled>
  						<label class="form-check-label" for="flexRadioDefault2">
    					여성
  					</label>
				</div>
				<%} else{ %>
					<div class="form-check form-check-inline">
  						<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" disabled>
  						<label class="form-check-label" for="flexRadioDefault1">
    					남성
  						</label>
					</div>
					<div class="form-check form-check-inline">
  						<input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked disabled>
  						<label class="form-check-label" for="flexRadioDefault2">
    					여성
  					</label>
				</div>
				<%} %>
				<br><br>
				</div>
				<div class="input-group input-group-sm mb-3">
					<div class="container">
				  	  <div class="row align-items-center flex-row">
				  	  <div class="col-12">
				  	  <div class="mb-3">
  						<label for="exampleFormControlInput1" class="form-label">핸드폰</label></div>
				  	  </div><br>
				  	  <div class="col-2">
  						<input type="number" class="form-control" aria-label="Sizing example input" placeholder="" aria-describedby="inputGroup-sizing-sm" maxlength="3" value="<%=user.getPhone_number().substring(0,3) %>" name="pnum1">
  					  </div>
  					  <div class="col-3">
  					<input type="number" class="form-control" aria-label="Sizing example input" placeholder="" aria-describedby="inputGroup-sizing-sm" maxlength="4" value="<%=user.getPhone_number().substring(3,7) %>" name="pnum2">
  					</div>
  					<div class="col-3">
  					<input type="number" class="form-control" aria-label="Sizing example input" placeholder="" aria-describedby="inputGroup-sizing-sm" maxlength="4" value="<%=user.getPhone_number().substring(7,11) %>" name="pnum3">
					</div>
					</div>
					</div>
				</div>
				
				<div>
				<div class="mb-3">
  				<label for="exampleFormControlInput1" class="form-label">주소</label></div>
				<div class="container">
				  <div class="row">
				    <div class="col-8">
				      <div class="input-group input-group-sm mb-3">
  						<span class="input-group-text" id="addon-wrapping">우편번호</span>
  						<input type="text" id="sample3_postcode" class="form-control" placeholder="" aria-label="Username" aria-describedby="addon-wrapping" value="<%=user.getPostnum() %>" name="postnum">
					  </div>
				    </div>
				    <div class="col-4">
				      <input type="button" class="btn btn-outline-primary" onclick="sample3_execDaumPostcode()" value="검색">
				    </div>
				    <div class="col-8">
				    <div class="input-group input-group-sm mb-3">
				    <span class="input-group-text" id="addon-wrapping">주소</span>
  						<input type="text" id="sample3_address" class="form-control" placeholder="" aria-label="Username" aria-describedby="addon-wrapping" maxlength="40" value="<%=user.getAddress() %>" name="address">
					  </div>
				    </div>
				    <div class="col-4">
				    
				    </div>
				    <div class="col-8">
				    <div class="input-group input-group-sm mb-3">
  						<input type="text" id="sample3_detailAddress" class="form-control" placeholder="상세주소" aria-label="Username" aria-describedby="addon-wrapping" maxlength="40" value="<%=user.getD_address() %>" name="d_address">
					  </div>
				    </div>
				    <div class="col-4">
				    	<div class="input-group input-group-sm mb-3">
				    	<span class="input-group-text" id="addon-wrapping">참고</span>
  						<input type="text" id="sample3_extraAddress" class="form-control" placeholder="" aria-label="Username" aria-describedby="addon-wrapping">
					  </div>
				    </div>
				  </div>
				</div>
				
				<div id="wrap" style="display:none;border:1px solid;width:500px;height:300px;margin:5px 0;position:relative">
				<img src="//t1.daumcdn.net/postcode/resource/images/close.png" id="btnFoldWrap" style="cursor:pointer;position:absolute;right:0px;top:-1px;z-index:1" onclick="foldDaumPostcode()" alt="접기 버튼">
				</div>
				
				<script src="//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"></script>
				<script>
				    // 우편번호 찾기 찾기 화면을 넣을 element
				    var element_wrap = document.getElementById('wrap');
				
				    function foldDaumPostcode() {
				        // iframe을 넣은 element를 안보이게 한다.
				        element_wrap.style.display = 'none';
				    }
				
				    function sample3_execDaumPostcode() {
				        // 현재 scroll 위치를 저장해놓는다.
				        var currentScroll = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
				        new daum.Postcode({
				            oncomplete: function(data) {
				                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
				
				                // 각 주소의 노출 규칙에 따라 주소를 조합한다.
				                // 내려오는 변수가 값이 없는 경우엔 공백('')값을 가지므로, 이를 참고하여 분기 한다.
				                var addr = ''; // 주소 변수
				                var extraAddr = ''; // 참고항목 변수
				
				                //사용자가 선택한 주소 타입에 따라 해당 주소 값을 가져온다.
				                if (data.userSelectedType === 'R') { // 사용자가 도로명 주소를 선택했을 경우
				                    addr = data.roadAddress;
				                } else { // 사용자가 지번 주소를 선택했을 경우(J)
				                    addr = data.jibunAddress;
				                }
				
				                // 사용자가 선택한 주소가 도로명 타입일때 참고항목을 조합한다.
				                if(data.userSelectedType === 'R'){
				                    // 법정동명이 있을 경우 추가한다. (법정리는 제외)
				                    // 법정동의 경우 마지막 문자가 "동/로/가"로 끝난다.
				                    if(data.bname !== '' && /[동|로|가]$/g.test(data.bname)){
				                        extraAddr += data.bname;
				                    }
				                    // 건물명이 있고, 공동주택일 경우 추가한다.
				                    if(data.buildingName !== '' && data.apartment === 'Y'){
				                        extraAddr += (extraAddr !== '' ? ', ' + data.buildingName : data.buildingName);
				                    }
				                    // 표시할 참고항목이 있을 경우, 괄호까지 추가한 최종 문자열을 만든다.
				                    if(extraAddr !== ''){
				                        extraAddr = ' (' + extraAddr + ')';
				                    }
				                    // 조합된 참고항목을 해당 필드에 넣는다.
				                    document.getElementById("sample3_extraAddress").value = extraAddr;
				                
				                } else {
				                    document.getElementById("sample3_extraAddress").value = '';
				                }
				
				                // 우편번호와 주소 정보를 해당 필드에 넣는다.
				                document.getElementById('sample3_postcode').value = data.zonecode;
				                document.getElementById("sample3_address").value = addr;
				                // 커서를 상세주소 필드로 이동한다.
				                document.getElementById("sample3_detailAddress").focus();
				
				                // iframe을 넣은 element를 안보이게 한다.
				                // (autoClose:false 기능을 이용한다면, 아래 코드를 제거해야 화면에서 사라지지 않는다.)
				                element_wrap.style.display = 'none';
				
				                // 우편번호 찾기 화면이 보이기 이전으로 scroll 위치를 되돌린다.
				                document.body.scrollTop = currentScroll;
				            },
				            // 우편번호 찾기 화면 크기가 조정되었을때 실행할 코드를 작성하는 부분. iframe을 넣은 element의 높이값을 조정한다.
				            onresize : function(size) {
				                element_wrap.style.height = size.height+'px';
				            },
				            width : '100%',
				            height : '100%'
				        }).embed(element_wrap);
				
				        // iframe을 넣은 element를 보이게 한다.
				        element_wrap.style.display = 'block';
				    }
				</script>
				</div>

					 </div>
				    </div>
				  </div>
				</div>
				<br>
				<div class="container">
  				<div class="row">
    			<div class="col-10">
				<input type="submit" class="btn btn-primary form-control" value="제출">
				</div>
				</div>
				</div>
				</form>
				
				

				
			</div>

			<div class="col-md-1">
	           	<!-- 빈 공간 -->
	           
	       	</div>
	   	</div>
	   	<div class="row align-items-center flex-row">
	   		<div class="col-md-1">
	           	<!-- 관리자용 -->
	           
	       	</div>
	   	</div>
	</div>
	<br><br>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>