<template>
    <div>
        <section v-if="!loader">
            <div class="modal fade expert-modal" id="expertModal" tabindex="-1" role="dialog" aria-labelledby="expertModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">درخواست کارشناس</h5>
                        </div>
                        <div class="modal-body">
                            <form action="/expert" method="post" class="expertParent" v-for="expert in experts">
                                <img :src="expert.user.attachments?'/files?uid='+expert.user.attachments.uid+'&width=100&height=100':'/images/default-image.png'" />
                                <p>{{expert.user.fname}} {{expert.user.lname}}</p>
                                <input type="hidden" name="expert_id" :value="expert.id" />
                                <input type="hidden" name="ad_id" :value="ad.id" />
                                <div>
                                    <button type="submit">درخواست</button>
                                </div>
                            </form>
                            <div class="text-center margin-top-10" v-if="!experts.length"><p>کارشناسی برای این آگهی وجود ندارد</p></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">خروج</button>
                        </div>
                    </div>
                </div>
            </div>
            <section>
                <div class="breadcrumb_style_2">
                    <div class="container">
                        <div class="back_bread">
                            <ul>
                                <li><a href="/">صفحه اصلی</a></li>
                                <li><a href="/list">لیست آگهی ها</a></li>
                                <li><a href="javascript:;">{{ad.title}}</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <div class="container">
                <div class="single_style">
                    <div class="padding-right-10 padding-left-10">
                        <div class="row">
                            <div class="col-lg-3 col-md-4 padding-right-5 padding-left-5">
                                <div class="back_right">
                                    <div class="name_ad">
                                        <span>مشخصات آگهی</span>
                                        <div class="dashes">
                                            <img src="/uploads/img/dashes_3.png">
                                        </div>
                                        <div class="table_2">
                                            <div>
                                                <span>نوع آگهی:</span>
                                                <span class="check">{{ad.priority=='immediate'?'فوری':ad.priority=='special'?'ویزه':ad.priority=='immediate-special'?'ویژه و فوری':'عادی'}}</span>
                                            </div>
                                            <div>
                                                <span>آگهی دهنده:</span>
                                                <span>{{ad.user.fname}} {{ad.user.lname}}</span>
                                            </div>
                                            <div>
                                                <span>تاریخ آگهی:</span>
                                                <span>{{ad.created_at|persian_date}}</span>
                                            </div>
                                            <div>
                                                <span>استان:</span>
                                                <span>{{state}}</span>
                                            </div>
                                            <div>
                                                <span>شهر:</span>
                                                <span>{{city}}</span>
                                            </div>
                                            <div>
                                                <span>تماس همراه:</span>
                                                <span style="cursor:pointer;direction: ltr" @click="()=>mobile=ad.user.mobile">{{mobile}}</span>
                                            </div>
                                            <!--<div>-->
                                            <!--<span>تماس ثابت:</span>-->
                                            <!--<span>02193... ***</span>-->
                                            <!--</div>-->
                                            <div>
                                                <span>ایمیل:</span>
                                                <span style="cursor:pointer;direction: ltr" @click="()=>email=ad.user.email">{{email}}</span>
                                            </div>
                                        </div>

                                        <div class="buttons">
                                            <form action="/editAd" method="post" v-if="user && user.id == ad.user.id"><input type="hidden" name="id" :value="ad.id" /><button type="submit">ویرایش آگهی</button></form>
                                            <button @click="showMessage" v-if="user">ارسال پیام به آگهی دهنده</button>
                                            <div id="chat-parent" style="display: none" v-if="user">
                                                <textarea class="form-control" placeholder="پیام" v-model="message"></textarea>
                                                <button class="yellow" @click="sendMessage">ارسال</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <a href="#expertModal" data-toggle="modal" class="order" v-if="user" >
                                    <i class="o-icon o-single-01"></i>
                                    <div class="d-flex flex-column">
                                        <span>درخواست کارشناس</span>
                                        <strong>ویژه کاربران عضو وبسایت</strong>
                                    </div>
                                </a>
                            </div>
                            <div class="col-lg-9 col-md-8 mt-4 mt-md-0 padding-right-5 padding-left-5">
                                <div class="back_left">
                                    <div class="part_1">
                                        <div class="row">
                                            <div class="col-lg-6">
                                                <div class="text">
                                                    <span>{{ad.title}}</span>
                                                    <strong>دسته بندی: {{ad.category.title}}</strong>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="icon">
                                                    <!--<i class="o-icon o-print"></i>-->
                                                    <!--<i class="o-icon o-scale"></i>-->
                                                    <i class="o-icon o-bookmark-2" @click="archive" v-if="user && !ad.liked"></i>
                                                    <i class="fas fa-bookmark" v-if="ad.liked"></i>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="dashes">
                                            <img src="/uploads/img/dashes_2.png">
                                        </div>

                                        <div class="details">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="details_text">
                                                        <span>مشخصات فنی:</span>
                                                        <div v-for="detail in ad.category.items.filter((tec)=>{return tec.technical==1})">
                                                            <span>{{detail.title}}:</span>
                                                            <span>{{JSON.parse(ad.data)[detail.id]?detail.type=='switch'?JSON.parse(ad.data)[detail.id]==1?'بله':'خیر':JSON.parse(ad.data)[detail.id]:''}}</span>
                                                        </div>
                                                        <span class="margin-top-30">شرایط مالی:</span>
                                                        <div v-for="detail in ad.category.items.filter((tec)=>{return tec.technical==0})">
                                                            <span>{{detail.title}}:</span>
                                                            <span>{{JSON.parse(ad.data)[detail.id]?detail.type=='switch'?JSON.parse(ad.data)[detail.id]==1?'بله':'خیر':JSON.parse(ad.data)[detail.id]:''}}</span>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-lg-6 d-flex flex-column justify-content-between">
                                                    <div class="gallery_slide">
                                                        <swiper class="gallery-top" ref="swiperTop" :options="swiperOptionTop">
                                                            <swiper-slide v-for="img in ad.attachmentsImage" :key="img.id">
                                                                <img style="width: 100%" :src="'/files?uid='+img.uid+'&width=370&height=325'" />
                                                            </swiper-slide>
                                                        </swiper>
                                                        <swiper class="gallery-thumbs margin-top-10" :options="swiperOptionThumbs" ref="swiperThumbs" style="width: 100%">
                                                            <swiper-slide v-for="img in ad.attachmentsImage" :key="img.id">
                                                                <img style="width: 100%" :src="'/files?uid='+img.uid+'&width=117&height=78'" />
                                                            </swiper-slide>
                                                        </swiper>
                                                        <div>
                                                            <span v-if="ad.price">{{ad.price|priceFormat}} تومان</span>
                                                            <span v-else>تماس بگیرید</span>
                                                            <div class="icons">
                                                                <span>{{ad.attachmentsImage.length}} <i class="o-icon o-camera-18"></i></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="share">
                                                        <span>اشتراک:</span>
                                                        <div>
                                                            <a :href="'https://plus.google.com/share?url='+url"><i class="g-icon g-logo-google-plus"></i></a>
                                                            <a :href="'https://twitter.com/home?status='+ad.description"><i class="g-icon g-logo-twitter"></i></a>
                                                            <a :href="'https://www.facebook.com/sharer/sharer.php?u='+url"><i class="g-icon g-logo-facebook"></i></a>
                                                            <a :href="'https://telegram.me/share/url?url='+ad.title+'-'+url"><i class="g-icon g-send"></i></a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="part_2">
                                        <h3>توضیحات:</h3>
                                        <p>{{ad.description}}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="main-loader" v-else>
            <img src="/images/loading.gif" />
        </div>
    </div>

</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    export default {
        components: {
            swiper,
            swiperSlide,
        },
        props:['id'],
        data() {
            return {
                swiperOptionTop: {
                    spaceBetween: 10,
                    loop: true,
                    loopedSlides: 3
                },
                swiperOptionThumbs: {
                    spaceBetween: 10,
                    slidesPerView: 3,
                    slideToClickedSlide: true,
                    touchRatio: 0.2,
                    loopedSlides: 3,
                    loop: true,
                    breakpoints: {
                        575: {
                            slidesPerView: 3,
                        },
                        420: {
                            slidesPerView: 2,
                        },
                    },
                },
                ad:{},
                mobile:null,
                city:null,
                state:null,
                email:null,
                loader:true,
                experts:[],
                user:null,
                showM:false,
                message:'',
                url:''
            }

        },
        beforeMount(){
            this.url = window.location.href
            axios.get('/advertisement/single?id='+this.id).then(res=>{
                this.ad=res.data.data
                this.mobile=res.data.data.user.mobile.substring(0,5)+'***'
                this.email=res.data.data.user.email.substring(0,5)+'***'
                axios.get('/advertisement/city?id='+res.data.data.city_id).then(res2=>{
                    this.state=res2.data.state.title
                    this.city=res2.data.title
                    this.loader=false
                })
                axios.post('/expert/list-experts',{category_id:res.data.data.category_id,city_id:res.data.data.city_id}).then(res3=>{
                    this.experts = res3.data.data
                })
                axios.get('/core/user').then(res4=>{
                    this.user=res4.data.data
                })
            })
        },
        watch:{
            loader:function () {
                this.$nextTick(() => {
                    const swiperTop = this.$refs.swiperTop.swiper
                    const swiperThumbs = this.$refs.swiperThumbs.swiper
                    swiperTop.controller.control = swiperThumbs
                    swiperThumbs.controller.control = swiperTop
                })
            }
        },
        methods:{
            archive:function () {
                axios.post('/advertisement/like',{id:this.ad.id}).then(res=>{
                    this.ad.liked = !this.ad.liked
                })
            },
            showMessage:function () {
                if(!this.showM){
                    $('#chat-parent').slideDown()
                    this.showM=true
                }else{
                    $('#chat-parent').slideUp()
                    this.showM=false
                }
            },
            sendMessage:function () {
                axios.post('/message/store',{to:this.ad.user.id,text:this.message}).then(res=>{
                    $('#chat-parent').slideUp()
                    this.showM=false
                    $.toast({
                        text : 'پیام شما با موفقیت ثبت شد',
                        showHideTransition : 'slide',
                        bgColor : '#5fc8b0',
                        textColor : '#f6f6f6',
                        allowToastClose : false,
                        hideAfter : 5000,
                        stack : 5,
                        loader:false,
                        textAlign : 'right',
                        position : 'top-center'
                    })
                })
            }
        },
    }
</script>
