@extends('layouts.app')

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

                <div class="card-body">
                    @if(isset($action['import']))
                        <button id="import_button" type="button" class="btn btn-warning btn-sm mr-1 my-0" onClick="dialogModal( null, null, '{!! __($label.' importálása') !!}', '{!! __('Valóban importálni akarod a nyelvi kulcsokat?') !!}', '{!! __('button.go') !!}', function () { }, function () { }, function () { window.location = '{{ route($route.'.import', [app()->getLocale()]) }}'; });">
                            {{__($action['import'])}}
                        </button>
                    @endif

                    @if(isset($action['create']))
                        <button id="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') !!}' {{ (isset($has_draft)) ? ", function () { $('#create_button').prop('disabled', true); }" : '' }})" 
                            alt="Show" {{ (isset($has_draft) && $has_draft) ? 'disabled' : '' }}>
                            {{__($action['create'])}}
                        </button>
                    @endif
                    
                    @if(isset($table_filter) && !empty($table_filter))
                        <div class="me-3 d-inline">
                            @if(isset($table_filter_name) && $table_filter_name != '')
                            {!! __($table_filter_name) !!}:
                            @endif
                            <select class="table-filter">
                                <option value="">{!! __('all') !!}</option>
                                @foreach ($table_filter as $filter)
                                <option>{!! __($filter['name']) !!}</option>
                                @endforeach
                            </select>
                        </div>
                    @endif

                    @if(isset($checkbox_filter) && !empty($checkbox_filter))
                        <div class="form-check d-inline-block me-4">
                            <input type="checkbox" class="form-check-input checkbox-filter" id="checkbox_filter" name="checkbox_filter">
                            <label class="form-check-label" for="checkbox_filter">{!! __($checkbox_filter_name) !!}</label>
                        </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>
                    
                    @if(isset($action['export']))
                        <button type="button" class="btn btn-primary btn-sm mt-4 mr-1 my-0" onClick="window.location = '{{ route($route.'.export', [app()->getLocale()]) }}'">
                            {{__($action['export'])}}
                        </button>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

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

        window.table = $('.data-table').DataTable({
            processing: true,
            serverSide: true,
            responsive: true,
            ordering: @if($order[0] === 'disabled') false @else true @endif,
            ajax: "{{ route( $route.'.list', ['locale' => app()->getLocale(), 'id' => $id, 'type' => $type]) }}",
            @if($order[0] !== 'disabled')
            order: [[ {{$order[0]}}, '{{$order[1]}}' ]],
            @endif
            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)
                    @php $substr = 1 @endphp
                    @foreach ($substr_exception as $exception)
                        @if($key == $exception)
                            @php $substr = 0 @endphp
                        @endif
                    @endforeach
                {
                    targets: {{ $loop->index }},
                    render: function (data, type, row) {
                        var substr = {{ $substr }};
                        return type === 'display' && data && substr && 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')
                });
            },
        });

        @if(isset($table_filter) && !empty($table_filter))
        $('.table-filter').on('change', function(){
            table.search(this.value).draw();   
        });
        @endif

        
        @if(isset($checkbox_filter) && !empty($checkbox_filter))
        $('.checkbox-filter').on('change', function(){
            if($(this).prop('checked') === true) {
                table
                @foreach ($checkbox_filter as $filter)
                .column({{$filter['col']}}).search('{{__($filter['search'])}}')
                @endforeach
                .draw();
            } else {
                table
                @foreach ($checkbox_filter as $filter)
                .column({{$filter['col']}}).search('')
                @endforeach
                .draw();
            }
        });
        @endif
    });
</script>
@endpush

@endsection