<template>
    <form id="shopForm" @submit="createShop" class="row">
        <div class="col-md-12 text-center margin-bottom-20">
            <label>تصویر لوگو</label>
            <div class="photo-upload text-center" v-for="(input , index) in imgInput">
                <label :for="'image'+index+1">
                    <input name="logo" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index+1" @change="imgChange(index,$event.target)"/>
                    <img src="/uploads/img/karshenas.png" class="width100" />
                    <div class="bg pic-show" :id="'bg'+index" :style="{backgroundImage:'url(\''+input+'\')' }"></div>
                </label>
            </div>
        </div>
        <div class="col-md-12 text-center margin-bottom-20">
            <label>تصویر کاور فروشگاه</label>
            <div class="photo-upload text-center" v-for="(input , index) in imgCover">
                <label :for="'image'+index+2" style="width:100%">
                    <input name="cover" type="file" class="d-none" v-bind="input.file"  accept="image/*" :id="'image'+index+2" @change="coverChange(index,$event.target)"/>
                    <div style="width: 100%;height: 200px"></div>
                    <div class="bg pic-show" :id="'bg'+index" :style="{backgroundImage:'url(\''+input+'\')' }"></div>
                </label>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>نام فروشگاه</label>
                <input name="title" type="text" class="form-control" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>شماره موبایل</label>
                <input name="mobile" type="number" class="form-control" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>شماره ثابت فروشگاه</label>
                <input name="tell" type="number" class="form-control" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>شماره پروانه کسب</label>
                <input name="business_licence" type="text" class="form-control" />
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>نوع ملک</label>
                <select class="form-control" name="owner">
                    <option value="1">ملک شخصی</option>
                    <option value="0">ملک اجاره ای</option>
                </select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>انتخاب استان</label>
                <v-select :options="states" label="title" v-model="selectedState">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                </v-select>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <label>انتخاب شهر</label>
                <v-select :options="cities" label="title" v-model="selectedCity">
                        <span slot="no-options">
                            نتیجه ای یافت نشد
                        </span>
                </v-select>
            </div>
        </div>
        <div class="col-md-12">
            <div class="catList">
                <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>
        </div>
        <div class="col-md-12">
            <div class="form-group">
                <label>آدرس</label>
                <textarea name="address" class="form-control"></textarea>
            </div>
        </div>
        <div class="col-md-12 text-left">
            <button class="btn fabrikaBtn" type="submit">ایجاد فروشگاه</button>
        </div>
    </form>
</template>

<script>
    import vSelect from 'vue-select'
    export default {
        components: {
            vSelect
        },
        data() {
            return {
                imgInput:[
                    '/uploads/img/karshenas.png'
                ],
                imgCover:[
                    '/images/back_shoplist.png'
                ],
                states:[],
                cities:[],
                selectedState:null,
                selectedCity:null,
                finalCity:null,
                categories:[],
                catSelected:[],
            }

        },
        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(){
            axios.get('/advertisement/category/list').then(res=>{
                this.categories = res.data.data
            })
            axios.get('/advertisement/data-states').then(res=>{
                this.states = res.data
            })
        },
        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]);
                }
            },
            coverChange:function (pic,input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();
                    reader.onload = (e)=> {
                        this.imgCover[pic]=e.target.result
                        this.$forceUpdate()
                    }
                    reader.readAsDataURL(input.files[0]);
                }
            },
            pushToExpert:function (id) {
                if(this.catSelected.includes(id)){
                    let index = this.catSelected.indexOf(id)
                    this.catSelected.splice(index,1)
                    this.$forceUpdate()
                }else{
                    this.catSelected.push(id)
                    this.$forceUpdate()
                }
            },
            createShop:function (e) {
                e.preventDefault()
                let fd = new FormData($('#shopForm')[0])
                if(this.finalCity){
                    fd.append('city_id',this.finalCity)
                }
                for (let i in this.catSelected){
                    fd.append(`category_id[${i}]`,this.catSelected[i])
                }
                axios.post('/shop/create',fd,{  headers: { 'Content-Type': 'multipart/form-data' }}).then(res=>{
                    location.reload();
                })
            }
        }
    }
</script>

<style scoped>

</style>