@extends('layouts.site.master')
@section('content')
    <div id="app" class="col-xxl-4 col-xl-5 col-sm-7 col-12 mx-auto pt-lg-5 pt-0 mt-lg-5 mt-3 px-md-5 px-3">
        <div class="bg-white shadow-sm main-radius p-3 pt-4 text-center">
            <img width="40"
                 src="{{asset('assets/site/img/logo-number.png')}}" alt="">
            <p class="bold dark-gray text-center font-18 my-3">
                ثبت نام در <span class="mint-green">{{$setting->getSetting('site_name') ?? 'نام پیشفرض'}}</span>
            </p>
            @php
            if (!$next_url){
                $next_url = null;
            }
            @endphp
            <form action="{{route('auth.register.post',['next_url'=>$next_url])}}" method="POST" id="register-form">
                @csrf
                <div class="mb-2">
                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                        نام و نام خانوادگی
                    </label>
                    <input v-model="name" name="name" class="w-100 main-radius border login-input font-13"
                           placeholder="مثلا: رضا علیمرادی"
                           type="text">
                </div>
                <div class="mb-3">
                    <label class="text-start w-100 font-14 mb-1 dark-gray light">
                        شماره تماس
                    </label>
                    <input oninput="numberFormat()" v-model="mobile" name="mobile"
                           class="w-100 main-radius border login-input font-13" dir="ltr"
                           placeholder="۰۹۱۲۳۴۵۶۷۸۹" type="text">
                </div>
                <button type="button" @click="submitLogin" style="padding: 13px;"
                        class="first-page-btn-component mt-1 justify-content-center d-flex font-14 text-white main-radius btn-dark-gray">
                    <span v-if="!loading">ثبت نام</span>
                    <span v-else>در حال پردازش...</span>
                </button>
            </form>

            <p class="mb-0 mt-3 font-12 Charcoal-gray">
                قبلا ثبت نام کردید؟ <a class="mint-green" href="{{route('auth.login.index',['next_url'=>$next_url])}}">وارد شوید</a>
            </p>
        </div>
    </div>
@endsection

@push('scripts')
    <script src="{{asset('assets/admin/js/vue.min.js')}}"></script>
    <script src="{{asset('assets/admin/js/axios.min.js')}}"></script>

    <script>
        new Vue({
            el: "#app",
            data: {
                name: '',
                mobile: "{{@$mobile ? $mobile : null}}",
                loading: false
            },
            methods: {
                toEnglishNumber(str) {
                    if (!str) return '';
                    return str.replace(/([۰-۹])/g, function (token) {
                        return String.fromCharCode(token.charCodeAt(0) - 1728);
                    });
                },
                mobileValidation(mobile, name) {
                    const mobileEn = this.toEnglishNumber(mobile);
                    const mobileRegex = /^[0-9+۰-۹]+$/;

                    if (!name) {
                        return 'لطفا نام و نام خانوادگی را وارد کنید.'
                    } else if (name.length < 4) {
                        return 'نام و نام خانوادگی حداقل باید 5 حرف داشته باشد.'
                    }


                    if (!mobile) {
                        return 'وارد کردن شماره همراه الزامیست';
                    } else if (!mobileRegex.test(mobile)) {
                        return 'در شماره همراه فقط عدد وارد کنید';
                    } else if (mobileEn.length !== 11) {
                        return "شماره همراه باید ۱۱ رقم باشد";
                    }
                    return true;
                },

                async submitLogin() {
                    const validation = this.mobileValidation(this.mobile, this.name);
                    if (validation !== true) {
                        Swal.fire({
                            icon: 'info',
                            text: validation,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        return;
                    }

                    this.loading = true;

                    setTimeout(() => {
                        document.getElementById('register-form').submit();
                    }, 500);
                }
            }
        });
    </script>

    @if(@$session_pm)
        <script>
            var msg = "{{@$session_pm}}";

            swal.fire({

                icon: 'error',
                text: msg,
                showCancelButton: false,
                showConfirmButton: false,
                toast: true,
                position: 'top-right',
                timer: 5000

            });
        </script>
    @endif

@endpush