@extends('template.main-template')

@section('content')
    <div id="carousel-home-2">
        <div class="owl-carousel owl-theme">
            <div class="owl-slide cover"
                style="background-image: url({{ asset('template/img/slides/new/clips-and-wedges.jpg') }}); background-size: contain; background-color: #e2e3e8;">
                <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
                    <div class="container">
                        <div class="row justify-content-center justify-content-md-start">
                            <div class="col-lg-12 static">
                                <div class="slide-text text-center white">
                                    <h2 class="owl-slide-animated owl-slide-title">Clips &<br>Wedges</h2>
                                    <p class="owl-slide-animated owl-slide-subtitle">
                                        {{-- Limited items available at this price --}}
                                    </p>
                                    <div class="owl-slide-animated owl-slide-cta">
                                        <a class="btn_1" href="{{ route('product.all') }}?category=clips-wedges" role="button">Shop Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/owl-slide-->
            <div class="owl-slide cover"
                style="background-image: url({{ asset('template/img/slides/new/save-big-freeshipping.jpg') }}); background-size: contain; background-color: #e2e3e8;">
                <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
                    <div class="container">
                        <div class="row justify-content-center justify-content-md-start">
                            <div class="col-lg-12 static">
                                <div class="slide-text text-center white">
                                    <h2 class="owl-slide-animated owl-slide-title">Free<br> Shipping</h2>
                                    <p class="owl-slide-animated owl-slide-subtitle">
                                        on orders over $50
                                    </p>
                                    <div class="owl-slide-animated owl-slide-cta">
                                        <a class="btn_1" href="{{ route('product.all') }}" role="button">Shop Now</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/owl-slide-->
            <div class="owl-slide cover"
                style="background-image: url({{ asset('template/img/slides/new/become-a-distributor.jpg') }});">
                <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
                    <div class="container">
                        <div class="row justify-content-center justify-content-md-start">
                            <div class="col-lg-12 static">
                                <div class="slide-text text-center white">
                                    <h2 class="owl-slide-animated owl-slide-title">Become a <br> Distributor</h2>
                                    <p class="owl-slide-animated owl-slide-subtitle">
                                        {{-- Limited items available at this price --}}
                                    </p>
                                    <div class="owl-slide-animated owl-slide-cta">
                                        <a class="btn_1" href="{{ route('pages.all', 'become-a-distributor') }}" role="button">See More</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--/owl-slide-->
            {{-- <div class="owl-slide cover"
                style="background-image: url({{ asset('template/img/slides/slide_home_4_vertical.jpg') }});">
                <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(255, 255, 255, 0.5)">
                    <div class="container">
                        <div class="row justify-content-center justify-content-md-start">
                            <div class="col-lg-12 static">
                                <div class="slide-text text-center black">
                                    <h2 class="owl-slide-animated owl-slide-title">New Test<br>Collection</h2>
                                    <p class="owl-slide-animated owl-slide-subtitle">
                                        Test Collection
                                    </p>
                                    <div class="owl-slide-animated owl-slide-cta"><a class="btn_1" href="#"
                                            role="button">Shop Now</a></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/owl-slide-->
            </div> --}}
        </div>
        <div id="icon_drag_mobile"></div>
    </div>
    <!--/carousel-->

    <div class="feat">
        <div class="container">
            <ul>
                <li>
                    <div class="box">
                        <i class="ti-gift"></i>
                        <div class="justify-content-center">
                            <h3>Free Shipping</h3>
                            <p>For all orders over $50</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <i class="ti-wallet"></i>
                        <div class="justify-content-center">
                            <h3>Secure Payment</h3>
                            <p>100% secure payment</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="box">
                        <i class="ti-headphone-alt"></i>
                        <div class="justify-content-center">
                            <h3>Business hours Support</h3>
                            <p>Online top support</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <!--/feat-->

    <div class="container margin_60_35">
        <div class="row small-gutters categories_grid">
            <div class="col-sm-12 col-md-6">
                <a href="{{ route('product.all') }}?category=reusable-leveler">
                    <img src="{{ asset('template/img/new/reusable-spaces.jpg') }}"
                        data-src="{{ asset('template/img/new/reusable-spaces.jpg') }}" alt=""
                        class="img-fluid lazy">
                    <div class="wrapper">
                        <h2>Reusable Spacers</h2>
                        {{-- <p>115 Products</p> --}}
                    </div>
                </a>
            </div>
            <div class="col-sm-12 col-md-6">
                <div class="row small-gutters mt-md-0 mt-sm-2">
                    <div class="col-sm-6">
                        <a href="{{ route('product.all') }}?category=tile-pliers">
                            <img src="{{ asset('template/img/new/tile-pliers.jpg') }}"
                                data-src="{{ asset('template/img/new/tile-pliers.jpg') }}"
                                alt="" class="img-fluid lazy">
                            <div class="wrapper">
                                <h2>Tile Pliers</h2>
                                {{-- <p>150 Products</p> --}}
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-6">
                        <a href="{{ route('product.all') }}?category=reusable-multi-spacers">
                            <img src="{{ asset('template/img/new/multi-use-spacers.jpg') }}"
                                data-src="{{ asset('template/img/new/multi-use-spacers.jpg') }}" alt=""
                                class="img-fluid lazy">
                            <div class="wrapper">
                                <h2>Multi-Use Spacers</h2>
                                {{-- <p>90 Products</p> --}}
                            </div>
                        </a>
                    </div>
                    <div class="col-sm-12 mt-sm-2">
                        <a href="{{ route('product.all') }}?">
                            <img src="{{ asset('template/img/new/all-products.jpg') }}"
                                data-src="{{ asset('template/img/new/all-products.jpg') }}" alt=""
                                class="img-fluid lazy">
                            <div class="wrapper">
                                <h2>All Products</h2>
                                {{-- <p>1200 Products</p> --}}
                            </div>
                        </a>
                    </div>
                </div>
            </div>

        </div>
        <!--/categories_grid-->
    </div>
    <!-- /container -->

    <hr class="mb-0">
    <div class="container margin_60_35">
        <div class="main_title">
            <h2>Top Selling</h2>
            <span>Products</span>
            {{-- <p>Cum doctus civibus efficiantur in imperdiet deterruisset</p> --}}
        </div>
        <div class="row small-gutters">


            @foreach ($products as $product)
                @component('template.components.products.product_loop', ['product' => $product])
                @endcomponent

                {{-- <div class="col-6 col-md-4 col-xl-3">
				<div class="grid_item">
					<figure>
						<a href="#">
							<img class="img-fluid lazy"
								src="https://no-lippage.com/wp-content/uploads/2021/08/0-5mm.jpg"
								data-src="https://no-lippage.com/wp-content/uploads/2020/06/1mm.jpg" alt="">
							<img class="img-fluid lazy"
								src="https://no-lippage.com/wp-content/uploads/2020/06/box-1-5bagb.jpg"
								data-src="https://no-lippage.com/wp-content/uploads/2020/06/box-1-5bagb.jpg"
								alt="">
						</a>
						<!-- <div data-countdown="2019/05/10" class="countdown"></div> -->
					</figure>

					<a href="#">
						<h3>Tile Leveling System Clip Spacer 1/16 – 1.5mm</h3>
					</a>
					<div class="price_box">
						<span class="new_price">$90.00</span>
						<span class="old_price">$170.00</span>
					</div>
					<ul>
						<li><a href="#0" class="tooltip-1" data-bs-toggle="tooltip" data-bs-placement="left"
								title="Add to cart"><i class="ti-shopping-cart"></i><span>Add to cart</span></a>
						</li>
					</ul>
				</div>
				<!-- /grid_item -->
			</div> --}}
            @endforeach

        </div>
        <!-- /row -->
    </div>
    <!-- /container -->

    <div class="featured lazy" data-bg="url({{ asset('template/img/new/freeshipping.jpg') }})">
        <div class="opacity-mask d-flex align-items-center" data-opacity-mask="rgba(0, 0, 0, 0.5)">
            <div class="container margin_60">
                <div class="row justify-content-center justify-content-md-start">
                    <div class="col-lg-6 wow" data-wow-offset="150">
                        <h3>Free<br>Shipping</h3>
                        <p>on orders over $50</p>
                        <p>3 - 5 business days to US</p>
                        <div class="feat_text_block">
                            <a class="btn_1" href="{{ route('product.all') }}" role="button">Shop Now</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /featured -->

    <div class="container margin_60_35">
        <div class="main_title">
            <h2>PROFESSIONAL KITS</h2>
            <span>Products</span>
            {{-- <p>Cum doctus civibus efficiantur in imperdiet deterruisset</p> --}}
        </div>
        <div class="owl-carousel owl-theme products_carousel">

            @foreach ($featured as $product)
                @component('template.components.products.product_loop', ['product' => $product, 'class' => 'item'])
                @endcomponent
            @endforeach
        </div>
        <!-- /products_carousel -->
    </div>
    <!-- /container -->
@endsection