@extends('layouts.user_registration_layout')
@section('content')

<section class="auth-page">
    @if (session('error'))
    <div class="alert alert-danger errorMsg">
        {{ session('error') }}
    </div>
@endif
@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
    <div class="auth-container">
        <div class="left-div">
            <a href="/" class="close"><img src="{{ asset('frontend/assets/images/close-icon-red.svg') }}"></a>
            <div class="inner-div">
                <ul class="nav nav-tabs">
                    <li class="complete-state">
                        <a data-toggle="tab" href="#details-tab" >
                            <small>
                                <div></div>
                            </small>
                            <strong>Details</strong>
                        </a>
                    </li>

                    <li class="incomplete-state">
                        <a data-toggle="tab" href="#verification-tab" class="">
                            <small>
                                <div></div>
                            </small>
                            <strong>Verification</strong>
                        </a>
                    </li>
                </ul>
                <div class="tab-content">
                    {{-- <div id="details-tab" class="tab-pane fade">
                        <div class="row">
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Full Name</label>
                                    <div class="input-with-right-icon">
                                        <input type="text" placeholder="" class="form-control">
                                        <button type="button" class="right-icon"><img src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Email Address</label>
                                    <div class="input-with-right-icon">
                                        <input type="text" placeholder="" class="form-control">
                                        <button type="button" class="right-icon"><img src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Mobile Number</label>
                                    <div class="input-with-right-icon">
                                        <input type="text" placeholder="" class="form-control">
                                        <button type="button" class="right-icon"><img src="{{ asset('frontend/assets/images/verify-tick-green.svg') }}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Password</label>
                                    <div class="input-with-right-icon">
                                        <input type="password" placeholder="" class="form-control">
                                        <button type="button" class="right-icon"><img src="{{ asset('frontend/assets/images/eye-icon.svg') }}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <label>Confirm Password</label>
                                    <div class="input-with-right-icon">
                                        <input type="password" placeholder="" class="form-control">
                                        <button type="button" class="right-icon"><img src="{{ asset('frontend/assets/images/eye-icon.svg') }}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="checkagree-with-label">
                                        <div class="checkagree">
                                            <input type="checkbox" class="custom-checkbox-s1">
                                        </div>
                                        <label>By Continuing you agree to our <a href="#">Terms and Conditions,
                                                Privacy policy and Cookie Notice</a></label>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="submit-actions">
                                        <button type="submit" class="submit-btn theme-solid-btn">Register <img src="{{ asset('frontend/assets/images/right-arow-white-icon.svg')}}"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="auth-more-text">
                                        <label>Already have an account? <a href="#">Log in</a></label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> --}}
                    <form class="m-form m-form--state" name="verify-otp" id="verify-otp" method="post"
                    action="{{ route('registration-otp-verify') }}" enctype="multipart/form-data">
                    @csrf
                    <div id="verification-tab" class="tab-pane fade active show">
                        <div class="row">
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <figure class="verification-graphics">
                                        <div class="img-container">
                                            <img src="{{asset('frontend/assets/images/verify-otp.svg')}}">
                                        </div>
                                        <figcaption>
                                            <h3>OTP Verification</h3>
                                            <P>Enter the OTP sent to <strong>@if(Session::has('email')) {{Session::get('email')}}  @endif</strong></P>
                                            <span class="otp_err" style="color:red"></span>
                                        </figcaption>
                                    </figure>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="otp-input-boxs">
                                        <input class="otp otp-input form-control" type="text" oninput='digitValidate(this)' onkeyup='tabChange(1)' maxlength=1 required>
                                        <input class="otp otp-input form-control" type="text" oninput='digitValidate(this)' onkeyup='tabChange(2)' maxlength=1 required>
                                        <input class="otp otp-input form-control" type="text" oninput='digitValidate(this)' onkeyup='tabChange(3)' maxlength=1 required>
                                        <input class="otp otp-input form-control" type="text" oninput='digitValidate(this)'onkeyup='tabChange(4)' maxlength=1 required>
                                        <input type="hidden" id="verificationCode" />
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="auth-more-text text-center">Didn’t you received the OTP? <a href="{{route('user-verification-resend-otp')}}" id="resendOTP">Resend OTP</a>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-md-12">
                                <div class="form-group">
                                    <div class="submit-actions">
                                        <button type="submit" id="saveData" class="submit-btn theme-solid-btn justify-content-center">Verify</button>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="right-div">
            <figure>
                <div class="auth-logo">
                    <img src="{{asset('frontend/assets/images/logo-white.svg')}}" alt="">
                </div>
                <figcaption>
                    <h3>TransCash Solution inc</h3>
                    <p>Is an international money transfer company reliable, credible, secure, fast and at less cost.
                        Use our services for your international transfers without wasting time.</p>
                </figcaption>
            </figure>
        </div>
    </div>
</section>
    
@endsection
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.33.1/sweetalert2.js"></script>
<script>
    var otp=[];
    let digitValidate = function(ele){
        ele.value = ele.value.replace(/[^0-9]/g,'');
}

let tabChange = function(val){
    let ele = document.querySelectorAll('.otp-input');
    if(ele[val-1].value != ''){
      ele[val].focus()
    }else if(ele[val-1].value == ''){
      ele[val-2].focus()
    }   
 }
 $(document).ready(function(){
    
    $('#verify-otp').submit(function(e){
        e.preventDefault();
        let ele = $('.otp-input').map((_,el) => el.value).get();
        let ArrayVAlue = $.map(ele, function(s){ return parseFloat(s); });
        let otp = ArrayVAlue.toString().replace(/,/g, "");
        console.log('otp',otp);
        var url = window.location;

        var access_token = new URLSearchParams(url.search).get('access_token');
       if(access_token== null){
        var Bearer = localStorage.getItem('access_token');
       }else{
        var Bearer = access_token;
       }
        //var Bearer = localStorage.getItem('access_token');
       console.log('Bearer',Bearer);
        var _token = $("input[name='_token']").val();
            $.ajax({
                url:"{{route('registration-otp-verify')}}",
                type:"POST",
                headers: {
                    Authorization: 'Bearer '+Bearer
                },
                data:{
                    _token:_token,
                    otp:otp
                },
                success:function(data){
                    console.log(data);
                    if($.isEmptyObject(data.error)){
                        $url = '/login';
                        console.log($url);
                        swal({
                            title: "Wow!",
                            text: "Your account has been verified Successfully. Please Login",
                            type: "success"
                        }).then(function() {
                            window.location.href = $url;
                        });
                        $('.otp_error').text('');
                    }else{
                        printErrotMsg(data.error);
                    }
                }
            })
    });

    $('#resendOTP').click(function(e){
        console.log('Resend OTP Hit');
        e.preventDefault();
        var url = window.location;

        var access_token = new URLSearchParams(url.search).get('access_token');
        
       if(access_token== null){
        var Bearer = localStorage.getItem('access_token');
       }else{
        var Bearer = access_token;
       }
       
        //var Bearer = localStorage.getItem('access_token');
       console.log('Bearer',Bearer);
        var _token = $("input[name='_token']").val();
            $.ajax({
                url:"{{route('user-verification-resend-otp')}}",
                type:"POST",
                headers: {
                    Authorization: 'Bearer '+Bearer
                },
                data:{
                    _token:_token
                },
                success:function(data){
                    console.log(data);
                    if($.isEmptyObject(data.error)){
                        localStorage.removeItem('access_token');
                        localStorage.setItem('access_token', data.user_access_token);
                        localStorage.removeItem('email');
                        localStorage.setItem('email', data.email);
                        $url = '/user-verification?access_token='+data.user_access_token;
                        $('.otp_error').text('');
                        swal({
                            title: "Wow!",
                            text: "OTP has been sent!",
                            type: "success"
                        }).then(function() {
                            window.location.href = $url;
                        });
                          
                       
                        
                    }else{
                        printErrotMsg(data.error);
                    }
                }
            })
    });
});

function printErrotMsg(msg){
            $.each(msg,function(key,value){
                $('.'+key+'_err').text(value);
                $('.otp-cross').css('display','block');
                $('.otp-tick').css('display','none');

            })
        }

</script>