@extends('layouts.frontend')

@section('content')

<div class="container" style="min-height: 450px;">
    <div class="row archivio-news">
        <br>
        <div class="title-section col-sm-12">
            <h1 style="width: 90%"><span>Archivio video</span></h1>                
        </div>

        @foreach($videos as $video)

            <div class="col-sm-3">
                <div class="news-post image-post">
                    <a href="{{$video->id}}"  class="view-video"><img src="/files/videos/{{$video->image}}" alt="" class="img-responsive"></a>                        
                        <div class="post-content">
                            <h2><a href="{{$video->id}}">{{$video->title}}</a></h2>
                            <ul class="post-tags">
                                <li><i class="fa fa-clock-o"></i>{{date("d/m/Y", strtotime($video->date))}}</li>
                            </ul>
                        </div>		
                </div>
            </div>
        
        @endforeach

    </div>
</div>

@stop

@section('extra_js')

    <script>
        $( document ).ready(function() {
            var $overlay = $('<div id="overlay" class="overlay" style="position: fixed;background: $black;width: 100%;height: 100%;top: 0;left: 0;text-align: center;z-index: 999999 !important;display: none;"></div>');
            var $iframe = $('<iframe width="595" height="485" frameborder="0" marginwidth="0" margin="0" height="0" scrolling="no" style="margin-top:10%" allowfullscreen></iframe>');

            $overlay.append($iframe);

            // append overlay to body
            $('body').append($overlay);

            $('a.view-video').click(function(event) {
                event.preventDefault();
                var id = $(this).attr('href');
                var src = '/video/' + id;
                console.log(src);
                // update overlay with iframe
                $iframe.attr('src', src);
                // show overlay
                $overlay.show();
            });
            
            // when overlay is clicked
            $overlay.click(function() {
                // hide overlay
                $overlay.hide();
                $iframe.attr('src', '');
            });
        });
    </script>

@stop