@extends('frontend.layouts.app')

@section('content')
    <section class="gry-bg py-4">
        <div class="profile">
            <div class="container">
                <div class="row">
                    <div class="col-xxl-4 col-xl-5 col-lg-6 col-md-8 mx-auto">
                        <div class="card">
                            <div class="text-center px-35 pt-5">
                                <h1 class="heading heading-4 strong-500">
                                    {{ translate('Verify Your Number')}}
                                </h1>
                            </div>
                            <div class="px-5 py-3 py-lg-4">
                                <div class="">
                                    <form id="reg-form" class="form-default" role="form" action="{{ route('user.verifynumberpost') }}" method="POST" name="register_form">
                                        @csrf
                                        <div class="form-group">
                                            <input type="text" class="h-auto form-control-lg form-control" placeholder="Enter Mobile Number" name="mobile" required>

                                                <span class="invalid-feedback" role="alert">
                                                    <strong>{{ $errors->first('Phone Number') }}</strong>
                                                </span>

                                        </div>



                                        <div class="text-right mt-3">
                                            <button type="submit register_form_save" class="btn btn-styled btn-base-1 w-100 btn-md">{{  translate('Send OTP') }}</button>
                                        </div>
                                    </form>

                                </div>
                            </div>
                            <div class="text-center px-35 pb-3">
                                <p class="text-md">
                                    {{ translate('Already Verified then ')}}<a href="{{ route('user.login') }}" class="strong-600">{{ translate('Log In')}}</a>
                                </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </section>
    <style type="text/css">
        .error{
            color: red;
        }
    </style>
@endsection


@section('script')
    @if(\App\BusinessSetting::where('type', 'google_recaptcha')->first()->value == 1)
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
    <style type="text/css">
      .error {
        color: red;
    }
    </style>
    <script type="text/javascript" src="{{asset('public/js/jquery.validate.min.js')}}"></script>
    <script type="text/javascript">

        @if(\App\BusinessSetting::where('type', 'google_recaptcha')->first()->value == 1)
        // making the CAPTCHA  a required field for form submission
        $(document).ready(function(){
            // alert('helloman');
            $("#reg-form").on("submit", function(evt)
            {
                var response = grecaptcha.getResponse();
                if(response.length == 0)
                {
                //reCaptcha not verified
                    alert("please verify you are humann!");
                    evt.preventDefault();
                    return false;
                }
                //captcha verified
                //do the rest of your validations here
                $("#reg-form").submit();
        });
            });
        @endif

        var isPhoneShown = true,
            countryData = window.intlTelInputGlobals.getCountryData(),
            input = document.querySelector("#phone-code");

        for (var i = 0; i < countryData.length; i++) {
            var country = countryData[i];
            if(country.iso2 == 'bd'){
                country.dialCode = '88';
            }
        }

        var iti = intlTelInput(input, {
            separateDialCode: true,
            utilsScript: "{{ asset('frontend/js/intlTelutils.js') }}?1590403638580",
            initialCountry:"IN",
            onlyCountries: @php echo json_encode(\App\Country::where('status', 1)->pluck('code')->toArray()) @endphp,
            customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
                if(selectedCountryData.iso2 == 'bd'){
                    return "01xxxxxxxxx";
                }
                return selectedCountryPlaceholder;
            }
        });

        var country = iti.getSelectedCountryData();
        $('input[name=country_code]').val(country.dialCode);

        input.addEventListener("countrychange", function(e) {
            // var currentMask = e.currentTarget.placeholder;

            var country = iti.getSelectedCountryData();
            $('input[name=country_code]').val(country.dialCode);

        });

        function toggleEmailPhone(el){
            if(isPhoneShown){
                $('.phone-form-group').addClass('d-none');
                $('.email-form-group').removeClass('d-none');
                isPhoneShown = false;
                $(el).html('Use Phone Instead');
            }
            else{
                $('.phone-form-group').removeClass('d-none');
                $('.email-form-group').addClass('d-none');
                isPhoneShown = true;
                $(el).html('Use Email Instead');
            }
        }
       $.validator.addMethod("roles", function(value, elem, param) {
       return $(".roles:checkbox:checked").length > 0;
    },"You must select at least one!");

    $.validator.addMethod("email_or_mobile", function(value, element) {
        return /^\d{10,10}$/.test(value) ||
            /^(([^<>()\[\]\\.,;:\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,}))$/.test(value)
        }, "Please enter valid email or mobile");

    $.validator.addMethod("mobile", function(value, element) {
        return /^\d{10,10}$/.test(value)
        }, "Please enter valid phone number");

    jQuery.validator.addMethod("lettersonly", function(value, element) {
      return this.optional(element) || /^[a-zA-Z\s]+$/i.test(value);
    }, "Letters only please");

    $('form[name="register_form"]').validate({
      ignore: [],
      debug: false,
      rules: {
        email:{
            required: true,
            email:true,
            remote: {
              url: '{{route("check.new.email") }}',
              type: "post",
              data: {"_token": "{{ csrf_token() }}" },
              dataFilter: function(data) {
                  var json = JSON.parse(data);
                  if (json.msg == "true") {
                      return "\"" + "Email already in use" + "\"";
                  } else {
                      return 'true';
                  }
              }
            }

        },
        name:{
            required:true,
            minlength:2,
            maxlength:60,
            lettersonly:true,
        },
        phone:{
            required:true,
            mobile:true,
            minlength:10,
            maxlength:10,
            remote: {
              url: '{{route("check.new.phone") }}',
              type: "post",
              data: {"_token": "{{ csrf_token() }}" },
              dataFilter: function(data) {
                  var json = JSON.parse(data);
                  if (json.msg == "true") {
                      return "\"" + "Mobile already in use" + "\"";
                  } else {
                      return 'true';
                  }
              }
            }
        },
        password: {
            required: true,
            minlength:6,
        },
        password_confirmation: {
           required: true,
           minlength: 6,
           equalTo: "#password"
        },
        checkbox_example_1:{
           required:true,
        },
      },
      errorPlacement: function(error, element)
        {
          if ( element.is(":checkbox") )
          {
              //error.appendTo( element.parents('.errrocontainer') );
              error.insertAfter(element.closest('div'));
          }
          else
          { // This is the default behavior
              error.insertAfter( element );
          }
        },


      messages: {
        email:{
            required: "Please enter email",
            email: "Please enter valid email ",
        },
        password:{
            required: "Please enter password",
        },
        password_confirmation:{
            required: "Please enter confirmation password",
        },
        phone:{
            required: "Please enter phone number",
        },
        name:{
            required: "Please enter name",
        },
        checkbox_example_1:{
            required: "please select checkbox",
        },
      },

    submitHandler: function(form) {
      $(".register_form_save").attr("disabled", true);
      form.submit();
    }
  });

    </script>


@endsection