{% extends 'obj_form.html' %}
{% load i18n %}


{% block subtitle %}
<ol class="breadcrumb">
        <li>{% trans '宴会管理' %}</li>
        <li>{% trans '手动结算' %}</li>
</ol>
{% endblock %}

{% block form_content %}
<script>

    $(document).ready(function () {

        var grades = JSON.parse($("#bonus_grades_input").val())
        for (var i = grades.length - 1; i >= 0; i--) {
            var item = grades[i];
            var exp_x = item.exp_x.replaceAll('X','箱').replaceAll('and','并且')
            var exp_z = item.exp_z.replaceAll('Z','桌').replaceAll('and','并且')
            $("#bonus_grades_select").append(`
                <option value="${i}">${exp_x} & ${exp_z}</option>
            `)
            changeVal()
        }

        $("#bonus_grades_select").change(changeVal)

        function changeVal(){
            var index = parseInt($("#bonus_grades_select").val())
            var vals = grades[index].vals
            $("#bonus_amount_select").html('')
            for(var v of vals){
                $("#bonus_amount_select").append(`
                    <option value="${v.value}">￥${v.value}</option>
                `)
            }
        }

        $('#btn_apply_save').click(function (event) { 
            event.preventDefault();
            var amt = $("#bonus_amount_select option:selected").val();
            var remark = $("#txt_remark").val();
            if(remark.length<3){
                alert('请填写手动结算备注，不少于4个字')
                return
            }
            var r = confirm('您确定要手动结算吗？')
            if(!r) return
            $.ajax({
                url: '/banquet/ajax/manual_settle/',
                data:{
                    id: '{{id}}',
                    amt,
                    remark,
                },
                method: 'post',
                success: function(res){
                    if(res.e === ''){
                        $(".alert-success").fadeIn();
                        $.RefreshContent("/banquet/list/apply/"); 
                        $("#btn_apply_save").attr('disabled','disabled')
                    }
                    else{
                        alert(res.e);
                    }
                },
                error:function(){
                    alert('网络超时！请稍后再试！')
                }
            })
        }); 
		
        var status = {{status}}
        if(status!=1 && status!=3){
            $("#btn_apply_save").attr('disabled','disabled')
            $("#bonus_grades_select").attr('disabled','disabled')
            $("#bonus_amount_select").attr('disabled','disabled')
            $("#tip_danger").show()
        }
    })

</script>
<style>
    input[type=checkbox]{
        display: inline-block;
        width: auto;
        height: auto;
        margin-top: 10px;
    }
</style>
<div class="alert alert-success" role="alert" style="display: none">提示：保存成功！</div>
<div class="alert alert-danger" role="alert" style="display: none" id="tip_danger">当前状态不可结算，请先确认是否审核通过</div>
<div class="form-group">
    <label class="col-sm-2 control-label ">结算档位</label>
    <div class="col-sm-8">
		<select id="bonus_grades_select">
		</select>
	</div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label ">结算金额</label>
    <div class="col-sm-8">
		<select id="bonus_amount_select">
		</select>
	</div>
</div>
<div class="form-group">
    <label class="col-sm-2 control-label ">备注</label>
    <div class="col-sm-8">
        <textarea id="txt_remark" cols="30" rows="10" placeholder="填写备注" style="width: 100%;"></textarea>
    </div>
</div>
<div>
    <button class="btn btn-primary" id="btn_apply_save" style="float:right;">保存</button>
</div>
<input type="hidden" value="{{bonus_grades}}" id="bonus_grades_input"/>
{% endblock %}