<%@ page language="java" contentType="text/html; charset=utf-8" %>
<%@ page import="java.io.*" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring" %>
<%@ include file="/jsp/common/include/localemessage.jsp" %>
<%
    response.setHeader("Pragma", "No-cache");
    response.setHeader("Cache-Control", "no-cache");
    response.setHeader("Expires", "0");
%>

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
    <jsp:include page="/jsp/common/include/css.jsp"/>
    <jsp:include page="/jsp/common/include/script.jsp"/>

    <link href="<c:url value="/addon/bootstrap-5.3.2/css/bootstrap.min.css"/>" rel="stylesheet" />
    <script src="<c:url value="/addon/bootstrap-5.3.2/js/bootstrap.bundle.min.js"/>"></script>
    <link href="<c:url value="/addon/select2-4.1.0/css/select2.min.css"/>" rel="stylesheet"/>
    <link href="<c:url value="/addon/select2-4.1.0/css/select2-bootstrap.min.css"/>" rel="stylesheet"/>
    <script src="<c:url value="/addon/select2-4.1.0/js/select2.min.js"/>"></script>
    <link href="<c:url value="/addon/bootstrap5-toggle-5.0.6/css/bootstrap5-toggle.min.css"/>" rel="stylesheet" />
    <script src="<c:url value="/addon/bootstrap5-toggle-5.0.6/js/bootstrap5-toggle.jquery.min.js"/>"></script>
    <link href="<c:url value="/addon/bootstrap-icons-1.11.3/bootstrap-icons.min.css"/>" rel="stylesheet" />
    <script src="<c:url value="/addon/jquery-validation-1.19.5/jquery.validate.min.js"/>"></script>
    <script src="<c:url value="/addon/jquery-validation-1.19.5/localization/messages_ko.min.js"/>"></script>
    <script src="<c:url value="/addon/jquery-confirm/jquery-confirm.min.js"/>"></script>
    <link href="<c:url value="/addon/jquery-confirm/jquery-confirm.min.css"/>" rel="stylesheet"/>

    <script language="javascript">
        var url = '<c:url value="/onl/admin/authoutbound/outboundFixedCredentialMan.json" />';
        var url_view = '<c:url value="/onl/admin/authoutbound/outboundFixedCredentialMan.view" />';
        var isDetail = false;

        $.fn.select2.defaults.set( "theme", "bootstrap" );
        function init(key, callback) {
            $.ajax({
                type : "POST",
                url:url,
                dataType:"json",
                data:{cmd: 'LIST_DETAIL_COMBO'},
                success:function(json){
                    new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=adapterGroupName]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.toList).rendering();
                    $('#adapterGroupName').select2();

                    if (typeof callback === 'function') {
                        callback(key);
                    }
                },
                error:function(e){
                    alert(e.responseText);
                }
            });
        }

        function detail(key) {
            $("input[name=grantType]").attr('readonly',true);
            if (!isDetail){
                $("input[name=grantType]").val('fixed_token');
                return;
            }
            $.ajax({
                type: "POST",
                url: url,
                dataType: "json",
                data: {
                    cmd: 'DETAIL',
                    adapterGroupName: key
                },
                success: function (json) {
                    var data = json;
                    $('#adapterGroupName').attr("readonly", "readonly");
                    $("select[name=adapterGroupName]").val(data["adapterGroupName"]).trigger('change');
                    $("#ajaxForm input,#ajaxForm textarea").each(function(){
                        var name = $(this).attr("name");
                        var tag  = $(this).prop("tagName").toLowerCase();
                        $(tag+"[name="+name+"]").val(data[name.toLowerCase()]);
                        if(data[name]){
                            $(tag+"[name="+name+"]").val(data[name]);
                        }
                    });
                    if('Y' == data.useYn){
                        $('#toggleUseYn').bootstrapToggle('on');
                    }
                },
                error: function (e) {
                    alert(e.responseText);
                }
            });

        }

        $(document).ready(function () {
            var returnUrl = getReturnUrlForReturn();
            var key = "${param.adapterGroupName}";

            if (key != "" && key != "null") {
                isDetail = true;
            }

            init(key, detail);

            $("#btn_modify").click(function () {
                var postData = $('#ajaxForm').serializeArray();
                if (isDetail) {
                    postData.push({
                        name: "cmd",
                        value: "UPDATE"
                    });
                    
                    postData.push({
                        name: "intervalSec",
                        value: 0
                    });
   
                } else {
                    postData.push({
                        name: "cmd",
                        value: "INSERT"
                    });
                    
                    postData.push({
                        name: "intervalSec",
                        value: 0
                    });
                }
                const useYn = $('#toggleUseYn').prop('checked') ? 'Y' : 'N';
                postData.push({ name: "useYn" , value: useYn});

                $.ajax({
                    type: "POST",
                    url: url,
                    data: postData,
                    success: function (args) {
                        alert("<%= localeMessage.getString("common.saveMsg") %>");
                        goNav(returnUrl);//LIST로 이동
                    },
                    error: function (e) {
                        alert(e.responseText);
                    }
                });
            });
            $("#btn_delete").click(function () {
                var postData = [{name: 'adapterGroupName', value: $('#adapterGroupName').val()}]
                postData.push({
                    name: "cmd",
                    value: "DELETE"
                });
                $.ajax({
                    type: "POST",
                    url: url,
                    data: postData,
                    success: function (args) {
                        alert("<%= localeMessage.getString("common.deleteMsg") %>");
                        goNav(returnUrl);//LIST로 이동
                    },
                    error: function (e) {
                        alert(e.responseText);
                    }
                });
            });
            $("#btn_previous").click(function () {
                goNav(returnUrl);//LIST로 이동
            });

            $('#toggleClientSecret').click(function () {
                const inputType = $("#clientSecret").prop("type");
                if(inputType == 'password'){
                    $("#clientSecret").prop("type", "text");
                    $(this).css('color', 'red');
                }else{
                    $("#clientSecret").prop("type", "password");
                    $(this).css('color', 'rgb(65 125 200)');
                }
            });
            buttonControl(key);
            titleControl(key);
        });
    </script>
</head>
<body>
<div class="right_box">
    <div class="content_top">
        <ul class="path">
            <li><a href="#">${rmsMenuPath}</a></li>
        </ul>
    </div><!-- end content_top -->
    <div class="content_middle" id="content_middle">
        <div class="search_wrap">
            <button type="button" class="cssbtn" id="btn_delete" level="W" status="DETAIL"><i class="material-icons">delete</i> <%= localeMessage.getString("button.delete") %></button>
            <button type="button" class="cssbtn" id="btn_modify" level="R" status="DETAIL,NEW"><i class="material-icons">save</i> <%= localeMessage.getString("button.modify") %></button>
            <button type="button" class="cssbtn" id="btn_previous" level="R" status="DETAIL,NEW"><i class="material-icons">arrow_back</i> <%= localeMessage.getString("button.previous") %></button>
        </div>
        <div class="title" id="title" >${rmsMenuName}</div>

        <form id="ajaxForm">
            <fieldset class="groupbox-border" style="margin-top:0px !important">
                <div class="row mb-3">
                    <legend class="groupbox-border">BASIC OPTIONS</legend>
                </div>
                <div class="row mb-3">
                    <div class="form-group col-md-4">
                        <label for="adapterGroupName"><span class="material-icons-outlined">outlet</span> 어댑터 명</label>
                        <select id="adapterGroupName" class="form-control" name="adapterGroupName" style="width: 100%" required>
                        </select>
                    </div>
                    <div class="form-group col-md-2">
                        <label for="grantType"><span class="material-icons-outlined">verified_user</span> Grant Type</label>
                        <div class="input-group">
                            <input type="text" class="form-control" id="grantType" name="grantType" required></input>
                        </div>
                    </div>
                     <div class="form-group col-md-5" style="display:none">
                        <label for="url"><span class="material-icons-outlined">link</span> Url</label>
                        <input type="text" class="form-control" id="url" name="url" required  type="hidden" value="test"></input>
                    </div>
                    <div class="form-group col-md-1">
                        <label for="toggleUseYn"><span class="material-icons">check_circle</span> 사용여부</label><br>
                        <input type="checkbox" name="toggleUseYn" id="toggleUseYn" data-toggle="toggle" data-onstyle="success" data-on="사용" data-off="미사용" data-width="100" data-offstyle="secondary" data-style="ios" />
                    </div>
                </div>
				 <div class="row mb-3" style="display:none">
                    <div class="form-group col-md-12">
                        <label for="clientId"><span class="material-icons-outlined">lock</span> Client ID</label>
                        <input type="text" class="form-control" id="clientId" name="clientId" required  type="hidden"></input>
                    </div>
                </div> -->
                <div class="row mb-3">
                    <div class="form-group col-md-12">
                        <label for="clientSecret"><span class="material-icons-outlined">key</span> fixed Token</label>
                        <div class="input-group">
                            <input type="password" class="form-control" id="clientSecret" name="clientSecret" autocomplete="new-password" required></input>
                            <span class="input-group-text">
                                <span class="material-icons-outlined" style="cursor: pointer; font-size: 1.25em; padding-top: 3px; user-select: none;" id="toggleClientSecret">visibility</span>
                            </span>
                        </div>
                    </div>
                </div>
                 <div class="row mb-3">
                    <div class="form-group col-md-6" style="display:none">
                        <label for="scope"><span class="material-icons-outlined">work</span> Scope(','로 구분)</label>
                        <input type="text" class="form-control" id="scope" name="scope" required type="hidden"></input>
                    </div>
                </div>
            </fieldset>
        </form>
    </div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>