@extends('layouts.master')
@section('title', config('app.name') . ' : Register')
@section('description', 'Daftar ' . config('app.name') . ' disini dapatkan akun pro bersama kami menjamin kemenangan 100% dengan situs server thailand yang gacor saat ini.')
@section('content')
<div class="main-content register">
    <div class="container">
      <div class="register__container">
        <div class="page-header">Formulir Pendaftaran</div>
        <div class="register-desc">Member diharapkan untuk mengisi Nomor telepon dan Email yang aktif supaya kami bisa memberikan informasi terkini dan promo menarik serta untuk memudahkan perubahan password.</div>
        <form id="register-form" method="POST" action="{{ route('register.store') }}" data-parsley-validate="" novalidate="novalidate">
          @csrf
          <div class="register-form">
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="username_register">Nama Pengguna</label>
                </div>
                <div class="col-lg-7">
                  <input class="custom-textfield form-control" type="text" value="{{ old('username') }}" name="username" id="username_register" minlength="6" maxlength="15" placeholder="Nama Pengguna" data-parsley-trigger="keyup" style="text-transform: lowercase" autocomplete="off" autofocus="">
                  <span id="username_register-error" style="display: none;">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                  </span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="phone">Nomor Ponsel</label>
                </div>
                <div class="col-lg-7">
                  <div class="input-group">
                    <div class="input-group-prepend">
                      <span class="input-group-text">+62</span>
                    </div>
                    <input class="custom-textfield form-control" value="{{ old('phone') }}" type="text" name="phone" id="phone" minlength="8" maxlength="13" placeholder="Nomor Ponsel" data-parsley-type="number" data-parsley-trigger="keyup" autocomplete="off">
                  </div>
                  <span id="phone-error"></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="password">Kata Sandi</label>
                </div>
                <div class="col-lg-7">
                  <input class="custom-textfield form-control" type="password" name="password" id="password_register" minlength="8" maxlength="25" placeholder="Kata Sandi" data-parsley-trigger="keyup" autocomplete="off">
                  <span id="password_register-error"></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="password_confirmation">Konfirmasi Kata Sandi</label>
                </div>
                <div class="col-lg-7">
                  <input class="custom-textfield form-control" type="password" name="password_confirmation" id="password_confirmation" minlength="8" maxlength="25" placeholder="Konfirmasi Kata Sandi" data-parsley-equalto="#password" data-parsley-trigger="keyup" autocomplete="off">
                  <span id="password_confirmation-error"></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="referral">Referral</label>
                </div>
                <div class="col-lg-7">
                    <input class="custom-textfield form-control" type="text" name="referral" id="referral" minlength="4" maxlength="25"
                    placeholder="Kode Referral (Boleh di kosongkan)"
                    value="{{ $referral ?? old('referral') }}"
                    @if($referral) readonly @endif
                    autocomplete="off">
                  <span id="referral-error"></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <div class="row">
                <div class="col-lg-3 d-flex align-items-center justify-content-start">
                  <label for="captcha">Captcha</label>
                </div>
                <div class="col-lg-7">
                  <div class="cap-img">
                    <div class="cap-content">
                      @csrf
                      <img loading="lazy" id="captcha" src="{{ route('captcha') }}?{{ time() }}" alt="captcha-img">
                      <a id="refreshCaptchaRegister" class="btn btn-sm btn-info mr-4">
                        <i class="fas fa-sync-alt"></i>
                      </a>
                    </div>
                    <input class="custom-textfield form-control input-code" type="text" name="captcha" id="captcha" placeholder="Captcha" maxlength="4" data-parsley-type="number" data-parsley-trigger="keyup">
                  </div>
                  <span id="captcha-error"></span>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label for="term" class="register-terms">
                <input type="checkbox" name="term" id="term">
                <span>Saya telah berusia lebih dari 18 tahun, telah membaca, dan menerima <a href="/help">syarat dan ketentuan</a> yang dipasang di situs ini, peraturan pribadi, dan aturan taruhan. </span>
              </label>
              <span id="term-error"></span>
            </div>
            <button id="registerButton" class="daftar btn-custom button-submit" type="submit"> Buat Akun </button>
          </div>
        </form>
      </div>
    </div>
    <div class="game__seo">
      <div hidden="" id="title-seo">{{ getSetting('site_name') }}: Register</div>
      <div class="seo-content showFooter">
        <div class="register__container mt-5 page-form">
          <h1>Register</h1>
          <p>Register</p>
        </div>
      </div>
    </div>
  </div>
@endsection
@push('scriptscustom')
@if(session('apierror'))
    <script>
        Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: "{{ session('apierror') }}",
        });
    </script>
@endif
<script>
    var timer;
    $('#username_register').on('focusout', function () {
		$("#username_register-error").html(`<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>`);
		let username = $('#username_register').val()
		if (username.length > 6) {
			clearTimeout(timer);
			timer = setTimeout(userCheck, 2000);
        } else {
			$("#username_register-error").hide()
		}
    });

    function userCheck() {
        let username = $('#username_register').val()
		if (username.length < 6 ) {
			$("#username_register-error").hide();
			return false;
		}
        let url = "{{ route('user.check') }}"
        $("#username_register-error").show();
        $.ajax({
            type:'POST',
            url: url,
            data: {
                _token: "{{ csrf_token() }}",
                username: username
            },
            success: function (data){
                if (data.success === false) {
                $("#username_register").removeClass('is-valid').addClass('is-invalid');
                $("#username_register-error").text(data.error);
            } else {
                $("#username_register").removeClass('is-invalid').addClass('is-valid');
                $("#username_register-error").text(data.message);
            }
            },
        });
    };

	$("#phone").on('input propertychange paste', function () {
		var reg = /^0+/gi;
		if (this.value.match(reg)) {
			this.value = this.value.replace(reg, '');
		}
	});

    function allowedKey(event, regex) {
        let reg = new RegExp(regex);
        let k = String.fromCharCode(!event.charCode ? event.which : event.charCode);
        if (!reg.test(k)) {
            event.preventDefault();
            return false;
        }
    }

    $('#username_register').bind('keypress', function(event) {
        return allowedKey(event, "^[a-zA-Z0-9]+$")
    });

    $('#phone, #accNumber').bind('keypress', function(event) {
        return allowedKey(event, "^[0-9]+$")
    });

	jQuery.validator.addMethod("validatePhone", function(value, element){
		let currency = "IDR"
		if ($('select[id=bank] :selected').parent().attr('label') != "bank") {
			if (currency == "IDR" && $("input[name=phone]").val()[0] != 8) {
				return false;
			} else {
				return true
			}
		} else {
			return true;
		}
	}, "Nomor ponsel tidak valid, mohon periksa kembali nomor ponsel anda.");

    $("#register-form").validate({
		onkeyup: false,
        rules: {
            username: { required: true, minlength: 6, maxlength: 15 },
            password: { required: true, minlength: 8, maxlength: 50 },
            password_confirmation: { required: true, minlength: 8, maxlength: 50, equalTo: '#password_register' },
            phone: { required: true, validatePhone: true, minlength: 8, maxlength: 13 },
            captcha: { required: true, maxlength: 4 },
            term: { required: true }
        },
		messages: {
			username: {
				required: "Nama Pengguna Tidak Boleh Kosong",
				minlength: "Panjang nama pengguna valid adalah 6 hingga 15"
			},
			password: {
				required: "Kata Sandi tidak boleh kosong",
				minlength: "Harap masukkan minimal 8 karakter."
			},
			password_confirmation: {
				required: "Kata Sandi tidak boleh kosong",
				minlength: "Harap masukkan minimal 8 karakter.",
				equalTo: "Kata Sandi Konfirmasi Harus Sama."
			},
			phone: {
				required: "Nomor Telepon tidak boleh kosong.",
				minlength: "Harap masukkan minimal 8 karakter."
			},
            captcha: { required: "Captcha tidak boleh kosong" },
            term: { required: "Silahkan centang syarat dan ketentuan." }
		},
		errorPlacement: function (error, element) {
			let error_id = element.attr("id")
			error.addClass("badge badge-danger text-white")
			error.insertAfter($(`span[id=${error_id}-error]`))
		},
        highlight: function(element, errorClass) {
            $(element).closest(".form-control").addClass("is-invalid");
        },
        unhighlight: function(element, errorClass) {
            $(element).closest(".form-control").removeClass("is-invalid");
        }
    });
    @if(session('captchaerror'))
    const errorRaw = "{&quot;captcha&quot;:[&quot;Captcha tidak sesuai&quot;]}"
    const error = JSON.parse(errorRaw.replace(/&quot;/g,'"'));
    $("#register-form").validate().showErrors(error)
    @endif
	$("select[id=bank]").on("change", function (e) {
		e.preventDefault()
        const cat = $('select[id=bank] :selected').parent().attr('label');
		if (cat == "BANK") {
			$("input[name=accNumber]").unbind("keyup");
			const max = $("select[id=bank]").find(':selected').data('max')
			const min = $("select[id=bank]").find(':selected').data('min')
			if (max == 0) {
				$("input[name=accNumber]").removeAttr("minlength").removeAttr("maxlength")
				return false
			}
			$("input[name=accNumber]").attr("minlength", min).attr("maxlength", max)
		} else if (cat == "epayment"){
			$("input[name=accNumber]").attr("minlength", 8).attr("maxlength", 13)
			$("span[id=accName-error]").html("<small>"+"Pastikan nama sesuai dengan bank yang anda pilih."+"</small>")
			$("span[id=phone-error]").html("<small>"+"Pastikan nomor sesuai dengan bank yang anda pilih."+"</small>")
		}
	})
</script>
@endpush