@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'));
            });
            
            //wrenlin
            $('select').select2();
        })
    </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);
            }
            */

            //wrenlin

            $('.contactingPicker .select_company').on('change' , updateCompanyUser);//廠商的下拉選項事件
            $('.contactingPicker .select_company').change();

            $('.icon-add_circle').on('click',addCompany);
            $('.icon-remove_circle').on('click',delCompany);


            $('.contactingPicker .select_company').select2();
            $('.contactingPicker .select_company_user').select2();
            $('.contactingPicker .select_quotation_type').select2();



        })


        function delCompany(e){
            $(this).parents(".contactingPicker").remove();
        }

        function addCompany(e){
            /*
            let obj=$(".company_section_item").first().clone();
            let item=makeid(10);
            obj.find(".select_company").attr("item",item);
            obj.find(".select_company_user").attr("item",item);
            $("#company_section").append(obj);
            $('.contactingPicker .select_company').on('change' , updateCompanyUser);//廠商的下拉選項事件
            $('.icon-remove_circle').on('click',delCompany);
            */
            let item=makeid(10);
            let html='';
            html+='                    <div class="boxsFull m-td-25 contactingPicker company_section_item">  ';
            html+='                        <div class="boxs30">';
            html+='                            <div class="select-style">';
            html+='                                <select class="form-control select_company" item="'+item+'" name="company[]" required>';
            html+='                                    <option value="null"></option>';
                                               @foreach($companyList as $com)
            html+='                                        <option value="{{ $com -> company_id }}"  >{{ $com -> company_abbreviation_name }}</option>';
                                               @endforeach
            html+='                                </select>';
            html+='                                </div>';
            html+='                        </div>';
            html+='                        <div class="boxs30">';
            html+='                            <div class="box19_l">';
            html+='                            <div class="select-style">';
            html+='                            <select class="form-control select_company_user" item="'+item+'" name="company_user[]" required>';
            html+='                                <option value="null">{{ trans("common.unselected") }} </option>';
            html+='                            </select>';
            html+='                            </div>';
            html+='                            </div>';
            html+='                        </div>';
            html+='                        <div class="boxs30">';
            html+='                            <div class="box19_l">';
            html+='                            <div class="select-style">';
            html+='                                <select class="form-control select_quotation_type" name="quotation_type[]"  required>';
                                                @foreach($quotationTypeList as $ql)
            html+='                                        <option value="{{ $ql -> system_code_key }}"  >{{ $ql -> system_code_value }}</option>';
                                                @endforeach
            html+='                                </select>';
            html+='                            </div>';
            html+='                            </div>';
            html+='                            <div class="box19_r"><button type="button" class="icon-remove_circle"></button></div>';
            html+='                        </div>';
            html+='                    </div>';
            $("#company_section").append(html);
            $('.contactingPicker .select_company').on('change' , updateCompanyUser);//廠商的下拉選項事件
            $('.icon-remove_circle').on('click',delCompany);
            
            $('.contactingPicker .select_company').select2();
            $('.contactingPicker .select_company_user').select2();
            $('.contactingPicker .select_quotation_type').select2();


        }

        function updateCompanyUser(e){
            let item=$(this).attr("item");
            $.ajax({
              url: '/setting/product_setting/ajaxGetCompanyUser',//取得聯絡人清單的API 位置
              method:"GET",
              data: { id: $(this).val() },
              dataType: 'json'
            }).done(function(msg){
                let obj=$('.contactingPicker .select_company_user[item='+item+']');
                obj.empty().append('<option selected="selected" value="">請選擇</option>');
                for(var i = 0;i<msg.length;i++){
                    let def_sel='',showLabel;
                    if(obj.attr("origin")==msg[i].value) //原始選的
                        def_sel='selected';
                    showLabel='['+msg[i].quotation_type_name+']'+msg[i].label;   
                    obj.append($("<option "+def_sel+"></option>").attr("value", msg[i].value).text(showLabel));
                }
            });
        }

        function makeid(length) {
            var result           = '';
            var characters       = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
            for ( var i = 0; i < length; i++ )
              result += characters.charAt(Math.floor(Math.random()*characters.length));

           return result;
        }
    </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'>產品排序</p>
                            <div class="select-style">
                                <select class="form-control" name="product_sort" required>
                                    <option value="9999">{{ 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'>
                        <div class='boxs30'>
                            <p class='t-r-15 text-l p-d-10'>產品狀態</p>
                            <div class="select-style">
                                <select class="form-control" name="product_valid" required>
                                <option value="1">啟用</option>
                                <option value="0">停用</option>
                            </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>
                    <div id="company_section_tile">
                        <div class='boxsFull m-td-25'>
                            <!-- <button class='btn-half-blue order-r' data-action="update">存檔</button> -->
                        </div>
                        <div class="box19_r"><button type="button" class="icon-add_circle"></button></div>
                        <div class='boxsFull m-td-25 contactingPicker'>
                            <div class="boxs30">
                                <p class='t-r-15 text-l p-d-10'>供應商</p>
                            </div>

                            <div class="boxs30">
                                <p class='t-r-15 text-l p-d-10'>聯絡人</p>
                            </div>

                            <div class="boxs30">
                                <p class='t-r-15 text-l p-d-10'>類別</p>
                            </div>
                        </div>                        
                    </div>
                    <div id="company_section">
                    
                    </div>
                    <div class="box19_r"><button type="button" class="icon-add_circle"></button></div>

                </div>

                <div class='boxsFull m-td-25'>
                    <button class='btn-half-blue order-r' data-action="create">建立</button>
                </div>
            </form>
        </div>
    </div>
@endsection