@extends('layout')

@section('title')
Item
@endsection

@section('content')
<section class="content-header">
    <div class="container-fluid">
    <div class="row mb-2">
        <div class="col-sm-6">
        <h1>Item</h1>
        </div>
        <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
            <li class="breadcrumb-item"><a href="#">Home</a></li>
            <li class="breadcrumb-item active">Item</li>
        </ol>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="card card-default">
            <div class="card-header"><h3 class="card-title">Item List</h3></div>
            <div class="card-body">
                <table
                    id="tbl-item"
                    data-classes="table table-striped table-hover"
                    data-toggle="table"
                    data-url="{{ route('item-list') }}"
                    data-show-button-text="true"
                    data-buttons="tableButtons"
                    data-buttons-class="primary"
                    data-pagination="true"
                    data-search="true">
                    <thead>
                        
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script>
    $table = $('#tbl-item')
    $table.on('click-row.bs.table', function(row, el, field){
        window.location.href = el.url
    })

    function tableButtons () {
        return {
            btnAdd: {
                text: 'Add item',
                // icon: 'Add item',
                event: function () {
                    window.location.href = '{{ route("item-create") }}'
                },
                attributes: {
                    class: 'btn-primary'
                }
            }
        }
    }
</script>
@endsection