@extends('ecommerce.layouts.index')

@section('headers-scripts')
    @if(isset($metaData['en']['about_us']))
        <meta name="description" content="{{ $metaData['en']['about_us'] }}">
        <meta property="og:description" content="{{ $metaData['en']['about_us'] }}">
        <meta name="twitter:description" content="{{ $metaData['en']['about_us'] }}">
    @endif

    <meta property="og:site_name" content="{{ isset($metaData['en']['meta_title']) ? $metaData['en']['meta_title'] : $metaData['en']['title'] }}">
    <meta property="og:title" content="{{ isset($metaData['en']['meta_title']) ? $metaData['en']['meta_title'] : $metaData['en']['title'] }}">
    <meta name="description" content="{{ isset($metaData['en']['meta_description']) ? $metaData['en']['meta_description'] : '' }}">
    <meta property="og:type" content="website">
    <meta property="og:url" content="{{request()->getHost()}}"/>
    <meta property="og:image" content="{{global_asset("TenantsStorage/".$logo)}}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="628">
    <meta name="twitter:title" content="{{ isset($metaData['en']['meta_title']) ? $metaData['en']['meta_title'] : $metaData['en']['title'] }}">

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "WebSite",
            "url": "{{request()->getHost()}}",
            "name": "{{ $metaData['en']['title']}}",
            "potentialAction": {
                "@type": "SearchAction",
                "target": `{{request()->getHost()}}/search?q={search_term_string}`,
                "query-input": "required name=search_term_string"
            }
        }
    </script>

@endsection

@section('title')
    {{ $metaData['en']['title']}}
@endsection


@section('content')
    @php
        $homePage = true;
    @endphp
    <div class="navbar-mobile">
        @include('ecommerce.components.inner-header-mobile' , ['url' => $logo , 'categories' => $categories ])
    </div>
    <div class="homepage-container" id="homePage">
        <div class="header-container">
            <div class="logo-section">
                @include('ecommerce.components.tenant-info' , ['metaData' => $metaData , 'url' => $logo])
            </div>
            <div class="banner-section">
                <div class="navbar-desktop">
                    @include('ecommerce.components.inner-header' , ['url' => $logo , 'categories' => $categories ])
                </div>
                <div>
                    @include('ecommerce.components.banner-swiper')
                </div>
            </div>
        </div>
        <div id="swiperContainer" v-cloak>
            @include('ecommerce.components.categories-swiper')
            @include('ecommerce.components.swiperjs')
        </div>
    </div>
    @include('ecommerce.components.footer' , ['url' => $logo , 'categories' => $categories, 'footerScripts' => $footerScripts ] )
@endsection

@section('scripts')
<script defer>

    const swiperVueInstance = Vue.createApp({
        data() {
            return {
                categories : [],
                allCategories : [],
                CTAColor:localStorage.getItem('coloring') ? JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons : '#000' ,
                seeAllCTA:{
                'color' : JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons
                },
                language: localStorage.getItem('lang'),
                showSkeletonLoader: true,
                lastPage : 1,
                page: 2,
                swipers:[],
                infiniteLoader: false,
                isLoading: false,
                categoriesSettings: {},
                locale:{ } ,
                showCategorySkeleton : true,
                categoryCards : 7,
                val : 0 ,
                colors: {},
                productImgLoaded : false
            };
        },
        created(){
            this.getCategories()
            this.getTranslations()
            this.updateCategoryCards()
            window.addEventListener("resize", this.updateCategoryCards)
        },
        methods: {
            productLink(id){
                var path = window.location.href;
                var pathParts = path.split('/');
                var link = pathParts[0]+'//'+ pathParts[2]+'/product/'+ id
                return link
            },
            showImg(imgId , skeletonId){
                const img = document.getElementById(imgId)
                img.style.display = 'block'
                const loader = document.getElementById(skeletonId)
                loader.style.display = 'none'
            },
            updateCategoryCards(){
                const screenWidth = window.innerWidth

                if (screenWidth <= 549) {
                    this.categoryCards = 2;
                }
                else if(screenWidth <= 1046){
                    this.categoryCards = 4
                }
                else if (screenWidth <= 1244) {
                    this.categoryCards = 5;
                }
                else if (screenWidth >= 1286) {
                    this.categoryCards = 7;
                }
            },
            globalCurrencyConversion(price){
                if(localStorage.getItem('currency_exchange_rate')){
                    return price * localStorage.getItem('currency_exchange_rate');
                    // if (localStorage.getItem('label')){
                    //     this.globalSetCurrency(localStorage.getItem('label'))
                    // }else{
                    //     this.globalGetDefaultCurrency()
                    // }
                }else{
                    this.globalGetDefaultCurrency(price)
                }
            },
            globalGetDefaultCurrency(price){
            let lang = localStorage.getItem('lang');

            axios.get(`/api/default-currency/${lang}`).then( res => {
                localStorage.setItem('currency_name', res.data.data.currency_name)
                localStorage.setItem('currency_symbol', res.data.data.currency_symbol)
                localStorage.setItem('currency_exchange_rate', res.data.data.currency_exchange_rate)
                localStorage.setItem('currency_label', res.data.data.currency_label)
                return price * localStorage.getItem('currency_exchange_rate');
            })
            },
            getGlobalCurrencySymbol() {
                if (localStorage.getItem('currency_symbol')) {
                    return localStorage.getItem('currency_symbol')
                    // this.globalGetDefaultCurrency()
                }
            },
            getTranslations(){
                if(!localStorage.getItem('lang')) this.language = 'en'
                axios.get('/api/translation').then(res=>{
                    this.locale = this.language === 'en' ? res.data.data.en : res.data.data.ar
                    Object.assign(this.locale, this.localTranslationKeys())
                })
            },
            localTranslationKeys(){
                if(this.language === 'en' ) return { 'categories' : 'Categories' , 'see_more' : 'See more' }
                else return { 'categories' : 'تصنيفات' , 'see_more' : 'تصفح المزيد' }
            },
            getCategoryLink(name){
                var path = window.location.href;
                var pathParts = path.split('/');
                var link = pathParts[0]+'//'+ pathParts[2]+`/products?category_id=${name}`
                return link
            },
            getCategories() {
                this.showCategorySkeleton = true
                axios.get("/api/ecommerceCategories").then((res) => {
                    this.allCategories = res.data.data;
                    this.$nextTick(() => {
                        this.createCategorySwiperInstance()
                    });
                }).catch(err=>{
                    this.showCategorySkeleton = false
                    console.log('err' , err)
                })
            },
            getHomeProducts() {
            axios.get(`/api/homeProducts/en` + "?page=" + 1).then(res => {
                this.categories = res.data.data;
                this.$nextTick(() => {
                    this.createSwiperInstance()
                });
                this.lastPage = res.data.meta.last_page
                this.infiniteLoader = true
                this.showSkeletonLoader = false

            }).catch((err) => {
                this.showSkeletonLoader = false
                console.log('err' , err)
            });
            },
            createSwiperInstance(){
                const swiperInstance = new Swiper('.swiper-container-' + (this.categories.length - 1) , {
                    slidesPerView: 1,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    breakpoints: {
                        1200: {
                            slidesPerView: 5,
                            spaceBetween: 10,
                        },
                        1053: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        500: {
                            slidesPerView: 3,
                            spaceBetween: 10,
                        },
                        52: {
                            slidesPerView: 2,
                            spaceBetween: 10,
                        },
                    },
                })
                this.swipers.push(swiperInstance);
            },
            createCategorySwiperInstance(){
                const categoryInstance = new Swiper('.swiper-container-categories' , {
                    slidesPerView: 2,
                    spaceBetween: 10,
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                    breakpoints: {
                        1200: {
                            slidesPerView: 7,
                            spaceBetween: 10,
                        },
                        1053: {
                            slidesPerView: 6,
                            spaceBetween: 10,
                        },
                        500: {
                            slidesPerView: 4,
                            spaceBetween: 10,
                        },
                        447:{
                            slidesPerView: 3,
                            spaceBetween: 2,
                        },
                        278: {
                            slidesPerView: 2.5,
                            spaceBetween: 2,
                        },

                    },
                })
                this.swipers.push(categoryInstance);
                this.showCategorySkeleton = false
            },
            handleScroll(){
                const footerHeight = 281;
                const scrollThreshold = document.body.offsetHeight - window.innerHeight - footerHeight;
                if (
                        window.innerHeight + window.scrollY >= scrollThreshold
                        && !this.isLoading
                        && this.page <= this.lastPage
                    ) {
                        this.infiniteHandler();
                    }
            },
            infiniteHandler() {
                if (this.page <= this.lastPage) {
                    this.isLoading = true;
                    this.showSkeletonLoader = true
                    axios.get(`/api/homeProducts/en?page=${this.page}`)
                        .then(response => {
                            this.categories = this.categories.concat(response.data.data);
                            this.page++;
                            this.isLoading = false;
                            this.showSkeletonLoader = false
                            this.$nextTick(() => {
                                this.createSwiperInstance()
                            });
                        })
                        .catch(error => {
                            console.error('Error loading data:', error);
                            this.isLoading = false;
                        });
                }}
        },
        mounted() {
            window.addEventListener('scroll', this.handleScroll);
            this.getHomeProducts()
        },
        beforeDestroy() {
            if (this.swipers.length) {
                this.swipers.forEach(swiper=>{
                    swiper.destroy()
                })
            }
        },
    });
    swiperVueInstance.mount('#swiperContainer');

</script>

@endsection

@section('sub-styles')
    @parent
    <style>
        [v-cloak] {
            display: none;
        }
        .homepage-container{
            padding: 20px;
        }
        .header-container{
            display: flex;
            justify-content: space-between
        }
        .logo-section{
            width: 28%;
            border-radius: 12px;
            box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
            background-color: #ffffff;
            overflow: hidden;
        }
        .banner-section{
            width: 70%
        }
        .navbar-mobile{
            display: none
        }
        .cat-swiper{
            padding: 20px
        }
        /* swiper styles */

        .swiper-container {
        position: relative;
        }
        .sm-container-height{
        height: 270px;
        }
        .cat-position{
            top:90% !important;
        }
        .swiper-hidden {
        display: none;
        }
        .category-card{
            border-radius:19px;
            border:none;
            box-shadow: 0 .125rem .25rem rgba(0,0,21,.075);
        }
        .category-name{
        color:#2c2e42;
        font-size: 24px;
        font-weight: 600
        }
        @media screen and (max-width:700px){
        #swiperContainer{
            padding: 10px;
        }
        }
        @media screen and (max-width : 700px){
            .homepage-container{
                padding: 0
            }
            .card-img{
                margin: auto;
                border-radius:19px;
                /* aspect-ratio: unset; */
                max-width:350px;
                min-width :100px;
                min-height: 300px !important;
            }
            .img-container{
                max-height : 230px
            }
            .header-container{
                flex-direction: column;
                margin-top: 120px
            }
            .logo-section,.banner-section{
                width: 100%;
                box-shadow: none
            }
            .navbar-desktop{
                display: none
            }
            .navbar-mobile{
                display: block
            }
            .cat-swiper{
                padding: 20px
            }
        }
    </style>
@endsection