@include('site.header')
<style>
.you-may-like{
    color: #333333;
}
.you-may-like h3{
    color: #000000;
    font-weight: bold;
    font-size: 18px;
}
.category-blk {
    width: 100%;
    height: 100px;
    margin-bottom: 5px;
}
.category-blk img{
    width: 100px;
    height: 100px;
    float: left;
}
.category-blk .titles{
    width: 180px;
    height: 90px;
    float: left;
    padding: 5px;
}
.category-blk a{
    color:#333333 !important;
}
.titles strong{
    color:
}
.trending-boxes{
    padding: 5px;
    margin-top: 10px;
}
.tbox {
    width: 33%;
    float: left;
}
.trending-boxes .card .card-body {
    height: 80px;
    background: #fff5f6;
    box-shadow: 3px 3px 10px #cccccc;
}
.trending-boxes h2{
    text-transform: capitalize !important;
    text-align: center;
}
h2{
    text-transform: capitalize !important;
}
.locations{
    padding: 30px;
    background: whitesmoke;
}
.city-box{
    text-align: center;
    margin-bottom: 20px;
}
.city-box img{
    width: 100%;
    height: 100px;
}
.city-box h6{
    color: #333333;
    font-weight: bold;
}
.locations h2{
    color: #333333;
    font-weight: bold;
    margin-bottom: 20px;
}
.locations h6{
    color: #333333;
    font-weight: bold;
}
.locations a{
    color: #333333;
}
.locations a:hover{
    color: #333333;
}
</style>
    <!-- Home slider -->
    <section class="pt-0 slider">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-6">
                    <div>
                        <div class="carousel slide" data-bs-ride="carousel" id="carouselExample2">
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img alt="img" class="d-block w-100" src="{{asset('uploads/banners/banner3.jpeg')}}" loading="lazy">
                                </div>
                                <div class="carousel-item">
                                    <img alt="img" class="d-block w-100" src="{{asset('uploads/banners/banner2.jpeg')}}" loading="lazy">
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExample2" role="button" data-bs-slide="prev">
                                <i class="fa fa-angle-left fs-30" aria-hidden="true"></i>
                            </a>
                            <a class="carousel-control-next" href="#carouselExample2" role="button" data-bs-slide="next">
                                <i class="fa fa-angle-right fs-30" aria-hidden="true"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="pt-1 col-md-6 you-may-like desktop">
                    <h3>You May Like</h3>
                    <div class="trending-categories row">
                        @foreach($trending_categories as $category)
                        <div class="col-md-6">
                            <a href="/category/{{$category->id}}/{{Str::slug($category->name)}}">
                                <div class="category-blk">
                                    @if($category->image!=null)
                                    <img src="{{asset('uploads/categories/'.$category->image)}}" alt="" loading="lazy">
                                    @else
                                    <img src="{{asset('uploads/blank_image.png')}}" alt="" loading="lazy">
                                    @endif
                                    <div class="titles">
                                        <strong>{{$category->name}}</strong>
                                        <p>100+ Products</p>
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Home slider end -->

    <section class="products">
        <div class="container-fluid">
            <h2>Trending Products</h2>
            <div class="row">
                @foreach($featured_products as $row)
                    <div class="row10">
                        <div class="product-box card">
                            <div class="img-wrapper">
                                <div class="front">
                                    <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                        @if($row->image!=null)
                                        <img src="{{asset('uploads/products/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail">
                                <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                    <h6>{{$row->name}}</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>New Arrivals</h2>
            <div class="row">
                @foreach($new_products as $row)
                    <div class="row10">
                        <div class="product-box card">
                            <div class="img-wrapper">
                                <div class="front">
                                    <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                        @if($row->image!=null)
                                        <img src="{{asset('uploads/products/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail">
                                <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                    <h6>{{$row->name}}</h6>
                                </a>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Machinery</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($machinery_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Agriculture</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($agriculture_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Chemical</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($chemical_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Food & Beverages</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($food_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Health & Beauty</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($health_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Home Supplier</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($home_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Apparel Fashion</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($apparel_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Industries Supplier </h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($industries_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>
    <section class="products">
        <div class="container-fluid">
            <h2>Construction & Real-estate</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($construction_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <h2>Electrical & Electronics</h2>
            <div class="row">
                <div class="col-md-12">
                    <div class="row">
                        @foreach($electronic_products as $row)
                        <div class="row10">
                            <div class="product-box card">
                                <div class="card-body">
                                    <div class="img-wrapper">
                                        <div class="front">
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                @if($row->image!=null)
                                                <img src="{{asset('uploads/subcategories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                                @endif
                                            </a>
                                        </div>
                                    </div>
                                    <div class="product-detail card-text">
                                        <div>
                                            <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                                <h6>{{$row->name}}</h6>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

            </div>
        </div>
    </section>

    <section class="pb-4 products">
        <div class="container-fluid">
            <h2>Popular Categories</h2>
            <div class="row">
                @foreach($categories as $row)
                    <div class="row10">
                        <div class="product-box card">
                            <div class="card-body">
                                <div class="img-wrapper">
                                    <div class="front">
                                        <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                            @if($row->image!=null)
                                            <img src="{{asset('uploads/categories/'.$row->image)}}" class="img-fluid lazyload" alt="" loading="lazy">
                                            @else
                                            <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid lazyload" alt="" loading="lazy">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="product-detail card-text">
                                    <div>
                                        <a href="/sub/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                            <h6>{{$row->name}}</h6>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- <section>
        <div class="container">
            <div class="row">
                <h2>Testimonials</h2>
            </div>
            <div class="row">
                @foreach($testimonials as $row)
                <div class="mb-3 col-md-4">
                    <div class="card" style="width: 18rem;">
                        <div class="card-body">
                          <h5 class="card-title" style="color:blue;">{{$row->title}}</h5>
                          <p class="card-text">{{$row->description}}</p>
                          <p><strong style="color:red;">{{$row->name}}</strong>
                            <br><i>{{$row->profession}}</i></p>
                        </div>
                      </div>
                </div>
                @endforeach
            </div>
        </div>
    </section> --}}

    {{-- <section>
        <div class="container">
            <div class="row">
                <h2>Latest News</h2>
            </div>
            <div class="row">
                @foreach($news as $row)
                <div class="mb-3 col-md-4">
                    <div class="card" style="width: 18rem;">
                        <img src="{{asset('uploads/news/'.$row->image)}}" class="card-img-top" alt="{{$row->title}}">
                        <div class="card-body">
                          <h5 class="card-title">{{$row->title}}</h5>
                          <p class="card-text">{{$row->description}}</p>
                          <p><strong>Category:</strong>
                             <i>{{$row->category}}</i></p>
                             <a href="#" class="btn btn-primary">More...</a>
                        </div>
                      </div>
                </div>
                @endforeach
            </div>
        </div>
    </section> --}}
    <section class="locations">
        <div class="container">
            <div class="row">
                <h2>Suppliers from top cities</h2>
            </div>
            <div class="row">
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/hyderabad">
                            <img src="{{asset('uploads/cities/hyderabad.jpg')}}" class="img-fluid" alt="Hyderabad">
                            <h6>Hyderabad</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/chennai">
                            <img src="{{asset('uploads/cities/chennai.jpg')}}" class="img-fluid" alt="Chennai">
                            <h6>Chennai</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/delhi">
                            <img src="{{asset('uploads/cities/delhi.jpg')}}" class="img-fluid" alt="Delhi">
                            <h6>Delhi</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/mumbai">
                            <img src="{{asset('uploads/cities/mumbai.jpg')}}" class="img-fluid" alt="Mumbai">
                            <h6>Mumbai</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/kolkata">
                            <img src="{{asset('uploads/cities/kolkata.jpg')}}" class="img-fluid" alt="Kolkata">
                            <h6>Kolkata</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/bengaluru">
                            <img src="{{asset('uploads/cities/bengaluru.jpg')}}" class="img-fluid" alt="Bengaluru">
                            <h6>Bengaluru</h6>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/pune">
                            <img src="{{asset('uploads/cities/pune.jpg')}}" class="img-fluid" alt="Pune">
                            <h6>Pune</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/surat">
                            <img src="{{asset('uploads/cities/surat.jpg')}}" class="img-fluid" alt="Surat">
                            <h6>Surat</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/ahmedabad">
                            <img src="{{asset('uploads/cities/ahmedabad.jpg')}}" class="img-fluid" alt="Ahmedabad">
                            <h6>Ahmedabad</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/jaipur">
                            <img src="{{asset('uploads/cities/jaipur.jpg')}}" class="img-fluid" alt="Jaipur">
                            <h6>Jaipur</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/meerut">
                            <img src="{{asset('uploads/cities/vijayawada.jpg')}}" class="img-fluid" alt="Vijayawada">
                            <h6>Vijayawada</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2">
                    <div class="city-box">
                        <a href="/location/meerut">
                            <img src="{{asset('uploads/cities/meerut.jpg')}}" class="img-fluid" alt="Meerut">
                            <h6>Meerut</h6>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('site.footer')

    <script src="{{asset('build/assets/plugins/owl-carousel/owl.carousel.js')}}"></script>
    <script src="resources/assets/js/carousel.js"></script>