@extends('layouts.front-layout')
@section('content')
    @php
        if (!empty($about->content)) {
            $decodedData = json_decode($about->content, true);
        }
    @endphp
    <section class="main-slider p-0" id="mainSlider">
        <div class="swiper-container homeSlider">
            <div class="swiper-wrapper">

                @forelse($sliders as $slider)
                <div class="swiper-slide">
                    <div class="slide-inner bg-image" data-background="{{$slider->image ? asset('images/'.$slider->image) :asset('images/placeholder.png')}}">
                        <div class="container">
                            <div class="row justify-content-center">
                                <div class="col-lg-7">
                                    <div class="slideOne text-center">
                                        <!-- <div class="badge">you one-stop for</div> -->
                                        <h1>{{$slider->title ? $slider->title : ''}}<span class="d-block">{!! $slider->short_description ? $slider->short_description : '' !!}</span>
                                        </h1>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @empty
                    <h4 class="text-center">Slider Not Found</h4>
                @endforelse


            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="adds adds--left">
            @forelse($marquees as $marquee)
            <a href="https://www.bestbuy.com" target="_blank"><img src="{{$marquee->image ? asset('images/'.$marquee->image) :asset('images/placeholder.png')}}" alt="image"
                                                                   class="swiper-slide img-fluid"></a>
            @empty
                <h4 class="text-center">Marquee Not Found</h4>
            @endforelse
        </div>
        <div class="adds adds--right">
            @forelse($marquees as $marquee)
                <a href="https://www.bestbuy.com" target="_blank"><img src="{{$marquee->image ? asset('images/'.$marquee->image) :asset('images/placeholder.png')}}" alt="image"
                                                                       class="swiper-slide img-fluid"></a>
            @empty
                <h4 class="text-center">Marquee Not Found</h4>
            @endforelse
        </div>
        </div>
    </section>

    <!-- About Us -->
    <section class="about">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6">
                    <div class="about__content section-content">
                        <h6 class="subHeading" data-aos="fade-up">{{$decodedData['top_banner_heading'] ?? ''}}</h6>
                        <h2 class="heading" data-aos="fade-up">{{$decodedData['heading'] ?? ''}}</h2>
                        <!-- <p data-aos="fade-up"><strong>Mighty Buyer:</strong> We Revolutionize the Buying Process. A Win-Win approach to the marketplace.”</p> -->
                        <p data-aos="fade-up">
                            {{ \Illuminate\Support\Str::limit($decodedData['description'], 100, '...') }}
                        </p>
                        <a href="" class="themeBtn" data-aos="fade-up">read more</a>
                    </div>
                </div>
                <div class="col-lg-6" data-aos="fade-left">
                    <div class="about__img">
                        <img
                            src="{{ !empty($about) && isset($decodedData['main_image']) ? asset('/images/'.$decodedData['main_image']) : asset('images/placeholder.png') }}"
                            alt="image" class="imgFluid">
                        <img
                            src="{{ !empty($about) && isset($decodedData['first_image']) ? asset('/images/'.$decodedData['first_image']) : asset('images/placeholder.png') }}"
                            alt="image" class="imgFluid">
                        <img
                            src="{{ !empty($about) && isset($decodedData['second_image']) ? asset('/images/'.$decodedData['second_image']) : asset('images/placeholder.png') }}"
                            alt="image" class="imgFluid">
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- What We Offer -->
    <section class="whatOffer whatOffer--bg">
        <div class="container">
            <div class="section-content text-center" data-aos="fade-down">
                <h2 class="heading text-white">WHAT WE OFFER</h2>
            </div>
            <div class="row" data-aos="fade-down">
                <div class="col-12">
                    <div class="swiper offerSlider">
                        <div class="swiper-wrapper">
                            @forelse($offers as $offer)

                                <div class="swiper-slide">
                                    <div class="whatOffer-card">
                                        <img
                                            src="{{$offer->image ? asset('images/'.$offer->image) :asset('images/placeholder.png')}}"
                                            alt="image" class="img-fluid">
                                        <h4 class="title">{{$offer->title ? $offer->title : ''}}</h4>
                                        <p>
                                            {!! $offer->short_description ? $offer->short_description : '' !!}
                                        </p>
                                    </div>
                                </div>
                            @empty
                                <h4 class="text-center">Offer Not Fount</h4>
                            @endforelse
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-button-next"></div>
                </div>
            </div>
            <a href="" class="themeBtn themeBtn--light themeBtn--center mt-5" data-aos="fade-down">view more</a>
        </div>
    </section>

    <!-- Bids From Manufacturers -->
    <!-- <section class="manufacturer">
    <div class="container">
    <div class="row justify-content-center" data-aos="fade-down">
    <div class="col-lg-7">
    <div class="section-content text-center">
    <h2 class="heading">BIDS FROM MANUFACTURERS</h2>
    <p>Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took.</p>
    </div>
    </div>
    </div>
    <div class="row mt-3">
    <div class="col-lg-4">
    <div class="manufacturer-card w-100">
    <img src="images/manufacturer1.jpg" alt="image" class="img-fluid w-100 h-100">
    <a href="https://youtu.be/9xwazD5SyVg" data-fancybox="" class="playBtn"><i class="fas fa-play"></i></a>
    </div>
    </div>
    <div class="col-lg-4">
    <div class="manufacturer-card w-100">
    <img src="images/manufacturer2.jpg" alt="image" class="img-fluid w-100 h-100">
    <a href="https://youtu.be/9xwazD5SyVg" data-fancybox="" class="playBtn"><i class="fas fa-play"></i></a>
    </div>
    </div>
    <div class="col-lg-4">
    <div class="manufacturer-card w-100">
    <img src="images/manufacturer1.jpg" alt="image" class="img-fluid w-100 h-100">
    <a href="https://youtu.be/9xwazD5SyVg" data-fancybox="" class="playBtn"><i class="fas fa-play"></i></a>
    </div>
    </div>
    </div>
    <a href="" class="themeBtn themeBtn--center mt-5">read more</a>
    </div>
    </section> -->

    <!-- Mighty Buyer -->
    <!-- <section class="mightyBuyer pb-1" data-aos="fade-up">
    <div class="row justify-content-center">
    <div class="col-lg-7">
    <div class="section-content text-center">
    <h2 class="heading">MIGHTY BUYER</h2>
    <p>
    “Mighty Buyer” revolves around the idea of group buying or collective purchasing. This approach can indeed be beneficial in multiple ways:
    </p>
    </div>
    </div>
    </div>
    <div class="d-flex">
    <div class="mightyBuyer-card">
    <img src="images/number1.png" alt="image" class="img-fluid number-img">
    <h4 class="title">Volume Discounts for Buyers:</h4>
    <p>
    When multiple buyers combine their orders, they can negotiate better discounts due to the higher volume of purchase. This is advantageous for individual buyers who may not have the leverage to negotiate significant discounts on their own.
    </p>
    </div>
    <div class="mightyBuyer-card">
    <img src="images/number2.png" alt="image" class="img-fluid number-img">
    <h4 class="title">Reduced Customer Acquisition Costs for Sellers:</h4>
    <p>
    Sellers often spend a significant amount on marketing and customer acquisition. When a group of buyers approaches a seller, it reduces the seller's need to individually market to each buyer. This can lead to savings for the seller, which can then be passed on to the buyers in the form of discounts.
    </p>
    </div>
    <div class="mightyBuyer-card">
    <img src="images/number3.png" alt="image" class="img-fluid number-img">
    <h4 class="title">Efficient Process for Both Parties:</h4>
    <p>
    Group buying can streamline the purchasing process. Buyers benefit from a simplified process where they don't have to individually search for vendors and negotiate prices. Sellers benefit by dealing with a single entity representing multiple buyers, which can be more efficient than managing many small transactions.
    </p>
    </div>
    <div class="mightyBuyer-card">
    <img src="images/number4.png" alt="image" class="img-fluid number-img">
    <h4 class="title">Building Community and Trust:</h4>
    <p>
    Such a system can also foster a sense of community among buyers. They are part of a group that collectively makes purchasing decisions, which can lead to the development of trust and repeat transactions.
    </p>
    </div>
    <div class="mightyBuyer-card">
    <img src="images/number5.png" alt="image" class="img-fluid number-img">
    <h4 class="title">Marketplace Dynamics:</h4>
    <p>
    In a broader sense, this approach can shift marketplace dynamics. Sellers may become more competitive in their pricing and service offerings to attract such collective buying groups. This could lead to overall better deals and services in the market.
    </p>
    </div>
    </div>
    </section> -->

    <!-- Services -->
    <!-- <section class="services p-0">
    <div class="row">
    <div class="col-lg-5">
    <div class="services-card services-card--lg">
    <img src="images/services1.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="services-card__content text-white">
    <h4 class="title">Service <span class="d-block">Providers</span></h4>
    <a href="" class="viewLink">view more</a>
    </div>
    </div>
    <div class="services-card services-card--sm">
    <img src="images/services2.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="services-card__content text-white">
    <h4 class="title">Smart <span class="d-block"> Weekend</span></h4>
    <a href="" class="viewLink">view more</a>
    </div>
    </div>
    </div>
    <div class="col-lg-7">
    <div class="services-card services-card--sm">
    <img src="images/services3.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="services-card__content text-white">
    <h4 class="title">Kitchen <span class="d-block">& </span> <span class="d-block">Dining </span></h4>
    <a href="" class="viewLink">view more</a>
    </div>
    </div>
    <div class="services-card services-card--lg">
    <img src="images/services4.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="services-card__content text-white">
    <h4 class="title">Product <span class="d-block">Suppliers</span></h4>
    <a href="" class="viewLink">view more</a>
    </div>
    </div>
    </div>
    </div>
    </section> -->

    <!-- Article -->
    <!-- <section class="article">
    <div class="container">
    <div class="row justify-content-center" data-aos="fade-down">
    <div class="col-lg-7">
    <div class="section-content text-center">
    <h2 class="heading">NEW ARTICLE</h2>
    </div>
    </div>
    </div>
    <div class="row mt-4">
    <div class="col-lg-4">
    <div class="article-card">
    <img src="images/article1.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="article-card__content">
    <h4 class="title">Blog post</h4>
    </div>
    </div>
    </div>
    <div class="col-lg-4">
    <div class="article-card">
    <img src="images/article2.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="article-card__content">
    <h4 class="title">Blog post</h4>
    </div>
    </div>
    </div>
    <div class="col-lg-4">
    <div class="article-card">
    <img src="images/article3.jpg" alt="image" class="img-fluid w-100 h-100">
    <div class="article-card__content">
    <h4 class="title">Blog post</h4>
    </div>
    </div>
    </div>
    </div>
    </div>
    </section> -->

@endsection