@extends('setting.layouts.layout')
@section('title',trans('quotation.title'))
@section('script_css')
<link href="/assets/plugins/jquery-upload-file/4.0.11/uploadfile.css" rel="stylesheet">
@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 src="/assets/plugins/jquery-upload-file/4.0.11/jquery.uploadfile.js"></script>
    <script type="text/javascript" src="/ckeditor/ckeditor.js"></script>
    <!-- Custom javascript -->
    <script language="javascript">
        var base_url = "{{ url('/') }}";
        var quotation_content_id="{{ $quotation->quotation_content_id }}";
        var current_select_product=[]; //目前已選的產品
        var current_select_company_user=[]; //目前已選的聯絡人
        var current_mail_cc_list=[];//已選的CC
        @foreach($currentCompanyUserList as $companyUser)
        current_select_company_user.push("{{$companyUser}}")
        @endforeach

        @foreach($currentProductList as $product_id)
        current_select_product.push({{$product_id}})
        @endforeach

        @foreach($quotation->quotation_mail_cc as $mail_cc)
        current_mail_cc_list.push("{{$mail_cc}}");
        @endforeach


        $(document).ready(function() {
            show_product(null);
            updateContent();
            //$("#direct_deal_product").change(direct_deal_select);
            $("#direct_deal_product").select2();
            $("#direct_deal_company").select2();

            //郵件主旨與詢價主旨同步
            $('input[name=quotation_title]').change(function(){
              $('input[name=quotation_mail_title]').val($(this).val());
            });
            //郵件副本
            updateAccount();

            //檔案上傳
            $("#fileuploader").uploadFile({
                url:base_url+"/setting/quotation/ajaxFileUpload/"+quotation_content_id,
                formData: {"_token": "{{ csrf_token() }}"},
                multiple:true,
                fileName:"myfile",
                uploadStr:"附檔上傳",
                maxFileCount:5,
                maxFileSize:2*1024*1024,
                /*
                showDelete: true,
                deleteCallback: function (data, pd) {
                    for (var i = 0; i < data.length; i++) {
                        $.post(base_url+"/setting/quotation/ajaxRemoveFile", {"_token": "{{ csrf_token() }}",quotation_content_id: quotation_content_id,fileName: data[i]},
                            function (resp,textStatus, jqXHR) {
                                //Show Message
                                alert("檔案已刪除");
                            });
                    }
                    pd.statusbar.hide(); //You choice.

                },*/
                onSuccess:function(files,data,xhr,pd){
                    updateFileList();
                    pd.statusbar.hide();
                }
            });

            //direct_deal_select();
        });

        //直接成交
        function direct_deal(){
            $.ajax({
               type: "POST",
               url:  base_url + "/setting/quotation/ajaxDirectDeal",
               dataType:"json",
               data: {
                "_token": "{{ csrf_token() }}",
                "quotation_content_id":quotation_content_id,
                "company_id":$("#direct_deal_company").val(),
                "product_id":$("#direct_deal_product").val(),
                "remark":$("#direct_deal_remark").val()
               },
               success: function(data)
               {
                   if(data.success){
                        alert("成功");
                        window.location = base_url + "/setting/quotation/update?quotation_content_id="+data.quotation_content_id;
                   }else{
                       alert(data.message);
                       console.log("ajaxGetProductCompanyUserList error ");
                       console.log(data);
                   }
               }
             });



        }
        /*
        function direct_deal_select(){
            $.ajax({
               type: "GET",
               url:  base_url + "/setting/quotation/ajaxProductCompany",
               dataType:"json",
               data: {
                account:"{{ $quotation->account}}",
                product_id: [$("#direct_deal_product").val()]
               },
               success: function(data)
               {
                   if(data.success){
                        let c_repeat=[];
                        for(var i in data.data_list){
                            //過濾重複公司
                            //if(c_repeat.indexOf(data.data_list[i].company_id))
                            //    continue;
                            var newOption = new Option(data.data_list[i].company_abbreviation_name,data.data_list[i].company_id,  false, false);
                            $('#direct_deal_company').append(newOption).trigger('change');
                            c_repeat.push(data.data_list[i].company_id);
                        }

                   }else{
                       console.log("ajaxGetPorductCompanyUserList error ");
                       console.log(data);
                   }
               }
             });
        }*/

        function update_product(){
            let search=$("input[name=search_product]").val();
            show_product(search);
        }

        function show_product(search){
            $('#select_product').empty();
            $.ajax({
               type: "GET",
               url:  base_url+"/setting/product_setting/ajaxGetProductList",
               data:{"search":search,"valid":1},
               dataType:"json",
               success: function(data)
               {
                   if(data.success){
                        let selected_item='';
                        for(var i in data.data_list){
                            let html="";
                            let id="basicProduct_"+makeid(10);
                            let product_id=data.data_list[i].product_id;
                            let product_name=data.data_list[i].name;
                            let checked="";
                            let product_name_style='';
                            
                            if(current_select_product.indexOf(product_id)!=-1){
                                checked="checked";
                                product_name_style='style="color:red" ';
                            }
                            html+='<div class="boxsFull m-d-10">';
                            html+='<input class="chooseCheck choose_prodcut" type="checkbox" id="'+id+'" name="product[]" value="'+product_id+'" '+checked+'>';
                            html+='<label class="t-b-13" '+product_name_style+' for="'+id+'">'+product_name+'</label><br>';
                            html+="</div>";
                            
                            if(current_select_product.indexOf(product_id)!=-1) //現有的加在前面
                                selected_item+=html; 
                            else //沒選的放後面
                                $('#select_product').append(html);
                        }
                        $('#select_product').prepend(selected_item);//選到的往前加上去
                        
                        //選擇的產品放入list
                        $(".choose_prodcut").click(function(){
                            let product_id=parseInt($(this).val());
                            if($(this).is(":checked"))
                                current_select_product.push(product_id);
                            else
                                current_select_product.splice(current_select_product.indexOf(product_id),1);
                            show_product(null);//選了之後重跑
                            updateProductCompany();
                        });
                        updateProductCompany();//主要用於第一次載入要顯示
                   }else{
                       console.log("ajaxGetProductList error ");
                       console.log(data);
                   }
               }
             });
        }

        function updateContent(){
           $.ajax({
               type: "GET",
               url:  base_url+"/setting/quotation/ajaxContent",
               data: { quotation_content_id: quotation_content_id },
               dataType:"json",
               success: function(data)
               {
                   if(data.success){
                       $('#quotation_item_list').empty();
                       let html="";

                        let send_time=" (尚未寄送)";
                        let checked="";
                        if(data.send_time!=null)
                            send_time='(於'+data.send_time+'寄送)By'+data.sender_name;
                        html+='<p class="t-black-15 m-d-10" style="margin-top:20px">訂單紀錄'+data.quotation_content_id+send_time+'</p>';
                        html+='<div class="boxsFull">';
                        html+=' <div class="table-header">';
                        html+='  <p class="table-box10">品名</p>';
                        html+='  <p class="table-box20">廠商名稱</p>';
                        html+='  <p class="table-box10">聯絡人員</p>';
                        html+='  <p class="table-box10">取件人員</p>';
                        //html+='  <p class="table-box10">發送人員</p>';
                        html+='  <p class="table-box10">取件時間</p>';
                        html+='  <p class="table-box10">取件狀態</p>';
                        html+='  <p class="table-box10">成交</p>';
                        html+='  <p class="table-box15">備註</p>';
                        html+='</div>';
                        html+='</div>';
                        $('#quotation_item_list').append(html);
                        for(var i in data.item_list){
                            if(data.item_list[i].deal)
                                checked="checked";
                            else
                                checked="";

                            let pickup_time="&nbsp;";
                            if(data.item_list[i].pickup_time)
                                pickup_time=data.item_list[i].pickup_time;

                            let pickup_name="&nbsp;";
                            if(data.item_list[i].pickup_account_name)
                                pickup_name=data.item_list[i].pickup_account_name;

                            let status="&nbsp;";
                            if(data.item_list[i].status_name)
                                status=data.item_list[i].status_name;

                            html="";
                            html+='<div class="table-body">';
                            html+='<p class="table-box10">'+data.item_list[i].product_name;+'</p>';
                            html+='<p class="table-box20">'+data.item_list[i].company_abbreviation_name;+'</p>';
                            html+='<p class="table-box10">'+data.item_list[i].company_user_name;+'</p>';
                            html+='<p class="table-box10">'+pickup_name+'</p>';
                            html+='<p class="table-box10">'+pickup_time+'</p>';
                            html+='<p class="table-box10">'+status+'</p>';
                            html+='<p class="table-box10"><input class="chooseCheck choose_deal" type="checkbox"  value="'+data.item_list[i].rowid+'" '+checked+'></p>';
                            html+='<p class="table-box15"><input rowid="'+data.item_list[i].rowid+'" class="input-f deal_remark" type="text"  name="item_remark" value="'+data.item_list[i].item_remark+'" style="background:#fff"></p>';
                            html+='</div>';
                           $('#quotation_item_list').append(html);
                        }
                        //顯示重複寄送
                        $('#quotation_item_list').append('<div class="boxsFull"></div>');

                        //顯示檔案
                        updateFileList();


                   }else{
                       console.log("ajaxGetProductList error ");
                       console.log(data);
                   }
               }
             });
        }
        
        function updateFileList(){
            //顯示檔案清單
            $.ajax({
               type: "GET",
               url:  base_url+"/setting/quotation/ajaxFile",
               data: { quotation_content_id: quotation_content_id },
               dataType:"json",
               success: function(data)
               {
                   //console.log("get file "+data);
                   if(data.success){
                        let html="";
                        //顯示檔案
                        $("#file_list").empty();
                        for(var i in data.file_list){
                            html="";
                            let link="{{ url('/') }}/storage/quotation/"+data.file_list[i].full_path;
                            html+='<div class="boxsFull mu-file show">';
                            html+='    <button class="icon-add_circle" type="button" onClick="CKEDITOR.instances[\'quotation_content\'].insertHtml(\''+data.file_list[i].file_name+'\')"></button>';
                            html+='    <p class="t-file"><a target="_blank" href='+link+'>'+data.file_list[i].file_name+'</a></p>';
                            @if(!$quotation->send_time) //寄出後不能刪檔
                            html+='    <button class="icon-cancel del" type="button" onClick="file_delete('+data.file_list[i].quotation_file_id+')"></button>';
                            @endif
                            html+='    <a target="_blank" href='+link+'><img src="'+link+'" style="width:200px"></img></a>';
                            html+='</div>';
                            $("#file_list").append(html);
                        }


                   }else{
                       console.log("ajaxGetProductList error ");
                       console.log(data);
                   }
               }
            });            
        }
        

        function update_company(){
            updateProductCompany($("input[name=search_company]").val());
        }

        function updateProductCompany(search){
            $.ajax({
               type: "GET",
               url:  base_url + "/setting/quotation/ajaxProductCompany",
               dataType:"json",
               data: {
                account:"{{ $quotation->account}}",
                product_id: current_select_product,
                search:search
               },
               success: function(data)
               {
                   if(data.success){
                        @foreach($quotationTypeList as $ql)
                        $('.select_product_company_user[quotation_type="{{$ql->system_code_key}}"]').empty();
                        $('.select_product_company_user[quotation_type="{{$ql->system_code_key}}"]').parent().removeClass("chooseBoxsC_show");
                        @endforeach

                        for(var i in data.data_list){
                            let html="";
                            let id="companyuser_"+makeid(10);
                            let company_user_id=data.data_list[i].company_user_id;
                            let company_id=data.data_list[i].company_id;
                            let company_name=data.data_list[i].company_abbreviation_name;
                            let company_user_name=data.data_list[i].company_user_name;
                            let quotation_type=data.data_list[i].quotation_type;
                            let checked="";
                            let company_name_style='';
                            if(current_select_company_user.indexOf(quotation_type+"#"+company_id+"-"+company_user_id)!=-1){
                                checked="checked";
                                company_name_style='style="color:red" ';
                            }
                            html+='<div class="boxsFull m-d-10">';
                            html+='<input class="chooseCheck choose_company_user" type="checkbox" id="'+id+'" name="company_user[]" value="'+quotation_type+"#"+company_id+"-"+company_user_id+'" '+checked+'>';
                            html+='<label class="t-b-13" '+company_name_style+' for="'+id+'">'+company_name;
                            if(company_user_id!=0)
                                html+="-"+company_user_name
                            html+='</label><br>';
                            html+="</div>";
                            
                            if(current_select_company_user.indexOf(quotation_type+"#"+company_id+"-"+company_user_id)!=-1)
                                $('.select_product_company_user[quotation_type='+quotation_type+']').prepend(html);//選到的往前加上去
                            else
                                $('.select_product_company_user[quotation_type='+quotation_type+']').append(html);
                            
                            $('.select_product_company_user[quotation_type='+quotation_type+']').parent().addClass("chooseBoxsC_show");
                        }
                        //點選後放入list
                        $(".choose_company_user").click(function(){
                            let info=$(this).val();
                            if($(this).is(":checked"))
                                current_select_company_user.push(info);
                            else
                                current_select_company_user.splice(current_select_company_user.indexOf(info),1);
                            update_company();//點了之後更新一次
                        });
                   }else{
                       console.log("ajaxGetProductCompanyUserList error ");
                       console.log(data);
                   }
               }
             });
        }


        function updateAccount(){
            $.ajax({
               type: "GET",
               url:  base_url+"/setting/quotation/ajaxOgzSalses",
               data:{"organization_code": "{{$organization_code}}"},
               dataType:"json",
               success: function(data)
               {
                   if(data.success){
                       let html="";
                       $("#show_mail_cc").empty();
                       $("#select_quotation_account option").remove();
                        //加入自己
                        let id="mail_cc_"+makeid(10);
                        html+='<div style="float:left">';
                        html+='<input id="'+id+'" class="chooseCheck choose_mail_cc" type="checkbox" name="mail_cc" value="{{$account->login_account}}" >';
                        html+='<label class="t-b-13" for="'+id+'">{{$account->account_name}}</label><br>';
                        html+="</div>";
                        for(var i in data.data_list){
                            let account=data.data_list[i].login_account;
                            let account_name=data.data_list[i].account_name;
                            let checked="";

                            if(current_mail_cc_list.indexOf(account)!=-1){
                                checked="checked";
                            }else
                                checked="";
                            let id="mail_cc_"+makeid(10);
                            html+='<div style="float:left">';
                            html+='<input id="'+id+'" class="chooseCheck choose_mail_cc" type="checkbox" name="mail_cc" value="'+account+'" '+checked+' >';
                            html+='<label class="t-b-13" for="'+id+'">'+account_name+'</label><br>';
                            html+="</div>";

                        }
                        $("#show_mail_cc").append(html);

                   }else{
                       console.log("ajaxGetProductList error ");
                       console.log(data);
                   }
               }
             });
        }

        //刪除草稿
        function delete_draft(){
            if(!confirm("是否刪除草稿?"))
                return;
            $.ajax({
                   type: "POST",
                   url: base_url + "/setting/quotation/deleteEditionAction",
                   data: {
                    "_token": "{{ csrf_token() }}",
                    "quotation_content_id":quotation_content_id
                   },
                   success: function(data)
                   {

                       if(data.success){
                           alert("成功");
                           window.location=base_url + "/setting/quotation/update?quotation_content_id="+data.quotation_content_id;
                       }else{
                           alert("失敗"+data.message);
                       }
                   }
                 });
        }

        //儲存/寄出詢價單
        function save(action_type){
            $("#btnSend").attr('disabled', true);
            let mail_cc_list=[];
            $("#show_mail_cc input[name=mail_cc]").each(function(){
                if($(this).prop('checked'))
                    mail_cc_list.push($(this).val());
            });

            let big_order=0;
            if($('#quotation_big_order').prop('checked'))
                big_order=1;

            let repeat_order=0;
            if($('#quotation_repeat_order').prop('checked'))
                repeat_order=1;
            
            
            let save_select_company_user=[];
            //用current_select_company_user會遇到UI不顯示但有勾選的盲點，所以最終存檔必須重新抓取
            $(".choose_company_user").each(function(){
                let info=$(this).val();
                if($(this).is(":checked"))
                    save_select_company_user.push(info);
            });
            

            let quotation_text_content=CKEDITOR.instances['quotation_content'].getData();
            $.ajax({
                   type: "POST",
                   url: base_url + "/setting/quotation/updateAction",
                   data: {
                       "_token": "{{ csrf_token() }}",
                       "quotation_content_id":quotation_content_id,
                       "quotation_serial_number":"{{ $quotation->quotation_serial_number }}",
                       "quotation_serial_id":"{{ $quotation->quotation_serial_id }}",
                       "action_type":action_type,
                       "quotation_title":$("input[name=quotation_title]").val(),
                       "quotation_mail_title":$("input[name=quotation_mail_title]").val(),
                       "quotation_content":quotation_text_content,
                       "product_list":current_select_product,
                       //"current_company_user_list":current_select_company_user,
                       "current_company_user_list":save_select_company_user,
                       "quotation_mail_cc":mail_cc_list,
                       "quotation_mail_cc_str":$("input[name=mail_cc_str]").val(),
                       "big_order":big_order,
                       "repeat_order":repeat_order,
                       "quotation_remark":$("#quotation_remark").val()
                   } 
            }).done(function(data){
               if(data.success){
                   let message="成功";
                   if(data.message)
                       message+="\n"+data.message
                   alert(message);
                   window.location = base_url + "/setting/quotation/update?quotation_content_id="+data.quotation_content_id;
               }else{
                   alert("失敗"+data.message);
               }
               $("#btnSend").attr('disabled', false);
           }).fail(function(data){
                alert("失敗請洽管理員");
                $("#btnSend").attr('disabled', false);
           });;
        }
        
        //清空產品及廠商
        function clearProduct(){
            current_select_company_user=[];
            current_select_product=[];
            show_product(null);
            updateProductCompany(null);
        }

        //成交
        function deal(){
            let item_rowid=[];
            let item_remark=[];
            $(".choose_deal").each(function(){
                if($(this).is(":checked")){
                    let rowid=$(this).val();
                    item_rowid.push(rowid);
                    item_remark.push($(".deal_remark[rowid="+rowid+"]").val());
                }

            });

            let big_order=0;
            if($('#quotation_big_order').prop('checked'))
                big_order=1;

            let repeat_order=0;
            if($('#quotation_repeat_order').prop('checked'))
                repeat_order=1;

            $.ajax({
                   type: "POST",
                   url: base_url + "/setting/quotation/ajaxDeal",
                   dataType:"json",
                   data: {
                            "_token": "{{ csrf_token() }}",
                            "item_rowid": item_rowid,
                            "item_remark":item_remark,
                            "quotation_content_id":quotation_content_id,
                            "big_order":big_order,
                            "repeat_order":repeat_order,
                            "quotation_remark":$("#quotation_remark").val(),
                         },
                   success: function(data)
                   {
                       if(data.success){
                           alert("成功");
                           window.location = base_url + "/setting/quotation/update?quotation_content_id="+data.quotation_content_id;
                       }else{
                           alert("失敗"+data.message);
                       }
                   }
                 });
        }

        function file_delete(quotation_file_id){

            $.post(base_url+"/setting/quotation/ajaxRemoveFile",
                {"_token": "{{ csrf_token() }}",quotation_content_id: quotation_content_id,quotation_file_id: quotation_file_id},
                function (resp,textStatus, jqXHR) {
                    updateFileList();
                });

        }

        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>
    <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="quotation_content_id" id="quotation_content_id" value="{{ $quotation -> quotation_content_id }}">
                            <input type="hidden" name="login_account" id="login_account" value="{{ $account -> login_account }}">
                            <input type="hidden" name="quotation_serial_number" id="quotation_serial_number" value="{{ $quotation->quotation_serial_number }}">
                            <input type="hidden" name="quotation_serial_id" id="quotation_serial_id" value="{{ $quotation->quotation_serial_id }}">
                            <input type="hidden" name="customer_code" id="customer_code" value="{{ $quotation -> customer_code }}">
                            <input type="hidden" name="customer_country" id="customer_country" value="{{ $quotation -> customer_country }}">
                            <input type="hidden" name="quotation_ad" id="quotation_ad" value="{{ $quotation -> quotation_ad }}">
                            <div class='box37_r re37_r'>
                                <p class="t-blue-20 p-d-30">編輯詢價單：{{ $quotation->quotation_content_id }}
                                (@if($quotation->send_time) 已寄出 @else 未發送 @endif)</p>
                            </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" id="quotation_big_order" class="checkbox" @if($quotation->big_order) checked @endif >                                        <span class="btn-box">
                                    <span class="btn">
                                    </span>
                                    </span>
                                        <span class="t-b-13-nw m-l-10">大單</span>
                                    </label>
                                    <label class='order-r'>
                                        <input type="checkbox" id="quotation_repeat_order" class="checkbox" @if($quotation->repeat_order) checked @endif>
                                        <span class="btn-box">

                                    <span class="btn">
                                    </span>
                                    </span>
                                        <span class="t-b-13-nw m-l-10">{{ trans('quotation.quotation_repeat_order') }}</span>

                                    </label>

                                    <label class='order-r'>
                                        <input type="checkbox" name="create_customer" id="create_customer" class="checkbox" onclick="return false;" @if($quotation->customer_to_formal) checked @endif  >
                                        <span class="btn-box">
                                                <span class="btn">
                                                </span>
                                                </span>
                                        <span class="t-b-13-nw m-l-10">轉正客戶</span>
                                    </label>
                                </div>
                            </div>
                            <div class='box37_l'>
                                <div class='boxsFull'>

                                </div>
                            </div>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation.customer_code') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="customer_code" value="{{ $quotation->customer_code }}" placeholder="{{ trans('quotation.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="{{ $quotation->customer_country }}" 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($quotation -> quotation_ad, $adTypeList) !!}" placeholder="{{ trans('quotation_pickup.quotation_ad') }}" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                        </div>


                        <div class='boxsFull m-d-25'>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>客戶名稱</p>
                                <label>
                                    <input class='input-f' type="text" name="customer_name" value="{{ $quotation->customer_name }}" placeholder="" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>所屬單位</p>
                                <label>
                                    <input class='input-f' type="text" name="customer_country" value="{{$quotation->organization_chinese_name}}" placeholder="所屬單位" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                            <div class='boxs30'>
                                <p class='t-r-15 text-l p-d-10'>所屬業務</p>
                                <label>
                                    <input class='input-f' type="text" name="account" value="{{ $quotation->account_name}}" placeholder="業務" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                        </div>


                        <div class='boxsFull'>
                            <div class='boxs50'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation.quotation_title') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="quotation_title" value="{{ old('quotation_title', $quotation -> quotation_title) }}" placeholder="{{ trans('quotation.quotation_title') }}" maxlength="300" required>
                                </label>
                            </div>
                            <br>
                            <div class='boxs50'>
                                <p class='t-r-15 text-l p-d-10'>{{ trans('quotation.quotation_mail_title') }}</p>
                                <label>
                                    <input class='input-f' type="text" name="quotation_mail_title" value="{{ old('quotation_mail_title', $quotation -> quotation_mail_title) }}" placeholder="{{ trans('quotation.quotation_mail_title') }}" maxlength="300" required>
                                </label>
                            </div>
                            <div class='boxs50'>
                                <p class='t-r-15 text-l p-d-10'>郵件副本</p>
                                <label>
                                    <input class='input-f' type="text" name="mail_cc_str" value="{{$quotation->quotation_mail_cc_str}}" placeholder="請勿副本給廠商!" maxlength="300">
                                </label>
                                <div id="show_mail_cc" class="" ></div>
                            </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>-->
                                @if(!$quotation->send_time)
                                <button id="btnClearProduct" type="button" class="btn-half-blueG order-r" style="margin-left:50px;line-height:30px;" onclick="clearProduct();">清空產品&廠商</button>
                                @endif
                                <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="30" cols="60" tabindex="8" class="ckeditor">{{ old('quotation_content', $quotation -> quotation_content) }}</textarea></p>
                        </div>

                        <div class='boxsFull m-d-25'>
                            <p class='t-r-15 boxsInline order-l p-d-10'>附加檔案</p>

                            <div id="file_list" class='updateBox'>

                            </div>
                            <p><div id="fileuploader">Upload</div></p>
                        </div>
                    </div>


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

                    </div>


                      @if($quotation->send_time)
                        <div class='boxsFull m-d-25'>
                        <div class="table-box30 m-t-25">
                            <button type="button" class="btn-half-blue order-r" onclick="save('new_draft');">新增版次</button>
                        </div>
                        <div class="table-box30 m-t-25">
                            <button id="btnReSend" type="button" class="btn-half-orange order-r" style="margin-left:30px;" onclick="save('re_send');">重複發送詢價</button> 
                            <button type="button" class="btn-half-blue order-r" onclick="deal();">更新</button>
                        </div>
                        </div>

                        <div  class='boxsFull m-d-25'>

                            <p class="t-blue-15 m-d-10">直接成交</p>
                            <div class="select-style">
                                <select class="form-control" id="direct_deal_product">
                                    @foreach($productList as $p)
                                    <option value="{{ $p->product_id}}">{{ $p->product_chinese_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="select-style">
                                <select class="form-control" id="direct_deal_company" name="direct_deal_companey">
                                    @foreach($companyList as $company)
                                    <option value="{{ $company->company_id}}">{{ $company->company_abbreviation_name}}</option>
                                    @endforeach
                                </select>
                            </div>
                            <p><input class="input-f direct_deal_remark" type="text" id="direct_deal_remark" placeholder="備註" style="background:#fff" /></p>
                        </div>
                        <div class="table-box30 m-t-25">
                            <button type="button" class="btn-half-blue order-r" onclick="direct_deal();">直接成交</button>
                        </div>




                      @else
                        <div class='boxsFull m-d-25'>
                        <div class="table-box30 m-t-25">
                            <button type="button" class="btn-half-blue order-r"  style="margin-left:30px;" onclick="save('save_draft');">儲存草稿</button>
                                                    </div>
                        <div class="table-box30 m-t-25">
                            <button type="button" class="btn-half-blue order-r" onclick="delete_draft();">刪除草稿</button>
                        </div>
                        <div class="table-box30 m-t-25">
                            <button id="btnSend" type="button" class="btn-half-orange order-r" style="margin-left:30px;" onclick="save('send');">寄出詢價單</button>
                        </div>
                        </div>
                      @endif

                      <div class="table-box30 m-t-25">
                            <button type="button" class="btn-half-blue order-r" onclick="save('duplicate');">拷貝為新詢價</button>
                      </div>



                </div>

                <div class="centBoxRR">
                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">版本清單</div>
                        <div class="price_boxsC price_boxsC_show">
                            @foreach($quotationHistoryList as $q)
                            <div class='boxsYellow by2 m-d-10'>
                                <div class='t-b-13-nw b8'>
                                    <a href="{{url('/setting/quotation/update')."?quotation_content_id=".$q-> quotation_content_id }}" target="_blank">{{ $q-> quotation_content_id }}(@if($q->send_time) 已寄出 @else 草稿 @endif)</a>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>

                    <!-- 選擇商品 -->
                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">{{ trans('quotation.select_product') }}</div>
                        <div class="price_boxsC price_boxsC_show">
                            <div class="search-container searchNotMT m-d-25">
                                <input name="search_product" type="text" class='price_search basic_product_search' data-holder=".chooseBox.basic_product" placeholder="{{ trans('quotation.search_product') }}">
                                <button class='searchBtn price_icon' type="button" onClick="update_product()"><i class="icon-search"></i></button>
                            </div>
                            <div id="select_product"  class='chooseBox basic_product'></div><!-- 動態建立內容 -->
                        </div>
                    </div>

                    <div class="boxsFull m-d-10">
                        <div class="price_boxs">選擇廠商</div>
                        <div class="price_boxsC price_boxsC_show">
                            <div class="search-container searchNotMT m-d-25">
                                <input name="search_company" class='price_search basic_company_search' data-holder=".chooseBox.basic_product" data-loader=".loader.basic_product" type="text" placeholder="搜尋廠商">
                                <button class='searchBtn price_icon' type="button" onClick="update_company()" ><i class="icon-search"></i></button>
                            </div>
                            @foreach($quotationTypeList as $ql)
                            <div class='boxsFull m-d-10'>
                                <div class="chooseBoxs cB_blue">{{ $ql -> system_code_value }}</div>
                                <div class="chooseBoxsC chooseBoxsC_show">
                                <div quotation_type="{{ $ql -> system_code_key }}" class="chooseBox select_product_company_user" >
                                </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                    </div>



                    <div class='boxok'>
                        <div class="boxsWhite boxW15 m-d-25">
                            <div class='boxsInline'>
                                <input class='chooseCheck' type="checkbox" id="dealAccept" name="" value="">
                                <label class='t-b-13-s' for="dealAccept">{{ trans('quotation.todeal') }}</label><br>
                            </div>
                            <div class='boxsInline'>
                                <button class="btn-s-blue" type="button" onclick="doAction('deal');">{{ trans('common.confirm') }}</button>
                            </div>
                        </div>




                    </div>
                </div>
                <div>

            </div>
        </div>
    </form>




    <!-- 光箱 -->
    <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>
    </div>
@endsection