@extends('site.layouts.app')
@section('title',Request()->settings->settings_website)
@section('custom_style')
<link rel="stylesheet" href="{{ asset(config('constants.site_path').'css/plyr.css') }}">
<style>
@media screen and (min-width: 1024px) {
  .marq_news {
    padding: 10px 25px 12px 205px;
  }
}
</style>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v21.0"></script>
@endsection
@section('contents')
<section class="breaking pt-25 pb-25">
    <div class="container">
        <div class="row">
            <div class="col-xl-12">
                <div class="breaking__meta mb-30">
                    <ul>
                        <li><i class="fas fa-calendar-alt"></i> <span>{{ date('l, d F Y') }}</span></li>
                    </ul>
                </div>
            </div>
        </div>
        @if($flash_news_all->count() > 0)
        <div class="row">
            <div class="col-12">
                <div class="breaking__wrapper">
                    <h5 class="breaking__title ">Breaking News</h5>
                    <div class="marq_news" style="display: block;width: 100%;z-index: 1;">
                        <marquee width="100%" loop="true" onmouseover="this.stop()" onmouseout="this.start()">
                            @foreach($flash_news_all as $flash_news)
                            <i class="fa fa-star" @if($loop->iteration != 1) style="margin-left: 15px;" @endif></i> <a href="{{ $flash_news->fnews_link }}" target="_blank">{{ $flash_news->fnews_title }}</a>
                            @endforeach
                        </marquee>
                    </div>
                </div>
            </div>
        </div>
        @endif
    </div>
</section>
<section class="hero-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-9 col-md-12">
                <div class="hero pos-relative mb-30">
                    
                    <!--<video preload="none" id="player" autoplay controls crossorigin></video>-->
                    <iframe style="width:100%; height:500px;" allowfullscreen src="https://stream.wsplcloud.com/ragamtv.html"></iframe>
                    <!--<iframe width="100%" height="500px" src="https://stream.wsplcloud.com:5443/live/play.html?id=ragamtv" frameborder="0" allowfullscreen></iframe>-->
                   
                    
                </div>
            </div>
            <div class="col-lg-3 col-md-12"><div class="fb-page" data-href="https://www.facebook.com/ragamseithigal" data-tabs="timeline" data-width="" data-height="500" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/ragamseithigal" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/ragamseithigal">Ragam News</a></blockquote></div>
            </div>
        </div>
    </div>
</section>
@if($latest_news_all->count() > 0)
<section class="latest-area pt-30 pb-60">
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="section-title mb-30">
                    <h2>latest news</h2>
                </div>
            </div>
        </div>
        <div class="row">
            @foreach($latest_news_all as $latest_news)
            <div class="col-xl-4 col-lg-6 col-md-6">
                <div class="postbox mb-30">
                    <div class="postbox__thumb">
                        <a href="{{ route('news_details',['category'=>base64_encode($latest_news->category_id),'slug'=>base64_encode($latest_news->news_id)]) }}">
                            <img src="{{ asset(config('constants.admin_path').'uploads/news/'.$latest_news->news_image) }}" style="height: 249px" alt="hero image">
                        </a>
                    </div>
                    <div class="postbox__text pt-10">
                        <div class="postbox__text-meta pb-10">
                            <ul>
                                <li>
                                    <i class="fas fa-calendar-alt"></i>
                                    <span>{{ date('d M Y',strtotime($latest_news->news_date)) }}</span>
                                </li>
                            </ul>
                        </div>
                        <h4 class="pr-0">
                            <a href="{{ route('news_details',['category'=>base64_encode($latest_news->category_id),'slug'=>base64_encode($latest_news->news_id)]) }}">{{ $latest_news->news_title }}</a>
                        </h4>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@endif
@endsection
@section('custom_script')
<script src="{{ asset(config('constants.site_path').'js/plyr.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
//(function () {
  var video = document.querySelector('#player');

  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource('https://stream.wsplcloud.com/ragamtv/index.m3u8');
    hls.attachMedia(video);
    hls.on(Hls.Events.MANIFEST_PARSED,function() {
        video.muted = true;
        video.play();
    });
  }else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = 'https://stream.wsplcloud.com/ragamtv/index.m3u8';
    video.addEventListener('loadedmetadata', function () {
      video.play();
    });
  }
  
  plyr.setup(video);
//})();    
</script>
@endsection