@extends('layouts.guest')

@section('css')


    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css"/>



    <link rel="stylesheet" type="text/css" href="{{URL::asset('/css/landing-peliculas.css')}}"/>
@endsection

@section('content')

    <div class="carousel carousel--home">
        <div class="js-carousel carousel--slick">
            <li>
                <section class="carousel-item">
                    <div class=carousel-overlay></div>
                    <div id=picture-id-0 class="carousel-itemImage"
                         style="background-image: url({{URL::asset('/img/home/inicial-1.gif')}});">
                    </div>
                    <div class="carousel-itemCaption carousel-itemCaption--center"><h1>Un mes gratis de Minuto90Club, solo en
                            Perú</h1>
                        <h2>"Hay quienes sostienen que el fútbol no tiene nada que ver con la vida del hombre, con sus cosas más
                            esenciales.
                            Desconozco cuánto sabe esa gente de la vida, pero de algo estoy seguro: No saben nada de fútbol."<br>
                            (Eduardo Sacheri)</h2>
                        <a class="header-freeTrialButton" href="/register">SUSCRÍBETE GRATIS</a>
                        {{--<h2 class=carousel-itemCaption--afterCTA>Cancela tu suscripción cuando quieras</h2>--}}
                    </div>
                </section>
            </li>
            <li>
                <section class="carousel-item  carousel-item--1">
                    <div class=carousel-overlay></div>
                    <div class=carousel-backgroundVideo>
                        <video autoplay loop poster="{{URL::asset('/img/home/desktop_slide2.jpg')}}" id="slide-2-video">
                            <source src="{{URL::asset('/img/home/anim.mp4')}}" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>

                        <div class="carousel-itemCaption carousel-itemCaption--center"><h1 class="pos-1"><span
                                        class="animated-title animated">
                  <span>Ídolos</span>
                  <span>Equipos históricos</span>
                  <span>Épicas hazañas</span>
                  <span>Hinchadas</span>
                  <span>Historias inolvidables</span>
                  <span>Ficción</span>
                  <span>Animación</span>
                  <span>Ídolos</span>
                  <span>Equipos históricos</span>
                  <span>Épicas hazañas</span>
                </span>
                            </h1>
                            <br><br>
                            <h2>Nuevas películas todas las semanas, series, documentales, dibujos animados y más.
                            </h2>
                            <a class="header-freeTrialButton" href="/register">SUSCRÍBETE GRATIS</a>
                            <h2>Además, disfruta de los beneficios de ser suscriptor: Ropa deportiva, eventos, libros, etc.</h2>
                        </div>
                    </div>
                </section>
            </li>
            <li>
                <section class="carousel-item carousel-item--2" data-itemindex=2>
                    <div class=carousel-overlay></div>
                    <div class="carousel-itemImage carousel-videoFallbackImg">
                    </div>
                    <div class="carousel-itemCaption carousel-itemCaption--right"><h1>Disfrútalo<br> en tu pantalla favorita
                        </h1>
                        <h2>Teléfono / Tablet / Computadora / TV </h2>
                        <a class="header-freeTrialButton" href="/register">SUSCRÍBETE GRATIS</a>
                    </div>

                </section>
            </li>
        </div>
        <div class=carousel-navigation>
            <ul class=carousel-navigationItem-container>
                <li class="carousel-navigationItem is-active js-carouselNavigationItem carousel-navigationItem--0"
                    data-itemindex=0><span class=carousel-navigationItemLabel>Prueba Minuto90Club Gratis</span></li>
                <li class="carousel-navigationItem js-carouselNavigationItem carousel-navigationItem--1" data-itemindex=1><span
                            class=carousel-navigationItemLabel>¿Qué incluye?</span></li>
                <li class="carousel-navigationItem js-carouselNavigationItem carousel-navigationItem--2" data-itemindex=2><span
                            class=carousel-navigationItemLabel>Ve desde donde quieras</span></li>
            </ul>
        </div>
    </div>


    <section id="home-peliculas">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <!-- BEGIN::carrousel-->
                    <h1 class="carousel-title">Destacados</h1>

                    <div class="home-banner">

                        @foreach($destacados as $p)
                            @include('peliculas.movie')
                        @endforeach
                    </div>
                    <!-- END::carrousel-->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <!-- BEGIN::carrousel-->
                    <h1 class="carousel-title">Clubes</h1>

                    <div class="home-banner">
                        @foreach($clubes as $p)
                            @include('peliculas.movie')
                        @endforeach
                    </div>
                    <!-- END::carrousel-->
                </div>
            </div>
            <div class="row">
                <div class="col-sm-12">
                    <!-- BEGIN::carrousel-->
                    <h1 class="carousel-title">Ligas</h1>

                    <div class="home-banner">

                        @foreach($ligas as $p)
                            @include('peliculas.movie')
                        @endforeach
                    </div>
                    <!-- END::carrousel-->
                </div>
            </div>
        </div>
    </section>



@endsection

@section('js')
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

    <script>



        $('.js-carousel').slick();
        $('.carousel-navigation li').on('click', function (evt) {
            $('#slide-2-video')[0].pause();
            $('.carousel-navigation li').removeClass('is-active');
            $(evt.currentTarget).addClass('is-active');
            $('.js-carousel').slick('slickGoTo', $(evt.currentTarget).index());
            if ($(evt.currentTarget).index() == 1) {
                $('#slide-2-video')[0].play();
            }
        });

        var pos = 1;
        setInterval(function () {
            pos++;
            if (pos == 8) {
                setTimeout(function () {
                    pos = 1;
                    $('.carousel-item--1 .carousel-itemCaption .animated-title').removeClass('animated');
                    $('.carousel-item--1 .carousel-itemCaption h1').attr('class', 'pos-' + pos);
                }, 1000);
            }
            $('.carousel-item--1 .carousel-itemCaption .animated-title').addClass('animated');
            $('.carousel-item--1 .carousel-itemCaption h1').attr('class', 'pos-' + pos);
        }, 3000);

        $(document).ready(function(){

            @foreach($destacados as $p)
            load_video_thumb('{{$p->video_url}}', '{{$p->video_id}}');
            @endforeach

            @foreach($clubes as $p)
            load_video_thumb('{{$p->video_url}}', '{{$p->video_id}}');
            @endforeach

            @foreach($ligas as $p)
            load_video_thumb('{{$p->video_url}}', '{{$p->video_id}}');
            @endforeach

            $('.home-banner').slick({
                slidesToShow: 2,
                //slidesToScroll: 3,
                //infinite: true,
                // centerMode: false,
                variableWidth: true,
                // accessibility:false,
                // swipe:true,
                // autoplay:false,
                // autoplaySpeed: 2500,
                // arrows:true,
                // pauseOnHover: false,
                // pauseOnFocus: false,
                // draggable: true
                //rows: 2
            });

            

        });

        function load_video_thumb (video_url, video_id) {
            $.ajax({
                type:'GET',
                url: 'https://vimeo.com/api/oembed.json?url=' + video_url,
                dataType: 'json',
                success: function(data){
                    let thumbnail_src = data.thumbnail_url;
                    // $('thumb-'+video_id).append('<img src="' + thumbnail_src + '"/>');
                    $('.thumb-'+video_id).attr("src",thumbnail_src);
                }
            });
        }

    </script>
@endsection