<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<script type="text/javascript" src="<c:url value='/resources/js/admin/attr.js' />"></script>
<!-- 속성 관리 -->
<div class="main-wrapper">
    <div class="title-bar">
    	<span class="title">속성 관리</span>
    </div>
    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="false">
	    <div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingOne">
				 <a role="button" data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
					속성
				</a>
			</div>
			<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
				<div class="panel-body">
					<div class="col-md-3">
				    	<div class="left-content-xs">
				    		<div class="col-md-12 pd0">
								<select class="form-control input-sm" id="sltAttrType">
								</select>
					    	</div>
					    	<div class="form-group col-md-12 pd0 mg0">
					    		<div class="table-wrapper-xs">
						    		<table class="table table-bordered table-hover table-row-click">
										<thead>
											<tr>
												<td class="table-header">아이디</td>
												<td class="table-header">이름</td>
											</tr>
										</thead>
										<tbody id="table_attr">
										</tbody>
									</table>
								</div>
							</div>
				    	</div>
				    </div>
				    <div class="col-md-9">
				    	<div class="right-content-xs row">
				    		<div class="col-md-12" id="attrDetailEmpty" style="display: none">
			    				<div class="form-group col-md-12 text-right">
							    	<div class="btn-group" role="group" aria-label="...">
									  <button type="button" class="btn btn-default btn-sm" id="btnNewEmpty_attr" title="추가">
									  	<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
									  </button>
									</div>
								</div>
								<div class="form-group col-md-12 pd0">
									<div class="col-md-12 pd0">
										* 속성 정보를 선택해주세요.
									</div>
								</div>
							</div>
							<div id="attrDetail">
								<div class="form-group col-md-12 text-right">
							    	<div class="btn-group" role="group" aria-label="...">
							    	  <button type="button" class="btn btn-default btn-sm" id="btnNew_attr" title="추가">
									  	<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
									  </button>
									  <button type="button" class="btn btn-default btn-sm" id="btnRemove_attr" title="삭제">
									  	<span class="glyphicon glyphicon-minus">&nbsp;삭제</span>
									  </button>
									  <button type="button" class="btn btn-default btn-sm" id="btnSave_attr" title="저장">
									  	<span class="glyphicon glyphicon-ok">&nbsp;저장</span>
									  </button>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="panel panel-default">
										<div class="panel-body">
											<div class="form-group col-md-12 mgt5">
												<div class="col-md-2 content-title text-right">
													<label class="">아이디</label>
												</div>
												<div class="col-md-4">
													<input type="text" class="form-control input-sm" id="txtAttrId" placeholder="">
												</div>
												<div class="col-md-2 content-title text-right">
													<label>이름</label>
												</div>
												<div class="col-md-4">
													<input type="text" class="form-control input-sm" id="txtAttrName" placeholder="">
												</div>
											</div>
											<div class="form-group col-md-12" id="divUpperAttr" style="display: none">
												<div class="col-md-2 content-title text-right">
													<label>상위속성</label>
												</div>
												<div class="col-md-4">
													<select class="form-control input-sm" id="sltUpperAttr">
													</select>
												</div>
											</div>	
										</div>
									</div>
								</div>
							</div>
						</div>
			    	</div>
				</div>	
			</div>
		</div>
		
		<div class="panel panel-default">
			<div class="panel-heading" role="tab" id="headingTwo">
				<a class="collapsed" role="button" data-toggle="collapse" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
					추가 속성
				</a>
			</div>
			<div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo">
				<div class="panel-body">
					<div class="col-md-3">
						<div class="left-content">
							<div class="form-group col-md-12 pd0 mg0">
					    		<div class="table-wrapper-lg">
						    		<table class="table table-bordered table-hover table-row-click">
										<thead>
											<tr>
												<td class="table-header">아이디</td>
												<td class="table-header">이름</td>
											</tr>
										</thead>
										<tbody id="table_extraAttr">
										</tbody>
									</table>
								</div>
							</div>
						</div>
					</div>
					<div class="col-md-9">
						<div class="right-content row">
							<div class="col-md-12" id="extraAttrDetailEmpty" style="display: none">
			    				<div class="form-group col-md-12 text-right">
							    	<div class="btn-group" role="group" aria-label="...">
									  <button type="button" class="btn btn-default btn-sm" id="btnNewEmpty_extraAttr" title="추가">
									  	<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
									  </button>
									</div>
								</div>
								<div class="form-group col-md-12 pd0">
									<div class="col-md-12 pd0">
										* 속성 정보를 선택해주세요.
									</div>
								</div>
							</div>
							<div id="extraAttrDetail">
								<div class="form-group col-md-12 text-right">
							    	<div class="btn-group" role="group" aria-label="...">
							    	  <button type="button" class="btn btn-default btn-sm" id="btnNew_extraAttr" title="추가">
									  	<span class="glyphicon glyphicon-plus">&nbsp;추가</span>
									  </button>
									  <button type="button" class="btn btn-default btn-sm" id="btnRemove_extraAttr" title="삭제">
									  	<span class="glyphicon glyphicon-minus">&nbsp;삭제</span>
									  </button>
									  <button type="button" class="btn btn-default btn-sm" id="btnSave_extraAttr" title="저장">
									  	<span class="glyphicon glyphicon-ok">&nbsp;저장</span>
									  </button>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="panel panel-default">
										<div class="panel-body">
											<div class="form-group col-md-12 mgt5">
												<div class="col-md-2 content-title text-right">
													<label class="">아이디</label>
												</div>
												<div class="col-md-4">
													<input type="text" class="form-control input-sm" id="txtExtraAttrId" placeholder="">
												</div>
												<div class="col-md-2 content-title text-right">
													<label>이름</label>
												</div>
												<div class="col-md-4">
													<input type="text" class="form-control input-sm" id="txtExtraAttrName" placeholder="">
												</div>
											</div>
											<div class="form-group col-md-12">
												<div class="col-md-2 content-title text-right">
													<label>설명<br/>(<span id="descLength">0</span>/500bytes)</label>
												</div>
												<div class="col-md-10">
													<textarea class="form-control input-sm" id="txtExtraAttrDesc" rows="3"></textarea>
												</div>
											</div>		
										</div>
									</div>
								</div>
								<div class="form-group col-md-12">
									<div class="panel panel-default">
										<div class="panel-body">
											<div class="col-md-12">
												<div class="form-group content-box-title">
													<label>추가 속성 사용자</label>
												</div>
												<div class="form-group col-md-12 pd0">
													<div class="col-md-2 content-title text-right">
														<label></label>
													</div>
													<div class="col-md-10">
														<div class="text-right">
															<button type="button" class="btn btn-default btn-sm" id="btnEditExtraAttrUser" title="편집">
																<span class="glyphicon glyphicon-edit">&nbsp;편집</span>
															</button>
														</div>
									    				<div id="container_extraAttrUser" class="table-wrapper-xs">
															<table class="table table-bordered table-hover">
										    					<thead>
										    						<tr>
										    							<td class="table-header">아이디</td>
										    							<td class="table-header">이름</td>
										    							<td class="table-header">소속</td>
										    							<td class="table-header">직무</td>
										    							<td class="table-header">업무</td>
										    						</tr>
										    					</thead>
										    					<tbody id="table_extraAttrUser_view">
										    					</tbody>
										    				</table>
														</div>	
													</div>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</div>

<div class="modal fade" id="addExtraAttrModal" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document" style="width: 1000px">
    <div class="modal-content">
      <div class="modal-header">
      	 ⊙ 추가속성 사용자
      </div>
      <div class="modal-body">
      	<div class="row">
			<div class="col-md-12">
				<div class="col-md-6">
					<div class="form-group col-md-12 pd0">
						<div class="col-md-5 pdl0">
							<select class="form-control input-sm" id="sltUser">
								<option value="userId">아이디</option>
								<option value="userName">이름</option>
							</select>
						</div>
						<div class="col-md-5 pd0">
							<input type="text" class="form-control input-sm" id="txtSearch" placeholder="">
						</div>
						<div class="col-md-2 text-right">
							<button class="btn btn-default btn-sm pd5" id="btnSearch" title="조회" >
				  				<span class="glyphicon glyphicon-search">&nbsp;조회</span>
							</button>
						</div>
			    	</div>
			    	<div class="col-md-12 pd0 table-wrapper-sm">
						<table class="table table-bordered table-hover">
	    					<thead>
	    						<tr>
	    							<td class="table-header">아이디</td>
	    							<td class="table-header">이름</td>
	    							<td class="table-header">소속</td>
	    							<td class="table-header">직무</td>
	    							<td class="table-header">업무</td>
	    							<td class="table-header"></td>
	    						</tr>
	    					</thead>
	    					<tbody id="table_user">
	    					</tbody>
	    				</table>
    				</div>
    				<div class="form-group col-md-12 pd0 mg0">
				    	<nav class="text-center nav-pagination">
						  <ul class="pagination pagination-sm" id="ulPagination">
						  </ul>
						</nav>
					</div>
				</div>
				<div class="col-md-6">
					<div class="form-group col-md-12 pd0 mg0">
					</div>
					<div class="col-md-12 pd0 table-wrapper-sm">
						<table class="table table-bordered table-hover">
	    					<thead>
	    						<tr>
	    							<td class="table-header">아이디</td>
	    							<td class="table-header">이름</td>
	    							<td class="table-header">소속</td>
	    							<td class="table-header">직무</td>
	    							<td class="table-header">업무</td>
	    							<td class="table-header"></td>
	    						</tr>
	    					</thead>
	    					<tbody id="table_extraAttrUser">
	    					</tbody>
	    				</table>
    				</div>
				</div>
			</div>
		</div>
      </div>
      <div class="modal-footer text-center">
        <button type="button" class="btn btn-default btn-sm" id="btnSaveExtraAttrUser">
        	<span class="glyphicon glyphicon-ok-circle">&nbsp;적용</span>     
        </button>
        <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">
        	<span class="glyphicon glyphicon-remove-circle">&nbsp;취소</span>
        </button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
$(document).ready(function () {
	var attr = new mplus_admin_attr();
	attr.init();	
});
</script>