@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;
}
.trending-boxes .card .card-body{
    height: 80px;
    background: lavender;
}
.trending-boxes h2{
    text-transform: capitalize !important;
    text-align: center;
}
h2{
    text-transform: capitalize !important;
}
</style>
    <!-- Home slider -->
    <section class="slider pt-0">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-9">
                    {{-- <img src="{{asset('uploads/ads/'.$top_left->image)}}" alt="ad" class="ad01"> --}}
                    <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')}}">
                                </div>
                                <div class="carousel-item">
                                    <img alt="img" class="d-block w-100" src="{{asset('uploads/banners/banner2.jpeg')}}">
                                </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 class="row trending-boxes">
                        <div class="col-md-4">
                            <a href="/trending-categories">
                                <div class="card">
                                    <div class="card-body">
                                        <h2>Trending Categories</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="/top-sellers">
                                <div class="card">
                                    <div class="card-body">
                                        <h2>Top Sellers</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                        <div class="col-md-4">
                            <a href="/latest-categories">
                                <div class="card">
                                    <div class="card-body">
                                        <h2>Latest Categories</h2>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-3 you-may-like pt-1">
                    {{-- <img src="{{asset('uploads/ads/'.$top_right->image)}}" alt="ad" class="ad02"> --}}
                    <h3>You May Like</h3>
                    <div class="trending-categories">
                        @foreach($trending_categories as $category)
                        <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="">
                                @else
                                <img src="{{asset('uploads/blank_image.png')}}" alt="">
                                @endif
                                <div class="titles">
                                    <strong>{{$category->name}}</strong>
                                    <p>100+ Products</p>
                                </div>
                            </div>
                        </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Home slider end -->

    <!-- Paragraph-->
    <div class="title1 section-t-space">
        {{-- <h4>special offer</h4> --}}
        <h2 class="title-inner1">Trending Products</h2>
    </div>

    <section class="products">
        <div class="container-fluid">
            <div class="row">
                @foreach($featured_products as $row)
                    <div class="col-md-2">
                        <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 blur-up lazyload" alt="">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail">
                                <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                    <h6>{{$row->name}}</h6>
                                </a>
                                {{-- <a href="/seller/{{$row->company_id}}">
                                    <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                </a> --}}
                                {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                {{-- <button class="btn btn-primary" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <section class="products">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="card" style="height: 400px">
                        <div class="card-body">
                            <h2>Machinery Products</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        @foreach($machinery_products as $row)
                        <div class="col-md-3">
                            <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 blur-up lazyload" alt="">
                                            @else
                                            <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="product-detail">
                                    <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                        <h6>{{$row->name}}</h6>
                                    </a>
                                    {{-- <a href="/seller/{{$row->company_id}}">
                                        <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                    </a> --}}
                                    {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                    {{-- <button class="btn btn-primary" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

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

    <section class="products">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="card" style="height: 400px">
                        <div class="card-body">
                            <h2>Electronics & Electrical Products</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        @foreach($electronic_products as $row)
                        <div class="col-md-3">
                            <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 blur-up lazyload" alt="">
                                            @else
                                            <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="product-detail">
                                    <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                        <h6>{{$row->name}}</h6>
                                    </a>
                                    {{-- <a href="/seller/{{$row->company_id}}">
                                        <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                    </a> --}}
                                    {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                    {{-- <button class="btn btn-danger" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

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

    <section class="products">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-3">
                    <div class="card" style="height: 400px">
                        <div class="card-body">
                            <h2>Automobile Products</h2>
                        </div>
                    </div>
                </div>
                <div class="col-md-9">
                    <div class="row">
                        @foreach($automobile_products as $row)
                        <div class="col-md-3">
                            <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 blur-up lazyload" alt="">
                                            @else
                                            <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                            @endif
                                        </a>
                                    </div>
                                </div>
                                <div class="product-detail">
                                    <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                        <h6>{{$row->name}}</h6>
                                    </a>
                                    {{-- <a href="/seller/{{$row->company_id}}">
                                        <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                    </a> --}}
                                    {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                    {{-- <button class="btn btn-danger" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                                </div>
                            </div>
                        </div>
                    @endforeach
                    </div>
                </div>

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

    <div class="title1 section-t-space">
        {{-- <h4>special offer</h4> --}}
        <h2 class="title-inner1">New Arrivals</h2>
    </div>
    <section class="products">
        <div class="container-fluid">
            <div class="row">
                @foreach($new_products as $row)
                    <div class="col-md-2">
                        <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 blur-up lazyload" alt="">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail">
                                <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                    <h6>{{$row->name}}</h6>
                                </a>
                                {{-- <a href="/seller/{{$row->company_id}}">
                                    <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                </a> --}}
                                {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                {{-- <button class="btn btn-danger" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="title1 section-t-space">
        {{-- <h4>special offer</h4> --}}
        <h2 class="title-inner1">Trusted Products</h2>
    </div>
    <section class="products">
        <div class="container-fluid">
            <div class="row">
                @foreach($trusted_products as $row)
                    <div class="col-md-2">
                        <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 blur-up lazyload" alt="">
                                        @else
                                        <img src="{{asset('theme/images/resource/vy/Common-Medicines-Drugs.png')}}" class="img-fluid blur-up lazyload" alt="">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail">
                                {{-- <div class="rating"><i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                    <i class="fa fa-star"></i> <i class="fa fa-star"></i> <i class="fa fa-star"></i>
                                </div> --}}
                                <a href="/product/{{$row->id}}/{{Str::slug($row->name)}}">
                                    <h6>{{$row->name}}</h6>
                                </a>
                                {{-- <a href="/seller/{{$row->company_id}}">
                                    <strong style="color:#333333;">{{$row->company->company_name??''}}</strong>
                                </a> --}}
                                {{-- <h4>Rs {{$row->price??''}}</h4> --}}
                                {{-- <button class="btn btn-danger" onclick="sendEnquiry('{{$row->id}}','{{$row->name}}')">Enquiry</button> --}}
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="title1 section-t-space">
        {{-- <h4>special offer</h4> --}}
        <h2 class="title-inner1">Popular Categories</h2>
    </div>
    <section class="products">
        <div class="container-fluid">
            <div class="row">
                @foreach($categories as $row)
                    <div class="col-md-2">
                        <div class="product-box card">
                            <div class="img-wrapper">
                                <div class="front">
                                    <a href="/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                        @if($row->image!=null)
                                        <img src="{{asset('uploads/categories/'.$row->image)}}" class="img-fluid blur-up lazyload" alt="">
                                        @else
                                        <img src="{{asset('uploads/blank_image.png')}}" class="img-fluid blur-up lazyload" alt="">
                                        @endif
                                    </a>
                                </div>
                            </div>
                            <div class="product-detail card-text">
                                <div>
                                    <a href="/category/{{$row->id}}/{{Str::slug($row->name)}}">
                                        <h6>{{$row->name}}</h6>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </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>