<!DOCTYPE HTML>
<html>
<head>
    {% set title = result?"修改合同":"添加合同" %}
    {% set disabled = result?"disabled":"" %}
    <meta charset="utf-8">
    <title>{{title}}</title>
</head>
<body>
    <h2 class="title">{{title}}</h2>
    <div class="alert alert-danger" role="alert" id="messageBox1" style="display:none;">

    </div>
    <form id="contract" action="" method="POST" enctype="multipart/form-data" class="form-inline">
        <div class="row">
            <div class="col-xs-10">
                <!-- Nav tabs -->
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active"><a href="#info" aria-controls="info" role="tab" data-toggle="tab">合同信息</a></li>
                    <li role="presentation"><a href="#soInfo" aria-controls="soInfo" role="tab" data-toggle="tab">业主/买方信息</a></li>
                    <li role="presentation"><a href="#commissionManage" aria-controls="soInfo" role="tab" data-toggle="tab">佣金管理</a></li>
                    <li role="presentation" style="display: none;"><a id="houseInfo" data-toggle="tab">房源信息</a></li>
                    <li role="presentation" style="display: none;"><a id="customerInfo" data-toggle="tab">客源信息</a></li>
                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="info">
                        <br />
                        <div class="row">
                            <div class="col-md-6" class="form-control">
                                <label for="business">业务：</label>
                                <select name="business" id="business" {{disabled}}>
                                    <option value="-1">请选择</option>
                                    <option value="0">新房</option>
                                    <option value="1">二手房</option>
                                    <option value="2">租房</option>
                                </select>
                            </div>
                            {% if result.contractId %}
                            <div class="col-md-6" class="form-control">
                                <label>合同编号：</label>
                                <label>{{result.contractId}}</label>
                            </div>
                            {% endif %}
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <label for="houseNumberText">房源编号：</label>
                                <input name="houseNumberText" type="text" value="{{result.houseNumber}}" class="form-control" disabled>
                            </div>
                            <div class="col-md-6">
                                <label for="addressText">房源地址：</label>
                                <input name="addressText" type="text" value="{{result.address}}" class="form-control"  style="width:60%;" disabled>
                                <input type="button" id="select_house" value="选择" data-toggle="modal" data-target="#myModal" class="form-control" {{disabled}}>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <label for="customerNumberText">客源编号：</label>
                                <input name="customerNumberText" type="text" value="{{result.customerNumber}}" class="form-control"  style="width:60%;" disabled>
                                <input type="button" id="select_customer" value="选择" data-toggle="modal" data-target="#addCustomer" class="form-control" {{disabled}}>
                            </div>
                            <div class="col-md-6">
                                <label for="signedDate">签约日：</label>
                                <input name="signedDate" type="date" value="{{result.signedDate}}" class="form-control">
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <label for="permitNumber">产证：</label>
                                <input name="permitNumber" id="permitNumber" type="text" value="{{result.permitNumber}}" class="form-control">
                            </div>
                            <div class="col-md-6">
                                <label for="area">面积：</label>
                                <input name="area" id="area" type="text" value="{{result.area}}" class="form-control">平方米
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <label for="price">合同金额：</label>
                                <input name="price" id="price" type="text" value="{{result.price}}" class="form-control" {{disabled}}>
                            </div>
                            <div class="col-md-6">
                                <label for="managerId">主管：</label>
                                <select name="managerId" id="managerId" class="form-control">
                                    {% for item in managers %}
                                        <option  value="{{item.ID}}">{{item.display_name}}</option>
                                    {% endfor%}
                                </select>
                            </div>
                        </div>
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <label for="paymentMethod">付款方式：</label>
                                <textarea name="paymentMethod" id="paymentMethod" rows="8" class="form-control" style="width:80%;">{{result.paymentMethod}}</textarea>
                            </div>
                            <div class="col-md-6">
                                <label for="codicil">附加条款：</label>
                                <textarea name="codicil" id="codicil" rows="8" class="form-control" style="width:80%;">{{result.codicil}}</textarea>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="soInfo">
                        <br />
                        <div class="row">
                            <div class="col-md-6">
                                <h4>业主信息</h4>
                                <p>
                                    <label for="oName">业主姓名：</label>
                                    <input name="oName" id="oName" type="text" value="{{result.oName}}" class="form-control">
                                </p>
                                <p>
                                    <label for="oPhone">手机：</label>
                                    <input name="oPhone" id="oPhone" type="text" value="{{result.oPhone}}" class="form-control" {{disabled}}>
                                </p>
                                <p>
                                    <label for="oID">身份证：</label>
                                    <input name="oID" id="oID" type="text" value="{{result.oID}}" class="form-control">
                                </p>
                                <p>
                                    <label for="oBroker">经纪人：</label>
                                    <input name="oBroker" id="oBroker" type="text" value="{{result.oBroker}}" class="form-control">
                                </p>
                                <p>
                                    <label for="oCommission">佣金：</label>
                                    <input name="oCommission" id="oCommission" type="text" value="{{result.oCommission}}" class="form-control" {{disabled}}>
                                </p>
                                <p>
                                    <label for="oAddress">地址：</label>
                                    <input name="oAddress" id="oAddress" type="text" value="{{result.oAddress}}" class="form-control">
                                </p>
                                <h4>贷款</h4>
                                <p>
                                    <label for="oPayBack">偿还形式：</label>
                                    <input name="oPayBack" id="oPayBack" type="text" value="{{result.oPayBack}}" class="form-control">
                                </p>
                                <p>
                                    <label for="oMoney">偿还金额：</label>
                                    <input name="oMoney" id="oMoney" type="text" value="{{result.oMoney}}" class="form-control">
                                </p>
                            </div>
                            <div class="col-md-6">
                                <h4>买方信息</h4>
                                <p>
                                    <label for="cName">买方姓名：</label>
                                    <input name="cName" id="cName" type="text" value="{{result.cName}}" class="form-control">
                                </p>
                                <p>
                                    <label for="cPhone">手机：</label>
                                    <input name="cPhone" id="cPhone" type="text" value="{{result.cPhone}}" class="form-control" {{disabled}}>
                                </p>
                                <p>
                                    <label for="cID">身份证：</label>
                                    <input name="cID" id="cID" type="text" value="{{result.cID}}" class="form-control">
                                </p>
                                <p>
                                    <label for="cBroker">经纪人：</label>
                                    <input name="cBroker" id="cBroker" type="text" value="{{result.oBroker}}" class="form-control">
                                </p>
                                <p>
                                    <label for="cCommission">佣金：</label>
                                    <input name="cCommission" id="cCommission" type="text" value="{{result.cCommission}}" class="form-control" {{disabled}}>
                                </p>
                                <p>
                                    <label for="cAddress">地址：</label>
                                    <input name="cAddress" id="cAddress" type="text" value="{{result.cAddress}}" class="form-control">
                                </p>
                                <h4>贷款</h4>
                                <p>
                                    <label for="cPayBack">偿还形式：</label>
                                    <input name="cPayBack" id="cPayBack" type="text" value="{{result.cPayBack}}" class="form-control">
                                </p>
                                <p>
                                    <label for="cMoney">偿还金额：</label>
                                    <input name="cMoney" id="cMoney" type="text" value="{{result.cMoney}}" class="form-control">
                                </p>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="commissionManage">
                        <br />
                        <div class="row">
                            <div class="col-md-8">
                                <div id="staffImg">
                                    {% if consultant %}
                                    <div style = "display: inline-block;">
                                        <div class="row" style="margin-bottom:10px">
                                            <div class="col-md-3">
                                                <label>员工：</label>
                                            </div>
                                            <div class="col-md-5">
                                                <img height="100" width="100" src="{{ consultant.imageUrl }}" style="margin-right: 50px">
                                            </div>
                                            <div class="col-md-4">
                                                <label>{{ consultant.name }}</label>
                                            </div>
                                        </div>
                                        <div class="row" style="margin-top: 10px;">
                                            <div class="col-md-12">
                                                <label>部门：</label><input type="text">
                                            </div>
                                        </div>
                                        <input type="hidden" name="consultantId" value="{{ consultant.consultantId }}">
                                    </div>
                                    {% endif %}
                                    <button type="button" class="button action" data-toggle="modal" data-target="#myConsultant" id="recConsultantBt">
                                        选择员工
                                    </button>
                                </div>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-8">
                                <label for="intent">目标业绩：</label>
                                <input name="intent" id="intent" type="text"  class="form-control"{% if commission %}value="{{commission.intent}}" readonly {% endif %}>元
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-8">
                                <label for="completeRate">达成率：</label>
                                <input id="completeRate" type="text"  class="form-control" readonly>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-8">
                                <label for="businessType">应佣类型：</label>
                                <select name="businessType">
                                    <option value="0">买卖</option>
                                    <option value="1">租赁</option>
                                </select>
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-8">
                                <label for="accounts">应收佣金：</label>
                                <input name="accounts" id="accounts" type="text"  class="form-control" {% if commission %}value = "{{commission.accounts}}" readonly {% endif %}>元
                            </div>
                        </div>
                        <br/>
                        <div class="row">
                            <div class="col-md-8">
                                <button type="button" class="button action" id="paid">
                                    添加实收佣金
                                </button>
                            </div>
                        </div>
                        <input type="text" name="type" value="4" hidden="hidden">

                        <table class="form-table">
                            <tbody id="paidTbody">

                            </tbody>
                        </table>
                        {% if commissionLog %}
                        <div class="panel panel-default">
                            <div class="panel-heading">实收佣金列表</div>
                            <table class="table">
                                <tbody id="commissionList">
                                <tr>
                                    <th>实收时间：</th>

                                    <th>实收佣金：</th>
                                </tr>
                                {% for item in commissionLog %}
                                <tr>
                                    <td>
                                        {{item.time}}
                                    </td>
                                    <td class="paidList">
                                        {{item.paid}}
                                    </td>
                                </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div  class="col-xs-2">
                <input type="hidden" name="type" value="1">
                <input type="hidden" name="businessId" id="businessId">
                <input type="hidden" name="houseId" id="houseId">
                <input type="hidden" name="houseNumber" id="houseNumber" value="{{result.houseNumber}}">
                <input type="hidden" name="customerNumber" id="customerNumber" value="{{result.customerNumber}}">
                {% if commission %}
                    <input type="hidden" name="commissionId" value="{{commission.id}}">
                {% endif %}
                <input type="hidden" name="address" id="address">
                <div class="row" style="position: fixed;">
                    <select name="status" id="status">
                        {% for item in status %}
                            <option value="{{item.id}}">{{item.value}}</option>
                        {% endfor %}
                    </select>
                    <input type="submit" id="submit" class="button action">
                </div>
            </div>
        </div>

    </form>
    {% include 'recConsultant.html' %}
    {{ block('recConsultant') }}
<script>
(function($){
    $(document).ready(function(){
        {% if result %}
            $("#business,#businessId").val({{result.business}});
            $("#status").val({{result.status}});
            $("#managerId").val({{result.managerId}});
            showHouseTag({{result.business}},{{result.houseId}});
            showCustomerTag({{result.customerNumber}});
        {% endif %}
        $("#select_house").click(function(){
            if(checkBusinessSelected()){
                init_modal_houseList(selectHouse,$("#business").val());
            }else{
                return false;
            }
        });
        $("#select_customer").click(function(){
            if(checkBusinessSelected()){
                init_modal_addCustomer(selectCustomer,$("#business").val());
            }else{
                return false;
            }
        });

        init_modal_myConsultantList(addStaff);

        var rulesJson =  {
            houseNumber:'required',
            customerNumber:'required',
            businessId:'required',
            permitNumber:'required',
            area:'required',
            price:'required',
            signedDate:'required',
            accounts:'required',
            intent:'required'
        };

        $('#contract').validate({
            onkeyup: false,
            onfocusout: false,
            ignore: [],
            errorClass: "my-error-class",
            rules:rulesJson ,
            messages: {
                houseNumber:'请选择房源',
                customerNumber:'请选择客源',
                businessId:'请选择业务类型',
                permitNumber:'请选输入产证编号',
                area:'请选输入面积',
                price:'请选输入金额',
                signedDate:'请选输入签约日期',
                accounts:'请输入应收佣金',
                intent:'请输入目标业绩'
            },
            errorContainer: "#messageBox1",
            errorLabelContainer: "#messageBox1",
            submitHandler: function (form) {
                if($("#staffImg > div").length == 0){
                    $("#commissionMessage").removeAttr("style");
                    var label = $("<label>").append("请选择员工").addClass("my-error-class");
                    $("#commissionMessage").append(label);
                    return false;
                }
                form.submit();
            }
        });

        var j = 0 ;
        var urlParams = getUrlParmas();
        var sum = 0;
        $("form").on('click','#paid',function(){
            var tr = $("<tr>");
            var th = $("<th>");
            var td = $("<td>");
            var paidTime = $("<input>").attr({"type":"date","name":'log['+j+'][time]'}).addClass("form-control datePicker paidTime");
            var paid = $("<input>").attr({"type":"text","name":'log['+j+'][paid]'}).addClass("form-control paidMoney");
            var paidDelet =  $("<input>").attr({"type":"button","value":"删除"}).addClass("button action paidDelet form-control");
            var th1 = th.clone().append("实收时间：");
            var td1 = td.clone().append(paidTime);
            var th2 = th.clone().append("实收佣金：");
            var td2 = td.clone().append(paid);
            var td3 = td.clone().append(paidDelet);
            tr.append(th1).append(td1).append(th2).append(td2).append(td3);
            $("#paidTbody").append(tr);
            //实收时间默认为当天时间
            var now = new Date();
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var today = now.getFullYear()+"-"+(month)+"-"+(day) ;
            $('.datePicker').val(today);
            j++;
        });

        if(urlParams.id){
            $("form").find("select[name='businessType']").val("{{ commission.type }}");
        }

        if($("#commissionList > tr").length > 1){
            //计算实收佣金的总和
            $(".paidList").each(function() {
                var value = $(this).text();
                if(!isNaN(value) && value.length != 0) {
                    sum += parseFloat(value);
                }
            });
            var rate  = parseInt(sum * 100/ $("#accounts").val())+"%";
            $("#completeRate").val(rate);
        }

        //            $("#accounts").change(function(){
        //               var accounts =   $("#accounts").val();
        //                $("#intent").val(accounts);
        //            });

        $("#paidTbody").on("click",".paidDelet",function(){
            $(this).parents("tr").remove();
        });
    });

    function checkBusinessSelected(){
        if($("#business").val() == -1){
            alert("请先选择业务");
            return false;
        }
        return true;
    }

    function setBusinessDisabled(){
        $("#businessId").val($("#business").val());
        $("#business").attr("disabled", true);
    }

    function selectCustomer(data){
        $("input[name='customerNumberText']").val(data.id);
        $("#customerNumber").val(data.id);
        showCustomerTag(data.id);
        close_modal_addCustomer();
        setBusinessDisabled();
    }

    function selectHouse(data){
        $("input[name='addressText']").val(data.address);
        $("input[name='houseNumberText']").val(data.house_number);
        $("#address").val(data.address);
        $("#houseNumber").val(data.house_number);
        $("#houseId").val(data.id);
        var houseType = $("#business").val();
        if(houseType != -1){
            showHouseTag(houseType,data.id);
        }
        close_modal_houseList();
        setBusinessDisabled();
    }

    function showCustomerTag(id){
        $("#customerInfo").parent().show();
        $("#customerInfo").unbind().click(function(){
            window.open("{{adminUrl}}admin.php?page=customer&edit=true&id="+id);
        });
    }

    function showHouseTag(houseType,id){
        houseType = houseType+"";
        $("#houseInfo").parent().show();
        switch(houseType){
            case "0":
                houseType = "newHouse";
                break;
            case "1":
                houseType = "secHandHouse";
                break;
            case "2":
                houseType = "rentHouse";
                break;
        }
        $("#houseInfo").unbind().click(function(){
            window.open("{{adminUrl}}admin.php?page="+houseType+"&edit=true&id="+id);
        });
    }

    function addStaff(data){
        if($("#staffImg > div").length >0 ){
            $("#staffImg > div").remove();
        }
        var row = $("<div>").addClass("row").css("margin-bottom","10px");
        var row2 = $("<div>").addClass("row").css("margin-top","10px");
        var left = $("<div>").addClass("col-md-3");
        var label3 = $("<label>").append("员工：");
        left.append(label3);
        var mid = $("<div>").addClass("col-md-5");
        var img = $("<img>").attr({"src":data.imageUrl,"height":100,"width":100,"style":"margin-right:50px"});
        mid.append(img);
        var mid2 =$("<div>").addClass("col-md-4");
        var label = $("<label>").append(data.name);
        mid2.append(label);

        var div = $("<div>").addClass("col-md-12");
        var input = $("<input>").attr({"type":"text"});
        var label2 = $("<label>").append("部门：").append(input);
        div.append(label2);
        var recommendConsultant = $("<input>").attr({"type":"hidden","name":"consultantId","value":data.id});
        row.append(left).append(mid).append(mid2);
        row2.append(div);
        var div2 = $("<div>").append(row).append(row2).append(recommendConsultant).css("display","inline-block");
        $("#recConsultantBt").before(div2);
        controlCommand("staffImg",1,1);
    }
})(jQuery);
</script>
{% include 'recommendHouse.html' %}
{{ block('recommendHouse') }}
{% include 'addCustomer.html' %}
{{ block('addCustomer') }}
</body>
</html>