<template>
    <div class="modals">
        <div class="modal fade" id="loginCheck" tabindex="-1" role="dialog" aria-labelledby="loginCheckLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="row justify-content-center">
                        <div class="col-xl-8">
                            <div class="back_login_reg">
                                <img width="89px" src="/images/smartphone.png">
                                <span>شماره موبایل خود را وارد کنید</span>
                                <p>یک کد 5 رقمی برای تکمیل ورود شما به سایت یا ثبت نام شما به شماره ثبت شده فرستاده خواهد شد</p>
                                <form @submit="checkMobile" id="loginMobile">
                                    <div class="d-flex flex-row-reverse">
                                    <span class="area_number d-inline-flex" dir="ltr">
                                        <i class="o-icon o-phone"></i>+98
                                    </span>
                                        <input name="mobile" type="text" placeholder="9120893425" v-model="mobile" >
                                    </div>
                                    <button type="submit">ارسال کد تایید</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="active_code_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <span id="return_phone" class="text-right p-2" @click="backToReg">
                        <i class="o-icon o-simple-remove"></i>
                    </span>
                    <div class="row justify-content-center">
                        <div class="col-xl-8">
                            <div class="back_login_reg">
                                <img width="89px" src="/images/smartphone.png">
                                <span>ثبت نام اولیه</span>
                                <p class="mb-1">کاربر گرامی
                                    جهت تکمیل ثبت نام کد تایید ارسال شده را وارد کنید</p>
                                <span id="time_countdown"></span>
                                <div id="max_length" class="d-flex flex-row-reverse">
                                    <input v-model="code" maxlength="5" type="text">
                                </div>
                                <p class="mb-0 mt-3">کد تایید را دریافت نکردید؟ <a href="#">ارسال
                                    مجدد</a></p>
                                <form method="POST" action="/signin" id="signinModalForm" style="width:100%">
                                    <input type="hidden" :value="parseInt(mobile)" name="mobile" />
                                    <input type="hidden" :value="parseInt(code)" name="code" />
                                    <button id="step_2_reg" class="mt-3" type="submit">ورود</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="register_form" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle2" aria-hidden="true">
            <div class="modal-dialog modal_dialog_2 modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="row register_style">
                        <div class="col-xl-5 p-4 d-flex flex-column justify-content-center">
                            <form @submit="signup" id="signup">
                                <div class="position-relative" >
                                    <div class="photo-upload text-center" v-for="(input , index) in imgInput">
                                        <label :for="'image'+index" class="relative profile-pic" :style="{backgroundImage:'url(\''+input+'\')' }">
                                            <input name="avatar" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index" @change="imgChange(index,$event.target)"/>
                                        </label>
                                    </div>
                                </div>
                                <div class="position-relative">
                                    <input name="fname" class="text-input" placeholder="نام" type="text">
                                </div>
                                <div class="position-relative">
                                    <input name="lname" class="text-input" placeholder="نام خانوادگی" type="text">
                                    <input name="mobile" type="hidden" :value="mobile">
                                </div>
                                <div class="position-relative">
                                    <input name="email" class="text-input" placeholder="ایمیل" type="text">
                                </div>
                                <div class="position-relative">
                                    <v-select :options="states" label="title" v-model="selectedState" placeholder="انتخاب استان">
                                                <span slot="no-options">
                                                    نتیجه ای یافت نشد
                                                </span>
                                    </v-select>
                                </div>
                                <div class="position-relative">
                                    <v-select :options="cities" label="title" v-model="selectedCity" placeholder="انتخاب شهر">
                                                <span slot="no-options">
                                                    نتیجه ای یافت نشد
                                                </span>
                                    </v-select>
                                </div>
                                <div class="position-relative switch-button">
                                    <label class="switch">
                                        <input type="checkbox" @change="changeToExpert">
                                        <span class="slider round"></span>
                                    </label>
                                    <label>ثبت نام به عنوان کارشناس</label>
                                </div>
                                <div class="catList" v-if="type">
                                    <div class="mainCat" v-for="cat in categories">
                                        <h6>{{cat.title}}</h6>
                                        <div class="subCatParent">
                                            <div class="subCat" v-for="sub in cat.subs">
                                                <input type="checkbox" :id="'cb'+sub.id" @change="pushToExpert(sub.id)" />
                                                <label :for="'cb'+sub.id">{{sub.title}}</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="margin-top-10 margin-bottom-10">
                                        <textarea class="form-control" v-model="expertDesc" placeholder="توضیحات"></textarea>
                                    </div>
                                </div>
                                <button type="submit" class="register_button">ثبت نام</button>
                            </form>
                        </div>
                        <div class="col-xl-7 p-0">
                            <div class="image-register" style="background-image: url('/images/signupImage.png')"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="register_expert" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle2" aria-hidden="true">
            <div class="modal-dialog modal_dialog_2 modal-dialog-centered modal-lg" role="document">
                <div class="modal-content">
                    <div class="row register_style">
                        <div class="col-xl-5 p-4 d-flex flex-column justify-content-center">
                            <div class="catList">
                                <h5>تخصص های خود را انتخاب نمایید.</h5>
                                <div class="mainCat" v-for="cat in categories">
                                    <h6>{{cat.title}}</h6>
                                    <div class="subCatParent">
                                        <div class="subCat" v-for="sub in cat.subs">
                                            <input type="checkbox" :id="'cb2'+sub.id" @change="pushToExpert(sub.id)" />
                                            <label :for="'cb2'+sub.id">{{sub.title}}</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="margin-top-10 margin-bottom-10">
                                    <textarea class="form-control" v-model="expertDesc" placeholder="توضیحات"></textarea>
                                </div>
                            </div>
                            <button type="submit" class="register_button" @click="expertReg">ثبت نام</button>
                        </div>
                        <div class="col-xl-7 p-0">
                            <div class="image-register" style="background-image: url('/images/signupImage.png')"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect,
        },
        data() {
            return {
                mobile:null,
                code:null,
                states:[],
                cities:[],
                selectedState:null,
                selectedCity:null,
                finalCity:null,
                type:null,
                categories:[],
                selectedExpertCategory:[],
                firstTime:true,
                imgInput:[
                    '/images/add_image.png'
                ],
                expertDesc:'',
            }

        },
        beforeMount(){

        },
        watch:{
            selectedState: function (val) {
                if(val.id){
                    axios.get('/advertisement/data-cities/'+val.id).then(res=>{
                        this.cities=res.data
                    })
                }else{
                    this.cities=[]
                }
            },
            selectedCity: function (val) {
                if(val.id){
                    this.finalCity=val.id
                }else{
                    this.selectedCity=null
                    this.finalCity=null
                }

            },
        },
        mounted() {
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
            $(document).on('submit','#signinModalForm',(e)=>{
                if(this.firstTime){
                    e.preventDefault()
                    axios.post('/signin',{code:parseInt(this.code),mobile:parseInt(this.mobile)}).then(res=>{
                        window.localStorage.setItem('Login',res.data)
                        this.firstTime=false
                        $('#signinModalForm').submit()
                    }).catch(res=>{
                        $.toast({
                            text : 'کد تایید به درستی وارد نشده',
                            showHideTransition : 'slide',
                            bgColor : '#ed2e2e',
                            textColor : '#f6f6f6',
                            allowToastClose : false,
                            hideAfter : 5000,
                            stack : 5,
                            loader:false,
                            textAlign : 'right',
                            position : 'top-center'
                        })
                    })
                }else{
                }
            })
        },
        methods:{
            checkMobile:function (e) {
                e.preventDefault()
                axios.post('/check',{mobile:parseInt(this.mobile)}).then(res=>{
                    if(!res.data.data){
                        $('#loginCheck').modal('hide')
                        setTimeout(function () {
                            $('#register_form').modal('show')
                        },100)
                    }else{
                        $('#loginCheck').modal('hide')
                        setTimeout(function () {
                            $('#active_code_1').modal('show')
                        },100)
                    }
                }).catch(res=>{
                })
            },
            backToReg:function () {
                $('#active_code_1').modal('hide')
                setTimeout(function () {
                    $('#loginCheck').modal('show')
                },100)
            },
            imgChange:function (pic,input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e)=> {
                        this.imgInput[pic]=e.target.result
                        this.$forceUpdate()
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            },
            changeToExpert:function () {
                if(this.type){
                    this.type=null
                    this.$forceUpdate()
                }else{
                    this.type='expert'
                    this.$forceUpdate()
                }
            },
            pushToExpert:function (id) {
                if(this.selectedExpertCategory.includes(id)){
                    let index = this.selectedExpertCategory.indexOf(id)
                    this.selectedExpertCategory.splice(index,1)
                    this.$forceUpdate()
                }else{
                    this.selectedExpertCategory.push(id)
                    this.$forceUpdate()
                }
            },
            signup:function (e) {
                e.preventDefault()
                let fd = new FormData($('#signup')[0])
                fd.append('type',this.type)
                if(this.type=='expert'){
                    fd.append('description',this.expertDesc)
                }
                fd.append('city_id',this.finalCity)
                if(this.selectedExpertCategory.length){
                    for (let i in this.selectedExpertCategory){
                        fd.append(`category_id[${i}]`,this.selectedExpertCategory[i])
                    }
                }
                axios.post('/signup',fd,{  headers: { 'Content-Type': 'multipart/form-data' }}).then(res=>{
                    $('#register_form').modal('hide')
                    this.selectedExpertCategory=[]
                    this.expertDesc=''
                    this.type=null
                    setTimeout(()=>{
                        $('#loginCheck').modal('show')
                    },100)
                })
            },
            expertReg:function () {
                axios.post('/expert/create',{category_id:this.selectedExpertCategory,description:this.expertDesc}).then(res=>{
                    $('#register_expert').modal('hide')
                    this.selectedExpertCategory=[]
                    this.expertDesc=''
                })
            }

        },
    }
</script>
