{!! Theme::partial('breadcrumbs') !!}
@php
    $customerType = auth('customer')->check() ? auth('customer')->user()->customer_type : 0;
@endphp
<style>
    .order-treking-header {
        text-align: left;
    }

    .newtitle {
        position: relative;
        height: 370px;
        overflow: hidden;
        max-width: 100%;
    }

    .newtitle .newbg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 370px;
    }

    .newtitle .newbg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    img {
        vertical-align: middle;
        border-style: none;
    }

    .newtitle .newcontent {
        position: relative;
        /* max-width: 1340px; */
        margin-left: auto !important;
        margin-right: auto !important;
        height: 370px;
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .page-header-image-container {
        position: relative;
        height: 370px;
        overflow: hidden;
        max-width: 100%;
    }

    .page-header-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top: 0;
        left: 0;
        z-index: 1;
    }

    .banner-hero {
        position: relative;
        z-index: 2;
        background: transparent !important;
    }

    .text-display-3 {
        color: #ffffff !important;
    }
    .newcontent {
    text-align: center;
    color: #fff;
    }

    .sub-lines {
        margin-top: 10px;
    }

    .sub-lines p {
        margin: 0;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;
    }
    .text-heading-6{
            color: #ffffff;
        /* width: 518px; */
        font-weight: 500;
    }

    .products-wrapper {
        position: relative !important;
        min-height: 300px;
    }
    
    .products-loader {
        display: none;
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(255, 255, 255, 0.9) !important;
        z-index: 999 !important;
        justify-content: center;
        align-items: flex-start;
        padding-top: 50px;
    }
    
    .products-loader-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f3f3;
        border-top: 4px solid var(--primary-color);
        border-radius: 50%;
        animation: products-spin 1s linear infinite;
    }
    
    @keyframes products-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }


</style>
{{-- @if (($categories = get_featured_product_categories()) && $categories->count())
    @php $categories->loadCount('products'); @endphp

    <div class="section-box mt-90">
        <div class="container">
            <h2 class="text-heading-1 color-gray-900">{{ __('Browse by category') }}</h2>
            <div class="row">
                <div class="col-lg-6">
                    <p class="text-body-lead-large color-gray-600 mt-20">{{ __('All the smart devices, electronics or software you need are ready to be discovered. Let’s go!') }}</p>
                </div>
            </div>
        </div>
        <div class="container mt-70">
            <div class="row">
                @foreach ($categories as $category)
                    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
                        <div class="category-grid-3 hover-up">
                            <a href="{{ $category->url }}">
                                <div class="category-img">
                                    <img src="{{ RvMedia::getImageUrl($category->image, null, false, RvMedia::getDefaultImage()) }}" alt="{{ $category->name }}">
                                </div>
                                <h4 class="text-heading-5 mb-5">{!! BaseHelper::clean($category->name) !!}</h4>
                                <p class="text-body-text color-gray-500 d-inline-block">{{ __(':count products', ['count' => $category->products_count]) }}</p>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endif --}}

<section class="section-box">
    {{-- <div class="container"> --}}
    {{-- <h2 class="text-heading-1 color-gray-900">{{ __('Our products') }}</h2> --}}
    {{-- <p class="text-body-lead-large color-gray-600 mt-20">{{ __('Don’t miss world trending') }}</p> --}}
    <div class="newtitle">
        <div class="newbg"><img src="{{ asset('assets/images/blogs-tires.jpg') }}">
        </div>
        <div class="newcontent">
            {!! Theme::partial('page-header', [
                'title' => __('Our Products'),
                'description' => __('Explore top brands, compare features, and choose the best tyres for safety, mileage, and performance.'),
            ]) !!}

          

        </div>
    </div>
    <div class="container mt-70">
        <div class="row">
            <div class="col order-2 order-lg-2">
                <form action="{{ URL::current() }}" method="GET" id="products-filter-form" style="display: none;">
                    <input type="hidden" name="sort-by" class="product-filter-item"
                        value="{{ request()->input('sort-by') }}">
                    <input type="hidden" name="layout" class="product-filter-item"
                        value="{{ request()->input('layout') }}">
                </form>

                @include(Theme::getThemeNamespace('views.ecommerce.includes.wholesaler-toolbar'))

                <div class="products-wrapper position-relative">
                    <div class="products-loader" id="products-loader" style="display: none;">
                        <div class="products-loader-spinner"></div>
                    </div>
                    <div class="products-listing">
                        @include(Theme::getThemeNamespace('views.ecommerce.includes.product-items'))
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

{{-- {!! dynamic_sidebar('product_list_bottom_sidebar') !!} --}}