@extends('layouts.front')
@section('page_title', 'সকল সংবাদ' )
@section('extra_css')
    <link rel="stylesheet"
          href="{{asset('assets/vendors/bootstrap-datepicker-1.6.1/css/bootstrap-datepicker.min.css')}}">
    <style>
        .callout-card {
            margin-bottom: 20px;
        }
    </style>
@endsection

@section('extra_js')
    <script src="{{asset('assets/vendors/bootstrap-datepicker-1.6.1/js/bootstrap-datepicker.min.js')}}"></script>
    <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="all__post__page pt-5 section_2_page">

        <div class="container">
            <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">
                                                    <i class="bi bi-clock"></i> {{ bangla_published_time($post->created_at) }}
                                                </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="media-object img-responsive " src="{{ asset('/defaults/background.jpg') }}"  data-src="{{ $post->featured_image }}" alt="">
                                        </a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                        <div class="mb-5"></div>
                            <nav class="text-center">
                                {!! $posts->appends(\Illuminate\Support\Facades\Input::except('page'))->links() !!}
                            </nav>
                    </div>
                </div>
                <div class="col-md-3 col-lg-3">
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">

                </div>
            </div>
        </div>
    </div>
@endsection