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

    <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ép</th>
                    <th>Cikkszám</th>
                    <th>Név</th>
                    <th>Aktív</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/products/import'">Termékek
        importálása</button>
    <script type="text/javascript">
        var table;

        $(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: 'products/table',
                columns: [{
                        data: 'id',
                        visible: false,
                        orderable: true,
                        searchable: false
                    },
                    {
                        data: null,
                        orderable: false,
                        className: 'no-padding',
                        searchable: false,
                        render: function(data, type, row) {
                            return `<img class="table-img" src="/storage/product_images/${row.id}.${row.image_extension}">`;
                        }
                    },
                    {
                        data: 'sku',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'name',
                        orderable: true,
                        searchable: true
                    },
                    {
                        data: 'is_active',
                        orderable: true,
                        searchable: false,
                        render: function(data, type, row) {
                            return data ? 'Igen' : 'Nem';
                        }
                    },
                    {
                        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