@extends('admin.layout.master')

@section('content')
<div id="videoModal" class="modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <div id="video_url" style="width:100%"></div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="app-content  my-3 my-md-5">
	<div class="side-app">
		<div class="page-header">
			<h4 class="page-title">Videos Management Lists</h4>
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="{{route('admin.video')}}">Videos Management</a></li>
				<li class="breadcrumb-item active" aria-current="page">Videos Management Lists</li>
			</ol>

		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="card">
					@if(Session::has('success'))

						<div class="alert alert-primary">
							<p>{{ Session::get('success') }}</p>
						</div>

					@endif

					@if(Session::has('error'))

						<div class="alert alert-danger">
							<p>{{ Session::get('error') }}</p>
						</div>

					@endif
					
					<div class="card-header">
						<h3 class="card-title">Videos Management List</h3>
						<div class="col-xl-2 col-lg-2 col-md-2 ml-auto">
							<a href="{{route('admin.videoAdd')}}"><button type='button' class="btn btn-primary">Add New video</button></a>
						</div>
					</div>


					<div class="card-body">
					  <div class="table-responsive" id="vueapp">
						<table id="tables" class="table card-table table-vcenter text-nowrap">
							<thead>
								<tr>
									<th style="text-align: center;">#</th>
									<th style="text-align: center;">Title</th>
									<th style="text-align: center;">Image</th>
									<th style="text-align: center;">Type</th>
									<th style="text-align: center;">Category</th>
									<th style="text-align: center;">Difficulty</th>
									<th style="text-align: center;">Age Recomend..</th>
									<th style="text-align: center;">Status</th>
									<th style="text-align: center;"></th>
								</tr>
							</thead>
							<tbody>
							
							@foreach($videos as $key=>$val)
								<tr>
									<td style="text-align: center;">{{$key+1}}</td>
									<td style="text-align: center;">{{$val->title}}</td>
									<td style="text-align: center;">
										@if($val->image)
											<img src="{{asset('storage/videos/thumb/'.$val->image)}}" width="25">
										@else
											<img src="{{asset('storage/videos/default_video.png')}}" width="25">
										@endif
									</td>
									<td style="text-align: center;">{{(($val->video_type == 1) ? "Free" : "Packaged")}}</td>
									<td style="text-align: center;">@if(isset($val->videoCategory[0])){{$val->videoCategory[0]->name}}@endif</td>
									<td style="text-align: center;">@if(isset($val->videoDifficulty[0])){{$val->videoDifficulty[0]->level}}@endif</td>
									<td style="text-align: center;">@if(isset($val->ageRecom[0])){{$val->ageRecom[0]->age_test}}@endif</td>
									<td style="text-align: center;">{{(($val->status == 1) ? "Active" : "Blocked")}}</td>
									
									<td style="text-align: center;">
										<a class="icon" href="javascript:void(0)"></a>
										@if($val->status==0)
											<a href="{{route('admin.videoStatus',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="For UnBlock" class="btn btn-warning btn-sm text-white" onclick="return confirm('Are You Sure To Unblock This video?')"><i class="fa fa-check"></i></a>
										@elseif($val->status==1)
											<a href="{{route('admin.videoStatus',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="For Block" class="btn btn-warning btn-sm text-white" onclick="return confirm('Are You Sure To Block This video?')"><i class="fa fa-lock"></i></a>
										@endif
										
										<a class="btn btn-dark btn-sm text-white" data-toggle="tooltip" data-original-title="Edit" href="{{route('admin.videoEdit', base64_encode($val->id))}}"><i class="fa fa-pencil"></i></a>

										<a class="icon" href="javascript:void(0)"></a>
											<!-- <a href="{{route('admin.videoDelete',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="For Delete" class="btn btn-warning btn-sm text-white" onclick="return confirm('Are You Sure To Delete This video?')"><i class="fa fa-trash"></i></a> -->
											<a href="{{route('admin.videoDelete',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="For Delete" class="btn btn-warning btn-sm text-white" onclick="ConfirmDelete()"><i class="fa fa-trash"></i></a>

										<a class="icon" href="javascript:void(0)"></a>
											<a href="{{route('admin.video_slides',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="Video Slides" class="btn btn-dark btn-sm text-white"><i class="fa fa-eye"></i></a>
										<a class="icon" href="javascript:void(0)"></a>
											<a href="javascript:void(0)" data-toggle="tooltip" data-original-title="See Video" class="btn btn-warning btn-sm text-white see_video" data-src="{{ asset('storage/videos/'.$val->video_file) }}"><i class="fa fa-video-camera"></i></a>
										<a class="icon" href="javascript:void(0)"></a>
											<a href="{{route('admin.article',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="Article" class="btn btn-dark btn-sm text-white"><i class="fa fa-newspaper-o"></i></a>
										<a class="icon" href="javascript:void(0)"></a>
											<a href="{{route('admin.product',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="Product" class="btn btn-dark btn-sm text-white"><i class="fa fa-product-hunt"></i></a><a class="icon" href="javascript:void(0)"></a>
										<a class="icon" href="javascript:void(0)"></a>
											<a href="{{route('admin.guide',base64_encode($val->id))}}" data-toggle="tooltip" data-original-title="How TO Guide" class="btn btn-dark btn-sm text-white"><i class="fa fa-file-image-o"></i></a><a class="icon" href="javascript:void(0)"></a>

									</td>
								</tr>
							@endforeach							
							</tbody>
						</table>
						
					  </div>
					</div>
					
				</div>
			</div>
		</div>
	</div>
</div>

@endsection
@section('scripts')
<script type="text/javascript">
	$(document).ready(function() {
    	$('#tables').DataTable();
    	// $('.see_video').click(function(){
    	// 	$('#video_url').html('<video controls autoplay  style="width:100%;"><source src="'+$(this).data('src')+'" type="video/mp4">Your browser does not support the video tag.</video>');
    	// 	$('#videoModal').modal('show');
    	// })

		$('body').on('click', '.see_video', function(){
            $('#video_url').html('<video controls autoplay  style="width:100%;"><source src="'+$(this).data('src')+'" type="video/mp4">Your browser does not support the video tag.</video>');
    		$('#videoModal').modal('show');
        })

	});	
	//ConfirmDelete
	function ConfirmDelete()
	{
 		 var x = confirm("Are you sure you want to delete?");
 		 if (x){
			var y = confirm("It will delete all articles products and guide details under it");
			if(y){
     		 return true;
			}else{
				return false;
			}

		  }
 		 else
    		return false;
	}
</script>
@endsection