@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>

            <form action="{{route('auth.login.post',['url'=>$next_url])}}" method="POST" id="login-form">
                @csrf
                <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.register.index',['url'=>$next_url])}}">ثبت نام کنید</a>
            </p>
        </div>
    </div>
@endsection

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

    <script>
        new Vue({
            el: "#app",
            data: {
                mobile: '',
                loading: false
            },
            methods: {
                toEnglishNumber(str) {
                    if (!str) return '';
                    return str.replace(/([۰-۹])/g, function (token) {
                        return String.fromCharCode(token.charCodeAt(0) - 1728);
                    });
                },

                mobileValidation(mobile) {
                    const mobileEn = this.toEnglishNumber(mobile);
                    const mobileRegex = /^[0-9+۰-۹]+$/;

                    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);
                    if (validation !== true) {
                        Swal.fire({
                            icon: 'info',
                            text: validation,
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000
                        });
                        return;
                    }

                    this.loading = true;

                    const response = await axios.get('{{ route("auth.check-user-exists") }}?mobile=' + this.mobile);
                    if (response.data) {
                        document.getElementById('login-form').submit();
                    } else {
                        this.loading = false;
                        this.userExists = false;
                        location.href = "{{route('auth.register.index')}}?mobile=" + this.mobile;
                    }
                }
            }
        });
    </script>
@endpush