@extends('admin.layout.master')

@section('content')

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

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

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

					@endif

					@if(Session::has('errors'))
						<div class="alert alert-danger">
							<ul>
					            @foreach ($errors->all() as $error)
					                <li>{{ $error }}</li>
					            @endforeach
					        </ul>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.videoUpdate', base64_encode($videosdetails->id))}}" onsubmit="return clientEdit()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Edit video</h3>
						</div>

						<div class="card-body">
							<div class="row">

								<div class="col-md-12" style="border: 1px solid #858d97; border-radius: 5px"> 
								@if($languages)
									@foreach($languages as $key => $language)
										<div class="row">
											<div class="col-sm-6 col-md-6">
												<div class="form-group">
													<label class="form-label">Title [{{$language->name}}]</label>
													<input type="text" class="form-control" name="title[]" id="title_{{$language->id}}" value="@if(isset($videodetailsValues[$key])){{ $videodetailsValues[$key]->title }}@endif">
												</div>
											</div>
											<div class="col-sm-6 col-md-6">
												<div class="form-group">
													<label class="form-label">About [{{$language->name}}]</label>
													<textarea class="form-control" name="about[]" id="about_{{$language->id}}" >@if(isset($videodetailsValues[$key])){{ $videodetailsValues[$key]->about }}@endif</textarea>
												</div>
											</div>
										</div>
									@endforeach
								@endif
								</div>
								
								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Category</label>
										<select class="form-control" name="category_id" id="category_id">
											<option value="">--Select Category--</option>
											@if($categories)
												@foreach($categories as $each)
													<option value="{{$each->id}}" @if($videosdetails->category_id == $each->id){{'selected'}}@endif>{{$each->name}}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Difficulties</label>
										<select class="form-control" name="difficulty_id" id="difficulty_id">
											<option value="">--Select Difficulties--</option>
											@if($difficulties)
												@foreach($difficulties as $each)
													<option value="{{$each->id}}" @if($videosdetails->difficulty_id == $each->id){{'selected'}}@endif>{{$each->level}}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Video Type</label>
										<select class="form-control" name="video_type" id="video_type">
											<option value="">--Video Type--</option>
											<option value="1" @if($videosdetails->video_type == 1){{'selected'}}@endif>Free</option>
											<option value="2" @if($videosdetails->video_type == 2){{'selected'}}@endif>Packaged</option>
										</select>
									</div>
								</div>

								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Age Recomendation</label>
										<select class="form-control" name="age_recom" id="age_recom">
											<option value="">--Select Age Recomendation--</option>
											@if($agerecom)
												@foreach($agerecom as $each)
													<option value="{{$each->id}}" @if($videosdetails->age_recom == $each->id){{'selected'}}@endif>{{$each->age_test}}</option>
												@endforeach
											@endif
										</select>
									</div>
								</div>
						
					

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Image</label>
                                    	<div class="fileupload-new" style="width: 200px;">
                                    		@if($videosdetails->image == NULL)
												<img src="{{ asset('storage/videos/default_video.png') }}" class="header-brand-img">
											@else
												<img src="{{ asset('storage/videos/thumb/'.$videosdetails->image) }}" class="header-brand-img">
											@endif
                                       	</div>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="video_pic" id="video_pic">
											<label class="custom-file-label">Choose file</label>
										</div>
									</div>
								</div>

								<div class="col-sm-6 col-md-6">
									<div class="form-group">
										<label class="form-label">Video</label>
                                    		@if($videosdetails->video_file)
												<video src="{{ asset('storage/videos/'.$videosdetails->video_file) }}" width="100"></video>
											@endif
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="video_file" id="video_file">
											<label class="custom-file-label">Choose file</label>
										</div>
									</div>
								</div>
								
							</div>
						</div>
						<div class="card-footer text-center">
							<span><p id="editerrorcheck" style="color: red; display: none;"></p></span>
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2 submit">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">
	
	function clientEdit() {	
		$(".submit").prop('disabled', true);
		$('.submit').html('<i class="fa fa-circle-o-notch fa-spin"></i> Save');		
		var title   = $('#title').val();
		@if($languages)
			@foreach($languages as $key => $language)
				var name   = $('#title_{{$language->id}}').val();
				if(name == ''){
					$('#editerrorcheck').show();
					$('#editerrorcheck').html('** Please Fill All Title Field');
					setTimeout(function(){
						  $('#editerrorcheck').hide();
						}, 2000);
					
					$(".submit").prop('disabled',false);
		            $('.submit').html('Save');
					return false;
				}
			@endforeach
		@endif
		var category_id   = $('#category_id').val();
		var difficulty_id   = $('#difficulty_id').val();
		var video_type   = $('#video_type').val();
		var age_recom   = $('#age_recom').val();
		var image   = $('#video_pic').val();
		var video_file   = $('#video_file').val();
		if(category_id == ''){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Category Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);
				
			$(".submit").prop('disabled',false);
		    $('.submit').html('Save');
			return false;
		}  else if(difficulty_id == ''){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Difficulties Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);
			
			$(".submit").prop('disabled',false);
		    $('.submit').html('Save');
			return false;
		}  else if(video_type == ''){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Video Type Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);
			
			$(".submit").prop('disabled',false);
		    $('.submit').html('Save');
			return false;
		}   else if(age_recom == ''){
			$('#editerrorcheck').show();
			$('#editerrorcheck').html('** Please Fill Age Recomendation Field');
			setTimeout(function(){
				  $('#editerrorcheck').hide();
				}, 2000);
			
			$(".submit").prop('disabled',false);
		    $('.submit').html('Save');
			return false;
		}
	}
 

</script>

<script>
$(document).ready(function () {
    $('#video_pic').on('change', function () {
        var reader = new FileReader();
        reader.onload = function (event) {
            $('.fileupload-new').html('<img src="'+event.target.result+'">')        
        }
        console.log(this.files[0]);
        reader.readAsDataURL(this.files[0]);     
    });
});                          
</script>
@endsection