@php $category = -1; @endphp
@forelse ($faqs as $key => $faq)
    <div id="topic-{{ $faq->category_id ?? 'general-question' }}" class="flex flex-col gap-4">

        @if($category != $faq->category_id)
            <h1 class="display-xs-bold text-base-black mt-12">
                {{ $faq->category? $faq->category->name : trans('faq.general_questions') }}
            </h1>
            @php $category = $faq->category_id; @endphp
        @endif

        <div class="accordion flex flex-col gap-4">
            <div class="faq-accordion-item border border-custom-grey-200 bg-base-white">
                <div class="accordion-title cursor-pointer text-lg-semibold text-custom-grey-900">
                    {{$faq->question}}
                    <x-svg-icon icon="icon-down" class="accordion-icon float-right" />
                </div>
                <div class="accordion-content hidden text-md-regular text-custom-grey-700">
                    <p>
                        {!!str_replace("&nbsp; ", "<span style='width:9px;display:inline-block'></span>", $faq->answer)!!}
                    </p>
                    @php $assets = $faq->getMedia('files'); @endphp
                    @if ($assets && !$assets->isEmpty())
                        <div class="mt-4 no-print">
                            <h1 class="text-sm-semibold text-custom-grey-700 mb-4">{{trans("title.lbl_attachments")}}</h1>
                            <div class="flex gap-3 overflow-x-scroll no-scrollbar light-gallery lightGallery readers">
                                @foreach ($assets as $asset)
                                    <div class="flex justify-center flex-col items-center">
                                        <div class='flex justify-center items-center h-[80px] w-[121.75px] px-[36.87px] py-4 bg-custom-blue-25 rounded-lg reader'>
                                            {!! get_formatted_asset($asset, true) !!}
                                        </div>

                                        <a class="mt-4" href="{{ route('media.download', $asset->id) }}">
                                            <x-svg-icon icon="icon-download" />
                                        </a>
                                    </div>
                                @endforeach

                            </div>
                        </div>
                    @endif

                    {{-- @if((isset($faq->category) && isset($faq->category->name)))
                        <p class="my-2 badge-pill badge-pill-primary"><small>{{$faq->category->name}}</small></p>
                    @endif --}}

                    <div class="flex justify-end items-center small text-muted mt-2 mb-0 content-helpful">
                        {{__('forms.was_this_question_helpful')}}
                        <div class="btn-group ml-3">
                            <button class="btn-success btn-text-sm btn-helpful mr-2" href="javascript:;" data-id="{{$faq->id}}" data-type="helpful_yes">
                                <i class="mdi mdi-thumb-up-outline mr-1"></i> {{__('forms.lbl_yes')}}
                            </buttona>
                            <button  class="btn-danger btn-text-sm btn-helpful" href="javascript:;" data-id="{{$faq->id}}" data-type="helpful_no">
                                <i class="mdi mdi-thumb-down-outline"></i> {{__('forms.lbl_no')}}
                            </button>
                        </div>
                    </div>
                    {{-- <button class="btn-primary-sm my-[8px]"
                        onclick="location.href='/pages/faqs/details-1.html'"
                    >
                        See Details
                    </button> --}}
                </div>
            </div>
        </div>
    </div>
@empty
    <h1 class="display-xs-bold text-base-black mt-12">
        {{trans("faq.no_result")}}
    </h1>
@endforelse
<div class="pagination-row">
    {{ $faqs->links() }}
</div>