@extends('socialite::layouts.default')

@section('content')
	<div class="container">
		<div class="row">
			<div class="visible-lg col-lg-2">
				<br>
				@include('socialite::partials.home-leftbar', compact('trending_tags'))
			</div>

			<div class="col-md-10" id="allPhotos">
				@include('flash::message')
				<div class="panel panel-default">
					<div class="panel-heading no-bg user-pages no-paddingbottom navbars">
						<div class="page-heading header-text">
							{{ trans('socialite::common.youtube_videos') }}
						</div>
						<div class="pull-right">
							<a href="{{ route('user.album.create', ['username' => Auth::user()->username]) }}" class="btn btn-success btn-downloadreport">{{ trans('socialite::common.create_album') }}</a>
						</div>
						<div class="clearfix"></div>
						<div class="divider"></div>
						<ul class="nav nav-pills pull-left performance-list">
							<li>
								<a href="{{ route('user.albums', ['username' => $timeline->username]) }}" >{{ trans('socialite::common.albums') }}</a>
							</li>
							<li>
								<a href="{{ route('user.photos', ['username' => $timeline->username]) }}">{{ trans('socialite::common.photos') }}</a>
							</li>
							<li class="active">
								<a href="{{ route('user.videos', ['username' => $timeline->username]) }}">{{ trans('socialite::common.videos') }}</a>
							</li>
						</ul>
						<div class="clearfix"></div>
					</div>
				</div>
				<div class="move_photos">
								<div class="alert alert-info" v-show="selectedPhotos.length == 0">
										Select photos to move from one album to another
									</div>
								<form action="{{ route('user.move_photos', ['username' => Auth::user()->username]) }}" method="POST" v-show="selectedPhotos.length != 0" v-cloak>

									{{ csrf_field() }}
									<label for="">Select Album to move:</label>

									@if($userAlbums->count() != 0)
										<select v-model="selectedAlbum" placeholder="Select Album">
											<option value="">Select Album</option>
											@foreach($userAlbums as $key => $user_album)
											<option v-bind:value="{{ $key }}">{{ $user_album }}</option>
											@endforeach
										</select>
									@endif

									<input type="hidden" name="album_id" value="@{{ selectedAlbum }}">
									<input type="hidden" name="photos" value="@{{ selectedPhotos }}">
									<button type="submit" class="btn btn-default">Confirm</button>
								</form>
							</div>

				<div class="container-fluid">
					<ul id="video-thumbnails" class="list-unstyled row grid-photos">
				@if(isset($videos))
					@foreach($videos as $video)
						<li class="col-xs-6 col-sm-4 col-md-4">
							<div class="panel panel-default checkbox-panel-videos">
								<div class="checkbox widget-checkbox">
									  <input class="checkbox-input" type="checkbox" id="{{ $video->id }}" value="{{ $video->id }}" name="{{ $video->id }}" v-model="selectedPhotos">
									   <label class="checkbox-label input-label" for="{{ $video->id }}"></label>
								</div>
								<div class="panel-body nopadding">
									<div class="widget-card preview">
										<div class="widget-card-bg">
											<div class="video-holder">
												<img src="https://img.youtube.com/vi/{{ $video->source }}/0.jpg" alt="">
											</div>
										</div>
										<div class="widget-card-project">
											<div class="bridge-text text-center video-buttons">
													<a data-sub-html="" data-src="https://www.youtube.com/watch?v={{ $video->source }}"  class="btn lightgallery-item btn-default btn-lightbox btn-sm"><i class="fa fa-search"></i></a>

											</div>
										</div>{{-- /widget-card-project --}}
									</div>


								</div>
							</div><!-- /panel -->
						</li>
					@endforeach
				@else
					<div class="alert alert-warning">
						{{ trans('socialite::messages.no_videos') }}
					</div>
				@endif
				</ul>
				</div>
			</div><!-- /col-md-10 -->

		</div>
	</div><!-- /container -->
@endsection

@section('bottom_js')
	<script type="text/javascript" src="{{ asset('vendor/socialite/js/lightgallery-all.min.js') }}"></script>

	<script type="text/javascript">
        var photos = new Vue({
            el : '#allPhotos',
            data : {
                selectedPhotos : [],
                selectedAlbum: ''
            }
        });
        $('.checkbox-panel').on('click',function(){
            $(this).find('.checkbox-input').trigger('click')
        })
	</script>
@endsection