@extends('layouts.backend')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-sm-12">
            <h4 class="page-title">Gambar Slider</h4>
            <ol class="breadcrumb">
                <li>
                    <a href="{{route('home')}}">Home</a>
                </li>
                <li class="active">
                    Gambar Slider
                </li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="card-box">
                <h4 class="m-t-0 header-title"><b>Daftar Gambar Slider</b></h4>
                
                <table class="table table-bordered m-0">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Judul Gambar</th>
                            <th>Gambar</th>
                            <th>Status Slider</th>
                            <th>Aksi</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var table = $('.table').DataTable({
                initComplete : function() {
                    var api = this.api();
                    $('[data-toggle="tooltip"]').tooltip()
                    $('#tbl_filter input').off('.DT').on('input.DT',function() {
                        api.search(this.value).draw();
                    });
                },
                oLanguage : {
                    sProcessing : "Getting Item"
                },
                processing : true,
                serverSide : true,
                ajax : {
                    url : "{{ route('backoffice-berita-ajax') }}",
                    type : 'POST',
                    data : {
                        _token : "{{csrf_token()}}"
                    },
                    dataType : 'JSON',
                    error : function(o,t,tr) {
                        alert(o.statusText);
                    }
                },
                columns : [
                    
                    {data : 'id'},
                    {data : 'judul'},
                    {
                        data : 'cover',
                        orderable : false,
                        mRender : function(data) {
                            return (
                                '<img height="59px" src="'+data+'" />'
                            )
                        }
                    },
                    {
                        data : 'slider',
                        orderable : false,
                        mRender : function(data) {
                            if (data) {
                                return('<span class="label label-success">Aktif</span>')
                            }
                            else{
                                return('<span class="label label-pink">Tidak aktif</span>')
                            }

                        }
                    },

                    {
                        data : 'link',
                        orderable : false,
                        mRender : function(data) {
                            return ('<a data-link="'+data.set_slider+'" class="btn btn-icon waves-effect waves-light btn-success"><i class=" ti-layout-slider"></i></a')
                        }
                    }

                ],
                "order": [[1, 'asc']]
            });
            $('.table tbody').on('click', '.btn-success', function() {
                let url = $(this).data('link');
                window.location = url;
            });
        });
    </script>
</div> 
@endsection