<%inherit file="base.html"/>

<%def name="head()">
<script src="/static/js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" href="/static/js/datepicker.css"> 
<script>
    $(document).ready(function(){
        $("#query_begin_time").datepicker();
        $("#query_end_time").datepicker();
    });

    function active_card(card_id)
    {
        $.get("/card/active?card_id="+card_id, {}, function (data) {
            alert(data.msg);
            window.location.reload();
        },"json");
    }
    function recycle_card(card_id)
    {
        if(!confirm("充值卡回收后不可再激活使用，确认回收吗？")){
            return false;
        }
        $.get("/card/recycle?card_id="+card_id, {}, function (data) {
            alert(data.msg);
            window.location.reload();
        },"json");
    }
    
    function do_submit(){
        $("#query_form").attr("action", "/card/list");
        $("#query_form").submit();
    }
    function do_export(){
        $("#query_form").attr("action", "/card/export");
        $("#query_form").submit();
        setTimeout(function(){$("#query_form").attr("action", "/card/list");}, 0);
    }

</script>
</%def>

<%def name="body()">
<div class="panel panel-default">
    <div class="panel-heading"><span class="glyphicon glyphicon-th"></span> 充值卡管理</div>
        <div class="panel-body">
            <div class="container">

                <form id="query_form" class="form-horizontal form-well" role="form" action="/card/list" method="post">

                    <div class="form-group">
                        <label for="product_id" class="col-md-2 control-label">资费</label>
                        <div class="col-md-3">
                            <select id="product_id" name="product_id" class="form-control" >
                            <option value=""></option>
                                % for product in products:
                                  <option value="${product.id}"  ${str(product.id)==product_id and "selected" or ""}>${product.product_name}</option>
                                % endfor
                            </select>
                        </div>  
                        <label for="card_type" class="col-md-2 control-label">充值卡类型</label>
                        <div class="col-md-3">
                            <select id="card_type" name="card_type" class="form-control" >
                            <option value=""></option>
                            <option value="0"  ${"0"==card_type and "selected" or ""}>资费套餐卡</option>
                            <option value="1"  ${"1"==card_type and "selected" or ""}>普通余额卡</option>
                            </select>
                        </div>  
                    </div>    
                    <div class="form-group">
                        <label for="batch_no" class="col-md-2 control-label">批次</label>

                        <div class="col-md-3">
                            <input type="text" id="batch_no" name="batch_no" value="${batch_no or ''}" class="form-control form_datetime"  >
                        </div>
                         <label for="card_status" class="col-md-2 control-label">卡状态</label>
                        <div class="col-md-3">
                            <select id="card_status" name="card_status" class="form-control" >
                            <option value=""></option>
                            <option value="0"  ${"0"==card_status and "selected" or ""}>未激活</option>
                            <option value="1"  ${"1"==card_status and "selected" or ""}>已激活</option>
                            <option value="2"  ${"2"==card_status and "selected" or ""}>已使用</option>
                            <option value="3"  ${"3"==card_status and "selected" or ""}>已回收</option>
                            </select>
                        </div>
                    </div>          
                    <div class="form-group">
                        <label for="query_begin_time" class="col-md-2 control-label">创建开始时间</label>

                        <div class="col-md-3">
                            <input type="text" id="query_begin_time" name="query_begin_time" value="${query_begin_time or ''}" class="form-control form_datetime"  >
                        </div>
                         <label for="query_end_time" class="col-md-2 control-label">创建结束时间</label>
                        <div class="col-md-3">
                            <input type="text" id="query_end_time" name="query_end_time" value="${query_end_time or ''}"  class="form-control form_datetime">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-md-offset-4 col-md-7">
                            <button type="button" onclick="do_submit();" class="btn btn-primary">查询</button>
                            % if permit.match('/card/export'):
                            <button type="button" onclick="do_export();" class="btn btn-default">导出数据</button>
                            % endif
                            % if permit.match('/card/create'):
                             <a href="/card/create" class="btn btn-default">充值卡生成</a>
                            % endif
                        </div>
                    </div>
                </form>


                <table class="table table-hover">
                    <thead>
                        <tr>
                            <th>类型</th>
                            <th>批次</th>
                            <th>卡号</th>
                            <!-- <th>资费套餐</th> -->
                            <th>面值/售价</th>
                            <th>时间(月)</th>
                            <th>时长(小时)</th>
                            <th>流量(MB)</th>
                            <th>过期</th>
                            <th>状态</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        % for card in page_data.result:
                            <tr ${colors[card.card_status]}>
                                <td>${card_types[card.card_type]}</td>
                                <td>${card.batch_no}</td>
                                <td>${card.card_number}</td>
                                <!-- <td>${get_product_name(card.product_id) or ''}</td> -->
                                <td>${fen2yuan(card.fee_value)}</td>
                                <td>${card.months or 'N/A'}</td>
                                <td>${card.times and sec2hour(card.times) or 'N/A'}</td>
                                <td>${card.flows and kb2mb(card.flows) or 'N/A'}</td>
                                <td>${card.expire_date}</td>
                                <td>${card_states[card.card_status]}</td>
                                <td>${card.create_time[:10]}</td>
                                <td>
                                     % if permit.match('/card/active') and card.card_status == 0:
                                    <a href="javascript:active_card('${card.id}')" class="opt-btn btn-default">激活</a>
                                     % endif
                                     % if permit.match('/card/recycle') and card.card_status == 0:
                                     <a href="javascript:recycle_card('${card.id}')" class="opt-btn btn-default">回收</a>
                                     % endif
                                </td>
                            </tr>
                        % endfor
                    </tbody>
                </table>
                ${page_data.render(form_id="query_form")}
            </div>
        </div>
    </div>
</%def>