{% extends 'themes/default/login.layout.html' %}
{% block body %}
<div class="container center-align">
<div class="row">

	<div class="col s12 m6 offset-m3 card z-depth-4" style="margin-top: 5%;padding:0px">

<div class="card cardlogin">
<div class="card-content">

<div class="card-image" >
<img src="{{app.config['app_url']}}/app/themes/default/resources/images/{{app.config['portal_logo']}}" class="login-logo">
</div>


<div id="customerlogintab"  class="logintabpanel" >

<form action="{{app.config.base_url}}/customer/login_check" method="post"  id="loginForm">
		
	<h6>Customer Portal Login</h6>
	
	<div class="card red white-text error-message {% if not error %}hide{% endif %}" style="padding:10px;">
		{% if error %}{{ error }}{% endif %}
	</div>
	
	
	<div class="card green white-text success-message hide" style="padding:10px;"></div>
	
	 <div class="input-field col s12">
        <input name="_username" type="email" class="validate" value="{{ last_username }}">
        <label for="_username">Email</label>
    </div>
    <div class="input-field col s12">
        <input name="_password" type="password" class="validate">
        <label for="_password">Password</label>
    </div>
   
    <div class="input-field col s12">

        <select name="user_language">
	      {% for langcode,langname in av_languages %}
	      	  {% if langcode in app.config['limited_languages'] or app.config['limited_languages']|length==0 %}
              <option value="{{langcode}}" {% if app.config.default_lang==langcode %}selected="selected"{% endif %}>{{langname}}</option>
			  {% endif %}
          {% endfor %}
	    </select>
	    <label>Select Language</label>
    </div>
    
    <div class="input-field col s12 center-align">
        <button type="submit" class="btn {{themebasiccolor}} col s12" />Login</button>
    </div>
	
	{% if app.config['customer_registration_enabled'] %}    
    <div class="input-field col s12 center-align">
	    or<br>
        <a href="javascript:togglePanel('customerregistertab')" class="btn lightblue col s12" />Register</a>
    </div>
    {% endif %}
    <div class="col s12 ">
        <br><a style="float:left;" class="red-text" href="javascript:togglePanel('customerresetpswtab')"/>Lost Password ?</a><br>
    </div>
    <div class="clearfix"></div>
    </form>
    
 </div>
 
 
 <div id="customerresetpswtab" class="logintabpanel" style="display: none">
	 
	<h6><b>Customer</b> Reset Password</h6>


	<div class="col s12 card grey white-text hide" id="pswresetcheck" style="padding:10px;">
	 Checking Username . . .
	</div>
    
    <div class="col s12 card red white-text hide" id="pswreseterror" style="padding:10px;">
	 Password Reset Error
	</div>

	<div class="resetinputdiv">
		
	<div class="input-field col s12">
        <input name="resetusername" id="resetusername" type="email" class="validate" value="{{ last_username }}">
        <label for="resetusername">Email Address</label>
    </div>
    
    
    <div class="input-field col s12 center-align">
        <a href="javascript:customerPswReset()" class="btn {{themebasiccolor}} col s12" />Reset Password</a>
    </div>
    
	</div>
        
    <div class="col s12 center-align">
        <br><a style="float:left;"  class="red-text" href="javascript:togglePanel('customerlogintab')"/>Return to Login</a><br>
    </div>
    <div class="clearfix"></div>
 </div>
 
 
 
 {% if app.config['customer_registration_enabled'] %} 
 
  <div id="customerregistertab" class="logintabpanel" style="display: none">
	 
	<h6><b>Customer</b> Registration Form</h6>


	<div class="col s12 card grey white-text hide registration-check-message" style="padding:10px;">
	 Checking Username . . .
	</div>
    
    <div class="col s12 card red white-text hide registration-error-message" style="padding:10px;">
	</div>

	<div class="registerinputdiv">
		<form id="contact-registration-form">
			
		<div class="col s12 center-align"><h5>{{"LBL_CONTACT_REG_INFO"|trans}}</h5></div>
		{% for fieldname in app.config['customer_registration_fields'] %}
			{% set vars = {'fieldinfo': contact_fields[fieldname], 'print_labels': 1} %}
			<div class="input-field col s12 m6">
				{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
				
			</div>
		{% endfor %}
		</form>
		
		<form id="org-registration-form">
		{% if app.config['customer_registration_enabled'] %} 
		
		<div class="col s12 center-align"><h5>{{"LBL_ORGANIZATION_REG_INFO"|trans}}</h5></div>
		{% for fieldname in app.config['org_registration_fields'] %}
			{% set vars = {'fieldinfo': org_fields[fieldname], 'print_labels': false} %}
			<div class="input-field col s12 m6">
				{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
				<label>{{org_fields[fieldname]["label"]|trans}} {% if org_fields[fieldname].nullable != 1 %}*{% endif %}</label>
			</div>
		{% endfor %}
		
		{% endif %}
		</form>
		<div class="clearfix"></div><br>
		{% if app.config['recaptcha_registration_enabled'] %} 
		<script src='https://www.google.com/recaptcha/api.js'></script>		
		<div class="col s12 center-align">
		<div class="g-recaptcha"
	          data-sitekey="{{app.config['recaptcha_client_key']}}"
	          data-callback="sendRegistrationRequest"
	          data-size="invisible">
	    </div>	
		<a
			class="btn {{themebasiccolor}} col s12"
			onclick="customerRegister()">
			Complete Registration
		</a>
		</div>
		
		{% else %}
	    <div class="input-field col s12 center-align">
	        <a href="javascript:customerRegister()" class="btn {{themebasiccolor}} col s12" />Complete Registration</a>
	    </div>
	    {% endif %}
	    
	    
    
	</div>
        
    <div class="col s12 center-align">
        <br><a style="float:left;"  class="red-text" href="javascript:togglePanel('customerlogintab')"/>Return to Login</a><br>
    </div>
    <div class="clearfix"></div>
 </div>
 
 {% endif %}
  {% endblock %}
 {% block footer %}

         
 <script>
	 
	 var orWidth = 0;
	 
	 $(function(){
		 orWidth = $(".login-logo").width();
		 $(".login-logo").css("max-width",orWidth+"px").css("margin","auto");
		 //togglePanel("customerregistertab");
	 })
	 
	 function togglePanel(panelid){
		 if(panelid=="customerregistertab")
			 $(".cardlogin").parent().removeClass("m6 offset-m3").addClass("m12");
		 
		 else $(".cardlogin").parent().removeClass("m12").addClass("m6 offset-m3");
		 
		 $(".logintabpanel").hide();
		 $("#"+panelid).show();
		 
		 
	 }
	 
	 function customerRegister(){
	
		 var isValid = true;
			
		$(".registerinputdiv").find("input:required,select:required,textarea:required").each(function(){
			if($(this).attr("type")!="checkbox" && ($(this).val()=="" || $(this).val()===undefined)){				
				if(isValid) $(this).focus();
				$(this).addClass("invalid");
				isValid = false;
			}
			else if($(this).attr("type")=="checkbox" && ($(this).attr("checked")==false || $(this).attr("checked")==undefined)){
				if(isValid) $(this).focus();
				$(this).addClass("invalid");
				isValid = false;
			}
			else $(this).removeClass("invalid");
		});
			
		if(isValid){
			{% if app.config['recaptcha_registration_enabled'] %} 
				grecaptcha.execute();
			{% else %}	
				sendRegistrationRequest();
			{% endif %}
			return true;
		}
		else {			
			Materialize.toast('{{"LBL_ALL_FIELDS_REQUIRED"|trans}}', 2000, 'rounded error-toast');
			return false;
		}
		 
		 
		 
	 }
	 
	 function sendRegistrationRequest(){
		 
		 $(".error-message, .registration-error-message").addClass("hide");
		 $(".registration-check-message").removeClass("hide");
		 
		 var postParams = { contact_details: $("#contact-registration-form").serialize(), org_details: $("#org-registration-form").serialize() };
		 
		 {% if app.config['recaptcha_registration_enabled'] %}
		 	postParams["g-recaptcha-response"]=grecaptcha.getResponse();
		 {% endif %}
		 
		 
		 $.post( "customer-register",postParams )
			  .done(function( data ) {
				  
				  $(".registration-check-message").addClass("hide");
				  
				  var response = jQuery.parseJSON(data);
				  if(response.result){
					  $(".error-message, .registration-error-message").addClass("hide").html("");
					  $(".success-message").html("{{'LBL_REGISTRATION_SUCCESS'|trans}}").removeClass("hide");
					  togglePanel("customerlogintab");
				  }
				  
				  else{
					  $(".registration-error-message").html(response.error).removeClass("hide");
				  }

		 });
		 
		 {% if app.config['recaptcha_registration_enabled'] %}
		 	grecaptcha.reset();
		 {% endif %}
	 }
	 
	 function customerPswReset(){
	
	 if($("#resetusername").val()==""){
		 $("#resetusername").addClass("invalid").focus();
		 return false;
	 }
	 
	 $("#pswreseterror").addClass("hide");	 
	 $("#pswresetcheck").removeClass("hide");
	 
	 $.post( "resetpassword", { username: $("#resetusername").val() })
		  .done(function( data ) {
			  var response = jQuery.parseJSON(data);
			  console.log(response);
			  if(response.result!="success"){
				  $("#pswresetcheck").addClass("hide");
				  $("#pswreseterror").html(response.error).removeClass("hide");				  
			  }
		      else{
			      $("#pswresetcheck").html("Password Reset Successfully Completed! <br> Please check your mailbox to find your new password.").removeClass("grey").addClass("green");
			      $("#pswreseterror, .resetinputdiv").addClass("hide");
		      }
		  });
	}
 </script>
    
</div>




<div class="card-action">
<span>{% if app.config.portal_brand is defined %}{{ app.config.portal_brand|raw }}{% endif %}</span>
</div>

</div>
</div>
</div>
</div>
{% endblock %}