{% extends 'themes/default/config/layout.html' %}
{% block body %}

<style>
	.color-picker{	
		width: 100%;
		border: 1px solid lightgray;
		padding: 5px;
		font-size: 10px;
		font-weight: bold;
	}
</style>
<div class="row">
	
	
	
		<div class="col s12 m12">
            <h4 class="light">Customer Profile</h4>
            <div class="card orange">
              <div class="card-content white-text">
                
              </div>
              <div class="card-tabs">
                <ul class="tabs tabs-fixed-width tabs-transparent">
	              <li class="tab"><a href="#profiles-tab" class="active">Profiles</a></li>                  
                  <li class="tab"><a href="#general-tab"  >Editable Informations</a></li> 
                  <li class="tab"><a href="#registration-tab"  >Registration Form</a></li>               
                <div class="indicator" style="right: 173.594px; left: 173.406px;"></div></ul>
              </div>
              <div class="card-content white general-settings-tab">
                
                <div id="general-tab">
	                <div class="col s12 m12"><h5>Contact Preferences</h5></div>
	                
	               
	                <div class="col s12 m6">
							<ul class="collection">	      
						      <li class="collection-item" field-name="customer_edit_fields" field-group="profile_group">
						    
						      <b>Editable Fields: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{% for fieldname in  general_settings['customer_edit_fields'] %}
						      		<a class="btn {{themebasiccolor}} btn-small">{{field_labels_contact[fieldname]|trans}}</a>  
						      	{% endfor %} 
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[customer_edit_fields]" class="chosen-select" multiple sort-order="{{ general_settings['customer_edit_fields']|join(',')}}" required param-name="customer_edit_fields">
								      {% for field in contact_params['fields'] %}
								      	{% if field.name!="id"  %}
								      		<option value="{{field.name}}" {% if field.name in  general_settings['customer_edit_fields'] or field.mandatory %}selected {% endif %}>{{field.label|trans}} {% if field.mandatory %}*{% endif %}</option>
								      	{% endif %}	
								      {% endfor %}
							      </select>
						      </div>
							  </li>
							  
						    </ul>
					</div>
					
					<div class="col s12 m12 center-align">
		                <a class="btn red edit-group-btn" field-group="profile_group"><i class="material-icons left">edit</i>Edit</a>
			            <a class="btn green save-group-btn hide" field-group="profile_group" >Save</a>
			            <a class="btn grey hide cancel-group-btn" field-group="profile_group"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>
					
					
					
					<div class="col s12 m12"><hr><h5>Organization Preferences</h5></div>
	                
	                <div class="col s12 m6">
						<ul class="collection">
						      <li class="collection-item" field-name="customer_org_edit_enabled" field-group="org_group">
						      <b>Edit Enabled: </b><br>
						      <div class="details_content">
						      <span class=" flow-text">{% if  general_settings['customer_org_edit_enabled'] %}On{% else %}Off{% endif %}</span></div>
						        <div class="edit_content hide">
								      <div class="switch">
									    <label>Off 
									    <input type="checkbox" name="settings[customer_org_edit_enabled]" {% if  general_settings['customer_org_edit_enabled'] %}checked="checked" value="1" {% endif %} param-name="customer_org_edit_enabled">
									    <span class="lever"></span> On
									    </label>
									  </div>
						      </div>
						      </li>
							</ul>
	                </div>
	                
	                <div class="col s12 m6">
							<ul class="collection">	      
						      <li class="collection-item" field-name="customer_org_edit_fields" field-group="org_group">
						    
						      <b>Editable Fields: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{% for fieldname in  general_settings['customer_org_edit_fields'] %}
						      		<a class="btn {{themebasiccolor}} btn-small">{{field_labels_org[fieldname]|trans}}</a>  
						      	{% endfor %} 
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[customer_org_edit_fields]" class="chosen-select" multiple sort-order="{{ general_settings['customer_org_edit_fields']|join(',')}}" required param-name="customer_org_edit_fields">
								      {% for field in org_params['fields'] %}
								      	{% if field.name!="id"  %}
								      		<option value="{{field.name}}" {% if field.name in  general_settings['customer_org_edit_fields'] or field.mandatory %}selected {% endif %}>{{field.label|trans}} {% if field.mandatory %}*{% endif %}</option>
								      	{% endif %}	
								      {% endfor %}
							      </select>
						      </div>
							  </li>
							  
						    </ul>
					</div>
					
					<div class="col s12 m12 center-align">
		                <a class="btn red edit-group-btn" field-group="org_group"><i class="material-icons left">edit</i>Edit</a>
			            <a class="btn green save-group-btn hide" field-group="org_group" >Save</a>
			            <a class="btn grey hide cancel-group-btn" field-group="org_group"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>
					
					
                </div>
                
                
                
                
                
                
                
                
                <div id="registration-tab">
	                <div class="col s12 m12"><h5>Customer Registration Form</h5></div>
	                
	                 <div class="col s12 m6">
						<ul class="collection">
						      <li class="collection-item" field-name="customer_registration_enabled" field-group="registration_group">
						      <b>Registration Enabled: </b><br>
						      <div class="details_content">
						      <span class=" flow-text">{% if  general_settings['customer_registration_enabled'] %}On{% else %}Off{% endif %}</span></div>
						        <div class="edit_content hide">
								      <div class="switch">
									    <label>Off 
									    <input type="checkbox" name="settings[customer_registration_enabled]" {% if  general_settings['customer_registration_enabled'] %}checked="checked" value="1" {% endif %} param-name="customer_registration_enabled">
									    <span class="lever"></span> On
									    </label>
									  </div>
						      </div>
						      </li>
							</ul>
	                </div>
	               
	                <div class="col s12 m6">
						<ul class="collection">		      
						      <li class="collection-item" field-name="customer_registration_fields" field-group="registration_group">
						    
						      <b>Contact Fields: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{% for fieldname in general_settings['customer_registration_fields'] %}
							  		<a class="btn {{themebasiccolor}} btn-small">{{field_labels_contact[fieldname]|trans}}</a>  
						      	{% endfor %} 
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[customer_registration_fields]" class="chosen-select" multiple sort-order="{{ general_settings['customer_registration_fields']|join(',')}}" required param-name="customer_registration_fields">
								      {% for field in contact_params['fields'] %}
								      	{% if field.name!="id" and field.type.name not in ["reference","owner","autogenerated"] and field.editable %}
								      	{% if field.name=="email" %}
								      		{% set force_mandatory=true %}
								      	{% else %}
								      		{% set force_mandatory=false %}
								      	{% endif %}
								      		<option value="{{field.name}}" myc-forcemandatory="{{force_mandatory}}" {% if field.name in  general_settings['customer_registration_fields'] or field.mandatory or force_mandatory %}selected {% endif %}>{{field.label|trans}} {% if field.mandatory  or force_mandatory %}*{% endif %}</option>
								      	{% endif %}	
								      {% endfor %}
							      </select>
						      </div>
							  </li>
							  
							   
							  
						    </ul>
					</div>
					
					<div class="col s12 m12">
						<ul class="collection">
						{% include 'themes/default/config/module/update-field.html' with { is_group: "true", condition_rows:   general_settings['contact_registration_preset'], f_label: "Contact Predefined Values", f_name: "contact_registration_preset", f_group: "registration_group", module_params: contact_params, field_labels: field_labels_contact, hide_logged: true } %} 
						</ul>
					</div>
					
	                
	                <div class="col s12 m6">
						<ul class="collection">
						      <li class="collection-item" field-name="org_registration_enabled" field-group="registration_group">
						      <b>Organization Registration Enabled: </b><br>
						      <div class="details_content">
						      <span class=" flow-text">{% if  general_settings['org_registration_enabled'] %}On{% else %}Off{% endif %}</span></div>
						        <div class="edit_content hide">
								      <div class="switch">
									    <label>Off 
									    <input type="checkbox" name="settings[org_registration_enabled]" {% if  general_settings['org_registration_enabled'] %}checked="checked" value="1" {% endif %} param-name="org_registration_enabled">
									    <span class="lever"></span> On
									    </label>
									  </div>
						      </div>
						      </li>
							</ul>
	                </div>
	                
	                <div class="col s12 m6">
							<ul class="collection">	      
						      <li class="collection-item" field-name="org_registration_fields" field-group="registration_group">
						    
						      <b>Organization Fields: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{% for fieldname in  general_settings['org_registration_fields'] %}
						      		<a class="btn {{themebasiccolor}} btn-small">{{field_labels_org[fieldname]|trans}}</a>  
						      	{% endfor %} 
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[org_registration_fields]" class="chosen-select" multiple sort-order="{{ general_settings['org_registration_fields']|join(',')}}" required param-name="org_registration_fields">
								      {% for field in org_params['fields'] %}
								      	{% if field.name!="id" and field.name!="email1"  and field.type.name not in ["reference","owner","autogenerated"] and field.editable  %}
								      		<option value="{{field.name}}" {% if field.name in  general_settings['org_registration_fields'] or field.mandatory %}selected {% endif %}>{{field.label|trans}} {% if field.mandatory %}*{% endif %}</option>
								      	{% endif %}	
								      {% endfor %}
							      </select>
						      </div>
							  </li>
							  
							  
							  
						    </ul>
					</div>
					
					<div class="col s12 m12">
						<ul class="collection">							
							  {% include 'themes/default/config/module/update-field.html' with { is_group: "true", condition_rows:   general_settings['org_registration_preset'], f_label: "Organization Predefined Values", f_name: "org_registration_preset", f_group: "registration_group", module_params: org_params, field_labels: field_labels_org, hide_logged: true } %} 
						</ul>
					</div>
					
					<div class="col s12 m12 center-align">
		                <a class="btn red edit-group-btn" field-group="registration_group"><i class="material-icons left">edit</i>Edit</a>
			            <a class="btn green save-group-btn hide" field-group="registration_group" >Save</a>
			            <a class="btn grey hide cancel-group-btn" field-group="registration_group"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>
	                
	                
	                
	                
	                
	                <div class="col s12 m12"><hr><h5>Recaptcha Preferences</h5></div>
	                
	                <div class="col s12 m6">
						<ul class="collection">
						      <li class="collection-item" field-name="recaptcha_registration_enabled" field-group="recaptcha_group">
						      <b>Recaptcha Enabled: </b><br>
						      <div class="details_content">
						      <span class=" flow-text">{% if  general_settings['recaptcha_registration_enabled'] %}On{% else %}Off{% endif %}</span></div>
						        <div class="edit_content hide">
								      <div class="switch">
									    <label>Off 
									    <input type="checkbox" name="settings[recaptcha_registration_enabled]" {% if  general_settings['recaptcha_registration_enabled'] %}checked="checked" value="1" {% endif %} param-name="recaptcha_registration_enabled">
									    <span class="lever"></span> On
									    </label>
									  </div>
						      </div>
						      </li>
							</ul>
	                </div>
	                
	                <div class="col s12 m6">
							<ul class="collection">	      
						      <li class="collection-item" field-name="recaptcha_client_key" field-group="recaptcha_group">
						    
						      <b>Recaptcha Client Key: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{{general_settings['recaptcha_client_key']}}
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <input name="settings[recaptcha_client_key]" param-name="recaptcha_client_key" type="text" value="{{general_settings['recaptcha_client_key']}}">
						      </div>
							  </li>
							  
						    </ul>
					</div>
					<div class="col s12 m6">
							<ul class="collection">	      
						      <li class="collection-item" field-name="recaptcha_server_key" field-group="recaptcha_group">
						    
						      <b>Recaptcha Server Key: </b><br>
						      <div class="details_content">
						      	<span class="flow-text">
						      	{{general_settings['recaptcha_server_key']}} 
						      	</span>
						      </div>
						      <div class="edit_content hide">
							      <input name="settings[recaptcha_server_key]" param-name="recaptcha_server_key" type="text" value="{{general_settings['recaptcha_server_key']}}">
						      </div>
							  </li>
							  
						    </ul>
					</div>
					
					<div class="col s12 m12 center-align">
		                <a class="btn red edit-group-btn" field-group="recaptcha_group"><i class="material-icons left">edit</i>Edit</a>
			            <a class="btn green save-group-btn hide" field-group="recaptcha_group" >Save</a>
			            <a class="btn grey hide cancel-group-btn" field-group="recaptcha_group"><i class="material-icons left">close</i>Cancel</a><br><br>
	                </div>
	                
					<div class="col s12 m12 card " style="padding: 10px"><h5>Get your reCAPTCHA keys:</h5>To get your google reCAPTCHA key please visit the <a href="https://www.google.com/recaptcha/admin" target="_blank">Google reCAPTCHA Console</a> and login with your google account credentials, at this point you'll need to register a new website using the box on the bottom of the page, then label it for example "MYC Portal" and select "Invisible reCAPTCHA" as recaptcha type, now just add the domains where you want enable the usage of these recaptcha keys, accept the terms and press on "Register" button. You should now ee your new keys "Website Key" (Recaptcha Client Key) and "Secret Key" (Recaptcha Server Key), just copy it and paste in the boxes here.</div><br>
					
					
					
					  
	                <div class="col s12 m12"><hr><h5>Website Login/Registration Integration</h5></div>
	                <div class="col s12 m12">
		                <p class="flow-text0"><b>1)</b> paste this snippet before closing the <b>{{'</head>'|escape}}</b> tag on your HTML template:</p>
		                <pre style="font-size: 16px">{{api_script}}</pre>
		                <br>
		                <p class="flow-text0"><b>2)</b> add the class <b>myc-open-register-modal</b> to your button to open registration modal window on click or the class <b>myc-open-login-modal</b> to open login modal window on click.</p>
		                <br>
		                <p class="flow-text0"><b>Login Button Example Code:</b></p>
		                <pre style="font-size: 16px">{{'<a class="myc-open-login-modal">Login</a>'|escape}}</pre>
		                <br>
		                <p class="flow-text0"><b>Registration Button Example Code:</b></p>
		                <pre style="font-size: 16px">{{'<a class="myc-open-register-modal">Register</a>'|escape}}</pre>
		                
	                </div>
	                
	                
	                
					
                </div>
                
                
              
                
                
             
             
				<div id="profiles-tab"  class="active">
	                <div class="col s12 m12"><h5>Customer Profiles</h5></div>
	                
	                <div class="col s12 m12">
						<ul class="collection">
						      
						      {% set last_id = '1' %}
						      
						      
						      {% for customer_role in available_roles %}
						      
						      {% if customer_role.id > 1 %}
						      
							  {% set last_id = customer_role.id %}
							
							  <li class="collection-item" field-name="profile_name" field-group="customer_role_{{customer_role.id}}">
						      <b>Profile Name: </b><br>
						      <div class="details_content">
							      <span class=" flow-text">{{customer_role.name}}</span>
						      </div>
						      <div class="edit_content hide">
							    <input type="text" name="settings[profile_name]" param-name="profile_name" {% if customer_role.name is defined %} value="{{customer_role.name}}" {% endif %} required>	
							    <div class="clearfix"></div>
						      </div>
						      </li>
						      
						      <li class="hide" field-name="role_id" field-group="customer_role_{{customer_role.id}}">
						      <input type="hidden" name="settings[role_id]" param-name="role_id" value="{{customer_role.id}}" >	
						      </li>
							
							  <li class="collection-item" field-name="condition_operator" field-group="customer_role_{{customer_role.id}}" >
						      <b>Condition Operator: </b><br>
						      <div class="details_content">
						      <span class=" flow-text">
						      {% if customer_role.match_conditions.condition_operator=="OR" %}Match at least one
						      {% elseif customer_role.match_conditions.condition_operator=="AND" %} Match all
						      {% endif %}
						      </span>
						      </div>
						      <div class="edit_content hide">
							      <select name="settings[condition_operator]" id="role{{customer_role.id}}_condition_operator"  param-name="condition_operator">
								      <option value="OR" {% if customer_role.match_conditions.condition_operator=="OR" %}selected{% endif %}>Match at least one condition</option>
								      <option value="AND" {% if customer_role.match_conditions.condition_operator=="AND" %}selected{% endif %}>Match all conditions</option>
							      </select>
						      </div>
						      </li>	
							
							
						      <li class="collection-item" field-name="role_conditions" field-type="conditions" field-group="customer_role_{{customer_role.id}}">
						      <b>Match Conditions: </b><br>
						      <div class="details_content"><span class=" flow-text">
							    {% if customer_role.match_conditions.conditions is defined %}
							  	{% for condition in customer_role.match_conditions.conditions %}
							  		- <b>{% if field_labels[condition.field] is defined %}{{field_labels[condition.field]|trans}}{% else %}{{condition.field|trans}}{% endif %}</b> {{condition.condition|trans}} <b> {{condition.value|trans}}</b> <br>
							  	{% endfor %}
							  	{% endif %}
							  </span>
						      </div>
						      <div class="edit_content hide">
							      <div class="row">
								  <div class="col s12"><br></div>
							      </div>
							      
							      <div class="condition-rows-visible">
								      {% if customer_role.match_conditions.conditions is defined %}
								      {% for condition in customer_role.match_conditions.conditions %}
								      <div class="row condition-row" condition-count="{{loop.index}}">
									      
										  <div class="col s4">
									      <select class="vt_field_picker browser-default" vt-field="role_conditions" condition-count="{{loop.index}}" name="settings"  config-val="field">
										      {% for field in contact_params['fields'] %}
										      
										      <option value="contact.{{field.name}}" field-type="{{field.type.name}}" field-info="{{field|json_encode()}}" {% if "contact."~field.name==condition.field %}selected{% endif %}>Contact - {{field.label|trans}}</option>						
						
										      {% endfor %}
										      {% for field in org_params['fields'] %}
										      
										      <option value="organization.{{field.name}}" field-type="{{field.type.name}}" field-info="{{field|json_encode()}}" {% if "organization."~field.name==condition.field %}selected{% endif %}>Organization - {{field.label|trans}}</option>						
						
										      {% endfor %}
									      </select>
										  </div>
										  
										  <div class="col s3 center-align">
											<select class="vt_rule_contition browser-default" vt-field="role_conditions" name="settings" config-val="comparator" saved-value="{{condition.condition}}">
											  <option value="comparator" selected disabled>Comparator</option>
										    </select>										  	  
										  </div>
										  
										  <div class="col s4  center-align">
											<div class="vt_field_target" vt-field="customer_role_{{customer_role.id}}">
												<input type="hidden" saved-value="{{condition.value}}">
											</div>	    
										  </div>
										  
										  <div class="col s1 right-align">
										  	<a class="btn-floating red delete-row"><i class="material-icons">close</i></a>											  </div>
										  								  
								      </div>
								      {% endfor %}
								      {% endif %}
							      </div>
							      
							      <div class="conditions-row-empty hide">
									  <div class="row condition-row" condition-count="">
									      
										  <div class="col s4">
									      <select class="vt_field_picker browser-default" vt-field="role_conditions" condition-count="">
										       {% for field in contact_params['fields'] %}
										      
										      <option value="contact.{{field.name}}" field-type="{{field.type.name}}" field-info="{{field|json_encode()}}">Contact - {{field.label|trans}}</option>						
						
										      {% endfor %}
										      {% for field in org_params['fields'] %}
										      
										      <option value="organization.{{field.name}}" field-type="{{field.type.name}}" field-info="{{field|json_encode()}}">Organization - {{field.label|trans}}</option>						
						
										      {% endfor %}
									      </select>
										  </div>
										  
										  <div class="col s3 center-align">
											  	  <select class="vt_rule_contition  browser-default" vt-field="condition_fields">
											      	<option value="comparator" selected disabled>Comparator</option>
										      	  </select>										  	  
										  </div>
										  
										  <div class="col s4  center-align">
											<div  class="vt_field_target" vt-field="condition_fields">
												<input type="text" disabled placeholder="Value">
											</div>	    
										  </div>
										  
										  <div class="col s1 right-align">
										  <a class="btn-floating red delete-row"><i class="material-icons">close</i></a>			
										  </div>							  
								      </div>
							      </div>
							      
							      
							      
							      
							      <div class="col s12 center-align">				      
								      <a class="btn green add-condition-row">Add New</a>
							      </div>
							      <br><br><div class="clearfix"></div>
						      </div>
						        <div class="col s12 m12 center-align">
								 
								 
				                  
				                <a class="btn red edit-group-btn" field-group="customer_role_{{customer_role.id}}"><i class="material-icons left">edit</i>Edit</a>
					            <a class="btn green save-group-btn hide" field-group="customer_role_{{customer_role.id}}" field-validation="customer_role">Save</a>
					            <a class="btn grey hide cancel-group-btn" field-group="customer_role_{{customer_role.id}}"><i class="material-icons left">close</i>Cancel</a>
					           
					            
				                 
					            <br><br>
					            
					            <form method="post" id="remove_profile_{{customer_role.id}}">
					                 <input type="hidden" name="delete_id" value="{{customer_role.id}}">
					                 <input type="hidden" name="delete_role" value="1" >
					              
					                 <a class="btn red" onclick="removeProfile('{{customer_role.id}}')">Delete Profile</a>
				                 </form>
				                 
				                  <br><br>
					            
			                </div>
			                <br><br><div class="clearfix"></div>
							  </li>
							  
							 <hr>
							  
							  {% endif %}
							  {% endfor %}
						      
						      
						      
						      
							</ul>
							
							
							<div class="col s12 m12 center-align">
								  
				                 
				                 
				                 <form method="post">
					                 <div class="col s8 m10 center-align">
					                 <input type="text" name="profile_name" param-name="profile_name" placeholder="Profile Name" required>
					                 <input type="hidden" name="last_id" value="{{last_id}}" >
					                 </div>
					                 <div class="col s4 m2 center-align">
					                 <button class="btn green" type="submit">Create new Profile</button><br><br>
					                 </div>
				                 </form>
					            
			                </div>
			                <br><br><div class="clearfix"></div>

							
	                </div>
				</div>    
             
                <div class="clearfix"></div>
                
              </div>
            </div>
          </div>
	
</div>	




{% endblock %}

{% block footerscripts %}

<script>

	function removeProfile(id){
		swal({
		  title: 'Are you sure?',
		  text: "You won't be able to revert this!",
		  type: 'warning',
		  showCancelButton: true,
		  confirmButtonColor: '#3085d6',
		  cancelButtonColor: '#d33',
		  confirmButtonText: 'Yes, delete it!'
		}).then(function () {
		  swal(
		    'Deleted!',
		    'Your file has been deleted.',
		    'success'
		  );
		  $("#remove_profile_"+id).submit();
		})
	}	
	

						
</script>

{% include 'themes/default/config/resources/myc_field_engine.js.html' %}

{% endblock %}