@extends('admin.layout')
@section('content')
<style>
	#watermarked::before {
	position: fixed;
	top: -75%;
	left: -75%;
	display: block;
	width: 300%;
	height: 300%;
	transform: rotate(-45deg);
	content: attr(data-watermark);
	font-size: 30px;
	opacity: 0.15;
	line-height: 4em;
	letter-spacing: 2px;
	color: #ff0523;
	z-index:0;
	}
	.content-wrapper, .right-side{
		background: #FFF;
	}
	.box {
		background: transparent;
		z-index: 1; 
	}
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list">
  <section class="content-header">
    <h1> {{ trans('Edit Knowledge Base') }} <small></small> </h1>
    <ol class="breadcrumb">
       <li><a href="{{ URL::to('admin/dashboard/this_month') }}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Edit Knowledge Base') }}</li>
    </ol>
  </section>
	@php
		$getUserRoleData 			= userRoleData();
		$knowledgeBase				= explode(",",$getUserRoleData->knowledgeBase);
		 
	@endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info">
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
                    <div class="">            
                         <div class="box-body">
							  @if(session()->has('error'))
									<div class="alert alert-warning alert-dismissible">
									   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
									   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
										{{ session()->get('error') }}
									</div>
								@endif
							@if(in_array("Edit",$knowledgeBase ))                    
                            {!! Form::open(array('url' =>'admin/update-knowledge-base', 'method'=>'post', 'class' => 'form-horizontal', 'id'=>'addnewuser', 'enctype'=>'multipart/form-data')) !!}
								{!! Form::hidden('id',  $result['getUserData']->id, array('class'=>'form-control', 'id'=>'id')) !!}

								{!! Form::hidden('oldImage',  $result['getUserData']->picture, array('id'=>'oldImage')) !!}
								{!! Form::hidden('oldvideo',  $result['getUserData']->video, array('id'=>'oldvideo')) !!}
								{!! Form::hidden('oldfile',  $result['getUserData']->video, array('id'=>'oldfile')) !!}

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Question') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7">
										{!! Form::text('question', $result['getUserData']->questions, array('class'=>'form-control', 'id'=>'question', 'required'=>'required')) !!}
									</div>
								</div>
								                           
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Answer') }}<span class="red_star">*</span></label>
									<div class="col-sm-10 col-md-7"> 
                                    {!! Form::textarea('answer', $result['getUserData']->answers, array('class'=>'form-control answer', 'id'=>'answer', 'required'=>'required', 'rows'=>'4')) !!}
									</div>
								</div>



								<div class="form-group">
								  <label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('labels.Picture') }} </label>
								  <div class="col-sm-10 col-md-4">
								    {!! Form::file('newImage', array('id'=>'newImage', 'accept' => "image/png, image/gif, image/jpeg")) !!}
								    <br>
								    <img src="{{asset('assets/admin/knowledge').'/'.$result['getUserData']->picture}}" alt="" width=" 100px">
								  </div>
								  @if($result['getUserData']->picture)
								  	<div class="col-sm-10 col-md-4">
									  	<label>
									  	<input type="checkbox" class="" name="remove_image" value="1" />
									  	Remove Picture
										</label>
									</div>
									@endif
								</div>

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('File') }}</label>
									<div class="col-sm-10 col-md-4">
										{!! Form::file('file', array('id'=>'file')) !!}
										<br>
										@if($result['getUserData']->file)
											<p>{{ $result['getUserData']->file }}</p>
										@endif
									</div>
									@if($result['getUserData']->file)
										<div class="col-sm-10 col-md-4">
											<label>
												<input type="checkbox" class="" name="remove_file" value="1" />
												Remove File
											</label>
										</div>
									@endif
								</div>
								

								<div class="form-group">
								  <label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Video') }} </label>
								  <div class="col-sm-10 col-md-4">
								    {!! Form::file('video', array('id'=>'video', 'accept' => "video/mp4,video/x-m4v,video/*")) !!}
								    @if($result['getUserData']->video)
									<span class="help-block"><a data-toggle="modal" data-target="#videoModal"  style="cursor:pointer;">View Video</a></span>
									@endif
								  </div>
								  @if($result['getUserData']->video)
								  	<div class="col-sm-10 col-md-4 form-check">
									  	<label class="form-check-label" >
									  		<input type="checkbox" class="" name="remove_video" value="1" />
									  		Remove Video
											</label>
									</div>
									@endif
								</div>
                     

								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('Youtube Code') }}</label>
									<div class="col-sm-10 col-md-7">
										{!! Form::text('youtubelink',  $result['getUserData']->youtubelink, array('class'=>'form-control', 'id'=>'youtubelink')) !!}
										<span style="color: red">i.e A4GgHIojooo</span> 
										@if($result['getUserData']->youtubelink)
											<span class="help-block"><a data-toggle="modal" data-target="#youtubeModal" style="cursor:pointer;" >View Video</a></span>
										@endif
									</div>
								</div>
								
								<div class="form-group">
									<label for="name" class="col-sm-2 col-md-3 control-label">{{ trans('labels.Status') }}<span class="red_star">*</span> </label>
									<div class="col-sm-10 col-md-7">
										<select class="form-control" name="isActive" id="isActive" required>
											<option value="1" @if($result['getUserData']->status==1) selected @endif>{{ trans('labels.Active') }}</option>
											<option value="0" @if($result['getUserData']->status==0) selected @endif>{{ trans('labels.Inactive') }}</option>
											  
										</select>                                      
									</div>
								</div>
								
								
								<div class="form-group">
									<div class="col-sm-offset-2 col-sm-10">
										<button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
										<a href="../list-knowledge-base" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
									</div>
								</div>
                            {!! Form::close() !!}
							@else
								<p> <strong>Please contact with SuperAdmin</strong></p>
							@endif
                        </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

		<div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
		</div>

      </div>
    </div>
  </section>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="videoModalLabel">Video</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	  	@if($result['getUserData']->video)
			<video width="500" height="350" controls>
			<source src="{{asset('assets/admin/knowledgevideo').'/'.$result['getUserData']->video}}" type="video/mp4">
			<source src="{{asset('assets/admin/knowledgevideo').'/'.$result['getUserData']->video}}" type="video/ogg">
			Your browser does not support the video tag.
			</video>
		@endif
      </div>
      
    </div>
  </div>
</div>


<!-- Modal -->
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="youtubeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="youtubeModalLabel">Youtube Video</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
	  	@if($result['getUserData']->youtubelink)
		  <iframe width="420" height="345" src="https://www.youtube.com/embed/{{$result['getUserData']->youtubelink}}"></iframe>
		@endif
      </div>
      
    </div>
  </div>
</div>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>

<script type="text/javascript">

  $(document).ready(function() {
    //    CKEDITOR.replace('answer');
	   ClassicEditor
    .create(document.querySelector('#answer'))
    .catch(error => {
        console.error(error);
    });
    });
	
	// Product Form Validation
	$( "#addnewuser" ).validate( {
		ignore : [],
		rules: {
			question: {
				required: true,
				
			},
			answer: {
				required: function(textarea) {
					CKEDITOR.instances[textarea.id].updateElement(); // update textarea
					var editorcontent = textarea.value.replace(/<[^>]*>/gi, ''); // strip tags
					return editorcontent.length === 0;
				}
			},
			 
			isActive: {
				required: true,
			},				
			
		},
		messages: {
			question: {
				required: "Please enter your Question"
				
			},
			answer: {
				  required:"Please Enter Text",
                        minlength:"Please enter 10 characters"
				
			},
			isActive: {
				required: "Please select status"
			},
		},
		errorElement: "em",
		errorPlacement: function ( error, element ) {
			// Add the `help-block` class to the error element
			error.addClass( "help-block" );

			// Add `has-feedback` class to the parent div.form-group
			// in order to add icons to inputs
			element.parents( ".col-sm-5" ).addClass( "has-feedback" );

			if ( element.prop( "type" ) === "checkbox" ) {
				error.insertAfter( element.parent( "label" ) );
			} else {
				error.insertAfter( element );
			}

			// Add the span element, if doesn't exists, and apply the icon classes to it.
			if ( !element.next( "span" )[ 0 ] ) {
				$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
			}
		},
		success: function ( label, element ) {
			// Add the span element, if doesn't exists, and apply the icon classes to it.
			if ( !$( element ).next( "span" )[ 0 ] ) {
				$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
			}
		},
		highlight: function ( element, errorClass, validClass ) {
			$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
			$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
		},
		unhighlight: function ( element, errorClass, validClass ) {
			$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
			$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
		}
	});
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
		el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
	});
</script>
@endsection