{% extends 'themes/'~layout_dir~'/layout.html' %}
{% block body %}

<!-- Modal Structure -->
  <div id="change_password_modal" class="modal">
    <div class="modal-content">
      <h4>{{"Change Password"|trans}}</h4>
      <p>
	      <div class="row">
	        <div class="input-field col s12 m6">
	          <input placeholder="New Password" id="new_password" type="password" class="validate">
	          <label for="new_password">New Password</label>
	        </div>
	        <div class="input-field col s12 m6">
	          <input placeholder="Confirm New Password" id="new_password_confirm" type="password" class="validate">
	          <label data-error="Password must Match" for="new_password_confirm">Confirm</label>
	        </div>
	      </div>
      </p>
    </div>
    <div class="modal-footer">
      <a class="modal-action modal-close waves-effect waves-green btn-flat grey-text">{{"Cancel"|trans}}</a>
      <a id="change_password_btn" onclick="changePassword()" class="modal-action waves-effect waves-green btn-flat">{{"Change Password"|trans}}</a>
    </div>
  </div>


<div class="row">
 	
  	{% block create_header %}
    {% endblock %}
     
	    
	{% if app.config.customer_org_edit_enabled and account_record is defined %}
	
	<div class="col s12 m12">
		<h4>{{"Organization"|trans}}</h4>
	</div>
	
	
	
	<form method="post" id="accountform">
		
	<ul class="collapsible-block popout detailstab" data-collapsible="expandable">
   	  
   	  	{% set record = account_record %}
   	  	<input type="hidden" name="record[id]" value="{{record['id']}}">
   	  	
	    {% for block,fields in account_modlayout %}
	    	
	    	{% set totvisiblefields = '0' %}
	    	
	    	{% for fieldname in fields %}
				{% if account_create_fields[fieldname] is defined %} 
					{% set totvisiblefields = totvisiblefields + 1%}
				{% endif %}
			{% endfor %}
			
	        {% if totvisiblefields > 0 %}
		        <li>
		        	<div class="col s12 m12"> 
						<h5>{{block|trans|raw}}</h5>
					</div>
					{% set issetEven = false %}  	
					{% if fields|length > 1 %} {% set colsize = '6' %} {% else %} {% set colsize = '12' %} {% endif %}			
				  	<div class="col s12 m{{colsize}}">
				  	  <div class="card">
					  	  <ul class="collection"  style="overflow: visible">
					        {% for fieldname in fields %}
					        	
					        	{% if loop.index is odd and account_create_fields[fieldname] is defined %}
					        		<li class="collection-item ">
					        		{% set vars = {'fieldinfo': account_create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
				            		</li>
				            	{% else %}
				            		{% set issetEven = true %}
				            	{% endif %}
					        
				            {% endfor %}
					      </ul>
				  	  </div>
				  	</div>
				  
				  	{% if issetEven %}
				  	<div class="col s12 m{{colsize}}">
				  	  <div class="card">
					  	  <ul class="collection"  style="overflow: visible">
					        {% for fieldname in fields %}
					        	
					        	{% if loop.index is even and account_create_fields[fieldname] is defined %}
					        		<li class="collection-item ">
					        		{% set vars = {'fieldinfo': account_create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}
				            		</li>	
				            	{% endif %}
					        	
				            {% endfor %}
					      </ul>
				  	  </div>
				  	</div>
				  	{% endif %}
	
					<div class="clearfix"></div>
					       
		        </li>		        
			{% endif %}
	    {% endfor %}
		
	</ul>
	</form>
	
	{% endif %}

	
	

	<div class="col s12 m12"><hr><h4>{{"Contact"|trans}}</h4></div>

	<form method="post" id="contactform">
   	 <ul class="collapsible-block popout detailstab " data-collapsible="expandable">
   	    
   	    {% set record = contact_record %}
   	    <input type="hidden" name="record[id]" value="{{record['id']}}">
   	    
	    {% for block,fields in contact_modlayout %}
	    	
	    	{% set totvisiblefields = '0' %}
	    	
	    	{% for fieldname in fields %}
				{% if contact_create_fields[fieldname] is defined %} 
					{% set totvisiblefields = totvisiblefields + 1%}
				{% endif %}
			{% endfor %}
			
	        {% if totvisiblefields > 0 %}
	        
	        	
		        <li>
					<div class="col s12 m12"> 
						<h5>{{block|trans|raw}}</h5>
					</div>	
					{% set issetEven = false %}  	
					{% if fields|length > 1 %} {% set colsize = '6' %} {% else %} {% set colsize = '12' %} {% endif %}			
				  	<div class="col s12 m{{colsize}}">
				  	  <div class="card">
					  	  <ul class="collection"  style="overflow: visible">
					        {% for fieldname in fields %}
					        	
					        	{% if loop.index is odd and contact_create_fields[fieldname] is defined %}
					        		<li class="collection-item ">
					        		{% set vars = {'fieldinfo': contact_create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
					        		</li>
				            	{% else %}
				            		{% set issetEven = true %}
				            	{% endif %}
				            {% endfor %}
					      </ul>
				  	  </div>
				  	</div>
				  
				  	{% if issetEven %}
				  	<div class="col s12 m{{colsize}}">
				  	  <div class="card">
					  	  <ul class="collection"  style="overflow: visible">
					        {% for fieldname in fields %}
					        	
					        	{% if loop.index is even and contact_create_fields[fieldname] is defined %}
					        		<li class="collection-item ">
					        		{% set vars = {'fieldinfo': contact_create_fields[fieldname]} %}
				            		{% include 'themes/default/modules/PortalModule/create_edit_fields.html' with vars %}	
					        		</li>
				            	{% endif %}
				            	
				            {% endfor %}
					      </ul>
				  	  </div>
				  	</div>
				  	{% endif %}
				  	
					<div class="clearfix"></div>
					       
		        </li>		        
			{% endif %}
	    {% endfor %}
		
		</ul>
		</form>
	
	<div class="col s12 m12 center-align">
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" href="javascript:gotoPage('{{app.config.base_url}}/{{current_route}}/')">{{"Cancel"|trans}}</a>
		<a class="btn {{themebasiccolor}} waves-effect waves-light btn-medium" onclick="" href="javascript:updateProfile()">
		{{"Save"|trans}}</a>
		<a class="btn {{themebasiccolor}}"  href="#change_password_modal" >{{"Change Password"|trans}}</a>
	</div>
	
	  	
	{% block create_footer %}

    {% endblock %}
  	
  
</div>

{% endblock %}

{% block footerscripts %}

<script>
	
	$(function(){
		
		$("#change_password_btn").hide();
		
		$("#new_password, #new_password_confirm").keyup(function(){
			validatePasswords();
		});
	})
	
	function validatePasswords(){
		if($("#new_password").val()!=$("#new_password_confirm").val()){
				$("#change_password_btn").hide();
				$("#new_password_confirm").addClass("invalid");
				return false;
		}
		else{ 
				$("#new_password_confirm").removeClass("invalid");
				$("#change_password_btn").show();
				return true;
		}
	}
	
	function changePassword(){
		if(validatePasswords()){
			$(".se-pre-con").show();
			$.post(window.location+"change-password/", { newpassword: $("#new_password").val() })
				 .done(function(data){		
					console.log(data);				
					var response = jQuery.parseJSON(data);	
					$(".se-pre-con").fadeOut("slow");
					$('#change_password_modal').modal('close');
					
					swal({
						    title: '{{"Done!"|trans}}',
						    text: '{{"Your password has been changed successfully!"|trans}}',
						    type: 'success',
						    timer: 3000,
					});		
					
			});
		}
	}
	
	function updateProfile(){

			 var updated_infos = {"contact":{}};
			 
			 if($("#accountform").length){
				updated_infos["account"]={};
				$.each($('#accountform').serializeArray(), function(_, kv) {
				  updated_infos["account"][kv.name.replace("record[", "").replace("]", "")] = kv.value;
				});
			 }
			 
			 $.each($('#contactform').serializeArray(), function(_, kv) {
				  updated_infos["contact"][kv.name.replace("record[", "").replace("]", "")] = kv.value;
			 });
			 
			 
			 
			 $.post(window.location, { updated_infos: JSON.stringify(updated_infos) })
			 .done(function(data){		
								
				var response = jQuery.parseJSON(data);	
				console.log(response);
				
				if(response.success===false){
					alert("Errors");
				}
				else{					
					swal({
					    title: '{{"Done!"|trans}}',
					    text: '{{"Your informations has been updated successfully!"|trans}}',
					    type: 'success',
					    timer: 3000,
					})		
				}
			});
			 
			 console.log(updated_infos);
			 
			 return false;
	}
		 
		 
	$(document).ready(function(){
		
		
		$('.datepicker').pickadate({
			formatSubmit: 'yyyy-mm-dd',
		    selectMonths: true, // Creates a dropdown to control month
		    selectYears: true // Creates a dropdown of 15 years to control year
		  });
  
  
		$('.collapsible-block').collapsible({
	      accordion : false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
	    });
	    $( ".collapsible-header" ).click(function() {
		      $(".more",this).toggle()
		      $(".less", this).toggle()
		});
		  
		 		 		  
	});
	  
</script>
{% endblock %}