@extends('client.layouts.app')

@section("content")
    <div class="wrapper">
      <div class="content-header">
        <div class="container"id="list">
          <div class="pt-4">
            <h2 class="title before:bg-[url('../images/icon03.png')]">報名活動</h2>
          </div>
        </div>
      </div>
      <div class="content-inner">
        <div class="container">
          <div class="form-groups">
                <div class="form-group">
                  <label>姓名</label>
                  <div>
                    <input class="form-style" type="text" placeholder="請輸入姓名" id="name">
                  </div>
                </div>
                <div class="form-group">
                  <label>行動電話</label>
                  <div>
                    <input class="form-style" type="text" placeholder="請輸入手機號碼" id="phone">
                  </div>
                </div>
                <div class="form-group">
                  <label>信箱</label>
                  <div>
                    <input class="form-style" type="email" placeholder="請輸入電子郵件" id="email">
                  </div>
                </div>
                <div class="form-group">
                  <label>車牌</label>
                  <div>
                    <input class="form-style" type="text" placeholder="請輸入您的 Honda 車牌" id="number"  style="text-transform: uppercase;" >
                  </div>
                </div>
                <div class="form-group">
                  <label>機型</label>
                  <div class="select-group">
                    <select class="form-style" id="model">
                      <option value="">請選擇機型</option>
                      <option value="B750 Hornet">CB750 Hornet</option>
                      <option value="CB1000R">CB1000R+</option>
                      <option value="GOLDWING TOUR DCT">GOLDWING TOUR DCT</option>
                      <option value="GOLDWING TOUR AIRBAG DCT">GOLDWING TOUR AIRBAG DCT</option>
                      <option value="NT1100">NT1100</option>
                      <option value="NC750X">NC750X</option>
                      <option value="X-ADV">X-ADV</option>
                      <option value="CRF300L">CRF300L</option>
                      <option value="CRF300 RALLY">CRF300 RALLY</option>
                      <option value="Rebel 1100">Rebel 1100</option>
                      <option value="Rebel 1100 DCT">Rebel 1100 DCT</option>
                      <option value=">Rebel 1100T">Rebel 1100T</option>
                      <option value="CB1000R">CB1000R</option>
                      <option value="Rebel 1100T DCT">Rebel 1100T DCT</option>
                      <option value="Rebel500">Rebel500</option>
                      <option value="Rebel500S">Rebel500S</option>
                      <option value="FORZA750">FORZA750</option>
                      <option value="ADV350">ADV350</option>
                      <option value="ADV350 RoadSync">ADV350 RoadSync</option>
                      <option value="FORZA350">FORZA350</option>
                      <option value="Super Cub C125">Super Cub C125</option>
                      <option value="CB650R">CB650R</option>
                      <option value="MSX GROM">MSX GROM</option>
                      <option value="CL STREET">CL STREET</option>
                      <option value="CB300R">CB300R</option>
                      <option value="Monkey">Monkey</option>
                      <option value="CBR650R">CBR650R</option>
                      <option value="CBR500R">CBR500R</option>
                      <option value="AFRICA TWIN ADVENTURE SPORTS">AFRICA TWIN ADVENTURE SPORTS</option>
                      <option value="AFRICA TWIN">AFRICA TWIN</option>
                      <option value="GOLDWING">GOLDWING</option>
                      <option value="GOLDWING TOUR">GOLDWING TOUR</option>
                      <option value="其他">其他</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <label>經銷據點</label>
                  <div class="select-group">
                    <select class="form-style" id="city">
                      <option value="">請選擇經銷據點</option>
                      <option value="taipei">台北</option>
                      <option value="sanchong">三重</option>
                      <option value="zhonghe">中和</option>
                      <option value="taoyuan">桃園</option>
                      <option value="hsinchu">新竹</option>
                      <option value="taichung">台中</option>
                      <option value="yuanlin">員林</option>
                      <option value="tainan">台南</option>
                      <option value="kaohsiung">高雄</option>
                    </select>
                  </div>
                </div>
                <div class="form-group">
                  <div>
                    <label class="!grid gap-2 grid-cols-[1.45em_1fr]"><span>
                        <input class="aspect-square w-full shadow-md mt-1" type="checkbox" id="agree"></span><span>我已詳細閱讀並同意<a href="https://moto.honda-taiwan.com.tw/Default/privacy"target="_blank"><u> Honda 會員條款與隱私權說明</u></a></span></label>
                  </div>
                </div>
            <div class="text-center py-4">
              <button class="btn btn-red" type="submit" onclick="submit();">確認送出</button>
            </div>
          </div>
        </div>
      </div>
    </div>
@endsection

@section("script")
<script type="text/javascript">
    @include("partials.message")

function validateEmail(email) {
  var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
}
function submit(){
    var agree = document.getElementById("agree");
    var email = $("#email").val();

    if(agree.checked != true){
        if (navigator.appName == 'Microsoft Internet Explorer' ||  !!(navigator.userAgent.match(/Trident/) || navigator.userAgent.match(/rv:11/)) || (typeof $.browser !== "undefined" && $.browser.msie == 1)) // If Internet Explorer, return version number
        {
            alert('請勾選我已詳細閱讀並同意 Honda 會員條款與隱私權說明。');
            return false;
        }else{

            swal({
                title: "請勾選我已詳細閱讀並同意 Honda 會員條款與隱私權說明。",
            });
            return false;
        }
        return false;
    }
    if (validateEmail(email)) {
    }else{
        swal({
            title: "錯誤",
            text:'Email格式錯誤',
            type:'warning'
        });
        return false;

    }


    var model = document.getElementById("model");
    var model = model.options[model.selectedIndex].value;
    if(model== ''){
        swal({
            title: "錯誤",
            text:'請選擇機型',
            type:'warning'
        });
        return false;
    }
    var city = document.getElementById("city");
    var city = city.options[city.selectedIndex].value;
    if(city== ''){
        swal({
            title: "錯誤",
            text:'請選擇經銷據點',
            type:'warning'
        });
        return false;
    }

    if($('input[id=name]').val() == ''){
        swal({
            title: "錯誤",
            text:'請填寫姓名',
            type:'warning'
        });
        return false;
    }

    if($('input[id=phone]').val().length < 8 || $('input[id=phone]').val().length > 10){
        swal({
            title: "錯誤",
            text:'行動電話錯誤',
            type:'warning'
        });
        return false;
    }
    var phone_re = /[0-9]/;
    if(phone_re.test($('input[id=phone]').val()) != true){
        swal({
            title: "WARNING",
            text: '行動電話不為數字',
            type: "warning"
        });
        return false;
    }

    if($('input[id=email]').val() == ''){
        swal({
            title: "錯誤",
            text:'請填寫Email',
            type:'warning'
        });
        return false;
    }

    if($('input[id=number]').val() == ''){
        swal({
            title: "錯誤",
            text:'請填寫車牌',
            type:'warning'
        });
        return false;
    }





    $.ajax({
        url: "/registerSubmit",
        type: "POST",
        data: {
            _method: "POST",
            _token: $('#token').val(),
            name: $('#name').val(),
            phone: $('#phone').val(),
            email: $('#email').val(),
            number: $('#number').val(),
            model: model,
            city: city,
        },
        dataType: "json",
    }).done(function(r){
        if( r.status==0 ) {
          swal({
              title: "註冊成功",
              type:'success'
          }).then(function(){
              location.href = "/login";
          });
        }else{
          swal({
            title: "錯誤",
            text:'車牌已註冊',
            type:'warning'
          });
          return false;
        }
    });
}
</script>
@stop