@extends('layouts.app')

@section('content')

@if(isset($title) && $title)
<div class="text-center mt-4 mb-4 font-size-big fw-bold">
    {{ __($label) }}
</div>
@endif

<div class="container mb-5 user" style="border-radius: 20px; overflow: hidden;">
    <div class="row justify-content-center user-video-page">
        @if(isset($action['import']))
            <button type="button" class="btn btn-warning btn-sm mr-1 my-0" onClick="window.location = '{{ route($route.'.import', [app()->getLocale()]) }}'">
                {{__($action['import'])}}
            </button>
        @endif

        @if(isset($action['create']))
            <button type="button" class="btn btn-success text-white btn-sm mr-1 my-0" onClick="rowCreate('{{ route($route.'.create', [app()->getLocale(), $id]) }}', table, '{{__($title.' hozzáadása')}}', '{!! __('button.save') !!}')" alt="Show">
                {{__($action['create'])}}
            </button>
        @endif

        <table class="table data-table display responsive tablewrapping" style="width: 100% !important">
            <thead>
                <tr>
                    @if(!empty($action_replicate))
                    <th></th>
                    @endif
                    @foreach($data as $key => $value)
                    <th>{!!__($value)!!}</th>
                    @endforeach
                    @if(!empty($action))
                    <th></th>
                    @endif
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        
        @if(isset($action['export']))
            <button type="button" class="btn btn-primary btn-sm mr-1 my-0" onClick="window.location = '{{ route($route.'.export', [app()->getLocale()]) }}'">
                {{__($action['export'])}}
            </button>
        @endif
    </div>
</div>

@push('scripts')
<script>
    $(document).ready( function () {

        window.table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: "{{ route( $route.'.list', app()->getLocale()) }}",
            order: [[ 2, 'desc' ]],
            dom: 'ftip',
            language: {
                url: '/js/datatable/lang/hu.json',
                search: "", "searchPlaceholder": "Keresés",
            },
            columns: [
                @foreach($data as $key => $value)
                {data: '{{$key}}', {{$key}}: '{{$key}}'},
                @endforeach
                @if(!empty($action))
                {data: 'actions', name: 'actions', orderable: false, searchable: false},
                @endif
            ],
            columnDefs: [
                // @foreach($data as $key => $value)
                // {
                //     targets: {{ $loop->index }},
                //     render: function (data, type, row) {
                //         return type === 'display' && data && data.length > 30 ? data.substr(0, 27) + '…' : data;
                //     }
                // },
                // @endforeach
                //{ responsivePriority: 5, targets: 0 },
                //{ responsivePriority: 1, targets: 1 },
                //{ responsivePriority: 5, targets: 2 },
                //{ responsivePriority: 1, targets: 3 },
                //{ responsivePriority: 5, targets: 4 }
            ],
            drawCallback : function( settings )
            {
                $('.data-table').off('click').on('click', 'button', function() { 
                    var action = $(this).data('action');
                    var status = $(this).data('status');
                    var tr     = $(this).parents('tr');
                    var row    = window.table.row( tr.hasClass('child') ? $(this).parents('tr').prev() : $(this).parents('tr') );
                    var data   = row.data();

                    @include('tables.js.actions')
                });
            },
        });

    });
</script>
@endpush

@endsection