@extends('upgrade.layouts.app')
@section('content')
    <!-- start request form -->
    <section class=''>
        <div class="full-container">
            <div class="row uk-margin-xlarge-top" id="forms">
                <form action="{\\{ route('client.register') }}" method="POST" id="register">
                    @csrf
                    <div class="uk-grid uk-grid-xlarge">
                        <div class="uk-width-2-5@s uk-width-1-1">
                            <div class="uk-margin">
                                <label for="name">الأسم الكامل</label> <span class='uk-text-danger' id='nameError'></span>
                                <input type="text" id="name" name="name" value="{{old('name')}}" required maxlength="255" minlength="3" class="uk-input x-input"/>
                                @error('name')
                                <span class="uk-text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="uk-margin">
                                <label for="phone">رقم الموبيل</label> <span class='uk-text-danger' id='phoneError'></span>
                                <input type="text" id="phone" name="phone" value="{{old('phone')}}" required maxlength="15" minlength="10" class="uk-input x-input"/>
                                <small> +996******** </small>

                                @error('phone')
                                <span class="uk-text-danger">{{ $message }}</span>
                                @enderror
                            </div>
                        </div>

                        <div class="uk-width-2-5@s uk-width-1-1">

                            <div class="uk-margin">
                                <label for="email">البريد الألكتروني</label> <span class='uk-text-danger' id='emailError'></span>
                                <input type="email" id="email" name="email" value="{{old('email')}}" required maxlength="255" minlength="3" class="uk-input x-input"/>
                                @error('email')
                                    <span class="uk-text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                            <div class="uk-margin">
                                <label for="password">كلمة المرور</label> <span class='uk-text-danger' id='passwordError'></span>
                                <input type="password" id="password" name="password" required maxlength="255" minlength="3" class="uk-input x-input"/>
                                @error('password')
                                <span class="uk-text-danger">{{ $message }}</span>
                                @enderror
                            </div>

                        </div>
                    </div>
                    <div class="uk-margin-large-bottom uk-margin-large-top">
                        <div class="uk-width-1-3@s">
                            <button type="submit" class="btn active">انشاء حساب جديد</button>
                        </div>
                        <p>هل لديك حساب بالفعل ؟ <a href="{{ route('client.login') }}" class='mark bold'>تسجيل الدخول</a></p>
                    </div>
                </form>
            </div>
        </div>
    </section>
    <div class='loading none'>
        <div class='uk-cover'>
            <div class="uk-position-center">
                <div uk-spinner="ratio: 3"></div>
                {{-- <span uk-icon="heart"></span> --}}
            </div>
        </div>
    </div>
    <!-- end request form -->

@endsection
@push('js')
    <script>
        $(function () {
            let register = $('#register');
            let forms = $('#forms');
            let loading = $('.loading');
            register.submit(function (e){
                e.preventDefault();
                loading.fadeIn();
                $.ajax({
                    method:"POST",
                    url:'{{ route('client.register.validation') }}',
                    data:register.serializeArray(),
                    success:function ({ code ,email , name , phone , password }){
                        if (code){
                            localStorage.setItem('code',code);
                            // disabled
                            $('#register .uk-grid , #register .uk-margin-large-bottom').hide();
                            forms.append(`
                                <form action="#" id="registerPhone" method="POST">@csrf
                                    <input type="hidden" name="id" id="code" value="${code}" />
                                    <span class='uk-text-danger' id='tokenError'></span>
                                    <input type="text" name="token" maxlength="6" minlength="6" required class="uk-input x-input" placeholder='رسالة التاكيد'>
                                    <small>
                                        <a id="resendMessage" href="#">اعادة ارسال</a>
                                    </small>
                                    <div class="uk-margin-large-bottom uk-margin-large-top" >
                                        <div class="uk-width-1-3@s">
                                            <button class="btn active" type="submit">تاكيد</button>
                                        </div>
                                    </div>
                                </form>
                            `);
                            let registerPhone = $('#registerPhone');
                            let resendMessage = $('#resendMessage');
                            let tokenError = $('#tokenError');
                            let codeHtml = $('#code');
                            codeHtml.val(code);
                            registerPhone.submit(function (){
                                e.preventDefault();
                                let data;
                                data = $(this).serializeArray();
                                data.push({name:"phone",value:phone});

                                $.ajax({
                                    headers:{
                                        "Accept":"application/json"
                                    },
                                    method:"POST",
                                    url:'{{ route('client.verify.phone') }}',
                                    data,
                                    success:function ({status}){
                                        loading.fadeOut();
                                        // if false show not valid code message
                                        if (!status){
                                            tokenError.text( '  غير صحيح');
                                            return false;
                                        }
                                        // if true send register client
                                        // remove error text
                                        tokenError.text('');
                                        loading.fadeIn();

                                        $.ajax({
                                            headers:{
                                                "Accept":"application/json"
                                            },
                                            method:"POST",
                                            url:'{{ route('client.register') }}',
                                            data: { email , name , password ,phone,phone_verify_at:status },
                                            success:function (){
                                                window.location = "{{ route('client.register') }}"
                                            },
                                            error:function (error){
                                                loading.fadeOut();
                                                window.location = "{{ route('client.register') }}"
                                            }
                                        });
                                    },
                                    error:function (error){
                                        console.log(error)
                                        tokenError.text( '   غير صحيح ');
                                        loading.fadeOut();
                                    }
                                });
                                return false;
                            });
                            resendMessage.click(function (){
                                $.ajax({
                                    headers:{
                                        "Accept":"application/json"
                                    },
                                    method:"GET",
                                    url:'{{ route('client.resend.verify.phone') }}',
                                    data: { phone },
                                    success:function ({code}){
                                        loading.fadeOut();
                                        if (code){
                                            localStorage.setItem('code',code);
                                            codeHtml.val(code);
                                        }
                                        tokenError.text('');
                                    },
                                    error:function (error){
                                        loading.fadeOut();
                                        tokenError.text(" انتظر دقيقة ثم حاول مرة اخري ")
                                    }
                                });
                            });
                        }
                        loading.fadeOut();
                    },
                    error:function (error){
                        loading.fadeOut();
                        const { errors : {email , name , phone , password} } = error.responseJSON;
                        $("#emailError").text( email ? email[0] : null);
                        $("#nameError").text( name ? name[0] : null);
                        $("#phoneError").text( phone ? phone[0] : null);
                        $("#passwordError").text( password ? password[0] : null);
                    }
                });
                return false;
            });

        });
    </script>
@endpush