@extends('setting.layouts.layout')
@section('title',trans('product_setting.title'))
@section('script_css')
@endsection
@section('script_buttom')
    <!-- Parsley js for validator-->
    <script src="/assets/plugins/parsleyjs/parsley.min.js"></script>
    <script src="/assets/pages/form-validation.init.js"></script>
    <!-- Custom javascript -->
    <script language="javascript">
        var url = "{{ $URL }}";

        function doAction(type)
        {
            switch(type)
            {
                case "create":
                    $("#dataForm").attr("action", url + "/createAction");
                    $("#dataForm").submit();
                    break;
                case "cancel":
                    window.location = url;
                    return;
                default:
                    alert("{{ trans('common.parameter_error') }}");
                    return;
            }

            return;
        }

        $(document).ready(function() {
            $('button[data-action]').on('click', function() {
                doAction($(this).attr('data-action'));
            });
        })
    </script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function()
        {
            const accountListUrl = '/setting/product_setting/ajaxGetCompanyUser';//取得聯絡人清單的API 位置
            const accountListMethod = 'GET';//取得聯絡人清單的API 發送方法GET/POST
            let accountListData = {id:null};//取得聯絡人清單的API 攜帶資料,廠商的選取值會寫入在id 參數內,以外的請自行擴充

            $('.contactingPicker select[name*="company"]').on('change' , changeAccount);//註冊廠商的下拉選項事件
            $('.contactingPicker .icon-add_circle').on('click' , duplicatePicker);//註冊增加或移除的按鈕事件

            function changeAccount(e)
            {
                let _t = e.currentTarget;
                let _picker =  $(_t).closest('.contactingPicker')[0];
                let _accountSelect = $(_picker).find('select[name*="account"]')[0];

                if(_t.value == '') {
                    $(_accountSelect).find('option').not(':first').remove();//移除第一個空值以外的項目
                    return;//跳出
                }

                accountListData.id = _t.value;//加入廠商的選取值

                let props = {
                    url:accountListUrl,
                    type:accountListMethod,
                    data:accountListData,
                    dataType:'json',

                    processData: true,
                    complete:function(jqXHR , status){
                        if(status == 'success'){//網路連線成功發送
                            if(jqXHR.status == 200){//回傳狀態正確
                                console.log(jqXHR.responseJSON);
                                $(_accountSelect).find('option').not(':first').remove();//移除第一個空值以外的項目
                                for(var i = 0;i<jqXHR.responseJSON.length;i++){
                                    $(_accountSelect).append($(document.createElement('option')).attr('value' , jqXHR.responseJSON[i].value).html(jqXHR.responseJSON[i].label));
                                }
                            } else {
                                alert('資料回傳異常,http status = ' + jqXHR.status);
                            }
                        } else if(status == 'error'){//網路錯誤
                            alert('網路疑似斷線');
                        }
                        $(_picker).find('select').prop('disabled' , false);//開啟廠商與聯絡人選項
                    }
                };

                $(_picker).find('select').prop('disabled' , true);//鎖定廠商與聯絡人選項
                $.ajax(props);
            }

            function duplicatePicker(e)
            {
                let _t = e.currentTarget;
                let _picker =  $(_t).closest('.contactingPicker')[0];
                let tmp , _name , _index;
                if($(_t).attr('class') == 'icon-add_circle'){//複製
                    tmp = $(_picker).clone(true);//元素深複製
                    _name = $(tmp).find('select[name*="company"]').attr('name');
                    _name = _name.substring(0 , _name.indexOf('['));
                    _index = $('select[name*="' + _name + '"][name*="company"]').length;
                    $(tmp).find('select[name*="company"] , select[name*="account"]').each(function(){ascendingNameIndex(this , _index)});//追加name 的[n] 值
                    $(tmp).find('select[name*="company"]').prop('selectedIndex' , 0);
                    $(tmp).find('select[name*="account"] option').not(':first').remove();//移除第一個空值以外的項目
                    $(_picker.parentElement).append(tmp);//插入複製元素
                    $(_t).attr('class' , 'icon-remove_circle');//按鈕變更為移除
                } else if($(_t).attr('class') == 'icon-remove_circle'){//移除
                    _name = $(_picker).find('select[name*="company"]').attr('name');
                    _name = _name.substring(0 , _name.indexOf('['));
                    $(_picker).remove();
                    $('select[name*="' + _name + '"][name*="company"]').each(reSerializedNameIndex);//重新排序name 的[n] 值
                }
            }

            function ascendingNameIndex(_ele , _index)
            {
                let _name = $(_ele).attr('name');
                _name = _name.substring(0 , _name.indexOf('[') + 1) + _index + _name.substring(_name.indexOf(']') , _name.length);
                $(_ele).attr('name' , _name);
            }

            function reSerializedNameIndex(_index , _ele)
            {
                let _name , _picker;
                _picker = $(_ele).closest('.contactingPicker');
                _name = $(_picker).find('select[name*="company"]').attr('name');
                _name = _name.substring(0 , _name.indexOf('[') + 1) + _index + _name.substring(_name.indexOf(']') , _name.length);
                $(_picker).find('select[name*="company"]').attr('name' , _name);
                _name = $(_picker).find('select[name*="account"]').attr('name');
                _name = _name.substring(0 , _name.indexOf('[') + 1) + _index + _name.substring(_name.indexOf(']') , _name.length);
                $(_picker).find('select[name*="account"]').attr('name' , _name);
            }
        })
    </script>
@endsection
@section('buttons')
@endsection
@section('content')
    <div class='block-r'>
        <div class='centBoxs'>
            <div class='boxsFull'>
                <p class="t-blue-20 p-d-30">{{ trans('product_setting.create_product') }}</p>
            </div>

            <form name="dataForm" id="dataForm" method="post" enctype="multipart/form-data">
                @include('components.validationErrorMessage')
                {!! csrf_field() !!}
                <div class='boxsFull'>
                    <div class='boxsFull m-d-25'>
                        <div class='boxs30'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_chinese_name') }}</p>
                            <label>
                                <input class='input-f' type="text" name="product_chinese_name" value="{{ old('product_chinese_name') }}" placeholder="{{ trans('product_setting.product_chinese_name') }}" maxlength="100" required>
                            </label>
                        </div>
                        <div class='boxs30'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_english_name') }}</p>
                            <label>
                                <input class='input-f' type="text" name="product_english_name" value="{{ old('product_english_name') }}" placeholder="{{ trans('product_setting.product_english_name') }}" maxlength="200" required>
                            </label>
                        </div>
                    </div>
                    <div class='boxsFull m-d-25'>
                        <div class='boxs30'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_type_id') }}</p>
                            <div class="select-style">
                                <select class="form-control" name="product_type_id" required>
                                    <option value="null">{{ trans('common.unselected') }}</option>
                                    @foreach($productTypeList as $list)
                                        <option value="{{ $list -> product_type_id }}">{{ $list -> product_type_name }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class='boxs30'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_sort') }}</p>
                            <div class="select-style">
                                <select class="form-control" name="product_sort" required>
                                    <option value="null">{{ trans('common.unselected') }}</option>
                                    @for($i = 1; $i <= 100; $i++)
                                        <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class='boxsFull m-d-25'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_image') }}</p>
                        <div class='updateBox'>
                            <div class="box82_l">
                                <div class='boxsFull m-d-10 one-file'>
                                    <input type="file" name='product_image' accept="image/png,image/jpeg" class="form-control" id='file'>
                                    <div class='cover'>
                                        <img src="img/file_icon.svg">
                                        <p class="t-file name"></p>
                                        <button class="icon-cancel cancel"></button>
                                    </div>
                                </div>
                            </div>
                            <div class="box82_r">
                                <label class='btn-outline-blue outlineNobg icon-add order-r' for='file'>{{ trans('common.add_file') }}</label>
                            </div>
                        </div>
                    </div>
                    <div class='boxsFull m-td-25'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_description') }}</p>
                        <textarea class='input-f' name="product_description" rows="6" cols="40" placeholder="{{ trans('product_setting.product_description') }}" maxlength="10000">{{ old('product_description') }}</textarea>
                    </div>
                    <div class='boxsFull m-td-25'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_keyword') }}</p>
                        <textarea class='input-f' name="product_keyword" rows="6" cols="40" placeholder="{{ trans('product_setting.product_keyword') }}" maxlength="10000">{{ old('product_keyword') }}</textarea>
                    </div>
                    <div class='boxsFull m-td-25'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_remark') }}</p>
                        <textarea class='input-f' name="product_remark" rows="6" cols="40" placeholder="{{ trans('product_setting.product_remark') }}" maxlength="10000">{{ old('product_remark') }}</textarea>
                    </div>

                    <i class="splitLine_bl"></i>

                    @foreach($quotationTypeList as $list)
                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 text-l p-d-10'>{{ $list -> system_code_value }}</p>
                            <div class='boxsFull m-td-25 contactingPicker'>
                                <div class="boxs30">
                                    <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.company') }}</p>
                                    <div class="select-style">
                                        <select class="form-control" name="{{ $list -> system_code_key }}[0][company]" required>
                                            <option value="null">{{ trans('common.unselected') }}</option>
                                            @foreach($companyList as $clist)
                                                @if($clist -> company_type == $list -> system_code_key)
                                                    <option value="{{ $clist -> company_id }}">{{ $clist -> company_name }}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="box37_r">
                                    <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.company_user') }}</p>
                                    <div class="box19_l">
                                        <div class="select-style">
                                            <select class="form-control" name="{{ $list -> system_code_key }}[0][account]" required>
                                                <option value="null">{{ trans('common.unselected') }}</option>
                                                @foreach($companyUserList as $culist)
                                                    <option value="{{ $culist -> company_user_id }}">{{ $culist -> company_user }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                    <div class="box19_r">
                                        <button type="button" class="icon-add_circle"></button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>

                <div class='boxsFull m-td-25'>
                    <button class='btn-half-blue order-r' data-action="create">{{ trans('common.save') }}</button>
                </div>
            </form>
        </div>
    </div>
@endsection