@extends('app')
@section('content')
<div class="container">
    <div class="d-flex justify-content-between align-items-center">
        <h3>Knowledge Base Articles</h3>
    </div>

    <hr class="my-1" style="border: 1px solid orange; width: 100%;">

<div class="search-add" style="display: flex; justify-content: flex-end; margin: 18px;">
    <input type="text" id="searchInput" class="form-control" placeholder="Search Articles..." style="max-width: 250px; margin-right: 8px;">
    <a href="{{ route('knowledge_base.create') }}" id="add" data-toggle="tooltip" title="Add New Article" class="btn btn-primary">
        <i class="fa fa-plus"></i>
    </a>
</div>

    <ul class="list-group mt-3" id="articlesList">
        @foreach($articles as $article)
            <li class="list-group-item">
                <a href="{{ route('knowledge_base.show', $article->id) }}">
                    {{ $article->problem_statement }}
                </a>
            </li>
        @endforeach
    </ul>
</div >
<div class="container">
 {!! $articles !!}
</div>
@endsection

@section('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#searchInput").on("keyup", function() {
        let value = $(this).val().toLowerCase();
        $("#articlesList li").filter(function() {
            $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
    });
});
</script>
@endsection