<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<%--<script src="<c:url value='/lib/assets/js/diagram/dx-diagram.min.js' />"></script>--%>
<%--<script src="<c:url value='/lib/assets/js/diagram/dx-all.min.js' />"></script>--%>
<%--<link rel="stylesheet" href="<c:url value='/lib/assets/css/diagram/dx.custom.css' />">--%>
<%--<link rel="stylesheet" href="<c:url value='/lib/assets/css/diagram/dx-diagram.css' />">--%>
<%--<link rel="stylesheet" href="<c:url value='/lib/assets/css/diagram/indigo-pink.css' />">--%>

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>서비스그룹 관리</title>
    <%@ include file="/WEB-INF/jsp/adm/include/topLinkTag.jsp" %>
</head>

<script>
    $(document).ready(function () {

        $('.tbl-card-li').each(function () {
            $(this).find('.tbl-card-title').on('click', function () {
                $(this).parents('.tbl-card-li').toggleClass('on');
            })
        });

        $('.tbl-card').find('.tbl-card-li .title-connect').each(function () {
            const submitVal = $(this).val();
            if (submitVal.length > 0) {
                $(this).parents('.tbl-card-li').find('.title-connected').text(submitVal);
            }
            $(this).on('keyup', function () {
                const thisVal = $(this).val();

                if (thisVal.length === 0) {
                    $(this).parents('.tbl-card-li').find('.title-connected').text('새로운 시나리오 그룹');
                } else {
                    $(this).parents('.tbl-card-li').find('.title-connected').text(thisVal);
                }
            })
        });

        getServiceGroupQueryString();
        getServiceGroupViewData();

    });

    function getServiceGroupQueryString() {
        var param = new URLSearchParams(location.search).get("serviceGroup");
        // console.log(param);
        return param;
    }

    function getServiceGroupViewData() {

        if (getServiceGroupQueryString() == null) {
            //유저어드민
            setUrl = "<c:url value='/admin/common/system/serviceGroup/view'/>";
        } else {
            //시스템어드민
            setUrl = "<c:url value='/admin/common/system/serviceGroup/view'/>" + "?serviceGroup=" + getServiceGroupQueryString();
        }


        $.ajax({
            type: "GET",
            contentType: "application/json; charset=utf-8",
            datatype: "JSON",
            url: setUrl,
            success: function (data) {
                // console.log(JSON.stringify(data));

                var html = '';

                // for (var i=0; i < data.subServiceGroupRes.length; i++) {
                //
                // }

                $('#mainServiceGroupName').val(data.mainServiceGroup);
                $('#mainServiceGroup').val(data.mainServiceGroupName);
                $('#mainUseYn').val(data.mainUseYn);
                $('#mainOprMngCode').val(data.mainOprMngCode);


                data.subServiceGroupRes.forEach(function (e, i) {
                    html += '<li class="tbl-card-li" id="tbl-card-li' + i + '">'
                        +   '<div class="tbl-card-li-inner">'
                        + '<div class="tbl-card-title" id="tbl-card-title' + i + '">'
                        + '     <div class="fl title-connected">' + e.subServiceGroup + '</div>'
                        + '  </div>'
                        + '     <div class="tbl-card-data">'
                        + '     <div class="box-title">'
                        + '      <div class="btn_wrap fr">'
                        + '           <a href="#" class="btn grey">-삭제</a>'
                        + '       </div>'
                        + '     </div>'
                        + '     <div class="tbl">'
                        + '        <table class="edit hght">'
                        + '          <colgroup>'
                        + '      <col width = "150px" >'
                        + '      <col width = "auto" >'
                        + '                  </colgroup>'
                        + '              <tbody>'
                        + '             <tr>'
                        + '                  <th class="tl">시나리오 그룹명</th>'
                        + '                  <td>'
                        + '                      <div class="ipt_box">'
                        + '                          <input type="text" id="subServiceGroup' + i + '" value="' + e.subServiceGroup + '" name=""'
                        + '                                 class="title-connect" readonly>'
                        + '                      </div>'
                        + '                  </td>'
                        + '              </tr>'
                        + '              <tr>'
                        + '                  <th class="tl">시나리오 그룹코드</th>'
                        + '                  <td>'
                        + '                      <div class="ipt_box type-flex">'
                        + '                          <input type="text" id="subServiceGroupName' + i + '" value="' + e.subOprMngCode + '" name="" class="" readonly>'
                        + '                      </div>'
                        + '                      <div class="ipt_box ">'
                        + '                          <div class="create-code-list">'
                        + '                          </div>'
                        + '                      </div>'
                        + '                  </td>'
                        + '              </tr>'
                        + '              <tr>'
                        + '                  <th class="tl">시나리오그룹 설명</th>'
                        + '                  <td>'
                        + '                      <div class="ipt_box">'
                        + '                          <input type="text" value="' + e.subServiceGroupDesc + '" name="" class="" readonly>'
                        + '                      </div>'
                        + '                  </td>'
                        + '              </tr>'
                        + '              <tr>'
                        + '                  <th class="tl">사용여부 <em class="red">*</em></th>'
                        + '                  <td>'
                        + '                      <div class="sel_box">'
                        + '                          <select class="wide">'
                        + '                              <option value="" selected>' + e.subUseYn + '</option>'
                        + '                          </select>'
                        + '                      </div>'
                        + '                  </td>'
                        + '              </tr>'
                        + '              <tr>'
                        + '                  <th class="tl">권한부여</th>'
                        + '                  <td class="tl">'
                        + '                      <div class="content tree tree-maxHeight type-chk">'
                        + '                          <div class="tree_wrap">'
                        + '                              <ul>'
                        + '                                  <li data-jstree="{ "opened" : true }">root'
                        + '                                      <ul>'
                        + '                                          <li data-jstree="{ "opened" : true }">주소BOT'
                        + '                                              <ul>'
                        + '                                                  <li>지명 유사어 관리</li>'
                        + '                                                  <li>빌딩 유사어 관리</li>'
                        + '                                                  <li>유의어 전처리 관리</li>'
                        + '                                                  <li>주소봇 멘트 관리</li>'
                        + '                                                  <li>발화 건물유형 관리</li>'
                        + '                                                  <li>주소 월별 업데이트</li>'
                        + '                                                  <li>주소처리내역(녹취)</li>'
                        + '                                              </ul>'
                        + '                                          </li>'
                        + '                                          <li data-jstree="{ "opened" : true }">BOT 공통 관리'
                        + '                                              <ul>'
                        + '                                                  <li data-jstree="{ "opened" : true }">서비스별관리'
                        + '                                                      <ul>'
                        + '                                                          <li>요일/시간대별 멘트 관리</li>'
                        + '                                                          <li>휴무일 관리</li>'
                        + '                                                          <li>자연어 전처리 관리</li>'
                        + '                                                      </ul>'
                        + '                                                  </li>'
                        + '                                                  <li>공통 코드 관리</li>'
                        + '                                              </ul>'
                        + '                                          </li>'
                        + '                                          <li data-jstree="{ "opened" : true }">무인접수BOT'
                        + '                                              <ul>'
                        + '                                                  <li>무인 접수 리스트</li>'
                        + '                                                  <li>제품군 유의어 관리</li>'
                        + '                                              </ul>'
                        + '                                          </li>'
                        + '                                          <li data-jstree="{ "opened" : true }">영상상담'
                        + '                                              <ul>'
                        + '                                                  <li>컨텐츠등록 관리</li>'
                        + '                                                  <li>영상상담</li>'
                        + '                                                  <li>상담이력 조회</li>'
                        + '                                              </ul>'
                        + '                                          </li>'
                        + '                                      </ul>'
                        + '                                  </li>'
                        + '                              </ul>'
                        + '                          </div>'
                        + '                      </div>'
                        + '                  </td>'
                        + '              </tr>'
                        + '              </tbody>'
                        + '          </table>'
                        + '          </div>'
                        + '          </div>'
                        + '          </div>'
                        + '          </li>'

                    $('#tbl-card').html(html);

                    $('.tbl-card-li').each(function () {
                        $(this).find('.tbl-card-title').on('click', function () {
                            $(this).parents('.tbl-card-li').toggleClass('on');
                        })
                    });
                });

                // $('#mainServiceGroupName').set(data.mainServiceGroup).val();
                // $('#mainServiceGroup').set(data.mainServiceGroupName).val();
                // $('#useYn').set(data.useYn).val();
            }
        })
    }

</script>


<header id="header">
    <%@ include file="/WEB-INF/jsp/adm/include/header.jsp" %>
</header>
<c:import url="/adm/menu/getLnbMenu.do"/>

<body>
<h1>ICOMSYS ADMIN</h1>

<div class="skip_navigation">
    <ul>
        <li>
            <a href="#Content" class="go_content">본문 바로가기</a>
        </li>
        <li>
            <a href="#Gnb">메뉴 바로가기</a>
        </li>
    </ul>
</div>
<h1>ICOMSYS ADMIN</h1>

<section id="Content" class="system_management">
    <div class="location">
        <ul>
            <li class="home"><a href="#">HOME</a></li>
            <li><a href="#">시스템관리</a></li>
            <li><a href="#">서비스그룹 관리</a></li>
        </ul>
    </div>
    <!-- TODO: 래부터 신규 컨텐츠 마크업 입니다. -->
    <div class="sub_cont">
        <div class="cont_box">
            <div class="box_title">
                <div class="fl">
                    <h2 class="mt12">서비스 그룹관리</h2>
                </div>
            </div>
            <div class="tbl">
                <table class="edit hght">
                    <colgroup>
                        <col width="150px">
                        <col width="auto">
                    </colgroup>
                    <tbody>

                    <tr>
                        <th class="tl">서비스그룹</th>
                        <td>
                            <div class="ipt_box">
                                <%--                                <input type="text" id="mainServiceGroupName" value="mainServiceGroup" name="" class="" readonly>--%>
                                <input type="text" id="mainServiceGroupName" name="" class="" readonly>
                            </div>
                        </td>
                    </tr>


                    <tr>
                        <th class="tl">서비스코드</th>
                        <td>
                            <div class="ipt_box type-flex">
                                <input type="text" id="mainServiceGroup" value="codecode" name="" class="" readonly>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <th class="tl">시나리오코드</th>
                        <td>
                            <div class="ipt_box type-flex">
                                <input type="text" id="mainOprMngCode" value="codecode" name="" class="" readonly>
                            </div>
                        </td>
                    </tr>

                    <tr>
                        <th class="tl">사용여부</th>
                        <td>
                            <input type="text" id="mainUseYn" value="Y" name="" class="" readonly>
                        </td>
                    </tr>

                    </tbody>
                </table>
            </div>
        </div>


        <div class="cont_box">

            <div class="box_title">
                <div class="fl">
                    <h2 class="mt12">시나리오 그룹 <em class="red">*</em></h2>
                </div>
                <div class="btn_wrap fr">
                    <a href="#" class="btn">추가</a>
                </div>
            </div>


            <div class="tbl-card-wrap">
                <ul class="tbl-card" id="tbl-card">
                    <li class="tbl-card-li">
                        <div class="tbl-card-li-inner">
                            <div class="tbl-card-title">
                                <div class="fl title-connected">새로운 시나리오 그룹</div>
                            </div>
                            <div class="tbl-card-data">
                                <div class="box-title">
                                    <div class="btn_wrap fr">
                                        <a href="#" class="btn grey">-삭제</a>
                                    </div>
                                </div>
                                <div class="tbl">
                                    <table class="edit hght">
                                        <colgroup>
                                            <col width="150px">
                                            <col width="auto">
                                        </colgroup>
                                        <tbody>
                                        <tr>
                                            <th class="tl">시나리오 그룹명</th>
                                            <td>
                                                <div class="ipt_box">
                                                    <input type="text" id="subServiceGroup" value="시나리오그룹 1" name=""
                                                           class="title-connect">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="tl">시나리오 그룹코드</th>
                                            <td>
                                                <div class="ipt_box type-flex">
                                                    <input type="text" id="subServiceGroupName" value="UPLUS_RCP_DAISO"
                                                           name="" class="">
                                                    <a href="#" class="btn grey">중복확인</a>
                                                </div>
                                                <div class="ipt_box ">
                                                    <div class="create-code-list">
                                                        <spna class="create-code">
                                                            UPLUS_RCP_DAISO

                                                        </spna>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="tl">시나리오그룹 설명</th>
                                            <td>
                                                <div class="ipt_box">
                                                    <input type="text" value="입력된 설명입니다..." name="" class="">
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="tl">사용여부 <em class="red">*</em></th>
                                            <td>
                                                <div class="sel_box">
                                                    <select class="wide">
                                                        <option value="" selected>Y</option>
                                                    </select>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <th class="tl">권한부여</th>
                                            <td class="tl">
                                                <script>
                                                    $(document).ready(function () {
                                                        $('.tree_wrap').jstree({
                                                            "checkbox": {
                                                                "keep_selected_style": false
                                                                , "three_state": false
                                                            },
                                                            "plugins": ["checkbox"]
                                                        });
                                                    });
                                                </script>
                                                <div class="content tree tree-maxHeight type-chk">
                                                    <div class="tree_wrap">
                                                        <ul>
                                                            <li data-jstree='{ "opened" : true }'>root
                                                                <ul>
                                                                    <li data-jstree='{ "opened" : true }'>주소BOT
                                                                        <ul>
                                                                            <li>지명 유사어 관리</li>
                                                                            <li>빌딩 유사어 관리</li>
                                                                            <li>유의어 전처리 관리</li>
                                                                            <li>주소봇 멘트 관리</li>
                                                                            <li>발화 건물유형 관리</li>
                                                                            <li>주소 월별 업데이트</li>
                                                                            <li>주소처리내역(녹취)</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li data-jstree='{ "opened" : true }'>BOT 공통 관리
                                                                        <ul>
                                                                            <li data-jstree='{ "opened" : true }'>서비스별관리
                                                                                <ul>
                                                                                    <li>요일/시간대별 멘트 관리</li>
                                                                                    <li>휴무일 관리</li>
                                                                                    <li>자연어 전처리 관리</li>
                                                                                </ul>
                                                                            </li>
                                                                            <li>공통 코드 관리</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li data-jstree='{ "opened" : true }'>무인접수BOT
                                                                        <ul>
                                                                            <li>무인 접수 리스트</li>
                                                                            <li>제품군 유의어 관리</li>
                                                                        </ul>
                                                                    </li>
                                                                    <li data-jstree='{ "opened" : true }'>영상상담
                                                                        <ul>
                                                                            <li>컨텐츠등록 관리</li>
                                                                            <li>영상상담</li>
                                                                            <li>상담이력 조회</li>
                                                                        </ul>
                                                                    </li>
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>


        </div>


        <div class="cont_box">
            <div class="btn_wrap center">
                <a href="#" class="btn basic grey">취소</a>
                <a href="#" class="btn basic">저장</a>
            </div>
        </div>
    </div>

</section>
</body>
</html>