@extends('home.layouts.index')
{{--//title--}}
@section('title')
     ثبت نام
@endsection
{{--//description--}}
@section('description')
    {{--توضیحات متا--}}
@endsection
{{--//style--}}
@section('style')
    <style>
        input[type= checkbox]:checked{
            background-color: #3474d4;
            border: none;
        }
        strong{
            color: red;
        }
        .header-transparent{
            position: static !important;
            background-color: #222;
        }
        .bg-light-gray {
            cursor: pointer !important;
            padding: 15px;
            background-color: #f2f2f2 !important;
        }
        .alert-danger {
            background-color: #ffd6d6 !important;
        }

        .alert button{
            background: transparent;
            border: none;
            margin-left: 8px ;
            color: #b10001 !important;
            cursor: pointer;
        }
    </style>
@endsection
{{--javaScript--}}
@section('MyJs')
    <script>
        $('.loginWithSMS').click(function () {
            $('.DefaultLogin').hide();
            $('.SMSLoginBox').show();
        })
        $('.SwitchToDefaultLogin').click(function () {
            $('.SMSLoginBox').hide();
            $('.DefaultLogin').show();
        })

        $('#checkOTPForm').hide();
        $('#resendOTPButton').hide();

        //ready to Send Code Ajax
        let login_token;
        $('#loginOTPForm').submit(function (event) {
            var cellphone = $('#cellphoneInput').val();
            console.log(cellphone);
            event.preventDefault();
            $.post("{{ url('/smsLogin') }}", {
                '_token': "{{ csrf_token() }}",
                'cellphone': cellphone
            }, function (response, status) {
                console.log(response, status);
                login_token=response.login_token;
                swal({
                    icon : 'success',
                    text : 'رمز یکبار مصرف برای شما ارسال شد',
                    timer : 2000
                });
                $('#loginOTPForm').fadeOut();
                $('#checkOTPForm').fadeIn();
                timer();

            }).fail(function (response) {
                console.log(response.responseJSON);
                $('#cellphoneInput').addClass('mb-1');
                $('#cellphoneInputError').fadeIn()
                $('#cellphoneInputErrorText').html(response.responseJSON.errors.cellphone[0])
            })
        })

        //ready to check Code and login Ajax
        $('#checkOTPForm').submit(function (event) {
            let otp=$('#checkOTPInput').val();
            event.preventDefault();
            $.post("{{ url('/check-otp') }}", {
                '_token': "{{ csrf_token() }}",
                'otp': otp,
                'login_token': login_token
            }, function (response, status) {
                swal({
                    icon : 'success',
                    text : 'ثبت نام با موفقیت انجام شد',
                    timer : 2000
                });
                $(location).attr('href','{{ route('home.redirects') }}');

            }).fail(function (response) {
                // console.log(response.responseJSON);
                $('#checkOTPInput').addClass('mb-1');
                $('#checkOTPInputError').fadeIn()
                $('#checkOTPInputErrorText').html(response.responseJSON.errors.otp[0])
            })
        });

        //resend Code
        $('#resendOTPButton').click(function (event) {
            event.preventDefault();
            $.post("{{ url('/resend-otp') }}", {
                '_token': "{{ csrf_token() }}",
                'login_token': login_token
            }, function (response, status) {
                console.log(response, status);
                login_token=response.login_token;
                swal({
                    icon : 'success',
                    text : 'رمز یکبار مصرف برای شما ارسال شد',
                    timer : 2000
                });
                $('#resendOTPButton').fadeOut();
                timer();
                $('#resendOTPTime').fadeIn();
                $('#resendCodeDiv').fadeIn();


            }).fail(function (response) {
                console.log(response.responseJSON);
                swal({
                    icon : 'error',
                    text : 'مشکل در ازسال مجدد رمز یکبار مصرف.دوباره تلاش کنید',
                    timer : 2000
                });
            })
        })


        //timer for resend Code
        function timer() {
            let time = "1:01";
            let interval = setInterval(function() {
                let countdown = time.split(':');
                let minutes = parseInt(countdown[0], 10);
                let seconds = parseInt(countdown[1], 10);
                --seconds;
                minutes = (seconds < 0) ? --minutes : minutes;
                if (minutes < 0) {
                    clearInterval(interval);
                    $('#resendOTPTime').hide();
                    $('#resendOTPButton').fadeIn();
                    $('#resendCodeDiv').hide();

                };
                seconds = (seconds < 0) ? 59 : seconds;
                seconds = (seconds < 10) ? '0' + seconds : seconds;
                //minutes = (minutes < 10) ?  minutes : minutes;
                $('#resendOTPTime').html(minutes + ':' + seconds);
                time = minutes + ':' + seconds;
            }, 1000);
        }




    </script>
@endsection
@section('content')







    <main class="main">

        <div class="page-content mt-6 pb-2 mb-10">
            <div class="container">
                <div class="login-popup">
                    <div class="form-box">
                        <div class="tab tab-nav-simple tab-nav-boxed form-tab">

                            <div class="tab-content">
                                <div class="tab-pane active" id="register">

                                    <h3 style="font-size:22px" class="text-center text-muted">ثبت نام</h3>

                                    <form action="{{ route('register') }}"
                                          method="POST" class="login_form ">
                                        @csrf
                                        <div class="form-group">
                                            <label>نام <span class="required">*</span></label>
                                            <input required class="form-control" type="text" name="first_name" value="{{ old('first_name') }}">
                                            @error('first_name')
                                            <div class="input-error-validation">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label> نام خانوادگی<span class="required">*</span></label>
                                            <input required class="form-control" type="text" name="last_name" value="{{ old('last_name') }}">
                                            @error('last_name')
                                            <div class="input-error-validation">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>

                                        <div class="form-group">
                                            <label>ایمیل<span class="required">*</span></label>
                                            <input required class="form-control" type="email" name="email" value="{{ old('email') }}">
                                            @error('email')
                                            <div class="input-error-validation">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>
                                        <div class="form-group">
                                            <label>شماره همراه<span class="required">*</span></label>
                                            <input required class="form-control" type="text" name="cellphone" value="{{ old('cellphone') }}">
                                            @error('cellphone')
                                            <div class="input-error-validation">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>

                                            <div class="form-group">
                                                <label>رمز عبور <span class="required">*</span></label>
                                                <input class="form-control" required type="password" name="password">
                                                @error('password')
                                                <div class="input-error-validation">
                                                    <strong>{{ $message }}</strong>
                                                </div>
                                                @enderror
                                            </div>


                                        <div class="form-group">
                                            <label>تکرار رمز عبور<span class="required">*</span></label>
                                            <input class="form-control" type="password" name="password_confirmation">
                                            @error('password_confirmation')
                                            <div class="input-error-validation">
                                                <strong>{{ $message }}</strong>
                                            </div>
                                            @enderror
                                        </div>
                                        {!! htmlFormSnippet() !!}
                                        <div class="form-footer">
                                            <div class="form-group">
                                                <button type="submit" class="btn btn-default btn-block" name="login" value="Register">ثبت نام</button>
                                            </div>
                                            <div class="login_footer">
                                                حساب کاربری دارید؟
                                                <a href="{{ route('login.email') }}">  وارد شوید </a>
                                            </div>
                                        </div>

                                    </form>


                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>











@endsection