<%inherit file="login.phtml"/>
<%block name="content">
<div class="card">
  <div class="card-header bg-primary">
    ${_('Signup')}
  </div>
  <div class="card-body">
    <form method="POST" action="${url_for('admin_app.signup_insert_admin')}" id="login_form" class="needs-validation" novalidate>
      <div class="mb-3">
        <label for="username_form" class="form-label">${_('Username')}*</label>
        <input type="text" class="form-control form-control-lg has-validation" id="username_form" name="password" aria-describedby="username" autocomplete="off" minlength="4" pattern="\w{4,32}" required>
        <div class="invalid-feedback">
            ${_('You need a valid username')}
        </div>
      </div>
      <div class="mb-3">
        <label for="email_form" class="form-label">${_('Email')}*</label>
        <input type="email" class="form-control form-control-lg has-validation" id="email_form" name="email" autocomplete="off" minlength="4" required>
        <div class="invalid-feedback">
            ${_('You need an email')}
        </div>
      </div>
      <div class="mb-3">
        <label for="password_form" class="form-label">Password*</label>
        <input type="password" class="form-control form-control-lg has-validation" id="password_form" name="password" autocomplete="off" minlength="2" required>
        <div class="invalid-feedback">
            ${_('You need a password')}
        </div>
      </div>
      <div class="mb-3">
        <label for="repeat_password_form" class="form-label">${_('Repeat password')}*</label>
        <input type="password" class="form-control form-control-lg has-validation" id="repeat_password_form" name="repeat_password" autocomplete="off" minlength="2" required>
        <div class="invalid-feedback">
            ${_('You need the same password in this field and not empty')}
        </div>
      </div>
      <button type="submit" id="login_submit" class="btn btn-primary">${_('Create user')}</button>
      ${csrf_token()|n}
    </form>
  </div>
</%block>
<%block name="jscript">
<script>
$(document).ready( function () {

        $('#repeat_password_form').on('input',function(e){
        
        if($('#repeat_password_form').val()!=$('#password_form').val()) {
            
            console.log('No match');
            
            $('#repeat_password_form').get(0).setCustomValidity("${_('Passwords doesn\'t match')}");
            
        }
        else {
            
            $('#repeat_password_form').get(0).setCustomValidity("");
        }
    
    });

  // Fetch all the forms we want to apply custom Bootstrap validation styles to
  var forms = document.querySelectorAll('.needs-validation');
  var error=false;

  // Loop over them and prevent submission
  Array.prototype.slice.call(forms)
    .forEach(function (form) {
      form.addEventListener('submit', function (event) {
          
            error=false;
        
            if (!form.checkValidity()) {
              
                error=true;
              
            }
            
            event.preventDefault();
            event.stopPropagation();
            
            form.classList.add('was-validated');
            
            var form_data=new FormData(form);
            
            if(!error) {
                
                console.log('send submit');
                
                $('#loader-div').show();
    
                $('#login_submit').prop('disabled', true);
                
                data_form={'username': $('#username_form').val(), 'email': $('#email_form').val(), 'password': $('#password_form').val(), 'repeat_password': $('#repeat_password_form').val(), 'csrf_token': $("#csrf_token").val()};
                
                $.ajax({
                    url: "${url_for('admin_app.signup_insert_admin')}",
                    method: "POST",
                    dataType: "json",
                    contentType : 'application/json',
                    data: JSON.stringify(data_form),
                    error: function (data) {
                    
                       console.log(JSON.stringify(data)); 
                       $('#loader-div').hide();
                       $('#login_submit').prop('disabled', false);
                       
                       alert('${_("Error: please, try again later")}');
                    
                    }, 
                    }).done(function(data) {
                    
                        if(data.error==0)
                        {
                            
                            //location.reload()
                            location.href="${url_for('admin_app.login_admin')}";
                        
                        }
                        else
                        {
                         
                            $('#login_submit').prop('disabled', false);
                            
                            $('#loader-div').hide();
                            
                        }
                    
                    });
                        
                    }
            
        
        }
    )
    
    });
        
    /*$('#login_form').submit( function () {
        
        $('#loader-div').show();
    
        $('#login_submit').prop('disabled', true);
        
        data_form={'username': $('#username_form').val(), 'email': $('#email_form').val(), 'password': $('#password_form').val(), 'repeat_password': $('#repeat_password_form').val(), 'csrf_token': $("#csrf_token").val()};
        
        $.ajax({
            url: "${url_for('admin_app.signup_insert_admin')}",
            method: "POST",
            dataType: "json",
            contentType : 'application/json',
            data: JSON.stringify(data_form),
            error: function (data) {
            
               console.log(JSON.stringify(data)); 
               $('#loader-div').hide();
               $('#login_submit').prop('disabled', false);
            
            }, 
            }).done(function(data) {
            
                if(data.error==0)
                {
                    
                    //location.reload()
                    location.href="${url_for('admin_app.home_admin')}";
                
                }
                else
                {
                 
                    $('#login_submit').prop('disabled', false);
                    
                    $('#loader-div').hide();
                    
                }
            
            });
        
        return false;
        
    });*/

});
</script>
</%block>
