{{-- {{dd($videodetails)}} --}}

@extends('admin.layout.master')

@section('content')
<input type="hidden" name="lang_count" id="lang_count" value="{{count($languages)}}">

<div class="app-content  my-3 my-md-5">
		<div class="side-app">
			<div class="page-header">
				<h4 class="page-title">Add Article</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.article',base64_encode($videodetails->id))}}">Article</a></li>
					<li class="breadcrumb-item active" aria-current="page">Add Article</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">
							<p>
								<ul>
									@foreach ($errors->all() as $error)
									<li>{{ $error }}</li>
								    @endforeach
								
								</ul>
							
							</p>
						</div>

					@endif

					<form class="card" method="post" action="{{ route('admin.articleStore')}}" onsubmit="return articleValidate()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Add Article</h3>
						</div>
						
						<input type="hidden" name="video" id="video" value="{{$videodetails->id}}">
						<input type="hidden" name="video_cat" id="video_cat" value="{{$videodetails->category_id}}">
						
						<div class="card-body">
							@foreach($languages as $key=>$val)
							<input type="hidden" name="lang_id[]" value="{{$val->id}}">
							<div class="col-md-12" style="border: 1px solid #858d97; border-radius: 5px">
								<div class="row">
									<div class="col-sm-6 col-md-4">
										<div class="form-group">
											<label class="form-label">Title[{{$val->name}}]</label>
											<input type="text" class="form-control" name="title[]" id="title{{$key+1}}" value="{{ old('title['.$key.']') }}" >
										</div>
									</div>
									<div class="col-sm-6 col-md-10">
										<div class="form-group">
											<label class="form-label">Description[{{$val->name}}]</label>
											<textarea class="ckeditor" name="desc[]" id="desc{{$key+1}}"></textarea>
										</div>
									</div>
								</div>
							</div>
							@endforeach
							<div class="row">
								<div class="col-sm-6 col-md-6">
									<label class="form-label">Image</label>
									<div class="fileupload-new" style="width: 200px;">
									</div>       
									<div class="custom-file">
										<input type="file" class="custom-file-input" name="image_file" id="image_file">
										<label class="custom-file-label">Choose image file</label>
									</div>
								</div>
								<div class="col-sm-6 col-md-4">
									<div class="form-group">
										<label class="form-label">Video Url Type</label>
										<select class="form-control" name="url_type" id="url_type" onchange="divshow();">
											<option value="">--Select video type--</option>
											<option value="1">embeded</option>
											<option value="2">url</option>
										</select>
									</div>
									<div class="col-sm-6 col-md-12" id="url_div">
										<div class="form-group">
											<label class="form-label">url</label>
											<input type="text" class="form-control" name="vdo_url" id="vdo_url" value="" >
										</div>
									</div>
								</div>
							</div>
						</div>

						
						<div class="card-footer text-center">
							<span><p id="adderrorcheck" style="color: red; display: none;"></p></span>
							<button type="submit" class="btn btn-primary btn-lg custom-btn mr-2">Save</button>
						</div>
					</form>
				</div>
			</div>
		</div>
	</div>
@endsection
@section('scripts')
<script type="text/javascript">

$(document).ready(function () {
    $('#image_file').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]);
		var fileName = $(this).val();
        var f = fileName.split("\\");
        $(this).next('.custom-file-label').html(f[2]);      
    });
	$('#url_div').hide();

});  

	var lang_count = $('#lang_count').val();
	for (i = 0; i < lang_count; i++) {
		CKEDITOR.replace( 'desc'+i );
	}

	function divshow(){
		var url_type = $('#url_type').val();
		if(url_type != ''){
			$('#url_div').show();
		}else{
			$('#url_div').hide();
		}
	}
	

	function articleValidate() {
		var lang_count = $('#lang_count').val();
		var video      = $('#video').val();
		var url_type   = $('#url_type').val();
		var vdo_url    = $('#vdo_url').val();
		var image_file = $('#image_file').val();
		for (i = 1; i <= lang_count; i++) {		
			var title   = $('#title'+i).val();
			var desc = CKEDITOR.instances['desc'+i].getData();
			if(title == '' || title == undefined ){
				$('#adderrorcheck').show();
				$('#adderrorcheck').html('** Please Fill Title Field');
				setTimeout(function(){
					$('#adderrorcheck').hide();
					}, 2000);
				return false;
			} 
			else if(desc == '' || desc == undefined ){
				$('#adderrorcheck').show();
				$('#adderrorcheck').html('** Please Fill Description Field');
				setTimeout(function(){
					$('#adderrorcheck').hide();
					}, 2000);
				return false;
			}
		}
		if(video == ''){
			$('#adderrorcheck').show();
			$('#adderrorcheck').html('** Please Select a video');	
			return false;
		}
		if(image_file == ''){
			$('#adderrorcheck').show();
			$('#adderrorcheck').html('** Please add an image file');	
			return false;
		}
		// if(url_type == ''){
		// 	$('#adderrorcheck').show();
		// 	$('#adderrorcheck').html('** Please select a video type');	
		// 	return false;
		// }
		// if(url_type != '' && vdo_url == ''){
		// 	$('#adderrorcheck').show();
		// 	$('#adderrorcheck').html('** Please add a url');	
		// 	return false;
		// }
	}
</script>
@endsection