{{ xheader }}
{% if  journal3_popup %}
<style type="text/css">
#accountTabs,footer,.separator,.separator+.text-center,.navbar{
	display: none;
}
body{
    margin-bottom: 20px;
}
.profile-card {
	margin: 0;
}
.xaccountlogo{
	max-width: 150px;
}
.otpregisterconfirmsection{
	padding: 0 20px;
}
</style>
{% endif %}
<div id="myLoader" class="loader">
<!-- <div class="innerloader"><i class="fa fa-spinner fa-spin" aria-hidden="true"></i></div> -->
</div>
<div class="container">
  {% if error_warning %}
  <div class="alert alert-danger"><i class="fa fa-exclamation-circle"></i> {{ error_warning }}</div>
  {% endif %}
  <div class="row">
    <div id="xlogin" class="login-panel-bg">
<div id="loginPage" class="login-section">
<div id="login-tabs" class="tabbable">
<ul id="accountTabs" class="nav nav-tabs">
<li class="login-step">
	<a href="{{ login }}"account="login">{{ text_login }}</a>
</li>
<li class="register-step active">
	<a data-target="#panel-register" data-toggle="tab" account="register">{{ text_register }}</a>
</li>
</ul>
</div>
{{ xsocial }}
<div class="tab-content">
<div class="tab-pane active" id="panel-register"> 
            <div id="xregister-panel">
            <div class="row" id="tab-register">
              <div class="col-md-12" >  
              <form role="form" id="form_register" autocomplete="off"  action="#" novalidate method="post" enctype="multipart/form-data">
	      {% if   not xsocial|trim  %} 
              <div class="section-heading hide_guest">{{ text_account_new }}</div>
              {% endif %}
              {% if journal3_popup %}
               <input type="hidden" name="from_j3_popup" value="1" />
              {% endif %}   
              <input type="hidden" name="country_code" id="input_country_code" />
              {% for html in fields['checkout'] %}
                  {{ html }}
              {% endfor %}   
          	  {% if display_newsletter %}
                  <div class="form-group hide_guest">
                      <div class="checkbox is_checkbox">
					  	<label for="newsletter"><input type="checkbox" class="input-checkbox" name="newsletter" value="1" id="newsletter" {{ newsletter?'checked="checked"':'' }} />{{ entry_newsletter }}</label>
					  </div>
                  </div>
               {% endif %}  
               {% if text_agree %}
                  <div id="xagreep" class="form-group hide_guest">
                      <div class="checkbox is_checkbox">
					  	<label id="xagree" for="agree"><input type="checkbox" class="input-checkbox" name="agree" value="1" id="agree">{{ text_agree }}</label>
					  </div>
                  </div>
                {% endif %}
                {% if captcha %}
               	<div class="group">
			  		{{ captcha }}
			  	</div>
			  	{% endif %}
                <div class="buttons">
         		   <input type="submit" value="{{ button_continue }}" id="button-register" account="register" data-loading-text="Loading..." class="btn btn-success width100" />
       			</div>
              </form>
              </div>
            </div> 
             <div class="separator"></div>
             <div class="text-center">  
             <label class="text-separator">{{ text_account_already_checkout }}</label>
             <a href="{{ login }}" class="btn btn btn-success width100" >{{ text_login }}</a>                                   
             </div>
             </div>
</div>

</div>              
			             
</div>
</div>
      </div>
</div>
{% if mask %}
<script type="text/javascript" src="catalog/view/javascript/xtensions/stylesheet/bs/js/jquery.maskedinput.min.js"></script>
<script type="text/javascript">
 jQuery(function($){
	 {% for key, value in mask %}	      
	 $("#{{ key }}").mask("{{ value }}");	      
	 {% endfor %}
 });
 </script>
{% endif %}
<script type="text/javascript" src="catalog/view/javascript/xtensions/stylesheet/bs/js/xcustom.js"></script>
<script type="text/javascript"><!--
$('input[name=\'customer_group_id\']').on('change', function() {
	$.ajax({
		url: 'index.php?route=account/register/customfield&customer_group_id=' + this.value,
		dataType: 'json',
		success: function(json) {
			$('.custom-field').hide();
			$('.custom-field label span.fieldlabel').removeClass('required');

			for (i = 0; i < json.length; i++) {
				custom_field = json[i];

				$('#custom-field' + custom_field['custom_field_id']).show();

				if (custom_field['required']) {
					$('#custom-field' + custom_field['custom_field_id'] + ' label > span.fieldlabel').addClass('required');
				}
			}
			

		},
		error: function(xhr, ajaxOptions, thrownError) {
			alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
		}
	});
});

$('input[name=\'customer_group_id\']:checked').trigger('change');
//--></script> 
<script type="text/javascript"><!--
$('button[id^=\'button-custom-field\']').on('click', function() {
	var node = this;

	$('#form-upload').remove();

	$('body').prepend('<form enctype="multipart/form-data" id="form-upload" style="display: none;"><input type="file" name="file" /></form>');

	$('#form-upload input[name=\'file\']').trigger('click');

	if (typeof timer != 'undefined') {
    	clearInterval(timer);
	}
	
	timer = setInterval(function() {
		if ($('#form-upload input[name=\'file\']').val() != '') {
			clearInterval(timer);
			
			$.ajax({
				url: 'index.php?route=tool/upload',
				type: 'post',
				dataType: 'json',
				data: new FormData($('#form-upload')[0]),
				cache: false,
				contentType: false,
				processData: false,
				beforeSend: function() {
					$(node).button('loading');
				},
				complete: function() {
					$(node).button('reset');
				},
				success: function(json) {
					$(node).parent().find('.text-danger').remove();
					
					if (json['error']) {
						$(node).parent().find('input').after('<div class="text-danger">' + json['error'] + '</div>');
					}
	
					if (json['success']) {
						alert(json['success']);

						$(node).parent().find('input').val(json['code']);
					}
				},
				error: function(xhr, ajaxOptions, thrownError) {
					alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
				}
			});
		}
	}, 500);
});
//--></script> 
<script type="text/javascript"><!--
$('.date').datetimepicker({
	pickTime: false
});

$('.time').datetimepicker({
	pickDate: false
});

$('.datetime').datetimepicker({
	pickDate: true,
	pickTime: true
});
var hasCountryCode = false;
//--></script>
{% if show_country_code %}
<script type="text/javascript">
var hasCountryCode = true;
var inputTelephhone = document.querySelector("#input-telephone");
var xiti = window.intlTelInput(inputTelephhone, {
    	autoHideDialCode: false,
    	nationalMode: false,
    	autoFormat: false,
    	formatOnDisplay: false,
    	autoPlaceholder: false,
    	separateDialCode: true,
    	{% if isMobile and only_top_countries %}
    		dropdownContainer:document.querySelector("#regular-field-telephone"),
    	{% endif %}
    	{% if all_countries %}
    		onlyCountries: [{{ all_countries }}],
    	{% endif %}
    	{% if top_countries %}
    		preferredCountries: [{{ top_countries }}],
    	{% endif %}
	  utilsScript: "catalog/view/javascript/xtensions/countrycode/js/utils.js" // just for formatting/placeholders etc
});
</script>
{% if only_top_countries %}
<style type="text/css">
.intl-tel-input .country-list {
  min-width: 400px;
}
.intl-tel-input .country-list .divider {
    display: none;
}
.intl-tel-input .country-list .country.standard {
    display: none;
}
.iti-mobile .intl-tel-input.iti-container {
    display: contents;
}
.iti-mobile .intl-tel-input .country-list {
    max-height: initial;
    width: 100%;
}
</style>
{% endif %}
{% endif %}
<script type="text/javascript">
$(document).on("click", "#button-register", function(event) {
    if(hasCountryCode){            		    		  
	  $("#form_register #input_country_code").val(xiti.getSelectedCountryData().dialCode);
    }
   $.ajax({
      url: 'index.php?route=extension/module/xtensions/account/cleanregister/validate',
      type: 'post',
      data: $('#form_register').serialize(),
      dataType: 'json',
      beforeSend: function() {
  	  $('#button-login').addClass('progress-bar-striped active');      
      $('.warning, .error, .alert, .alert-warning, .alert-danger,.alert-dismissible').remove();
      showLoader();
      },
      complete: function() {
      	$('#button-register').removeClass('progress-bar-striped active');      		      	
      },
      success: function(json) {
        $('.warning, .error, .alert, .alert-warning, .alert-danger,.alert-dismissible, .xerror, .text-danger').remove();
		$('.has-error').removeClass('has-error');					
		if(json['journal_redirect']){
			if (parent.$('html').hasClass('route-account-logout')) {
				parent.window.location = $('base').attr('href');
			} else if(!json['customer']) {
				parent.window.location = json['journal_redirect'];
			} else {
				parent.window.location.reload();
			}						
      	} else if (json['redirect']) {
              location = json['redirect'];
        } else if (json['error']) {
          	for (i in json['error']) {     
          		if ($('#form_register #input-'+i).parent().hasClass('input-group')) {
          			$('#form_register #input-'+i).parent().parent().addClass('has-error');
  					$('#form_register #input-'+i).parent().after('<span class="xerror">' + json['error'][i] + '</span>');
				} else if ($('#form_register #input-'+i).parent().hasClass('isradio') || $('#form_register #input-'+i).parent().hasClass('ischeckbox') || $('#form_register #input-'+i).parent().hasClass('isfile')){       						
                   	$('#form_register #input-'+i).after('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error'][i] + '</div>');                                
  				}else {
					$('#form_register #input-'+i).parent().addClass('has-error');
	  				$('#form_register #input-'+i).after('<span class="xerror">' + json['error'][i] + '</span>');
				}       					
			  }    
              if (json['error']['captcha']) {
              	$('#captcha input[name=\'captcha\']').parent().addClass('has-error');
                $('#captcha input[name=\'captcha\']').parent().after('<span class="xerror">' + json['error']['captcha'] + '</span>');
              }                        
              if (json['error']['warningagree']) {                        	
              	$('#form_register #xagreep').addClass('has-error');
              	$('#form_register #xagreep').prepend('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['warningagree'] + '</div>');                            
              }                                               
              if (json['error']['warning']) {
                  $('#form_register .is_first').before('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['warning'] + '</div>');
              }
              $('.warning').fadeIn('slow');
         } else if (json['otp']) {
        	 $('#xlogin-otp').remove();
			 $('#loginPage').hide();
			 $('#xlogin').append('<div id="xlogin-otp" class="login-panel-bg">'+json['otp']+'</div>');
         }
		hideLoader();      
      },
      error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          hideLoader();
      }
  });
});  
$(document).on("click", "#button-social-register", function(event) {
	if(hasCountryCode){
		$("#sociallogin #input_country_code").val(xsiti.getSelectedCountryData().dialCode);
   }
   $.ajax({
      url: 'index.php?route=extension/module/xtensions/account/xsocial/validate{% if journal3_popup %}&from_popup=1{% endif %}',
      type: 'post',
      data: $("#sociallogin").serialize(),
      dataType: 'json',
      beforeSend: function() {
  	$('#button-social-register').addClass('progress-bar-striped active');
          showLoader();
          $('.warning, .error, .alert-warning, .alert-danger').remove();
      },
      complete: function() {
      	$('#button-social-register').removeClass('progress-bar-striped active');      	
      },
      success: function(json) {
          	$('.warning, .error, .alert-warning, .alert-danger, .xerror, .text-danger').remove();
			$('.has-error').removeClass('has-error');					
			if(json['journal_redirect']){
				if (parent.$('html').hasClass('route-account-logout')) {
					parent.window.location = $('base').attr('href');
				} else if(!json['customer']) {
					parent.window.location = json['journal_redirect'];
				} else {
					parent.window.location.reload();
				}						
	      	} else if (json['redirect']) {
              location = json['redirect'];
          	} else if (json['error']) {
          		for (i in json['error']) {     
          			if ($('#socialloginField #input-'+i).parent().hasClass('input-group')) {
          				$('#socialloginField #input-'+i).parent().parent().addClass('has-error');
  						$('#socialloginField #input-'+i).parent().after('<span class="xerror">' + json['error'][i] + '</span>');
					} else if ($('#socialloginField #input-'+i).parent().hasClass('isradio') || $('#step_login_panel #input-'+i).parent().hasClass('ischeckbox') || $('#step_login_panel #input-'+i).parent().hasClass('isfile')){       						
                      	$('#socialloginField #input-'+i).after('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error'][i] + '</div>');                                
  					}else {
						$('#socialloginField #input-'+i).parent().addClass('has-error');
  						$('#socialloginField #input-'+i).after('<span class="xerror">' + json['error'][i] + '</span>');
					}
				}                     
              	if (json['error']['warningagree']) {                        	
              		$('#socialloginField #agreesocialouter').addClass('has-error');
              		$('#socialloginField #agreesocialouter').prepend('<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['warningagree'] + '</div>');                            
              	}
            } else if (json['otp']) {
            	$('#xlogin-otp').remove();
    			$('#xlogin2').hide();
    			$('#xlogin').append('<div id="xlogin-otp" class="login-panel-bg">'+json['otp']+'</div>');
            } 
			hideLoader();
      },
      error: function(xhr, ajaxOptions, thrownError) {
          alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
          hideLoader();
      }
  });
});
$(document).on("submit", "#sociallogin, #form_login, #form_register, #otpregisterconfirm, #otpregisteremailconfirm, #smspro_form_change_mobile", function(event) {
	event.preventDefault();
});
$(document).delegate('.agree', 'click', function(e) {
	e.preventDefault();
	$('#modal-agree').remove();
	var element = this;
	$.ajax({
		url: $(element).attr('href'),
		type: 'get',
		dataType: 'html',
		beforeSend: function() {
			$(element).append(' <i class="fa fa-circle-o-notch fa-spin"></i>');
		},
		success: function(data) {
			html  = '<div id="modal-agree" class="modal xmargin" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">';
			html += '  <div class="modal-dialog">';
			html += '    <div class="modal-content">';
			html += '      <div class="modal-header">';
			html += '        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>';
			html += '        <h4 class="modal-title">' + $(element).text() + '</h4>';
			html += '      </div>';
			html += '      <div class="modal-body">' + data + '</div>';
			html += '    </div';
			html += '  </div>';
			html += '</div>';
			$('body').append(html);
			$('#modal-agree').modal('show');
			$('.fa-spin').remove();
		}
	});
});
$(document).on("click", "#smspro_change_mobile_btn", function(event) {
    $.ajax({
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/change',       
       type: 'post',
       data: $("#smspro_form_change_mobile").serialize(),
       dataType: 'json',
   	   beforeSend: function() {
  			 $('#block_smspro_mobile_edit .xerror, #block_smspro_mobile_edit .coupon').remove();
  			 $('#smspro_change_mobile_btn').attr('disabled', true);
  			 changetext = $('#smspro_change_mobile_btn').html();
  			 $('#smspro_change_mobile_btn').html('<i class="cvcapply fa fa-circle-o-notch fa-spin"></i>');
  			 showBar();
  		},
  		success: function(json) {
  			 if (json['error']) {
           		 $('#block_smspro_mobile_edit input[name=\'telephone\']').parent().after('<div class="couponapplied cvcapplied coupon alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['telephone'] + '</div>');
  			} else if (json['otp']) {
  				$('#xlogin-otp').remove();
 				$('#loginPage').hide();
 				$('#xlogin').append('<div id="xlogin-otp" class="login-panel-bg">'+json['otp']+'</div>');                      
            }
  			$('#smspro_change_mobile_btn').attr('disabled', false);
			$('#smspro_change_mobile_btn').html(changetext); 
  			hideBar();
  			 
  		},
       error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
function resend(choice,xsmspro_page){   
   $.ajax({
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/resend&choice='+choice+'&xsmspro_page='+xsmspro_page,
       type: 'post',
       data: {telephone:$('#input-otp-telephone-disabled').val()},
       dataType: 'json',
   	   beforeSend: function() {
  			 $('#block_smspro_mobile_edit .xerror, #block_smspro_mobile_edit .coupon').remove();
  			 $('#smspro_change_mobile_btn,#smspro_change_email_btn').attr('disabled', true);
  			 $('#smspro_change_email_btn').attr('disabled', true);
  			 $('#smspro_resendbtn_'+choice).attr('disabled', true);
  			 $('#smspro_resendbtn_'+choice).parent().addClass('disabled').attr('disabled', true);	   			 
  			 $('#smspro_resendbtn_'+choice).html('<i class="cvcapply fa fa-circle-o-notch fa-spin"></i>');
  			 showBar();
  		},
  		success: function(json) {  		
  			$('#smspro_change_mobile_btn').attr('disabled', false);	
  			$('#smspro_change_email_btn').attr('disabled', false);
  			$('#smspro_resendbtn_'+choice).attr('disabled', false);	
  			$('#smspro_resendbtn_'+choice).parent().removeClass('disabled').attr('disabled', false);
  			if (json['error']) {
           		 $('#block_smspro_mobile_edit input[name=\'telephone\']').parent().after('<div class="couponapplied cvcapplied coupon alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['telephone'] + '</div>');
  			} else if (json['otp']) {
  				$('#xlogin-otp').remove();
				$('#loginPage').hide();
				$('#xlogin').append('<div id="xlogin-otp" class="login-panel-bg">'+json['otp']+'</div>');              
            }
  			hideBar();  			 
  		},
       error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });}
$(document).on("click", "#button-otp-register", function(event) {
    $.ajax({       
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/validate',
       type: 'post',
       data: $("#otpregisterconfirm").serialize(),
       dataType: 'json',
       beforeSend: function() {
   	   $('#button-otp-register').addClass('progress-bar-striped active');
           showLoader();
           $('.warning, .error, .alert-warning, .alert-danger').remove();
       },
       complete: function() {
       		$('#button-otp-register').removeClass('progress-bar-striped active');      	
       },
       success: function(json) {
           	$('.warning, .error, .alert-warning, .alert-danger, .xerror, .text-danger').remove();
			$('.has-error').removeClass('has-error');					
			if(json['journal_redirect']){
				if (parent.$('html').hasClass('route-account-logout')) {
					parent.window.location = $('base').attr('href');
				} else {
					parent.window.location.reload();
				}						
	      	} else if (json['redirect']) {
				if(json['success']){
					$('#button-otp-register').parent().before('<div class="couponapplied cvcapplied coupon alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['success'] + '</div>');
				}
                location = json['redirect'];
            } else if (json['error']) {
            	$('#input-otp-number').parent().after('<div class="couponapplied cvcapplied coupon alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['otp'] + '</div>');
			}
			hideLoader();
       },
       error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
$(document).on("click", "#button-otp-register-email", function(event) {
    $.ajax({       
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/validateEmail',
       type: 'post',
       data: $("#otpregisteremailconfirm").serialize(),
       dataType: 'json',
       beforeSend: function() {
   	   $('#button-otp-register-email').addClass('progress-bar-striped active');
           showLoader();
           $('.warning, .error, .alert-warning, .alert-danger').remove();
       },
       complete: function() {
       		$('#button-otp-register-email').removeClass('progress-bar-striped active');      	
       },
       success: function(json) {
           	$('.warning, .error, .alert-warning, .alert-danger, .xerror, .text-danger').remove();
			$('.has-error').removeClass('has-error');
			if(json['journal_redirect']){
				if (parent.$('html').hasClass('route-account-logout')) {
					parent.window.location = $('base').attr('href');
				} else {
					parent.window.location.reload();
				}						
	      	} else if (json['redirect']) {
				if(json['success']){
					$('#button-otp-register-email').parent().before('<div class="couponapplied cvcapplied coupon alert alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['success'] + '</div>');
				}
                location = json['redirect'];
            } else if (json['error']) {
            	$('#input-otp-email').parent().after('<div class="couponapplied cvcapplied coupon alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + json['error']['otp'] + '</div>');
			} else if (json['otp']) {
            	$('#xlogin-otp').remove();
    			$('#xlogin2').hide();
    			$('#xlogin').append('<div id="xlogin-otp" class="login-panel-bg">'+json['otp']+'</div>');                    
            }
			hideLoader();
       },
       error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
function showLoader(){
	$('#myLoader').css({
    	height: $('#myLoader').parent().height(), 
    	width: $('#myLoader').parent().width()
	});
	$('#myLoader').show();
	showBar();	
};
function hideLoader(){
	$('#myLoader').hide();
	hideBar();	
};
function showBar(){
	NProgress.start();
	NProgress.set(0.6); 
};
function hideBar(){
	NProgress.inc();
	NProgress.done();	
};
</script>
{{ xfooter }}