@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 "update":
                    $("#dataForm").attr("action", url + "/updateAction");
                    $("#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

            $('.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();
            
            $('select[name=product_type_id]').select2();
            $('select[name=product_sort]').select2();
            $('select[name=product_valid]').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(),withValid:true},
              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='';
                    if(obj.attr("origin")==msg[i].value){ //原始選的
                        def_sel='selected';
                        if(msg[i].valid==0) //show停用
                            $('.select_company_user_valid[item='+item+']').show();
                    }
                    showLabel='['+msg[i].quotation_type_name+']'+msg[i].label;
                    if(msg[i].valid==0){
                       showLabel+="(!!!停用!!!)"; 
                    }                       
                    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')
    @inject('CommonPresenter','App\Presenter\CommonPresenter')
    <div class='block-r'>
        <div class='centBoxs'>
            <div class='boxsFull'>
                <p class="t-blue-20 p-d-30">{{ trans('product_setting.update_product') }}</p>
            </div>

            <form name="dataForm" id="dataForm" method="post" enctype="multipart/form-data">
                @include('components.validationErrorMessage')
                {!! csrf_field() !!}
                <input type="hidden" name="key" id="key" value="{{ $data -> product_id }}">
                <div class='boxsFull m-td-25'>
                    <button class='btn-half-blue order-r' data-action="update">存檔</button>
                </div>
                <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', $data -> 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', $data -> 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 }}" @if($data -> product_type_id == $list -> product_type_id) selected @endif>{{ $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 }}" @if($data -> product_sort == $i) selected @endif>{{ $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" @if($data->product_valid == "1") selected @endif>啟用</option>
                                <option value="0" @if($data->product_valid == "0") selected @endif>停用</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>
                                        {!! $CommonPresenter -> getImage($READ_IMAGE_PATH, $data -> product_image) !!}
                                    </div>
                                    <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', $data -> 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', $data -> 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', $data -> 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">
                    @foreach($productCompanyList as $prodCom)
                                        <div class='boxsFull m-td-25 contactingPicker company_section_item'>
                        <div class="boxs30">
                            <div class="select-style style_gg">
                                                                <select class="form-control select_company" item="{{ $item_id }}" name="company[]" required>
                                    <option value="null"></option>
                                    @foreach($companyList as $com)
                                        <option value="{{ $com -> company_id }}"  selected >{{ $com -> company_abbreviation_name }}(!!!停用!!!) </option>
                                    @endforeach
                                </select>
                                @if($nonValid)  <div style="color:red">所選廠商已停用</div> @endif
                            </div>
                        </div>

                        <div class="boxs30">

                            <div class="select-style style_gg">
                            <select class="form-control select_company_user" item="{{ $item_id }}" origin="{{ $prodCom->company_user_id }}" name="company_user[]" required>
                                <option value="null">{{ trans('common.unselected') }} </option>
                            </select>
                            <div class="select_company_user_valid" item="{{ $item_id }}" style="color:red;display:none">所選廠商聯絡人已停用</div>
                            </div>


                        </div>

                        <div class="boxs30">
                            <div class="box19_l">
                            <div class="select-style style_gg">
                                <select class="form-control select_quotation_type" name="quotation_type[]"  required>
                                    @foreach($quotationTypeList as $ql)
                                        <option value="{{ $ql -> system_code_key }}" selected >{{ $ql -> system_code_value }}</option>
                                    @endforeach
                                </select>
                            </div>
                            </div>
                            <div class="box19_r"><button type="button" class="icon-remove_circle"></button></div>
                        </div>
                    </div>
                    @endforeach
                    </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="update">存檔</button>
                </div>
            </form>
        </div>
    </div>
@endsection