@extends('template.portal.layout')
@section('content-head')
    @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['urlimagen'])}}" alt="slide" class="carousel-img">
                                    @if($banner['con_texto'])
                                        <div class="carousel-caption banner-caption">
                                            <div class="single-caption">
                                            <span class="font-condensed"
                                                  style="display:block; font-size:60px">{{ $banner['titulo'] }}</span>
                                                <span class="font-condensed"
                                                      style="display:block; font-size:50px; color: #00af7e">{{ $banner['descripcion'] }}</span>
                                            </div>
                                        </div>
                                    @endif
                                </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
@endsection

@section('content-body')
    <div class="row">
        <div class="col-md-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <h3 class="titulo-default"><i class="icon-feed"></i> Noticias</h3>
                    </div>
                    <div class="actions" style="padding: 14px 0 6px 0;">
                        <a href="{{ url('noticias') }}" class="link-underlined color-secondary" style="">Ver
                            m&aacute;s</a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        @if(!empty($noticias) && count($noticias) > 0)
                            @foreach($noticias as $noticia)
                                <div class="col-md-12 noticia-container" style="min-height:100px">
                                    <div class="noticia-img">
                                        <img src="{{asset($noticia['urlimage'])}}" alt="Imagen noticia">
                                    </div>
                                    <div class="noticia-contenido">
                                        <a href=" {{ url('noticias/detalle',['id' => $noticia['slug']]) }}">
                                            <h5 style="font-weight:500; margin-bottom:10px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; margin: 0; font-size:16px">{{ $noticia['titulo'] }}</h5>
                                        </a>
                                        <div class="text-right" style="font-size: 12px">
                                            Publicado: {{ $noticia['created_at']->diffForHumans() }}</div>
                                        <div class="dot-ellipsis dot-height-60 margin-bottom-20">
                                            <p class="parrafo-justificado">{{ $noticia['descripcion'] }}</p>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <label class="no-existen">No existen noticias</label>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="portlet light">
                <div class="portlet-title">
                    <div class="caption">
                        <h3 class="titulo-default"><i class="icon-calendar"></i> Eventos</h3>
                    </div>
                    <div class="actions" style="padding: 14px 0 6px 0;">
                        <a href="{{ url('eventos') }}" class="link-underlined color-secondary" style="">Ver
                            m&aacute;s</a>
                    </div>
                </div>
                <div class="portlet-body">
                    <div class="row">
                        @if(!empty($eventos) && count($eventos) > 0)
                            @foreach($eventos as $evento)
                                <div class="col-lg-4 col-md-4 col-sm-3 col-xs-6 evento-index-responsive"
                                     style="padding-bottom:16px">
                                    <a href="{{ url('eventos/detalle',['id' => $evento['slug'] ]) }}">
                                        <div style="height: 0; width: 100%; padding-bottom: 100%; border: 5px solid #ECEEF5; background: url({{asset($evento['imagen_pequenia_url'])}}) no-repeat center center;background-size:cover;"></div>
                                    </a>
                                </div>
                            @endforeach
                        @else
                            <label class="no-existen">No existen eventos</label>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12 text-center">
            @if(!empty($enlaces_estado) && count($enlaces_estado) > 0)
                <div id="anuncios" class="owl-carousel owl-theme estado-carousel"
                     style="width: 100%; height: auto; margin: 0 auto">
                    @foreach($enlaces_estado as $enlace)
                        <div class="item">
                            <a href="{{ $enlace['url'] }}" target="_blank">
                                <img src="{{asset($enlace['urlimagen'])}}" alt="{{ $enlace['nombre'] }}"
                                     style="width: 221px; height: 61px; object-fit: cover">
                            </a>
                        </div>
                    @endforeach
                </div>

            @endif
        </div>
    </div>
    <div class="modal fade bs-modal-lg" id="mod-anuncios" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title caption-subject sbold"> Anuncios de la Instituci&oacute;n </h4>
                </div>
                <div class="modal-body">
                    <div id="manuncios" class="owl-carousel owl-theme modal-carousel"  style="width: 100%; height: auto; margin: 0 auto">
                        @if(!empty($manuncios) && count($manuncios) > 0)
                            @foreach($manuncios as $anuncio)
                                <div class="item">
                                    <img src="{{ asset($anuncio['urlimagen']) }}" alt="banner" class="anuncio-img"/>
                                </div>
                            @endforeach
                        @else
                            <label>No existen anuncios activos</label>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $('.estado-carousel').owlCarousel({
            loop: true,
            margin: 50,
            autoplay: true,
            autoplayTimeout: 5000,
            responsive: {
                0: {
                    items: 1
                },
                600: {
                    items: 3
                },
                1000: {
                    items: 4
                }
            }
        });
                @if(!empty($manuncios) && count($manuncios) > 0)
        var owlCarousel = $('.modal-carousel');
        $('#mod-anuncios').on('shown.bs.modal', function (event) {
            owlCarousel.owlCarousel({
                items: 1,
                loop: true,
                margin: 10
            });
        });
        $( document ).ready(function() {
            setTimeout(function() {
                $('#mod-anuncios').modal('show');
            }, 3000);
        });
        @endif
    </script>
@endsection