@extends('frontend::layouts.app')
@section('title', optional($singleProductCategory)->meta_title ?? $metaTags['metaTitle'])
@section('keywords', optional($singleProductCategory)->meta_keywords ?? $metaTags['metaKeywords'])
@section('description', optional($singleProductCategory)->meta_description ?? $metaTags['metaDescription'])
@section('other_meta_tags')
    {!! optional($singleProductCategory)->other_meta_tags ?? $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="productPage InnerPage">
        @if ($products->isNotEmpty())
            <!-- Cmn_Banner -->
            <section id="InnerBanner">
                <picture>
                    <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                    <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                        loading="lazy" />
                </picture>
            </section>
        @endif

        <section id="productSec">
            <div class="container">
                @if ($products->isNotEmpty())
                    <div class="topBx">
                        <div class="proT">{{ optional($singleProductCategory)->title ?? $productCms->title }}</div>
                        {!! optional($singleProductCategory)->description ?? $productCms->description !!}
                    </div>
                    <div class="proDBx">
                        <div class="headBx">
                            <div class="lftB">
                                @unless ($singleProductCategory)
                                    <div class="title">All Products</div>
                                @endunless
                                @if ($productSubCategories->isNotEmpty())
                                    <ul class="nav-tabs">
                                        @foreach ($productSubCategories as $productSubCategory)
                                            <li class="nav-item">
                                                <a href="{{ route('products.indexSubcategoryOrshowWithCategory', ['category_slug' => $productSubCategory->productCategory->slug, 'slug' => $productSubCategory->slug]) }}"
                                                    class="{{ request()->segment(2) === $productSubCategory->slug ? 'active' : '' }}"
                                                    aria-label="{{ $productSubCategory->title }}">
                                                    {{ $productSubCategory->title }}
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                @endif
                            </div>
                            <div class="ritB">
                                <div class="lbl">Our Products</div>
                                <div class="slctBx">
                                    <div class="dropdown">
                                        @php
                                            $isProductsPage = request()->segment(1) == 'our-collections';
                                            $isActiveCategory =
                                                !$isProductsPage &&
                                                !is_null(request()->segment(1)) &&
                                                $singleProductCategory &&
                                                request()->segment(1) === $singleProductCategory->slug;
                                        @endphp
                                        <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                            aria-expanded="false" aria-label="Select a product category">
                                            @if ($isProductsPage)
                                                All
                                            @elseif ($isActiveCategory)
                                                {{ $singleProductCategory->title }}
                                            @endif
                                        </a>
                                        <ul class="dropdown-menu" style="">
                                            <li>
                                                <a class="dropdown-item{{ request()->segment(1) == 'our-collections' ? ' active' : '' }}"
                                                    href="{{ route('products.index') }}" aria-label="All Products">
                                                    All
                                                </a>
                                            </li>
                                            @foreach ($productCategories as $productCategory)
                                                <li>
                                                    @if ($productCategory->slug == 'worklite')
                                                        <a class="dropdown-item{{ request()->segment(1) === $productCategory->slug ? ' active' : '' }}"
                                                            href="{{ route('products.worklite') }}"
                                                            aria-label="{{ $productCategory->title }}">
                                                            {{ $productCategory->title }}
                                                        </a>
                                                    @else
                                                        <a class="dropdown-item{{ request()->segment(1) === $productCategory->slug ? ' active' : '' }}"
                                                            href="{{ route('products.category', $productCategory->slug) }}"
                                                            aria-label="{{ $productCategory->title }}">
                                                            {{ $productCategory->title }}
                                                        </a>
                                                    @endif
                                                </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="flxGrid">
                            @foreach ($products as $product)
                                <div class="item">
                                    <a href="@productRoute($product)" class="prodBx" aria-label="{{ $product->title }}">
                                        <div class="imgBx">
                                            <img src="{{ $product->primary_image_value }}" width="266" height="368" alt="{{ $product->title }}"
                                                loading="lazy">
                                        </div>
                                        <div class="txtB">
                                            <div class="name">{{ $product->title }}</div>
                                            @if ($product->subtitle)
                                                <div class="txt">{{ $product->subtitle }}</div>
                                            @endif
                                        </div>
                                    </a>
                                </div>
                            @endforeach
                        </div>
                        @if ($products->lastPage() > 1)
                            <ul class="pagination">
                                <li>
                                    <a href="{{ $products->previousPageUrl() }}" class="prev notVld"
                                        aria-label="Previous page">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13.003" height="9.971"
                                            viewBox="0 0 13.003 9.971">
                                            <path id="arrow"
                                                d="M857.567,5739.667l-4.231-3.908a1.176,1.176,0,0,1-.168-.2l-.006-.009,0-.005A1,1,0,0,1,853,5735v0a1.033,1.033,0,0,1,.341-.762l4.231-3.9a1.222,1.222,0,0,1,1.649,0,1.015,1.015,0,0,1,.341.757,1.03,1.03,0,0,1-.341.762l-2.239,2.068h7.857a1.082,1.082,0,1,1,0,2.158h-7.857l2.24,2.07a1.024,1.024,0,0,1,0,1.524,1.246,1.246,0,0,1-1.649,0Z"
                                                transform="translate(-852.996 -5730.008)" />
                                        </svg>
                                    </a>
                                </li>
                                @for ($i = 1; $i <= $products->lastPage(); $i++)
                                    <li>
                                        <a href="{{ $products->url($i, ['page' => $i]) }}"
                                            class="{{ $products->currentPage() == $i ? 'active' : '' }}"
                                            aria-label="Page {{ $i }}">
                                            {{ $i }}
                                        </a>
                                    </li>
                                @endfor
                                <li>
                                    <a href="{{ $products->nextPageUrl() }}" class="next" aria-label="Next page">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="13.003" height="9.972"
                                            viewBox="0 0 13.003 9.972">
                                            <path id="arrow"
                                                d="M4.571.312.341,4.22a1.176,1.176,0,0,0-.168.2L.166,4.43l0,.005A1.008,1.008,0,0,0,0,4.981v0a1.033,1.033,0,0,0,.341.762l4.231,3.9a1.222,1.222,0,0,0,1.649,0,1.015,1.015,0,0,0,.341-.757,1.03,1.03,0,0,0-.341-.762L3.982,6.064h7.857A1.126,1.126,0,0,0,13,4.981a1.125,1.125,0,0,0-1.164-1.076H3.981l2.24-2.07a1.024,1.024,0,0,0,0-1.524,1.246,1.246,0,0,0-1.649,0Z"
                                                transform="translate(13.003 9.972) rotate(180)" />
                                        </svg>
                                    </a>
                                </li>
                            </ul>
                        @endif
                    </div>
                @else
                    <div class="NoResultFound">
                        <div class="icon">
                            <img src="{{ asset('frontend/images/NoResult.svg') }}" width="512" height="512" alt="no result found">
                        </div>
                        <div class="ttle">Oops! No Results Found</div>
                        <a href="{{ route('home') }}" class="back hoveranim">
                            <span>Back to Home</span>
                        </a>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection
@push('js')
    <!-- SELECT2-->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <script>
        $(".select2").select2({
            minimumResultsForSearch: -1,
            maximumSelectionLength: 3,
            theme: "bootstrap-5",
            containerCssClass: "select2--small",
            selectionCssClass: "select2--small",
            dropdownCssClass: "select2--small",
        });
    </script>
@endpush