@extends('admin.main')
@include('widgets.select')
@include('widgets.datatables')
@inject('numberPresenter', 'App\Presenters\NumberPresenter')
@section('content')
    <section id="basic-datatable">
        <div class="row style-product-list">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">商品列表</h4>
                        <div class="heading-elements">
                            <ul class="list-inline mb-0 d-flex align-items-center">
                                <li class="ml-2">
                                    @checkPerm(PRODUCT_EDIT)
                                    <a class="btn btn-primary" href="{{ route('admin.product.show') }}">新增商品</a>
                                    @endcheckPerm
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="card-body card-dashboard">
                        <div class="table-responsive">
                            <table id="productTable"
                                   class="table zero-configuration datatable_init "
                                   data-url="{{route('admin.product.get')}}"
                                   data-params="temperature_layer,category,tag"
                            >
                                <thead>
                                <tr>
                                    <th data-checkbox="id"></th>
                                    <th data-img="index_img">商品圖片</th>
                                    <th data-name="sku">商品貨號</th>
                                    <th data-name="category">商品分類</th>
                                    <th data-name="name">商品名稱</th>
                                    <th data-name="tags">TAGS</th>
                                    <th data-name="stock">庫存</th>
                                    <th data-name="status">狀態</th>
                                    <th data-destroy_url="<i class='bx bx-x'></i>,btn-icon btn-light-danger delete"
                                        data-copy_url="<i class='bx bxs-copy'></i>,btn-icon btn-light-info"
                                        data-rule_url="<i class='bx bxs-spreadsheet'></i>,btn-icon btn-light-secondary"
                                        data-edit_url="<i class='bx bx-edit'></i>,btn-icon">操作
                                    </th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('js')
    <script>
        $(function () {
            let category = @json($category);
            let tags = @json($tags);
            let temperatureLayer = @json($numberPresenter->temperatureLayer());

            let $temperatureLayer = $('<select id="temperature_layer" class="form-control" name="temperature_layer"/>')
                .appendOptions(temperatureLayer, true);
            let $select = $('<select id="category" class="form-control" name="category"/>');
            let $tag = $('<select id="tag" class="form-control" name="tag"/>');

            $('<option value=""/>').text('全部').appendTo($select);
            $.each(category, function (k, row) {
                let $optgroup = $('<optgroup/>');
                $optgroup.attr('label', row.name).appendTo($select);
                $.each(row.sub, function (_k, sub) {
                    let $option = $('<option/>');
                    $option.val(sub.id).text(sub.name).appendTo($optgroup);
                });
            });

            $('<option value=""/>').text('全部').appendTo($tag);
            $.each(tags, function (k, row) {
                let $option = $('<option/>');
                $option.val(row.id).text(row.name).appendTo($tag);
            });


            let $table = $('#productTable').data('object');
            $table.addTool('溫層', $temperatureLayer);
            $table.addTool('商品分類', $select);
            $table.addTool('TAG', $tag);
            $table.setCheckboxButtonSetting({
                delete: '{{ route('admin.product.multiple.destroy') }}',
                enable: '{{ route('admin.product.multiple.enable') }}',
                disable: '{{ route('admin.product.multiple.disable') }}',
            });

            $tag.multipleInit({
                width:200
            });
            $select.multipleInit({
                width:200
            });
        });
    </script>
@endpush