@extends('layouts.admin', ['pageType' => 'users'])
@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ő felhasználót:<br><span name="userName"></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>Név</th>
                    <th>Email</th>
                    <th>Regisztráció dátuma</th>
                    <th>Műveletek</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($userList as $user)
                    <tr>
                        <td style="display:none;">{{ $user->id }}</td>
                        <td>{{ $user->name }}</td>
                        <td>{{ $user->email }}</td>
                        <td>{{ convertToTimezone($user->created_at) }}</td>
                        <td>@include('admin.users.table_widgets.actions', ['user' => $user])</td>
                    </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <script type="text/javascript">
        var table;

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

        $(document).ready(function() {
            $.fn.dataTableExt.oStdClasses.sWrapper = "dataTables_wrapper dt-bootstrap4 no-footer col";
            table = $('#map-table').DataTable({
                deferRender: true,
                "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'>>",
                "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": [
                    [1, 'desc']
                ]
            });
        });
    </script>
@endsection