@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="btnExport"><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="submitDateStart">提交時間範圍(起)</label>
                                    <input type="text" class="form-control input-sm" id="submitDateStart"
                                           maxlength="10">
                                </div>
                                <!-- 提交時間範圍 to -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="submitDateFinal">提交時間範圍(迄)</label>
                                    <input type="text" class="form-control input-sm" id="submitDateFinal"
                                           maxlength="10">
                                </div>
                                <!-- 活動名稱 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="name">活動名稱</label>
                                    <select class="form-control input-sm" id="event_id">
                                        <option value="">請選擇</option>
                                        @foreach($events as $data)
                                            <option value="{{ $data['id'] }}">{{ $data['name'] }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <!-- 獎別 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="name">獎別</label>
                                    <select class="form-control input-sm" id="item_id">
                                        <option value="">請選擇</option>
                                    </select>
                                </div>
                                <!-- 申請人搜尋 -->
                                <div class="form-group col-xs-12 col-sm-6 col-lg-6">
                                    <label for="name">申請人搜尋</label>
                                    <input type="text" class="form-control input-sm" id="searchcol" maxlength="128">
                                </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="duplicate">
                                        @foreach($duplicate as $k => $data)
                                            <option value="{{ $k }}">{{ $data }}</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>戶籍地址</th>
                                    <th>通訊地址</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": "submitManagement/grid",
                "paging": true,
                "ordering": true,
                "info": true,
                "order": [[1, "desc"]],
                "stateSave": true,
                "pagingType": "full",
                "bFilter": true,
                "aoColumnDefs": [{
                    'bSortable': false,
                    'aTargets': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] //不想參加排序的欄位，可指定多個，逗號分隔
                }]
            });
            // 從網址參觸發搜尋
            custom_search();
            $('#GridView1_filter').hide();

            $("#event_id").change(function () {
                $('#item_id')
                    .find('option')
                    .remove()
                    .end()
                ;
                $.ajax({
                    url: 'submitManagement/getItems/' + this.value,
                    method: 'GET',
                    dataType: 'JSON',
                    success: function (response) {
                        for (let i = 0; i < response.length; i++) {
                            $("#item_id").append(new Option(response[i]['name'], response[i]['id']));
                        }
                    },
                    error: function () {
                    }
                });
            });
        });

        //客製化搜尋欄位
        function custom_search() {
            $('#GridView1').DataTable()
                .column(1).search($('#submitDateStart').val() + "\n" + $('#submitDateFinal').val())
                .column(2).search($('#item_id').val())
                .column(3).search($('#searchcol').val())
                .column(4).search($('#duplicate').val())
            ;
            $('#GridView1').dataTable().fnDraw(true);
        }

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

        // 匯出
        $("#btnExport").click(function () {
            var param =
                $('#submitDateStart').val() + "|" +
                $('#submitDateFinal').val() + "|" +
                $('#item_id').val() + "|" +
                $('#searchcol').val() + "|" +
                $('#duplicate').val()
            ;
            location.href = 'submitManagement/getZip/' + param;
            return false;
        });

    </script>
@endsection