@extends('template.portal.layout')
@section('content-body')
    <div class="portlet light">
        <div class="portlet-title">
            <time class="text-uppercase" style="font-size: 12px">{{ \Jenssegers\Date\Date::parse($noticia['created_at'])->format('l j, F Y') }}</time>
            <h3 class="titulo-default text-center" style="margin-bottom: 0">{{ $noticia['titulo'] }}</h3>
        </div>
        <div class="portlet-body">
            <div class="img-default-container text-center margin-bottom-20">
                {{--<img src="{{ asset($noticia['urlimage']) }}">--}}
                @if(!empty($banners) && count($banners) > 0)
                    <div id="myBanners" class="carousel slide" data-ride="carousel">
                        <ol class="carousel-indicators">
                            @for($i = 0; $i < count($banners); $i++)
                                @if($i == 0)
                                    <li data-target="#myBanners" data-slide-to="0" class="active"></li>
                                @else
                                    <li data-target="#myBanners" data-slide-to="{{ $i }}"></li>
                                @endif
                            @endfor
                        </ol>
                        <div class="carousel-inner" role="listbox">
                            @foreach($banners as $banner)
                                @if($banner == $banners->first())
                                    <div class="item active">
                                        @else
                                            <div class="item">
                                                @endif
                                                <img src="{{asset($banner['url_image'])}}" alt="slide" class="carousel-img">
                                            </div>
                                            @endforeach
                                    </div>
                                    <a class="left carousel-control" href="#myBanners" role="button" data-slide="prev">
                                        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                        <span class="sr-only">Anterior</span>
                                    </a>
                                    <a class="right carousel-control" href="#myBanners" role="button" data-slide="next">
                                        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                        <span class="sr-only">Siguiente</span>
                                    </a>
                        </div>
                    </div>
                @endif
            </div>
            <p class="parrafo-justificado">{{ $noticia['descripcion'] }}</p>
            @if($noticia['video_url'])
                <div class="img-default-container text-center margin-bottom-20">
                    <iframe src="" id="ytpreview" style="width: 50%; height: 300px; padding:10px 10px 10px 10px;background:#1a1a1a;border-radius:3px;-moz-box-shadow:3px 3px 3px black;-webkit-box-shadow:3px 3px 3px black;box-shadow:3px 3px 3px black;" frameborder="0"></iframe>
                </div>
            @endif
        </div>
    </div>
    <script>
        var video = "{{ $noticia['video_url'] }}";
        if(video != undefined && video != ""){
            var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=|\?v=)([^#\&\?]*).*/;
            var match = video.match(regExp);
            $('#ytpreview').attr('src', 'https://www.youtube.com/embed/' + match[2] + '?vq=hd1080&cc_load_policy=1&fs=0&iv_load_policy=3&rel=0&showinfo=0&color=white&autohide=0&disablekb=1');
        }
        $('.estado-carousel').owlCarousel({
            loop: true,
            margin: 50,
            autoplay: true,
            autoplayTimeout: 5000,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 4
                }
            }
        });
    </script>
@endsection