@include('themes.theme3.header')

<!--Main Slider-->
<section class="main-slider">
    <div id="mainSlider" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            @foreach ($banners as $index => $banner)
                <li data-target="#mainSlider" data-slide-to="{{ $index }}"
                    @if ($index == 0) class="active" @endif></li>
            @endforeach
        </ol>
        <div class="carousel-inner">
            @foreach ($banners as $index => $banner)
                <div class="carousel-item @if ($index == 0) active @endif">
                    <img class="d-block w-100" src="{{ asset('uploads/banners/' . $banner->image) }}"
                        alt="Banner {{ $index + 1 }}">
                </div>
            @endforeach
        </div>
        <a class="carousel-control-prev" href="#mainSlider" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#mainSlider" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</section>
<!--End Main Slider-->

<!--Services Section-->
<section class="services-section">
    <div class="auto-container">
        <!--Sec Title-->
        <div class="sec-title centered">
            <h2>Welcome </h2>
            <div class="separater"></div>
            <div class="text">We provide innovative Product Solutions for sustainable progress. Our professional team
                works to increase productivity and cost effectiveness on the market.
                We provide innovative Product Solutions for sustainable progress. Our professional team works to
                increase productivity and cost effectiveness on the market.</div>
        </div>
        <div class="clearfix row">

            @foreach ($products as $product)
                <div class="services-block col-lg-3 col-md-6 col-sm-12">
                    <div class="inner-box">
                        <div class="lower-box">
                            <div class="image">
                                <img src="{{ asset('uploads/products/' . $product->image) }}"
                                    alt="{{ $product->name ?? '' }}" />
                                <div class="overlay-box">

                                    <a href="#" class="link-btn"><span class="fa fa-link"></span></a>
                                </div>
                            </div>
                        </div>
                        <div class="upper-box">
                            <h3><a href="#">{{ $product->name ?? '' }}</a></h3>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>
<!--End Services Section-->

<!--Product Section-->
<section class="product-section">
    <div class="upper-box" style="background-image:url({{ asset('uploads/themes/theme3/images/background/1.jpg') }})">
        <div class="auto-container">

        </div>
    </div>
    <div class="auto-container">
        <div class="lower-box">
            <div class="clearfix">
                <!--Image Column-->
                <div class="image-column col-lg-6 col-md-12 col-sm-12">
                    <div class="image">
                        <img src="{{ asset('uploads/vendorr/companyprofiles/' . $companyprofile->image) }}"
                            alt="" />
                    </div>
                </div>
                <!--Content Column-->
                <div class="content-column col-lg-6 col-md-12 col-sm-12">
                    <div class="inner-column">
                        <h3>About Our Company </h3>
                        <div class="text">
                            <p>{{ $companyprofile->about_company ?? '' }}</p>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--End Product Section-->
<br>

<!--Counter Section-->
<section>
    <div class="auto-container">
        <div class="sec-title centered light">
            <h2 style="color:black">Featured Products </h2>
            <div class="separater"></div>
        </div>
    </div>
    <div class="outer-container">
        <div class="five-item-carousel owl-carousel owl-theme">

            @foreach ($products as $product)
                <!--Portfolio Item Two-->
                <div class="portfolio-item-two">
                        <div class="inner-box">
                            <div class="lower-box">
                                <div class="image">
                                    <img src="{{ asset('uploads/products/' . $product->image) }}"
                                        alt="{{ $product->name ?? '' }}" />
                                    <div class="overlay-box">

                                        <a href="#" class="link-btn"><span class="fa fa-link"></span></a>
                                    </div>
                                </div>
                            </div>
                            <div class="upper-box">
                                <strong><a href="#">{{ $product->name ?? '' }}</a></strong>
                            </div>
                        </div>
                    </div>
            @endforeach
        </div>
    </div>

</section>
<!--End Map Section-->

@include('themes.theme3.footer')