@extends('templates.public.public-template')

@section('css')
    {!! Html::style('css/general/owl-carrusel/owl.carousel.css') !!}
    <style>
        .center-flex {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .btn-danger {
            color: rgba(1, 87, 77, 1);
            background-color: transparent;
            border: 2px solid #0098A6;
            border-radius: 20px;
        }

        .btn-danger:hover {
            color: #0098A6;
            background-color: #EEEEEE;
            border: 2px solid #0098A6;
            border-radius: 20px;
        }

        .hipervinculo {
            color: black;
            background: none;
            border: none;
        }

        .hipervinculo p {
            font-size: 12px;
        }

        .hipervinculo:hover {
            color: #FC510C;

        }
        .carousel-control.left {
            background-image: none !important;
        }
    </style>

@endsection

@section('js')
    {!! Html::script('js/general/owl-carrusel/owl.carousel.js') !!}
    {!! Html::script('https://platform.twitter.com/widgets.js') !!}
    {!! Html::script('js/general/ajax.js') !!}
    {!! Html::script('js/general/alert-message.js') !!}
    {!! Html::script('js/general/jquery.functions.js') !!}
    {!! Html::script('js/general/owl-carrusel/owl.carousel.js') !!}
    {!! Html::script('https://platform.twitter.com/widgets.js') !!}
    <script>
        $(document).on('click', '#leer-noticia', function (event) {
            event.preventDefault();
            var boton_nuevo = $(this);
            boton_nuevo.loadModalAjax({
                afterLoad: function (content, modal, btn_accept, btn_cancel, spinner) {
                    btn_cancel.text('Atras');
                    btn_accept.remove();
                }
            });
        });
    </script>
    <script>
        $(document).ready(function () {
            $(".owl-carousel").owlCarousel({
                loop: true,
                margin: 10,
                items: 4,
                nav: false
            });
        });
    </script>
@endsection

@section('contenido')
    <div class="container-fluid">
        <div class="row margen-cuerpo padre">
            <div class="col-md-8 col-sm-8 col-xs-12 col-md-push-1 col-sm-push-1 col-xs-push-0 hijo">
                <div class="row">
                    <div class="col-md-10 col-sm-10 col-xs-10">
                        <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 30px;">
                            <i>{{'Noticia / '.$noticia->titulo}}</i>
                            <hr>
                        </div>

                        @if($lista_imagen->count()>1)
                            <div id="carousel-noticia" class="carousel slide" data-ride="carousel">
                                <!-- Indicators -->
                                <ol class="carousel-indicators">
                                    @foreach($lista_imagen as $cont =>$imagen)
                                        <li data-target="#carousel-noticia" data-slide-to="{{$cont}}"
                                            class="@if($cont ==0)active @endif "></li>
                                    @endforeach
                                </ol>
                                <!-- Wrapper for slides -->
                                <div class="carousel-inner" role="listbox">
                                    @foreach($lista_imagen as $cont =>$imagen)
                                        <div class="item @if($cont ==0)active @endif ">
                                            <img src="{{$imagen->imagen}}"  class="img-responsive center-block" style='max-height: 500px; min-height: 500px' alt="Tehuelche Noticias">
                                            <div class="carousel-caption">
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                                <!-- Controls -->
                                <a class="left carousel-control" href="#carousel-noticia" role="button"
                                   data-slide="prev">
                                    <span class="glyphicon glyphicon-chevron-left" style="color: #000000;" aria-hidden="true"></span>
                                    <span class="sr-only">Previous</span>
                                </a>
                                <a class="right carousel-control" href="#carousel-noticia" role="button"
                                   data-slide="next">
                                    <span class="glyphicon glyphicon-chevron-right" style="color: #000000;" aria-hidden="true"></span>
                                    <span class="sr-only">Next</span>
                                </a>
                                <hr>
                            </div>
                        @else
                            <div class="col-md-12 col-sm-12 col-xs-12" style="margin-top: 10px">
                                <img src="{{$noticia->imagen}}"
                                     class="img-responsive center-block" alt="tehuelche noticias Aysen">
                            </div>
                        @endif

                        @if($noticia->audio!=null)
                            <div class="col-md-12 col-sm-12 col-xs-12 col-xs-push-0 text-center">
                                <hr>
                                <h3 class="text-center titulo gris">{{'Clip de Audio'}}</h3>
                                <audio controls="controls" >
                                    <source src="{{$noticia->audio}}" type="audio/mpeg">
                                    Este navegador no se encuentra actualizado.
                                </audio>
                            </div>
                        @endif
                        <div class="col-md-12 col-sm-12 col-xs-12 col-xs-push-0" style="margin-top: 20px">
                            <h1 class="text-center titulo gris">{{$noticia->titulo}}</h1>
                            <p class="text-center texto gris">
                                {{$noticia->date}}
                            </p>
                            <hr>
                            <span class="texto gris">{!!$noticia->texto!!}</span>
                            <p class="texto gris text-right">Autor: {{$noticia->autor}}</p>
                            <hr>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="row text-center" style="margin-top: 8em">
                            <div class="col-md-12">
                                <h4 class="titulo gris"><b> Ver Noticias Relacionadas:</b></h4>
                                @foreach($articulos_relacionados as $cont=>$articulo)
                                    <a href="{{route('get-ver-noticias',['id'=>$articulo->id]) }}" class="">
                                        <br>
                                        <p class="texto hipervinculo">{{$articulo->titulo}}</p>
                                    </a>
                                @endforeach
                            </div>
                        </div>
                        {{--}}<div class="row">
                            <div class="col-md-12">
                                <h5><b>Etiquetas:</b></h5>
                                @foreach($etiquetas as $etiqueta)
                                    <p>{{$etiqueta->nombre}}</p>
                                @endforeach
                            </div>
                        </div>--}}
                    </div>
                </div>
            </div>
            <div id="barra-lateral"
                 class="col-md-3 col-sm-3 col-xs-12  col-md-push-1 col-sm-push-1 col-xs-push-0 center-flex hijo">
                @include('pagina.inicio.parciales.lateral')
            </div>
        </div>
    </div>

    <section id="video">
        @include('pagina.inicio.parciales.videos')
    </section>
    <section id="apoyanos">
        @include('pagina.inicio.parciales.apoyanos')
    </section>
@endsection