{% load i18n %}

<script>

    $(document).ready(function () {


        $.datetimepicker.setLocale('zh');

        $('.datetimepicker').datetimepicker({
            i18n: {
                zh: {
                    months: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月',],
                    dayOfWeek: ["一", "二", "三", "四", "五", "六", "日",]
                }
            },
            //timepicker:true,
            format: 'Y-m-d',
        });


        $('#areaSaldivision').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/saldiv/',
                    dataType: "json",
                    data: {
                        term: $("#areaSaldivision").val(),//搜索栏里的内容
                        company_id: '{{company_id}}',//额外参数
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#areaSaldivision_id").val(ui.item.value);
                $("#areaSaldivision").val(ui.item.label);
                return false;
            }
        });


        $('#areaSubdivision').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/subdiv/',
                    dataType: "json",
                    data: {
                        term: $("#areaSubdivision").val(),//搜索栏里的内容
                        company_id: '{{company_id}}',//额外参数
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#areaSubdivision_id").val(ui.item.value);
                $("#areaSubdivision").val(ui.item.label);
                return false;
            }
        });

        $('#inputSaldivision2').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/subdiv/',
                    dataType: "json",
                    data: {
                        term: $("#inputSaldivision2").val(),//搜索栏里的内容
                        company_id: '{{company_id}}',//额外参数
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#inputSaldivision2_id").val(ui.item.value);
                $("#inputSaldivision2").val(ui.item.label);
                return false;
            }
        });

        $('#inputSubdivision2').autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: '/obj/ajax/autocomplete/subdiv/',
                    dataType: "json",
                    data: {
                        term: $("#inputSubdivision2").val(),//搜索栏里的内容
                        company_id: '{{company_id}}',//额外参数
                    },
                    success: function (data) {
                        response(data);
                    }
                });
            },
            select: function (event, ui) {
                $("#inputSubdivision2_id").val(ui.item.value);
                $("#inputSubdivision2").val(ui.item.label);
                return false;
            }
        });


        $('#modal_edit').on('show.bs.modal', function (e) {
            var button = $(e.relatedTarget);
            var id = button.data("id");
            var saldivision = button.data("saldivision");
            var subdivision = button.data("subdivision");
            var qty = button.data("qty");
            var dt_fr = button.data("dt_fr");
            var dt_to = button.data("dt_to");
            var saldivision_id = button.data("saldivision_id");
            var subdivision_id = button.data("subdivision_id");

            $("#inputId").val(id);
            $("#inputSaldivision2").val(saldivision);
            $("#inputSaldivision2_id").val(saldivision_id);

            $("#inputSubdivision2").val(subdivision);
            $("#inputSubdivision2_id").val(subdivision_id);

            $("#inputQry2").val(qty);
            $("#inputStartTm2").val(dt_fr);
            $("#inputEndTm2").val(dt_to);

        });



        $('#btn_save2').click(function () {
            $.SubmitForm('#form2', '{{request.path}}', function () {
                $('.modal-backdrop').remove();
            });
        })
        $('#btn_save').click(function () {
            $.SubmitForm('#form1', '{{request.path}}', function () {
                $('.modal-backdrop').remove();
            });
        }) 
    })

</script>

<ol class="breadcrumb">
    <li>
        活动设置
    </li>
    <li>
        区域设置
    </li>
</ol>

<p><b>{{activity_award.name}}</b> 奖品的区域设置</p>
<form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form1">

    <div class="form-group ">

        <div class='col-md-2'>
            <input type='hidden' id='areaSaldivision_id' name="saldivision_id" />
            <input type="text" id='areaSaldivision' class="form-control" placeholder="{% trans '战区' %}">
        </div>

        <div class='col-md-2'>
            <input type='hidden' id='areaSubdivision_id' name="subdivision_id" />
            <input type="text" id='areaSubdivision' class="form-control" placeholder="{% trans '分区' %}">
        </div>
        <div class='col-md-1'>
            <input type="number" id="areaQty" class="form-control" placeholder="{% trans '上限数量' %}" name="qty">
        </div>
        <label class="col-sm-1 control-label">开始时间</label>
        <div class="col-md-2">
            <input type="text" id="areaTmStart" class="datetimepicker form-control" name="dt_fr">
        </div>
        <label class="col-sm-1 control-label">结束时间</label>
        <div class="col-md-2">
            <input type="text" id="areaTmEnd" class="datetimepicker form-control" name="dt_to">
        </div>
        <div class='col-md-1'>
            <a type="button" class='btn btn-success' id="btn_save">
                <span class='glyphicon glyphicon-arrow-down' style='padding-right:5px;'></span>{% trans '添加' %}
            </a>
        </div>
    </div>

</form>

<div class='x_panel' style="margin-top:20px;">
    <div class="table-responsive">
        <table id='tb_award' class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0"
            width="100%">
            <thead>
                <tr>
                    <th>{% trans '战区 ' %}</th>
                    <th>{% trans '分区 ' %}</th>
                    <th>{% trans '上限数量' %}</th>
                    <th>{% trans '开始时间' %}</th>
                    <th>{% trans '结束时间' %}</th>
                    <th>{% trans '操作' %}</th>

                </tr>
            </thead>
            <tbody>

                {% for c in list %}
                <tr>
                    <td>{{c.saldivision}}</td>
                    <td>{{c.subdivision}}</td>
                    <td>{{c.qty}}</td>
                    <td>{{c.dt_fr}}</td>
                    <td>{{c.dt_to}}</td>
                    <td><a class="btn btn-sm btn-default" data-toggle="modal" data-target="#modal_edit"
                            data-id="{{c.id}}" data-saldivision="{{c.saldivision}}" data-subdivision="{{c.subdivision}}"
                            data-qty="{{c.qty}}" data-dt_fr="{{c.dt_fr}}" data-dt_to="{{c.dt_to}}"
                            data-saldivision_id="{{c.saldivision_id}}" data-subdivision_id="{{c.subdivision_id}}">修改</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>




<div class="modal fade" tabindex="-1" role="dialog" id="modal_edit">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                        aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">区域修改</h4>
            </div>
            <div class="modal-body">
                <form role="form" method='POST' enctype="multipart/form-data" class="form-horizontal" id="form2">
                    {% csrf_token %}
                    <div class="form-group" style="display:none">
                        <label for="inputSaldivision2" class="col-sm-2 control-label">战区</label>
                        <div class="col-sm-10">
                            <input id="inputSaldivision2" type="text" class="form-control" />
                            <input type="hidden" id="inputSaldivision2_id" name="saldivision_id">
                        </div>
                    </div>
                    <div class="form-group" style="display:none">
                        <label for="inputSubdivision2" class="col-sm-2 control-label">分区</label>
                        <div class="col-sm-10">
                            <input id="inputSubdivision2" type="text" class="form-control" />
                            <input type="hidden" id="inputSubdivision2_id" name="subdivision_id">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="inputQry2" class="col-sm-2 control-label">上线数量</label>
                        <div class="col-sm-10">
                            <input id="inputQry2" type="number" class="form-control" name="qty" />
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="inputQry2" class="col-sm-2 control-label">开始时间</label>
                        <div class="col-sm-10">
                            <input id="inputStartTm2" type="text" class="datetimepicker form-control" name="dt_fr">
                        </div>
                    </div>



                    <div class="form-group">
                        <label for="inputQry2" class="col-sm-2 control-label">结束时间</label>
                        <div class="col-sm-10">
                            <input id="inputEndTm2" type="text" class="datetimepicker form-control" name="dt_to">
                        </div>
                    </div>


                    <input type="hidden" name="id" id="inputId">

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="btn_save2">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->