{% extends "::base.html.twig" %}  
{% block image %}{% endblock %}   
{% block body %}

<div id="user_edit">


    <form id="clientform" action="{{ path('DorcasTabithaBundle_user_update', { 'id' : user.id } ) }}" method="post" {{ form_enctype(form) }} class="dorcas">

        <h4>Edit User Profile</h4>
        <h6> Note: If a password is not entered, it will not be changed.</h6>


        <div id="override_javascript_alert"></div>

        <div style="width:11%; float:left;">
                {{ form_label(form.username) }}
                {{ form_errors(form.username) }}
                {{ form_widget(form.username, { 'attr': {'size': '12'} }) }}
        </div>
	<div style="width:14%; float:left;">
                {{ form_label(form.password.first) }}
                {{ form_errors(form.password.first) }}
                {{ form_widget(form.password.first, { 'attr': {'size': '16'} }) }}
	</div>
	<div style="width:14%; float:left;">
                {{ form_label(form.password.second, 'Confirm Password:') }}
                {{ form_errors(form.password.second) }}
                {{ form_widget(form.password.second, { 'attr': {'size': '16'} }) }}
	</div>
	
	<div style="width:23%; float:left;">
            {{ form_label(form.first_name) }}
            {{ form_errors(form.first_name) }}
            {{ form_widget(form.first_name, { 'attr': {'size': '30'} }) }}
        </div>
        <div style="width:22%; float:left; ">
            {{ form_label(form.last_name) }}
            {{ form_errors(form.last_name) }}
            {{ form_widget(form.last_name, { 'attr': {'size': '30'} }) }}
        </div>
	
	<br>
	<div style="width:37%; float:left;">
                {{ form_label(form.address) }}
                {{ form_errors(form.address) }}
                {{ form_widget(form.address, { 'attr': {'size': '50'} }) }} 
        </div>
            <div style="width:14%; float:left; padding-left:6px;">
                    {{ form_label(form.phone) }}
                    {{ form_errors(form.phone) }}
                    {{ form_widget(form.phone, { 'attr': {'size': '14', 'class': 'phonex'} }) }}
        </div>
        <div style="width:20%; float:left;">
                    {{ form_label(form.email) }}
                    {{ form_errors(form.email) }}
                    {{ form_widget(form.email, { 'attr': {'size': '25'} }) }}
        </div>
        <br>
        <div style="width:5%; float:left;">
                    {{ form_label(form.isAdmin) }}
                    {{ form_errors(form.isAdmin) }}
                    {{ form_widget(form.isAdmin, { 'attr': {'size': '2'} }) }}
        </div>
        <div style="width:1%; float:left; padding-right: 18px;">
                    {{ form_label(form.isActive) }}
                    {{ form_errors(form.isActive) }}
                    {{ form_widget(form.isActive, { 'attr': {'size': '2'} }) }}
        </div>

        <br>&nbsp;<br>
        <div style=" padding-top: 18px; float:right;">
        <input type="button" value="Save and Close Window" onClick="closeandreload()">
        </div>  
        <br>
        <br>&nbsp;<br>

        {{ form_rest(form) }}

    </form>
</div>

{% endblock %}

{% block logout %}{% endblock %}

{% block javascripts %}

{{ parent() }}

<script type="text/javascript">

window.alert = function(message) {
	$('#override_javascript_alert').html(message).dialog({
		modal:true,
		title:'Tabitha Validation Message',
		buttons: {
			'OK':function(){
				$(this).dialog('close');
			}
		}
	});
};


function closeandreload(){ 

    // Do Validation
    var username = document.getElementById('userform_username');
    var firstname = document.getElementById('userform_first_name');
    var lastname = document.getElementById('userform_last_name');
    var passwordfirst = document.getElementById('userform_password_first');
    var passwordsecond = document.getElementById('userform_password_second');
    var phone = document.getElementById('userform_phone');
    var email = document.getElementById('userform_email');

    var message = '';

    if ( username.value.length < 5 )
    {
        var valid = false;
        var message = '&#8227 Username must have at least 5 characters.<br/>';
    }

    if ( passwordfirst.value != '' && passwordfirst.value.length < 8 )
    {
        var valid = false;
        var message = message + '&#8227 Password must have at least 8 characters.<br/>';
    }

    else if ( passwordsecond.value != '' && passwordsecond.value.length < 8 )
    {
        var valid = false;
        var message = message + '&#8227 Confirm Password must have at least 8 characters.<br/>';
    }

    if ( passwordfirst.value != passwordsecond.value )
    {
        var valid = false;
        var message = message + '&#8227 Passwords do not match.<br/>';
    }

    if ( firstname.value == '' )
    {
        var valid = false;
        var message = message + '&#8227 Please enter a First Name.<br/>';
    }

    if ( lastname.value == '' )
    {
        var valid = false;
        var message = message + '&#8227 Please enter a Last Name.<br/>';
    }

    // Check Phone for < 14 characters
    if ( phone.value && phone.value.length < 14 )
    {
        var valid = false;
        var message = message + '&#8227 Please complete Phone number.<br/>';
    }

    // Check Email for valid (kinda) address
    if ( email.value )
    {
        var atpos = email.value.indexOf("@");
        var dotpos = email.value.lastIndexOf(".");
        if ( atpos <1 || dotpos < atpos+2 || dotpos+2 >= email.value.length)
        //if ( email.value && email.value.indexOf("@") == -1 ))
        {
            var valid = false;
            var message = message + '&#8227 Please enter a valid Email address.<br/>';
        }
    }

    if ( valid == false )
    {
        alert( message );
        return(false);
    }
    
    var form = document.forms["clientform"];
    form.submit();
    opener.location.reload(true); // or opener.location.href = opener.location.href;
    window.close(); // or self.close(); 
}

</script>
   
{% endblock %}

 
