@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-12">
            <div class="card">
                @if(isset($card_title))
                <div class="card-header">{{ $card_title }}</div>
                @endif

                <div class="card-body">
                    @if (session('status'))
                        <div class="alert alert-success" role="alert">
                            {{ session('status') }}
                        </div>
                    @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>
                </div>
            </div>
        </div>
    </div>
</div>

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

        window.table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ajax: "{{ route('tcn.list') }}",
            order: [[ 3, 'desc' ]],
            dom: 'ftip',
            language: {
                url: '/js/datatable/lang/hu.json',
                search: "", "searchPlaceholder": "Keresés",
            },
            columns: [
                @if(!empty($action_replicate))
                {data: 'replicate', name: 'replicate', orderable: false, searchable: false},
                @endif
                @foreach($data as $key => $value)
                {data: '{{$key}}', {{$key}}: '{{$key}}'},
                @endforeach
                @if(!empty($action))
                {data: 'actions', name: 'actions', orderable: false, searchable: false},
                @endif
            ],
            columnDefs: [
                { 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