@extends('layouts.content')

@push('custom-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><i
                                        class="fa-solid fa-plus fa-fw"></i></div>
                                Create Frequently Ask Questions
                            </h1>
                        </div>
                        <div class="col-12 col-xl-auto mb-3">
                            <a class="btn btn-sm btn-light text-primary" href="/user">
                                <i class="me-1" data-feather="arrow-left"></i>
                                Back to Employee List
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        <!-- Main page content-->
        <div class="container-xl px-4 mt-4">
            @include('partials.alert')

            <div class="row mb-3">
                <div class="col-auto ms-auto">
                    <button class="btn btn-primary" type="button" data-bs-toggle="modal"
                        data-bs-target="#create_category_faq_modal"><i class="fa-solid fa-plus fa-fw me-2"></i>Add
                        Category</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body">
                    <form action="/faqs" method="post" autocomplete="off" id="create_faq_form"
                        enctype="multipart/form-data">
                        @csrf

                        <h5 class="fw-bolder">Section 1</h5>
                        <hr>

                        <div class="row mb-3">
                            <div class="col-md-7 mb-3">
                                <label for="" class="form-label">Title</label>
                                <input type="text" class="form-control" name="title" id="create_faq_form_title"
                                    placeholder="e.g How to reset password ?">
                            </div>

                            <div class="col-md-5 mb-3">
                                <label for="" class="form-label">Category</label>
                                <select class="form-control selectpicker" name="category" id="create_faq_form_category"
                                    data-placeholder="Choose Category.." data-live-search="true"></select>
                            </div>
                        </div>

                        <div class="row mb-3">
                            <div class="col-md-12">
                                <label class="form-label">Content</label>
                                <div class="form-control p-0" style="height: auto;">
                                    <div id="create_faq_form_editor" style="min-height: 200px;"></div>
                                </div>

                                <input type="hidden" name="content" id="hiddenContent">
                            </div>
                        </div>

                        <button class="btn btn-primary"><i class="fa-solid fa-floppy-disk fa-fw me-2"></i>Save</button>
                    </form>
                </div>
            </div>
        </div>
    </main>

    @include('faqs.modals.create_category_modal')

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