<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增（报价单）')" />
    <th:block th:include="include :: datetimepicker-css" />
    <style>
        .flex{
            display: flex;
            align-items: center;
        }
    </style>
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-order-add">
            <div class="panel-group" id="accordion">
                <div class="panel panel-default">
                    <div  class="panel-heading"  style="margin-bottom: 20px">
                        <h4 class="form-header h4 panel-title">
                            <a data-toggle="collapse"
                               href="#collapseOne">
                                基本信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in">
                       <input name="customerId" type="hidden" id="customerId" />
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label is-required">报价客户：</label>
                           <div class="col-sm-7">
                               <div class="input-group">
                                   <input name="customerName" onclick="selectCustomer()" class="form-control" type="text" placeholder="请选择报价客户 " id="customerName" required readonly>
                                   <span class="input-group-addon"><i class="fa fa-search"></i></span>
                               </div>
                           </div>
                           <label class="col-sm-3 control-label is-required">主题：</label>
                           <div class="col-sm-7">
                               <input name="orderName" class="form-control" type="text" required>
                           </div>
                       </div>

                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">报价总额：</label>
                           <div class="col-sm-7">
                               <input name="totalPrice" class="form-control" type="text" placeholder="保存后添加产品自动计算" readonly>
                           </div>
                           <label class="col-sm-3 control-label">币种：</label>
                           <div class="col-sm-7">
                               <select name="currency" class="form-control m-b" >
                                   <option value="RMB">人名币</option>
                                   <option value="USD">美金</option>
                               </select>
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label is-required">单价：</label>
                           <div class="col-sm-7">
                               <input name="price" class="form-control" type="text"  required>
                           </div>
                           <label class="col-sm-3 control-label is-required" >重量：</label>
                           <div class="col-sm-7">
                               <input name="weight" class="form-control" type="text"  required>
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label  is-required">总数量：</label>
                           <div class="col-sm-7">
                               <input name="totalQuantity" class="form-control" type="text"  required>
                           </div>
                           <label class="col-sm-3 control-label is-required">税率：</label>
                           <div class="col-sm-7">
                               <input name="exchRate" class="form-control" type="text"  required>
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label is-required">运费：</label>
                           <div class="col-sm-7 flex">
                               <input name="freight" class="form-control" type="text"  required>
                               <i class="fa fa fa-cny" style="width: 84px"><a href="javascript:autoCaculate();">自动计算</a></i>
                           </div>
                           <label class="col-sm-3 control-label">总重量：</label>
                           <div class="col-sm-7">
                               <input name="totalWeight" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">装柜标准：</label>
                           <div class="col-sm-7">
                               <input name="contStand" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">装柜重量：</label>
                           <div class="col-sm-7">
                               <input name="contWeight" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">货款总计：</label>
                           <div class="col-sm-7">
                               <input name="totalPaymentGoods" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">货款增值税：</label>
                           <div class="col-sm-7">
                               <input name="addedTax" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">运输增值税：</label>
                           <div class="col-sm-7">
                               <input name="transportAddedTax" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">毛利增值税：</label>
                           <div class="col-sm-7">
                               <input name="profitAddedTax" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">退税：</label>
                           <div class="col-sm-7">
                               <input name="taxRebates" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">开票金额：</label>
                           <div class="col-sm-7">
                               <input name="invoiceAmount" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">末税总值：</label>
                           <div class="col-sm-7">
                               <input name="totalEndTax" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">FOB $/kg：</label>
                           <div class="col-sm-7">
                               <input name="fob" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">美金价值：</label>
                           <div class="col-sm-7">
                               <input name="dollarVal" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">毛利：</label>
                           <div class="col-sm-7">
                               <input name="profit" class="form-control" type="text"  >
                           </div>
                       </div>
                       <div class="form-group flex">
                           <label class="col-sm-3 control-label">管理费：</label>
                           <div class="col-sm-7">
                               <input name="managFee" class="form-control" type="text"  >
                           </div>
                           <label class="col-sm-3 control-label">净利：</label>
                           <div class="col-sm-7">
                               <input name="netProfit" class="form-control" type="text"  >
                           </div>
                       </div>
                        <div class="form-group flex" >
                            <label class="col-sm-3 control-label">出口港：</label>
                            <div class="col-sm-7">
                                <textarea name="portOfLoading" maxlength="500" class="form-control" rows="3"></textarea>
                            </div>
                            <label class="col-sm-3 control-label">目的港：</label>
                            <div class="col-sm-7">
                                <input name="portOfDestination" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group flex" >
                            <label class="col-sm-3 control-label">产品描述：</label>
                            <div class="col-sm-7">
                                <textarea name="productDesc" maxlength="500" class="form-control" rows="3"></textarea>
                            </div>
                            <label class="col-sm-3 control-label">报价人：</label>
                            <div class="col-sm-7">
                                <input name="prcieBy" class="form-control" type="text">
                            </div>
                        </div>
                        <div class="form-group flex">
                            <label class="col-sm-3 control-label is-required">报价时间：</label>
                            <div class="col-sm-7">
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input name="prcieDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                                </div>
                            </div>
                            <label class="col-sm-3 control-label is-required">报价有效截止时间：</label>
                            <div class="col-sm-7">
                                <div class="input-group date">
                                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                    <input name="prcieEndDate" class="form-control" placeholder="yyyy-MM-dd" type="text" required>
                                </div>
                            </div>
                        </div>
                        <div class="form-group flex">
                            <label class="col-sm-3 control-label">运输方式：</label>
                            <div class="col-sm-7">
                                <textarea name="shippedVia" maxlength="500" class="form-control" rows="3"></textarea>
                            </div>
                            <label class="col-sm-3 control-label">备注：</label>
                            <div class="col-sm-7">
                                <textarea name="remark" maxlength="500" class="form-control" rows="3"></textarea>
                            </div>
                        </div>
                   </div>
                </div>
                <div class="panel panel-default">
                    <div  class="panel-heading" style="margin-bottom: 20px">
                        <h4 class="form-header h4 panel-title">
                            <a data-toggle="collapse"
                               href="#collapseTwo">
                                成本信息
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse">
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">FOB$/kg(5%)：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobFive"  class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">10%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobTen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">15%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobFifteen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">20%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobTwenty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">25%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobTwentyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">30%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobThirty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">35%：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="fobThirtyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">美金价值(5%)：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">10%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValTen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">15%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValFifteen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">20%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValTwenty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">25%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValTwentyFive"  class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">30%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValThirty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">35%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="dollarValThirtyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">毛利(5%)：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitFive"  class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">10%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitTen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">15%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitFifteen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">20%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitTwenty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">25%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitTwentyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">30%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitThirty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">35%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="profitThirtyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">管理费(5%)：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">

                                <label class="col-sm-4 control-label">10%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeTen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">15%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeFifteen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">20%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeTwenty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">25%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeTwentyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">30%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeThirty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">35%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="managFeeThirtyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">净利(5%)：</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">10%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitTen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">15%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitFifteen" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">20%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitTwenty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">25%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitTwentyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">30%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitThirty" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group col-sm-3">
                                <label class="col-sm-4 control-label">35%:</label>
                                <div class="col-sm-8">
                                    <div class="input-group date">
                                        <input name="netProfitThirtyFive" class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: datetimepicker-js" />
    <script type="text/javascript">
        var prefix = ctx + "crm/orderPrice"
        $("#form-order-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            if ($.validate.form()) {
                $.operate.save(prefix + "/add", $('#form-order-add').serialize());
            }
        }

        $("input[name='prcieDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        
        $("input[name='prcieEndDate']").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        
        /* 订单管理-修改-选择客户  */
	    function selectCustomer() {
	    	var url = ctx + "crm/customer/selectCustomer";
	   		$.modal.open("选择客户", url);
		}


        /* 自动计算 */
        function autoCaculate(){
            $.ajax({
                url: prefix + "/calculate",
                data: $('#form-order-add').serialize(),
                type: "post",
                success: function(result) {
                    console.log("================="+JSON.stringify(result));
                    if (result.code == 0) {
                        $("input[name='totalWeight']").val(result.data.totalWeight);
                        $("input[name='contWeight']").val(result.data.contWeight);
                        $("input[name='totalPaymentGoods']").val(result.data.totalPaymentGoods);
                        $("input[name='addedTax']").val(result.data.addedTax);
                        $("input[name='transportAddedTax']").val(result.data.transportAddedTax);
                        $("input[name='profitAddedTax']").val(result.data.profitAddedTax);
                        $("input[name='taxRebates']").val(result.data.taxRebates);
                        $("input[name='invoiceAmount']").val(result.data.invoiceAmount);
                        $("input[name='totalEndTax']").val(result.data.totalEndTax);
                        $("input[name='exchRate']").val(result.data.exchRate);
                        $("input[name='fob']").val(result.data.fob);
                        $("input[name='dollarVal']").val(result.data.dollarVal);
                        $("input[name='profit']").val(result.data.profit);
                        $("input[name='managFee']").val(result.data.managFee);
                        $("input[name='netProfit']").val(result.data.netProfit);
                        $("input[name='fobFive']").val(result.data.fobFive);
                        $("input[name='dollarValFive']").val(result.data.dollarValFive);
                        $("input[name='profitFive']").val(result.data.profitFive);
                        $("input[name='managFeeFive']").val(result.data.managFeeFive);
                        $("input[name='netProfitFive']").val(result.data.netProfitFive);
                        $("input[name='fobTen']").val(result.data.fobTen);
                        $("input[name='dollarValTen']").val(result.data.dollarValTen);
                        $("input[name='profitTen']").val(result.data.profitTen);
                        $("input[name='managFeeTen']").val(result.data.managFeeTen);
                        $("input[name='netProfitTen']").val(result.data.netProfitTen);
                        $("input[name='fobFifteen']").val(result.data.fobFifteen);
                        $("input[name='dollarValFifteen']").val(result.data.dollarValFifteen);
                        $("input[name='profitFifteen']").val(result.data.profitFifteen);
                        $("input[name='managFeeFifteen']").val(result.data.managFeeFifteen);
                        $("input[name='netProfitFifteen']").val(result.data.netProfitFifteen);
                        $("input[name='fobTwenty']").val(result.data.fobTwenty);
                        $("input[name='dollarValTwenty']").val(result.data.dollarValTwenty);
                        $("input[name='profitTwenty']").val(result.data.profitTwenty);
                        $("input[name='managFeeTwenty']").val(result.data.managFeeTwenty);
                        $("input[name='netProfitTwenty']").val(result.data.netProfitTwenty);
                        $("input[name='fobTwentyFive']").val(result.data.fobTwentyFive);
                        $("input[name='dollarValTwentyFive']").val(result.data.dollarValTwentyFive);
                        $("input[name='profitTwentyFive']").val(result.data.profitTwentyFive);
                        $("input[name='managFeeTwentyFive']").val(result.data.managFeeTwentyFive);
                        $("input[name='netProfitTwentyFive']").val(result.data.netProfitTwentyFive);
                        $("input[name='fobThirty']").val(result.data.fobThirty);
                        $("input[name='dollarValThirty']").val(result.data.dollarValThirty);
                        $("input[name='profitThirty']").val(result.data.profitThirty);
                        $("input[name='managFeeThirty']").val(result.data.managFeeThirty);
                        $("input[name='netProfitThirty']").val(result.data.netProfitThirty);
                        $("input[name='fobThirtyFive']").val(result.data.fobThirtyFive);
                        $("input[name='dollarValThirtyFive']").val(result.data.dollarValThirtyFive);
                        $("input[name='profitThirtyFive']").val(result.data.profitThirtyFive);
                        $("input[name='managFeeThirtyFive']").val(result.data.managFeeThirtyFive);
                        $("input[name='netProfitThirtyFive']").val(result.data.netProfitThirtyFive);
                    } else {
                        $.modal.msgError(result.msg);
                    }
                },
                error : function(e) {
                    $.modal.msgError("系统异常");
                }
            })
        }
    </script>
</body>
</html>