@extends('layouts.app')
@section('title', trans('menu.faq_title'))

@section('content')
    @php $user = auth()->user(); @endphp
<div class="content">
    <x-content.header title="{{__('faq.title')}}" >
        <x-slot:headerRight>

            @can('create faqs')
                <a href="{{url('faqs/create')}}" class="btn-secondary-base"><x-svg-icon icon="icon-plus" />{{trans('forms.lbl_add_new')}}</a>
            @endcan


            <a href="{{url('faqs/categories')}}" class="btn-secondary-base"><i class="mdi mdi-library-books"></i>{{__('title.categories')}}</a>
        </x-slot:headerRight>
    </x-content.header>

    <div class="relative">
        <div class="selection-overlay hidden absolute top-1 left-16 right-1 bg-white/90 rounded-t-lg px-4 py-3 lg:py-2 flex items-center gap-3 z-[20]">
            <span class="text-md-semibold text-custom-grey-600"><span class="selected-count">0</span> {{ trans('forms.lbl_items_selected') }}</span>
            <x-svg-icon icon="vertical-bar" />

            @if($user->hasAnyPermission(['delete faqs']))
                <a href="javascript:;" data-uri="{{url('faqs')}}" class="btn-delete-all text-sm-semibold text-custom-orange-500 flex items-center gap-2"><x-svg-icon icon="icon-trash"/><span class="hidden lg:inline-block">{{trans('forms.lbl_delete')}}</span></a>
            @endif
        </div>


        <table id="datatable" class="table-custom-striped w-full" style="width: 100%;">
            <thead>
                <tr>
                    @if($user->hasAnyPermission(['delete faqs']))
                        <th scope="col">
                            <input class="table-header-checkbox" type="checkbox" name="select_all" id="select-all" value="1">
                        </th>
                    @endif
                    <th scope="col">{{trans("tables.question_title")}}</th>
                    <th scope="col" class="hide">asdf</th>
                    <th scope="col">{{trans("tables.category_title")}}</th>
                    @if($user->hasAnyPermission(['edit faqs', 'delete faqs']))
                        <th scope="col">{{trans("tables.action_title")}}</th>
                    @endif
                </tr>
            </thead>
        </table>
    </div>
</div>
@stop

@section('footer-script')

    <script type="text/javascript">

        PDDataTable({
            url: "{{ url('faqs') }}",
            columns:[
                @if($user->hasAnyPermission(['delete faqs']))
                    { data: 'checkboxgrid', name: 'checkboxgrid', orderable: false, searchable: false, className: "checkbox-column"},
                @endif
                { data: 'question', name: 'question'},
                { data: 'answer', name: 'answer', className: 'hide'},
                { data: 'category', name: 'category.name', orderable: false},
                @if($user->hasAnyPermission(['edit faqs', 'delete faqs']))
                    { data: 'action', name: 'action', orderable: false, searchable : false, className: "text-right" }
                @endif
            ],
            columnDefs: [{
                target: {{ $user->hasAnyPermission(['delete faqs']) ? 2 : 1 }},
                visible: false,
            }],
        });

    </script>
@stop