@extends('layouts.master')

@section('content')
    <div class="container-xxl">
        <x-breadcrumb model="Package FAQs" item="Index"></x-breadcrumb>
        <div class="card">
            <div class="card-body">
                @include('layouts._includes._package-navigation', ['active' => 'faq', 'section' => 'faqs'])

                <div class="text-end">
                    <button class="btn btn-sm btn-dark mb-2" data-bs-toggle="modal" data-bs-target="#modelCreate"><i
                            class='bx bx-xs bx-plus'> </i>Create</button>
                </div>

                <div class="table-responsive no-wrap">
                    <table class="table" id="datatable">
                        <x-table.header :headers="['Question', 'order', 'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>

        </div>
    </div>

    {{-- create --}}
    <div class="modal fade" id="modelCreate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="modelCreate" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <x-form.wrapper action="{{ route('admin.packages.faq.store', $package->id) }}" method="POST"
                    enctype="multipart/form-data">
                    <input type="hidden" name="package_id" value="{{ $package->id }}">
                    <div class="modal-header">
                        <h5 class="modal-title" id="staticBackdropLabel">Add FAQ</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <x-form.input type="text" :req="true" label="Question" id="question" name="question"
                            value="{{ old('question') }}" />
                        <x-form.textarea label="Answer" isEditor="true" :req="true" id="answer" name="answer"
                            value="{!! old('answer') !!}" rows="5" cols="5" />
                        <x-form.input type="number" :req="true" col="6" label="Order" id="order"
                            name="order" />

                        <br>
                        <x-form.checkbox label="Status" col="12" id="status" name="status" value="1"
                            class="form-check-input" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-sm btn-dark"><i class='bx bx-save bx-xs'></i>
                            Save</button>
                    </div>
                </x-form.wrapper>
            </div>
        </div>
    </div>

    {{-- details --}}
    <div class="modal fade" id="modelUpdate" tabindex="-1" style="display: none;" aria-hidden="true">
    </div>
@endsection
@push('custom_js')
    @include('_helpers.row_reorder', ['url' => route('admin.packages.faq.reorder', $package->id)])
    @include('_helpers.ajax_form')
    @include('_helpers.yajra', [
        'url' => route('admin.packages.faq.index', $package->id),
        'columns' => $columns,
    ])

    @include('_helpers.ck_editor', ['textarea_id' => 'description'])

    @include('_helpers.swal_delete')
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.status_change', ['url' => route('admin.packages.faq.status', $package->id)])


{{--  to enable link field  --}}
    <script>
        document.addEventListener('focusin', function(e) {
            if (e.target.closest(".tox-tinymce-aux, .tox-pop") !== null) {
                e.stopImmediatePropagation();
            }
        });
    </script>

    <script>
        $(document).on("click", ".faq-edit", function(e) {
            e.preventDefault();

            var modal = document.getElementById('modelUpdate');
            tinymce.init(editor_config);
            modal.addEventListener('show.bs.modal', function(event) {
                tinymce.remove("textarea[id='answer'].tinymce");
            })

            const itineraryId = $(this).attr("data-id");
            const url = $(this).attr("href");
            try {
                const response = fetch(url, {
                    headers: {
                        "Accept": "application/json"
                    }
                }).then(async response => {
                    let res = response.text();
                    return res
                }).then(response => {
                    $("#modelUpdate").html(response)
                    var myModal = new bootstrap.Modal(document.getElementById('modelUpdate'));
                    myModal.show();

                    var modal = document.getElementById('modelUpdate');

                    tinymce.init(editor_config);
                    modal.addEventListener('hide.bs.modal', function(event) {
                        tinymce.remove("textarea.tinymce");
                    })
                });

            } catch (error) {
                console.error(error);
            }
        });
    </script>
@endpush