<template>
    <VueSlickCarousel 
        :autoplay="true"
        :autoplaySpeed="3000"
        :arrows="true" 
        :dots="true"
        :infinite="true"
        :slidesToShow="1"
        :paginationEnabled="false"
        :rtl="dir"
    >
        <div 
            v-for="(item, index) in banners"
            v-bind:item="item"
            v-bind:index="index"
            v-bind:key="index"
            :class="'lgx-item-common'"
        >
            <section>
                <div class="container-fluid p-0">
                    <div class="cover-img-bg" :style="{ backgroundImage: `url(${getImageUrl(item.image)})` }">
                        <a v-if="item.button_url != null" :href="item.button_url">
                            <img class="cover-img prevent_draggable" :src="getImageUrl(item.image)" :alt="item.title" />
                        </a>
                        
                        <img v-else class="cover-img prevent_draggable" :src="getImageUrl(item.image)" :alt="item.title" />

                        <div class="banner-slider-form" v-if="demo_mode">
                            <h1 class="text-white mb-0 fw-bold display-5">Eventmie Pro 3.0</h1>
                            <p class="fw-bold text-white">Smarter, Faster, Stronger Event Management. Perfected by AI</p>
                            <div class="d-flex mt-2">
                                <a class="btn btn-dark border border-1" target="_blank" href="https://eventmie-pro-docs.classiebit.com"><i class="fas fa-book"></i> Get Started</a>&nbsp;&nbsp;
                            </div>
                            <div class="d-flex mt-2 d-none d-sm-block">
                                <a class="btn btn-info text-white border border-1" target="_blank" href="https://eventmie-pro-docs.classiebit.com/docs/3.0/changelog/changes"><i class="fas fa-wand-magic-sparkles"></i> New in v3.0</a>
                            </div>
                        </div>
                        
                    </div>
                </div>
            </section>
        </div>
    </VueSlickCarousel>
</template>

<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
// optional style for arrows & dots
import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css'

Vue.prototype.base_url = window.base_url;

import mixinsFilters from '../../mixins';

export default {

    mixins:[
        mixinsFilters
    ],


    components: {
        VueSlickCarousel
    },
    props: [
        'banners',
        'is_logged',
        'is_customer',
        'is_organiser',
        'is_admin',
        'is_multi_vendor',
        'demo_mode',
        'check_session',
        's_host'
        
    ],

    
    data() {
        return {
            check       : 0,
            route       : route,
            dir         : false,

        }
    },    

    methods: {
        // return route with event slug
        getRoute(name){
            return route(name);
        },

        verifyD(){
            this.check = this.check_session ? 1 : 0;
            
            if(this.check == 0)
            {
                axios.post('https://cblicense.classiebit.com/verifyd',{
                    domain : window.location.hostname,
                    s_host : this.s_host
                })
                .then(res => {
                    if(typeof res.data.status !== 'undefined' && res.data.status != 0)
                        this.checkSession();
                    else
                        window.location.href = base_url+"/404";
                    
                })
                .catch(error => {
                    
                });
            }
        },
        
        // check Session
        checkSession(){
            axios.post(route('eventmie.check_session'))
            .then(res => {
              
            }).catch(error => {
                
            });
        },

        getDirection(){
            document.documentElement.dir == 'rtl' ? this.dir = true : this.dir = false;
        },
        


    },

    mounted() {
        this.verifyD();       
        this.getDirection();
        this.hideSkeleton();
        console.log( document.documentElement.dir);
    }
}
</script>