@extends('app')

@section('title', 'Cvičení | Profil')

@section('content')
    <div class="block profile background-diet">
        <div class="wrap">

            <div class="profile-container">

                @include('_profile._partials.arrows')

                <div class="profile-container-inner">

                    @include('_profile._partials.day')
                    @include('_profile._partials.menu')

                    @if ($video !== null)
                        <div class="video-container">
                            <iframe src="https://player.vimeo.com/video/{{ $video->code }}?title=0&amp;byline=0&amp;portrait=0"
                                    width="1140" height="641" frameborder="0"
                                    webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
                        </div>

                    @else
                        <p class="text-center h2_colored">
                            <em>Dnes necvičíte.</em>
                        </p>
                    @endif

                    @if (count($videos) > 0)
                        <h2 class="h2__upper">Archiv</h2>
                        <div id="video-archive-container" class="video-container-2-columns">

                                                        @foreach($videos as $video)
                                <div class="video-container {{condition($i >= 2, 'hidden')}} video-container-{{condition($i % 2 == 0, 'left', 'right')}}">
                                    <iframe src="https://player.vimeo.com/video/{{$video->code}}?title=0&amp;byline=0&amp;portrait=0"
                                            width="560" height="315" frameborder="0" webkitallowfullscreen
                                            mozallowfullscreen allowfullscreen></iframe>
                                </div>
                                                            @endforeach
                        </div>

                        @if(count($videos) > 2)
                            <div class="text-center clearfix"><a id="load-more-videos" class="button"
                                                                 href="javascript:loadMore()">Načíst další</a></div>
                        @endif
                    @endif
                </div>
            </div>
        </div>
    </div>

    @if($user->tutorial_step == 'exercise')
        @include('_modals.tutorial.exercise')
    @endif

    <script>
		 function loadMore() {
			 $ ('#video-archive-container').find ('.video-container.hidden:lt(4)').removeClass ('hidden');

			 if ($ ('.video-container.hidden').length == 0) {
				 $ ("#load-more-videos").remove ();
			 }
		 }
    </script>
@endsection