@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-id="{{$faq->id}}" data-category="{{$faq_category->id}}">
                            <div class="card-header" style="display: flex; justify-content: space-between;align-items: center;">
                                <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" style="padding-bottom: 8px!important;">
                                    {!! $faq->answer !!}
                                </div>
                                <div style="display:flex;justify-content:center;font-weight: bold;font-size: 15px;color: #666666a8">
                                    <span style="margin:0 5px"> <span id="views-{{$faq->id}}" style="font-size: 10px">{{$faq->views}}</span> <i class="fa fa-eye" data-id="{{$faq->id}}" style="cursor: pointer"></i></span>

                                    <span style="margin:0 5px"> <span id="likes-{{$faq->id}}" style="font-size: 10px">{{$faq->likes}}</span> <i class="far fa-thumbs-up like" data-id="{{$faq->id}}" style="cursor: pointer"></i></span>

                                    <span style="margin:0 5px"> <span id="dis-{{$faq->id}}" style="font-size: 10px">{{$faq->dis_likes}}</span> <i class="far fa-thumbs-down dis-like" data-id="{{$faq->id}}" style="cursor: pointer"></i></span>
                                </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();
                });
            });
        }());

        $(document).ready(function (e) {

            $('.card').on('click',function (){
                let id = $(this).data('id')
                let isCollapse = !$(this).closest('*').find('#answer-'+id).hasClass('collapse show')
                    $.ajax({
                    url: "{{route("update-faq-attr")}}",
                    type: "POST",
                    data: { id: id,isCollapse:isCollapse ,type:'views'},

                    success: function(result) {
                        console.log(result)
                        $('#views-'+id).text(result['viewsCount'])
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });
            $('.like').on('click',function (){

                let id = $(this).data('id')
                $.ajax({
                    url: "{{route("update-faq-attr")}}",
                    type: "POST",
                    data: { id: id, type:'likes'},
                    success: function(result) {
                        $('#likes-'+id).text(result['likesCount'])
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });
            $('.dis-like').on('click',function (){
                let id = $(this).data('id')
                $.ajax({
                    url: "{{route("update-faq-attr")}}",
                    type: "POST",
                    data: { id: id, type:'disLike'},
                    success: function(result) {
                        $('#dis-'+id).text(result['disLikesCount'])
                    },
                    error: function(e) {
                        console.log(e)
                    }
                });
            });

        });
    </script>
@endsection