{% extends 'base.html' %}

{% block title %}Profile{% endblock %}

{% block footer %}
    <script src="/js/hideShowPassword.min.js"></script>
    <script src="/js/app.js"></script>
    
    <script>
        $(document).ready(function() {
            var userId = '{{ user.id }}';
            /**
             * Validate the form
             */
            $('#formProfile').validate({
                rules: {
                    name: 'required',
                    email: {
                        required: true,
                        email: true,
                        remote:{
                            url: '/account/validate-email',
                            data: {
                                ignore_id: function(){
                                    return userId;
                                }
                            }
                        }
                    },
                    password: {
                        //required: true,
                        minlength: 6,
                        validPassword: true
                    },
                    /*password_confirmation: {
                        required: true,
                        equalTo: '#inputPassword'
                    }*/
                    
                    profileName: 'required',
                    profileDes: 'required'
                },
                messages: {
                    email: {
                        remote: 'email already taken'
                    }
                }
            });

            /**
              * Show password toggle button
              */
            $('#inputPassword').hideShowPassword({
                show: false,
                innerToggle: 'focus'
            });
            $('#inputPasswordConfirmation').hideShowPassword({
                show: false,
                innerToggle: 'focus'
            });
        });
    </script>

{% endblock %}

{% block body %}

    <h2>Profile</h2>

    {% if user.errors is not empty %}
        <p>Errors:</p>
        <ul>
            {% for error in user.errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    {# <form method="post" action="/search.php" id="formSignup">

        <div>
            <label for="inputName">Name</label>
            <input id="inputName" name="name" placeholder="Name" autofocus value="{{ user.name }}" required />
        </div>
        <div>
            <label for="inputEmail">Email address</label>
            <input id="inputEmail" name="email" placeholder="email address" value="{{ user.email }}" required type="email" />
        </div>
        <div>
            <label for="inputPassword">Password</label>
            <input type="password" id="inputPassword" name="password" placeholder="Password" required />
        </div>
        <div>
            <label for="inputPasswordConfirmation">Repeat password</label>
            <input type="password" id="inputPasswordConfirmation" name="password_confirmation" placeholder="Repeat password" required />
        </div>

        <button type="submit">Sign up</button>

    </form> #}

    <form method="post" action="/staffpagetest/profile/update?user_id={{ user.id }}" id="formProfile">

        <div>
            <label for="inputName">Name</label>
            <input id="inputName" name="name" placeholder="Name" value="{{ user.name }}" />
        </div>
        <div>
            <label for="inputEmail">Email address</label>
            <input id="inputEmail" name="email" placeholder="email address" value="{{ user.email }}" type="email" />
        </div>
        <div>
            <label for="inputPassword">Password</label>
            <input type="password" id="inputPassword" name="password" placeholder="Password" aria-describedby="helpBlock"/>
            <br/>
            <span id="helpBlock">leave blank to keep current password</span>
        </div>
        <div>
                <label for="inputProfileName">Profile Name</label>
                <input id="inputProfileName" name="profileName" placeholder="Profile Name" value="{{ profile.name }}" type="text" />
                <br/>
                <textarea id="profileDes" name="profileDes" rows="4" cols="50">
                {{ profile.description }}
                </textarea>
                <label for="inputProfileImage">Profile Image</label>
                {% if filename %}
                <input id="inputProfileImage" name="profileImg" placeholder="Profile Image" value="{{ profile.image_file != filename ? filename : profile.image_file }}" type="text" />
                {% else %}
                <input id="inputProfileImage" name="profileImg" placeholder="Profile Image" value="{{ profile.image_file }}" type="text" />
                {% endif %}
        </div>
        <div>
        {% if filename %}
            <img src="/../uploads/{{ profile.image_file != filename ? filename : profile.image_file or filename ? filename : profile.image_file }}" width="500" alt="">
        {% else %}
            <img src="/../uploads/{{ profile.image_file }}" width="500" alt="">
        {% endif %}
</div>
       <!--<div>
            <label for="inputPasswordConfirmation">Repeat password</label>
            <input type="password" id="inputPasswordConfirmation" name="password_confirmation" placeholder="Repeat password"  />
        </div>-->
        <button type="submit">Save</button>

    </form>
    <!--<form action="/profile/cancelImg" >
                
            </form>-->
    <div>
            <form method="post" action="/staffpagetest/profile/edit?user_id={{ user.id }}" enctype="multipart/form-data">
                <div>
                    <label for="file">Image File</label>
                    <input type="file" name="file" id="file">
                    <input  type="text" name="cancelImg" value="{{ cancelImg }}">
                    <input type="text" name="preImg" value="{{ profile.image_file ? preImg : cancelImg }}">
                </div>
                <button>{{ cancelImg ? 'cancel' : 'Upload image' }}</button>
            </form>
        </div>
     


{% endblock %}