@extends('front.master')

@section('body')
<main class="main">
    <section class="section-box" id="forMobile">
        <div class="banner-hero banner-1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="box-swiper">
                            <div class="swiper-container swiper-group-1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11-3" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/100million.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#ffffff;">Top Sale This Month</span> --}}
                                            <h2 class="mt-10" style="color:#fff;">Seamless Shopping</h2>
                                            <h1 style="color:#fff;">Easy & Secure</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm" style="color:#fff;">Shop with confidence by verifying product details and vendor reputation before making a purchase.
                                                        We prioritize your peace of mind to help you avoid regrettable transactions and potential losses.</p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                                <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/200million.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#ffffff" style="visibility: hidden;">Get Quality</span> --}}
                                            <h2 class="mt-10" style="color:#ffffff">Quality Products</h2>
                                            <h1 style="color:#ffffff">Trusted Vendors</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm" style="color: #fff;">From fashion and electronics to home furniture and lots more,
                                                        find exactly what you need from our curated selection of top vendors. Each item is carefully selected
                                                        from our trusted vendors who are committed to quality delivery.</p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                              <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11-2" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/300million.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#000000">Trending Now</span> --}}
                                            <h2 class="mt-10" style="color:#000000">Unmatched Variety</h2>
                                            <h1 style="color:#000000">Endless Choices</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm color-brand-3">Discover a wide range of products tailored to meet every taste and budget.
                                                        You are sure to be connected with vendors offering unique products and exclusive deals you won't find anywhere else.
                                                    </p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                                <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>

                                </div>
                                <div class="swiper-pagination swiper-pagination-1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row">
                            <!--INTRODUCING SEARCH BAR FOR MOBILE-->
                            <!--INTRODUCING SEARCH BAR FOR MOBILE-->

                            <form method="get" action="{{ route('search-product') }}" id="hyde" style="margin-bottom: 20px;">
                                <div class="box-category" style="visibility: hidden;">

                                </div>
                                <div class="box-keysearch">
                                    <input class="form-control font-xs" type="text" name="title" required placeholder="Search for items" style="margin-bottom: 10px;">
                                    <button class="btn btn-cart" id="one" style="color: #ffffff; border: 1px solid #000000; background: #000000;">Search</button>
                                </div>

                            </form>


                            <!--END OF SEARCH BAR FOR MOBILE-->
                            <!--END OF SEARCH BAR FOR MOBILE-->
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="banner-small banner-small-1 bg-13"><span class="text-uppercase font-sm-lh32" style="color:#fff;"> Speed </span>
                                    <h4 class="mb-10" style="color:#fff;">Fast Delivery</h4>
                                    <p class="font-desc" style="color:#fff;">Get your orders<br class="d-none d-lg-block"> swiftly.</p>
                                    <div class="mt-20"></div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="banner-small banner-small-2 bg-14"><span class="text-uppercase font-sm-lh32"  style="color:#252525;">Assistance</span>
                                    <h4 class="mb-10" style="color:#252525;">Customer Support</h4>
                                    <p class="font-md" style="color:#252525;">We're always here<br class="d-none d-lg-block">for you 24/7.</p>
                                    <div class="mt-20"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="section-box" id="forDesktop">
        <div class="banner-hero banner-1">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8">
                        <div class="box-swiper">
                            <div class="swiper-container swiper-group-1">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11-3" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/1million.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#ffffff;">Top Sale This Month</span> --}}
                                            <h2 class="mt-10" style="color:#fff;">Seamless Shopping</h2>
                                            <h1 style="color:#fff;">Easy & Secure</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm" style="color:#fff;">Shop with confidence by verifying product details and vendor reputation before making a purchase.
                                                        We prioritize your peace of mind to help you avoid regrettable transactions and potential losses.</p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                                <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/60billion.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#ffffff" style="visibility: hidden;">Get Quality</span> --}}
                                            <h2 class="mt-10" style="color:#ffffff">Quality Products</h2>
                                            <h1 style="color:#ffffff">Trusted Vendors</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm" style="color: #fff;">From fashion and electronics to home furniture and lots more,
                                                        find exactly what you need from our curated selection of top vendors. Each item is carefully selected
                                                        from our trusted vendors who are committed to quality delivery.</p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                              <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>
                                    <div class="swiper-slide">
                                        <div class="banner-big bg-11-2" style="background-image: url({{ asset('admin/assets/imgs/page/homepage1/20billion.png') }})">
                                            {{-- <span class="font-sm text-uppercase" style="color:#000000">Trending Now</span> --}}
                                            <h2 class="mt-10" style="color:#000000">Unmatched Variety</h2>
                                            <h1 style="color:#000000">Endless Choices</h1>
                                            <div class="row">
                                                <div class="col-lg-5 col-md-7 col-sm-12">
                                                    <p class="font-sm color-brand-3">Discover a wide range of products tailored to meet every taste and budget.
                                                        You are sure to be connected with vendors offering unique products and exclusive deals you won't find anywhere else.
                                                    </p>
                                                </div>
                                            </div>
                                            {{-- <div class="mt-30"><a class="btn btn-brand-2" href="shop-grid.html">Shop now</a>
                                                <a class="btn btn-link" href="shop-grid.html">Learn more</a>
                                            </div> --}}
                                        </div>
                                    </div>

                                </div>
                                <div class="swiper-pagination swiper-pagination-1"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div class="row">
                            <!--INTRODUCING SEARCH BAR FOR MOBILE-->
                            <!--INTRODUCING SEARCH BAR FOR MOBILE-->

                            <form method="get" action="{{ route('search-product') }}" id="hyde" style="margin-bottom: 20px;">
                                <div class="box-category" style="visibility: hidden;">

                                </div>
                                <div class="box-keysearch">
                                    <input class="form-control font-xs" type="text" name="title" required placeholder="Search for items" style="margin-bottom: 10px;">
                                    <button class="btn btn-cart" id="one" style="color: #ffffff; border: 1px solid #000000; background: #000000;">Search</button>
                                </div>

                            </form>


                            <!--END OF SEARCH BAR FOR MOBILE-->
                            <!--END OF SEARCH BAR FOR MOBILE-->
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="banner-small banner-small-1 bg-13"><span class="text-uppercase font-sm-lh32" style="color:#fff;"> Speed </span>
                                    <h4 class="mb-10" style="color:#fff;">Fast Delivery</h4>
                                    <p class="font-desc" style="color:#fff;">Get your orders<br class="d-none d-lg-block"> swiftly.</p>
                                    <div class="mt-20"></div>
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-6 col-sm-12">
                                <div class="banner-small banner-small-2 bg-14"><span class="text-uppercase font-sm-lh32"  style="color:#252525;">Assistance</span>
                                    <h4 class="mb-10" style="color:#252525;">Customer Support</h4>
                                    <p class="font-md" style="color:#252525;">We're always here<br class="d-none d-lg-block">for you 24/7.</p>
                                    <div class="mt-20"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <section class="section-box pt-50">
        <div class="container">
            <div class="head-main">
                <div class="row">
                    <div class="col-xl-7 col-lg-6">
                    </div>
                    <div class="col-xl-5 col-lg-6">
                        <ul class="nav nav-tabs" role="tablist">
                            <li><a class="active" href="#tab-all" data-bs-toggle="tab" role="tab" aria-controls="tab-all" aria-selected="true">Trending Ads</a></li>
                            <li style="visibility:hidden"><a href="#tab-bestseller" data-bs-toggle="tab" role="tab" aria-controls="tab-bestseller" aria-selected="true">Best seller</a></li>
                            <li style="visibility:hidden"><a href="#tab-mostviewed" data-bs-toggle="tab" role="tab" aria-controls="tab-mostviewed" aria-selected="true">Most viewed</a></li>
                            <li style="visibility:hidden"><a href="#tab-topbrands" data-bs-toggle="tab" role="tab" aria-controls="tab-topbrands" aria-selected="true">Top Brands</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="tab-content">
                <div class="tab-pane fade active show" id="tab-all" role="tabpanel" aria-labelledby="tab-all">
                    <div class="list-products-5">
                        @foreach ($products as $product)
                            <div class="card-grid-style-3">
                                <div class="card-grid-inner">
                                    <div class="image-box"><a href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}"><img src="{{ $product->product_image }}" alt="Ecom"></a></div>
                                    <div class="info-right" id="infoRight">
                                        <a class="font-md-bold color-brand-3" href="{{ route('view-product', empty($product->slug) ? $product->id : $product->slug) }}">{!! Str::limit($product->title ,17, ' ...') !!}</a><br>
                                        <div class="price-info"><strong class="font-sm-bold price-main" style="color: #f08237;">₦{{ number_format($product->price, 2) }}</strong><span class="color-gray-500 price-line"></span></div>

                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </section>

    {{-- <section class="section-box mt-90 mb-50">
        <div class="container">
            <ul class="list-col-5">

                <li>
                    <div class="item-list">
                        <div class="icon-left"><img src="{{ asset('admin/assets/imgs/template/secure.svg') }}" alt="Ecom"></div>
                        <div class="info-right">
                            <h5 class="font-lg-bold color-gray-100">Subscription</h5>
                            <p class="font-sm color-gray-500">10K per year</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-list">
                        <div class="icon-left"><img src="{{ asset('admin/assets/imgs/template/return.svg') }}" alt="Ecom"></div>
                        <div class="info-right">
                            <h5 class="font-lg-bold color-gray-100">Quality</h5>
                            <p class="font-sm color-gray-500">Products</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-list">
                        <div class="icon-left"><img src="{{ asset('admin/assets/imgs/template/delivery.svg') }}" alt="Ecom"></div>
                        <div class="info-right">
                            <h5 class="font-lg-bold color-gray-100">Free Delivery</h5>
                            <p class="font-sm color-gray-500">all over Nigeria</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-list">
                        <div class="icon-left"><img src="{{ asset('admin/assets/imgs/template/support.svg') }}" alt="Ecom"></div>
                        <div class="info-right">
                            <h5 class="font-lg-bold color-gray-100">Support 24/7</h5>
                            <p class="font-sm color-gray-500">Full support available</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-list">
                        <div class="icon-left"><img src="{{ asset('admin/assets/imgs/template/voucher.svg') }}" alt="Ecom"></div>
                        <div class="info-right">
                            <h5 class="font-lg-bold color-gray-100">Satisfaction</h5>
                            <p class="font-sm color-gray-500">For each purchase</p>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </section> --}}
 @include('front.footer')

    <div class="modal fade" id="ModalQuickview" tabindex="-1" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-xl">
            <div class="modal-content apply-job-form">
                <button class="btn-close" type="button" data-bs-dismiss="modal" aria-label="Close"></button>
                <div class="modal-body p-30">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="gallery-image">
                                <div class="galleries-2">
                                    <div class="detail-gallery">
                                        <div class="product-image-slider-2">
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-1.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-2.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-3.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-4.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-5.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-6.jpg') }}" alt="product image"></figure>
                                            <figure class="border-radius-10"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-7.jpg') }}" alt="product image"></figure>
                                        </div>
                                    </div>
                                    <div class="slider-nav-thumbnails-2">
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-1.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-2.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-3.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-4.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-5.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-6.jpg') }}" alt="product image"></div>
                                        </div>
                                        <div>
                                            <div class="item-thumb"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-7.jpg') }}" alt="product image"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="box-tags">
                                <div class="d-inline-block mr-25"><span class="font-medium font-sm color-gray-900">Category:</span><a class="link" href="#">Smartphones</a></div>
                                <div class="d-inline-block"><span class="font-medium font-sm color-gray-900">Tags:</span><a class="link" href="#">Blue</a>,<a class="link" href="#">Smartphone</a></div>
                            </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="product-info">
                                <h5 class="mb-15">SAMSUNG Galaxy S22 Ultra, 8K Camera & Video, Brightest Display Screen, S Pen Pro</h5>
                                <div class="info-by"><span class="font-medium bytext color-gray-500 font-xs">by</span><a class="font-medium byAUthor color-gray-900 font-xs" href="shop-vendor-list.html"> Ecom Tech</a>
                                    <div class="rating d-inline-block"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><img src="{{ asset('admin/assets/imgs/template/icons/star.svg') }}" alt="Ecom"><span class="font-medium font-xs color-gray-500"> (65 reviews)</span></div>
                                </div>
                                <div class="pt-10 mb-20 border-bottom"></div>
                                <div class="box-product-price">
                                    <h3 class="mr-10 color-brand-3 price-main d-inline-block">$2856.3</h3><span class="color-gray-500 price-line font-xl line-througt">$3225.6</span>
                                </div>
                                <div class="mt-10 product-description color-gray-900">
                                    <ul class="list-dot">
                                        <li>8k super steady video</li>
                                        <li>Nightography plus portait mode</li>
                                        <li>50mp photo resolution plus bright display</li>
                                        <li>Adaptive color contrast</li>
                                        <li>premium design & craftmanship</li>
                                        <li>Long lasting battery plus fast charging</li>
                                    </ul>
                                </div>
                                <div class="mt-10 box-product-color">
                                    <p class="font-sm color-gray-900">Color:<span class="color-brand-2 nameColor">Pink Gold</span></p>
                                    <ul class="list-colors">
                                        <li class="disabled"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-1.jpg') }}" alt="Ecom" title="Pink"></li>
                                        <li><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-2.jpg') }}" alt="Ecom" title="Gold"></li>
                                        <li><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-3.jpg') }}" alt="Ecom" title="Pink Gold"></li>
                                        <li><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-4.jpg') }}" alt="Ecom" title="Silver"></li>
                                        <li class="active"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-5.jpg') }}" alt="Ecom" title="Pink Gold"></li>
                                        <li class="disabled"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-6.jpg') }}" alt="Ecom" title="Black"></li>
                                        <li class="disabled"><img src="{{ asset('admin/assets/imgs/page/product/img-gallery-7.jpg') }}" alt="Ecom" title="Red"></li>
                                    </ul>
                                </div>
                                <div class="mt-10 box-product-style-size">
                                    <div class="row">
                                        <div class="mb-10 col-lg-12">
                                            <p class="font-sm color-gray-900">Style:<span class="color-brand-2 nameStyle">S22</span></p>
                                            <ul class="list-styles">
                                                <li class="disabled" title="S22 Ultra">S22 Ultra</li>
                                                <li class="active" title="S22">S22</li>
                                                <li title="S22 + Standing Cover">S22 + Standing Cover</li>
                                            </ul>
                                        </div>
                                        <div class="mb-10 col-lg-12">
                                            <p class="font-sm color-gray-900">Size:<span class="color-brand-2 nameSize">512GB</span></p>
                                            <ul class="list-sizes">
                                                <li class="disabled" title="1GB">1GB</li>
                                                <li class="active" title="512 GB">512 GB</li>
                                                <li title="256 GB">256 GB</li>
                                                <li title="128 GB">128 GB</li>
                                                <li class="disabled" title="64GB">64GB</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="mt-5 buy-product">
                                    <p class="mb-10 font-sm">Quantity</p>
                                    <div class="box-quantity">
                                        <div class="input-quantity">
                                            <input class="font-xl color-brand-3" type="text" value="1"><span class="minus-cart"></span><span class="plus-cart"></span>
                                        </div>
                                        <div class="button-buy"><a class="btn btn-cart" href="shop-cart.html">Add to cart</a><a class="btn btn-buy" href="shop-checkout.html">Buy now</a></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
@endsection