@extends('frontend::layouts.app')
@section('title', $useCase->meta_title)
@section('keywords', $useCase->meta_keywords)
@section('description', $useCase->meta_description)
@section('other_meta_tags')
    {!! $useCase->other_meta_tags !!}
@endsection
@section('content')
    <div id="pageWrapper" class="productPage InnerPage">
        <!-- Cmn_Banner -->
        <section id="InnerBanner">
            <picture>
                <source media="(min-width: 468px)" srcset="{{ $useCase->banner_image_value }}" />
                <img src="{{ $useCase->mobile_banner_image_value }}" width="1920" height="480" alt="{{ $useCase->title }}"
                    loading="lazy" />
            </picture>
        </section>

        <section id="productSec">
            <div class="container">
                @if ($products->isNotEmpty())
                    <div class="topBx">
                        <div class="proT">{{ $useCase->title }}</div>
                        {!! $useCase->description !!}
                    </div>
                    <div class="proDBx">
                        <div class="headBx">
                            <div class="lftB">
                                @if ($productSubCategories->isNotEmpty())
                                    <ul class="nav-tabs">
                                        @foreach ($productSubCategories as $productSubCategory)
                                            <li class="nav-item">
                                                <a href="{{ route('use-case-details', ['slug' => $useCase->slug, 'category_slug' => $productSubCategory->productCategory->slug, 'sub_category_slug' => $productSubCategory->slug]) }}"
                                                    class="{{ request()->segment(4) === $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
                                            $isActiveCategory = request()->segment(3) === $singleProductCategory?->slug;
                                        @endphp
                                        <a class="dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
                                            aria-expanded="false" aria-label="Select a product category">
                                            @if (is_null(request()->segment(3)))
                                                All
                                            @elseif ($isActiveCategory)
                                                {{ $singleProductCategory->title }}
                                            @endif
                                        </a>
                                        <ul class="dropdown-menu" style="">
                                            <li>
                                                <a class="dropdown-item{{ is_null(request()->segment(3)) ? ' active' : '' }}"
                                                    href="{{ route('use-case-details', ['slug' => $useCase->slug]) }}"
                                                    aria-label="All Products">
                                                    All
                                                </a>
                                            </li>
                                            @foreach ($productCategories as $productCategory)
                                                <li>
                                                    <a class="dropdown-item{{ request()->segment(3) === $productCategory->slug ? ' active' : '' }}"
                                                        href="{{ route('use-case-details', ['slug' => $useCase->slug, 'category_slug' => $productCategory->slug]) }}"
                                                        aria-label="{{ $productCategory->title }}">
                                                        {{ $productCategory->title }}
                                                    </a>
                                                </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 }}" 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') }}" 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