@extends('edufair.layouts.master')
@section('content')
    <!-- Main Container -->
    <main id="main-container">
        <div class="findService pt-5">
            <div class="content p-2">
                <div class="row justify-content-center">
                    <div class="col-lg-10">
                        <div class="long_banner_img_news_vi">
                            <div>
                                <a target="_blank" href="#" title="">
                                    <img class="d-block w-100" src="{{asset('public/theme/assets/media/gif/new_banner.gif')}}" alt="">
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xl-9">
                        <div class="block block-rounded">
                            <div class="block-content p-0 overflow-hidden">
                                <div class="row">
                                    <div class="col-sm-12">
                                        <div class="px-4 py-3" id="">
                                            <h2 class="mb-1">
                                                {{$news->title}}
                                            </h2>
                                            <div class="post-meta-date">
                                                <i class="fa fa-clock"></i> {{date('F d, Y',strtotime($news->created_at))}}<br>
                                                <iframe src="https://www.facebook.com/plugins/share_button.php?href={{url()->current()}}&layout=button&size=large&appId=276449176684106&width=77&height=28" width="77" height="28" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>                                    </div>
                                        </div>
                                        <div class="details_co">
                                            <a href="#">
                                                @if(isset($news->image))
                                                    @php
                                                        $article = $news;
                                                        $url = config('filesystems.asset').'/'.'articles'.'/'.$article->image;
                                                        $uploadedFile = pathinfo($url);
                                                        $old_filename = $uploadedFile['filename'];
                                                        $extension = $uploadedFile['extension'];
                                                        $imageLink = config('filesystems.asset').'/'.'articles'.'/'.$old_filename.'.webp';
                                                    @endphp

                                                    <picture>
                                                        <source type="image/webp" srcset="{{$imageLink}}">
                                                        <source type="image/{{$extension}}" srcset="{{$url}}">
                                                        <img class="img-fluid" src="{{$url}}" alt="{{$article->title}}">
                                                    </picture>
                                                @else
                                                    <img src="{{asset('public/theme/assets/media/img/blog1.jpg')}}" class="img-fluid" alt="">
                                                @endif

                                            </a>
                                        </div>
                                        <div class="px-4 py-3">
                                            {!! $news->details !!}
                                        </div>
                                    </div>
                                    <div class="col-sm-12">
                                        <div class=" p-3 border m-3">
                                            <span class="font-size-h4 font-weight-bold">Comments</span>
                                            <hr>
                                            <div class="fb-comments" data-href="{{url()->current()}}" data-numposts="5" data-width="100%" style="width: 100%;"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3">
                        <div id="ad_nepal_flez">
                            {{--add--}}
                            <div class="block block-rounded block-themed">
                                <div class="ad">
                                    <a href="#">
                                        <img src="{{url('public/theme/assets/media/gif/gif1.gif')}}" alt="IMG">
                                    </a>
                                </div>
                                <div class="ad mt-2">
                                    <a href="#">
                                        <img src="{{url('public/theme/assets/media/gif/gif1.png')}}" alt="IMG">
                                    </a>
                                </div>
                                <div class="ad mt-2">
                                    <a href="#">
                                        <img src="{{url('public/theme/assets/media/gif/gif2.jpg')}}" alt="IMG">
                                    </a>
                                </div>
                                <div class="ad">
                                    <a href="#">
                                        <img src="{{url('public/theme/assets/media/gif/gif1.gif')}}" alt="IMG">
                                    </a>
                                </div>
                            </div>
                        {{--add end--}}

                        <!-- END About -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Page Content -->
        @if(count(\App\Model\Article::where('id','!=',$news->id)->limit(3)->get())>0)
        <div class="ts-blog section-bg">
            <div class="content p-0">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="py-3 pt-5 text-center" id="heading_ti_adn">
                            <h1 class="font-w700 mb-2" id="f_ad_ne_main_title">
                                Featured Articles
                            </h1>
                        </div>
                    </div>
                </div>
                <div class="row">
                    @foreach(\App\Model\Article::where('id','!=',$news->id)->limit(3)->get() as $article)
                    <div class="col-lg-4 wow fadeInUp" data-wow-duration="1.5s" data-wow-delay="400ms" style="visibility: visible; animation-duration: 1.5s; animation-delay: 400ms; animation-name: fadeInUp;">
                        <div class="post">
                            <div class="post-media post-image">
                                <a href="{{url('edufair/news'.'/'.$article->slug)}}">
                                    @if(isset($article->image))
                                        @php
                                            $url = config('filesystems.asset').'/'.'articles'.'/'.$article->image;
                                            $uploadedFile = pathinfo($url);
                                            $old_filename = $uploadedFile['filename'];
                                            $extension = $uploadedFile['extension'];
                                            $imageLink = config('filesystems.asset').'/'.'articles'.'/'.$old_filename.'.webp';
                                        @endphp

                                        <picture>
                                            <source type="image/webp" srcset="{{$imageLink}}">
                                            <source type="image/{{$extension}}" srcset="{{$url}}">
                                            <img class="img-fluid" src="{{$url}}" alt="{{$article->title}}">
                                        </picture>
                                    @else
                                        <img src="{{asset('public/theme/assets/media/img/blog1.jpg')}}" class="img-fluid" alt="">
                                    @endif
                                </a>
                            </div>

                            <div class="post-body">
                                <div class="post-meta">
                           <span class="post-author">
                             <a href="{{url('edufair/news'.'/'.$article->slug)}}">BY {{$article->user->name}}</a>
                           </span>

                                    <div class="post-meta-date">
                                        {{date('M d, Y',strtotime($article->created_at))}}
                                    </div>
                                </div>
                                <div class="entry-header">
                                    <h2 class="entry-title">
                                        <a href="{{url('edufair/news'.'/'.$article->slug)}}">{{$article->title}}</a>
                                    </h2>
                                </div><!-- header end -->

{{--                                <div class="entry-content">--}}
{{--                                    <p>Theedunepal.com has announced virtual education fair aimed at SEE Appeared Students</p>--}}
{{--                                </div>--}}

{{--                                <div class="post-footer">--}}
{{--                                    <a href="news-single.html" class="btn-link">Read More <i class="icon icon-arrow-right"></i></a>--}}
{{--                                </div>--}}

                            </div><!-- post-body end -->
                        </div><!-- post end-->
                    </div>
                    @endforeach
                    <!-- col end-->
                </div><!-- row end-->
            </div><!-- container end-->
        </div>
        @endif

@endsection
@section('gallery_img_popup_style')
            <div id="fb-root"></div>
            <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0&appId=276449176684106&autoLogAppEvents=1" nonce="IFMauZlY"></script>
@endsection

@section('after_js')
    @if(!(\Illuminate\Support\Facades\Auth::check()))
    <script type="text/javascript">
        $(window).on('load',function(){
            $('#myModal').modal('show');
        });
    </script>
    @endif