<div class="col-lg-4">
    <section class="widget">
        <div>
            <button id="compose-btn" class="btn btn-danger btn-block">신규 제품<sup>서비스</sup> 등록하기</button>
            <ul id="review-classify" class="review-classify"></ul>
        </div>
    </section>
    <section class="widget">
        <header>
            <h4>
                <span class="font13" style="font-weight: bold;">
                    <i class="fa fa-sort-amount-asc"></i> 제품(서비스) 조회
                </span>
            </h4>
            <div class="actions">
                <button class="btn btn-transparent btn-xs" onclick="$('#demo').jstree('open_all');">Show All
                    <i class="fa fa-arrow-down"></i>
                </button>
            </div>
        </header>
        <div class="body">
            <div class="wrapper">
                <div id="mmenu" style="padding-bottom: 5px;">
                    <form class="form-search no-margin" role="form">
                        <div class="input-group">
                            <input type="search" id="text" class="form-control searchDarkBack" style="color: #f8f8f8;" placeholder="찾을 노드 이름 입력" data-tooltip="Press Enter To Node To Search">
                            <span class="input-group-btn">
                                <button type="button" id="search" title="Search" class="btn btn-default btn-sm">
                                    Search
                                </button>
                            </span>
                        </div>
                    </form>
                </div>
                <div id="demo" style="padding-top: 5px;" class="darkBack"></div>
                <div style="margin-top: 10px;" class="darkBack">
                    설명
                </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="box box-primary" style="border-top-color: #bbbbbb; border-top-width: 0px; margin-bottom: 35px !important;">
                <div class="box-body">
                    <div class="form-group" style="padding-top: 10px;">
                        <div class="control-group">
                            <label class="control-label" for="prepended-input">제품(서비스) 등록 모드 &nbsp;</label>
                            <div class="controls form-group" style="margin-bottom: 10px;">
                                <div class="input-group col-sm-8" style="text-align: left;">
                                    <span class="input-group-addon"><i class="fa fa-sliders"></i></span>
                                    <div class="btn-group" data-toggle="buttons">
                                        <label class="btn btn-transparent btn-sm newmode active">
                                            <input type="radio"> 신규 등록 모드
                                        </label>
                                        <label class="btn btn-transparent btn-sm updatemode">
                                            <input type="radio"> 업데이트 모드
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="prepended-input">제품(서비스) 이름 &nbsp;</label>
                            <div class="controls form-group" style="margin-bottom: 10px;">
                                <div class="input-group col-sm-8">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-gift"></i></span>
                                    <input id="prepended-input" class="form-control font13 darkBack" style="color: #f8f8f8;" size="16" type="text" placeholder="제품(서비스)명을 입력해 주세요">
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="prepended-input">제품(서비스) 오너 &nbsp;</label>
                            <div class="controls form-group" style="margin-bottom: 10px;">
                                <div class="input-group col-sm-8">
                                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                                    <select id="reviewer_select2"  class="js-data-example-ajax form-control font13 darkBack" placeholder="제품(서비스)의 관리자를 등록해 주세요"></select>
                                </div>
                            </div>
                        </div>
                        <div class="control-group">
                            <label class="control-label" for="prepended-input">제품(서비스) 리뷰어 &nbsp;</label>
                            <div class="controls form-group" style="margin-bottom: 10px;">
                                <div class="input-group col-sm-8">
                                    <span class="input-group-addon"><i class="fa fa-users"></i></span>
                                    <select id="owner_select2" class="js-example-basic-multiple-limit js-states form-control font13 darkBack" multiple=""></select>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div id="editor" class="darkBack">
                        <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
                    </div>
                </div>
                <div class="body-middle">
                    <form id="fileupload" action="server/php" 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>
                <p class="pull-right" style="padding-top: 10px;"><button class="btn btn-info" id="show-info-message">제품(서비스) 등록</button></p>
                <p class="pull-right" style="padding-top: 10px; padding-right: 10px;">
                    <button type="button" class="btn btn-success" id="modalPopupId"
                            data-toggle="modal" data-target="#myModal2">새창으로 편집</button>
                </p>
                <div id="myModal2" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                    <div class="modal-dialog" style="width: 90%; height: 90%">
                        <div class="modal-content darkBack">

                            <div class="modal-header" style="padding: 0px; border-bottom: 0px">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" style=" color: #ffffff; font-size: 20px; opacity: 0.8; padding: 5px;">×</button>
                                <h4 class="modal-title font14" id="myModalLabel2" style="color: #f8f8f8;text-align: left; padding: 5px;">
                                    <span class="font13" style="font-weight: bold;">
                                        <i class="fa fa-edit"></i> 제품(서비스) 신규 등록 팝업
                                    </span>
                                    <section class="search-result" style="border-left: 5px solid #e5603b;">
                                        <p style="font-size: 13px; margin: 5px 0px 0px 0px; padding-left: 5px;"> 입력한 내용은 부모창과 동기화 됩니다. 부모창에서 등록하기를 진행해야 저장됩니다.</p>
                                    </section>
                                </h4>
                            </div>
                            <div class="modal-body" style="padding: 5px;">
                                <div id="modal-editor" class="darkBack">
                                    <p>입력란이 좁다면 하단에 새창으로 띄우기를 클릭하세요.</p>
                                </div>
                            </div>
                            <div class="modal-footer" style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px;">
                                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                <button type="button" class="btn btn-primary">Save changes</button>
                            </div>

                        </div><!-- /.modal-content -->
                    </div><!-- /.modal-dialog -->
                </div>
            </div>
        </div>
    </section>
</div>

<!-- page specific application css/js -->
<style type="text/css">
.btn-transparent.active {
    color: white;
    background: rgba(51, 51, 51, 0.55);
    color: #ffffff;
    background-color: #e5603b;
    border-color: rgba(0, 0, 0, 0.15);
}
.btn:focus, .btn.focus, .btn:active:focus, .btn:active.focus, .btn.active:focus, .btn.active.focus {
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}
.select2-search__field::-webkit-input-placeholder,
.select2-search__field::placeholder {
    color: #999 !important;
    padding-left: 6px;
}
</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>