<%@ page contentType="text/html; charset=utf-8" %>
<%@ 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=utf-8">
    <jsp:include page="/jsp/common/include/css.jsp"/>
    <jsp:include page="/jsp/common/include/script.jsp"/>
    <script language="javascript">
      var url = '<c:url value="/onl/apim/approval/apprequest/prodAppRequestMan.json" />';
      var url_view = '<c:url value="/onl/apim/approval/apprequest/prodAppRequestMan.view" />';
      let appRequest = null;

      $(document).ready(function() {
        var key = "${param.id}";
        if (key) {
          detail(key);
        }

        $("#btn_close").click(function() {
          window.close();
        });

        $("#btn_save").click(function() {
          console.log(appRequest);

          if (confirm("변경하시겠습니까?")) {
            $.ajax({
              type: "POST",
              url: url,
              data: {cmd: "UPDATE", id: key, apiList: JSON.stringify(appRequest.apiList), status :$("#approvalStatus").val()},
              success: function(args) {
                alert("변경되었습니다.");
                window.opener.location.reload();
                window.close();
              },
              error: function(e) {
                alert(e.responseText);
              }
            });
          }
        });
      });

      function detail(key) {
        $.ajax({
          type: "POST",
          url: url,
          dataType: "json",
          data: {cmd: 'DETAIL', id: key},
          success: function(json) {
            var data = json;
            appRequest = json;
            $("#approvalStatus").val(data.status);
            $("#requesterOrg").text(data.org.orgName);
            $("#reason").text(data.reason);
            $("#createdDate").text(data.createdDate).inputmask("9999-99-99 99:99:99", {'autoUnmask': true});

            var apisHtml = "";
            for (var i = 0; i < data.apiList.length; i++) {
              var api = data.apiList[i];
              apisHtml += "<tr>";
              apisHtml += "<td>" + api.apiName + "</td>";
              apisHtml += "</tr>";
            }
            $("#apisTable tbody").html(apisHtml);
          },
          error: function(e) {
            alert(e.responseText);
          }
        });
      }
    </script>
</head>
<body>
<div class="popup_box">
    <div class="title" id="approvalSubject" style="margin-top: 15px;"></div>
    <%--제목--%>
    <div class="popup_content">
        <table class="table_row" cellspacing="0">
            <tr>
                <th>요청 기관</th>
                <td><span id="requesterOrg"></span></td>
                <th style="width:20%;">처리 상태</th>
                <td style="width:30%;">
                    <select id="approvalStatus" style="width:100%" >
                        <option value="PENDING">대기중</option>
                        <option value="APPROVED">승인</option>
                        <option value="DENIED">반려</option>
                    </select>
                </td>
            </tr>
            <tr>
                <th>요청일자</th>
                <td><span id="createdDate"></span></td>
                <th></th>
                <td></td>
            </tr>
            <tr>
                <th>요청 사유</th>
                <td colspan="3"><span id="reason"></span></td>
            </tr>
        </table>
        <div class="title">API 목록</div>
        <table id="apisTable" class="table_row" cellspacing="0">
            <thead>
            <tr>
                <th>API 이름</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <div class="popup_button">
        <button type="button" class="cssbtn" id="btn_save" level="W"><i class="material-icons">check</i>저장</button>
        <button type="button" class="cssbtn" id="btn_close" level="R"><i class="material-icons">cancel</i> <%= localeMessage.getString("button.close") %>
        </button>
    </div>
</div>
</body>
</html>
