@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
                            },
                            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();
                                }
                                else
                                    alert("刪除失敗");
                            }
                        });
                    }, 300);
                    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{
            position:relative;
        }
        .price_boxsC .loader{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            z-index:3;
            background-color:rgba(0,0,0,0.45);
            text-align:center;
            color:#fff;
            font-size:1rem;
        }
        .price_boxsC .loader strong{
            display: inline-block;
            vertical-align: middle;

        }
        .price_boxsC .loader strong .percent{
            display:inline-block;
            width:3rem;
        }
        .price_boxsC .loader:before{
            content: ' ';
            display: inline-block;
            vertical-align: middle;
            width: 0;
            height: 100%;
        }
    </style>
    <style type="text/css">
        .mu-file{
            display:none;
        }
        .mu-file.show{
            display:inline-block;
        }
        .mu-file.show input{

        }
    </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="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="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="customer_code" id="customer_code" value="{{ $data -> customer_code }}">
                            {!! $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 }}</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" 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 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_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" disabled style="background-color:#B5B5B5;" required>
                                </label>
                            </div>
                        </div>

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

                        <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>
                            <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>
                        </div>
                    </div>

                    <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">
                        <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>
            </div>
        </div>
    </form>
@endsection