@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">{!! __('user.video.title') !!}</div>

                <div class="card-body">

                    @if(Session::has('success_message'))
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {!! Session::get('success_message') !!}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif
                    @if(Session::has('error_message'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {!! Session::get('error_message') !!}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                    @endif
                    
                    <table class="table data-table display responsive tablewrapping" style="width: 100% !important">
                        <thead>
                            <tr>
                                {{-- @if(!empty($action_replicate))
                                <th></th>
                                @endif --}}
                                @foreach($video 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( $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