<%@ 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=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/template/messageTemplateMan.json" />';
      var url_view = '<c:url value="/onl/apim/template/messageTemplateMan.view" />';

      function booleanFormatter(cellvalue) {
          return cellvalue === 'Y'
              ? '<span style="color: red; font-size: 16px;">O</span>' // 활성화: 빨간 체크
              : ''; // 비활성화: 공백
      }

      $(document).ready(function() {

        var gridPostData = getSearchForJqgrid("cmd", "LIST");

        $('#grid').jqGrid({
          datatype: "json",
          mtype: 'POST',
          url: url,
          postData: gridPostData,
          colNames: [
            'No.',
            '<%= localeMessage.getString("messageTemplate.messageCode") %>',
            '<%= localeMessage.getString("messageTemplate.messageName") %>',
            '<%= localeMessage.getString("messageTemplate.enableSms") %>',
            '<%= localeMessage.getString("messageTemplate.enableEmail") %>',
            '<%= localeMessage.getString("messageTemplate.enableMessenger") %>'
          ],
          colModel: [
            {name: 'rowNum', align: 'center', width: '50', sortable: false},
            {name: 'messageCode', width: '300', align: 'center'},
            {name: 'messageName', width: '400', align: 'center'},
            {name: 'enableSms', align: 'center', formatter: booleanFormatter},
            {name: 'enableEmail', align: 'center', formatter: booleanFormatter},
            {name: 'enableMessenger', align: 'center', formatter: booleanFormatter}
          ],
          jsonReader: {
            repeatitems: false
          },
          pager: $('#pager'),
          page: '${param.page}',
          rowNum: '${rmsDefaultRowNum}',
          autoheight: true,
          height: $("#container").height(),
          autowidth: true,
          viewrecords: true,
          rowList: eval('[${rmsDefaultRowList}]'),
          loadComplete: function(d) {
              var records = $(this).getGridParam('records');
              var page = $(this).getGridParam('page');
              var rowNum = $(this).getGridParam('rowNum');
              var rows = $(this).getDataIDs();
              var colModel = $(this).getGridParam("colModel");

              for (var i = 0; i < rows.length; i++) {
                  var number = ((page - 1) * rowNum + i) + 1;
                  // var reverseNumber = records - ((page - 1) * rowNum + i);
                  $(this).setCell(rows[i], 'rowNum', number);
              }
            colModel.forEach(col => {
              $(this).setColProp(col.name, {sortable: false});
            });
          },
          ondblClickRow: function(rowId) {
            var rowData = $(this).getRowData(rowId);
            console.log(rowData);
            var key = rowData['messageCode'];

            var args = {};
            var url2 = url_view;
            url2 = url2 + '?cmd=DETAIL&status=DETAIL';
            url2 += '&menuId=' + '${param.menuId}';
            url2 += '&id=' + key;
            console.log('Generated URL: ' + url2);

            showModal(url2, args, 950, 650, function() {
              $("#grid").trigger("reloadGrid");
            });

          }, loadError: function(jqXHR, textStatus, errorThrown) {
            if (jqXHR.status == 401) {
              var location = '<%=request.getContextPath()%>/';
              comloadError(jqXHR, textStatus, errorThrown, location);
            }
          }
        });

        resizeJqGridWidth('grid', 'content_middle', '1000');

        $("#btn_search").click(function() {
          var postData = getSearchForJqgrid("cmd", "LIST");

            postData.searchEnableSms = $("input[name='searchEnableSms']").is(":checked") ? "Y" : null;
            postData.searchEnableEmail = $("input[name='searchEnableEmail']").is(":checked") ? "Y" : null;
            postData.searchEnableMessenger = $("input[name='searchEnableMessenger']").is(":checked") ? "Y" : null;

            $("#grid").setGridParam({url: url, postData: postData, page: 1}).trigger("reloadGrid");
        });

        $("#btn_new").click(function() {
          var args = {};
          var url2 = url_view;
          url2 = url2 + '?cmd=DETAIL&status=NEW';

          var width = 950;
          var height = 650;

          var left = (screen.width - width) / 2;
          var top = (screen.height - height) / 2;

          var option = "left=" + left + ",top=" + top + ",scrollbars=yes";

          showModal(url2, args, width, height, function() {
            $("#grid").trigger("reloadGrid");
          }, option);
        });

        $("input[name^=search]").keydown(function(key) {
          if (key.keyCode == 13) {
            $("#btn_search").click();
          }
        });

        $("#startDatepicker").datepicker();
        $("#endDatepicker").datepicker();

        buttonControl();

      });

    </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_new" level="W"><i class="material-icons">add</i> <%= localeMessage.getString("button.new") %>
            </button>
            <button type="button" class="cssbtn" id="btn_search" level="R"><i class="material-icons">search</i> <%= localeMessage.getString("button.search") %>
            </button>
        </div>
        <div class="title"><%= localeMessage.getString("messageTemplate.title") %> <span class="tooltip"><%= localeMessage.getString("messageTemplate.tooltip") %></span></div>

        <table class="search_condition" cellspacing=0;>
            <tbody>
            <tr><!-- 제목  -->
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("messageTemplate.messageName") %></th>
                <td>
                    <input type="text" name="searchMessageSubject" value="${param.searchMessageSubject}">
                </td>
                <th style="width:10%; min-width:100px;"><%= localeMessage.getString("messageTemplate.messageCode") %></th>
                <td><input type="text" name="searchMessageCode" value="${param.searchMessageCode}"></td>
                <th style="width:10%; min-width:100px;">활성 검색</th>
                <td>
                    <div>
                        <label><input type="checkbox" name="searchEnableSms" value=""> SMS 활성</label>
                        <label><input type="checkbox" name="searchEnableEmail" value=""> 이메일 활성</label>
                        <label><input type="checkbox" name="searchEnableMessenger" value=""> 메신저 활성</label>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>

        <table id="grid"></table>
        <div id="pager"></div>

    </div><!-- end content_middle -->
</div><!-- end right_box -->
</body>
</html>

