<template>
    <form class="createAd" id="adForm" @submit="submitForm">
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <label>عنوان آگهی</label>
                    <input required name="title" type="text" class="form-control" placeholder="عنوان آگهی" />
                    <input name="expiration_time" type="hidden" :value="expiration_time" />
                    <input name="shop_id" type="hidden" :value="shop" />
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>قیمت (تومان)</label>
                    <input required 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">
                        <option value="normal">عادی</option>
                        <option value="immediate">فوری</option>
                        <option value="special">ویژه</option>
                        <option value="immediate-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">
                    <label>دسته بندی</label>
                    <v-select :options="categories" label="title" v-model="selectedCat" placeholder="انتخاب دسته بندی">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label>زیر دسته</label>
                    <v-select :options="subCategories" label="title" v-model="selectedSubCat" placeholder="انتخاب زیر دسته">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                    </v-select>
                </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">
            <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
        },
        props:['shop'],
        data() {
            return {
                states:[],
                selectedState:null,
                cities:[],
                selectedCity:null,
                finalCity:null,
                selectedCat:null,
                categories:[],
                subCategories:[],
                selectedSubCat:null,
                finalSubCat:null,
                imgInput:[],
                catItems:[],
                datas:{},
                expiration_time:null,
                offer:false,
            }

        },
        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
            },
            selectedCat: function (val) {
                axios.get('/advertisement/sub-category/'+val.id).then(res=>{
                    this.subCategories=res.data
                })
            },
            selectedSubCat: function (val) {
                this.finalSubCat=val.id
                axios.get('/advertisement/data-category/'+val.id).then(res=>{
                    for(let i = 0;i<res.data.limit;i++){
                        this.imgInput.push('/images/add_image.png')
                    }
                    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
                        }
                    })
                })
            },
        },
        mounted() {

        },
        methods:{
            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=>{
                    window.location.replace("/myAds");
                })
            }
        },
    }
</script>
