@extends('frontend.layouts.app')

@section('content')

    @if(! empty($mainBanner))
        <div class="page-banner">
            <img class="d-block w-100   ls-is-cached lazyloaded"
                 src="{{ my_asset($mainBanner->banner) }}"
                 data-src="{{ my_asset($mainBanner->banner) }}"
                 alt="Official Ecommerce Portal of Khadi India promo">
        </div>
    @endif
    <div class="page-content mt-5 mb-5">
        <div class="container">
            <div class="row gutters-10">
                @forelse($banners as $banner)
                    <div class="col-lg-3 col-12">
                        <div class="media-banner mb-3 mb-lg-4">
                            @if (! empty($banner->seller_id))
                                <a href="{{ route('discount.productsByBannerForSeller', $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>
                            @else
                                <a href="{{ route('discount.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>
                            @endif
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>

@endsection