@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('Knowledge Search') }} <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('Knowledge Base') }}</li>
			<li class="active"> {{ trans('Search') }}</li>
		</ol>
	</section>
	@php
		$getUserRoleData 			= userRoleData();
		$knowledgeBase				= explode(",",$getUserRoleData->knowledgeBase);
	
	@endphp
	
		<style>
	.answers h5 a {
	font-size: 20px;
	}
	.answers {
	padding: 10px;
	margin-bottom:20px;
	border-bottom:1px solid #f1f1f1;
	}
	.liveserachbtn {
    float: left;
    width: 15%;
}

.livesearch{width:80%; float:left;}

#knowledgeBaseList ul {
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}
	</style>

	<section class="content">
		<div class="row">
			<div class="col-xs-12">
				<div class="box box-info" style="min-height: 450px;">
					<div class="box-body">
						<div class="col-xs-12">
							<div class="row">
								 
								<form action="" method="GET" id="search_form">
									<div class="col-sm-6 col-md-6">
 
											<input type="search" name="search" id="search" value="" class="form-control livesearch" placeholder="Search" autocomplete="off">
											<button type="submit" class="btn btn-primary liveserachbtn">{{ trans('Search') }}</button>
											 
											<div id="knowledgeBaseList" ></div>
											<div class="input-group-btn">
											
												
											</div>
									 
					                </div>
					                
								</form>
							</div>
							<br>
						</div>
						 
						<div class="clearfix"></div>
			
						<div class="row">
							<div class="col-xs-12">		
								@if(in_array("View",$knowledgeBase ))			
				                
										@if(count($result)>0)
											@foreach ($result as  $rsVal)	
												
												
												<div class="answers">	
												<h5> <a href="knowledge-base-search-detail/{{$rsVal->id}}">{{ $rsVal->questions }}</a></h5>
												 
												{!! Str::limit(strip_tags($rsVal->answers), $limit = 500, $end = '...') !!}
												  

												</div>
										
												 
											@endforeach
											 
													{!! $result->appends(request()->input())->links(); !!}
												 
										@elseif(app('request')->input('search') && count($result) ==0)
										 
											<div class="answers" class="text-center">
												 No record found.
											</div>
										@endif
									  
								@else
									<p> <strong>Please contact with SuperAdmin</strong></p>
								@endif
							</div>
						</div>
			</h5>		</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>
<script src="{!! asset('assets/admin/plugins/jQuery/jQuery-2.2.0.min.js') !!}"></script>
<script>
	function submitSearchForm() {
		document.getElementById("search_form").submit();
	}
	
	
</script>
 
 <script>
$(document).ready(function(){

 $('.livesearch').keyup(function(e){
	  
        var query = $(this).val();
		$("#knowledgeBaseList").css("display", "none");
        if(query != '' && query.length > 3)
        {
         var _token = $('input[name="_token"]').val();
         $.ajax({
          url:"{{ route('autocomplete.search') }}",
          method:"POST",
          data:{query:query, _token:_token},
          success:function(data){
           $('#knowledgeBaseList').fadeIn();  
			   $("#knowledgeBaseList").css("display", "block");
               $('#knowledgeBaseList').html(data);
          }
         });
        }
    });

    $(document).on('click', 'li', function(){ 
		var searchVal = $('.livesearch').val(); 
		var lastIndex = searchVal.lastIndexOf(" ");
		searchVal = searchVal.substring(0, lastIndex);
		var ftext = searchVal.substring(0, searchVal.length);

        $('.livesearch').val( ftext +' '+$(this).text());  
        $('#knowledgeBaseList').fadeOut();  
    });  

});
</script>
  <script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>

@endsection