@extends('layouts.front')

@section('page_title',  )
@section('extra_css')
   
@endsection

@section('extra_js')
<script type="text/javascript">

    lazyload();
    
    window.onload = (function(el) {
      lazyload();
    });
    
    window.onscroll = function(el){
        lazyload();
    };

    function lazyload(){
        var lazyImage = document.getElementsByClassName('lazy');

        for(var i=0;i<lazyImage.length;i++){
            if(elementInViewport(lazyImage[i])){
                lazyImage[i].setAttribute('src',lazyImage[i].getAttribute('data-src'));
            }
        }
    }

    function elementInViewport(el){
        var rect = el.getBoundingClientRect();
        return (
            rect.top >= 0 &&
            rect.left >= 0 &&
            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
    }

</script>   
@endsection
@section('main_content')
    <div class="container-bg">
        <div class="container">
            <div class="section_2_page">
                <section class="section">
                    <div class="row">
                        <div class="col-md-3 col-lg-3">

                        </div>
                        <div class="col-md-6 col-lg-6">
                            <div class="content-body">
                                @foreach($posts as $post)
                                    <div class="callout-card pb-2 mb-4 border__btm">
                                        <div class="row">
                                            <div class="col-md-8 col-8 col-sm-8">
                                                <div class="media-body">
                                                    <ul class="list-inline ">
                                                        <li><h4 class="media-heading">
                                                            <a href="{{ news_url($post) }}"><strong>{{ $post->headline }}</strong></a>
                                                            </h4></li>
                                                        <li class="pull-right" style="display: block;">
                                                            <time><i class="bi bi-clock"></i> {{ bangla_published_time($post->created_at) }}</time>
                                                        </li>
                                                        <li class="clearfix"></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <div class="col-md-4 col-4 col-sm-4">
                                                <a href="{{ news_url($post) }}">
                                                    <img class=" lazy" src="{{ asset('/defaults/background.jpg') }}"  data-src="{{ $post->featured_image }}" alt="{{ $post->headline }}">
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                @endforeach
                                <div class="row">
                                    <div class="col-md-12 text-center">
                                        {!! $posts->links() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-3 col-lg-3">
                            <div class="LatestNewstab">
                                <span class="latest__heading">সর্বশেষ</span>


                                                        <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane active" id="home">
                                        <div class="latest__post mt-3">
                                            <div class="css_bar"></div>
                                            <div class="body__content">
                                                <div class="media" style="margin-top: 0px;">