@extends('layout')

@section('title')
Product
@endsection

@section('content')
<section class="content-header">
    <div class="container-fluid">
    <div class="row mb-2">
        <div class="col-sm-6">
        <h1>Product</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">Product</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">Product List</h3></div>
            <div class="card-body">
                <table
                    id="tbl-product"
                    data-classes="table table-striped table-hover"
                    data-toggle="table"
                    data-buttons-class="primary"
                    data-url="{{ route('product-list') }}"
                    data-show-button-text="true"
                    data-buttons="tableButtons"
                    data-pagination="true"
                    data-search="true">
                    <thead>
                        <tr>
                            <th data-field="ImageURLs" data-formatter="imageFormatter"></th>
                            <th data-field="InvSKU" data-sortable="true">SKU</th>
                            <th data-field="ProductName" data-sortable="true">Name</th>
                            <th data-field="Price" data-sortable="true" data-formatter="priceFormatter">Price</th>
                            <th data-field="RewardPoint" data-sortable="true" data-formatter="floatFormatter">Point</th>
                            <th data-field="ProductDescription" data-formatter="maxLengthFormatter">Description</th>
                            <th data-field="htmlIsActive" data-sortable="true">Is Active</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</section>
@endsection

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

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