@extends("layout.app")
@section("content")
    <section>
        <div class="container">
            <div class="masonry__container text-right">
                <h2 class="text-center font-weight-bold">اسئلة شائعة</h2>
                <input type="search" id="accordion_search_bar" placeholder="بحث" value="" onkeyup="this.setAttribute('value', this.value);">
                <div class="accordion" id="category">
                @foreach($faq_categories as $faq_category)
                    @php
                    $faqs = $faq_category->faqs()->where("is_active",1)->orderBy("order","asc")->get();
                    @endphp
                    <h3 id="category-{{$faq_category->id}}" class="text-center mt-3 mb-3">{{$faq_category->title}}</h3>
                        @foreach($faqs as $faq)
                        <div class="card"  id="question-{{$faq->id}}" data-category="{{$faq_category->id}}">
                            <div class="card-header">
                                <h4 class="mb-0 c-pointer" data-toggle="collapse" data-target="#answer-{{$faq->id}}" >
                                    {{$faq->question}}
                                </h4>
                            </div>
                            <div id="answer-{{$faq->id}}" class="collapse" aria-labelledby="question-{{$faq->id}}" data-parent="#category">
                                <div class="card-body">
                                    {!! $faq->answer !!}
                                </div>
                            </div>
                        </div>
                        @endforeach
                @endforeach
                </div>
            </div>
        </div>
    </section>
@endsection

@section("scripts")
    <script>
        (function(){
            var searchTerm, panelContainerId,titlePanelContainerId;
            $.expr[':'].containsCaseInsensitive = function (n, i, m) {
                return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
            };

            $('#accordion_search_bar').on('change keyup paste click', function () {
                searchTerm = $(this).val();
                $('.accordion > .card').each(function () {
                    panelContainerId = '#' + $(this).attr('id');
                    titlePanelContainerId = '#category-' + $(this).data('category');
                    $(panelContainerId + ':not(:containsCaseInsensitive(' + searchTerm + '))').hide();
                    $(panelContainerId + ':containsCaseInsensitive(' + searchTerm + ')').show();
                });
            });
        }());
    </script>
@endsection