@extends("Admin.template" ,["table"=>true])
@section("content")

    <!-- Page header -->
    <div class="page-header page-header-light">
        <div class="page-header-content header-elements-md-inline">
            <div class="page-title d-flex">
                <h4><i class="icon-arrow-right6 mr-2"></i>
                    <span class="font-weight-semibold"> {{__("messages.sections")}}</span> - {{__("messages.sections_index")}} </h4>
                <a href="#" class="header-elements-toggle text-default d-md-none"><i class="icon-more"></i></a>
            </div>
        </div>
    </div>
    <!-- /page header -->




    <div class="content">
        <div class="card">
            <div class="card-header header-elements-inline">
                <h5 class="card-title"> {{__("messages.sections_index")}} </h5>
                <div class="header-elements">
                    <div class="list-icons">
                        <a class="list-icons-item" data-action="collapse"></a>
                        <a class="list-icons-item" data-action="reload"></a>
                    </div>
                </div>
            </div>
            <div class="table-responsive">
                <table class=" table datatable-list">
                    <thead>
                    <tr>
                        <th> {{__("messages.section_img_1")}} </th>
                        <th> {{__("messages.section_img_2")}} </th>
                        <th> {{__("messages.name")}}</th>
                        <th>{{__("messages.created_at")}}</th>
                        <th>{{__('messages.actions')}}</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <!-- /content area -->
@endsection
@section('scripts')
    <script type="text/javascript">
        var table;
        var DatatableDataSources = function () {

            // Setup module components
            // Basic Datatable examples
            var _componentDatatableDataSources = function () {
                if (!$().DataTable) {
                    console.warn('Warning - datatables.min.js is not loaded.');
                    return;
                }
                // Setting datatable defaults
                $.extend($.fn.dataTable.defaults, {
                    autoWidth: false,
                    dom: '<"datatable-header"fBl><"datatable-scroll-wrap"t><"datatable-footer"ip>',
                    language: {
                        search: '<span>{{__('messages.search')}}:</span> _INPUT_',
                        searchPlaceholder: '{{__('messages.searchPlaceholder')}}',
                        lengthMenu: '<span>{{__('messages.lengthMenu')}}:</span> _MENU_',

                        paginate: {
                            'first': 'First',
                            'last': 'Last',
                            'next': $('html').attr('dir') == 'rtl' ? '&larr;' : '&rarr;',
                            'previous': $('html').attr('dir') == 'rtl' ? '&rarr;' : '&larr;'
                        }
                    }
                });

            };
            return {
                init: function () {
                    _componentDatatableDataSources();
                }
            }
        }();
        // Initialize module
        document.addEventListener('DOMContentLoaded', function () {
            DatatableDataSources.init();
        });
        function delete_fun(id) {
            var url = '{{ route("sections.destroy", ":id") }}';
            url = url.replace(':id', id);
            Swal.fire({
                title: '{!! __('messages.SwalTitleDeleteSection') !!}',
                html: '{!! __('messages.SwalHTMLDeleteSection') !!}',
                showCloseButton: true,
                focusConfirm: false,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#443b3b',
                confirmButtonText: '{!! __('messages.SwalConfirmButtonTextDelete') !!}',
                cancelButtonText: '{!! __('messages.SwalCancelButtonTextDelete') !!}',
            }).then((result) => {
                if (result.isConfirmed) {
                    $.ajax({
                        url: url,
                        method: "DELETE",
                        data: {
                            '_token': "{{csrf_token()}}",
                        },
                        async: false,
                        success: function (result) {
                            console.log(result);
                            if (result.error_code == 0) {
                                Swal.fire(
                                    '{!! __('messages.SwalDoneDelete') !!}',
                                    result.error_msg,
                                    'success'
                                );
                                table.ajax.url('{{ route("sections.index" ) }}').load();
                            } else {
                                Swal.fire(
                                    '{{__('messages.SwalServerError')}}',
                                    result.error_msg,
                                    'error'
                                )
                            }
                        }
                    });
                }
            })
        }


        setTimeout(function () {
            $('.alert').css('display', 'none');
        }, 3000)


        $(function () {
            table = $('.datatable-list').DataTable({
                buttons: {
                    buttons: [
                        {
                            extend: 'print',
                            text: '<i class="icon-printer mr-2"></i> {!! __('messages.print') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },

                        {
                            extend: 'copyHtml5',
                            text: '<i class="icon-copy mr-2"></i> {!! __('messages.copyHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: [0, ':visible']
                            }
                        },
                        {
                            extend: 'excelHtml5',
                            text: '<i class="icon-file-excel mr-2"></i> {!! __('messages.excelHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: ':visible'
                            }
                        },
                        {
                            extend: 'pdfHtml5',
                            text: '<i class="icon-file-pdf mr-2"></i> {!! __('messages.pdfHtml5') !!}',
                            className: 'btn btn-light',
                            exportOptions: {
                                columns: [0, ':visible']
                            }
                        },
                        {
                            extend: 'colvis',
                            text: '<i class="icon-three-bars"></i>',
                            className: 'btn bg-blue btn-icon dropdown-toggle'
                        }
                    ]
                },
                processing: true,
                serverSide: true,
                responsive: true,
                "scrollX": true,
                fixedColumns: true,
                "deferRender": true,
                scrollY: 500,
                scrollCollapse: false,
                scroller: true,
                stateSave: true,
                ordering: true,
                pageLength: 25,
                "autoWidth": false,
                order: [
                    [3, "desc"]
                ],
                ajax: '{{ route("sections.index"  ) }}',
                columns: [
                    {data: 'thumbnail', name: 'thumbnail', orderable: false, searchable: false},
                    {data: 'selected_thumbnail', name: 'selected_thumbnail', orderable: false, searchable: false},
                    {data: 'name', name: 'name'},
                    {data: 'created_at', name: 'created_at'},
                    {data: 'action', name: 'action', orderable: false, searchable: false},
                ]
            });
        });
    </script>
@endsection