@extends('admin.main')
@section('breadcrumb')
    {{ Breadcrumbs::render('admin.product.rules', $data) }}
@endsection
@inject('dataPresenter', "App\Presenters\DataPresenter")
@section('content')
    <section id="basic-input">
        <div class="row style-product-rule">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">商品規格</h4>
                    </div>
                    <div class="card-body">
{{--                        data-redirect="{{ route('admin.product.list') }}"--}}
                        <form class="formValidation" method="post" action="" data-is-update="1" >
                            <div class="row">
                                <div class="col-md-12">
                                    @if ($data)
                                        <fieldset class="form-group">
                                            <label for="disabledInput">商品編號</label>
                                            <p class="form-control-static" id="staticInput">
                                                {{ $data->id }}
                                            </p>
                                        </fieldset>
                                        <fieldset class="form-group">
                                            <label for="disabledInput">商品名稱</label>
                                            <p class="form-control-static" id="staticInput">
                                                {{ $data->name }}
                                            </p>
                                        </fieldset>
                                    @endif
                                    <fieldset class="form-group">
                                        <label for="disabledInput">商品屬性</label>
                                    </fieldset>
                                    <div id="attr_repeat">
                                        <div data-repeater-list="data">
                                            @foreach($data->attributes as $attribute)
                                                <div class="mb-1 repeater-item" data-repeater-item>
                                                    <div class="input-group-prepend">
                                                        <span class="input-group-text">屬性名稱</span>
                                                        <input name="attribute" class="form-control col-1" placeholder="" autocomplete="off"
                                                               value="{{ $attribute->name }}"/>
                                                        <span class="input-group-text">屬性內容</span>
                                                        <input name="values" class="attribute" autocomplete="off"
                                                               value="{{ implode(',', $attribute->types->pluck('name')->toArray()) }}"/>
                                                        <button class="btn btn-danger text-nowrap px-1" data-repeater-delete type="button">
                                                            <i class="bx bx-x"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            @endforeach
                                            @if($data->attributes->count() < 1)
                                                    <div class="mb-1 repeater-item" data-repeater-item>
                                                        <div class="input-group-prepend">
                                                            <span class="input-group-text">屬性名稱</span>
                                                            <input name="attribute" class="form-control col-1" placeholder="" value="" autocomplete="off"/>
                                                            <span class="input-group-text">屬性內容</span>
                                                            <input name="values" class="attribute" autocomplete="off"/>
                                                            <button class="btn btn-danger text-nowrap px-1" data-repeater-delete type="button">
                                                                <i class="bx bx-x"></i>
                                                            </button>
                                                        </div>
                                                    </div>
                                            @endif
                                        </div>
                                        <div class="form-group mt-1">
                                            <button id="addRepeatBtn" class="btn btn-primary " data-repeater-create type="button"><i class="bx bx-plus"></i>
                                                Add
                                            </button>
                                        </div>
                                    </div>
                                    <fieldset class="form-group">
                                        <table id="rule_table" class="table ">
                                            <tr>
                                                <th>圖片</th>
                                                <th width="200">規格</th>
                                                <th>商品編號</th>
                                                <th width="80">啟用狀態</th>
                                                <th>售價</th>
                                                <th>市價</th>
                                                <th>分潤比例</th>
                                                <th>紅利贈點</th>
                                                <th>庫存</th>
                                                <th>消耗庫存數</th>
                                                <th>低庫存提示</th>
                                            </tr>
                                            @foreach($data->rules as $k => $rule)
                                                <tr data-rule="{{ $dataPresenter->getProductRuleAttributeTypesString($rule) }}">
                                                    <td class="d-inline-flex">
                                                        <img class="ruleImg" width="50" src="{{ $rule->img ? storage_assets($rule->img) : '/bimg/default.jpg' }}">
                                                        <input type="file" class="hidden ruleImgInput" name="rules[{{ $k }}][img]">
                                                    </td>
                                                    <td>{{ $dataPresenter->getProductRuleAttributeTypesString($rule, ' / ') }}</td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][sku]" type="text" placeholder="商品編號" value="{{ $rule->sku }}"></td>
                                                    <td>
                                                        <div class="custom-control custom-switch mr-2 mb-1">
                                                            <input type="checkbox" class="custom-control-input" name="rules[{{ $k }}][status]"
                                                                   id="rules-status[{{ $k }}]" value="1" checked>
                                                            <label class="custom-control-label" for="rules-status[{{ $k }}]">
                                                                <span class="switch-icon-left"><i class="bx bx-check"></i></span>
                                                                <span class="switch-icon-right"><i class="bx bx-x"></i></span>
                                                            </label>
                                                        </div>
                                                    </td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][amount]" type="number" placeholder="售價" value="{{ $rule->amount }}"></td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][market_price]" type="number" placeholder="市價" value="{{ $rule->market_price }}"></td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][share_profit_percent]" type="number" placeholder="分潤比例" value="{{ $rule->share_profit_percent }}"></td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][bonus]" type="number" placeholder="紅利贈點" value="{{ $rule->bonus }}"></td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][stock]" type="number" placeholder="庫存" value="{{ $rule->stock }}"></td>
                                                    <td><input class="form-control" name="rules[{{ $k }}][stock_cost]" type="number" placeholder="消耗庫存數" value="{{ $rule->stock_cost }}"></td>
                                                    <td>
                                                        <input class="form-control" name="rules[{{ $k }}][low_stock_alert]" type="number" placeholder="低庫存提示" value="{{ $rule->low_stock_alert }}">
                                                        <input type="hidden" name="rules[{{ $k }}][rule]" value="{{ $dataPresenter->getProductRuleAttributeTypesString($rule) }}">
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </table>
                                    </fieldset>
                                </div>
                            </div>

                            @checkPerm(PRODUCT_CATEGORY_EDIT)
                                <button class="btn btn-primary" type="submit">{{ $data ? '更新' : '新增' }}</button>
                            @endcheckPerm
                            <a class="btn btn-light" href="{{ route("admin.product.list") }}">返回</a>

                        </form>
                        <div id="table_row_copy" class="hidden ">
                            <table>
                                <tr>
                                    <td class="d-inline">
                                        <img class="ruleImg" width="50" src="{{ asset('/bimg/default.jpg') }}">
                                        <input type="file" class="hidden ruleImgInput" name="rules[{0}][img]">
                                    </td>
                                    <td>{1}</td>
                                    <td><input class="form-control" name="rules[{0}][sku]" type="text" placeholder="商品編號"></td>
                                    <td>
                                        <div class="custom-control custom-switch mr-2 mb-1">
                                            <input type="checkbox" class="custom-control-input" name="rules[{0}][status]"
                                                   id="rules-status[{0}]" value="1" checked>
                                            <label class="custom-control-label" for="rules-status[{0}]">
                                                <span class="switch-icon-left"><i class="bx bx-check"></i></span>
                                                <span class="switch-icon-right"><i class="bx bx-x"></i></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td><input class="form-control" name="rules[{0}][amount]" type="number" placeholder="售價" value="{{ $data->amount }}"></td>
                                    <td><input class="form-control" name="rules[{0}][market_price]" type="number" placeholder="市價" value="{{ $data->market_price }}"></td>
                                    <td><input class="form-control" name="rules[{0}][share_profit_percent]" type="number" placeholder="分潤比例" value="{{ $data->share_profit_percent }}"></td>
                                    <td><input class="form-control" name="rules[{0}][bonus]" type="number" placeholder="紅利贈點" value="{{ $data->bonus }}"></td>
                                    <td><input class="form-control" name="rules[{0}][stock]" type="number" placeholder="庫存" value="0"></td>
                                    <td><input class="form-control" name="rules[{0}][stock_cost]" type="number" placeholder="消耗庫存數" value="1"></td>
                                    <td>
                                        <input class="form-control" name="rules[{0}][low_stock_alert]" type="number" placeholder="低庫存提示" value="{{ $data->low_stock_alert }}">
                                        <input type="hidden" name="rules[{0}][rule]" value="{2}">
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@include('widgets.tagsinput')
@push('js')
    <script src="{{ asset('vendor/forms/repeater/jquery.repeater.min.js') }}"></script>
    <script>

        $(function () {
            //表格排序用，其他地方沒用到所以暫時放這
            $.fn.sortElements = (function(){
                var sort = [].sort;
                return function(comparator, getSortable) {
                    getSortable = getSortable || function(){return this;};
                    var placements = this.map(function(){
                        var sortElement = getSortable.call(this),
                            parentNode = sortElement.parentNode,
                            nextSibling = parentNode.insertBefore(
                                document.createTextNode(''),
                                sortElement.nextSibling
                            );
                        return function() {
                            if (parentNode === this) {
                                // throw new Error(
                                //     "You can't sort elements if any one is a descendant of another."
                                // );
                                console.log("You can't sort elements if any one is a descendant of another.")
                                return false;
                            }
                            // Insert before flag:
                            parentNode.insertBefore(this, nextSibling);
                            // Remove flag:
                            parentNode.removeChild(nextSibling);
                        };
                    });
                    return sort.call(this, comparator).each(function(i){
                        placements[i].call(getSortable.call(this));
                    });
                };
            })();

            let rules = @json($dataPresenter->getProductRules($data));
            let method = {
                getRulesMapping: function() {
                    if (rules.length < 1) {
                        return [];
                    }
                    const loop = (t, a, ...more) =>
                        a === undefined || a.length === 0
                            ? [ t ]
                            : a .flatMap (x => loop ([ ...t, x ], ...more))
                    return loop ([], ...rules)
                },
                tagUpdate: function(e) {
                    let val = e.item;
                    let index = $(this).closest('.repeater-item').index();
                    rules[index] = rules[index] || [];
                    rules[index].push(val);

                    method.refreshTable();
                },
                tagRemove: function(e) {
                    let val = e.item;
                    let index = $(this).closest('.repeater-item').index();
                    let key = rules[index].indexOf(val);
                    rules[index].splice(key, 1);
                    method.refreshTable();
                },
                removeAttribute: function(index) {
                    rules.splice(index, 1);
                },
                refreshTable: function () {
                    let map = method.getRulesMapping();
                    $('#rule_table tr').each(function () {
                        let rule = $(this).data('rule');
                        if (!rule) {
                            return true;
                        }
                        rule = rule.toString();
                        let search = JSON.stringify(rule.split(','));
                        let exists = map.some(function(a, i) {
                            //判斷已存在則移除陣列
                            if (JSON.stringify(a) === search) {
                                map.splice(i, 1);
                                return true;
                            }
                        });
                        if (!exists) {
                            //不存在代表已從屬性移除
                            $(this).remove();
                        }
                    });

                    //新增的加入表格
                    for (let row of map) {
                        let $tr = $('#table_row_copy table tbody').html();
                        let k = $('#rule_table tr:not(:first)').length;
                        let rule = row.join(',');
                        $tr = $($tr.format(k, row.join(' / '), rule));
                        $tr.appendTo('#rule_table');
                        $tr.attr('data-rule', rule);
                    }
                    //表格重新排序
                    $('#rule_table').find('td').filter(function(){
                        return $(this).index() === 0;
                    }).sortElements(function(a, b){
                        if( $.text([a]) == $.text([b]) )
                            return 0;
                        return $.text([a]) > $.text([b]) ? 1: -1;
                    }, function(){
                        // parentNode is the element we want to move
                        return this.parentNode;
                    });
                },
                triggerFileinput: function () {
                    $(this).next().click();
                },
                imgChange: function (e) {
                    const [file] = this.files;
                    if (file) {
                        $(this).prev().attr('src', URL.createObjectURL(file))
                    }
                }
            };
            let tags_params = {
                trimValue: true
            };
            $('.attribute').tagsinput(tags_params);
            $('.attribute').on('itemAdded', method.tagUpdate);
            $('.attribute').on('itemRemoved', method.tagRemove);
            $(document).on('click', '.ruleImg', method.triggerFileinput);
            $(document).on('change', '.ruleImgInput', method.imgChange);
            $('#attr_repeat').repeater({
                isFirstItemUndeletable: true,
                show: function () {
                    let $div = $(this);
                    $('<input class="attribute">').before($div.find('.bootstrap-tagsinput'));
                    $div.find('.bootstrap-tagsinput').remove();
                    if ($('.repeater-item').length >= 3) {
                        $('#addRepeatBtn').prop('disabled', true);
                    }
                    $div.slideDown(function () {
                        $div.find('.attribute').tagsinput(tags_params);
                        $div.find('.attribute').on('itemAdded', method.tagUpdate);
                        $div.find('.attribute').on('itemRemoved', method.tagRemove);
                    });
                },
                hide: function (deleteElement) {
                    if (confirm('是否確定刪除此屬性?')) {
                        let index = $(this).closest('.repeater-item').index();
                        $(this).slideUp(function () {
                            deleteElement();
                            if ($('.repeater-item').length < 3) {
                                $('#addRepeatBtn').prop('disabled', false);
                            }
                            method.removeAttribute(index);
                            method.refreshTable();
                        });

                    }
                }
            });

        });
    </script>
@endpush