<script setup>
import { ref, onMounted, computed, reactive } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router";
const store = useStore();
const route = useRouter();
let setting = computed(() => store.state.settings)
let data = computed(() => store.state.mainPage)
let loader = computed(() => store.state.mainPageLoader)
let teamMember = ref([])
let teamLoader = ref(false)
const normal = async()=>{
    store.dispatch('mainPageLoader', true)
    teamLoader.value = true
    if(data.value.length == 0){
        await axios.post('/api/setting-get').then(response => {
            axios.post('/api/all-page/teams').then(response => {
                let d = response.data.data
                store.dispatch('mainPage', d)
                store.dispatch('mainPageLoader', false)
                axios.post('/api/team-page/team-member').then(response => {
                    teamLoader.value = false
                    teamMember.value = response.data.data
                })
            })
        })
    }else{
        axios.post('/api/all-page/teams').then(response => {
            let d = response.data.data
            store.dispatch('mainPage', d)
            store.dispatch('mainPageLoader', false)
            axios.post('/api/team-page/team-member').then(response => {
                teamLoader.value = false
                teamMember.value = response.data.data
            })
        })
    }

}
onMounted(async () => {
    window.scrollTo(0, 0);
    normal()
    store.dispatch('mobileMenuHideShow', false)  
    store.dispatch("SearchText", null)
    store.dispatch('rightSidebar', false)
    store.dispatch('LeftCategorySidebar',false)
    store.dispatch('CartCompare','0px')
    store.dispatch('HeaderFooterOff',true)
})
</script>
<template>
<main class="main">
    <div class="page-content">
        <div class="container-fluid">
            <div class="top-section">
                <div class="page-background-image">
                    <div class="page-img" :style="{'background-image': 'url(' + setting.frontend_img_url+'/storage/image/webPageImage/' + data.image+')'}" v-if="setting.frontend_img_url"></div>
                    <div class="page-title">Team</div>
                    <div class="link">
                        <ul>
                            <li><router-link to="/about-us">About us</router-link></li>
                            <li><router-link to="/contact-us">Contact us</router-link></li>
                            <li><router-link to="/faq">FAQ</router-link></li>
                            <li><router-link to="/privacy-policy">Privacy Policy</router-link></li>
                            <li><router-link to="/team">Team</router-link></li>
                            <li><router-link to="/terms-and-conditions">Terms & Condition</router-link></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="main-section mt-5 mb-10" v-if="!loader">
                <div v-html="data.text"></div>
            </div>
            <!-- Loader -->
            <div class="loader mt-5" style="height: 100vh" v-if="loader">
                <svg class="pl" viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <linearGradient id="pl-grad1" x1="1" y1="0.5" x2="0" y2="0.5">
                            <stop offset="0%" stop-color="hsl(313,90%,55%)" />
                            <stop offset="100%" stop-color="hsl(223,90%,55%)" />
                        </linearGradient>
                        <linearGradient id="pl-grad2" x1="0" y1="0" x2="0" y2="1">
                            <stop offset="0%" stop-color="hsl(313,90%,55%)" />
                            <stop offset="100%" stop-color="hsl(223,90%,55%)" />
                        </linearGradient>
                    </defs>
                    <circle class="pl__ring" cx="100" cy="100" r="82" fill="none" stroke="url(#pl-grad1)" stroke-width="36" stroke-dasharray="0 257 1 257" stroke-dashoffset="0.01" stroke-linecap="round" transform="rotate(-90,100,100)" />
                    <line class="pl__ball" stroke="url(#pl-grad2)" x1="100" y1="18" x2="100.01" y2="182" stroke-width="36" stroke-dasharray="1 165" stroke-linecap="round" />
                </svg>
            </div>
        </div><!-- End .container -->
        <div class="bg-light-2 pt-6 pb-7 mb-6">
            <div class="container-fluid">
                <h2 class="title text-center mb-4">Meet Our Team</h2><!-- End .title text-center mb-2 -->
                <div class="row" v-if="teamLoader">
                    <div class="col-sm-6 col-lg-3 loader-team">
                        <div class="member member-2 text-center">
                            <figure class="member-media">
                            </figure><!-- End .member-media -->
                            <div class="member-content">
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                            </div><!-- End .member-content -->
                        </div><!-- End .member -->
                    </div><!-- End .col-lg-3 -->
                    <div class="col-sm-6 col-lg-3 loader-team">
                        <div class="member member-2 text-center">
                            <figure class="member-media">
                            </figure><!-- End .member-media -->
                            <div class="member-content">
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                            </div><!-- End .member-content -->
                        </div><!-- End .member -->
                    </div><!-- End .col-lg-3 -->
                    <div class="col-sm-6 col-lg-3 loader-team">
                        <div class="member member-2 text-center">
                            <figure class="member-media">
                            </figure><!-- End .member-media -->
                            <div class="member-content">
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                            </div><!-- End .member-content -->
                        </div><!-- End .member -->
                    </div><!-- End .col-lg-3 -->
                    <div class="col-sm-6 col-lg-3 loader-team">
                        <div class="member member-2 text-center">
                            <figure class="member-media">
                            </figure><!-- End .member-media -->
                            <div class="member-content">
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                                <h3 class="member-title"><span class="first"></span></h3><!-- End .member-title -->
                            </div><!-- End .member-content -->
                        </div><!-- End .member -->
                    </div><!-- End .col-lg-3 -->
                </div><!-- End .row -->
                <div class="row" v-if="!teamLoader">
                    <div class="col-sm-6 col-lg-3" v-for="team in teamMember">
                        <div class="member member-2 text-center">
                            <figure class="member-media">
                                <img :src="setting.frontend_img_url+'/storage/image/profile/'+team.image" :alt="team.name" v-if="team.image">
                                <img :src="'/image/default.jpg'" :alt="team.name" v-if="!team.image">
                            </figure><!-- End .member-media -->
                            <div class="member-content">
                                <h3 class="member-title">{{team.name}}<span>{{team.designation}}</span></h3><!-- End .member-title -->
                            </div><!-- End .member-content -->
                        </div><!-- End .member -->
                    </div><!-- End .col-lg-3 -->
                </div><!-- End .row -->
            </div><!-- End .container -->
        </div><!-- End .bg-light-2 pt-6 pb-6 -->
    </div><!-- End .page-content -->
</main><!-- End .main -->
</template>
<style scoped>
.member-media img{
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border:3px solid #ccc;
}
.member-media{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 30px;
}
.loader-team .member-media{
    width: 100%;
    height: 200px;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s teamLoader linear infinite;
}
@keyframes teamLoader {
    to {
        background-position-x: -150%;
    }
}
.loader-team .member-title{
    display: flex;
    justify-content: center;
}
.member-title .first{
    height: 25px;
    width: 70%;
    background: #e9edf1;
    background: linear-gradient(90deg, #e9edf1 7%, #eff2f4 12%, #e9edf1 100%);
    background-size: 200% 100%;
    animation: 1.5s membertitleFirst linear infinite;
}
@keyframes membertitleFirst {
    to {
        background-position-x: -150%;
    }
}
img{
    width: 100%
}
.loader{
    width: 100%;
    display:flex;
    justify-content: center;
    margin-bottom: 100px;
}
.router-link-active.router-link-exact-active{
    border-bottom: 2px solid v-bind(setting.color);
}
.page-img{
    background-size: cover; 
    background-position: center center; 
    background-repeat: no-repeat;
}
.page-content{
    padding-bottom:0;
}
.page-background-image{
    position: relative;
}
.page-background-image .page-img {
    min-height: 350px;
    transition: .5s ease-in-out;
    background-color: #ccc;
}
.page-background-image .page-title {
    font-size: 28px;
    font-weight: 700;
    position: absolute;
    text-align: center;
    color: #fff;
    top: 40%;
    left: 0;
    right: 0;
    margin: auto;
}
.link{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 25px;
}
ul{
    overflow: auto;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
li{
    color: #fff;
    display: inline-block;
    font-size: 16px;
    margin-left: 20px;
    line-height: 22px;
    opacity: .9;
    list-style: disc;
    color: red;
}
li a{
    text-decoration: none;
    color: #fff;
    font-weight: 600;
}

.pl {
	display: block;
	width: 6.25em;
	height: 6.25em;
}
.pl__ring, .pl__ball {
	animation: ring 2s ease-out infinite;
}
.pl__ball {
	animation-name: ball;
}

/* Dark theme  */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
}

/* Animation */
@keyframes ring {
	from {
		stroke-dasharray: 0 257 0 0 1 0 0 258;
	}
	25% {
		stroke-dasharray: 0 0 0 0 257 0 258 0;
	}
	50%, to {
		stroke-dasharray: 0 0 0 0 0 515 0 0;
	}
}
@keyframes ball {
	from, 50% {
		animation-timing-function: ease-in;
		stroke-dashoffset: 1;
	}
	64% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -109;
	}
	78% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -145;
	}
	92% {
		animation-timing-function: ease-in;
		stroke-dashoffset: -157;
	}
	57%, 71%, 85%, 99%, to {
		animation-timing-function: ease-out;
		stroke-dashoffset: -163;
	}
}
</style>