@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;
}
.city-box {
    position: relative;
    height: 200px;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    overflow: hidden;
}

.city-box a {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
    color: white;
    position: relative;
}

.city-box h6 {
    position: absolute;
    bottom: 0;
    margin: 0;
    width: 100%;
    background-color: #333333;
    color: #ffffff;
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}
.row {
    display: flex;
    flex-wrap: wrap;
}

.product-box.card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</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> --}}
                                @foreach($home_banners as $row)
                                <div class="carousel-item">
                                    <img alt="img" class="d-block w-100" src="{{asset('uploads/home_banners/'.$row->image)}}" loading="lazy">
                                </div>
                                @endforeach
                            </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" alt="" loading="lazy">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                                @else
                                                <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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" alt="" loading="lazy">
                                            @else
                                            <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid" 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 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 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/hyderabad.jpg');">
                        <a href="/location/hyderabad">
                            <h6>Hyderabad</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/chennai.jpg');">
                        <a href="/location/chennai">
                            <h6>Chennai</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/delhi.jpg');">
                        <a href="/location/delhi">
                            <h6>Delhi</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/mumbai.jpg');">
                        <a href="/location/mumbai">
                            <h6>Mumbai</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/kolkata.jpg');">
                        <a href="/location/kolkata">
                            <h6>Kolkata</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/bengaluru.jpg');">
                        <a href="/location/bengaluru">
                            <h6>Bengaluru</h6>
                        </a>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/pune.jpg');">
                        <a href="/location/pune">
                            <h6>Pune</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/surat.jpg');">
                        <a href="/location/surat">
                            <h6>Surat</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/ahmadabad.jpg');">
                        <a href="/location/ahmadabad">
                            <h6>Ahmadabad</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/jaipur.jpg');">
                        <a href="/location/jaipur">
                            <h6>Jaipur</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/vijayawada.jpg');">
                        <a href="/location/vijayawada">
                            <h6>Vijayawada</h6>
                        </a>
                    </div>
                </div>
                <div class="mb-3 col-md-2 col-6">
                    <div class="city-box" style="background-image: url('https://tradevyapar.com/uploads/cities/meerut.jpg');">
                        <a href="/location/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>

    <script>
        $(document).ready(function() {
            $('.carousel-item').first().addClass('active');
            $('.carousel-indicators li').first().addClass('active');
        });

        let sectionIndex = 1;
        let loading = false;
        let finished = false;

        function loadNextSection() {
            if (loading || finished) return;
            loading = true;
            $('#loading-message').show();

            $.get('/load-section', { section: sectionIndex }, function (response) {
                if (response.done) {
                    finished = true;
                    $('#loading-message').hide();
                    return;
                }

                $('#sections-container').append(response.html);
                sectionIndex++;
                loading = false;
                $('#loading-message').hide();
            });
        }

        window.addEventListener('scroll', () => {
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 200) {
                loadNextSection();
            }
        });
    </script>