@extends('frontend.default') 
@section('content')
      
        <!-- News Ticker Start -->
        <div class="news--ticker">
            <div class="container">
                <div class="title">
                    <h2>Latest Updates</h2>
                    <!--<span>(Update few minutes ago)</span>-->
                </div>

                <div class="news-updates--list" data-marquee="true">
                    <ul class="nav">
                        @foreach($blog as $blogs)
                        <li>
                            <h3 class="h3"><a href="{{ url('newssingle/'.$blogs->slug) }}">{!! $blogs->short_description !!}</a></h3>
                        </li>
                        @endforeach 
                    </ul>
                </div>
            </div>
        </div>
        <!-- News Ticker End -->
          
        @foreach($article as $article)
        <div class="main--breadcrumb">
            <div class="container">
                <ul class="breadcrumb" style="text-transform: uppercase;">
                    <li><a href="#" class="btn-link"><i class="fa fm fa-home"></i>MetroKerala</a></li>  
                    <li><a href="#" class="btn-link"> {!!  $article->short_description  !!} </a></li>  
                </ul>
            </div>
        </div>
        <!-- Main Breadcrumb End -->
        
        <!-- Main Content Section Start -->
        <div class="main-content--section pbottom--30">
            <div class="container">
                <div class="row">
                    <!-- Main Content Start -->
                    <div class="main--content col-md-8" data-sticky-content="true">
                        <div class="sticky-content-inner">
                            <!-- Post Item Start -->
                            <div class="post--item post--single post--title-largest pd--30-0">
                                <div class="post--img">
                                    
                                    @if($article->category == "9")
                                    <iframe width="100%" height="420px" src="https://www.youtube.com/embed/{{$article->file}}?autoplay=1&mute=1&rel=0" title="YouTube video player" autoplay="autoplay" frameborder="0" allow="accelerometer; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                    @else
                                    <a href="#" class="thumb"><img src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$article->file}}" alt=""></a> 
                                    @endif

                                    <div class="post--map">
                                        <!--<p class="btn-link"><i class="fa fa-map-o"></i>Location in Google Map</p>-->

                                        <div class="map--wrapper">
                                            <div data-map-latitude="23.790546" data-map-longitude="90.375583" data-map-zoom="6" data-map-marker="[[23.790546, 90.375583]]"></div>
                                        </div>
                                    </div>
                                </div>

                                <div class="post--cats">
                                    <ul class="nav">
                                        @if(count($newstag) >= "1")
                                        <li><span><i class="fa fa-tags"></i></span></li>
                                        @foreach($newstag as $newstags)
                                        <li><a href="{{ asset('gadgets') }}">{{$newstags->tags}}</a></li>
                                        @endforeach
                                        @endif
                                    </ul>
                                </div>

                                <div class="post--info">
                                    <ul class="nav meta">
                                        <li><a href="#">{{$article->author}}</a></li>
                                        <li><a href="#">{{$article->addeddate}}</a></li> 
                                    </ul>

                                    <div class="title">
                                        <h2 class="h4" style="font-size: 30px;"> {!!  $article->short_description   !!}</h2>
                                    </div>
                                </div>

                                <div class="post--content">
                                     <p> {!! $article->content !!} </p> 
                                </div>
                            </div>
                            <!-- Post Item End -->
                    
                            <!-- Advertisement Start -->
                            
                            @foreach($advertisementfour as $advertisementfour)
                            <div class="col-sm-12"> 
                                <a href="{{$advertisementfour->url}}" target="_blank">
                                <img src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$advertisementfour->file}}" alt="" style="width:100%;height:80px;">
                                <p class="img-caption">   </p> 
                                </a>
                            </div>
                            @endforeach
                            <!-- Advertisement End -->

                            <!-- Post Tags Start -->
                            <div class="post--tags">
                                <ul class="nav">
                                    @if(count($newstag) >= "1")
                                    <li><span><i class="fa fa-tags"></i></span></li>
                                    @foreach($newstag as $newstag)
                                    <li><a href="{{ asset('gadgets') }}">{{$newstag->tags}}</a></li>
                                    @endforeach
                                    @endif
                                </ul>
                            </div>
                            <!-- Post Tags End -->

                            <!-- Post Social Start -->
                            <div class="post--social pbottom--30">
                                <span class="title"><i class="fa fa-share-alt"></i></span>
                                
                                <!-- Social Widget Start -->
                                <div class="social--widget style--4">
                                    <ul class="nav">
                                        <li><a href="https://www.facebook.com/metrokerala/?ref=pages_you_manage" target="_blank"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="#"><i class="fa fa-twitter"></i></a></li> 
                                        <li><a href="#"><i class="fa fa-instagram"></i></a></li> 
                                        <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    </ul>
                                </div>
                                <!-- Social Widget End -->
                            </div>
                              
                            <!-- Comment Form End -->
                            <!-- Post Author Info Start -->
                            
                            @foreach($auther as $auther)
                            @if($auther->name != "MK Newsdesk")
                            <div class="post--author-info clearfix">
                                <div class="img">
                                    <div class="vc--parent">
                                        <div class="vc--child">
                                            <a href="author.html" class="btn-link">
                                                
                                                @if(!empty($auther->file))
                                                <img src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$auther->file}}" alt="">
                                                @else
                                                <img src="{{ asset('frontend/mk-fav.png') }}" alt="">
                                                @endif 
                                                <p class="name">  {{ $auther->name }}</p>
                                            </a>
                                        </div>
                                    </div>
                                </div>

                                <div class="info">
                                    <h2 class="h4"> About The Author</h2>

                                    <div class="content">
                                        <p> {{ $auther->aboutauthor }} </p>
                                    </div>

                                    <ul class="social nav">
                                        <!--<li><a href="{{ $auther->web }}" target="_blank" rel="noopener noreferrer"><i class="fa fa-globe"></i></a></li>-->
                                        <!--<li><a href="#"><i class="fa fa-twitter"></i></a></li> -->
                                        <!--<li><a href="#"><i class="fa fa-rss"></i></a></li>-->
                                    </ul>
                                </div>
                            </div>
                            @endif
                            @endforeach
                            
                        </div>
                    </div>
                    <!-- Main Content End -->

                    <!-- Main Sidebar Start -->
                    <div class="main--sidebar col-md-4 ptop--30 pbottom--30" data-sticky-content="true">
                        <div class="sticky-content-inner">
                            
                            <div class="widget">
                                <div class="widget--title">
                                    <h2 class="h4">Get Newsletter</h2> 
                                </div>

                                <div class="subscribe--widget">
                                    <div class="content">
                                        <p>Subscribe to our newsletter to get  latest news, popular news and exclusive updates.</p>
                                    </div>

                                    <form action="https://themelooks.us13.list-manage.com/subscribe/post?u=79f0b132ec25ee223bb41835f&id=f4e0e93d1d" method="post" name="mc-embedded-subscribe-form" target="_blank" data-form="mailchimpAjax">
                                        <div class="input-group">
                                            <input type="email" name="EMAIL" placeholder="E-mail address" class="form-control" autocomplete="off" required>

                                            <div class="input-group-btn">
                                                <button type="submit" class="btn btn-lg btn-default active"><i class="fa fa-paper-plane-o"></i></button>
                                            </div>
                                        </div>

                                        <div class="status"></div>
                                    </form>
                                </div>
                            </div>
 
                            <div class="widget">
                                <div class="widget--title">
                                    <h2 class="h4">Advertisement</h2> 
                                </div>

                                <div class="ad--widget"> 
                                    @foreach($advertisementtwo as $advertisementtwo)
                                    <a href="{{$advertisementtwo->url}}" target="_blank">
                                    <img src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$advertisementtwo->file}}" alt="">
                                    </a>
                                    @endforeach 
                                </div>
                            </div>
 
                            <div class="widget">
                                <div class="ad--widget">
                                    <div class="row">
                                        @foreach($advertisementsix as $advertisementsix)
                                        <div class="col-sm-6">
                                            <a href="{{$advertisementsix->url}}" target="_blank">
                                                <img src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$advertisementsix->file}}" alt="">
                                            </a>
                                        </div> 
                                        @endforeach
                                    </div>
                                </div>
                                <!-- Ad Widget End -->
                            </div>
                             
                            <!-- Widget Start -->
                            @if(count($newsfeaturedarticle) >= "1")
                            <div class="widget">
                                <div class="widget--title" data-ajax="tab">
                                    <h2 class="h4">Related Articles</h2>

                                    <div class="nav">
                                         
                                    </div>
                                </div>

                                <!-- List Widgets Start -->
                                <div class="list--widget list--widget-1" data-ajax-content="outer">
                                    <!-- Post Items Start -->
                                    <div class="post--items post--items-3">
                                        <ul class="nav" data-ajax-content="inner">
                                       
                                            @foreach($newsfeaturedarticle as $newsfeaturedarticle)
                                            <li> 
                                                <div class="post--item post--layout-3">
                                                    <div class="post--img">
                                                        <a href="{{$newsfeaturedarticle->slug}}" class="thumb"><img style="height:80px;" src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$newsfeaturedarticle->file}}" alt=""></a>

                                                        <div class="post--info">
                                                            <ul class="nav meta">
                                                                <li><a>{{$newsfeaturedarticle->author}}</a></li>
                                                                <li><a>{{$newsfeaturedarticle->addeddate}}</a></li>
                                                            </ul>

                                                            <div class="title">
                                                                <h3 class="h4" style="line-height: 18px;"><a href="{{$newsfeaturedarticle->slug}}" class="btn-link" style="font-size: 12px;">{{$newsfeaturedarticle->short_description}}</a></h3>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </li>
                                            @endforeach
                                            
                                        </ul>

                                        <!-- Preloader Start -->
                                        <div class="preloader bg--color-0--b" data-preloader="1">
                                            <div class="preloader--inner"></div>
                                        </div>
                                        <!-- Preloader End -->
                                    </div>
                                    <!-- Post Items End -->
                                </div>
                                <!-- List Widgets End -->
                            </div>
                            @else
                            <div class="widget">
                                <div class="widget--title" data-ajax="tab">
                                    <h2 class="h4">PREVIOUS Choice</h2>

                                    <div class="nav">
                                         
                                    </div>
                                </div>

                                <!-- List Widgets Start -->
                                <div class="list--widget list--widget-1" data-ajax-content="outer">
                                    <!-- Post Items Start -->
                                    <div class="post--items post--items-3">
                                        <ul class="nav" data-ajax-content="inner">
                                       
                                            @foreach($editorschoice as $editorschoice)
                                            <li> 
                                                <div class="post--item post--layout-3">
                                                    <div class="post--img">
                                                        <a href="{{$editorschoice->slug}}" class="thumb"><img style="height:80px;" src="{{asset('frontend/bannerimage/blog/updatedpics/home/')}}/{{$editorschoice->file}}" alt=""></a>

                                                        <div class="post--info">
                                                            <ul class="nav meta">
                                                                <li><a>{{$editorschoice->author}}</a></li>
                                                                <li><a>{{$editorschoice->addeddate}}</a></li>
                                                            </ul>

                                                            <div class="title">
                                                                <h3 class="h4" style="line-height: 18px;"><a href="{{$editorschoice->slug}}" class="btn-link" style="font-size: 12px;">{{$editorschoice->short_description}}</a></h3>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div> 
                                            </li>
                                            @endforeach
                                            
                                        </ul>

                                        <!-- Preloader Start -->
                                        <div class="preloader bg--color-0--b" data-preloader="1">
                                            <div class="preloader--inner"></div>
                                        </div>
                                        <!-- Preloader End -->
                                    </div>
                                    <!-- Post Items End -->
                                </div>
                                <!-- List Widgets End -->
                            </div>
                            @endif
                            
                            
                            <!-- Widget End -->
                        </div>
                    </div>
                    <!-- Main Sidebar End -->
                </div>
            </div>
        </div>
        
        @endforeach
 
 
 <script>
        var slideIndex = 0;
        var slideIndexs = 0;
         
        showSlider();
        
      
        function showSlider() { 
          var k;
          
          var slide = document.getElementsByClassName("mySlide");
          var dot = document.getElementsByClassName("dots");
          for (k = 0; k < slide.length; k++) {
            slide[k].style.display = "none";  
          }
          slideIndexs++;
          if (slideIndexs > slide.length) {slideIndexs = 1}    
          for (k = 0; k < dot.length; k++) {
            dot[k].className = dot[k].className.replace(" active", "");
          }
          slide[slideIndexs-1].style.display = " contents";  
          dot[slideIndexs-1].className += " active";
          setTimeout(showSlider,6000); // Change image every 2 seconds
          
        }
        

    </script>
 
 
 
@endsection