<%@ page import="com.myproject.bean.Language" %>
<%@ include file="/common/taglibs.jsp" %>
<%@ page language="java" pageEncoding="UTF-8"%>


<!-- BEGIN PAGE LEVEL STYLES -->
<link rel="stylesheet" type="text/css" href="${ctx}/assets/global/plugins/jquery-multi-select/css/multi-select.css"/>
<!-- BEGIN THEME STYLES -->

<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
  <fmt:message key="menu.user"/> <small><fmt:message key="user.update.subtitle"/> </small>
</h3>

<!--Begin of update-->
<div class="row">
  <div class="col-md-12">
    <!-- BEGIN PORTLET-->
    <div class="portlet box green-jungle">
      <div class="portlet-title">
        <div class="caption">
          <i class="fa fa-pencil"></i><fmt:message key="user.update.subtitle"/>
        </div>

        <div class="actions">
          <a href="users.html" class="btn btn-default btn-sm">
            <i class="fa fa-reply"></i> <fmt:message key="button.return"/> </a>
        </div>
      </div>
      <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form:form commandName="user" class="form-horizontal form-bordered" id="user" action="userUpdate.html">

          <form:hidden path="id"/>
          <form:hidden path="version"/>
          <form:hidden path="password"/>

          <div class="form-body">
            <%@include file="/common/success.jsp"%>

            <form:errors path="*">
              <div class="alert alert-danger display-hide" style="display: block;">
                <button class="close" data-close="alert"></button>
                <fmt:message key="error.save"/>
              </div>
            </form:errors>


            <form:errors path="username" cssStyle="display: none">
              <c:set var="usernameErrorClass" value="has-error"/>
            </form:errors>
            <div class="form-group">
              <label class="control-label col-md-2"><fmt:message key="user.username"/><span class="required"> * </span></label>
              <div class="col-md-3 ${usernameErrorClass}">
                <form:input type="text" path="username" class="form-control"/>
                <form:errors path="username" cssClass="help-block"/>
              </div>

              <c:if test="${user.id == null}">
                <label class="control-label col-md-2"><fmt:message key="user.initPwd"/></label>
                <div class="col-md-3">
                  <p class="form-control-static">Acc123&nbsp;&nbsp;&nbsp;
                  </p>
                </div>
              </c:if>
              <c:if test="${user.id != null}">
                <label class="control-label col-md-2"><fmt:message key="user.password"/></label>
                <div class="col-md-3">
                  <p class="form-control-static"><a href="<c:url value="/updatePassword.html?username=${user.username}" />"><fmt:message key='updatePassword.changePasswordLink'/></a>
                  </p>
                </div>
              </c:if>
            </div>


            <div class="form-group">
              <form:errors path="firstName" cssStyle="display: none">
                <c:set var="firstNameErrorClass" value="has-error"/>
              </form:errors>
              <label class="control-label col-md-2"><fmt:message key="user.firstName"/><span class="required"> * </span></label>
              <div class="col-md-3 ${firstNameErrorClass}">
                <form:input type="text" id="barcode" path="firstName" class="form-control"/>
                <form:errors path="firstName" cssClass="help-block"/>
              </div>


              <form:errors path="lastName" cssStyle="display: none">
                <c:set var="lastNameErrorClass" value="has-error"/>
              </form:errors>
              <label class="control-label col-md-2"><fmt:message key="user.lastName"/><span class="required"> * </span></label>
              <div class="col-md-3 ${lastNameErrorClass}">
                <form:input type="text"  path="lastName" class="form-control"/>
                <form:errors path="lastName"  cssClass="help-block"/>
              </div>
            </div>

            <div class="form-group">
              <form:errors path="role.id" cssStyle="display: none">
                <c:set var="roleIdErrorClass" value="has-error"/>
              </form:errors>
              <label class="control-label col-md-2"><fmt:message key="user.role"/><span class="required"> * </span></label>
              <div class="col-md-3 ${roleIdErrorClass}">
                <form:select path="role.id" cssClass="form-control" items="${roleList}" itemValue="id" itemLabel="name"/>
                <form:errors path="role.id"  cssClass="help-block"/>
              </div>

              <label class="control-label col-md-2"><fmt:message key="user.language"/><span class="required"> * </span></label>
              <div class="col-md-3 ">
                <form:select path="language" cssClass="form-control select2"  items="<%= Language.values()%>" itemLabel="label" itemValue="value" id="language"/>
              </div>
            </div>


            <div class="form-group">
              <form:errors path="email" cssStyle="display: none">
                <c:set var="emailErrorClass" value="has-error"/>
              </form:errors>
              <label class="control-label col-md-2"><fmt:message key="user.email"/><span class="required"> * </span></label>
              <div class="col-md-3 ${emailErrorClass}">
                <form:input type="text"  path="email" class="form-control"/>
                <form:errors path="email"  cssClass="help-block"/>
              </div>

              <label class="control-label col-md-2"><fmt:message key="user.authCode"/></label>
              <div class="col-md-3">

                <div style="text-align:left" class="input-group">
                  <form:input type="text"  path="authCode" class="form-control"/>

                  <%--<c:if test="${user.id != null}">--%>
                    <%--<span class="input-group-addon">--%>
                      <%--<a onclick="writeToCard();"><fmt:message key="写入卡片"/> </a>--%>
                    <%--</span>--%>
                  <%--</c:if>--%>
                  <form:errors path="authCode"  cssClass="help-block"/>
                </div>
              </div>
            </div>

            <div class="form-group">
            </div>

            <%--<div class="form-group last">--%>
              <%--<label class="control-label col-md-3"><fmt:message key="user.cabinetAssign"/></label>--%>
              <%--<div class="col-md-9">--%>
                <%--<form:select path="cabinetPos" multiple="multiple" class="multi-select">--%>
                  <%--<c:forEach var="item" items="${slots}">--%>
                    <%--<optgroup label="${item.key}">--%>
                      <%--<c:forEach items="${item.value}" var="pos">--%>
                        <%--<c:set var="selectedStr" value=""/>--%>
                          <%--<c:if test="${fn:contains(user.cabinetPosIds,pos.id)}">--%>
                            <%--<c:set var="selectedStr" value="selected"/>--%>
                          <%--</c:if>--%>
                        <%--<form:option value="${pos.id}" selected="${selectedStr}">${pos.posName}</form:option>--%>
                      <%--</c:forEach>--%>
                    <%--</optgroup>--%>
                  <%--</c:forEach>--%>
                <%--</form:select>--%>
              <%--</div>--%>
            <%--</div>--%>


          </div>
          <div class="form-actions">
            <div class="row">
              <div class="col-md-offset-3 col-md-9">
                <button class="btn green" type="submit" name="method" value="add"><i class="fa fa-save"></i><fmt:message key="button.save"/></button>
                <button class="btn red" type="submit" name="method" value="delete"><i class="fa fa-trash-o"></i><fmt:message key="button.delete"/></button>
                <button type="button" class="btn default  btnCancel" onclick="window.location=''"><i class="fa fa-history"></i><fmt:message key="button.cancel"/></button>
              </div>
            </div>
          </div>
        </form:form>
        <!-- END FORM-->
      </div>
    </div>
    <!-- END PORTLET-->
  </div>
</div>
<!--End of update-->


<c:set var="scripts" scope="request">

  <script src="${ctx}/scripts/lobibox/js/lobibox.js?id=2"></script>

  <script language="JavaScript" type="text/javascript">
    $(function () {
      $('#cabinetPos').multiSelect({
        selectableOptgroup: true
      });

      writeCardResult=function(uid,boxMsg,i){
        $.post("${ctx}/service/store/cabinet/writeCardResult", {u: uid}, function (data) {
            if(data == "OK"){
              boxMsg.destroy();
              window.location='';
            }else{
              i = i + 1;
              boxMsg.setProgress(i);
              setTimeout(function(){return writeCardResult(uid,boxMsg,i)},1000);
            }
        });
      }

      writeToCard=function(){
        var uid = "${user.id}";
        $.post("${ctx}/service/store/cabinet/writeCard", {u: uid}, function (data) {
          if (data) {
            var msgBox = Lobibox.progress({
              title: '等待写入',
              label: '请在1分钟内,将卡片靠近读卡器,本弹框消失即表示完成写入',
              onShow: function ($this) {
                writeCardResult(uid, $this, 0);
              }
            });
          }
        });
      }


      function format(state) {
        if (!state.id) return state.text; // optgroup
        return "<img class='flag' src='${ctx}/assets/global/img/flags/" + state.id + ".png'/>&nbsp;&nbsp;" + state.text;
      }
      $("#language").select2({
        placeholder: "Select a Country",
        allowClear: true,
        formatResult: format,
        formatSelection: format,
        escapeMarkup: function (m) {
          return m;
        }
      });
    })
  </script>
</c:set>