<!--Page Header-->
<div class="page-header title-area">
    <div class="header-title">
        <div class="container">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <h1 class="page-title">{{ $news->title }}</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-md-8 col-sm-12 col-xs-12 site-breadcrumb">
                    <nav class="breadcrumb">
                        <a class="{{ route('home') }}" href="#"><span>Home</span></a>
                        <i class="fa fa-angle-right" aria-hidden="true"></i>
                        <span>{{ trim($news->title) }}</span>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>
<!--Page Header end-->

<!--blog page sec-->
<section class="blogpage single-post blog-classic  secpadd">
    <div class="container">
        <div class="row">
            <div class="col-md-8">

                <div class="hentry">
                    <header class="entry-header">
                        <div class="entry-thumbnail">
                            <img style="height: 450px; width:100%; object-fit:cover;" src="{{ asset($news->image) }}"
                                alt="{{ $news->alias }}">
                            <div class="entry-time">
                                <span class="day">{{ $news->created_at->format('d') }}</span>
                                <span class="month">{{ $news->created_at->format('M') }}</span>
                            </div>
                        </div>

                        <div class="entry-meta clearfix">
                            <span class="meta author vcard">by <a href="#">Admin</a></span>
                            <span class="meta cat-links"><a href="#">Topline</a>, <a
                                    href="#">Cargo</a></span>
                        </div>

                        <h2 class="entry-title">{{ $news->title }}</h2>
                    </header>

                    <div class="entry-content">
                        {!! $news->text !!}
                    </div>
                    <!-- .entry-content -->

                    <footer class="entry-footer clearfix">
                        <nav class="navigation post-navigation">

                            <!-- .nav-links -->
                        </nav>
                        <!-- .navigation -->
                    </footer>
                    <!-- .entry-footer -->
                </div>
            </div>

            <div class="col-md-4">
                <div class="tracksidebar">
                    {{-- <div class="widget widget_search">
                        <form class="search-form">
                            <label>
                                <input class="search-field" placeholder="Search …" type="search">
                            </label>
                            <input class="search-submit" value="Search" type="submit">
                        </form>
                    </div> --}}


                    <div class="widget popular-posts-widget">
                        <h4 class="widget-title">Latest Post</h4>
                        @foreach ($popularNews as $item)
                            <div class="popular-post post clearfix ">
                                <a class="widget-thumb" href="#"><img src="{{ asset($item->image) }}"
                                        alt="{{ $item->alias }}"
                                        style="height: 75px; width:75px; object-fit:cover;"></a>
                                <div class="mini-widget-title">
                                    <h4><a href="{{ route('showNews', $item->alias) }}">{{ $item->title }}</a></h4>
                                    <i class="fa fa-clock-o" aria-hidden="true"></i>
                                    <span class="entry-date">{{ $item->created_at->format('M d, Y') }}</span>
                                </div>
                            </div>
                        @endforeach

                    </div>

                </div>
            </div>

        </div>
    </div>
</section>