@extends('admin.master')

@section('content')
    <div class="row">
        <div class="col-lg-12">
            <div class="contentpanel">
                <form id="listForm" method="post">
                    <!-- 功能按鈕(新增/批量處理等等) -->
                    <div class="row" style="margin-bottom: 5px;">
                        <div class="col-lg-12">
                            <ol class="headermenu">
                                <li>
                                    <button class="btn btn-darkblue btn-xs" id="export"><strong>匯出</strong></button>
                                </li>
                                <li>
                                    <button class="btn btn-darkblue btn-xs" id="btnRedeemDone"><strong>發放</strong></button>
                                </li>
                                <li>
                                    <button class="btn btn-darkblue btn-xs" id="btnRedeemFail"><strong>不發放</strong></button>
                                </li>
                            </ol>
                        </div>
                    </div>
                    <!-- 搜尋段 -->
                    <div class="panel panel-default">
                        <div class="panel-heading" data-toggle="collapse" data-target="#search_content">
                            <h3 class="panel-title">登記資料維護</h3>
                        </div>
                        <div id="search_content" class="collapse in">
                            <div class="panel-body">
                                <!-- 交易日期 from -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="tranDateStart">交易日期(起)</label>
                                    <input type="text" class="form-control input-sm" id="tranDateStart"
                                           maxlength="10">
                                </div>
                                <!-- 交易日期 to -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="tranDateFinal">交易日期(迄)</label>
                                    <input type="text" class="form-control input-sm" id="tranDateFinal"
                                           maxlength="10">
                                </div>
                                <!-- 交易行號 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="tranBank">交易行號</label>
                                    <input type="text" class="form-control input-sm" id="tranBank" maxlength="10">
                                </div>
                                <!-- 交易帳號 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="tranAccount">交易帳號</label>
                                    <input type="text" class="form-control input-sm" id="tranAccount" maxlength="30">
                                </div>
                                <!-- 訂單編號 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="tranOrderNo">訂單編號</label>
                                    <input type="text" class="form-control input-sm" id="tranOrderNo" maxlength="30">
                                </div>
                                <!-- 玩家 LINE ID -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="lineId">玩家 LINE ID</label>
                                    <input type="text" class="form-control input-sm" id="lineId" maxlength="64">
                                </div>
                                <!-- 玩家 LINE 姓名 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="lineName">玩家 LINE 姓名</label>
                                    <input type="text" class="form-control input-sm" id="lineName" maxlength="64">
                                </div>
                                <!-- 活動名稱 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="valid">活動名稱</label>
                                    <select class="form-control input-sm" id="activity">
                                        <option value="">全部</option>
                                        @foreach($activity as $data)
                                            <option value="{{ $data['id'] }}">{{ $data['activityName'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- 狀態 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="valid">狀態</label>
                                    <select class="form-control input-sm" id="rStatus">
                                        <option value="">全部</option>
                                        @foreach($rStatus as $k => $data)
                                            <option value="{{ $k }}">{{ $data['back'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- 是否發放 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="valid">是否發放</label>
                                    <select class="form-control input-sm" id="canGet">
                                        <option value="">全部</option>
                                        @foreach($canGet as $k => $v)
                                            <option value="{{ $k }}">{{ $v }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- Search -->
                                <div class="form-group col-xs-12 col-sm-12 col-lg-12">
                                    <a class="btn btn-success btn-xs" onclick="javascript: custom_search();">
                                        <div class="glyphicon glyphicon-search"></div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <hr class="search-hr"/>
                    <!-- 列表段 -->
                    <div class="row">
                        <div class="col-lg-12">
                            <table id="GridView1" class="table table-striped table-bordered" cellspacing="0">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>交易日期</th>
                                    <th>交易行號</th>
                                    <th>交易帳號</th>
                                    <th>訂單編號</th>
                                    <th>玩家 LINE ID</th>
                                    <th>玩家 LINE 姓名</th>
                                    <th>活動名稱</th>
                                    <th>狀態</th>
                                    <th>是否發放</th>
                                    <th>建立時間</th>
                                    <th>修改時間</th>
                                    <th>修改人</th>
                                </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </form>
                <!-- row -->
            </div>
        </div>
    </div>
@endsection

@section('extjs')
    <script>
        $(document).ready(function () {
            var table = $('#GridView1').dataTable({
                "scrollX": true,
                "processing": true,
                "serverSide": true,
                "ajax": "receiptManagement/grid",
                "paging": true,
                "ordering": true,
                "info": true,
                "order": [[0, "desc"]],
                "stateSave": true,
                "pagingType": "full",
                "bFilter": true,
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [] //不想參加排序的欄位，可指定多個，逗號分隔
                }]
            });
            // 從網址參觸發搜尋
            custom_search();
            $('#GridView1_filter').hide();
        });

        //客製化搜尋欄位
        function custom_search() {
            $('#GridView1').DataTable()
                .column(1).search($('#tranDateStart').val() + "\n" + $('#tranDateFinal').val())
                .column(2).search($('#tranBank').val())
                .column(3).search($('#tranAccount').val())
                .column(4).search($('#tranOrderNo').val())
                .column(5).search($('#lineId').val())
                .column(6).search($('#lineName').val())
                .column(7).search($('#activity').val())
                .column(8).search($('#rStatus').val())
                .column(9).search($('#canGet').val())
            ;
            $('#GridView1').dataTable().fnDraw(true);
        }

        // 匯出報告
        $("#export").click(function () {
            //加個讀取中畫面
            $.blockUI({
                css: {
                    border: 'none',
                    padding: '15px',
                    backgactivityColor: '#000',
                    '-webkit-border-radius': '10px',
                    '-moz-border-radius': '10px',
                    opacity: .5,
                    color: '#FFF'
                }
            });
            var http = new XMLHttpRequest();
            http.responseType = 'blob';
            var header;
            var blob;
            var url = 'receiptManagement/export';
            var params =
                ''
                + 'tranDateStart=' + $('#tranDateStart').val()
                + '&tranDateFinal=' + $('#tranDateFinal').val()
                + '&tranBank=' + $('#tranBank').val()
                + '&tranAccount=' + $('#tranAccount').val()
                + '&tranOrderNo=' + $('#tranOrderNo').val()
                + '&lineId=' + $('#lineId').val()
                + '&lineName=' + $('#lineName').val()
                + '&activity=' + $('#activity').val()
                + '&rStatus=' + $('#rStatus').val()
                + '&canGet=' + $('#canGet').val()
            ;
            http.open("POST", url, true);
            http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            http.onreadystatechange = function () {//Call a function when the state changes.
                if (http.readyState == 4 && http.status == 200) {
                    var filename = "";
                    var disposition = http.getResponseHeader('Content-Disposition');
                    if (disposition && disposition.indexOf('attachment') !== -1) {
                        var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                        var matches = filenameRegex.exec(disposition);
                        if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                    }
                    var type = http.getResponseHeader('Content-Type');
                    blob = new Blob([http.response], {type: type, endings: 'native'});
                    var URL = window.URL || window.webkitURL;
                    var downloadUrl = URL.createObjectURL(blob);
                    var a = document.createElement("a");
                    a.href = downloadUrl;
                    a.download = filename;
                    document.body.appendChild(a);
                    a.click();
                }
                //解除鎖定
                $.unblockUI();
            }
            http.send(params);
            return false;
        });

        // 發放
        $("#btnRedeemDone").click(function () {
            var ids = $("input[name^='chk']").map(function (idx, ele) {
                if ($(ele).is(":checked")) {
                    return $(ele).attr('name').replace(/\D/g, '');
                }
            }).get();
            $.ajax({
                url: 'receiptManagement/redeemDone',
                method: 'POST',
                dataType: 'JSON',
                data: {
                    chk: ids
                },
                success: function (response) {
                    alert('執行成功');
                },
                error: function () {
                    alert('執行失敗，請稍後再試');
                }
            });
            $('#GridView1').dataTable().fnDraw(true);
            return false;
        });

        // 不發放
        $("#btnRedeemFail").click(function () {
            var ids = $("input[name^='chk']").map(function (idx, ele) {
                if ($(ele).is(":checked")) {
                    return $(ele).attr('name').replace(/\D/g, '');
                }
            }).get();
            $.ajax({
                url: 'receiptManagement/redeemFail',
                method: 'POST',
                dataType: 'JSON',
                data: {
                    chk: ids
                },
                success: function (response) {
                    alert('執行成功');
                },
                error: function () {
                    alert('執行失敗，請稍後再試');
                }
            });
            $('#GridView1').dataTable().fnDraw(true);
            return false;
        });

        //日期選擇器
        $('#tranDateStart').datepicker({
            dateFormat: 'yy-mm-dd'
        });
        $('#tranDateFinal').datepicker({
            dateFormat: 'yy-mm-dd'
        });

        setInterval(function () {
            $('[data-toggle="popover"]').popover();
        }, 1000);

    </script>
@endsection