@extends('layouts.admin_main')

@section('title', trans('admin_lang.home_sliders'))

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/css/dataTables.bootstrap4.min.css') }}">
@endpush

@section('content')
    <div class="kt-portlet kt-portlet--mobile">
        @header(['title' =>  trans('admin_lang.home_sliders'), 'icon' => 'fa fa-image'])
            <div class="kt-portlet__head-label">
                @button(['type' => 'create', 'label' => trans('admin_lang.create_new_home_slider'), 'url' => route('admin.home-sliders.create')])@endbutton
            </div>
        @endheader
        <div class="kt-portlet__body">
            <div class="table_container">
                <div class="table-responsive">
                    <table class="table table-striped table-bordered" id="home-slider-table">
                        <thead>
                            <tr>
                                <th>{{ trans('admin_lang.id') }}</th>
                                <th>{{ trans('admin_lang.name') }}</th>
                                <th>{{ trans('admin_lang.image') }}</th>
                                {{--<th>{{ trans('admin_lang.parent_category') }}</th>--}}
                                <th>{{ trans('admin_lang.status') }}</th>
                                <th>{{ trans('admin_lang.created_at') }}</th>
                                <th>{{ trans('admin_lang.actions') }}</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script type="text/template" id="header-buttons">
{{--    @include('components.button',['type' => 'create', 'label' => trans('admin_lang.create_new_home_slider'), 'url' => route('admin.home-sliders.create')])--}}
</script>

<script src="{{ asset('assets/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/js/dataTables.bootstrap4.min.js') }}"></script>
<script type="text/javascript">
    const url = "{{ route('admin.home-sliders.data') }}";
    const lang = "{{ app()->getLocale() }}";
    const filters = {!! json_encode($filters) !!};

    jQuery(document).ready(function() {
        dataTable(jQuery('#home-slider-table'), url, [
                { data: 'index', defaultContent: '' },
                { data: 'name', name: 'name' },
                { data: 'image', name: 'image' },
//                { data: 'parent_category', name: 'parent_category' },
                { data: 'status', name: 'status', searchable: false },
                { data: 'created', name: 'created_at', searchable: false },
                { data: 'action', name: 'action', orderable: false, searchable: false }
            ],
            lang,
            filters,
            jQuery('#header-buttons').html(),
            undefined,
            [[4, 'desc']]
        );
    });
</script>
@endpush