{% extends "::base.html.twig" %}        

{% block body %}

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

<div id="navbar" style="font-size:18px;">   
    <ul>       
        <li><a href="{{ path('DorcasTabithaBundle_homepage' ) }}">Home</a></li>
        <li><a href="{{ path('DorcasTabithaBundle_search_show' ) }}">Client Search</a></li> 
        <li><a href="{{ path('DorcasTabithaBundle_clientinformation_new' ) }}">New Client</a></li> 
        {% if is_granted('ROLE_ADMIN') %}
            <li><a href="{{ path('DorcasTabithaBundle_users_show' ) }}" style="background-color:#00b5cb; font-size:30px;">Users</a></li>
            <li><a href="{{ path('DorcasTabithaBundle_message_show' ) }}">Message/Reports</a></li>
        {% endif %}  
    </ul> 
</div>

    <section class="user" id="users">
                {# .. #}
       

        {% if form is defined %}
            <div style="color:maroon;">
            {{ form_errors(form) }}
            </div>
        {% endif %}

        {% render 'DorcasTabithaBundle:Users:new' %}
    </section>

    <section class="users" id="users">
        <section class="previous-users">       
           {% include 'DorcasTabithaBundle:Users:userloop.html.twig' with { 'users': users } %}
        </section>
    </section>

    </div>
</div>

{% endblock %}

{% block javascripts %}

    {{ parent() }} 

<script type="text/javascript">

function displayemail()
{
    var textareaid = document.getElementById('emailList');
    if ( textareaid.style.display=='none')
    {
        textareaid.style.display='block';
    }
    else
    {
        textareaid.style.display='none';
    }

}   

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

function save(nav)
{ 
    // Read all values

    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');

    okaytosubmit = true;
    alertMessage = "";

    // Check username for length < 5 characters
    if ( username.value.length < 5 )
    {
        alertMessage = alertMessage + '&#8227 Username must have at least 5 <br/>&nbsp; characters.<br/>';
        okaytosubmit = false;
    }

    // Check Password First not blank and for length < 8 chanracters
    if ( passwordfirst.value != '' && passwordfirst.value.length < 8 )
    {
        alertMessage = alertMessage + '&#8227 Password must have at least 8 <br/>&nbsp; characters.<br/>';
        okaytosubmit = false;
    }

    // Check Password Second not blank and for length < 8 chanracters
    else if ( passwordsecond.value != '' && passwordsecond.value.length < 8 )
    {
        alertMessage = alertMessage + '&#8227 Confirm Password must have at least 8 <br/>&nbsp; characters.<br/>';
        okaytosubmit = false;
    }

    // Check that passwords match
    if ( passwordfirst.value != passwordsecond.value )
    {
        alertMessage = alertMessage + '&#8227 Passwords do not match.<br/>';
        okaytosubmit = false;
    }


    // Check First Name not blank
    if ( firstname.value == '' )
    {
        alertMessage = alertMessage + '&#8227 Please enter a First Name.<br/>';
        okaytosubmit = false;
    }

    // Check Last Name not blank
    if ( lastname.value == '' )
    {
        alertMessage = alertMessage + '&#8227 Please enter a Last Name.<br/>';
        okaytosubmit = false;
    }

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

    // 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 ))
        {
        alertMessage = alertMessage + '&#8227 Please enter a valid Email address.<br/>';
        okaytosubmit = false;
        }
    }

    if (okaytosubmit == true)
    {
        var form = document.forms["clientform"];
        form.submit();
    }
    else
    {
        alert(alertMessage);
    }
}


function warnUsersDelete(uriLocation)
{
     alertMessage = '<p style = "color:red;"> Warning: Are you sure you want to delete this user? </p>';
     warnRedirect(uriLocation, alertMessage);
}

warnRedirect = function(uriLocation, message) {
	$('#override_javascript_alertx').html(message).dialog({
		modal: true,
                title:'Tabitha Warning Message',
			buttons: {
				"Delete User": function() {
                                        window.location = uriLocation;
					$( this ).dialog( "close" );
				},
				Cancel: function() {
					$( this ).dialog( "close" );
				}
			}
		});
	};
        


</script>   
 
{% endblock %}