@extends('layouts.master')

{{--https://ericlbarnes.com/2014/11/20/simplest-way-use-laravel-blade-angularjs-together/--}}

@section('css')
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">


    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="{{URL::asset('/css/material.io.css')}}">

    {{-- <link rel="stylesheet" href="{{URL::asset('/bower_components/slick-carousel/slick/slick.css')}}"> --}}
    {{-- <link rel="stylesheet" href="{{URL::asset('/bower_components/slick-carousel/slick/slick-theme.css')}}"> --}}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">

    <link rel="stylesheet" href="{{URL::asset('/css/header.css')}}">
    <link rel="stylesheet" href="{{URL::asset('/css/footer.css')}}">
    <link rel="stylesheet" href="{{URL::asset('/css/peliculas.css')}}">
    <link rel="stylesheet" href="{{URL::asset('/css/landing-peliculas.css')}}">


    <style>
        .featured-movie {
            background-image: url(/img/peliculas/default_movie.jpg);
        }

        .slick-slider { display: block !important; }

    </style>
@endsection

@section('js')

    <script src="{{URL::asset('/bower_components/jquery/dist/jquery.min.js')}}"></script>
    <script src="/bower_components/angular/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.17/angular-filter.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
    {{-- <script src="/bower_components/slick-carousel/slick/slick.js"></script> --}}
    {{-- <script src="/bower_components/angular-slick-carousel/dist/angular-slick.min.js"></script> --}}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-slick-carousel/3.1.7/angular-slick.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

    <script>

        let thumbnail_src;

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

    <script>



        (function () {
            var app = app || angular.module("minuto90", ['angular.filter','slickCarousel']);

            app.constant('SERVER', {
                'url': '/api'
            });

            app.controller('PeliculasController', function ($scope, $http, $timeout, $window, SERVER) {

                $scope.numberLoaded = false;
                $scope.slickConfig = {
                    slidesToShow: 2,
                    // swipeToSlide: true,
                    // slidesToScroll: 3,
                    // infinite: true,
                    // centerMode: true,
                    variableWidth: true,
                    // accessibility:false,
                    // swipe: true,
                    // autoplay: false,
                    // autoplaySpeed: 2500,
                    // arrows: true,
                    // pauseOnHover: false,
                    // pauseOnFocus: false,
                    // draggable: true
                    //rows: 2
                };

                $http.get(SERVER.url + '/movies/all')
                    .then(function (response) {
                        $scope.peliculas = response.data;
                        $scope.numberLoaded = true;
                    });

                $scope.buscarPelicula = function (filtro) {

                    $scope.numberLoaded = false;
                    if(filtro==="") {
                        filtro = "%";
                    }

                    $http.get(SERVER.url + '/movies/buscar/' + filtro)
                        .then(function (response) {

                            $scope.peliculas = response.data;
                            $scope.numberLoaded = true;
                        });
                };


                $scope.verCompartir = false;

                $scope.facebookShare = function (peliculaId) {
                    FB.ui(
                        {
                            method: 'share',
                            href: 'http://wilverpaul.com/pelicula/' + peliculaId
                        },
                        // callback
                        function (response) {
                            if (response && !response.error_message) {
                                alert('Posting completed.');
                            } else {
                                alert('Error while posting.');
                            }
                        }
                    );
                };

                //BEGIN::Mostrar/Ocultar Compartir
                $('html').click(function() {
                    $('#verCompartir').hide();
                });

                $('#btnCompartir').click(function(event){
                    event.stopPropagation();
                });

                $('#btnCompartir').click(function(event){
                    $('#verCompartir').show();
                });
                //END::Mostrar/Ocultar Compartir

                //BEGIN::Mostrar detalle de la película
                $scope.verDetalle = function ($id) {
                    $window.location.href = '/peliculas/' + $id;
                };
                //END::Mostrar detalle de la película


                $(window).scroll(function() {
                    var scrollTop = $(this).scrollTop();

                    if (scrollTop>100) {
                        $('header').addClass("fixed");
                    } else {
                        $('header').removeClass("fixed");
                    }

                    $('.topGradientContainer').css({
                        opacity: function() {
                            var elementHeight = $(this).height();
                            // return 1 - (elementHeight - scrollTop) / elementHeight;
                            return 1 - scrollTop/450;
                        }
                    });
                });

                $scope.filtro = '';


            });
        }());
    </script>
@endsection


@section('content')

    <script>
        window.fbAsyncInit = function() {
            FB.init({
                appId            : '1839778039366440',
                autoLogAppEvents : true,
                xfbml            : false,
                version          : 'v2.11'
            });
        };

        (function(d, s, id){
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {return;}
            js = d.createElement(s); js.id = id;
            js.src = "https://connect.facebook.net/es_PE/sdk.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>

    <div ng-app="minuto90" ng-controller="PeliculasController">

        <header class=header>
            <div class=header-logo>
                <a href="/">
                    <img src="{{URL::asset('/img/logo-90-app.png')}}">
                </a>
            </div>

            <form class="search-form-container">
                <input ng-model="filtro" type="text" id="textSearch" class="form-control" placeholder="Buscar" autofocus="">
                <button class="icon-hbo_clear" ng-click="buscarPelicula(filtro)">
                    <img src="{{URL::asset('/img/peliculas/buscar.png')}}" width="20" height="20" alt="submit" />
                </button>
            </form>

            {{--<span class="header-buscar" ng-hide="verBuscar" ng-click="mostrarBuscar()">
                <img width="20" src="{{URL::asset('/img/peliculas/buscar.png')}}" alt="buscar"/>
            </span>--}}

            {{--<a class="login btn btn-warning btn-sm" href="/login">Iniciar sesión</a>--}}
            @guest
                <a href="{{ route('login') }}">Login</a>
                <a href="{{ route('register') }}">Register</a>
            @else

                <div id="ddUsuario" class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
                        {{ Auth::user()->name }} <span class="caret"></span>
                    </a>

                    <ul class="dropdown-menu" role="menu">
                        <li>
                            <a href="{{ route('logout') }}"
                               onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                Logout
                            </a>

                            <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
                                {{ csrf_field() }}
                            </form>
                        </li>
                    </ul>
                </div>
            @endguest

            <a class="festival" href="http://www.festivalminuto90.com/" target="_blank">La app de</a>

        </header>

        <div class="">

            <div class="featured-movie">
                <div class="topGradientContainer">

                    <h3 class="typeCallout">PELÍCULAS</h3>
                    <!--<h3 class="contentCategory"></h3>-->
                    <h2 class="seriesName tealHover" ng-click="verDetalle({{$big_featured->id}})">
{{$big_featured->titulo}}
                            </h2>

                    {{--@include('peliculas.actionItems')--}}
                </div>
            </div>


            <section id="home-peliculas">
                <div class="container">
                    <div ng-repeat="(key, seccion) in peliculas | groupBy: 'cat'" class="row">
                        <div class="col-sm-12">
                            <h1 class="carousel-title">@{{ key }}</h1>
                            <slick  ng-if="numberLoaded" settings="slickConfig" class="home-banner">
                                <div ng-repeat="p in seccion" class="pelicula-item" ng-click="verDetalle(p.id)">
                                    <div class="thumbOverlayContainer">
                                        <img ng-src="@{{ p.img }}" alt=""/>
                                        <div class="thumb_overlay">
                                        </div>
                                    </div>
                                    <div class="item_detailLink">
                                        <h6 class="listViewTitle">
                                            <span>@{{ p.tit }}</span>
                                        </h6>
                                    </div>
                                </div>
                            </slick>
                        </div>
                    </div>

                </div>
            </section>


        </div>

    </div>

@endsection