@extends('frontend.layouts.app')
@section('title', 'Subject All')
@section('content')
@include('frontend.common.header')
@push("style")
<style>
.text-red{
	color: #f04b4c;
}
.text-blue{
	color: #213159;
	line-height: 25px;
}
.text-dark-blue{
	color: #213159;
	font-weight: 600;
	text-align: justify;
}
.text-gray{
	color: #727273;
	font-size: 13px;
    font-weight: 600;
}
#search_box{
	width: 350px;
	float: right;
}
.button-center{
	position: absolute;
    bottom: 15px;
    left: 50%;
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}
.text-justify{
	text-align: justify;
}
.card{
	background-color: #e5e4e4;
}
</style>
@endpush
<section class="page-title page-title-blog">
    <h2>{{$subject[0]->subject_title}}</h2>
</section>

<section>
    <div class="container">
        <div class="row">
			<div class="col-md-9">
			<div class="row">
					<div class="col-12">
						<form method="get">
							<div class="input-group mb-3" id="search_box">
								<input type="text" name="search" id="search" value="{{ Request::input('search') ?? null }}"  class="form-control" placeholder="Search Topics" >
								<div class="input-group-append">
									<input type="submit" class="input-group-text btn btn-primary" value="Search" >
								</div>
							</div>
						</form>
					</div>
				</div>
				<div class="row">
				@forelse ($data as $topic)
					<div class="col-sm-12 col-md-4 mb-4 d-flex">
						<div class="card text-center flex-fill">
							<div class="card-body">
								<h4 class="text-blue">{{$topic->topic_name}}</h4>
								<p class="card-text text-justify">{!! substr(strip_tags($topic->description),0,150) !!}...</p>
								<br><br>
								<a href="{{ url('').'/topics-detail/'.$topic->slug}}" class="btn btn-primary button-center">View All</a>
							</div>
						</div>
					</div>
				@empty
					<div class="col-12">
						<h4> Result Not Found</h4>
					</div>
				@endforelse
				</div>
			</div>
			<div class="col-md-3">
				@include('frontend.common.right-side-menu')
			</div>
        </div>
    </div>
</section>
@push("script")
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
  $(function() {
	 
	$("#search").autocomplete({
 
        source: function(request, response) {
            $.ajax({
				url: "{{ route('fe.topics.ajax') }}",
				data: {
						term : request.term
				 },
				dataType: "json",
				success: function(data){
				   var resp = $.map(data,function(obj){
						return obj.topic_name;
				   }); 
	 
				   response(resp);
				}
			});
		},
		minLength: 1
	 }); 
	 
  });
</script>
@endpush
@endsection