@extends('shop::layouts.master')

@section('page_title')
    {{ trim($category->meta_title) != "" ? $category->meta_title : $category->name }}
@stop

@section('seo')
    <meta name="description" content="{{ trim($category->meta_description) != "" ? $category->meta_description : \Illuminate\Support\Str::limit(strip_tags($category->description), 120, '') }}"/>

    <meta name="keywords" content="{{ $category->meta_keywords }}"/>

    @if (core()->getConfigData('catalog.rich_snippets.categories.enable'))
        <script type="application/ld+json">
            {!! app('Webkul\Product\Helpers\SEO')->getCategoryJsonLd($category) !!}
        </script>
    @endif
    <link rel="stylesheet" href="{{bagisto_asset('styles/categories-tv.css')}}" />
@stop

@section('content-wrapper')
    @inject ('productRepository', 'TPS\Shop\Repositories\ProductRepository')
    @inject ('categoryRepository', 'TPS\Shop\Repositories\CategoryRepository')
    @inject ('toolbarHelper', 'Webkul\Product\Helpers\Toolbar')
    @inject ('wishListHelper', 'Webkul\Customer\Helpers\Wishlist')
    <svg display="none">
        <symbol id="rows" viewBox="0 0 23 20">
            <g id="View_2_" data-name="View (2)" transform="translate(0 -61)">
                <g id="Сгруппировать_39" data-name="Сгруппировать 39" transform="translate(5.192 61)">
                    <g id="Сгруппировать_38" data-name="Сгруппировать 38" transform="translate(0 0)">
                        <path id="Контур_72" data-name="Контур 72"
                              d="M135.764,61h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                              transform="translate(-120 -61)" />
                    </g>
                </g>
                <g id="Сгруппировать_41" data-name="Сгруппировать 41" transform="translate(5.192 69.219)">
                    <g id="Сгруппировать_40" data-name="Сгруппировать 40" transform="translate(0 0)">
                        <path id="Контур_73" data-name="Контур 73"
                              d="M135.764,211h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                              transform="translate(-120 -211)" />
                    </g>
                </g>
                <g id="Сгруппировать_43" data-name="Сгруппировать 43" transform="translate(5.192 77.438)">
                    <g id="Сгруппировать_42" data-name="Сгруппировать 42">
                        <path id="Контур_74" data-name="Контур 74"
                              d="M135.764,361h-13.72a1.8,1.8,0,1,0,0,3.562h13.72a1.8,1.8,0,1,0,0-3.562Z"
                              transform="translate(-120 -361)" />
                    </g>
                </g>
                <g id="Сгруппировать_45" data-name="Сгруппировать 45" transform="translate(0 61)">
                    <g id="Сгруппировать_44" data-name="Сгруппировать 44" transform="translate(0 0)">
                        <path id="Контур_75" data-name="Контур 75"
                              d="M1.781,61a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,61Z"
                              transform="translate(0 -61)" />
                    </g>
                </g>
                <g id="Сгруппировать_47" data-name="Сгруппировать 47" transform="translate(0 69.219)">
                    <g id="Сгруппировать_46" data-name="Сгруппировать 46" transform="translate(0 0)">
                        <path id="Контур_76" data-name="Контур 76"
                              d="M1.781,211a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,211Z"
                              transform="translate(0 -211)" />
                    </g>
                </g>
                <g id="Сгруппировать_49" data-name="Сгруппировать 49" transform="translate(0 77.438)">
                    <g id="Сгруппировать_48" data-name="Сгруппировать 48">
                        <path id="Контур_77" data-name="Контур 77"
                              d="M1.781,361a1.781,1.781,0,1,0,1.781,1.781A1.783,1.783,0,0,0,1.781,361Z"
                              transform="translate(0 -361)" />
                    </g>
                </g>
            </g>
        </symbol>
        <symbol id="cubes" viewBox="0 0 20 20">
            <g id="View_1_" data-name="View (1)" transform="translate(-1542 -408)">
                <path id="Контур_68" data-name="Контур 68"
                      d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                      transform="translate(1543 409)" />
                <path id="Контур_69" data-name="Контур 69"
                      d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                      transform="translate(1554.111 409)" />
                <path id="Контур_70" data-name="Контур 70"
                      d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                      transform="translate(1554.111 420.111)" />
                <path id="Контур_71" data-name="Контур 71"
                      d="M5.222-1H1.667A2.666,2.666,0,0,0-1,1.667V5.222A2.666,2.666,0,0,0,1.667,7.889H5.222A2.666,2.666,0,0,0,7.889,5.222V1.667A2.666,2.666,0,0,0,5.222-1Zm.889,6.222a.888.888,0,0,1-.889.889H1.667a.888.888,0,0,1-.889-.889V1.667A.888.888,0,0,1,1.667.778H5.222a.888.888,0,0,1,.889.889V5.222Z"
                      transform="translate(1543 420.111)" />
            </g>
        </symbol>
    </svg>
    <nav class="breadcrumb container">
        <ul class="breadcrumb-container breadcrumb">
            @foreach($categoryRepository->getPathCategories($category) as $path)
                <li><a href="/{{$path->url_path}}">{{$path->name}}</a></li>
            @endforeach
            <li><a href="#" class="current">{{$category->name}}</a></li>
        </ul>
    </nav>
    <main class="item-section container">
        @include ('shop::products.list.toolbar')
        <div class="item-section-wrapper">

            @if (in_array($category->display_mode, [null, 'products_only', 'products_and_description']) && $products = $productRepository->getAll($category->id))
                @include ('shop::products.list.layered-navigation')

                <div class="item-section-products" >
                @if ($products->count())
                <div class="product-block-wrapper @if ($toolbarHelper->isModeActive('grid')) gridded-view @endif" >
                    @inject ('reviewHelper', 'Webkul\Product\Helpers\Review')
                    @foreach($products as $product)
                    @php $productBaseImage = productimage()->getProductBaseImage($product); @endphp

                    <div class="product-block @if ($toolbarHelper->isModeActive('grid')) cube-view @endif">

                        <div class="product-block-img">
                            <img src="{{ $productBaseImage['medium_image_url'] }}"
                                 onerror="this.src='{{ asset('vendor/webkul/ui/assets/images/product/meduim-product-placeholder.png') }}'"
                                 alt="{{$product->name}}">
                            <!-- Favourites -->
                            <form class="wishlist-{{ $product->product_id }}" action="{{ route('customer.wishlist.add', $product->product_id) }}" method="POST">
                                @csrf
                                <button type="button" class="item-gallery-fav" style="opacity: 1; pointer-events: unset; position: static; margin-left:-45px; margin-top: -110px"
                                        @guest('customer')
                                        onclick="document.querySelector('.logged-false').click(); return false;"
                                        @else
                                        onclick="document.querySelector('.wishlist-{{ $product->product_id }}').submit();"
                                    @endguest
                                >
                                    <div>
                                        <img src="{{bagisto_asset($wishListHelper->getWishlistProduct($product) ? 'icons/heart.svg' : 'icons/love.svg')}}" alt="fav">
                                    </div>
                                </button>
                            </form>

                            <!-- Favourites End -->
                        </div>
                        <div class="product-description">
                            <a href='{{ route('shop.productOrCategory.index', $product->url_key) }}' title="{{ $product->name }}" class="product-name">
                                {{$product->name}}
                            </a>
{{--                            <div class="product-rating">--}}
{{--                                <div class="product-rating-img">--}}
{{--                                    <img src="{{ bagisto_asset('icons/star.svg') }}" alt="star">--}}
{{--                                </div>--}}
{{--                                <span class="product-rating-text">{{ $reviewHelper->getAverageRating($product) }}</span>--}}
{{--                                <span class="product-rating-feed">{{__('shop::app.products.total-reviews',['total'=>$reviewHelper->getTotalReviews($product)])}}</span>--}}
{{--                            </div>--}}
                            @include ('shop::products.list.attributes')
                        </div>
                        <div class="product-buy">
                            <form class='product-buttons-wrapper' action="{{ route('cart.add', $product->product_id) }}" method="POST">
                                @csrf
                                <input type="hidden" name="product_id" value="{{ $product->product_id }}">
                                <input type="hidden" name="quantity" value="1">

                                <button class="to-cart" {{ $product->isSaleable() ? '' : 'disabled' }}>
                                    <div class="to-cart-img">
                                        <img src="{{ bagisto_asset('icons/icon (cart) 2.svg') }}" alt="cart" />
                                    </div>

                                    <span class="to-cart-text">
                                        {{ ($product->type == 'booking') ?  __('shop::app.products.book-now') :  __('shop::app.products.add-to-cart') }}
                                    </span>
                                </button>
                                <button class="one-click">
                                    <span class="one-click-text">{{__('shop::app.products.buy-now')}}</span>
                                </button>
                            </form>

                            @include ('shop::products.price', ['product' => $product])
                        </div>
                    </div>
                    @endforeach
                </div>
                @if($products->hasPages())
                    <div class="product-section-pagination">
                        <div class="pagination-buttons">
                            <form method="get">
                                <a class="pagination-button pagination-button-left" href="{{ $products->appends(request()->input())->previousPageUrl() }}">
                                    <img src="{{bagisto_asset('icons/arrow-down-sign-to-navigate.svg')}}" alt="left">
                                </a>
                                <span class="mid-button-text">{{ $products->appends(request()->input())->currentPage() }}</span>
                                <a class="pagination-button pagination-button-right" href="{{ $products->appends(request()->input())->nextPageUrl() }}">
                                    <div><img src="{{bagisto_asset('icons/arrow-down-sign-to-navigate.svg')}}" alt="right"></div>
                                </a>
                            </form>
                        </div>
                        <span class="page-count">{{__('shop::app.products.total-pages',['total'=>$products->lastPage()])}}</span>
                    </div>
                @endif
                @else
                    <div class="item-section empty">
                        <div class="empty_icon">
                            <img src="{{bagisto_asset('icons/search_pink.svg')}}" alt="empty products">
                        </div>
                        <h2 class="empty_text">{{ __('shop::app.products.empty') }}</h2>
                    </div>

                @endif
            </div>
            @endif
        </div>

    </main>
@stop

@push('scripts')
    <script>
        $(document).ready(function(){

            let filterTrig = document.querySelector('.filter-pop-up');
            let filterEl = document.querySelector('.filter-pop-up-menu');
            filterTrig.addEventListener('click', () => {
                filterEl.classList.add('show');
                body.style.overflowY = 'hidden';
            });

            filterTrig = document.querySelector('.filter-pop-up-exit');
            filterTrig.addEventListener('click', () => {
                filterEl.classList.remove('show');
                body.style.overflowY = 'auto';
            });
        });
    </script>
@endpush