@php
    use App\MemberListingModel;
	  $memberInstance = new MemberListingModel();
    use App\MasterModel;
	  $master_instance = new MasterModel();
	use App\blogModel;
	$blogModelInstance = new blogModel();
@endphp

<style type="text/css">
	#country-list {
		float: left;
		list-style: none;
		margin-top: 0px;
		padding: 0;
		width: 100%;
	}
	#country-list li {
		padding: 10px;
		background: #f0f0f0;
		border-bottom: #bbb9b9 1px solid;
	}
	#country-list li:hover {
		background: #ece3d2;
		cursor: pointer;
	}
	.ch_name {
		display: block;
		z-index: 9;
		border: 10px solid #f0f0f0;
		background-color: #f0f0f0;
		left: 58%;
	}
</style>
<!--/Let Side Content-->
<div class="card">
    <form action="{{url('/article-filter')}}" method="GET">
      
    <div class="card-header">
      <h3 class="card-title">Article Search</h3>
    </div>
    <div class="card-body">
        <div class="" id="">
        
            @php
                $category_name = $blogModelInstance->display_article_Categories();
				$cat_array = explode(",",$category_name->feature_categories);
            @endphp
            @php
                $member_name = $blogModelInstance->display_article_member();
				// $cat_array = explode(",",$category_name->feature_categories);
            @endphp
			<div class="form-group">
				<label for="keyword" class="control-label">Posted by Member</label>
				{{-- <input type="text" placeholder="Member Name" name="member_name" class="form-control" id="memberName" onkeyup="getAllrelatedNames('memberName')" autocomplete="off" value="{{$member_name}}">
				<div class="ch_name" style="display: none;overflow: scroll;"></div> --}}
                <select class="form-control select2" name="member_name">
                    <option value="">Select Member</option>
						@foreach($member_name as $member)
						<option value="{{$member->first_name}} {{$member->last_name}}">{{$member->first_name}} {{$member->last_name}}</option>
						@endforeach
                </select>
			</div>
            <div class="form-group">
                <label>Search Category</label>
                <select class="form-control select2" name="category[]" multiple="">
                    <option value="">Select Category</option>
						@for($i = 0; $i< sizeof($cat_array); $i++)
						@if($category!=NULL)
						<option value="{{$cat_array[$i]}}" {{in_array($cat_array[$i] , $category) ? 'selected="selected"' : ''}}>{{$cat_array[$i]}}</option>
						@else
						<option value="{{$cat_array[$i]}}">{{$cat_array[$i]}}</option>
						@endif
						@endfor
                </select>
            </div>
			<div class="form-group">
                <label>Article name</label>
                <input type="text" class="form-control br-tl-7 br-bl-7" name="article_name" placeholder="Article Name" value="{{$article_name}}">
            </div>
        </div>
    </div>
    <div class="card-footer">
        <button type="submit" class="btn btn-secondary btn-block">Apply Filter</button>
    </div>
    </form>
</div>





<script type="text/javascript">
    function getAllrelatedNames(id) {
        var keyword = $('#' + id).val();

        var token = '{{ csrf_token() }}';
        $.ajax({
            url: "{{ url('/') }}/all-article-membername",
            type: "POST",
            data: {
                '_token': token,
                'keyword': keyword,
            },
            success: function(data) {
                if (data != '') {
                    $(".ch_name").show();
                    $(".ch_name").html(data);
                    $(".ch_name").css("background", "#FFF");
					$(".ch_name").css("max-height", "200px");
                } else {
                    $(".ch_name").hide();
                }
            },
            error: function(data) {
                console.log(data);
            }
        });
    }

    /*
     * Related to autosuggest names of categories.
     */
    function selectCategories(first_name,last_name) {
		if(first_name != "" && last_name != ""){
			name= first_name.concat(" ",last_name);
			$("#memberName").val(name);
			$(".ch_name").hide();
		}
    }
</script>