@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="{{$blogs->subcategory}}/{{$blogs->slug}}"> {!! $blogs->content !!}</a></h3>
                        </li>
                        @endforeach 
                    </ul>
                </div>
            </div>
        </div>   
        <!-- Main Breadcrumb Start -->
        <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>  
                </ul>
            </div>
        </div>
        <!-- Main Breadcrumb End -->  
          
        

        <!-- Main Content Section Start -->
        
        
        
        <div class="main-content--section pbottom--30">
            <div class="container">
                <!-- Main Content Start -->
                <div class="main--content">
                    <!-- Post Items Start -->
                    <div class="post--items post--items-1 pd--30-0">
                        <div class="row gutter--15">
                            <div class="col-md-6">
                                <!-- Post Item Start -->
                                <div class="post--item post--layout-1 post--title-larger">
                                    <div class="post--img">
                                        
                                        @foreach($sliderbanner as $sliderbanner)
                                        <div class="slideshow-container"> 
                                            <div class="mySlides fade"> 
                                              <img src="frontend/bannerimage/blog/updatedpics/home/{{$sliderbanner->file}}" style="width:100%;height:395px;"> 
                                              
                                              <a class="cat"> {{$sliderbanner->subcategory}} </a> 
    
                                              <div class="post--info">
                                                <ul class="nav meta">
                                                    <li><a> {{$sliderbanner->author}} </a></li>
                                                    <li><a> {{$sliderbanner->addeddate}} </a></li>
                                                </ul>
    
                                                <div class="title">
                                                    <h2 class="h4"><a href="{{$sliderbanner->subcategory}}/{{$sliderbanner->slug}}" class="btn-link"> {{$sliderbanner->short_description}} </a></h2>
                                                </div>
                                              </div> 
                                            </div>  
                                        </div>
                                        @endforeach
                                                          
                                        <div style="text-align:center;padding-top:10px;">
                                        <span class="dot"></span> 
                                        <span class="dot"></span> 
                                        <span class="dot"></span> 
                                        </div>
                                        
                                    </div>
                                </div>
                                <!-- Post Item End -->
                            </div>

                            <div class="col-md-6">
                                <div class="row gutter--15">
                                    @foreach($secbanner as $secbanner)
                                    <div class="col-xs-6 col-xss-12">
                                        <!-- Post Item Start -->
                                        <div class="post--item post--layout-1 post--title-large">
                                            <div class="post--img">
                                                <a class="thumb"><img src="frontend/bannerimage/blog/updatedpics/home/{{$secbanner->file}}" style="width:100%;height:190px;" alt=""></a>
                                                <a class="cat"> {{$secbanner->subcategory}} </a> 

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

                                                    <div class="title">
                                                        <h2 class="h4"><a href="{{$secbanner->subcategory}}/{{$secbanner->slug}}" class="btn-link">{{$secbanner->short_description}}</a></h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Post Item End -->
                                    </div>
                                    @endforeach

                                    @foreach($advertisement as $advertisement)
                                    <div class="col-xs-6 hidden-xss">
                                        <!-- Post Item Start -->
                                        <div class="post--item post--layout-1 post--title-large">
                                            <div class="post--img">
                                                <a class="thumb"><img src="frontend/bannerimage/blog/updatedpics/home/{{$advertisement->file}}" style="width:100%;height:190px;" alt=""></a>
                                                <a class="cat"> {{$advertisement->subcategory}} </a> 

                                                <!--<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="" data-map-longitude="" data-map-zoom="6" data-map-marker="[[23.790546, 90.375583]]"></div>-->
                                                    <!--</div>-->
                                                <!--</div>-->

                                                <div class="post--info">
                                                    <ul class="nav meta">
                                                        <li><a> {{$advertisement->author}} </a></li>
                                                        <!--<li><a> {{$advertisement->imagename}} </a></li>-->
                                                    </ul>

                                                    <div class="title">
                                                        <h2 class="h4"><a href="{{$advertisement->subcategory}}/{{$advertisement->slug}}" class="btn-link"> {{$advertisement->short_description}} </a></h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!-- Post Item End -->
                                    </div>
                                    @endforeach

                                    @foreach($lastbanner as $lastbanner)
                                    <div class="col-sm-12 hidden-sm hidden-xs">
                                        <!-- Post Item Start -->
                                        <div class="post--item post--layout-1 post--title-larger">
                                            <div class="post--img">
                                                <a href="{{$lastbanner->subcategory}}/{{$lastbanner->slug}}" class="thumb"><img src="frontend/bannerimage/blog/updatedpics/home/{{$lastbanner->file}}" style="width:100%;height:190px;" alt=""></a>
                                                <a class="cat">{{$lastbanner->subcategory}}</a> 

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

                                                    <div class="title">
                                                        <h2 class="h4"><a href="{{$lastbanner->subcategory}}/{{$lastbanner->slug}}" class="btn-link"> {{$lastbanner->short_description}} </a></h2>
                                                    </div>
                                                </div>
                                            </div>
                                        </div> 
                                    </div>
                                    @endforeach
                                    
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Post Items End -->
                </div>
        
        
        
        
        
         
        <!-- Advertisement End -->

        <div class="row">
            <!-- Main Content Start -->
            <div class="main--content col-md-8 col-sm-7" data-sticky-content="true">
                <div class="sticky-content-inner">
                    <div class="row">
                         

                        @if(!empty($blog[0]->short_description))
                        <div class="col-md-12 ptop--30 pbottom--30">
                            <!-- Post Items Title Start -->
                            <div class="post--items-title" data-ajax="tab">
                                  
                            </div>
                             
                            <div class="post--items post--items-2" data-ajax-content="outer">
                                <ul class="nav" data-ajax-content="inner">
                                    
                                    @foreach($blog as $blog)
                                    
                                    <li>
                                    <!-- Post Item Start -->
                                    <div class="post--item">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="post--img"> 
                                                    <a class="thumb" href="https://www.youtube.com/embed/{{$blog->file}}">
                                                      <iframe width="100%" height="200px" src="https://www.youtube.com/embed/{{$blog->file}}?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                    </a>
                                                    <a href="{{$blog->subcategory}}/{{$blog->slug}}" class="cat">{{$blog->subcategory}}</a> 
                                                </div>
                                            </div>

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

                                                    <div class="title">
                                                        <h3 class="h4" style="font-size:11px;"><a href="{{$blog->subcategory}}/{{$blog->slug}}" class="btn-link"> {!! $blog->short_description !!} </a></h3>
                                                    </div>
                                                </div>

                                                <div class="post--content">
                                                    <p> @if(!empty($blog->content)) {{ mb_substr(strip_tags( $blog->content),0,150)." ...."  }} @else {{ mb_substr(strip_tags($blog->content),0,150)."...."}} @endif </p>
                                                </div>

                                                <div class="post--action">
                                                    <a href="{{$blog->subcategory}}/{{$blog->slug}}"> Watch Now...</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!-- Post Item End -->
                                </li>

                                <li>
                                    <!-- Divider Start -->
                                    <hr class="divider">
                                    <!-- Divider End -->
                                </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>
                         @endif
                         
                         

                           
                    </div>
                </div>
            </div>
            <!-- Main Content End -->

            <!-- Main Sidebar Start -->
            <div class="main--sidebar col-md-4 col-sm-5 ptop--30 pbottom--30" data-sticky-content="true">
                <div class="sticky-content-inner">
                      
                    <div class="widget">
                        <!-- Ad Widget Start -->
                        <div class="ad--widget">
                            <div class="row">
                                @foreach($advertisementsix as $advertisementsix)
                                <div class="col-sm-6">
                                    <a href="#">
                                        <img src="frontend/bannerimage/blog/updatedpics/home/{{$advertisementsix->file}}" alt="">
                                    </a>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        <!-- Ad Widget End -->
                    </div>
                     
                     
                    
                    <div class="widget">
                        <div class="widget--title">
                            <h2 class="h4">Stay Connected</h2>
                            <i class="icon fa fa-share-alt"></i>
                        </div>

                        <!-- Social Widget Start -->
                        <div class="social--widget style--7">
                            <ul class="nav row">
                                <li class="col-md-6 col-sm-12 col-xs-6 col-xxs-12 facebook">
                                    <a href="https://www.facebook.com/metrokerala/?ref=pages_you_manage" target="_blank">
                                        <i class="fa fa-facebook"></i>
                                        <span>Facebook</span>
                                    </a>
                                </li>

                                <li class="col-md-6 col-sm-12 col-xs-6 col-xxs-12 twitter">
                                    <a href="#">
                                        <i class="fa fa-twitter"></i>
                                        <span>Twitter</span>
                                    </a>
                                </li>
 
                                <li class="col-md-6 col-sm-12 col-xs-6 col-xxs-12 youtube">
                                    <a href="#">
                                        <i class="fa fa-youtube-play"></i>
                                        <span>Youtube</span>
                                    </a>
                                </li>
 
                                <li class="col-md-6 col-sm-12 col-xs-6 col-xxs-12 linkedin">
                                    <a href="#">
                                        <i class="fa fa-linkedin"></i>
                                        <span>Linkedin</span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <!-- Social Widget End -->
                    </div>
                     
                     
                     
                    <!-- Widget Start -->
                    <div class="widget">
                        <div class="widget--title" data-ajax="tab">
                            <h2 class="h4">Editors 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->subcategory}}/{{$editorschoice->slug}}" class="thumb"><img style="height:100px;" src="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"><a href="{{$editorschoice->subcategory}}/{{$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>
                    
                    <!-- Widget End -->
                </div>
            </div>
            <!-- Main Sidebar End -->
        </div>
    </div>
</div>
<!-- Main Content Section End -->

                             
                             
         

@endsection