@extends('layouts.content')

@push('custom-css')
    <link rel="stylesheet" href="/css/custom_pills.css" />
    <link rel="stylesheet" href="/css/custom_style_faq.css" />
@endpush

@section('body_content')
    <main>
        <header class="page-header page-header-compact page-header-light border-bottom bg-white mb-4">
            <div class="container-xl px-4 py-3">
                <div class="page-header-content">
                    <div class="row align-items-center justify-content-between pt-3">
                        <div class="col-auto mb-3">
                            <h1 class="page-header-title fw-bolder fs-2">
                                <div class="page-header-icon"><i class="fa-solid fa-comments fa-fw"></i></div>
                                Frequently Ask Questions
                            </h1>
                            <div class="mt-2">
                                <span class="header-description">Discover answers to frequently asked questions regarding
                                    our services and system.</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container px-4 mt-4">
            <div class="row align-items-center">
                <div class="col-8 mb-3">
                    <div class="input-group">
                        <span class="input-group-text bg-white border-end-0">
                            <i class="fa fa-search text-muted"></i>
                        </span>

                        <input type="search" id="form-search" class="form-control border-start-0"
                            placeholder="Question search" />
                    </div>
                </div>

                @if (in_array(auth()->user()->roles->accessLevel->name, ['Developer', 'HR-Manager', 'HR-Legal-Staff']))
                    <div class="col-auto ms-auto mb-3">
                        <button class="btn btn-primary" onclick="window.location.href = '/faqs/create'">
                            <i class="fa-solid fa-plus fa-fw me-2"></i>Create
                        </button>
                    </div>
                @endif
            </div>


            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex flex-column flex-md-row align-items-start">
                        <div class="nav flex-row flex-md-column nav-pills mb-3 mb-md-0 me-md-3" id="v-pills-tab"
                            role="tablist"></div>

                        <div class="container">
                            <div class="tab-content" id="v-pills-tabContent">
                                <div class="tab-pane fade show active" id="v-pills-dynamic" role="tabpanel" tabindex="0">
                                    <div class="flex-grow-1">
                                        <div id="faqContentArea">
                                            <div class="text-center py-3">
                                                <div class="spinner-border text-primary" role="status"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    @push('scripts')
        <script src="{{ asset('js/faqs/_init.js') }}?v={{ filemtime(public_path('js/faqs/_init.js')) }}"></script>
        <script src="{{ asset('js/faqs/index.js') }}?v={{ filemtime(public_path('js/faqs/index.js')) }}"></script>
    @endpush
@endsection