@extends('layouts.layout-2')

@section('content')

    <h4 class="font-weight-bold py-3 mb-1">
        {{ __('Fragen & Antworten') }}
    </h4>

    <div class="card">
        <div class="ui-bordered px-4 pt-3 mb-0">
            <div class="form-row align-items-center">
                <div class="form-group col-12 col-sm-6">
                    <select class="custom-select" name="filter_identifier_options" id="filter_identifier_options" style="">
                        <option value="">Alle Kategorien</option>
                        @foreach($identifier_options as $id=>$name)
                            <option value="{{$id}}" >{{$name}}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-12 col-sm-6">
                    <div class=" mb-2 text-right">
                        <a href="{{ route('cms_answer_question_detail', ['new']) }}" class="btn btn-sm btn-primary">Neuen Eintrag anlegen</a>
                    </div>
                </div>
            </div>
        </div>

        <div class="card-datatable table-responsive py-2">

            <table class="datatables-faq table table-striped table-bordered">
                <thead>
                <tr>
                    <th style="max-width: 60px;">&nbsp;</th>
                    <th>{{__('Frage')}}</th>
                    <th>{{__('Kategorie')}}</th>
                    <th>{{__('Date')}}</th>
                    <th>{{__('sichtbar')}}</th>
                    <th>#</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
            <div class="mt-4 col">
                <a href="{{ route('cms_answer_question_detail', ['new']) }}" class="btn btn-sm btn-primary">Neuen Eintrag anlegen</a>
            </div>
        </div>
        <script>
            $( document ).ready(function() {
                var oTable = $('.datatables-faq').DataTable({
                    "processing": true,
                    "serverSide": true,
                    ajax: {
                        url: '{!! route( 'cms_answer_question_datatable' ) !!}',
                        data: function(d) {
                            d.filter_identifier_options = $('select[name=filter_identifier_options]').val();
                        }
                    },
                    "order": [[ 0, "desc" ]],
                    "columns": [
                        { data: 'action_edit', orderable: false, searchable: false},
                        { data: 'question', name: 'question' },
                        { data: 'category', name: 'category'},
                        { data: 'created_at', name: 'created_at' },
                        { data: 'active', name: 'active' },
                        { data: 'delete', name: 'delete' },
                    ],
                    "bLengthChange": false,
                    "iDisplayLength": 100,
                    "language": {
                        "url": "/js/German.json"
                    }
                });

                $('#filter_identifier_options').on('change', function(){
                    oTable.draw();
                });
            });
        </script>
    </div>



@endsection