@extends('layouts.master')

@section('content')
    <div class="container-xxl">
        <x-breadcrumb listRoute="{{ route('admin.faq-categories.index') }}" model="Faq Categories"></x-breadcrumb>
        <div class="card">
            <div class="card-body">
                <div class="d-flex" style="justify-content:space-between">
                    <ul class="nav nav-tabs nav-pills" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            {{-- <a href="{{ route('admin.faq-categories.edit',$faq_category->id) }}"
                            class="nav-link ">Service</a> --}}
                        </li>
                    </ul>
                    <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="['title', 'Actions']" />
                        <tbody id="tablecontents"></tbody>
                    </table>
                </div>
            </div>

        </div>
        <div class="modal fade" id="modelUpdate" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
            aria-labelledby="modelUpdate" aria-hidden="true">

        </div>
        <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.faq-categories.store') }}" method="POST"
                        enctype="multipart/form-data">
                        <div class="modal-header">
                            <h5 class="modal-title" id="staticBackdropLabel">Add Faq Category</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <x-form.row>
                                <x-form.input type="text" col="6" label="Title" :req="true" id="title"
                                    name="title" />
                                <x-form.input type="text" col="6" label="Slug" :req="true" id="title"
                                    name="slug" />

                            </x-form.row>
                            <x-form.row>
                                <x-form.input :req="true" type="text" col="4" label="Order" id="order"
                                    name="order" />
                            </x-form.row>

                            <div class="mt-2">
                                <x-form.checkbox label="Status" id="status" name="status" value="1"
                                    class="form-check-input " isEditMode="yes" />
                            </div>

                        </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>
    </div>
    </div>
@endsection
@push('custom_js')
    @include('_helpers.row_reorder', ['url' => route('admin.faq-categories.reorder')])
    @include('_helpers.ajax_form')
    @include('_helpers.image_preview', ['name' => 'image'])
    @include('_helpers.yajra', ['url' => route('admin.faq-categories.index'), 'columns' => $columns])
    @include('_helpers.swal_delete')
    @include('_helpers.status_change', ['url' => route('admin.faq-categories.status')])
    <script>
        $(document).on("click", ".itinerary-edit", function(e) {
            e.preventDefault();
            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 => {
                    console.log(response);
                    $("#modelUpdate").html(response)
                    var myModal = new bootstrap.Modal(document.getElementById('modelUpdate'))
                    myModal.show()
                });

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