@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">
                @{{ step === 'login' ? 'ورود به' : 'ثبت نام در' }}
                <span class="mint-green">
                {{$setting->getSetting('site_name') ?? 'نام پیشفرض'}}
            </span>
            </p>
            <form
                :action="step === 'login'
                    ? '{{route('auth.login.post',['url'=>$next_url])}}'
                    : '{{route('auth.register.post',['next_url'=>$next_url])}}'"
                method="POST" id="auth-form">
                @csrf

                <!-- نام (فقط رجیستر) -->
                <div class="mb-2" v-if="step === 'register'">
                    <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 v-model="mobile"
                           oninput="numberFormat()"
                           name="mobile"
                           class="w-100 main-radius border login-input font-13"
                           dir="ltr"
                           placeholder="۰۹۱۲۳۴۵۶۷۸۹"
                           type="text">
                </div>

                <!-- دکمه -->
                <button type="button"
                        @click="submitForm"
                        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">
                        @{{ step === 'login' ? 'ورود' : 'ثبت نام' }}
                    </span>
                    <span v-else>در حال پردازش...</span>
                </button>
            </form>
            <p class="mb-0 mt-3 font-12 Charcoal-gray">
            <span v-if="step === 'login'">
                حساب کاربری ندارید؟
                <a class="mint-green" href="#" @click.prevent="step='register'">
                    ثبت نام کنید
                </a>
            </span>
                <span v-else>
                قبلا ثبت نام کردید؟
                <a class="mint-green" href="#" @click.prevent="step='login'">
                    وارد شوید
                </a>
            </span>
            </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: {
                step: 'login', // login | register
                mobile: "{{@$mobile ?? ''}}",
                name: '',
                loading: false
            },
            methods: {
                toEnglishNumber(str) {
                    return str.replace(/([۰-۹])/g, t =>
                        String.fromCharCode(t.charCodeAt(0) - 1728)
                    );
                },
                mobileValidation() {
                    const mobile = this.toEnglishNumber(this.mobile);
                    if (!mobile) return 'شماره همراه الزامیست';
                    if (mobile.length !== 11) return 'شماره همراه باید ۱۱ رقم باشد';
                    return true;
                },
                async submitForm() {
                    const validation = this.mobileValidation();
                    if (validation !== true) {
                        Swal.fire({icon: 'info', text: validation, toast: true, timer: 3000});
                        return;
                    }
                    if (this.step === 'login') {
                        this.loading = true;

                        const res = await axios.get(
                            '{{route("auth.check-user-exists")}}',
                            {params: {mobile: this.mobile}}
                        );

                        if (!res.data.exists) {
                            this.loading = false;
                            this.step = 'register';
                            return;
                        }
                    }
                    if (this.step === 'register') {
                        if (!this.name || this.name.length < 4) {
                            Swal.fire({
                                icon: 'info',
                                text: 'نام معتبر وارد کنید',
                                toast: true,
                                timer: 3000
                            });
                            return;
                        }
                    }

                    this.loading = true;
                    document.getElementById('auth-form').submit();
                }
            }
        });
    </script>
@endpush