@extends('ecommerce.layouts.index')

@section('headers-scripts')
    
    @if(isset($category) && !empty($category))
        <meta name="description" content="{{ $category }}">
        <meta property="og:description" content="{{ $category }}">
        <meta name="twitter:description" content="{{ $category }}">
    @elseif(isset($metaData['en']['about_us']) && !empty($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

    @forelse($headScripts as $headScript)
        {!! $headScript->script !!}
    @empty

    @endforelse
    <meta property="og:site_name" content="{{ $metaData['en']['title']}}">
    <meta property="og:title" content="{{ ucfirst(request('category_id')) }}">
    <meta property="og:type" content="website">
    <meta property="og:image" content="{{global_asset("TenantsStorage/".$url)}}">
    <meta property="og:image:secure_url" content="{{global_asset("TenantsStorage/".$url)}}">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="628">
    <meta name="twitter:title" content="{{ ucfirst(request('category_id')) }}">

    <script type="application/ld+json">
        {
            "@context": "http://schema.org",
            "@type": "ItemList",
            "itemListElement": [
        @foreach ($products as $index => $product)
            {
                "@type": "ListItem",
                "position": {{ $index + 1 }},
                    "item": {
                        "@type": "Product",
                        "name": "{{ $product['name'] }}",
                        "description": "{{ $product['meta_data'] }}",
                        "image": "{{ isset(json_decode($product['productImages'])[0])? json_decode($product['productImages'][0]['images'])[0]  : ''}}",
                        "offers": {
                            "@type": "Offer",
                            "price": "{{ $product['price'] }}",
                            "priceCurrency": "EGP"
                        }
                    }
                }
            @if (!$loop->last)
                ,
            @endif
        @endforeach
        ],
        "potentialAction": {
            "@type": "SearchAction",
            "target": "{{ request()->getHost() }}/search?q={search_term_string}",
                "query-input": "required name=search_term_string"
            }
        }
    </script>

@endsection

@section('title')
    {{ ucfirst(request('category_id')) }} -  {{ $metaData['en']['title']}}
@endsection

<script>
    console.log('products', @json($products))
</script>


@section('content')
    <div class="nav-desktop">
        @include('ecommerce.components.inner-header')
    </div>
    <div class="nav-mobile">
        @include('ecommerce.components.inner-header-mobile')
    </div>

    <div id="product-list">
        <div id="filter-sidebar">
            <div class="px-3">
                <div class="filter-header">
                    <div>
                        <h5 class="filter">@{{locale['filter']}}</h5>
                    </div>
                    <div @click="closeNav('filter-sidebar')">
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M18 6L6 18" stroke="#2C2E42" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                            <path d="M6 6L18 18" stroke="#2C2E42" stroke-width="2" stroke-linecap="round"
                                  stroke-linejoin="round"/>
                        </svg>
                    </div>
                </div>
                @include('ecommerce.components.productlist-sidebar')
            </div>
        </div>
        <div class="side-bar">
            @include('ecommerce.components.productlist-sidebar')
        </div>
        <div class="products-container">
            <div class="filter-sort-container" v-cloak>
                <div class=" sort-by-container ">
                    <span class="px-2 products-length sort-by">@{{ defaultProducts ? products.length : (filterByPrice ? productsByPrice.length : sortedItems.length) }} @{{locale['item']}}</span>
                    <span class="sort-by mx-2">@{{locale['sort_by']}}</span>
                    <span class="aselect" :data-value="value" :data-list="list">
                        <div class="selector" @click=" visible = !visible">
                            <div class="label">
                                <span>
                                    @{{ value }}
                                </span>
                            </div>
                            <div class="arrow " :class="[ visible ? 'expanded' : ''] ">
                                <svg class="arrow-icon" width="10" height="6" viewBox="0 0 10 6" fill="none"
                                     xmlns="http://www.w3.org/2000/svg">
                                    <path d="M1 1L5 5L9 1" stroke="#2C2E42" stroke-linecap="round"
                                          stroke-linejoin="round"/>
                                </svg>
                            </div>
                            <div :class="{ hidden : !visible, visible }">
                                <ul>
                                    <li :class="{ current : item === value }" v-for="item in list" @click="select(item)"
                                        :key="item">@{{ item }}</li>
                                </ul>
                            </div>
                        </div>
                    </span>
                </div>
                <div class="mx-2 mobile-filter" @click="openNav('filter-sidebar')">
                    @{{locale['filter']}}
                    <svg class="filter-icon" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.6666 2H1.33325L6.66659 8.30667V12.6667L9.33325 14V8.30667L14.6666 2Z"
                              stroke="#333333" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
            <div class="products-card" v-if="productsLoader">
                @for ($i = 0; $i < 6; $i++)
                    <div class="product mt-3">
                        @include('ecommerce.components.skeleton-card')
                    </div>
                @endfor
            </div>
            <div class="products-card" v-if="defaultProducts">
                <div class="product mt-3" v-for="(product,index) in products" :key="product.id">
                    @include('ecommerce.components.product-card')
                </div>
            </div>
            <div class="products-card" v-else-if="filterByPrice">
                <div class="product mt-3" v-for="(product,index) in productsByPrice" :key="product.id">
                    @include('ecommerce.components.product-card')
                </div>
            </div>
            <div class="products-card" v-else-if="sortByFilter">
                <div class="product mt-3" v-for="(product,index) in sortedItems" :key="product.id">
                    @include('ecommerce.components.product-card')
                </div>
            </div>
            <div class="d-flex justify-content-center mt-2" v-if="lastPage >= page" v-cloak>
                <button class="load-more-btn"
                        @click="getProducts"
                        :style="{'color' : CTAColor , 'background-color' :'transparent' , 'border' :'1px solid'+CTAColor}">
                    @{{locale['load_more']}}
                </button>
            </div>
        </div>
    </div>
    @include('ecommerce.components.footer', ['footerScripts' => $footerScripts])
@endsection

@section('scripts')
    <script>
        const productList = Vue.createApp({
            data() {
                return {
                    message: "Hello product list",
                    product: {},
                    products: [],
                    value: 'Recently Added',
                    visible: false,
                    CTAColor: localStorage.getItem('coloring') ? JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons : '#000',
                    language: localStorage.getItem('lang'),
                    selectedCategory: null,
                    products: @json($products->items()),
                    page: 2,
                    perPage: 9,
                    pages: 10,
                    lastPage: @json($products->lastPage()),
                    defaultProducts: true,
                    filterByPrice: false,
                    sortByFilter: false,
                    productsByPrice: [],
                    productsBySortBy: [],
                    start: 0,
                    end: 1000,
                    range: 150,
                    sortBy: null,
                    locale: {},
                    sidebarIsLoading: true,
                    productsLoader: true
                };
            },
            mounted() {
                this.productsLoader = false
            },
            created() {
                this.fetchActiveCategory()
                this.getTranslations()
                if (this.language == 'en') {
                    this.value = 'Recently Added'
                } else {
                    this.value = 'المضاف حديثا'
                }
                this.createViewContentEvent()
            },
            computed: {
                list() {
                    if (this.language == 'en') {
                        return [' Recently Added', 'Price high to low', 'Price low to high']
                    } else {
                        return [' المضاف حديثا', 'من الأعلي سعرا', 'من الأقل سعرا']
                    }
                },
                sortedItems() {
                    if (this.sortBy === 'asc') {
                        return this.products.sort((prev, curr) => {
                            if (prev.discount && curr.discount) {
                                if (prev.discount.is_valid && curr.discount.is_valid) {
                                    return parseFloat(prev.discount.amount) - parseFloat(curr.discount.amount);
                                } else if (prev.discount.is_valid && !curr.discount.is_valid) {
                                    return parseFloat(prev.discount.amount) - parseFloat(curr.price)
                                } else if (!prev.discount.is_valid && curr.discount.is_valid) {
                                    return parseFloat(prev.price) - parseFloat(curr.discount.amount)
                                }
                            } else {
                                return parseFloat(prev.price) - parseFloat(curr.price)
                            }
                        })
                    } else if (this.sortBy === 'dsc') {
                        return this.products.sort((prev, curr) => {
                            if (prev.discount && curr.discount) {
                                if (prev.discount.is_valid && curr.discount.is_valid) {
                                    return parseFloat(curr.discount.amount) - parseFloat(prev.discount.amount);
                                } else if (prev.discount.is_valid && !curr.discount.is_valid) {
                                    return parseFloat(curr.price) - parseFloat(prev.discount.amount)
                                } else if (!prev.discount.is_valid && curr.discount.is_valid) {
                                    return parseFloat(curr.discount.amount) - parseFloat(prev.price)
                                }
                            } else {
                                return parseFloat(curr.price) - parseFloat(prev.price)
                            }
                        })
                    }
                },
            },
            methods: {
                filterProducts(p) {
                    if (p.discount && p.discount.is_valid) {
                        return parseFloat(p.discount.amount)
                    } else {
                        return parseFloat(p.price)
                    }
                },
                createViewContentEvent(){
                    if (typeof fbq === 'function') {
                        fbq('track', 'ViewContent', {
                            content_ids: ['product_list_page'],
                            content_name: 'Product List',
                            content_type: 'product_group'
                        });
                    } 
                },
                showImg(imgId, skeletonId) {
                    const img = document.getElementById(imgId)
                    img.style.display = 'block'
                    const loader = document.getElementById(skeletonId)
                    loader.style.display = 'none'
                },
                filterProductsByPrice() {
                    this.filterByPrice = true
                    this.defaultProducts = false
                    this.sortByFilter = false

                    this.productsByPrice = this.products.filter(product => (this.filterProducts(product) >= this.start && this.filterProducts(product) <= this.end) ? product : '')
                },
                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())
                        this.sidebarIsLoading = false
                    })
                },
                localTranslationKeys() {
                    if (this.language === 'en') return {
                        'sort_by': 'Sort by',
                        'item': 'Item',
                        'apply': 'Apply',
                        'price_range': 'Price range',
                        'load_more': "Load more",
                        'filter': 'Filter',
                        'categories': 'Categories'
                    }
                    else return {
                        'sort_by': 'ترتيب بـ',
                        'item': 'قطعة',
                        'apply': 'تنفيذ',
                        'price_range': 'نطاق الاسعار',
                        'load_more': "تحميل المزيد",
                        'filter': 'فلتر',
                        'categories': 'التصنيفات'
                    }
                },
                getProducts() {
                    const params = {};
                    const urlParams = new URLSearchParams(window.location.search)
                    params.category_id = urlParams.get('category_id')
                    axios.get(
                        `/api/shopping-products?page=` +
                        this.page +
                        "&perPage=" +
                        this.perPage,
                        {
                            params: params,
                        }
                    ).then((res) => {
                        let response = res.data.data
                        response.forEach(product => {
                            this.products.push(product)
                        })
                        this.page = this.page + 1
                        this.lastPage = res.data.meta.last_page

                    }).catch((err) => {
                    });
                },
                productLink(id) {
                    var path = window.location.href;
                    var pathParts = path.split('/');
                    var link = pathParts[0] + '//' + pathParts[2] + '/product/' + id
                    return link
                },
                getLink(categoryName) {

                    const fullPath = window.location.href
                    const pathParts = fullPath.split('/')
                    const categoryLink = pathParts[0] + '//' + pathParts[2] + `/products?category_id=${categoryName}`
                    return categoryLink
                },
                fetchActiveCategory() {
                    const urlParams = new URLSearchParams(window.location.search)
                    const categoryId = urlParams.get('category_id')
                    this.selectedCategory = categoryId
                },
                select(option) {
                    this.value = option;

                    this.sortByFilter = true
                    this.filterByPrice = false
                    this.defaultProducts = false

                    if (this.value == 'Price high to low' || this.value == 'من الأعلي سعرا') {
                        this.sortBy = 'dsc'
                    } else if (this.value == 'Price low to high' || this.value == 'من الأقل سعرا') {
                        this.sortBy = 'asc'
                    } else {
                        this.sortByFilter = false
                        this.filterByPrice = false
                        this.defaultProducts = true
                    }
                },
                openNav(mySidenav) {
                    document.getElementById(mySidenav).style.width = "80%";
                },
                closeNav(mySidenav) {
                    document.getElementById(mySidenav).style.width = "0";
                },
            }
        })
        productList.mount('#product-list');
    </script>
@endsection

@section('sub-styles')
    <style>
        #product-list {
            display: flex;
            justify-content: space-between;
            padding: 20px
        }

        .product {
            width: 32%
        }

        .side-bar {
            width: 25%;
        }

        .products-container {
            width: 75%;
            background-color: white;
        }

        .products-card {
            display: flex;
            justify-content: space-start;
            flex-wrap: wrap;
            gap: 10px
        }

        .sort-by {
            color: rgba(0, 0, 0, 0.6);
        }

        .products-length {
            border-right: 2px solid #f4f4f5;
        }

        .aselect {
            min-width: 150px
        }

        .aselect:hover {
            cursor: pointer;
        }

        .aselect .selector {
            position: relative;
            z-index: 1;
        }

        .aselect .selector .arrow {
            position: absolute;
            top: 29%;
            color: #2C2E42;
            transform: rotateZ(0deg) translateY(0px);
            transition-duration: 0.3s;
            transition-timing-function: cubic-bezier(0.59, 1.39, 0.37, 1.01);
            right: 3px
        }

        .arrow:hover {
            cursor: pointer;
        }

        .aselect .selector .expanded {
            transform: rotate(180deg) translate(0px);

        }

        .aselect .selector .label {
            display: block;
            /* font-weight: 400; */
            color: #2C2E42
        }

        .aselect ul {
            width: 100%;
            list-style-type: none;
            padding: 0;
            margin: 10px;
            border-radius: 10px;
            position: absolute;
            z-index: 1;
            background: #fff;
            box-shadow: 0px 0px 15.000024795532227px 0px rgba(51, 51, 51, 0.06);

        }

        .aselect li {
            padding: 12px;
            color: rgb(0, 0, 0);
        }

        .aselect li:hover {
            cursor: pointer;
            background: #f4f4f5;
        }

        .aselect .current {
            background: #eaeaea;
        }

        .aselect .hidden {
            visibility: hidden;
        }

        .aselect .visible {
            visibility: visible;
        }

        .sort-by-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            border-bottom: 1px solid #e6e6e9;
            padding: 0 0 10px 0;
            /* margin-bottom: 3%; */
            font-size: 13px;
            font-weight: 500
        }

        .mobile-filter {
            display: none
        }

        .load-more-btn {
            padding: 10px;
            border-radius: 8px;
            font-weight: 500
        }

        .load-more-btn:hover {
            opacity: 0.8;
        }

        .nav-mobile {
            display: none;
        }

        #filter-sidebar {
            display: none
        }

        .skeleton-text {
            width: 50%;
            display: inline-block;
            height: 0.4rem;
            /* margin-top: 0.4rem; */
            border-radius: 3px;
            animation: skeleton-loading 1s linear infinite alternate;


        }

        @keyframes skeleton-loading {
            0% {
                background-color: hsl(200, 20%, 70%);
            }
            100% {
                background-color: hsl(200, 20%, 95%);
            }
        }

        @media screen and (max-width: 981px) {
            .product {
                width: 49%
            }
        }

        @media screen and (max-width: 700px) {
            .mobile-filter {
                display: block
            }

            .nav-desktop {
                display: none
            }

            .nav-mobile {
                display: block;
            }

            .side-bar {
                display: none
            }

            .products-container {
                width: 100%
            }

            .filter-icon {
                height: 13px;
                width: 12px
            }

            .products-container {
                margin-top: 100px
            }

            #product-list {
                padding: 0
            }

            .filter-sort-container {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e6e6e9;
                margin-bottom: 3%;
                padding: 10px 0
            }

            .sort-by-container {
                border-style: none;
                padding: 0
            }

            #filter-sidebar {
                display: block;
                height: 100%;
                width: 0;
                position: fixed;
                z-index: 9999;
                top: 0;
                right: 0;
                background-color: rgba(255, 255, 255, 1);
                overflow-x: hidden;
                box-shadow: -2px 0px 6px 0px rgba(0, 0, 0, 0.07);
                padding-top: 50px;
                transition: 0.5s;
            }

            .filter-header {
                display: flex;
                justify-content: space-between
            }

            .product {
                width: 100%
            }

            .products-card {
                padding: 10px;
            }
        }
    </style>
    @parent
@endsection