<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="s" uri="/struts-tags" %>

<link type='text/css' href='<%=request.getContextPath()%>/css/general/changePassword.css' rel='stylesheet'
      media='screen'/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/main/changePassword.js"></script>
<style type="text/css">

    #validtoChangeUsername, #validtoChangeEmail, #validOldPassword1, #validPassword, #validCnfPassword1,#validtoChangeManagerEmail,#validNewPassword {

        width: 200px !important;

    }

    .toStyle {
        float: left;
    }
    #toChangePassword{
        /*background-image:url("images/editProfile/changePassword1.png");*/
        /*width:22px;*/
        /*height:22px;*/
        float:left;
    }
    /*#saveNewProfile{*/

         /*background-image:url("images/editProfile/save.png");*/
    /*}*/
    /*#cancelProfile{*/

         /*background-image:url("images/editProfile/cancel.png");*/
    /*}*/
    #saveNewProfile,#cancelProfile,#saveNewPassword,#cancelPassword{
        float:left;
        margin-left:20px;
         width:22px;
        height:22px;
    }
</style>

<div id="titleProfile"> Editing Profile </div>

<div id="changingOthers">
    <div style="width: 600px;float: left;">
        <div class="eachRow">

            <div class="eachRowLabel"> Username:</div>
            <input type="text" value="<s:property value="#session.user.username" />" class="toChangeUsername toStyle"/>
            <span id="validtoChangeUsername"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.username" />" name="toChangeUsernameHidden"/>


        <div class="eachRow">

            <div class="eachRowLabel"> Email:</div>
            <input type="text" value="<s:property value="#session.user.email" />" class="toChangeEmail toStyle"/>
            <span id="validtoChangeEmail"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.email" />" name="toChangeEmailHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Name:</div>
            <input type="text" value="<s:property value="#session.user.name" />" class="toChangeName toStyle"/>
            <span id="validtoChangeName"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.name" />" name="toChangeNameHidden"/>

        <div class="eachRow">


            <div class="eachRowLabel"> Surname:</div>
            <input type="text" value="<s:property value="#session.user.surname" />" class="toChangeSurname toStyle"/>
            <span id="validtoChangeSurname"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.surname" />" name="toChangeSurnameHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Phone:</div>
            <input type="text" value="<s:property value="#session.user.phone" />" class="toChangePhone toStyle"/>
            <span id="validtoChangePhone"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.phone" />" name="toChangePhoneHidden"/>

        <div class="eachRow">

            <div class="eachRowLabel"> Manager Email:</div>
            <input type="text" value="<s:property value="#session.user.managerEmail" />"  class="toChangeManagerEmail toStyle"/>
            <span id="validtoChangeManagerEmail"></span>
        </div>
        <input type="hidden" value="<s:property value="#session.user.managerEmail" />" name="toChangeManagerEmailHidden"/>
    </div>


    <%--<p id="toChangePassword">Change password</p>--%>

    <input type="hidden" name="isNormalOthers" value="1"/>
    <input type="hidden" name="isSomeChanged" value="0"/>

    <div id="savingProfile">
        <div id="toChangePassword">
            <img src="<%=request.getContextPath()%>/images/editProfile/changePassword1.png" alt="" title="Change Password" width="22px" height="22px" />
        </div>
         <div id="saveNewProfile">
             <img src="<%=request.getContextPath()%>/images/editProfile/save.png" alt="" title="Save" width="22px" height="22px" />
         </div>
         <div id="cancelProfile">
             <img src="<%=request.getContextPath()%>/images/editProfile/cancel.png" alt="" title="Cancel" width="22px" height="22px" />
         </div>
       <%--<input type="button" value="" id="toChangePassword"/>--%>
        <%--<input type="button" value="" id="saveNewProfile"/>--%>
        <%--<input type="button" value="Cancel" id="cancelProfile"/>--%>
    </div>
</div>

<div id="changingPassword">

    <div class="eachRow">
        <div class="eachRowLabel">Old Password:</div>
        <input type="password" name="changeOldPassword" id="changeOldPassword" value="" class="toStyle"/>
        <span id="validOldPassword1"></span>
    </div>
    <div class="eachRow">
        <div class="eachRowLabel"> New password:</div>
        <input type="password" name="createNewPassword" id="createNewPassword" value="" class="toStyle"/>
        <span id="validNewPassword"></span>
    </div>

    <div class="eachRow">
        <div class="eachRowLabel">Confirm New password:</div>
        <input type="password" name="confirmNewPassword" id="confirmNewPassword" value="" class="toStyle"/>
        <span id="validCnfPassword1"></span>
    </div>
    <%--<p id="toChangeOthers">Change Username and Email</p>--%>
    <input type="hidden" name="isNormalPassword" value="1"/>

    <div id="savingPassword">
         <div id="toChangeOthers">
             <img src="<%=request.getContextPath()%>/images/editProfile/editProfile.png" alt="" title="Change Profile" width="22px" height="22px" />
         </div>
         <div id="saveNewPassword">
             <img src="<%=request.getContextPath()%>/images/editProfile/save.png" alt="" title="Save" width="22px" height="22px" />
         </div>
         <div id="cancelPassword">
             <img src="<%=request.getContextPath()%>/images/editProfile/cancel.png" alt="" title="Cancel" width="22px" height="22px" />
         </div>

        <%--<input type="button" value="Save" id="saveNewPassword"/>--%>
        <%--<input type="button" value="Cancel" id="cancelPassword"/>--%>
    </div>
</div>
