<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ page import="java.io.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ 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=utf-8">
<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" />
<style>
	
	label{
		color:#003c78
	}
	
	.tooltip-inner {
    	min-width: 300px; /* the minimum width */
	}

	.form-check-input{
		margin-left: 0px;
	}
	.form-check-label{
		margin-left: 1.25rem;
	}

	input[readonly] {
		background-color: #eeeeee;
		border-color: #cccccc;
	}
</style>
<script language="javascript" >
	var isDetail = false;
	var url ='<c:url value="/onl/transaction/simpleinterface/simpleInterfaceMan.json" />';
	var returnUrl ;
	var headerValues = [];
	var headerNames = [];
	let isHeaderRouting = false;
	let fromAdapterMessageKeyMap ;

	$.fn.select2.defaults.set( "theme", "bootstrap" );
	function init(url,key,callback){
		$('#checkApiCacheUrlKey').on('click', function(e) {
			e.preventDefault();
		});

			$.ajax({
				type : "POST",
				url:url,
				dataType:"json",
				data:{cmd: 'LIST_DETAIL_COMBO'},
				success:function(json){
					new makeOptions("BIZCODE","BIZNAME").setObj($("select[name=eaiBzwkDstcd]")).setData(json.bizList).setFormat(codeName3OptionFormat).rendering();
					new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=fromAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.fromList).rendering();
					new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=toAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.toList).rendering();
					new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=fromResponseAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.toList).rendering();
					new makeOptions("ADPTRBZWKGROUPNAME","ADPTRBZWKGROUPDESC").setObj($("select[name=toResponseAdapter]")).setFormat(codeName3OptionFormat).setNoValueInclude(true).setData(json.fromList).rendering();
					//if(key == "") setSearchable(selectName);	// 콤보에 searchable 설정

					if (typeof callback === 'function') {
						callback(url,key);
					}
					$('#eaiBzwkDstcd').select2();

					fromAdapterMessageKeyMap = json.fromAdapterMessageKeyMap;
				},
				error:function(e){
					alert(e.responseText);
				}
			});
	}
	var jsonUrl ;
	function changeAdapterUrl(targetPartId, adapterGroupName){
		$.ajax({
			type : "POST",
			url: jsonUrl,
			dataType:"json",
			data:{cmd: 'DETAIL_ADAPTER_URL', adapterGroupName: adapterGroupName},
			success:function(json){
				$(targetPartId).text(json.urlPath);
			},
			error:function(e){
				alert(e.responseText);
			}
		});
	}
	function getAdapterMessageType(adapterGroupName){
		let type;
		$.ajax({
			type : "POST",
			url: jsonUrl,
			dataType:"json",
			async: false,
			data:{cmd: 'DETAIL_ADAPTER_GROUP', adapterGroupName: adapterGroupName},
			success:function(json){
				switch (json.ADPTRMSGDSTCD) {
				  case 'UJN':
					  type = 'UJSON'; break;
				  case 'UXM':
					  type = 'UXML' ; break;
				  case 'JSN':
					  type = 'JSON'; break;
				  case 'ASC':
					  type = 'BYTES'; break;
				  default:
					  type = json.ADPTRMSGDSTCD; break;
				}
			},
		});
		return type;
	}

	// 어댑터 설정 정보 객체에 인바운드 응답 관련 설정 추가
	const adapterConfig = {
		inbound: {
			methodSelectId: '#inboundHttpMethod',
			restPathInputId: '#inboundRestPath',
			adapterUrlId: '#fromAdapterUrl',
			isRestTypeAdapter: false // 초기값, 실제 값은 선택에 따라 결정됨
		},
		outbound: {
			methodSelectId: '#outboundHttpMethod',
			restPathInputId: '#outboundRestPath',
			adapterUrlId: '#toAdapterUrl',
			isRestTypeAdapter: false // 초기값, 실제 값은 선택에 따라 결정됨
		},
		inboundResponse: {
			methodSelectId: '#inboundResponseHttpMethod',
			restPathInputId: '#inboundResponseRestPath',
			adapterUrlId: '#fromResponseAdapterUrl', // 가정으로 추가함
			isRestTypeAdapter: false // 초기값, 실제 값은 선택에 따라 결정됨
		},
		outboundResponse: {
			methodSelectId: '#outboundResponseHttpMethod',
			restPathInputId: '#outboundResponseRestPath',
			adapterUrlId: '#toResponseAdapterUrl',
			isRestTypeAdapter: false // 초기값, 실제 값은 선택에 따라 결정됨
		}
	};

	function isRestTypeAdapter(adapterSelectValue) {
		return adapterSelectValue.includes('_RST_');
	}

	// UI 업데이트 로직 수정
	function updateAdapterUI(adapterSettings) {
		$(adapterSettings.methodSelectId).prop('disabled', !adapterSettings.isRestTypeAdapter);
		$(adapterSettings.restPathInputId).prop('disabled', !adapterSettings.isRestTypeAdapter);
		if (adapterSettings.isRestTypeAdapter) {
			changeAdapterUrl(adapterSettings.adapterUrlId, adapterSettings.adapterGroupName);
		} else {
			$(adapterSettings.adapterUrlId).text('');
		}
	}

	// 어댑터 선택 변경 시 호출되는 함수 수정
	function adapterSelectChange(adapterType, adapterGroupName) {
		const adapterSettings = adapterConfig[adapterType];
		adapterSettings.adapterGroupName = adapterGroupName;
		adapterSettings.isRestTypeAdapter = isRestTypeAdapter(adapterGroupName);
		updateAdapterUI(adapterSettings);

		// asyncSync 타입에 대한 특별 처리 로직
		if (adapterType === 'inboundResponse' && adapterSettings.isRestTypeAdapter) {
			// 인바운드 응답 설정 업데이트
			updateAdapterUI(adapterConfig.inboundResponse);
		}
	}

	function setHeaderRoutingLabel(){
		let label = headerNames.map(function(name, index) {
			const value = headerValues[index];
			return name + '=' + value;
		}).join(';');
		if(headerValues.length > 0){
			$("#headerRoutingButton").text('Headers ['+label+']');
		}else{
			$("#headerRoutingButton").text('HTTP 헤더 라우팅 정보 없음');
		}
	}

	function initHeaders(headerNames){
		// 기존의 모든 헤더 항목을 제거합니다.
		$('#headerPairs').empty();

		headerNames.forEach(function(headerName) {
			addHeader(headerName);
		});
	}

	function addHeader(headerName) {
		const newPairHtml = '<div class="form-row align-items-center header-pair">' +
				'<div class="col-5" style="text-align: right;">' +
				'<label class="form-label">' + headerName + '</label>' +
				'</div>' +
				'<div class="col-5">' +
				'<input type="text" class="form-control mb-2" name="headerValue" placeholder="헤더 값">' +
				'</div>' +
				'</div>';
		$('#headerPairs').append(newPairHtml);
	}

	function detail(url,key){
		jsonUrl = url;
		if (!isDetail)return;
		$.ajax({
			type : "POST",
			url:url,
			dataType:"json",
			data:{cmd: 'DETAIL', eaiSvcName : key},
			success:function(json){
				var data = json;
				$("input[name=eaiSvcName]").attr('readonly',true);
				$("#ajaxForm input, #ajaxForm textarea").each(function(){
					const name = $(this).attr("name");
					const tag  = $(this).prop("tagName").toLowerCase();
					const type  = $(this).prop("type").toLowerCase();
					if(type === 'radio'){
						return;
					}
					$(tag+"[name="+name+"]").val(data[name]);
				});
				
				$("select[name=eaiBzwkDstcd]"            ).val(data["eaiBzwkDstcd"]);//업무구분코드
				$("select[name=fromAdapter]"             ).val(data["fromAdapter"]);//fromAdapter
				$("select[name=toAdapter]"               ).val(data["toAdapter"]);//toAdapter
				$("select[name=fromResponseAdapter]"               ).val(data["fromResponseAdapter"]);//fromResponseAdapter
				$("select[name=toResponseAdapter]"               ).val(data["toResponseAdapter"]);//toResponseAdapter

				$('#inboundHttpMethod').val(data.inboundHttpMethod);
				$('#outboundHttpMethod').val(data.outboundHttpMethod);
				$('#inboundResponseHttpMethod').val(data.inboundResponseHttpMethod);

				if(data['inboundRequestLayout']!=null && data['outboundRequestLayout']!=null){
					$('#requestTransform').removeAttr('disabled');
				}
				if(data['inboundResponseLayout']!=null && data['outboundResponseLayout']!=null){
					$('#responseTransform').removeAttr('disabled');
				}
				
				if('Y' == data.transformYn){
					$('#toggleTransformYn').bootstrapToggle('on');
				}
				if('Y' == data.sinYn){
					$('#toggleSimYn').bootstrapToggle('on');
				}
				if('Y' == data.apiCacheYn){
					$('#toggleApiCacheYn').bootstrapToggle('on');
				}
                if(data.apiCacheType != null && data.apiCacheType.includes("P")){
                    $('#checkApiCacheParamKey').prop('checked', true);
                }

				$('#eaiBzwkDstcd').trigger('change');

				transformSetStateChange();

                const interfaceId = data['eaiSvcName'].slice(0, -2);
                $('#eaiSvcName').val(interfaceId);
                const sendRecvType = data['eaiSvcName'].slice(-2, -1);
                $('#sendRecvType').val(sendRecvType);
                const inOutType = data['eaiSvcName'].slice(-1);
                $('#inOutType').val(inOutType);

				$('#eaiBzwkDstcd').attr("readonly", "readonly");
				$('#eaiSvcName').attr("readonly", "readonly");
				$('#sendRecvType').attr("readonly", "readonly");
				$('#inOutType').attr("readonly", "readonly");
				checkTagVariableUrl();

				setInboundRoutingSlide();

				if(json.headerValues != null){
					headerValues = json.headerValues;
				}
				setHeaderRoutingLabel();

				switch(data.syncAsyncType){
					case 'async': $('#btnTypeAsync').prop('checked', true);	break;
					case 'asyncSync': $('#btnTypeAsyncSync').prop('checked', true);	break;
					case 'syncAsync': $('#btnTypeSyncAsync').prop('checked', true);	break;
				}
				if(sendRecvType == 'R'){
					$('#btnTypeResponse').prop('checked', true);
				}
				if(inOutType == '2'){
					$('#btnTypeOutword').prop('checked', true);
				}
				$("input[name='btnRadioSyncAsync']").change();
				$("input[name='btnRadioSyncAsync']").attr('disabled', true);
				$("input[name='btnRadioReqRes']").attr('disabled', true);
				$("input[name='btnRadioInOut']").attr('disabled', true);


				$("#fromAdapter").change();
				$("#toAdapter").change();
				$("#fromResponseAdapter").change();
				$("#toResponseAdapter").change();
			},
			error:function(e){
				alert(e.responseText);
			}
		});
	}
	
	function layoutBtnStateChange(part){
		const value = $('#'+part+'Layout').val();
		if(value){
			$('#'+part+'Button').text('수정');
		}else{
			$('#'+part+'Button').text('생성');
		}
	}
	
	function mappingBtnStateChange(part){
		const transformName = part.toLowerCase()+'Transform';
		const inboundLayoutName = $('#inbound'+part+'Layout').val();
		const outboundLayoutName = $('#outbound'+part+'Layout').val();
		const value = $('#'+transformName).val();
		if(value){
			$('#'+transformName+'Button').text('수정');
		}else{
			$('#'+transformName+'Button').text('생성');
		}
		if(value || (inboundLayoutName != null && inboundLayoutName != '' 
				&& outboundLayoutName != null && outboundLayoutName != '' )){
			$('#'+transformName+'Button').removeClass('btn-secondary').addClass('btn-primary');
			$('#'+transformName+'ButtonTooltip').tooltip('disable');
			$('#'+transformName+'Button').attr('disabled', false);
			$('#'+transformName+'Button').css('pointer-events','all');
		}else{
			$('#'+transformName+'Button').removeClass('btn-primary').addClass('btn-secondary');
			$('#'+transformName+'ButtonTooltip').tooltip('enable')
			$('#'+transformName+'Button').css('pointer-events','none');
			$('#'+transformName+'Button').attr('disabled', true);
		}
	}
	
	function transformSetStateChange(){
		layoutBtnStateChange('inboundRequest');
		layoutBtnStateChange('outboundRequest');
		layoutBtnStateChange('inboundResponse');
		layoutBtnStateChange('outboundResponse');
		mappingBtnStateChange('Request');
		mappingBtnStateChange('Response');
	}
	
	function addLayoutBtnEvent(part, desc, target){
		 $('#'+part+'Button').on("click", function(event) {
			 modifyLayout(''+part+'Layout', desc, target)
		 });
	}
	
	function openLayoutPopup(layoutPartName){
		const layoutName = $('#'+layoutPartName).val();
		var args = {title:layoutName+' 수정', parent: true};
		var url='<c:url value="/onl/admin/rule/layoutMan.view"/>';
		url += '?cmd=DETAIL';
        url += '&loutName='+layoutName;
        url += '&layoutPartName='+layoutPartName;
        url += '&pop=true';
	    const width = parent.document.body.clientWidth - 30;
	    const height = parent.document.body.clientHeight - 30;
	    showModal(url,args,width,height,null,{fullScreenPopup:true});
	}

    function getFullSvcName(){
        return $('#eaiSvcName').val()+$('#sendRecvType').val()+$('#inOutType').val();
    }

	function openTransformPopup(transformName, transformDesc){
		const svcName = getFullSvcName();
		const svcDesc = encodeURI(encodeURIComponent($('#eaiSvcDesc').val()));
		const cnvsnDesc = encodeURI(encodeURIComponent(transformDesc));
		var args = {title:transformName+' 수정', parent: true};
		var url='<c:url value="/onl/admin/rule/transform2/transform2Man.view"/>';
		url += '?cmd=DETAIL';
		url += '&cnvsnName='+transformName;
		url += '&eaiSvcName='+svcName;
		url += '&eaiSvcDesc='+svcDesc;
		url += '&cnvsnDesc='+cnvsnDesc;
		url += '&pop=true';
		const width = parent.document.body.clientWidth - 30;
		const height = parent.document.body.clientHeight - 30;
		showModal(url,args,width,height,null,{fullScreenPopup: true});
	}
	
	function afterCreatedApi(){
		$("img[level='W'][status*=DETAIL]").show();
		$("img[level='R'][status*=DETAIL]").show();
		$("#btn_modify").attr('src',"<c:url value='/img/btn_modify.png'/>");
		isDetail = true;
		$("input[name=eaiSvcName]").attr('readonly',true);
	}
	
	function modifyLayout(layoutPartName, layoutPartDesc, layoutPostFix){
		if(!isDetail){
			function createApiAction(){
				modifyApi(afterCreatedApi);
			}
			$.confirm({
			    title: 'API 저장',
			    columnClass: 'medium',
			    content: '레이아웃을 생성하기 전에 API를 저장해야 합니다. 저장하시겠습니까?  <br> 업무코드['+$('#eaiBzwkDstcd').val()+'] API 명 ['+getFullSvcName()+']',
			    buttons: {
			        confirm: {
			            text: '저장',
			            btnClass: 'btn-blue',
			            action: createApiAction
			        },
			        cancel: {
			            text: '취소',
			        }
			    }
			});
			return;
		}
		const layoutName = $('#'+layoutPartName).val();
		const bizCd = $('#eaiBzwkDstcd').val();
		const svcName = getFullSvcName();
		const layoutDesc = $('#eaiSvcDesc').val()+" ("+layoutPartDesc+")";
		if(layoutName == null || layoutName == ''){
			const newLayoutName = bizCd+'_'+svcName+'_'+layoutPostFix;
			const adapterPartId = layoutPartName.startsWith('inbound') ? '#fromAdapter' : '#toAdapter';
			const adapterGroupName = $(adapterPartId).val();
			if(adapterGroupName == null || adapterGroupName == ""){
				alert('어댑터가 선택되지 않았습니다. 확인하세요');
				return;
			}
			const messageType = getAdapterMessageType(adapterGroupName);
			function newLayoutAction(){
    			var args = new Object();
    			const layoutUrl ='<c:url value="/onl/admin/rule/layoutMan.json" />';
    			const postData = {
    					cmd: 'INSERT',
    					gridData: '[]',
    					loutPtrnName: messageType,
    					loutName: newLayoutName,
    					loutDesc: layoutDesc,
    					eaiBzwkDstcd: bizCd
    						};
    			$.ajax({
    				type : "POST",
    				url: layoutUrl,
    				data: postData,
    				success:function(){
    					alert("생성완료");
    					$('#'+layoutPartName).val(newLayoutName);
    					transformSetStateChange();
    					openLayoutPopup(layoutPartName);
    				},
    				error:function(e){
    					alert(e.responseText);
    				}
    			});
            }
			$.confirm({
			    title: '신규 레이아웃 생성',
			    columnClass: 'medium',
			    content: layoutPartDesc+' 레이아웃을 생성하시겠습니까? <br> 생성 레이아웃 명 ['+newLayoutName+'] 타입['+messageType+']',
			    buttons: {
			        confirm: {
			            text: '생성',
			            btnClass: 'btn-blue',
			            action: newLayoutAction
			        },
			        cancel: {
			            text: '취소',
			        }
			    }
			});
		}else{
			openLayoutPopup(layoutPartName);
		}
	}
	
	function modifyTransform(reqResType){
		if($('#'+reqResType+'TransformButton').attr('disabled')){
			return;
		}
		const transformName = $('#'+reqResType+'Transform').val();
		const transformDescSubfix = 'request' == reqResType ? '요청매핑' : '응답매핑';
		const bizCd = $('#eaiBzwkDstcd').val();
		const svcName = getFullSvcName();
		const transformDesc = $('#eaiSvcDesc').val()+" ("+transformDescSubfix+")";
		if(transformName == null || transformName == ''){
			const cnvsnType = 'request' === reqResType ? 'REQ' : 'RES';
			const newTransformName = 'TRANSFORM_'+bizCd+'_'+svcName+'_'+cnvsnType;
			const srcLayoutName = 'request' == reqResType ? $('#inboundRequestLayout').val() : $('#outboundResponseLayout').val();
			const tgtLayoutName = 'request' == reqResType ? $('#outboundRequestLayout').val() : $('#inboundResponseLayout').val();
			function updateFirstLayout(newTransformName, transformDesc){
				$.ajax({
    				type : "POST",
    				url: '<c:url value="/onl/admin/rule/transformMan.json" />',
    				data: { cmd: 'UPDATE',
    					gridData: '[]',
    					eaiSvcName: svcName,
    					cnvsnName: newTransformName,
    					cnvsnDesc: transformDesc,
    					cnvsnType,
    					chkForce: false,
    					srcLayoutName,
    					tgtLayoutName,
    					},
    				success:function(){
    					openTransformPopup(newTransformName, transformDesc);
    				},
    				error:function(e){
    					alert(e.responseText);
    				}
    			});
			}
			function newTransformAction(){
    			var args = new Object();
    			const postData = {
    					cmd: 'INSERT',
    					gridData: '[]',
    					cnvsnType,
    					eaiSvcName: svcName,
    					cnvsnName: newTransformName,
    					cnvsnDesc: transformDesc
    					};
    			$.ajax({
    				type : "POST",
    				url: '<c:url value="/onl/admin/rule/transformMan.json" />',
    				data: { cmd: 'INSERT',
    					gridData: '[]',
    					cnvsnType,
    					eaiSvcName: svcName,
    					cnvsnName: newTransformName,
    					cnvsnDesc: transformDesc
    					},
    				success:function(){
    					alert("생성완료");
    					$('#'+reqResType+'Transform').val(newTransformName);
    					transformSetStateChange();
    					updateFirstLayout(newTransformName, transformDesc);
    				},
    				error:function(e){
    					alert(e.responseText);
    				}
    			});
            }
			$.confirm({
			    title: '신규 '+transformDescSubfix+' 생성',
			    columnClass: 'medium',
			    content: transformDescSubfix+'을 생성하시겠습니까? <br> 생성 매핑 룰 명 ['+newTransformName+']',
			    buttons: {
			        confirm: {
			            text: '생성',
			            btnClass: 'btn-blue',
			            action: newTransformAction
			        },
			        cancel: {
			            text: '취소',
			        }
			    }
			});
		}else{
			openTransformPopup(transformName, transformDesc);
		}
	}
	
	function modifyApi(callback){
		//if (!isValid())return;
		//업무추출키 control
		if(!$("#ajaxForm").valid()){
			return;
		}
		if ($("select[name=fromAdapter] option:selected").attr("std") == "K"){
			//표준일경우 업무추출키 삭제되어야 됨
			$("input[name=bzwkSvcKeyName]").val("");
		}else{
			//표준이 아닐경우 업무추출키 셋팅되어야 됨
			$("input[name=bzwkSvcKeyName]").val($("input[name=eaiTranName]").val());
		}

		var postData = $('#ajaxForm').serializeArray();
		if (isDetail){
			postData.push({ name: "cmd" , value:"UPDATE"});
		}else{
			postData.push({ name: "cmd" , value:"INSERT"});
		}
		postData.push({ name: "interfaceId" , value: $("input[name=eaiSvcName]").val()});
		postData = postData.filter(obj => obj.name !== "eaiSvcName");
		postData.push({ name: "eaiSvcName" , value: getFullSvcName()});
		const transformYn = $('#toggleTransformYn').prop('checked') ? 'Y' : 'N';
		const simYn = $('#toggleSimYn').prop('checked') ? 'Y' : 'N';
		const apiCacheYn = $('#toggleApiCacheYn').prop('checked') ? 'Y' : 'N';
		const inboundMethod = $('#inboundHttpMethod').val();
		const outboundMethod = $('#outboundHttpMethod').val();

		if(apiCacheYn === 'Y'){
			if(inboundMethod !== 'get'){
				alert("인바운드 메소드가 GET 일 경우에만 API 캐시사용이 가능합니다.");
				return;
			}
			if(outboundMethod !== 'get'){
				alert("아웃바운드 메소드가 GET 일 경우에만 API 캐시사용이 가능합니다.");
				return;
			}
		}

		postData.push({ name: "transformYn" , value: transformYn});
		postData.push({ name: "simYn" , value: simYn});
		postData.push({ name: "apiCacheYn" , value: apiCacheYn});
        let apiCacheType = "U";
        if($('#checkApiCacheParamKey').prop('checked')){
            apiCacheType+="|P";
        }
        postData.push({ name: "apiCacheType" , value: apiCacheType});
		postData.push({ name: "isHeaderRouting" , value: isHeaderRouting});
		// postData.push({name: "headerRoutingPairs", value: JSON.stringify(headerRoutingPairs)})
		headerValues.forEach(headerValue => {
			postData.push({name: "headerValues[]", value: headerValue});
		});

		const syncAsyncType = $("input[name='btnRadioSyncAsync']:checked").val();
		postData.push({ name: "syncAsyncType" , value: syncAsyncType});

		$.ajax({
			type: "POST",
			url:url,
			data: postData,
			success:function(message){
				alert("저장 되었습니다. \n\n[실시간 반영 결과]\n"+JSON.stringify(message));
				if (typeof callback === 'function') {
					callback();
				}else{
					goNav(returnUrl);//LIST로 이동	
				}
			},
			error:function(xhr, status, errorMsg){
				alert(JSON.parse(xhr.responseText).errorMsg);
			}
		});
	}

	function setInboundRoutingSlide(){
		const adapterGroupName = $("#fromAdapter").val();
		const messageKeyList = fromAdapterMessageKeyMap[adapterGroupName]
		if(messageKeyList != null && messageKeyList.length > 0){
			headerNames = messageKeyList;
			isHeaderRouting = true;
			initHeaders(headerNames);
			$('#slideInboundRoutingRule').carousel(0);
			setHeaderRoutingLabel();
		}else{
			isHeaderRouting = false;
			$('#slideInboundRoutingRule').carousel(1);
		}
	}

	$(document).ready(function() {
		makeValidate();
		// var bootstrapButton = $.fn.button.noConflict()
		// $.fn.bootstrapBtn = bootstrapButton;

		returnUrl = getReturnUrlForReturn();
		var key ="${param.eaiSvcName}";
		if (key != "" && key !="null"){
			isDetail = true;
		}
		init(url,key,detail);

		$("input[name='btnRadioSyncAsync']").change(function(){
			changeForm();
		});
		$("input[name='btnRadioReqRes']").change(function(){
			changeForm();
		});
		$("input[name='btnRadioInOut']").change(function(){
			const inOutValue = $("input[name='btnRadioInOut']:checked").val();
			$('#inOutType').val(inOutValue);
		});

		$("#btn_modify").click(modifyApi);
		$("#btn_delete").click(function(){
			var postData = $('#ajaxForm').serializeArray();
			postData.push({ name: "cmd" , value:"DELETE"});

			const syncAsyncType = $("input[name='btnRadioSyncAsync']:checked").val();
			postData.push({ name: "syncAsyncType" , value: syncAsyncType});

			postData = postData.filter(obj => obj.name !== "eaiSvcName");
			postData.push({ name: "eaiSvcName" , value: getFullSvcName() });
			$.ajax({
				type : "POST",
				url:url,
				data:postData,
				success:function(args){
					alert("삭제 되었습니다.");
					goNav(returnUrl);//LIST로 이동
	
				},
				error:function(e){
					alert(e.responseText);
				}
			});
		});
		$("#btn_previous").click(function(){
			goNav(returnUrl);//LIST로 이동
		});

		function callDownload(cmd, targetName){
			const fileName = targetName + '.txt';
			const bzwkDstcd = $('#eaiBzwkDstcd').val();
			const url = '<c:url value="/loader.do" />';
			const postData = [];
			postData.push({ name: "cmd" , value: cmd});
			postData.push({ name: "control" , value:"download"});
			postData.push({ name: "bzwkDstcd" , value: bzwkDstcd});
			postData.push({ name: "fileName" , value: fileName});
			return new Promise((resolve, reject) => {
				$.ajax({
					type: "POST",
					url: url,
					data: postData,
					success: function (response) {
						resolve(response);
					},
					error: function (error) {
						reject(error);
					}
				});
			});
		}
		async function doDownload(type, targetName){
			if(targetName != null && targetName.trim() !== ''){
				const response = await callDownload(type, targetName);
				return '<br>'+targetName+".txt, msg: "+response.trim();
			}
			return '';
		}
		$("#btn_download").click(async function(){
			try {
				const interfaceId = getFullSvcName();
				let response = await callDownload('interface', interfaceId);
				let resultMessage = '[인터페이스]<br>'+interfaceId+".txt, msg: "+response.trim();

				let layoutResultMessage = await doDownload('layout', $('#inboundRequestLayout').val());
				layoutResultMessage += await doDownload('layout', $('#outboundRequestLayout').val());
				layoutResultMessage += await doDownload('layout', $('#outboundResponseLayout').val());
				layoutResultMessage += await doDownload('layout', $('#inboundResponseLayout').val());
				if(layoutResultMessage != null && layoutResultMessage.trim() != ''){
					resultMessage += '<br>[레이아웃]'+layoutResultMessage;
				}

				let transformResultMessage = await doDownload('transform', $('#requestTransform').val());
				transformResultMessage += await doDownload('transform', $('#responseTransform').val());
				if(transformResultMessage != null && transformResultMessage.trim() != ''){
					resultMessage += '<br>[변환]'+transformResultMessage;
				}
				// alert(resultMessage);
				// $.alert({
				// 	columnClass: 'col-md-8',
				// 	title: '다운로드 처리 결과',
				// 	content: resultMessage,
				// });
				window.parent.callAlert('다운로드 처리 결과', resultMessage);
				// 처리된 데이터로 무언가를 수행
			} catch (error) {
				console.error(error);
				// 에러 처리
			}
		});
		buttonControl(isDetail);
		titleControl(isDetail);
		$('#toggleApiCacheYn').change(function() {
			if($(this).prop('checked')){
				$('#collapseApiCache').collapse('show');
			}else{
				$('#collapseApiCache').collapse('hide');
			}
		})
		$('#toggleTransformYn').change(function() {
			if($(this).prop('checked')){
				$('#collapseTransform').collapse('show');
			}else{
				$('#collapseTransform').collapse('hide');
			}
	    })
		$('#toggleSimYn').change(function() {
			if($(this).prop('checked')){
				$('#slideOutboundAdapter').carousel(0);
			}else{
				$('#slideOutboundAdapter').carousel(1);
			}
		});
	     $('[data-bs-toggle="tooltip"]').tooltip();
		 
		 addLayoutBtnEvent('inboundRequest', '인바운드 요청', 'SRCS');
		 addLayoutBtnEvent('outboundRequest', '아웃바운드 요청', 'TGTS');
		 addLayoutBtnEvent('outboundResponse', '아웃바운드 응답', 'TGTR');
		 addLayoutBtnEvent('inboundResponse', '인바운드 응답', 'SRCR');
		 window.addEventListener('message', function(e) {
			 const popupMessage = e.data;
			 if('DELETE' == popupMessage.cmd){
				 if('layout' == popupMessage.type){
				 	$('#'+popupMessage.layoutPartName).val('');
				 }
				 if('transform' == popupMessage.type){
					 const partName = popupMessage.transformName.endsWith('REQ') ? '#requestTransform' : '#responseTransform'; 
				 	$(partName).val('');
				 }
				 transformSetStateChange();
			 }
		 });

		 $('#requestTransformButton').on("click", function(event) {
			 modifyTransform('request');
		 });
		 $('#responseTransformButton').on("click", function(event) {
			 modifyTransform('response');
		 });
		 // modifyLayout('inboundRequestLayout', '인바운드 요청', 'CBSS')

		// 함수 사용 예시에 인바운드 응답 처리 추가
		$("#fromAdapter").change(function() {
			const adapterGroupName = $(this).val();
			adapterSelectChange('inbound', adapterGroupName);
		});

		$("#toAdapter").change(function() {
			const adapterGroupName = $(this).val();
			adapterSelectChange('outbound', adapterGroupName);
		});

		$("#fromResponseAdapter").change(function() {
			if ($("input[name='btnRadioSyncAsync']:checked").val() === 'asyncSync') {
				const adapterGroupName = $(this).val();
				adapterSelectChange('inboundResponse', adapterGroupName);
			}
		});

		$("#toResponseAdapter").change(function() {
			if ($("input[name='btnRadioSyncAsync']:checked").val() === 'syncAsync') {
				const adapterGroupName = $(this).val();
				adapterSelectChange('outboundResponse', adapterGroupName);
			}
		});

		$('#outboundRestPath').on('input', function() {
			checkTagVariableUrl();
		});

		function setupHeaderPairs() {
			headerValues.forEach(function(header, index) {
				$('#headerPairs .header-pair:eq(' + index + ') input[name="headerValue"]').val(header);
			});
		}

		// 모달이 열릴 때마다 헤더 페어 설정
		$('#routingModal').on('show.bs.modal', setupHeaderPairs);

		// 저장 로직
		$('#saveRouting').click(function() {
			headerValues = [];
			$('#headerPairs .header-pair').each(function() {
				var headerValue = $(this).find('input[name="headerValue"]').val();
				if (headerValue !== '') {
					headerValues.push(headerValue);
				}
			});

			setHeaderRoutingLabel();

			// 모달 닫기
			$('#routingModal').modal('hide');
		});

		// 조건에 따른 display 설정을 위한 함수
		function setDisplay(selector, condition) {
			$(selector).css('display', condition ? 'flex' : 'none');
		}

		function changeForm(){
			const syncAsyncValue = $("input[name='btnRadioSyncAsync']:checked").val();
			const reqResValue = $("input[name='btnRadioReqRes']:checked").val();

			// 각각의 요소에 대해 조건을 검사하여 display 속성 설정
			setDisplay('#fromResponseAdapterRow', syncAsyncValue === 'asyncSync');
			setDisplay('#inboundResponseMethodPathRow', syncAsyncValue === 'asyncSync');
			setDisplay('#toResponseAdapterRow', syncAsyncValue === 'syncAsync');
			setDisplay('#outboundResponseMethodPathRow', syncAsyncValue === 'syncAsync');

			if(syncAsyncValue === 'async' ) {
				$("input[name='btnRadioReqRes']").attr('disabled', false)
				$('#sendRecvType').val(reqResValue);
			} else {
				$("input[name='btnRadioReqRes']").attr('disabled', true);
				$("#btnTypeRequest").prop('checked', true);
			}

			// 초기 상태 설정: 'async'가 아닐 경우 또는 reqResValue가 'S'일 경우
			setDisplay('#rowRequestTransform', !(syncAsyncValue === 'async' && reqResValue !== 'S'));
			setDisplay('#rowResponseTransform', !(syncAsyncValue === 'async' && reqResValue === 'S'));
		}
	});

	function checkTagVariableUrl(){
		// 이벤트 처리 로직을 여기에 작성합니다.
		const changedValue = $('#outboundRestPath').val();
		const regex = /\{.*\}/;

		if (regex.test(changedValue)) {
			$('#tagVariableUrl').css('display', 'inline');
		} else {
			$('#tagVariableUrl').css('display', 'none');
		}
	}

	function makeValidate(){
		 $.validator.addMethod("idRegex", function(value, element) {
		        return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
		 }, "ID값은 영문자와 숫자만 허용됩니다.");
		$("#ajaxForm").validate({
			ignore: ":hidden, [readonly=readonly]",
			rules: {
				eaiSvcName: {required: true, idRegex: true}
			},
			//messages: {
			//	eaiSvcName: "API 명을 입력하세요."
			//},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				// Add the `invalid-feedback` class to the error element
				error.addClass( "invalid-feedback" );

				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.next( "label" ) );
				} else {
					if($(element).next() != null && 'input-group-prepend' == $(element).next().attr('class')){
						error.insertAfter( $(element).next().get(0) );
					}else{
						error.insertAfter( element );
					}
				}
			},
			highlight: function ( element, errorClass, validClass ) {
				$( element ).addClass( "is-invalid" ).removeClass( "is-valid" );
			},
			unhighlight: function (element, errorClass, validClass) {
				$( element ).addClass( "is-valid" ).removeClass( "is-invalid" );
			}
		});
	}
	function displaySelectedValue() {
		var selectedValue = document.querySelector('input[name="exampleRadios"]:checked').value;
		document.getElementById('selectedValue').textContent = "Selected Value: " + selectedValue;
	}
</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" style="margin-top: 40px">
				<div class="search_wrap">
<%--					<button type="button" class="cssbtn" id="btn_download" level="W" status="DETAIL"><i class="material-icons">download</i> <%= localeMessage.getString("button.download") %></button>--%>
					<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" style="font-size:1.4em">${rmsMenuName}</div>
				<form id="ajaxForm">
					<input type="hidden" name="sevrLogLvelNo" ></input>
					<fieldset class="groupbox-border" style="margin-top:0px !important">
	    			<legend class="groupbox-border">BASIC OPTIONS</legend>
					<div class="row">
						<div class="form-group col-md-2">
							<label for="eaiBzwkDstcd"><span class="material-icons-outlined">work</span> 업무구분</label>
							<select id="eaiBzwkDstcd" class="form-select" name="eaiBzwkDstcd" style="width: 100%">
							</select>
						</div>
						<div class="form-group col-md-3">
							<label for="eaiSvcName"><span class="material-icons-outlined">badge</span> 인터페이스 ID</label>
							<div class="input-group">
								<input type="text" class="form-control" id="eaiSvcName" name="eaiSvcName" required>
								<span class="input-group-text" id="sendRecvTypeSpan" style="padding: 0; border: none;">
									<input type="text" id="sendRecvType" name="sendRecvType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" value="S">
								</span>
								<span class="input-group-text" id="inOutTypeSpan" style="padding: 0; border: none;">
									<input type="text" id="inOutType" name="inOutType" class="ignore form-control" readonly="readonly" style="width: 40px; text-align: center; border-radius: 0; margin-left: -1px;" value="1">
								</span>
							</div>
						</div>
						<div class="form-group col-md-5">
							<label for="eaiSvcDesc"><span class="material-icons-outlined">chat</span> 설명</label>
							<input type="text" class="form-control" id="eaiSvcDesc" name="eaiSvcDesc" required></input>
						</div>
						<div class="form-group col-md-1" style="display: none">
							<label for="toggleApiCacheYn"><span class="material-icons">snippet_folder</span> 응답캐시</label><br>
							<input type="checkbox" name="toggleApiCacheYn" id="toggleApiCacheYn" data-toggle="toggle" data-onstyle="success"  data-on="사용" data-off="미사용" data-width="100" data-offstyle="secondary" data-style="ios" />
						</div>
						<div class="form-group col-md-1">
							<label for="toggleTransformYn"><span class="material-icons">account_tree</span> 전문변환</label><br>
							<input type="checkbox" name="toggleTransformYn" id="toggleTransformYn" data-toggle="toggle" data-onstyle="success"  data-on="사용" data-off="미사용" data-width="100" data-offstyle="secondary" data-style="ios" />
						</div>
						<div class="form-group col-md-1">
							<label for="toggleSimYn"><span class="material-icons" >science</span> 가상응답</label><br>
<%--							<span id="toggleSimYnTooltip" tabindex="0" data-bs-toggle="tooltip" data-html="true" title="REST 타입 아웃바운드 어댑터만<br>가상응답 사용 가능">--%>
								<input type="checkbox" name="toggleSimYn" id="toggleSimYn" data-toggle="toggle" data-onstyle="success" data-on="사용" data-off="미사용" data-width="100" data-offstyle="secondary" data-style="ios"/>
<%--							</span>--%>
						</div>
                    </div>
					</fieldset>

					<fieldset class="groupbox-border" style="margin-top:0px !important">
						<legend class="groupbox-border">INTERFACE TYPE</legend>
						<div class="row">
							<div class="form-group col-md-3">
								<label for="eaiBzwkDstcd">Sync/Async 타입</label>
								<div class="btn-group" id="btnGroupSyncAsync" role="group" aria-label="Basic radio toggle button group">
									<input type="radio" class="btn-check" name="btnRadioSyncAsync" id="btnTypeSync" value="sync" checked>
									<label class="btn btn-outline-primary" for="btnTypeSync"><i class="bi bi-arrow-left-right"></i> Sync</label>

									<input type="radio" class="btn-check" name="btnRadioSyncAsync" id="btnTypeAsync" value="async">
									<label class="btn btn-outline-primary" for="btnTypeAsync"><i class="bi bi-arrow-right"></i> Async</label>

									<input type="radio" class="btn-check" name="btnRadioSyncAsync" id="btnTypeAsyncSync" value="asyncSync">
									<label class="btn btn-outline-primary" for="btnTypeAsyncSync"><i class="bi bi-arrow-return-left"></i> A > S</label>

									<input type="radio" class="btn-check" name="btnRadioSyncAsync" id="btnTypeSyncAsync" value="syncAsync">
									<label class="btn btn-outline-primary" for="btnTypeSyncAsync"><i class="bi bi-share-fill"></i> S > A</label>
								</div>
							</div>
							<div class="form-group col-md-3">
								<label for="eaiBzwkDstcd">요청/응답 구분</label><br>
								<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
									<input type="radio" class="btn-check" name="btnRadioReqRes" id="btnTypeRequest" value="S" disabled checked>
									<label class="btn btn-outline-primary" for="btnTypeRequest"><i class="bi bi-arrow-bar-right"></i> 요청</label>

									<input type="radio" class="btn-check" name="btnRadioReqRes" id="btnTypeResponse" value="R" disabled>
									<label class="btn btn-outline-primary" for="btnTypeResponse"><i class="bi bi-arrow-bar-left"></i> 응답</label>
								</div>
							</div>
							<div class="form-group col-md-3">
								<label for="eaiBzwkDstcd">당/타발 구분</label><br>
								<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
									<input type="radio" class="btn-check" name="btnRadioInOut" id="btnTypeInword" value="1" checked>
									<label class="btn btn-outline-primary" for="btnTypeInword"><i class="bi bi-arrow-right-circle"></i> 당발</label>

									<input type="radio" class="btn-check" name="btnRadioInOut" id="btnTypeOutword" value="2">
									<label class="btn btn-outline-primary" for="btnTypeOutword"><i class="bi bi-arrow-left-circle"></i> 타발</label>
								</div>
							</div>
						</div>
					</fieldset>

					<fieldset class="groupbox-border">
	    			<legend class="groupbox-border">ADAPTERS</legend>
					<div class="row">
						<div class="form-group col-md-6">
							<label for="fromAdapter"><span class="material-icons">login</span> INBOUND 어댑터</label>
							<select id="fromAdapter" class="form-select" name="fromAdapter" required></select>
							<small id="fromAdapterUrl" class="form-text text-muted" style="margin-bottom:-20px"></small>
						</div>
						<div class="form-group col-md-6">
							<label for="toAdapter"><span class="material-icons">logout</span> OUTBOUND 어댑터</label>
							<div id="slideOutboundAdapter" class="carousel slide" data-ride="carousel" data-interval="false">
								<div class="carousel-inner" style="margin-bottom:-20px">
									<div class="carousel-item" style="text-align: center;">
										<h1 style="font-family: Righteous">USING SIMULATION ADAPTER</h1>
									</div>
									<div class="carousel-item active">
										<select id="toAdapter" class="form-select" name="toAdapter" required></select>
										<small id="toAdapterUrl" class="form-text text-muted"></small>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="row" id="fromResponseAdapterRow" style="display: none">
						<div class="form-group col-md-6">
							<label for="fromResponseAdapter"><span class="material-icons">keyboard_return</span> INBOUND (ASYNC) 응답 어댑터</label>
							<select id="fromResponseAdapter" class="form-select" name="fromResponseAdapter" required></select>
							<small id="fromResponseAdapterUrl" class="form-text text-muted" style="margin-bottom:-20px"></small>
						</div>
					</div>
					<div class="row" id="toResponseAdapterRow" style="display: none">
						<div class="form-group col-md-6"></div>
						<div class="form-group col-md-6">
							<label for="toResponseAdapter"><span class="material-icons">keyboard_return</span> OUTBOUND (ASYNC) 응답 어댑터</label>
							<select id="toResponseAdapter" class="form-select" name="toResponseAdapter" required></select>
							<small id="toResponseAdapterUrl" class="form-text text-muted" style="margin-bottom:-20px"></small>
						</div>
					</div>
					</fieldset>
					<fieldset class="groupbox-border">
	    				<legend class="groupbox-border">REST OPTIONS</legend>
						<div class="row">
							<div class="col-md-2">
								<label for="inboundHttpMethod"><span class="material-icons">http</span> <%= localeMessage.getString("apiInterface.recvMethod") %></label>
								<select id="inboundHttpMethod" class="form-select" name="inboundHttpMethod" disabled></input>
									<option value="get">GET</option>
									<option value="post">POST</option>
									<option value="put">PUT</option>
									<option value="patch">PATCH</option>
									<option value="delete">DELETE</option>
								</select>
							</div>
							<div class="form-group col-md-4">
								<div id="slideInboundRoutingRule" class="carousel slide" data-ride="carousel" data-interval="false">
									<div class="carousel-inner" style="margin-bottom:-20px">
										<div class="carousel-item" style="text-align: center;">
											<label><span class="material-icons">http</span> 수신 헤더 라우팅 정보</label>
											<button type="button" id="headerRoutingButton" class="btn btn-primary btn-block" data-bs-toggle="modal" data-bs-target="#routingModal">
												수정
											</button>
										</div>
										<div class="carousel-item active">
											<div class="row">
												<div class="col-md-12">
													<label for="inboundRestPath"><span class="material-icons">link</span> 수신 REST PATH(URL)</label>
													<input type="text" class="form-control" id="inboundRestPath" name="inboundRestPath" disabled></input>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="form-group col-md-2">
								<label for="outboundHttpMethod"><span class="material-icons">http</span> 송신 메소드</label>
								<select id="outboundHttpMethod" class="form-select" name="outboundHttpMethod" disabled></input>
									<option value="get">GET</option>
									<option value="post">POST</option>
									<option value="put">PUT</option>
									<option value="patch">PATCH</option>
									<option value="delete">DELETE</option>
								</select>
							</div>
							<div class="form-group col-md-4">
								<label for="outboundRestPath"><span class="material-icons">link</span><span class="badge badge-warning" id="tagVariableUrl" style="display: none">가변</span> 송신 REST PATH(URL)</label>
								<input type="text" class="form-control" id="outboundRestPath" name="outboundRestPath" disabled></input>
							</div>
						</div>
						<div id="inboundResponseMethodPathRow" class="row" style="display: none">
							<div class="form-group col-md-2">
								<label for="inboundResponseHttpMethod"><span class="material-icons">http</span>응답 송신 메소드</label>
								<select id="inboundResponseHttpMethod" class="form-select" name="inboundResponseHttpMethod" disabled></input>
									<option value="get">GET</option>
									<option value="post">POST</option>
									<option value="put">PUT</option>
									<option value="patch">PATCH</option>
									<option value="delete">DELETE</option>
								</select>
							</div>
							<div class="form-group col-md-4">
								<label for="inboundResponseRestPath"><span class="material-icons">link</span>응답 송신 REST PATH(URL)</label>
								<input type="text" class="form-control" id="inboundResponseRestPath" name="inboundResponseRestPath" disabled></input>
							</div>
						</div>
						<div id="outboundResponseMethodPathRow" class="row" style="display: none">
							<div class="form-group col-md-6"></div>
							<div class="form-group col-md-2">
								<label for="outboundResponseHttpMethod"><span class="material-icons">http</span>응답 수신 메소드</label>
								<select id="outboundResponseHttpMethod" class="form-select" name="outboundResponseHttpMethod" disabled></input>
									<option value="get">GET</option>
									<option value="post">POST</option>
									<option value="put">PUT</option>
									<option value="patch">PATCH</option>
									<option value="delete">DELETE</option>
								</select>
							</div>
							<div class="form-group col-md-4">
								<label for="outboundResponseRestPath"><span class="material-icons">link</span>응답 송신 REST PATH(URL)</label>
								<input type="text" class="form-control" id="outboundResponseRestPath" name="outboundResponseRestPath" disabled></input>
							</div>
						</div>
					</fieldset>

					<div class="collapse" id="collapseApiCache" style="display: none">
						<fieldset class="groupbox-border">
							<legend class="groupbox-border">API Cache Options</legend>
							<div class="row">
								<div class="form-group col-md-1">
									<input type="checkbox" class="form-check-input" id="checkApiCacheUrlKey" name="checkApiCacheUrlKey" checked>
									<label class="form-check-label" for="checkApiCacheUrlKey">URL Key</label>
								</div>
								<div class="form-group col-md-1">
									<input type="checkbox" class="form-check-input" id="checkApiCacheParamKey" name="checkApiCacheParamKey">
									<label class="form-check-label" for="checkApiCacheParamKey">Param Key</label>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="collapse" id="collapseTransform">
						<fieldset class="groupbox-border">
						<legend class="groupbox-border" style="display: contents">변환정보</legend>
						<div class="row" id="rowRequestTransform">
							<div class="form-group col-md-4">
								<label for="inboundRequestLayout"><span class="material-icons-outlined">keyboard_double_arrow_right</span> 인바운드 요청</label>
								<div class="input-group">
									<input type="text" class="form-control" id="inboundRequestLayout" name="inboundRequestLayout" placeholder="인바운드 요청 레이아웃 없음" readonly>
								    <div class="input-group-append">
										<button class="btn btn-info" id="inboundRequestButton" type="button" data-bs-toggle="tooltip" >생성</button>
									</div>
							    </div>
							</div>
							<div class="form-group col-md-4">
								<label for="requestTransform"><span class="material-icons-outlined">keyboard_double_arrow_right</span> 요청변환</label>
								<div class="input-group">
									<input type="text" class="form-control" id="requestTransform" name="requestTransform" placeholder="요청 변환 없음" readonly>
								    <div class="input-group-append">
								    	<span tabindex="0" id="requestTransformButtonTooltip" data-bs-toggle="tooltip" data-html="true" title="매핑룰을 등록할 수 없습니다. <br> 우선 요청 레이아웃을 모두 등록하세요.">
											<button class="btn btn-secondary" id="requestTransformButton" type="button" >생성</button>
										</span>
									</div>
							    </div>
							</div>
							<div class="form-group col-md-4">
								<label for="outboundRequestLayout"><span class="material-icons-outlined">keyboard_double_arrow_right</span> 아웃바운드 요청</label>
								<div class="input-group">
									<input type="text" class="form-control" id="outboundRequestLayout" name="outboundRequestLayout" placeholder="아웃바운드 요청 레이아웃 없음" readonly>
								    <div class="input-group-append">
										<button class="btn btn-info" id="outboundRequestButton" type="button" data-bs-toggle="tooltip" >생성</button>
									</div>
							    </div>
							</div>
						</div>
						<div class="row" id="rowResponseTransform">
							<div class="form-group col-md-4">
								<label for="inboundResponseLayout"><span class="material-icons-outlined">keyboard_double_arrow_left</span> 인바운드 응답</label>
								<div class="input-group">
									<input type="text" class="form-control" id="inboundResponseLayout" name="inboundResponseLayout" placeholder="인바운드 응답 레이아웃 없음" readonly>
								    <div class="input-group-append">
										<button class="btn btn-info" id="inboundResponseButton" type="button" data-bs-toggle="tooltip" >생성</button>
									</div>
							    </div>
							</div>
							<div class="form-group col-md-4">
								<label for="responseTransform"><span class="material-icons-outlined">keyboard_double_arrow_left</span> 응답변환</label>
								<div class="input-group">
									<input type="text" class="form-control" id="responseTransform" name="responseTransform" placeholder="응답 변환 없음" readonly>
								    <div class="input-group-append">
								    	<span tabindex="0" id="responseTransformButtonTooltip" data-bs-toggle="tooltip" data-html="true" title="매핑룰을 등록할 수 없습니다. <br> 우선 응답 레이아웃을 모두 등록하세요.">
											<button class="btn btn-secondary" id="responseTransformButton" type="button">생성</button>
										</span>
									</div>
							    </div>
							</div>
							<div class="form-group col-md-4">
								<label for="outboundResponseLayout"><span class="material-icons-outlined">keyboard_double_arrow_left</span> 아웃바운드 응답</label>
								<div class="input-group">
									<input type="text" class="form-control" id="outboundResponseLayout" name="outboundResponseLayout" placeholder="아웃바운드 응답 레이아웃 없음" readonly>
								    <div class="input-group-append">
										<button class="btn btn-info" id="outboundResponseButton" type="button" data-bs-toggle="tooltip" >생성</button>
									</div>
							    </div>
							</div>
						</div>
						</fieldset>
					</div>
				</form>
			</div><!-- end content_middle -->
			<div class="modal fade" id="routingModal" tabindex="-1" role="dialog" aria-labelledby="routingModalLabel" aria-hidden="true">
				<div class="modal-dialog" role="document">
					<div class="modal-content">
						<div class="modal-header">
							<h5 class="modal-title" id="routingModalLabel">헤더 기반 라우팅 수정</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body">
							<form id="routingForm">
								<div id="headerPairs">
								</div>
							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
							<button type="button" class="btn btn-primary" id="saveRouting">적용</button>
						</div>
					</div>
				</div>
			</div>
		</div><!-- end right_box -->
	</body>
</html>

