<template>
    <form class="container createAd" id="adForm" @submit="submitForm">
        <div class="row margin-top-50">
            <div class="col-md-4">
                <div class="form-group">
                    <label>عنوان آگهی</label>
                    <input name="title" type="text" class="form-control" placeholder="عنوان آگهی" />
                    <input name="expiration_time" type="hidden" :value="expiration_time" />
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>قیمت (تومان)</label>
                    <input name="price" type="number" class="form-control" placeholder="قیمت" />
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>اولویت</label>
                    <select name="priority" class="form-control" v-model="selectedPriority">
                        <option value="normal">عادی</option>
                        <option value="immediate">فوری</option>
                        <option value="special">ویژه</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>نوع</label>
                    <select name="type" class="form-control">
                        <option value="sale">فروش</option>
                        <option value="rent">اجاره</option>
                        <option value="buy">خرید</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>استان</label>
                    <v-select :options="states" label="title" v-model="selectedState" placeholder="انتخاب استان">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>شهر</label>
                    <v-select :options="cities" label="title" v-model="selectedCity" placeholder="انتخاب شهر">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group cat-select">
                    <label>دسته بندی</label>
                    <div class="form-control" @click="openDropdown">{{finalSubCatTitle?finalSubCatTitle:'دسته بندی'}}</div>
                    <div class="relative">
                        <div class="cat-dropdown" style="display: none">
                            <div class="cats" v-if="catBackup.length" @click="prevCat">مرحله قبل <i class="o-icon o-minimal-right"></i> </div>
                            <div class="cats" v-for="cat in categories" @click="selectCat(cat)">{{cat.title}} <i v-if="cat.subs.length" class="o-icon o-minimal-left"></i> </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>قابلیت پیشنهاد دادن</label>
                    <div class="switch-button">
                        <label class="switch">
                            <input type="checkbox" :v-model="offer">
                            <span class="slider round"></span>
                        </label>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="d-flex" style="justify-content:space-between">
                    <div class="photo-upload text-center" v-for="(input , index) in imgInput">
                        <label :for="'image'+index+1">
                            <input name="image[]" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index+1" @change="imgChange(index,$event.target)"/>
                            <img src="images/add_image.png" class="width100" />
                            <div class="bg pic-show" :id="'bg'+index" :style="{backgroundImage:'url(\''+input+'\')' }"></div>
                        </label>
                    </div>
                </div>

            </div>
            <div class="col-md-4" v-for="itm in catItems">
                <div class="form-group">
                    <label>{{itm.title}}</label>
                    <input v-if="itm.type=='text'" type="text" class="form-control" :placeholder="itm.title" v-model="datas[itm.id]" />
                    <select v-if="itm.type=='select'" class="form-control" v-model="datas[itm.id]">
                        <option :value="data" v-for="data in JSON.parse(itm.data)">{{data}}</option>
                    </select>
                    <div v-if="itm.type=='switch'" class="switch-button">
                        <label class="switch">
                            <input type="checkbox" v-model="datas[itm.id]" @change="changeSwitch">
                            <span class="slider round"></span>
                        </label>
                    </div>
                    <textarea v-if="itm.type=='text-box'" class="form-control" v-model="datas[itm.id]"></textarea>
                </div>
            </div>
        </div>
        <div class="row margin-bottom-50">
            <div class="col-md-12">
                <div class="form-group">
                    <label>توضیحات</label>
                    <textarea class="form-control" name="description"></textarea>
                </div>
            </div>
            <div class="col-md-12 text-left">
                <button type="submit" class="submit-form btn">ثبت آگهی</button>
            </div>
        </div>
    </form>
</template>
<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect
        },
        data() {
            return {
                states:[],
                selectedState:null,
                cities:[],
                selectedCity:null,
                finalCity:null,
                selectedCat:null,
                categories:[],
                catBackup:[],
                finalSubCat:null,
                finalSubCatTitle:null,
                imgInput:[],
                catItems:[],
                datas:{},
                expiration_time:null,
                offer:false,
                selectedPriority:'normal'
            }

        },
        beforeMount(){
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
        },
        watch:{
            selectedState: function (val) {
                this.cities=[]
                this.selectedCity=null
                this.finalCity=null
                axios.get('/advertisement/data-cities/'+val.id).then(res=>{
                    this.cities=res.data
                })
            },
            selectedCity: function (val) {
                this.finalCity=val.id
            },
        },
        mounted() {

        },
        methods:{
            openDropdown(){
                $('.cat-dropdown').slideDown()
            },
            selectCat(cat){
                this.catBackup.push(this.categories)
                if(cat.subs.length){
                    this.categories = cat.subs
                }else{
                    this.finalSubCat=cat.id
                    this.finalSubCatTitle=cat.title
                    axios.get('/advertisement/data-category/'+cat.id).then(res=>{
                        for(let i = 0;i<res.data.limit;i++){
                            this.imgInput.push('/images/add_image.png')
                        }
                        this.categories = this.catBackup[0]
                        this.catBackup = []
                        this.catItems=res.data.items
                        this.expiration_time=res.data.expiration_time
                        this.catItems.map((sw)=>{
                            if(sw.type== 'switch'){
                                this.datas[sw.id]=sw.value=="1"?true:false
                            }
                        })
                        $('.cat-dropdown').slideUp()
                    })
                }
            },
            prevCat(){
                this.categories = this.catBackup[this.catBackup.length-1]
                this.catBackup.splice(this.catBackup.length-1,1)
            },
            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]);
                }
            },
            changeSwitch:function () {
                this.$forceUpdate()
            },
            submitForm:function (e) {
                e.preventDefault()
                let fd = new FormData($('#adForm')[0])
                fd.append('city_id',this.finalCity)
                fd.append('category_id',this.finalSubCat)
                fd.append('offer',this.offer?1:0)
                for (let i in this.datas){
                    if(this.datas[i] ==true){
                        fd.append(`datas[${i}]`,1)
                    }else if(this.datas[i] ==false){
                        fd.append(`datas[${i}]`,0)
                    }else{
                        fd.append(`datas[${i}]`,this.datas[i])
                    }
                }
                axios.post('/advertisement/create',fd,{  headers: { 'Content-Type': 'multipart/form-data' }}).then(res=>{
                    if(this.selectedPriority!=='normal'){
                        axios.post('/financial/create_invoice',{title:'advertisement',adv_id:res.data.data.id,type:this.selectedPriority}).then(res=>{
                            window.location.replace("/pay_invoice?invoice="+res.data.data.id+"&gateway="+1);
                        })
                    }else{
                        window.location.replace("/myAds");
                    }
                })
            }
        },
    }
</script>
