@extends('frontend.layouts.app')

@section('content')

    <div class="page-banner">
        <img class="d-block w-100   ls-is-cached lazyloaded"
             src="https://ekhadiindia.s3.ap-south-1.amazonaws.com/uploads/email/MH778XpiADHeAEMRsWfAs8SyBMi9WUheTGwtKUFj.jpg"
             data-src="https://ekhadiindia.s3.ap-south-1.amazonaws.com/uploads/email/MH778XpiADHeAEMRsWfAs8SyBMi9WUheTGwtKUFj.jpg"
             alt="Official Ecommerce Portal of Khadi India promo">
    </div>
    <div class="page-content mt-5 mb-5">
        <div class="container">
            <div class="row gutters-10">
                @forelse($banners as $banner)
                    <div class="col-lg-4">
                        <div class="media-banner mb-3 mb-lg-4">
                            <a href="{{ route('october.productByBanner', $banner->id) }}" target="_blank"
                               class="banner-container">
                                <img
                                    src="{{ $banner->banner }}"
                                    data-src="{{ $banner->banner }}"
                                    alt="Official Ecommerce Portal of Khadi India promo" class="img-fluid lazyloaded">
                            </a>
                        </div>
                    </div>
                @empty
                @endforelse

                    @forelse($sellerBanners as $sellerBanner)
                        <div class="col-lg-4">
                            <div class="media-banner mb-3 mb-lg-4">
                                <a href="{{ route('october.productsByBannerForSeller', $sellerBanner->id) }}" target="_blank"
                                   class="banner-container">
                                    <img
                                        src="{{ $sellerBanner->banner }}"
                                        data-src="{{ $sellerBanner->banner }}"
                                        alt="Official Ecommerce Portal of Khadi India promo" class="img-fluid lazyloaded">
                                </a>
                            </div>
                        </div>
                    @empty
                    @endforelse
            </div>
        </div>
    </div>

@endsection