@extends('layouts.admin')

@section('style')
    @parent
@endsection

@section('script')
    @parent


    <script>
        $(function () {
            var t = $('#banner_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! url()->current() !!}',
                },
                // scrollX: true,
                pageLength: 25,
                lengthMenu: [[10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"]],
                dom:
                    "<'justify-content-center justify-content-sm-between row p-3'<''l><'col text-right'f><'#import_export.text-right'B>>" +
                    "<'row'<'col-sm-12 overflow-auto'tr>>" +
                    "<'row p-2'<'col-sm-5'i> <'col-sm-7'p>>",
                buttons: [{
                    extend: 'csv',
                    text: '<i class="fas fa-file-export"></i> Export CSV',
                    className: 'btn btn-sm btn-default'
                }],
                columns: [
                    {data: 'DT_RowIndex', name: 'DT_RowIndex'},
                    {data: 'key', name: 'key'},
                    @php
                        $exclude_idx = [0];
                    @endphp
                    @foreach ($locales as $idx => $locale)
                        @php
                            $locale = addslashes($locale);
                            $exclude_idx[] = $idx + 2;
                        @endphp
                        {data: '{{ $locale }}', name: '{{ $locale }}'},
                    @endforeach
                    @php
                        $exclude_idx[] = ($idx ?? 0) + 2 + 1;
                    @endphp
                    {data: 'action', name: 'action'},
                ],
                columnDefs: [{
                    targets: {{ json_encode($exclude_idx) }},
                    searchable: false,
                    orderable: false,
                },{
                    targets: [{{ array_pop($exclude_idx) }}],
                    className: 'text-center action-group'
                }],
                autoWidth: false
            });
        });
    </script>
@endsection

@section('content')
@php
    $page_title =  __('admin_setting.titleListGroup') .' <small>'. $trans_group .'</small>';
@endphp

<section class="content">
    <div class="row">
        <div class="col-md-12">
            @include('layouts.flashmessage')

            <div class="card card-primary card-outline shadow">
                <div class="card-header">
                    <h3 class="card-title">{{ __('admin_setting.labelDetails') }}</h3>
                </div>

                <div class="card-body">
                    <table id="banner_table" class="table table-bordered table-hover dataTable">
                        <thead>
                            <tr>
                                <th>No.</th>
                                <th>Key</th>
                                @foreach ($locales as $locale)
                                <th>{{ $locale }}</th>
                                @endforeach
                                <th></th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection