{{ xheader }}
{% if journal3_popup %}
<style type="text/css">
#accountTabs,footer,.separator,.separator+.text-center,.footer-separator,.navbar{
	display: none;
}
body{
    margin-bottom: 20px;
}
.profile-card {
	margin: 0;
}
.xaccountlogo{
	max-width: 150px;
}
</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">
<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 active">
	<a data-target="#panel-login" data-toggle="tab" account="login">{{ text_login }}</a>
</li>
<li class="register-step">
	<a href="{{ register }}" account="register">{{ text_register }}</a>
</li>
</ul>
</div>
{{ xsocial|trim }}
<div class="tab-content">
<div class="tab-pane active" id="panel-login"> 
            <div class="row">
              <div class="col-md-12">
              <form role="form" id="form_login" action="#" autocomplete="off" method="post" novalidate enctype="multipart/form-data">
              {% if redirect %}
              <input type="hidden" name="redirect" value="{{ redirect }}" />
              {% endif %}              
               <div id="xlogin-panel">
               {% if not xsocial|trim %}
					<div class="section-heading">{{ text_login_heading }}</div>
				{% endif %}
				{% if reset_success %}
				<div class="alert alert-success">{{ reset_success }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
				{% endif %}
               {% if error_warning %}
					<div class="alert alert-warning">{{ error_warning }}<button type="button" class="close" data-dismiss="alert">&times;</button></div>
				{% endif %}
               <div class="group is_first">                    
                    <input type="text" name="email" class="inputMaterial">
                    <label for="email">{{ entry_email }}</label>
                  </div>                 
                    <div class="group password-group">
                      <input type="password" name="password" id="input-password" class="inputMaterial">
                      <button type="button" class="toggle-password" aria-label="Show password" aria-pressed="false">
                        <i class="fa fa-eye" aria-hidden="true"></i>
                      </button>
                      <label for="input-password">{{ entry_password }}</label>
                    </div>
                    {% if journal3_popup %}
                    <div class="group">  
                    	<input type="hidden" name="from_j3_popup" value="1" />
                    	<a href="{{ forgotten }}" class="xclosethepopup">{{ text_forgotten }}</a>
                    </div>
                    {% endif %}                                                  
                    <div class="buttons">
         				<input type="submit" value="{{ button_continue }}" account="login" id="button-login" data-loading-text="Loading..." class="btn btn-success width100" />
       				</div>
       				</div>     				       
       				</form>
       				{{ smslogin|trim }}                    
              </div>
            </div>  
             <div class="footer-separator"><span class="pull-left"> <a href="{{ forgotten }}">{{ text_forgotten }}</a> </span>
				<span class="pull-right"> <a class="pointer" href="{{ register }}">{{ text_account_new }}</a>
			</span>
			<div class="clearfix"></div>
			</div>  
			<div class="clearfix"></div>
</div>

</div>              
			             
</div>
</div>
      </div>
</div>
<style>
/* Show/Hide password toggle */
.group.password-group{position:relative;}
.group.password-group input.inputMaterial{padding-right:56px;}
.group.password-group .toggle-password{
  position:absolute;
  right:8px;
  top:50%;
  transform:translateY(-50%);
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;

  /* bigger + easier to tap/click */
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
}
.group.password-group .toggle-password i{
  font-size:24px;   /* <- eyeball size */
  line-height:1;
}
.group.password-group .toggle-password{opacity:.75; transition:opacity .15s ease;}
.group.password-group .toggle-password:hover,
.group.password-group .toggle-password:focus{opacity:1;}
.group.password-group .toggle-password:focus{outline:none;}

</style>

<script type="text/javascript" src="catalog/view/javascript/xtensions/stylesheet/bs/js/xcustom.js"></script>
<script type="text/javascript">
var hasCountryCode = false;
</script>
<script type="text/javascript">
/* Password visibility toggle */
$(document).on('click', '.toggle-password', function () {
  var $btn = $(this);
  var $input = $('#input-password');
  if (!$input.length) return;

  var isHidden = ($input.attr('type') === 'password');
  $input.attr('type', isHidden ? 'text' : 'password');

  $btn.attr('aria-pressed', isHidden ? 'true' : 'false');
  $btn.attr('aria-label', isHidden ? 'Hide password' : 'Show password');

  var $icon = $btn.find('i.fa');
  if ($icon.length) {
    $icon.toggleClass('fa-eye fa-eye-slash');
  }
});
</script>
{% if show_country_code %}
<script type="text/javascript">
var hasCountryCode = true;
</script>
{% endif %}
<script type="text/javascript">
$('.popup-login .popup-inner-body', window.parent.document).height('500px');
$(document).on("click", ".xclosethepopup", function(event) {
	event.preventDefault();
	parent.window.location = $('.xclosethepopup').attr('href');
});
$(document).on("click", "#button-login", function(event) {
   $.ajax({
      url: 'index.php?route=extension/module/xtensions/account/login/validate',
      type: 'post',
      data: $('#form_login').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-login').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 {
				parent.window.location.reload();
			}				
      	} else if (json['redirect']) {
              location = json['redirect'];
        }else if (json['error']) {                     
              if (json['error']['warning']) {
                  $('#xlogin-panel .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');
          }
		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,#otplogincheck, #otplogin, #otpregisterconfirm, #smspro_form_change_mobile", function(event) {	
	event.preventDefault();
});
var changetext = '';
var changelogintext = '';
$(document).on("click", "#smspro_login_check_mobile_btn", function(event) {
	if(hasSmsLoginCountryCode){
	  $("#otplogincheck #input_sms-login-country_code").val(xitiSMSLoginTelephhone.getSelectedCountryData().dialCode);
	}
    $.ajax({
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/checkLogin',       
       type: 'post',
       data: $("#otplogincheck").serialize(),
       dataType: 'json',
   	   beforeSend: function() {
   			 $('#otplogincheck .xerror, #otplogincheck .coupon').remove();
   			 changelogintext = $('#smspro_login_check_mobile_btn').html();
  			 $('#smspro_login_check_mobile_btn').html('<i class="cvcapply fa fa-circle-o-notch fa-spin"></i>');
  			 showBar();
  		},
  		success: function(json) {
  			if (json['error']) {
  				if(hasSmsLoginCountryCode){
           			$('#otplogincheck input[name=\'telephone\']').parent().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{
  					$('#otplogincheck 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']){
  				$('#loginotppanel').remove();	  					
	  	  		$('#form_login').after(json['otp']);
  	  		}
  			$('#smspro_login_check_mobile_btn').html(changelogintext);
  			hideBar();  			 
  		},
       error: function(xhr, ajaxOptions, thrownError) {
           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
       }
   });
});
$(document).on("click", "#button_otp_login", function(event) {
    $.ajax({
       url: 'index.php?route='+$('#xsmspro_module_path').val()+'/validateLogin',       
       type: 'post',
       data: $("#otplogin").serialize(),
       dataType: 'json',
   	   beforeSend: function() {
   			 $('#otplogin .xerror, #otplogin .coupon').remove();  			 
  			 showBar();
  		},
  		success: function(json) {
  			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['error']) {
           		$('#otplogin input[name=\'otp\']').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['redirect']){
				location = json['redirect'];
  	  		}
  			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').attr('disabled', true);  			   			 
	  			 $('#smspro_resendbtn_'+choice).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']) {
	  				if(choice == 'login'){
	  					$('#loginotppanel').remove();	  					
  	  	  				$('#form_login').after(json['otp']);
	  				}else{
	  					$('#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);			
	  			hideBar();  			 
	  		},
	       error: function(xhr, ajaxOptions, thrownError) {
	           alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
	       }
	   });
}
$(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);
       }
   });
});
$(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['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);
       }
   });
});
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();	
};
$(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();
		}
	});
});
</script>
{{ xfooter }}