@extends('layouts.admin')


@section('style')
@endSection

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

            var t = $('#voucher_series_table').DataTable({
                lengthMenu: [ [10, 25, 50, 100, 200, 500, -1], [10, 25, 50, 100, 200, 500, "All"] ],
                dom:
                    "<'row p-2'<'#create_voucher.col-sm-6 mb-2 text-left'><'#import_export.col-sm-6 mb-2 text-left text-sm-right'B>>" +
                    "<'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'
                }],
                autoWidth: false

            });

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

@section('content')

    @component('admin.components.tabs')
        <table id="voucher_series_table" class="table table-bordered table-hover dataTable">
            <thead>
            <tr>
                <th>No.</th>
                <th>Image</th>
                <th>Slug</th>
                <th>Name</th>
                <th>Left</th>
            </tr>
            </thead>
            <tbody>
            @foreach($items as $item)
                <tr>
                    <td></td>
                    <td><img width="50" src="{{ url($item['image']) }}"></td>
                    <td>{{$item['slug']}}</td>
                    <td>{{$item['name']}}</td>
                    <td>{{$item['left']}}</td>
                </tr>
            @endforeach
            </tbody>
        </table>
    @endcomponent

@endsection