@extends('layouts.admin.app')
@section('title', __('labels.faqs') )
@section('content')
<!-- content @s -->
<div class="nk-content detailPage">
    <div class="container-fluid">
        <div class="nk-content-inner">
            <div class="nk-content-body">
                <div class="nk-block-head nk-block-head-sm">
                    <div class="nk-block-between">
                        <div class="nk-block-head-content">
                            <h3 class="nk-block-title page-title">{{ __('labels.faqs') }}</h3>
                            <div class="nk-block-des text-soft">
                                <!-- breadcrumb @s -->
                                <nav>
                                    <ul class="breadcrumb breadcrumb-arrow">
                                        <li class="breadcrumb-item"><a href="{{route('admin.dashboard')}}">{{ __('labels.dashboard') }}</a>
                                        </li>
                                        <li class="breadcrumb-item active">{{ __('labels.faqs') }}</li>
                                    </ul>
                                </nav>
                                <!-- breadcrumb @e -->
                            </div>
                        </div><!-- .nk-block-head-content -->
                        <div class="nk-block-head-content">
                            <div class="toggle-wrap nk-block-tools-toggle">
                                <a href="javascript:void(0);" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-more-v"></em></a>
                                <div class="toggle-expand-content" data-content="pageMenu">
                                    <ul class="nk-block-tools g-3">
                                        <li><a href="javascript:void(0);" data-toggle="modal" onclick="faqAddAndEdit()" class="btn btn-primary"><span>{{ __('labels.add_faq') }}</span></a></li>
                                    </ul>
                                </div>
                            </div>
                        </div><!-- .nk-block-head-content -->
                    </div><!-- .nk-block-between -->
                </div><!-- .nk-block-head -->
                <div class="nk-block">
                    <div class="card card-bordered">
                        <div class="card-inner p-0">
                            <div class="faqCard">
                                <div class="accordion rounded-0" id="customerFaq">
                                    @forelse($faq as $faqs)                                    
                                    <div class="accordion-item">
                                        <div class="accordion-head w-100 text-left bg-white">
                                            <h6 class="title">{{$faqs['question']}}</h6>
                                            <span> {{@$faqs->category['name']}} / </span>
                                            <span> {{@$faqs->subCategory['name']}} </span>
                                            <div class="action d-flex align-items-center">
                                                <a href="javascript:void(0);" id="editID" data-toggle="modal" data-id="{{$faqs['id']}}" onclick="faqAddAndEdit('{{$faqs['id']}}')" class="d-flex"><em class="icon ni ni-pen"></em></a>
                                                <a href="javascript:void(0);" class="deleteBtn" onclick="deletRecord('{{$faqs['id']}}')" class="d-flex"><em class="icon ni ni-trash"></em></a>
                                                <buttton class="accordion-icon collapsed" data-toggle="collapse" data-target="#faq-q{{$faqs['id']}}" title="View Answer"></buttton>
                                            </div>
                                        </div>
                                        <div class="accordion-body collapse" id="faq-q{{$faqs['id']}}" data-parent="#customerFaq">
                                            <div class="accordion-inner">
                                                <p>{!!$faqs['answer']!!}
                                                </p>
                                            </div>
                                        </div>
                                    </div>
                                    @empty
                                    <div class="alert alert-danger">
                                        <span> {{ __('error.no_data_available') }} </span>
                                    </div>
                                    @endforelse
                                </div>
                            </div>
                        </div><!-- .card-inner -->
                    </div>
                </div><!-- .nk-block -->
            </div>
        </div>
    </div>
</div>
<!-- content @e -->
<div class="modal fade zoom" tabindex="-1" id="addEditFaqModal" data-backdrop="static" data-keyboard="false"></div>
@endsection
@push('scripts')
<script src="https://cdn.tiny.cloud/1/{{ config('services.tinymce.tinymce_key') }}/tinymce/6/tinymce.min.js"></script>
<script src="{{asset('assets/js/admin/faq/faq.js')}}"> </script>
@endpush