@extends('layouts.app')

@section('pagetitle', 'FAQ items in ' . $category->name)

@section('breadcrumbs')
    <ol class="breadcrumb float-sm-right">
        <li class="breadcrumb-item"><a href="{{route('dashboard')}}">Dashboard</a></li>
        <li class="breadcrumb-item active">Admin</li>
        <li class="breadcrumb-item"><a href="{{route('admin.faq.cat.index')}}">FAQ categories</a></li>
        <li class="breadcrumb-item active">@yield('pagetitle')</li>
    </ol>
@endsection

@section('content')
    <section class="content">
        <div class="row">
            <a href="{{route('admin.faq.cat.index')}}" class="ml-2 m-2 btn btn-primary"><i
                        class="fa fa-arrow-left"></i> {{__('Back')}}</a>

            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">{{__("Here you can find all FAQ items in category :category", ["category" => $category->name])}}</h3>
                        <a class="float-right btn-sm btn btn-primary" href="{{route('admin.faq.item.create', ['category' => $category])}}"><i
                                class="fa fa-plus"></i> {{__('Add')}}</a>
                    </div>
                    <!-- /.card-header -->
                    <div class="card-body">
                        <table class="datatable-init table table-striped">
                            <thead>
                            <tr>
                                <th>#</th>
                                <th>{{__('Question')}}</th>
                                <th>{{__('Answer')}}</th>
                                <th data-sortOrder="none"></th>
                            </tr>
                            </thead>
                            <tbody>
                            @foreach($items as $item)
                                <tr>
                                    <td>{{$item->id}}</td>
                                    <td>{{$item->question}}</td>
                                    <td>{{$item->answer}}</td>
                                    <td>
                                        <a href="{{route('admin.faq.item.edit', $item)}}"
                                           class="btn btn-primary"><i
                                                class="fa fa-pencil-alt"></i> {{__('Edit')}}
                                        </a>
                                        <a href="#" data-id="{{$item->id}}"
                                           class="itemDelBtn btn btn-danger"
                                           data-toggle="modal" data-target="#modal-delete-item"><i
                                                class="fa fa-times"></i> {{__('Delete')}}
                                        </a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>


    <div class="modal fade" id="modal-delete-item" aria-modal="true" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content bg-danger">
                <form id="itemDelForm" action="{{route('admin.faq.item.destroy', ['item' => "<ID>"])}}" method="POST">
                    @csrf
                    @method('delete')
                    <div class="modal-header">
                        <h4 class="modal-title">{{__('Delete item')}}</h4>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <p>{{ __("Are you sure?") }} {{ __("This can not be undone!") }}</p>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-outline-light"
                                data-dismiss="modal">{{__('Cancel')}}</button>
                        <button type="submit" class="btn btn-outline-light">{{__('Delete')}}</button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
@endsection

@section('page_js')

    <script>
        $(document).ready(function () {
            $('.itemDelBtn').click(function () {
                var itemid = $(this).attr('data-id');
                var baseDelUrl = "{{route('admin.faq.item.destroy', ['item' => "<ID>"])}}"
                var delUrl = baseDelUrl.replace("%3CID%3E", itemid)
                $('#itemDelForm').attr("action", delUrl)
            })
            $('.datatable-init').DataTable(
                {
                    responsive: true,
                    language: {
                        url: '{{asset('/js/datatables_lang/' . app()->getLocale() . '.json')}}'
                    },
                    'columnDefs': [
                        {
                            'targets': [0], /* column index */
                            responsivePriority: 2,
                        },
                        {
                            'targets': [1], /* column index */
                            responsivePriority: 1,
                        },
                        {
                            'targets': [2], /* column index */
                            'orderable': false, /* true or false */
                            responsivePriority: 1,
                        }]

                }
            );

        });
    </script>
@endsection