@extends('layout.store')
@section('title','用户注册')
@section('myCss')
  <link rel="stylesheet" href="/1/css/register.css">
  <style>
    body{
      background: #fff;
    }
  </style>
@endsection

@section('content')
<div class="login_con">
  <div class="login_ti">
    <p class="strong">加入会员</p>
    <p>加入碳立方会员并享有会员资格</p>
  </div>
  <p class="login_required">必填</p>
  <div class="login_info">
    <form class="re_form" action="{{url('/doregister')}}" name="reg_testdate" method="post">
      <div class="login_info_form" style="margin-top:20px">
        <ul>
          <li>
            <p>姓名</p>
            <input type="text" name="name" value="" placeholder="姓名">
          </li>
          <li>
            <p>手机号码</p>
            <input type="text" name="phone" value="" placeholder="手机号码">
            <input type="button" class="sendcode" value="免费获取验证码">
          </li>
          <li>
            <p>短信验证码</p>
            <input type="text" class="smscode" name="smscode" value="" placeholder="请输入短信验证码">
            <i class="check_code fa fa-check hide"></i>
          </li>
          <li class="login_birth">
            <p>出生日期</p>
            <div class="bir_div">
              <select class="selone" name="YYYY" onChange="YYYYDD(this.value)">
                <option value="">请选择 年</option>
              </select>
              <select class="seltwo" name="MM" onChange="MMDD(this.value)">
                <option value="">请选择 月</option>
              </select>
              <select class="selthree" name="DD">
                <option value="">请选择 日</option>
              </select>
            </div>
          </li>
        </ul>
      </div>
      <div class="login_info_form">
        <ul>
        <li>
          <p>性别</p>
          <div class="sexbox">
            <label><input type="radio" class="sexradio" name="sex" value="1">男</label>
            <label><input type="radio" class="sexradio" name="sex" value="2">女</label>
          </div>
        </li>
          <li>
            <p>电子邮件</p>
            <input type="text" name="email" value="" placeholder="电子邮件">
          </li>
          <li>
            <p>密码</p>
            <input type="password" name="password" value="" placeholder="密码由6-15位数字、英文字母组成">
          </li>
          <li>
            <p>确认密码</p>
            <input type="password" name="repassword" value="" placeholder="请再次输入密码">
          </li>
        </ul>
        {{csrf_field()}}
      </div>
        <a class="re_sub">立即注册</a>
    </form>
  </div>
</div>
@if(session('success'))
  <script>
    swal('',"{{session('success')}}",'success')
    setTimeout("location.href='/login';", 1500);
  </script>
@endif

@if(session('error'))
<script>
swal('',"{{session('error')}}",'error')
</script>
@endif
@endsection
@section('myJs')
<style>

</style>
<script>
// 提交验证
$('.re_sub').click(function(){
  if ($('input[name="name"]').val() == ''){
    swal('','请填写您的姓名','warning')
  }else if($('input[name="phone"]').val() == ''){
    swal('','请填写您的手机号码','warning')
  }else if(!$('input[name="phone"]').val().match(/^[1][3,4,5,7,8][0-9]{9}$/)){
    swal('','请填写正确的手机号码','warning')
  }else if($('input[name="smscode"]').val() == ''){
    swal('','请填写短信验证码','warning')
  }else if(window.checkcode != true){
    swal('','短信验证码不正确','warning')
  }else if($('.selone').val() == '' || $('.seltwo').val() == '' || $('.selthree').val() == ''){
    swal('','请选择您的出生日期','warning')
  }else if(!$('input:radio[name="sex"]').is(':checked')){
    swal('','请选择您的性别','warning')
  }else if($('input[name="email"]').val() == ''){
    swal('','请填写您的邮箱','warning')
  }else if(!$('input[name="email"]').val().match(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/)){
    swal('','邮箱格式不正确','warning')
  }else if($('input[name="password"]').val() == ''){
    swal('','请填写密码','warning')
  }else if($('input[name="password"]').val() == ''){
    swal('','请填写密码','warning')
  }else if($('input[name="repassword"]').val() == ''){
    swal('','请填写确认密码','warning')
  }else if($('input[name="repassword"]').val() != $('input[name="password"]').val()){
    swal('','两次输入密码不一致','warning')
  }else{
    $('.re_form').submit()
  }
})

// 验证码弹框
$('.sendcode').click(function(){
  if($('input[name="name"]').val() == ''){
    swal('','请填写您的姓名','warning')
  }else if($('input[name="phone"]').val() == ''){
    swal('','请填写您的手机号码','warning')
  }else if(!$('input[name="phone"]').val().match(/^[1][3,4,5,7,8][0-9]{9}$/)){
    swal('','请填写正确的手机号码','warning')
  }else{
    var url = "{{url('/checkPhone')}}";
    var data ={
      'phone':$('input[name="phone"]').val(),
      '_token':'{{csrf_token()}}',
      };
    var success=function(response){
        if(response.error==1){
          swal('',response.errmsg,'error')
        }else{
          swal({
          html:'<p>为确保您的账号安全，请输入验证码</p><p class="code_error">&nbsp;</p><input class="swal2-input" type="vcode" name="vcode"  placeholder="请输入右侧验证码"><img class="vcode" src="{{url('/test')}}" style="cursor:pointer" onclick="this.src=this.src+\'?a=1\'"><a class="swal2-styled subcode" style="background:#8CD3FF;display:inline-block" onclick="code_sub(this)">确认</a>',
          showConfirmButton:false,
          })
        }
      }
    $.post(url,data,success,'json');

  }
})

//短信验证码倒计时
var countdown=60;
function settime() {
if (countdown == 0) {
  $('.sendcode').removeAttr("disabled");
  $('.sendcode').css("cursor","pointer");
  $('.sendcode').val('免费获取验证码');
  countdown = 60;
  return;
  } else {
  $('.sendcode').attr("disabled", true);
  $('.sendcode').css("cursor","not-allowed");
  $('.sendcode').val(countdown + '秒后可重发');
  countdown--;
  }
  setTimeout(function() {
  settime()
  },1000)
}

// 短信验证码即时验证
  $('.smscode').blur(function(){
    if(window.smscode && $(this).val() == window.smscode){
      $('.check_code').show();
      window.checkcode = true;
    }else{
      $('.check_code').hide();
      window.checkcode = false;
    }
  })

// 验证图形验证码
function code_sub(){
  if ($('.swal2-input').val() == '') {
    $('.code_error').html('验证码不能为空！')
  }else{
    $('.code_error').html('&nbsp;')
    var url = "{{url('/checkTest')}}";
    var data ={
      'vcode':$('.swal2-input').val(),
      '_token':'{{csrf_token()}}',
      'phone':$('input[name="phone"]').val(),
      };
    var success=function(response){
        if(response.error==1){
          $('.code_error').html(response.errmsg)
        }else if(response.error==3){
          swal('',response.errmsg,'error')
        }else{
          swal('',response.errmsg,'success')
          window.smscode = response.smscode
          settime();
        }
      }
    $.post(url,data,success,'json');
    }
  }

</script>
<!-- 日期选择三级联动 -->
<script language="JavaScript">
function YYYYMMDDstart(){
  MonHead = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];

  //先给年下拉框赋内容
  var y  = new Date().getFullYear();
  for (var i = (y); i > (y-58); i--) //以今年为准，前30年，后30年
       document.reg_testdate.YYYY.options.add(new Option(" "+ i +" 年", i));

  //赋月份的下拉框
  for (var i = 1; i < 13; i++)
       document.reg_testdate.MM.options.add(new Option(" " + i + " 月", i));
     // 赋值当前日期
  /*document.reg_testdate.YYYY.value = y;
  document.reg_testdate.MM.value = new Date().getMonth() + 1;
  var n = MonHead[new Date().getMonth()];
  if (new Date().getMonth() ==1 && IsPinYear(YYYYvalue)) n++;
    writeDay(n); //赋日期下拉框Author:meizz
  document.reg_testdate.DD.value = new Date().getDate();*/
}
if(document.attachEvent)
  window.attachEvent("onload", YYYYMMDDstart);
else
window.addEventListener('load', YYYYMMDDstart, false);
function YYYYDD(str) //年发生变化时日期发生变化(主要是判断闰平年)
{
  var MMvalue = document.reg_testdate.MM.options[document.reg_testdate.MM.selectedIndex].value;
  if (MMvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}
  var n = MonHead[MMvalue - 1];
  if (MMvalue ==2 && IsPinYear(str)) n++;
  writeDay(n)
}
function MMDD(str)   //月发生变化时日期联动
{
  var YYYYvalue = document.reg_testdate.YYYY.options[document.reg_testdate.YYYY.selectedIndex].value;
  if (YYYYvalue == ""){ var e = document.reg_testdate.DD; optionsClear(e); return;}
  var n = MonHead[str - 1];
  if (str ==2 && IsPinYear(YYYYvalue)) n++;
  writeDay(n)
}
function writeDay(n)   //据条件写日期的下拉框
{
  var e = document.reg_testdate.DD; optionsClear(e);
  for (var i=1; i<(n+1); i++)
  e.options.add(new Option(" "+ i + " 日", i));
}
function IsPinYear(year)//判断是否闰平年
{
  return(0 == year%4 && (year%100 !=0 || year%400 == 0));
}
function optionsClear(e)
{
  e.options.length = 1;
}
</script>
@endsection