@extends('setting.layouts.layout')
@section('title',trans('product_setting.title'))
@section('script_css')
@endsection
@section('script_buttom')
    <script src="/assets/js/admin/index.js"></script>

    <script language="javascript">
        var searhCondition = "&product_chinese_name={{ $product_chinese_name }}&product_english_name={{ $product_english_name }}&product_type_id={{ $product_type_id }}&product_description={{ $product_description }}&product_keyword={{ $product_keyword }}";
        var baseURL = location.protocol + '//' + location.host + location.pathname;
        var lastPage = '{{ $dataList -> lastPage() }}';

        function doAction(type, button)
        {
            switch(type)
            {
                case "toPage":
                    if(parseInt($("#page").val()) > lastPage)
                        $("#page").val(lastPage);

                    window.location = baseURL + "?page=" + $("#page").val() + searhCondition;
                    return;
                case "firstPage":
                    window.location = baseURL + "?page=1" + searhCondition;
                    return;
                case "prePage":
                    if((parseInt($("#page").val()) - 1) < 1)
                        return;

                    window.location = '{{ $dataList -> previousPageUrl() }}' + searhCondition;
                    return;
                case "nextPage":
                    if((parseInt($("#page").val()) + 1) > lastPage)
                        return;

                    window.location = '{{ $dataList -> nextPageUrl() }}' + searhCondition;
                    return;
                case "lastPage":
                    window.location = '{{ $dataList -> url($dataList -> lastPage()) }}' + searhCondition;
                    return;
                case "search":
                    $("#page").val(1);
                    $("#dataForm").attr("action", baseURL);
                    break;
                case "clearSearchCondition":
                    cleanupForm(button);
                    return;
                case "create":
                    $("#dataForm").attr("action", baseURL + "/create");
                    break;
                case "update":
                    $("#dataForm").attr("action", baseURL + "/update");
                    break;
                case "destroy":
                    $("#dataForm").attr("action", baseURL + "/deleteAction");
                    break;
                default:
                    alert("{{ trans('common.parameter_error') }}");
                    return false;
            }

            $("#dataForm").submit();
        }

        function setKey(key) {
            $("#key").attr("value", key);
        }

        $(document).ready(function() {
            $('div[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('a[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('button[data-action]').on('click', function() {
                doAction($(this).attr('data-action') , this);
            });

            $('input[data-action]').on('keyup', function(e) {
                if(e.keyCode == 13)
                    doAction($(this).attr('data-action'), this);
            });

            $('input[data-action]').on('focus', function(e) {
                $(this).select();
            });

            $('#datatable-buttons_wrapper.dataTables_info').hide();
        });
    </script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function()
        {
            const contactorsInfoUrl = '/setting/product_setting/ajaxGetCompanyList';//取得聯絡人詳細內容的API 位置
            const contactorsInfoMethod = 'GET';//取得聯絡人詳細內容的API 發送方法GET/POST
            let contactorsInfoData = {id:null};//取得聯絡人詳細內容的API 攜帶資料,廠商的選取值會寫入在id 參數內,以外的請自行擴充

            $('.showContactors').on('click' , openContactors);
            function openContactors(e)
            {
                var _t = e.currentTarget;
                contactorsInfoData.id = $(_t).data('id');
                let props = {
                    url:contactorsInfoUrl,
                    type:contactorsInfoMethod,
                    data:contactorsInfoData,
                    dataType:'json',

                    processData: true,
                    complete:function(jqXHR , status){
                        if(status == 'success'){//網路連線成功發送
                            if(jqXHR.status == 200){//回傳狀態正確
                                //if($('#myModel.contactors').hasClass('.showModel') == true)
                                setContactorsInfo(jqXHR.responseJSON);
                            } else {
                                alert('資料回傳異常,http status = ' + jqXHR.status);
                            }
                        } else if(status == 'error'){//網路錯誤
                            alert('網路疑似斷線');
                        }
                    }
                };
                $('#myModel.contactors .scrollableBox .boxsFull').remove();
                $('#myModel.contactors .scrollableBox .loading').show();
                $.ajax(props);
            }
            function setContactorsInfo(dataAry){
                var scode = '';
                var _group_ary , _name_ary , _info_ary;
                var tmpInfo , tmpName;
                var scode = '';
                for(var i = 0;i<dataAry.length;i++){
                    _name_ary = dataAry[i].data;
                    tmpName = '';
                    //console.log('>>' + JSON.stringify(dataAry[i]));
                    for(var j = 0;j<_name_ary.length;j++){
                        _info_ary = _name_ary[j].mail;
                        tmpName += template('name');
                        tmpName = tmpName.split('##name##').join(_name_ary[j].name);
                        tmpInfo = '';
                        //console.log('   >>' + JSON.stringify(_name_ary[j]));
                        for(var k = 0;k<_info_ary.length;k++){
                            //console.log('     >>' + JSON.stringify(_info_ary[k]));
                            tmpInfo += template('info');
                            tmpInfo = tmpInfo.split('##email##').join(_info_ary[k].mail);
                            tmpInfo = tmpInfo.split('##remark##').join((_info_ary[k].mail_remark != null)? _info_ary[k].mail_remark : '未提供');
                        }
                        tmpName += tmpInfo;
                        //console.log(tmpName);
                    }
                    scode += template('group');
                    scode = scode.split('##groupName##').join(dataAry[i].groupName);
                    scode = scode.split('##info##').join(tmpName);
                }
                //console.log(scode);
                $('#myModel.contactors .scrollableBox .loading').hide();
                $('#myModel.contactors .scrollableBox').append(scode);
                $('#myModel.contactors .scrollableBox .boxsFull').last().removeClass('m-d-25');

            }
            function template(_parts){
                if(_parts == 'group'){
                    return '<div class="boxsFull m-d-25">' +
                        '	<p class="t-r-15 text-l p-d-10">##groupName##：</p>' +
                        '	##info##' +
                        '</div>';
                } else if(_parts == 'name'){
                    return '<p class="t-grey-15 text-l">##name##；</p>';
                } else if(_parts == 'info'){
                    return '<p class="t-grey-15 text-l p-d-10" style="padding-left:0.75rem;">email ： ##email## <br> 備註 : ##remark##</p>';
                }
            }
        });
    </script>
@endsection
@section('buttons')
@endsection
@section('content')
    @inject('CommonPresenter','App\Presenter\CommonPresenter')
    <form name="dataForm" id="dataForm" method="post" enctype="multipart/form-data">
        @include('components.validationErrorMessage')
        {!! csrf_field() !!}
        <input type="hidden" name="key" id="key">
        <div class='block-r'>
            <div class='centBoxs'>
                <div class='boxsFull'>
                    <p class="t-blue-20 p-d-30">{{ trans('product_setting.title') }}</p>
                    <a class='btn-outline-blue icon-add order-r' data-action="create">&nbsp;{{ trans('product_setting.create_product') }}</a>
                </div>

                <div class='boxsFull'>
                    <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', $product_chinese_name) }}" placeholder="{{ trans('common.search_key') }}">
                        </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', $product_english_name) }}" placeholder="{{ trans('common.search_key') }}">
                        </label>
                    </div>
                    <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($product_type_id == $list -> product_type_id) selected @endif>{{ $list -> product_type_name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>
                <br>
                <br>
                <div class='boxsFull'>
                    <div class='boxs30'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_description') }}</p>
                        <label>
                            <input class='input-f' type="text" name="product_description" value="{{ old('product_description', $product_description) }}" placeholder="{{ trans('common.search_key') }}">
                        </label>
                    </div>
                    <div class='boxs30'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('product_setting.product_keyword') }}</p>
                        <label>
                            <input class='input-f' type="text" name="product_keyword" value="{{ old('product_keyword', $product_keyword) }}" placeholder="{{ trans('common.search_key') }}">
                        </label>
                    </div>
                    <div class='boxsFull m-td-25'>
                        <a class='btn-half-blue icon-search order-r' data-action="search">{{ trans('common.search') }}</a>
                    </div>
                </div>

                <!-- 按下搜尋後會出現的元件。開始 -->
                <i class='splitLine_bl'></i>
                <div class='boxsFull'>
                    <p class="t-black-20 p-d-30">{{ trans('common.search_result') }}</p>
                </div>
                <!-- 按下搜尋後會出現的元件。結束 -->

                <div class='boxsFull'>
                    <div class='table-header'>
                        <p class='table-box10'>{{ trans('product_setting.product_image') }}</p>
                        <p class='table-box20'>{{ trans('product_setting.product_chinese_name') }}</p>
                        <p class='table-box20'>{{ trans('product_setting.product_english_name') }}</p>
                        <p class='table-box20'>{{ trans('product_setting.product_type_id') }}</p>
                        <p class='table-box10'>{{ trans('product_setting.product_sort') }}</p>
                        <p class='table-box10'>{{ trans('product_setting.company_data') }}</p>
                        <p class='table-box10'>{{ trans('common.action') }}</p>
                    </div>
                    @foreach($dataList as $list)
                        <div class='table-body'>
                            <p class='table-box10'>{!! $CommonPresenter -> getImage($READ_IMAGE_PATH, $list -> product_image) !!}</p>
                            <p class='table-box20 text'>{!! $CommonPresenter -> getShortenText($list -> product_chinese_name) !!}</p>
                            <p class='table-box20 text'>{!! $CommonPresenter -> getShortenText($list -> product_english_name) !!}</p>
                            <p class='table-box20 text'>
                                @foreach($productTypeList as $aList)
                                    @if($list -> product_type_id == $aList -> product_type_id) {{  $aList -> product_type_name }} @endif
                                @endforeach
                            </p>
                            <p class='table-box10 text'>{!! $CommonPresenter -> getProductSort($list -> product_sort) !!}</p>
                            <div class='table-box10'>
                                <div class="boxsFull noneFloat">
                                    <button class="btn-half-blueG icon-eye showContactors" type="button" data-id="{{  $list -> product_id }}">{{ trans('product_setting.company_user') }}</button>
                                </div>
                            </div>
                            <p class='table-box10'>
                                @if( session('ACTION_UPDATE') == 'ENABLED')
                                    <i class="iconLink linkGrey icon-create" onclick="setKey('{{ $list -> product_id }}');doAction('update');"></i>
                                @endif
                                @if( session('ACTION_DELETE') == 'ENABLED')
                                        <button type="button" class='iconLink linkGrey icon-trash-2 m-l-10 showModel' onclick="setKey('{{ $list -> product_id }}')"; data-id='{{  $list -> product_id }}' data-remover="{{ $list -> product_chinese_name }}"></button>
                                @endif
                            </p>
                        </div>
                    @endforeach
                    <div class='boxsFull m-td-25'>
                        <div class='numBox'>
                            <p class='t-page'>Page</p>
                            <label>
                                <input class='input-f in-w-10' type="" id="page" data-action="toPage" value="{{ $dataList -> currentPage() }}">
                            </label>
                            <p class='t-page'>of {{ $dataList -> lastPage() }}</p>
                            <div class="numL icon-chevron-down" data-action="prePage"></div>
                            <div class="numR icon-chevron-down" data-action="nextPage"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
@endsection