@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="mb-3 ">
                                <center>
                                <h2 class="archive-header">আর্কাইভ</h2>
                                <div class="form-inline">
                                    <div class="form-group">
                                        <form action="{{ route('archive') }}" method="get">
                                            <label style="font-size: 18px;">তারিখ:</label>
                                            <input style="height: 40px;padding: 5px;min-width: 250px;max-width: 250px;" class="form-control-archive" id="datepicker" name="postByDate" placeholder="yyyy-mm-dd" type="date"
                                                   >
                                            <button style="padding: 4px 20px 9px 20px; font-size: 18px;" type="submit" class="btn btn-success">দেখুন</button>
                                        </form>
                                    </div>
                                </div>
                                <div class="well well-sm text-center" style="margin:17px 0;background:#ededed;">
                                    @if($post_date)
                                        <h3 style="font-size: 20px;padding: 10px 0;">{{ e_to_b_int($post_date) }} এর সব সংবাদ</h3>
                                    @else
                                    <h3 style="font-size: 20px;padding: 10px 0;">আর্কাইভ</h3>
                                    @endif
                                </div>
                                </center>
                            </div>
                            
                                <hr>
                            <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>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection