@extends('layouts.admin', ['pageType' => 'faqs'])
@section('content')
    @include('widgets/admin-error-handling')

    {{-- Are u sure popup modal delete --}}
    <div class="modal" tabindex="-1" role="dialog" id="areUSureModalDelete">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Biztos törölni szeretné a következő GYIK-et:<br><span name="faq"></span>
                    </h5>
                </div>
                <form action="" method="POST">
                    @csrf
                    @method('DELETE')
                    <div class="modal-footer">
                        <button type="button" class="btn submit-button secondary" data-dismiss="modal">Mégse</button>
                        <button type="submit" class="btn submit-button">Töröl</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="custom-width mx-auto table-container">
        <table id="map-table" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th style="display:none;">Azonosító</th>
                    <th>Kérdés</th>
                    <th>Műveletek</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <button type="button" class="btn submit-button under-table" onclick="window.location.href='/admin/faqs/create'">Új GYIK</button>
    <script type="text/javascript">
        var table;

        function deleteModel(element) {
            var id = element.getAttribute('data-id');
            var name = element.getAttribute('data-name');
            var url = "faqs/" + id;
            $('#areUSureModalDelete form').attr('action', url);
            $('#areUSureModalDelete span[name="faq"]').html(name);
        };

        $(document).ready(function() {
            $.fn.dataTableExt.oStdClasses.sWrapper = "dataTables_wrapper dt-bootstrap4 no-footer col";
            table = $('#map-table').DataTable({
                "dom": "<'row justify-content-between'<'col'l>r<'d-none d-xl-block'p><'col'f>><'row justify-content-center d-flex d-xl-none'p>t<'row justify-content-between'<'col'i>p<'col'>>",
                processing: true,
                serverSide: true,
                deferRender: true,
                ajax: 'faqs/table',
                columns: [{
                        data: 'id',
                        visible: false,
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: 'question',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'actions',
                        orderable: false,
                        searchable: false
                    }
                ],
                "language": {
                    "lengthMenu": "Elemek száma oldalonként _MENU_",
                    "emptyTable": "A táblázat üres",
                    "zeroRecords": "Nincs találat",
                    "info": "Oldalszám: _PAGE_ / _PAGES_",
                    "search": "Keresés",
                    "infoEmpty": "Nincs megjelenítendő információ",
                    "paginate": {
                        "first": "Első",
                        "last": "Utolsó",
                        "next": "Következő",
                        "previous": "Előző"
                    },
                    "infoFiltered": "(Szűrve _MAX_ elem kozül)",
                },
                "order": [
                    [0, 'asc']
                ]
            });
        });
    </script>
@endsection