@extends('layouts.admin')

@section('style')
@endSection

@section('script')
    <script>
        $(function () {

            var t = $('#popup_list_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                ajax:  {
                    dataSrc: 'data'
                },
                columns: [
                    { data: 'id' ,'title':'ID'},
                    { data: 'popup_name','title':'Name' },
                    { data: 'updated_at','title':'Last Updated',
                        render: function ( data, type, row ) {
                            return moment( data ).format('LLL');
                        }},
                    { data: 'id','title':'', 'orderable':false,
                        render: function ( data, type, row ) {
                            return `<a href="${window.location.origin}/admin/settings/popup/custom/${data}/edit" class="btn btn-sm btn-primary">Edit</a>`;
                        }}
                ],
                dom:
                    "<'row p-2'<'#create_popup.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'>>" +
                    "<'row px-2'<'col-sm-6'l><'col-sm-6'f>>" +
                    "<'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'
                }],
            });


            t.on( 'order.dt search.dt', function () {
                t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = i+1;
                } );
            } ).draw();

            var create_btn = `<a role='button' href="{{ route('admin.settings.popup.custom.create') }}" class="mr-2 btn btn-sm btn-secondary"><i class="fas fa-plus"></i> Create New Popup</a>`;
            $('#create_popup').append(create_btn);

        });

    </script>

@endSection

@section('content')

    @component('admin.components.tabs')
        <table id="popup_list_table" class="table table-hover dataTable w-100"></table>
    @endcomponent

@endsection