{% load staticfiles %}
  <link rel="stylesheet" href="{% static 'css/modal.css' %}">
<div id="id02" class="modal" >

  <div class="phone-sign">
  <form class="modal-content animate" id="reg">
    <div class="imgcontainer">
      <button onclick="document.getElementById('id02').style.display='none';" class="close" type="reset" value="reset" title="Close Modal">&times;</span>
    </div>
    <div class="front-step">
    <div class="container">

      <div class="panel panel-primary">
        <div class="panel-body">


            <div class="form-group">
              <label class="control-label" for="signupPasswordagain">電話號碼註冊</label>
              <div class="row align-items-center h-40" >
                <div class="col-md-3">
                  <select class="custom-select" name="ccode" id="exampleSelect1">
                      <option value=852>+852</option>
                      <option value=853>+853</option>
                      <option value=86>+86</option>
                    </select>
                </div>
                  <div class="col-md-8" style="margin-left:-20px;">
                      <input id="signupPasswordagain" name="tel" type="text" maxlength="25" class="form-control" placeholder="輸入你的電話號碼" style="background:#fff;">
                  </div>
            </div>
            </div>
            <div class="form-group" style="margin-top:30px;">
                <label class="control-label" for="signupPasswordagain">驗證碼</label>
              <div class="row align-items-center h-40" >

                  <div class="col-md-3">
                      <input id="vericode" type="text" maxlength="3" name="verify" class="form-control" style="background:#fff;">
                  </div>
                  <div class="col-md-3">
                    <button class="btn btn-success">發送驗證碼</label>
                  </div>
            </div>

            </div>
            </div>
          </div>
          <div class="form-group">
            <button id="signupNextStep" type="button" class="btn btn-info btn-block process" style="margin-top:30px;" onclick="">下一步</button>
            <script>
          $('#vericode').on('input',function() {
            if($('#vericode').val().length==3)
            {
              $('.process').prop('disabled', false);
            }
            else {
                $('.process').prop('disabled', true);
            }
});

            $('.process').prop('disabled', true);

            </script>
          </div>
          <hr/>
          {% include 'blog/social-sign.html' %}
        </div>

</div>
    <div class="back-step" style="display:none;">
      <div class="container">

        <div class="panel panel-primary">
          <div class="panel-body">

            <div class="container">

                <!--checkpoint-->
                <div class="form-group">
                  <div class="form-group">
                    <h2 style="text-align:center;">請輸入密碼  </h2>
                  </div>
                <div class="form-group">
                  <label class="control-label" for="signupPassword">密碼</label>
                  <input id="signupPassword" type="password" name="pw" maxlength="25" class="form-control" placeholder="at least 6 characters" length="40">
                </div>


                <div class="form-group">
                  <label class="control-label" for="signupPasswordagain">確認密碼</label>
                  <input id="signupPasswordagain" type="password" name='confirmpw' maxlength="25" class="form-control">
                </div>
                <div class="form-group">
                  <button id="signupSubmit" type="button" class="btn btn-danger btn-block process" style="margin-top:30px;" onclick="me()">登記</button>
                  <script>


                  </script>
                </div>
              </div>
            </div>

              </div>
            </div>

            <script>

          function me(){
            console.log($('#reg').serialize());
          }
            //success verification
              $('#signupNextStep').click(function(){
                $('.front-step').css('display','none');
                $('.back-step').css('display','block');
              });
            </script>

          </div>
    </div>


  </form>
  </div>




  <div class="email-sign" style="display:none;">
  <form class="modal-content animate" @submit="checkSForm" id="emailreg">
      {%csrf_token%}
    <div class="imgcontainer">
      <span onclick="document.getElementById('id02').style.display='none'" class="close" title="Close Modal">&times;</span>
    </div>
    <div class="container">
		<div class="row">
			<div class="panel panel-primary">
				<div class="panel-body">
          <div class="container">
            <div class="form-group">

              <span v-html="messagc"></span>

            </div>
            {%for non_field_error in sform.non_field.errors%}
              <p class="help is-danger">{{non_field_error}}</p>
            {% endfor %}
            {% for field in sform %}
             <div class="form-group">
                <label for="{{field.id_for_label}}" class="label">{{field.label}}</label>
                <div @keyup.enter="Login" class="fieldx">{{field}}</div>
                <style>.fieldx input {width: 100%;}</style>
                {% if field.help_text%}
                  <p class="help">{{field.help_text}}</p>
                {% endif %}
                {% for error in field.errors %}
                  <p class="is-danger">{{error}}</p>
                {% endfor %}
              </div>
              {%endfor%}


             <hr/>
             <p></p>
                 <div class="custom-control custom-checkbox mr-sm-2">
         <input type="checkbox" class="custom-control-input" id="customControlAutosizing" required>
         <label class="custom-control-label" for="customControlAutosizing"><p class="form-group">By creating an account, you agree to our <a href="#">Terms of Use</a> and our <a href="#">Privacy Policy</a>.</p></label>
       </div>
       <div class="form-group">
   <button id="signupSubmit" type="submit" class="btn btn-success btn-block">立即注冊!</button>
 </div>

          </div>

				</div>
			</div>
		</div>
	</div>
  </form>
</div>
</div>


<!--
  Below we include the Login Button social plugin. This button uses
  the JavaScript SDK to present a graphical Login button that triggers
  the FB.login() function when clicked.
-->


<script >


var app2 = new Vue({

  el: '#emailreg',
  data: {
    messagc: '',
    username:null,
    password:null

  },
  methods:{
    checkSForm:function(e) {
            let self=this;
      this.errors = [];
if(e) e.preventDefault();

      $.ajax({
            url: '/signup/', //this is the submit URL
            type: 'POST', //or POST
            data: $('#emailreg').serialize(),
            success: function(data){
              alert(data);
              location.reload();
            },
            error:  function(data){
                 alert(JSON.stringify(data));
            }
        });
        }
  },
  delimiters: ['${', '}']
});

</script>

<script>
function changemail(){
  $('.phone-sign').css('display','none');
  $('.email-sign').css('display','block');
}
// Get the modal
var modalx = document.getElementById('id01');
var modaly =document.getElementById('id02');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modalx ) {

        modalx.style.display = "none";
    }
    else if (event.target == modaly){
        modaly.style.display = "none";
    }
}
</script>