@section('style')
    @parent
@endsection

@section('script')
    @parent


    <script>
        $(function () {
            var t = $('#banner_table').DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{!! $route !!}',
                },
                // 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: 'position', name: 'position'},
                    {data: 'name', name: 'name'},
                    {data: 'description', name: 'description'},
                    {data: 'desktop_image', name: 'desktop_image'},
                    {data: 'mobile_image', name: 'mobile_image'},
                    {data: 'action_link', name: 'url'},
                    {data: 'start_datetime', name: 'start_datetime'},
                    {data: 'end_datetime', name: 'end_datetime'},
                    {data: 'status', name: 'status'},
                    {data: 'action', name: 'action'},
                ],
                columnDefs: [{
                    targets: [0,2,3,7],
                    searchable: false,
                    orderable: false,
                },{
                    targets: [0,2,3,4,5,6],
                    className: 'text-center'
                },{
                    targets: [7],
                    className: 'text-center action-group'
                }],
                autoWidth: false
            });
        });
    </script>
@endsection

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

        <div class="d-flex d-sm-none h-auto mt-auto p-2 position-sticky w-100"
             style="bottom: 0; z-index: 99">
            <a href="{{ route('home') }}" data-toggle="tooltip" title="View Platform" target="_blank" class="btn btn-default mb-0" style="border-radius: 0.2em 0 0 0.2em"><i class="fas fa-eye"></i></a>
            <a href="{{ route('admin.settings.add.banner') }}" class="btn btn-xs btn-primary" style="padding-left: 10px; padding-right: 10px; padding-top: 5px; border-radius: 0 0.2em 0.2em 0">{{ __('admin_setting.btnAdd') }}</a>
        </div>

        <div class="d-none d-sm-flex justify-content-end pb-2 position-sticky w-100 h-auto"
             style="top: .5rem; z-index: 99; margin-top: -0.75rem">
            <a href="{{ route('home') }}" data-toggle="tooltip" title="View Platform" target="_blank" class="btn btn-default mb-0" style="border-radius: 0.2em 0 0 0.2em"><i class="fas fa-eye"></i></a>
            <a href="{{ route('admin.settings.add.banner') }}" class="btn btn-xs btn-primary" style="padding-left: 10px; padding-right: 10px; padding-top: 5px; border-radius: 0 0.2em 0.2em 0">{{ __('admin_setting.btnAdd') }}</a>
        </div>
    </div>
    <!-- /.card-header -->

    <div class="card-body table-responsive p-0">
        <table id="banner_table" class="table table-hover dataTable text-left table-sm">
            <thead>
                <tr>
                    <th>No.</th>
                    <th>Position</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Desktop Image</th>
                    <th>Mobile Image</th>
                    <th>URL</th>
                    <th>Start Date</th>
                    <th>End Date</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- /.card-body -->
</div>

@component('components.utility.modal_confirmation_delete')
@endcomponent