<div class="col-lg-4">
	<section class="widget">
		<header>
			<h4>
				<span class="font13" style="font-weight: bold">
					<i class="fa fa-edit"></i> 제품(서비스) 조회 및 선택
				</span>
			</h4>
			<div class="widget-controls">
				<a title="Options" href="#"><i class="glyphicon glyphicon-cog"></i></a>
				<a data-widgster="expand" href="#" title="Expand">
					<i class="glyphicon glyphicon-chevron-up"></i>
				</a>
				<a data-widgster="collapse" href="#" title="Collapse">
					<i class="glyphicon glyphicon-chevron-down"></i>
				</a>
				<a data-widgster="close" href="#" title="Close">
					<i class="glyphicon glyphicon-remove"></i>
				</a>
			</div>
		</header>
		<div class="body">
			<blockquote class="font13">1. 제품(서비스) 선택</blockquote>
			<button class="product-handler__register btn btn-primary btn-block">
				신규 제품(서비스) 등록하기
			</button>
			<div class="box box-primary" style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
				<div class="box-body">
					<table cellspacing="0" class="display responsive no-wrap" id="pdserviceTable">
						<thead>
						<tr>
							<th>c_id</th>
							<th>c_title</th>
						</tr>
						</thead>
					</table>
				</div>
			</div>
		</div>
	</section>
</div>
<div class="col-lg-8">
	<section class="widget">
		<header>
			<h4>
				<span class="font13" style="font-weight: bold">
					<i class="fa fa-edit"></i> 제품(서비스) 상세 보기 / 변경
				</span>
			</h4>
			<div class="widget-controls">
				<a title="Options" href="#"><i class="glyphicon glyphicon-cog"></i></a>
				<a data-widgster="expand" title="Expand" href="#"
				><i class="glyphicon glyphicon-chevron-up"></i
				></a>
				<a data-widgster="collapse" title="Collapse" href="#"
				><i class="glyphicon glyphicon-chevron-down"></i
				></a>
				<a data-widgster="close" title="Close" href="#"
				><i class="glyphicon glyphicon-remove"></i
				></a>
			</div>
		</header>
		<div class="body">
			<div class="row">
				<div class="col-md-12">
					<section class="widget widget-tabs">
						<header>
							<ul class="nav nav-tabs">
								<li class="active">
									<a href="#stats" data-toggle="tab"><strong>상세 보기</strong></a>
								</li>
								<li>
									<a href="#report" data-toggle="tab"><strong>편집 하기</strong></a>
								</li>
								<li>
									<a href="#dropdown1" data-toggle="tab"><strong>삭제 하기</strong></a>
								</li>
							</ul>
						</header>
						<div class="body tab-content">
							<div id="stats" class="tab-pane active clearfix" style="padding-top: 10px !important">
								<form class="form-horizontal" method="post">
									<fieldset>
										<div class="control-group">
											<label class="control-label" for="prepended-input">
												제품(서비스) 이름 &nbsp;
											</label>
											<div class="input-wrap col-sm-8">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>&nbsp;
												<div style="display: flex; align-items: center; gap: 10px; padding: 0;">
													<a href="#" id="detailView-pdService-name"></a>
												</div>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="prepended-input">
												제품(서비스) 오너 &nbsp;
											</label>
											<div class="input-wrap col-sm-8">
												<span class="input-group-addon">
													<i class="fa fa-user"></i>
												</span>&nbsp;
												<div style="display: flex; align-items: center; gap: 10px; padding: 0;">
													<a href="#" id="detailView-pdService-owner"></a>
												</div>
											</div>
										</div>
										<div class="control-group">
											<label class="control-label" for="prepended-input">
												제품(서비스) 리뷰어 &nbsp;
											</label>
											<div class="input-wrap col-sm-8">
												<span class="input-group-addon">
													<i class="fa fa-users"></i>
												</span>&nbsp;
												<div>
													<a href="#" id="detailView-pdService-reviewer01"></a>
													<a href="#" id="detailView-pdService-reviewer02"></a>
													<a href="#" id="detailView-pdService-reviewer03"></a>
													<a href="#" id="detailView-pdService-reviewer04"></a>
													<a href="#" id="detailView-pdService-reviewer05"></a>
												</div>
											</div>
										</div>
										<div class="control-group">
                                            <label class="control-label" for="prepended-input" style="margin-top: 10px">
                                                제품(서비스) 컨텐츠 &nbsp;
                                            </label>
                                            <div class="col-sm-8" style="margin-top: 10px">
                                                영역이 좁을 경우 : <button type="button" class="btn btn-warning">팝업 창으로 내용 보기</button>
                                            </div>
                                            <br><br><br>
                                            <div class="col-sm-12" id="detailView-pdService-contents">
                                            </div>
                                        </div>
									</fieldset>
								</form>
							</div>
							<div id="report" class="tab-pane" style="padding-top: 10px !important">
								<div>
									<form class="form-horizontal" method="post">
										<fieldset>
											<div class="control-group">
												<label class="control-label" for="prepended-input">
													제품(서비스) 이름 &nbsp;
												</label>
												<div class="input-wrap col-sm-8">
												<span class="input-group-addon">
													<i class="glyphicon glyphicon-gift"></i>
												</span>
													<input
															id="editView-pdService-name"
															class="form-control font13 darkBack"
															style="color: #f8f8f8"
															size="16"
															type="text"
															placeholder="service name ###"
													/>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="editView-pdService-owner">
													제품(서비스) 오너 &nbsp;
												</label>
												<div class="input-wrap col-sm-8">
												<span class="input-group-addon">
													<i class="fa fa-user"></i>
												</span>
													<select id="editView-pdService-owner" class="js-data-example-ajax form-control font13 darkBack" style="width: 100%"></select>
												</div>
											</div>
											<div class="control-group" id="editView-pdService-reviewer">
												<label class="control-label" for="editView-pdService-reviewer">
													제품(서비스) 리뷰어 &nbsp;
												</label>
												<div class="input-wrap col-sm-8">
													<span class="input-group-addon">
														<i class="fa fa-users"></i>
													</span>
													<select id="editView-pdService-reviewers" class="js-data-example-ajax form-control font13 darkBack" name="selectedReviewers[]" multiple="multiple" style="width: 100%;"></select>
												</div>
											</div>
											<div class="control-group">
												<label class="control-label" for="prepended-input" style="margin-top: 10px">
													제품(서비스) 컨텐츠 &nbsp;
												</label>
                                                <div class="box box-primary" style="border-top-color: #bbbbbb; border-top-width: 0px; margin-bottom: 35px !important;">
                                                </div>
												<div class="controls form-group">
													<div class="col-sm-12">
														<div id="input_pdservice_editor" class="darkBack">
															<p>버전에 포함될 기능을 요약합니다.</p>
														</div>
													</div>
												</div>
											</div>
										</fieldset>
									</form>
								</div>
								<div class="form-actions" style="float: right; margin-top: 0px !important;">
									<div>
                                        <button type="button" class="btn btn-warning">팝업 창으로 편집 하기</button>
										<button type="button" id="pdServiceUpdate" class="btn btn-primary">제품(서비스) 변경 사항 저장</button>
									</div>
								</div>
							</div>
							<div id="dropdown1" class="tab-pane">
								<p>
									제품(서비스) ""을(를) 삭제 하시겠습니까?
								</p>
								<p><strong>Jira 프로젝트에서 제품(서비스)와 연관된 버전은 삭제되지 않습니다.</strong></p>
								<p><strong>( 주의하세요 ) A-RMS 의 버전 하위 요구사항은 삭제됩니다.</strong></p>
								<p><strong>( 주의하세요 ) 삭제된 요구사항과 연결되 Jira 이슈는 유지됩니다.</strong></p>
								<p><strong>( 주의하세요 ) 삭제된 요구사항은 통계에 반영되지 않습니다.</strong></p>
								<div>
									<button id="delVersion" class="btn btn-danger">Delete Version</button>
									<button class="btn btn-default">Cancel</button>
								</div>
							</div>
                            <div class="body-middle">
                                <form
                                        id="fileupload"
                                        action="uploadFileToNode.do"
                                        method="POST"
                                        enctype="multipart/form-data"
                                >
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div id="dropzone" class="dropzone">
                                                <i class="fa fa-cloud-upload"></i>
                                                Drop files here
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12 fileupload-progress fade font12">
                                            <!-- The global progress bar -->
                                            <div
                                                    class="progress progress-success progress-striped active font12"
                                                    role="progressbar"
                                                    aria-valuemin="0"
                                                    aria-valuemax="100"
                                            >
                                                <div class="bar" style="width: 0%"></div>
                                            </div>
                                            <!-- The extended global progress information -->
                                            <div class="progress-extended font12">&nbsp;</div>
                                        </div>
                                    </div>
                                    <div class="form-actions fileupload-buttonbar no-margin">
                                                            <span class="btn btn-sm btn-inverse fileinput-button">
                                                                <i class="fa fa-plus"></i>
                                                                <span>Add files...</span>
                                                                <input type="file" name="files[]" multiple="" />
                                                            </span>
                                        <button type="submit" class="btn btn-inverse btn-sm start">
                                            <i class="fa fa-upload"></i>
                                            <span>Start upload</span>
                                        </button>
                                        <button type="reset" class="btn btn-inverse btn-sm cancel">
                                            <i class="fa fa-ban"></i>
                                            <span>Cancel upload</span>
                                        </button>
                                    </div>
                                    <div class="fileupload-loading">
                                        <i class="fa fa-spin fa-spinner"></i>
                                    </div>
                                    <!-- The table listing the files available for upload/download -->
                                    <table
                                            role="presentation"
                                            class="table table-striped"
                                            style="margin-bottom: 5px"
                                    >
                                        <tbody
                                                class="files"
                                                data-toggle="modal-gallery"
                                                data-target="#modal-gallery"
                                        ></tbody>
                                    </table>
                                </form>
                            </div>
						</div>
					</section>
				</div>
			</div>
		</div>
	</section>
</div>

<!-- page specific application css/js -->
<style>
	.new-tab-open .product-handler,
	.new-tab-open .pull-right {
		display: none;
	}

	.product-handler {
		display: flex;
		justify-content: space-between;
	}
	.product-handler__group {
		display: flex;
		gap: 7px;
	}
	.product-handler .btn-block {
		margin: 0;
		max-width: 160px;
	}
	.btn:focus,
	.btn:active:focus {
		outline: 0px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}
	.control-group {
		overflow: hidden;
	}
	.input-wrap {
		display: flex;
		height: 30px;
		margin-bottom: 7px;
	}
	.input-wrap .input-group-addon {
		width: 40px;
		height: 30px;
	}
	.input-wrap .select2-selection--single,
	.input-wrap .select2-selection--multiple {
		height: 30px !important;
		min-height: 30px !important;
	}
	.input-wrap .select2-selection__placeholder {
		padding-left: 2px !important;
	}
	.input-wrap .select2-selection--multiple ul {
		padding-left: 10px !important;
	}
	.input-wrap .select2-search--inline,
	.input-wrap .select2-search--inline input {
		width: 100% !important;
	}
	.form-control:focus {
		box-shadow: none;
	}

	#service-reviewers,
	#service-reviewers a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 0;
	}

	#service-reviewers a {
		gap: 5px;
	}

	.profile-image {
		width: 24px;
		height: 24px;
		border-radius: 50%;
		overflow: hidden;
	}
	.profile-image img {
		width: 100%;
	}

</style>
<script type="text/javascript" charset="utf-8">
	//<![CDATA[

	// 초기 개발 및 확인 용도
	$(function () {});

	//]]>
</script>
<script src="../reference/light-blue/js/fileupload.js"></script>
<script type="text/javascript" src="js/pdService.js" charset="utf-8"></script>
