@extends('setting.layouts.layout')
@section('title',trans('quotation_pickup.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>
    <script type="text/javascript" src="/ckeditor/ckeditor.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;
                case "kill":
                    var fileID = arguments[1];
                    setTimeout(function()
                    {
                        $.ajax({
                            url:'/setting/quotation_pickup/ajaxRemoveFile',
                            data:{
                                quotation_file_id:fileID,
                                license_id: $('#license_id').val(),
                                quotation_serial_number: $('#quotation_serial_number').val(),
                                quotation_serial_id: $('#quotation_serial_id').val(),
                                quotation_pickup_serial_id: $('#quotation_pickup_serial_id').val(),
                                used_quotation_type: $('#used_quotation_type').val()
                            },
                            dataType: "html",
                            method:'GET',
                            complete:function(result)
                            {
                                if(result.status == 200)
                                {
                                    var data = JSON.parse(result.responseText);
                                    alert(data.message);

                                    if(data.message == "已寄送的詢價單無法刪除檔案！")
                                        location.reload();
                                    if(data.message == "已完成的詢價單無法刪除檔案！")
                                        location.reload();
                                }
                                else
                                    alert("刪除失敗");
                            }
                        });
                    }, 300);
                    return;
                case "queryVendorGroup"://查詢媒合廠商
                    var _serializeCheckboxAry = arguments[1];//查詢條件[{name , value}]
                    var _callbackFunc = arguments[2];//取得內容後的呼叫函數
                    var product_id = "";
                    for(var i = 0; i < _serializeCheckboxAry.length; i++)
                    {
                        product_id = product_id + _serializeCheckboxAry[i].value;

                        if(i < (_serializeCheckboxAry.length - 1))
                            product_id = product_id + ",";
                    }

                    $.ajax({
                        url: '/setting/product_setting/ajaxGetCompanyUserJSON'/*查詢媒合廠商URL*/,
                        data : {
                            product_id : product_id,
                            license_id : $('#license_id').val(),
                            account : $('#login_account').val(),
                            quotation_serial_number : $('#quotation_serial_number').val(),
                            quotation_serial_id : $('#quotation_serial_id').val(),
                            quotation_pickup_serial_id : $('#quotation_pickup_serial_id').val()
                        },
                        method : 'GET',
                        dataType : 'json',
                        complete : function(jqXhr , textStatus){
                            if(jqXhr.status == 200 && textStatus == 'success'){//沒有發生任何傳輸錯誤(net connection broken)
                                _callbackFunc(jqXhr.responseJSON);
                            } else {
                                alert("取得產品聯絡人時發生錯誤");
                            }
                        }
                    });
                    return;
                case "downloadHistoryNote"://下載筆記內容
                    var _sel = arguments[1];//採購類別的<select>
                    var _textarea = arguments[2];//筆記內容<textarea>
                    var _clientCode = arguments[3];//客戶簡碼字串
                    var _value = $(_sel).val();//採購類別<select> 的值
                    /*
                    if($(_sel).prop('selectedIndex') == 0) {//選擇為採購類別<select> 的第一個項目,視為無意義,跳出
                        $(_textarea).val('');
                        return;
                    }*/
                    $(_sel).prop('disabled' , true);//關閉採購類別<select> 的操作
                    $.ajax({
                        url: '/setting/quotation_pickup_note/ajaxGetQuotationPickupNote'/*取得分類筆記的URL*/,
                        data : {
                            license_id: $('#license_id').val(),
                            customer_code : _clientCode,
                            quotation_type : _value
                        },
                        method : 'GET'/*或'GET'*/,
                        dataType : 'json',
                        complete : function(jqXhr , textStatus){
                            //if(jqXhr.status == 200 && textStatus == 'success'){//沒有發生任何傳輸錯誤(net connection broken)
                            if(jqXhr.status == 200)
                            {
                                $(_textarea).val('');//清空！
                                setTimeout(function(){
                                    $(_textarea).val(jqXhr.responseJSON.content.replaceAll("<br>", "\n"))
                                } , 300);//延遲寫入,作一點有更新內容的效果
                            }
                            else
                            {
                                alert("讀取採購筆記時發生錯誤")
                            }
                            $(_sel).prop('disabled' , false);//開啟採購類別<select> 的操作
                        }
                    });
                    return;
                case "uploadHistoryNote"://上傳筆記內容
                    //_noteTextarea , _select , _textarea , _code
                    var _noteTextarea = arguments[1];//新增的筆記內容<textarea>
                    var _sel = arguments[2];//採購類別的<select>
                    var _textarea = arguments[3];//筆記內容<textarea>
                    var _clientCode = arguments[4];//客戶簡碼字串
                    var _value = $(_sel).val();//採購類別<select> 的值
                    /*
                    if($(_sel).prop('selectedIndex') == 0 || $(_noteTextarea).val() == '') {//選擇為採購類別<select> 的第一個項目或新的筆記內容為空字串,視為無意義,跳出
                        alert("尚未選擇詢價類別");
                        return;
                    }*/
                    $(_sel).prop('disabled' , true);//關閉採購類別<select> 的操作
                    $(_noteTextarea).prop('disabled' , true);//關閉新增的筆記內容<textarea> 的操作
                    $.ajax({
                        url: '/setting/quotation_pickup_note/ajaxAddQuotationPickupNote',
                        data : {
                            license_id: $('#license_id').val(),
                            customer_code : _clientCode,
                            quotation_type : _value,
                            content : $(_noteTextarea).val(),
                            login_account : $('#login_account').val()
                        },
                        method : 'GET'/*或'GET'*/,
                        dataType : 'json',
                        complete : function(jqXhr , textStatus){
                            //if(jqXhr.status == 200 && textStatus == 'success'){//沒有發生任何傳輸錯誤(net connection broken)
                            if(jqXhr.status == 200)
                            {
                                $(_textarea).val('');//清空

                                setTimeout(function(){
                                    $(_noteTextarea).val('');//清空
                                    $(_textarea).val(jqXhr.responseJSON.content.replaceAll("<br>", "\n"));
                                } , 300);//延遲寫入,作一點有更新內容的效果
                            }
                            else
                            {
                                alert("上傳採購筆記時發生錯誤")
                            }
                            $(_sel).prop('disabled' , false);//開啟採購類別<select> 的操作
                            $(_noteTextarea).prop('disabled' , false);//開啟新增的筆記內容<textarea> 的操作
                        }
                    });
                    return;
                case "saveAndCloseQuotationReply"://上傳報價並關閉光箱
                    var _btn = arguments[1];//存檔按鈕
                    var _ck = arguments[2];//CKEditor 的實體(CKEDITOR.instances['quotation_reply'])

                    $(_btn).closest('.showModel').removeClass('showModel');//關閉光箱
                    setTimeout(function()
                    {
                        $.ajax({
                            url:'/setting/quotation_pickup/ajaxReplySalesQuotation',
                            data:{
                                license_id: $('#license_id').val(),
                                quotation_mail_title: $('#reply_sales_quotation_mail_title').val(),
                                quotation_serial_number: $('#quotation_serial_number').val(),
                                quotation_serial_id: $('#quotation_serial_id').val(),
                                quotation_pickup_serial_id: $('#quotation_pickup_serial_id').val(),
                                login_account : $('#login_account').val(),
                                content: _ck.getData()
                            },
                            dataType: "html",
                            method:'GET',
                            complete:function(result)
                            {
                                if(result.status == 200)
                                {
                                    var data = JSON.parse(result.responseText);
                                    alert(data.message);
                                }
                                else
                                    alert("回覆業務報價失敗");
                            }
                        });
                    }, 300);
                    return;
                case "closeQuotationReply":
                    var _btn = arguments[1];//存檔按鈕
                    $(_btn).closest('.showModel').removeClass('showModel');
                    return;
                default:
                    alert("{{ trans('common.parameter_error') }}");
                    return;
            }

            return;
        }

        function setAction(action) {
            $("#action_type").attr("value", action);
        }

        $(document).ready(function() {
            $('button[data-action]').on('click', function() {
                doAction($(this).attr('data-action'));
            });
        })
    </script>
    <style type="text/css">
        .d-none{
            display:none;
        }
        .price_boxsC,
        .chooseBoxsC,
        .model_boxs.box_1,
        .model_boxs.box_2{
            position:relative;
        }
        .boxsFull.scaned .t-b-13{
            color:#E06363;
        }
        .mu-file{
            display:none;
        }
        .mu-file.show{
            display:inline-block;
        }
        .mu-file.show input{

        }
        .t-b-13-nw{
            max-width:calc(100% - 3rem);
        }
    </style>
@endsection
@section('buttons')
@endsection
@section('content')
    @inject('CommonPresenter','App\Presenter\CommonPresenter')
    <form name="dataForm" id="dataForm" method="post" enctype="multipart/form-data">
        <div class='block-r'>
            <div class='centBoxs centNoW'>
                <div class="centBoxRL">
                    <div class="boxsWhite m-d-25">
                        <div class='boxsFull m-d-25'>
                            @include('components.validationErrorMessage')
                            {!! csrf_field() !!}
                            <input type="hidden" name="action_type" id="action_type">
                            <input type="hidden" name="key" id="key" value="{{ $data -> quotation_serial_number.'##'.$quotationContent -> quotation_serial_id.'##'.$quotationContent -> quotation_pickup_serial_id }}">
                            <input type="hidden" name="license_id" id="license_id" value="{{ $data -> license_id }}">
                            <input type="hidden" name="quotation_serial_number" id="quotation_serial_number" value="{{ $data -> quotation_serial_number }}">
                            <input type="hidden" name="quotation_serial_id" id="quotation_serial_id" value="{{ $quotationContent -> quotation_serial_id }}">
                            <input type="hidden" name="quotation_pickup_serial_id" id="quotation_pickup_serial_id" value="{{ $quotationContent -> quotation_pickup_serial_id }}">
                            <input type="hidden" name="used_quotation_type" id="used_quotation_type" value="{{ $usedQuotationType }}">
                            <input type="hidden" name="customer_code" id="customer_code" value="{{ $data -> customer_code }}">
                            <input type="hidden" name="customer_country" id="customer_country" value="{{ $data -> customer_country }}">
                            <input type="hidden" name="login_account" id="login_account" value="{{ $account -> login_account }}">
                            {!! $CommonPresenter -> getQuotationHiddenTitle($quotationContent, $quotationRecord) !!}
                            <div class='box37_r re37_r'>
                                <p class="t-blue-20 p-d-30">{{ trans('quotation_pickup.update_quotation').'：'.$data -> quotation_serial_number.'-'.$quotationContent -> quotation_serial_id.'-'.$quotationContent -> quotation_pickup_serial_id }}</p>
                                <label class='order-r'>
                                    <input type="checkbox" name="quotation_finish_order" id="quotation_finish_order" class="checkbox" {!!  $CommonPresenter -> getQuotationFinishCheckedHTML($quotationContent) !!}>
                                    <span class="btn-box">
                                        <span class="btn">
                                        </span>
                                        </span>
                                    <span class="t-b-13-nw m-l-10">{{ trans('quotation_pickup.quotation_finish_order') }}</span>
                                </label>
                            </div>
                            <div class='box37_l'>
                                <div class='boxsFull'>
                                    <!--<span class='t-info icon-info order-r' title='大單說明'></span>-->
                                    <label class='order-r'>
                                        <input type="checkbox" name="quotation_big_order" id="quotation_big_order" class="checkbox" {!!  $CommonPresenter -> getQuotationLevelCheckedHTML($data, 'BIG_ORDER') !!}>
                                        <span class="btn-box">
                                    <span class="btn">
                                    </span>
                                    </span>
                                        <span class="t-b-13-nw m-l-10">{{ trans('quotation_pickup.quotation_big_order') }}</span>
                                    </label>

                                    <label class='order-r'>
                                        <input type="checkbox" name="quotation_repeat_order" id="quotation_repeat_order" class="checkbox" {!! $CommonPresenter -> getQuotationLevelCheckedHTML($data, 'REPEAT_ORDER') !!}>
                                        <span class="btn-box">
                                    <span class="btn">
                                    </span>
                                    </span>
                                        <span class="t-b-13-nw m-l-10">{{ trans('quotation_pickup.quotation_repeat_order') }}</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.customer_code') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="customer_code" value="{{ old('customer_code', $data -> customer_code) }}" placeholder="{{ trans('quotation_pickup.no_chinese') }}" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.customer_country') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="customer_country" value="{!! $CommonPresenter -> getCustomerCountry($data -> customer_country, $countryList) !!}" placeholder="{{ trans('quotation_pickup.customer_country') }}" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_ad') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="quotation_ad" value="{!! $CommonPresenter -> getQuotationADType($data -> quotation_ad, $adTypeList) !!}" placeholder="{{ trans('quotation_pickup.quotation_ad') }}" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                        </div>

                        <div class='boxsFull'>
                            <div class='boxs40'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_title') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="quotation_title" value="{{ old('quotation_title', $quotationContent -> quotation_title) }}" placeholder="{{ trans('quotation_pickup.quotation_title') }}" maxlength="300" {!! $CommonPresenter -> getQuotationPickupTitleDisabledHTML($quotationContent, $quotationRecord) !!} required>
                                </label>
                            </div>
                            <br>
                            <div class='boxs40'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_mail_title') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="quotation_mail_title" value="{{ old('quotation_mail_title', $quotationContent -> quotation_mail_title) }}" placeholder="{{ trans('quotation_pickup.quotation_mail_title') }}" maxlength="300" required>
                                </label>
                            </div>
                        </div>

                        <!-- 虛線 -->
                        <i class="splitLine_bl"></i>

                        <div class='boxsFull m-d-25'>
                            <div class='boxsFull m-d-25'>
                                <button type="button" class='btn-half-blue icon-comments order-r m-l-15 showTemplates' data-id='1'>{{ trans('quotation.select_phrase') }}</button>
                                <button type="button" class='btn-half-blue icon-icon_mail order-r showTemplates' data-id='2'>&nbsp;{{ trans('quotation.select_sample') }}</button>
                            </div>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15'><textarea name="quotation_content" id="quotation_content" rows="10" cols="60" tabindex="8" class="ckeditor">{{ old('quotation_content', $quotationContent -> quotation_content) }}</textarea></p>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 boxsInline order-l p-d-10'>{{ trans('quotation.upload_file') }}</p>
                            <p class='t-file-g boxsInline order-r p-d-10'>{{ trans('quotation.file_remark') }}</p>
                            <div class='updateBox'>
                                <div class="box82_l">
                                    @foreach($quotationFile as $list)
                                        <div class="boxsFull mu-file show">
                                            <input type="file" class="hiddenFileInput" name="attatchs[]" value="{{ $list -> quotation_file_id }}">
                                            <p class="t-file">{{ $list -> quotation_file_name }}</p>
                                            <button class="icon-cancel del" type="button"></button>
                                        </div>
                                @endforeach
                                <!-- 新的空欄位,只需要一組 begin -->
                                    <div class="boxsFull mu-file">
                                        <input type="file" class="hiddenFileInput" name="attatchs[]" id="bindAttatch_0">
                                        <!-- <img src="img/file_icon.svg"> -->
                                        <p class="t-file">&nbsp;</p>
                                        <button class="icon-cancel del" type="button"></button>
                                    </div>
                                    <!-- 新的空欄位,只需要一組 end -->
                                </div>
                                <div class="box82_r">
                                    <label class='btn-outline-blue outlineNobg icon-add order-r createFile' for="">{{ trans('common.add_file') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                    <script language="javascript" type="text/javascript">
                        (function(){
                            var triggerLabel = $('label.createFile');
                            var whileNewFileTouch = function(e){
                                var _t = e.currentTarget;
                                var fileBitsTotal = 0;
                                var fileBitsMax = 2097152;//2MB 的總檔案選取位元率上限
                                var fileCountMax = 5;//總檔案選取數量上限
                                var chk = true;
                                var code;
                                $('input.hiddenFileInput').each(function(){
                                    if(this.files.length == 1) fileBitsTotal += this.files[0].size;
                                });
                                if($('input.hiddenFileInput').length > fileCountMax){
                                    code = '最多只能選取' + fileCountMax + ' 個檔案上傳,請先刪除檔案.';
                                    chk = false;
                                } else if(fileBitsTotal > fileBitsMax){
                                    code = '選取檔案總位元數超過' + (2097152 / 1024 / 1024) + ' Mb,請先刪除檔案.';
                                    chk = false;
                                }
                                if(chk == false){
                                    alert(code);
                                    e.preventDefault();
                                    $(_t).prop('disabled' , true);
                                    setTimeout(function(){$(_t).prop('disabled' , false);} , 10);
                                    return;
                                }
                            };
                            var whileNewFileTrigger = function(e){
                                var _t = e.currentTarget;
                                if(_t.files.length == 1){
                                    $(_t.parentElement).find('p').html(_t.files[0].name);
                                    $(triggerLabel).attr('for' , insertNewFileTrigger({
                                        wrapper : _t.parentElement,
                                        sInput : $(_t.parentElement).find('input'),
                                        //sImg : $(_t.parentElement).find('img'),
                                        sP : $(_t.parentElement).find('p'),
                                        sButton : $(_t.parentElement).find('button')
                                    }));
                                    $(_t.parentElement).find('input.hiddenFileInput')[0].removeEventListener('change' , whileNewFileTrigger , false);//移除不需要使用的input 的change 事件
                                    $(_t.parentElement).addClass('show');
                                }
                            };
                            var whileRemoveFileTrigger = function(e){
                                var _t = e.currentTarget;
                                var cc = window.confirm('確定要刪除這筆資料?');
                                if(cc == true){

                                    if($('input.hiddenFileInput').not('[value]').length == 1) $(triggerLabel).attr('for' , insertNewFileTrigger({
                                        wrapper : _t.parentElement,
                                        sInput : $(_t.parentElement).find('input'),
                                        //sImg : $(_t.parentElement).find('img'),
                                        sP : $(_t.parentElement).find('p'),
                                        sButton : $(_t.parentElement).find('button')
                                    }));/*若移除後沒有任何檔案上傳欄位*/
                                    $(_t.parentElement).remove();//移除
                                    $('input.hiddenFileInput').not('[value]').each(reSerialInput);
                                    $(triggerLabel).attr('for' , $('input.hiddenFileInput').last().attr('id'));//更新觸發按鈕的綁定對象
                                }
                            };
                            var whileRemoveRemoteFileTrigger = function(e){
                                var _t = e.currentTarget;
                                var cc = window.confirm('確定要刪除這筆資料?');
                                if(cc == true) {
                                    doAction('kill' , $(_t).attr('data-remote-del'));
                                    $(_t.parentElement).remove();//移除
                                    $('input.hiddenFileInput').not('[value]').each(reSerialInput);
                                    $(triggerLabel).attr('for' , $('input.hiddenFileInput').last().attr('id'));//更新觸發按鈕的綁定對象
                                }
                            };
                            var reSerialInput = function(_index , _ele){/*沒有php 的陣列化標記,追加編號化標記*/
                                $(_ele).attr('id' , $(_ele).attr('id').split('_')[0] + '_' + _index);
                                if($(_ele).attr('name').indexOf('[]') == -1) {
                                    $(_ele).attr('name' , $(_ele).attr('name').split('_')[0] + '_' + _index);/*沒有php 的陣列化標記,追加編號化標記*/
                                }
                            };
                            var insertNewFileTrigger = function(props){
                                var _div = document.createElement('DIV');
                                var _input = document.createElement('INPUT');
                                //var _img = document.createElement('IMG');
                                var _p = document.createElement('P');
                                var _button = document.createElement('BUTTON');
                                var serial = Number(props.sInput.attr('id').split('_')[1]) + 1;//id 屬性的序號遞增
                                var _id = props.sInput.attr('id').split('_')[0] + '_' + serial;
                                _input.addEventListener('click' , whileNewFileTouch , false);//<input type="file"> 檔案點擊事件
                                _input.addEventListener('change' , whileNewFileTrigger , false);//<input type="file"> 檔案選取事件
                                _button.addEventListener('click' , whileRemoveFileTrigger , false);//<button class="icon-cancel del"> 移除事件

                                if(props.sInput.attr('name').indexOf('[]') == -1){/*沒有php 的陣列化標記,追加編號化標記*/
                                    $(_input).attr('name' , props.sInput.attr('name').split('_')[0] + '_' + serial);
                                } else {
                                    $(_input).attr('name' , props.sInput.attr('name'));
                                }
                                $($(_div).attr('class' , $(props.wrapper).attr('class')).append([
                                    $(_input).attr('type' , props.sInput.attr('type')).attr('class' , props.sInput.attr('class')).attr('id' , _id) ,
                                    /*$(_img).attr('src' , props.sImg.attr('src')) , */
                                    $(_p).attr('class' , props.sP.attr('class')) ,
                                    $(_button).attr('type' , props.sButton.attr('type')).attr('class' , props.sButton.attr('class'))
                                ])).insertAfter(props.wrapper);
                                return _id;
                            };

                            //$('input.hiddenFileInput')[0].addEventListener('change' , whileNewFileTrigger , false);//<input type="file"> 檔案選取事件
                            //$('button.del')[0].addEventListener('click' , whileRemoveFileTrigger , false);//<button class="icon-cancel del"> 移除事件
                            $('.boxsFull.mu-file').each(function(_index , _ele){
                                var _input = $(_ele).find('input.hiddenFileInput');
                                var _button = $(_ele).find('button.del');
                                if(_input.attr('value') == undefined) {
                                    _input[0].addEventListener('click' , whileNewFileTouch , false);//<input type="file"> 檔案點擊事件
                                    _input[0].addEventListener('change' , whileNewFileTrigger , false);//<input type="file"> 檔案選取事件
                                    $(_ele).find('button.del')[0].addEventListener('click' , whileRemoveFileTrigger , false);//<button class="icon-cancel del"> 移除事件
                                } else {
                                    _input.prop('disabled' , true);
                                    _button.attr('data-remote-del' , _input.attr('value'));
                                    _button[0].addEventListener('click' , whileRemoveRemoteFileTrigger , false);//<button class="icon-cancel del"> 遠端移除事件
                                }
                            });
                            $('input.hiddenFileInput').not('[value]').each(reSerialInput);
                            $(triggerLabel).attr('for' , $('input.hiddenFileInput').not('[value]').last().attr('id'));//更新觸發按鈕的綁定對象
                        })();
                    </script>

                    <div class="boxsWhite">
                        <p class="t-blue-15 m-d-10">{{ trans('quotation_pickup.quotation_remark') }}</p>
                        <textarea class='input-f' name="quotation_remark" rows="6" cols="40" placeholder="{{ trans('quotation_pickup.quotation_remark') }}" maxlength="10000">{{ old('quotation_remark', $data -> quotation_remark) }}</textarea>
                    </div>
                </div>

                <div class="centBoxRR">
                    <div class="boxsFull m-d-10">
                        <button type="button" class='btn-half-blueG2 wF showTemplates' data-id='4' onclick="setTimeout(function(){CKEDITOR.instances.quotation_reply.setData(CKEDITOR.instances.quotation_content.getData());$('input[name=&quot;reply_sales_quotation_mail_title&quot;]').val($('input[name=&quot;quotation_mail_title&quot;]').val());},100);">{{ trans('quotation_pickup.reply_sales_quotation') }}</button>
                    </div>

                    <div class="boxsFull m-d-10">
                    <div class="boxsFull saleok btn-half-blueG2">{{ trans('quotation_pickup.quotation_pickup_note') }}</div>
                    <div class='boxok'>
                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.customer_code') }}</p>
                            <label>
                                <input class='input-f clientCode' type="" name="" value="">
                            </label>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_type') }}</p>
                            <div class="select-style">
                                <select class="clientGroupCode" onchange="(function(_select , _textarea , _code){doAction('downloadHistoryNote' , _select , _textarea[0] , _code);})(this , $('.historyNote') , $('.clientCode').val());">
                                    <option value="null">{{ trans('common.unselected') }}</option>
                                    {!! $CommonPresenter -> getUsedQuotationTypeSelectHTML($accountQuotation, $quotationTypeList) !!}
                                </select>
                            </div>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_pickup_note_content') }}</p>
                            <textarea class='input-f historyNote' name="mytext" rows="6" cols="40" disabled></textarea>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.add_quotation_pickup_note_content') }}</p>
                            <textarea class='input-f noteContent' name="mytext" rows="6" cols="40" placeholder="{{ trans('quotation_pickup.add_quotation_pickup_note_content') }}"></textarea>
                        </div>

                        <div class="boxsFull">
                            <button class='btn-half-blue wF' type="button" onclick="(function(_noteTextarea , _select , _textarea , _code){doAction('uploadHistoryNote' , _noteTextarea[0] , _select[0] , _textarea[0] , _code);})($('.noteContent') , $('.clientGroupCode') , $('.historyNote') , $('.clientCode').val());">&nbsp;確定</button>
                        </div>
                    </div>
                        <script language="javascript" type="text/javascript">
                            (function(){
                                var _codeInputSource = $('.clientCode');
                                var _codeSelectSource = $('.clientGroupCode');
                                var _codeTextAreaSource = $('.historyNote');
                                var _codeInput = $('.clientCode')[0];
                                //var _codeInput = $('input[name="customer_code"]')[0];//客戶簡碼輸入欄位
                                var whileQuery = false;//是否查詢中
                                var waitToQuery = 500;//ms 等待鍵盤閒置的秒數
                                //var confirmedByQuery = false;//是否曾透過查詢取得回傳值
                                var readyToQueryCountry = function(e){
                                    doAction('downloadHistoryNote' , _codeSelectSource , _codeTextAreaSource[0] , _codeInputSource.val());
                                };
                                var resetDenied = function(e){
                                    confirmedByQuery = false;//重設
                                    //if(e.currentTarget.selectedIndex == 0) confirmedByQuery = false;//重設
                                };
                                var run_keyWait = null;
                                var keyWait = function(e){
                                    if(run_keyWait != null) clearInterval(run_keyWait);
                                    run_keyWait = setInterval(
                                        function(){
                                            clearInterval(run_keyWait);
                                            readyToQueryCountry({currentTarget:_codeInput})
                                        } ,
                                        waitToQuery//等待鍵盤閒置的秒數
                                    );
                                };
                                _codeInput.addEventListener('change' , keyWait , false);
                                //_codeInput.addEventListener('blur' , readyToQueryCountry , false);
                                _codeInput.addEventListener('keyup' , keyWait , false);
                                //_codeSelectSource.addEventListener('change' , resetDenied , false);
                            })();
                        </script>
                    </div>

                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">{{ trans('quotation.quotation_serial_list') }}</div>
                        <div class="price_boxsC price_boxsC_show">
                            @for($i = 0; $i < count($tempQuotationContentList) - 1; $i++)
                                <div class='boxsYellow by2 m-d-10'>
                                    <div class='t-b-13-nw b8'>
                                        <a href="/setting/quotation_pickup/quotation_list?id={{ $tempQuotationContentList[$i] -> quotation_serial_number.'-'.$tempQuotationContentList[$i] -> quotation_serial_id.'-'.$tempQuotationContentList[$i] -> quotation_pickup_serial_id }}" target="_blank">{{ $tempQuotationContentList[$i] -> quotation_serial_number.'-'.$tempQuotationContentList[$i] -> quotation_serial_id.'-'.$tempQuotationContentList[$i] -> quotation_pickup_serial_id }}</a>
                                    </div>
                                </div>
                            @endfor
                        </div>
                    </div>

                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">{{ trans('quotation_pickup.select_product') }}</div>
                        <div class="price_boxsC price_boxsC_show">
                            {!! $CommonPresenter -> getPickupProductHTML($productList, $quotationRecord) !!}
                        </div>
                    </div>
                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">{{ trans('quotation_pickup.select_company') }}</div>
                        <div class="price_boxsC price_boxsC_show">
                            {!! $CommonPresenter -> getPickupCompanyHTML($companyUserList, $quotationRecord) !!}
                        </div>
                    </div>

                    <!-- 媒合廠商 -->
                    {!! $CommonPresenter -> getQuotationCompanySelectHTML($account, $accountQuotation, $quotationTypeList) !!}
                    <script language="javascript" type="text/template" id="groupProduct">
                    {!! $CommonPresenter -> getQuotationCompanyJSON($account, $accountQuotation, $quotationTypeList, $companyUserList, $quotationContentList, $productCompanyUserIDArray) !!}
                    </script>
                    <script language="javascript" type="text/javascript">
                        var _ary = JSON.parse(document.getElementById('groupProduct').innerHTML);
                        var _index = 0;
                        var _input = $('.price_search.group_product_search')[0];//關鍵字查詢欄位
                        var _maxDataLength = 0;
                        var _pool;//所有的產品
                        var run_generateItem;
                        var timeout_look;

                        function init()
                        {
                            var _selectPath = [];
                            for(var i = 0;i<_ary.length;i++){
                                _selectPath.push($(_input).attr('data-holder') + '[data-key="' + _ary[i].key + '"] label.t-b-13');
                            }
                            _pool = $(_selectPath.join(','));
                            //_input.addEventListener('change' , looks , false);
                            _input.addEventListener('keyup' , looks , false);
                        }

                        var wrapper = function(_props , forId){
                            return '<div class="boxsFull m-d-10">' +
                                '<input class="chooseCheck" type="checkbox" id="' + forId + _props.serial + '" name="groupProductTags[]" value="' + _props.serial + '"' + ((_props.checked != undefined && _props.checked == true)? 'checked' : '') + '>' +
                                '<label class="t-b-13 t-W160" for="' + forId + _props.serial + '">' + _props.label + '</label><br>' +
                                '</div>';
                        };

                        var generateItem2 = function()
                        {
                            if(this.index == this.node.length)
                            {
                                //$(_loader).hide();
                                //clearInterval(run_generateItem);
                                //init();//啟動
                                return;
                            }
                            //console.log(this.node.length , this.index , this.key , this.forId);
                            var _holder = $('.chooseBox.groupProduct[data-key="' + this.key + '"]')[0];
                            var _loader = $(_holder.parentElement).find('.group_product')[0];
                            var tmp;
                            var begin = this.index;
                            this.index += 10;
                            if(this.index >= this.node.length) this.index = this.node.length;
                            for(var i = begin;i<this.index;i++)
                            {
                                tmp = wrapper(this.node[i] , this.forId);
                                if(this.node[i].checked != undefined && this.node[i].checked == true){
                                    $(_holder).prepend(tmp);
                                } else {
                                    $(_holder).append(tmp);
                                }
                            }
                            $(_loader).find('.percent').text(Math.floor((this.index / this.node.length)*10000)/100);
                        };

                        var generateItem = function()
                        {
                            var count = 0;
                            for(var i = 0;i<_ary.length;i++)
                            {
                                _ary[i].generateItem();
                                count += _ary[i].index;
                            }

                            if(count == _maxDataLength)
                            {
                                //$(_loader).hide();
                                for(var i = 0;i<_ary.length;i++) $('.chooseBox.groupProduct[data-key="' + _ary[i].key + '"]').parent().find('.group_product').hide();
                                clearInterval(run_generateItem);
                                init();//啟動
                            }
                        }

                        var looks = function(e)
                        {
                            var _t = e.currentTarget;
                            var _value = _t.value;
                            var resAry = [];
                            var unResAry = [];
                            if(_value != '')
                            {
                                timeout_look = setTimeout(function(){
                                    _pool.each(function(){
                                        if($(this).html().indexOf(_value) > -1) {
                                            resAry.push(this.parentElement);
                                        } else {
                                            unResAry.push(this.parentElement);
                                        }
                                    });
                                    $(resAry).removeClass('d-none');
                                    $(unResAry).addClass('d-none');
                                    if(resAry.length > 0){
                                        for(var i = 0;i<resAry.length;i++){
                                            //
                                            $(resAry[i]).closest('.chooseBoxsC').addClass('chooseBoxsC_show');
                                        }
                                    }
                                } , 250);
                            }
                            else
                            {
                                clearTimeout(timeout_look);
                                setTimeout(function(){
                                    _pool.each(function(){
                                        $(this.parentElement).removeClass('d-none');
                                        if($(this.parentElement).find('input').prop('checked') == true){
                                            $(this).closest('.chooseBox.groupProduct').prepend(this.parentElement);
                                        }
                                    });
                                    for(var i = 0;i<_ary.length;i++){
                                        $($(_t).attr('data-holder') + '[data-key="' + _ary[i].key + '"]').scrollTop(0);
                                    }
                                } , 290);
                            }
                        }

                        for(var i = 0;i<_ary.length;i++){
                            _ary[i].forId = Number(new Date().getTime() * Math.random()).toString(32);
                            _ary[i].index = 0;
                            _ary[i].generateItem = generateItem2;
                            _maxDataLength += _ary[i].node.length;
                        }

                        run_generateItem = setInterval(generateItem , 25);
                    </script>
                </div>
                {!! $CommonPresenter -> getQuotationButtonHTML($quotationContent, $quotationRecord, $account, 'update') !!}
            </div>
        </div>
    </form>

    <div class="boxsYellow m-t-25">
        <p class="t-black-15 m-d-10">{{ trans('quotation.send_record') }}</p>
        <div class='boxsFull'>
            <div class='table-header'>
                <p class='table-box20'>{{ trans('quotation.quotation_pickup_serial_id') }}</p>
                <p class='table-box30'>{{ trans('quotation.company_id') }}</p>
                <p class='table-box30'>{{ trans('quotation.company_user_id') }}</p>
                <p class='table-box20'>{{ trans('quotation.send_time') }}</p>
            </div>
            {!! $CommonPresenter -> getPickupSendRecordList($allQuotationContentList, $companyUserList) !!}
        </div>
    </div>

    <!-- 光箱 -->
    <div id="myModel" class="model templates">
        <div class='ac_outer'>
            <!-- 片語  光箱01 -->
            <div class='model_boxs box_1'>
                <div class='boxsFull'>
                    <p class="t-blue-20 order-l">{{ trans('quotation.phrase') }}</p>
                    <div class='t-close icon-clear'></div>
                </div>

                <!-- 實線 -->
                <i class='splitLine_title'></i>

                <div class="boxsFull search-container searchNotMT m-d-25">
                    <div class='boxsFull'>
                        <input class='price_search90 phraseSearch' type="text" placeholder="搜尋" name="search" data-holder=".boxsFull.phrase_template" data-loader=".loader.phrase_template" data-done=".btn-half-blue.phrase_template" data-ck="quotation_content">
                        <button class='searchBtn price_icon' type="button"><i class="icon-search"></i></button>
                    </div>
                </div>

                <div class='boxsFull phrase_template m-d-10 over700'><!-- JS 動態插入 --></div>
                <div class="loader phrase_template">
                    <strong>
                        <span>Loading</span>
                        <span class="percent">100</span>%
                    </strong>
                </div><!-- 載入提示 -->
                <div class='boxsFull m-d-10'>
                    <button class='btn-half-blue phrase_template icon-search order-r' type="button">&nbsp;{{ trans('common.confirm') }}</button>
                </div>
                <script language="javascript" type="text/template" id="phraseTemplate">
                    {!! $CommonPresenter -> getPhraseJSON($phraseList) !!}
                </script>
                <script language="javascript" type="text/javascript">
                    (function(){
                        var _ary = JSON.parse(document.getElementById('phraseTemplate').innerHTML);
                        var _index = 0;
                        var _input = $('.price_search90.phraseSearch')[0];//關鍵字查詢欄位
                        var _holder = $($(_input).attr('data-holder'))[0];//產品項目容器
                        var _loader = $($(_input).attr('data-loader'))[0];//載入顯示
                        var _done = $($(_input).attr('data-done'))[0];//確認按鈕
                        var forId = Number(new Date().getTime() * Math.random()).toString(32);
                        var _pool;//所有的產品
                        var run_generateItem;
                        var timeout_look;

                        function init(){

                            _pool = $($(_input).attr('data-holder') + ' label.t-b-13-nw');
                            //_input.addEventListener('change' , looks , false);
                            _input.addEventListener('keyup' , looks , false);
                            _done.addEventListener('click' , appendToCk , false);
                            //console.log(_input , _holder , _done , _pool);
                        }
                        var wrapper = function(_props){
                            return '<div class="boxsFull text-l">'+ '\n' +
                                '<input class="chooseCheck" type="checkbox" id="' + forId + _props.key + '" name="" value="' + _props.key + '">'+ '\n' +
                                '<label class="t-b-13-nw" for="' + forId + _props.key + '">' + _props.label + '</label><br>'+ '\n' +
                                '<i class="splitLine_bl"></i>' + '\n' +
                                '</div>';
                        };

                        var  generateItem = function(){
                            var tmp;
                            var begin = _index;
                            _index += 10;
                            if(_index >= _ary.length) _index = _ary.length;
                            for(var i = begin;i<_index;i++){
                                tmp = wrapper(_ary[i]);
                                $(_holder).append(tmp);
                            }


                            $(_loader).find('.percent').text(Math.floor((_index / _ary.length)*10000)/100);
                            if(_index == _ary.length) {
                                $(_loader).hide();
                                clearInterval(run_generateItem);
                                init();//啟動
                            }
                        }
                        var appendToCk = function(e){
                            var _t = e.currentTarget;
                            var checkedInputs = $(_holder).find('input:checked');
                            var setCode = '';
                            if(checkedInputs.length > 0) {
                                checkedInputs.each(function(){
                                    for(var i = 0;i<_ary.length;i++){
                                        if(_ary[i].key == Number(this.value)){
                                            setCode += _ary[i].data;
                                            break;
                                        }
                                    }

                                });

                                CKEDITOR.instances[$(_input).attr('data-ck')].insertText(setCode);//折行轉換
                            }

                            $(_t).closest('.showModel').removeClass('showModel');
                            checkedInputs.prop('checked' , false);
                        }
                        var looks = function(e){
                            var _t = e.currentTarget;
                            var _value = _t.value;
                            var resAry = [];
                            var unResAry = [];
                            if(_value != ''){
                                timeout_look = setTimeout(function(){
                                    _pool.each(function(){
                                        if($(this).html().indexOf(_value) > -1) {
                                            resAry.push(this.parentElement);
                                        } else {
                                            unResAry.push(this.parentElement);
                                        }
                                    });
                                    $(resAry).removeClass('d-none');
                                    $(unResAry).addClass('d-none');
                                } , 250);
                            } else {
                                clearTimeout(timeout_look);
                                setTimeout(function(){
                                    _pool.each(function(){
                                        $(this.parentElement).removeClass('d-none');
                                        if($(this.parentElement).find('input').prop('checked') == true){
                                            $(_holder).prepend(this.parentElement);
                                        }
                                    });
                                    $(_holder).scrollTop(0);
                                } , 290);
                            }
                        }
                        run_generateItem = setInterval(generateItem , 25);
                    })();
                </script>
            </div>

            <!-- 郵件  光箱02 -->
            <div class='model_boxs box_2'>
                <div class='boxsFull'>
                    <p class="t-blue-20 order-l">{{ trans('quotation.sample') }}</p>
                    <div class='t-close icon-clear'></div>
                </div>

                <!-- 實線 -->
                <i class='splitLine_title'></i>

                <div class="boxsFull search-container searchNotMT m-d-25">
                    <div class='boxsFull'>
                        <input class='price_search90 letterSearch' type="text" placeholder="搜尋" name="search" data-holder=".boxsFull.letter_template" data-loader=".loader.letter_template" data-done=".btn-half-blue.letter_template" data-ck="quotation_content">
                        <button class='searchBtn price_icon' type="button"><i class="icon-search"></i></button>
                    </div>
                </div>

                <div class='boxsFull letter_template m-d-10 over700'><!-- JS 動態插入 --></div>
                <div class="loader letter_template">
                    <strong>
                        <span>Loading</span>
                        <span class="percent">100</span>%
                    </strong>
                </div><!-- 載入提示 -->
                <div class='boxsFull m-d-10'>
                    <button class='btn-half-blue letter_template icon-search order-r' type="button">&nbsp;&nbsp;{{ trans('common.confirm') }}</button>
                </div>
                <script language="javascript" type="text/template" id="letterTemplate">
                    {!! $CommonPresenter -> getSampleJSON($sampleList) !!}
                </script>
                <script language="javascript" type="text/javascript">
                    (function(){
                        var _ary = JSON.parse(document.getElementById('letterTemplate').innerHTML);
                        var _index = 0;
                        var _input = $('.price_search90.letterSearch')[0];//關鍵字查詢欄位
                        var _holder = $($(_input).attr('data-holder'))[0];//產品項目容器
                        var _loader = $($(_input).attr('data-loader'))[0];//載入顯示
                        var _done = $($(_input).attr('data-done'))[0];//確認按鈕
                        var forId = Number(new Date().getTime() * Math.random()).toString(32);
                        var _pool;//所有的產品
                        var run_generateItem;
                        var timeout_look;

                        function init(){
                            _pool = $($(_input).attr('data-holder') + ' label.t-b-13-nw');
                            //_input.addEventListener('change' , looks , false);
                            _input.addEventListener('keyup' , looks , false);
                            _done.addEventListener('click' , appendToCk , false);
                            //console.log(_input , _holder , _done , _pool);
                        }
                        var wrapper = function(_props){
                            return '<div class="boxsFull text-l">'+ '\n' +
                                '<input class="chooseCheck" type="checkbox" id="' + forId + _props.key + '" name="" value="' + _props.key + '">'+ '\n' +
                                '<label class="t-b-13-nw" for="' + forId + _props.key + '">' + _props.label + '</label><br>'+ '\n' +
                                '<i class="splitLine_bl"></i>' + '\n' +
                                '</div>';
                        };

                        var  generateItem = function(){
                            var tmp;
                            var begin = _index;
                            _index += 10;
                            if(_index >= _ary.length) _index = _ary.length;
                            for(var i = begin;i<_index;i++){

                                tmp = wrapper(_ary[i]);
                                $(_holder).append(tmp);
                            }


                            $(_loader).find('.percent').text(Math.floor((_index / _ary.length)*10000)/100);
                            if(_index == _ary.length) {
                                $(_loader).hide();
                                clearInterval(run_generateItem);
                                init();//啟動
                            }
                        }
                        var appendToCk = function(e){
                            var _t = e.currentTarget;
                            var checkedInputs = $(_holder).find('input:checked');
                            var setCode = '';
                            if(checkedInputs.length > 0) {
                                checkedInputs.each(function(){
                                    for(var i = 0;i<_ary.length;i++){
                                        if(_ary[i].key == Number(this.value)){
                                            setCode += _ary[i].data;
                                            break;
                                        }
                                    }

                                });

                                CKEDITOR.instances[$(_input).attr('data-ck')].insertHtml(setCode);
                            }

                            $(_t).closest('.showModel').removeClass('showModel');
                            checkedInputs.prop('checked' , false);
                        }
                        var looks = function(e){
                            var _t = e.currentTarget;
                            var _value = _t.value;
                            var resAry = [];
                            var unResAry = [];
                            if(_value != ''){
                                timeout_look = setTimeout(function(){
                                    _pool.each(function(){
                                        if($(this).html().indexOf(_value) > -1) {
                                            resAry.push(this.parentElement);
                                        } else {
                                            unResAry.push(this.parentElement);
                                        }
                                    });
                                    $(resAry).removeClass('d-none');
                                    $(unResAry).addClass('d-none');
                                } , 250);
                            } else {
                                clearTimeout(timeout_look);
                                setTimeout(function(){
                                    _pool.each(function(){
                                        $(this.parentElement).removeClass('d-none');
                                        if($(this.parentElement).find('input').prop('checked') == true){
                                            $(_holder).prepend(this.parentElement);
                                        }
                                    });
                                    $(_holder).scrollTop(0);
                                } , 290);
                            }
                        }
                        run_generateItem = setInterval(generateItem , 25);
                    })();
                </script>
            </div>

            <div class='model_boxs box_4'>
                <div class='boxsFull'>
                    <p class="t-blue-20 order-l">{{ trans('quotation_pickup.reply_sales_quotation') }}</p>
                    <div class='t-close icon-clear'></div>
                </div>

                <!-- 實線 -->
                <i class='splitLine_title'></i>

                <div class='boxsFull'>
                    <div class='boxsFull m-d-25'>
                        <p class='t-r-15 text-l p-d-10'>{{ trans('quotation_pickup.quotation_mail_title') }}</p>
                        <label>
                            <input class='input-f' type="" id="reply_sales_quotation_mail_title" name="reply_sales_quotation_mail_title" placeholder="{{ trans('quotation_pickup.quotation_mail_title') }}">
                        </label>
                    </div>

                    <div class='boxsFull m-td-25'>
                        <p class='t-r-15 text-l p-d-10'><textarea name="quotation_reply" id="quotation_reply" rows="10" cols="60" tabindex="8" class="ckeditor"></textarea></p>
                        <script>
                            CKEDITOR.replace('quotation_reply', {
                                height: 250/*px*/
                            });
                        </script>
                    </div>

                    <div class='boxsFull m-td-25'>
                        <button type="button" class='btn-half-blue order-l' onclick="(function(_btn){doAction('closeQuotationReply', _btn);})(this);">{{ trans('common.close') }}</button>
                        <button type="button" class='btn-half-blue order-r' onclick="(function(_btn , _ckInstance){doAction('saveAndCloseQuotationReply' , _btn , _ckInstance);})(this , CKEDITOR.instances['quotation_reply']);">{{ trans('common.confirm') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection