@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">Edit Article</h4>
				<ol class="breadcrumb">
					<li class="breadcrumb-item"><a href="{{route('admin.article',base64_encode($articledetails->video_id))}}">Article</a></li>
					<li class="breadcrumb-item active" aria-current="page">Edit 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.articleUpdate')}}" onsubmit="return articleValidate()" enctype="multipart/form-data">
						@csrf
						<div class="card-header">
							<h3 class="card-title">Edit Article</h3>
						</div>
						
						<input type="hidden" name="master_article_id" id="master_article_id" value="{{$articledetails->id}}">
						<input type="hidden" name="video" id="video" value="{{$articledetails->video_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="@if(isset($articledetailsValues[$key])){{ $articledetailsValues[$key]->title }}@endif" >
										</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}}">@if(isset($articledetailsValues[$key])){{ $articledetailsValues[$key]->description }}@endif</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;">
                                            @if($articledetails->image == NULL)
                                             <img src="{{ asset('storage/article/default_package.png') }}" class="header-brand-img">
                                         	@else
                                             <img src="{{ asset('storage/articles/images/'.$articledetails->image) }}" class="header-brand-img">
                                         	@endif
                                         </div>
                                         <br>       
										<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-6">
										<label class="form-label">Video</label>
										<div class="custom-file">
											<input type="file" class="custom-file-input" name="vdo_file" id="vdo_file">
											<label class="custom-file-label">Choose video 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" @if($articledetails->video_type == 1){{'selected'}}@endif>embeded</option>
												<option value="2" @if($articledetails->video_type == 2){{'selected'}}@endif>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="{{$articledetails->video}}" >
										</div>
									</div>
									</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]);     
    });
});  

	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();

		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(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