@extends('frontend.default')

@section('content')

    <style>
        .post--img .thumb .homeimgcatone
        {
            height:120px;
        }
        .post--img .thumb .imgkeralafir
        {
            height:175px;
        }
        .post--img .thumb .indimg
        {
            height:80px;
        }
        .worldimg
        {
            height:89px;
        }
    </style>


        <!-- News Ticker Start -->
        <div class="news--ticker">
            <div class="container">
                <div class="title">
                    <h2>News Updates</h2> 
                </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->short_description}}</a></h3>
                        </li>
                        @endforeach 
                    </ul>
                </div>
                
            </div>
        </div>
        <!-- News Ticker End -->

        <!-- Main Content Section Start -->
        <div class="main-content--section pbottom--30">
            <div class="container">
                <!-- Main Content Start -->
                 
                <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">
                                
                                
                                <div class="col-md-12 ptop--30">
                                    <!-- Post Item Start -->
                                    <div class="post--item post--layout-1 post--title-larger">
                                        
                                        <div class="post--img">
                                            @foreach($midbanner as $midbanner)
                                            <div class="slideshow-container"> 
                                                <div class="mySlides fade">  
                                                  <iframe width="100%" height="395px" src="https://www.youtube.com/embed/{{$midbanner->file}}?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                                                  
                                                  <a class="cat"> {{$midbanner->short_description}} </a> 
        
                                                  <div class="post--info">
                                                    <!--<ul class="nav meta">-->
                                                    <!--    <li><a> {{$midbanner->author}} </a></li>-->
                                                    <!--    <li><a> {{$midbanner->addeddate}} </a></li>-->
                                                    <!--</ul>-->
        
                                                    <!--<div class="title">-->
                                                    <!--    <h2 class="h4"><a href="{{$midbanner->subcategory}}/{{$midbanner->slug}}" class="btn-link"> {{$midbanner->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>
                                 
                                 
                                 
                                
                                @if(!empty($subcategories[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($subcategories 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">
                            <!-- Widget Start -->
                            <div class="widget">
                                <div class="widget--title">
                                    <h2 class="h4">Tags</h2>
                                    <i class="icon fa fa-tags"></i>
                                </div>

                                <!-- Tags Widget Start -->
                                <div class="tags--widget style--1">
                                    <ul class="nav">
                                        @foreach($tag as $tag)
                                        <li><a>{{$tag->tags}}</a></li> 
                                        @endforeach
                                    </ul>
                                </div>
                                <!-- Tags Widget End -->
                            </div>
                            <!-- Widget End -->
 
                            
                            <!--<div class="widget">-->
                            <!--    <div class="widget--title">-->
                            <!--        <h2 class="h4">Archives</h2>-->
                            <!--        <i class="icon fa fa-folder-open-o"></i>-->
                            <!--    </div>-->

                                <!-- Nav Widget Start -->
                            <!--    <div class="nav--widget">-->
                            <!--        <ul class="nav">-->
                            <!--            <li><a href="#"><span>March 2017</span><span>(22)</span></a></li>-->
                            <!--            <li><a href="#"><span>April 2017</span><span>(16)</span></a></li>-->
                            <!--            <li><a href="#"><span>May 2017</span><span>(84)</span></a></li>-->
                            <!--            <li><a href="#"><span>January 2016</span><span>(11)</span></a></li>-->
                            <!--            <li><a href="#"><span>February 2016</span><span>(19)</span></a></li>-->
                            <!--            <li><a href="#"><span>March 2016</span><span>(36)</span></a></li>-->
                            <!--            <li><a href="#"><span>April 2016</span><span>(41)</span></a></li>-->
                            <!--            <li><a href="#"><span>October 2015</span><span>(39)</span></a></li>-->
                            <!--            <li><a href="#"><span>Nover 2015</span><span>(15)</span></a></li>-->
                            <!--            <li><a href="#"><span>Decemberr 2015</span><span>(28)</span></a></li>-->
                            <!--        </ul>-->
                            <!--    </div>-->
                                <!-- Nav Widget End -->
                            <!--</div>-->
                            <!-- Widget End -->

                             
                            <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--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-linkedin"></i></a></li> 
                                        <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                                    </ul>
                                </div>
                                <!-- Social Widget End -->
                            </div>
                            
                                   <!-- Widget Start -->
                            <div class="widget">
                                <div class="widget--title">
                                    <h2 class="h4">Get Newsletter</h2>
                                    <i class="icon fa fa-envelope-open-o"></i>
                                </div>

                                <!-- Subscribe Widget Start -->
                                <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="{{url('subscribe')}}" method="post">
                                         @csrf
                                        <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>
                                <!-- Subscribe Widget End -->
                            </div>
                            <!-- Widget End -->

 
                       
                            <!-- Widget Start -->
                            <div class="widget">
                                <div class="widget--title">
                                    <h2 class="h4">Advertisement</h2>
                                    <i class="icon fa fa-bullhorn"></i>
                                </div>

                                <!-- Ad Widget Start -->
                                <div class="ad--widget">
                                    @foreach($advertisementtwo as $advertisementtwo)
                                    <a>
                                        <img src="../frontend/bannerimage/blog/updatedpics/home/{{$advertisementtwo->file}}" alt="">
                                    </a>
                                    @endforeach
                                </div>
                                <!-- Ad Widget End -->
                            </div>
                            <!-- Widget End -->
                            
                            
                              <!-- Widget Start -->
                            <div class="widget">
                                <div class="widget--title" data-ajax="tab">
                                    <h2 class="h4"> Previous 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($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:80px;" 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" style="line-height: 18px;"><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