<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    .scrollmenu {
        width: 98vw;
    }
    .modal-dialog {
        top: 30%;
    }
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=0; initial-scale=1.0; width=device-width; maximum-scale=1.0;">
    <link href="ico/favicon.ico" rel="shortcut icon">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/bootstrap.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/style.css')); ?>">
    <link rel="stylesheet" href="<?php echo e(asset('front/css/typicons.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('front/css/font-awesome.css')); ?>" />
    <link rel="stylesheet" href="<?php echo e(asset('front/js/tip/tooltipster.css')); ?>">
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
</head>
<body>
    <form action="<?php echo e($url); ?>" style="height: 40px;" method="post">
        <div class="" style="padding-top: 1vh;">
            <button type="submit" class="btn btn-info pull-left" style="margin-left: 1vw;">返回點數管理</button>
        </div>
    </form>
    <div class="scrollmenu" style="margin-top: 1vh;margin-left: 1vw;">
        <ul class="nav nav-tabs">
            <li class="active" style="width: 49vw;text-align: center;"><a data-toggle="tab" href="#menu1">贈送點數</a></li>
            <li class="resize" style="width: 49vw;text-align: center;"><a data-toggle="tab" href="#menu2">購點點數</a></li>
        </ul>
        <div class="tab-content">
            <div id="menu1" class="tab-pane fade in active">
                <table id="point_free" class="table table-striped table-bordered table-hover" style="width: 98vw;margin-top: 1vh;">
                    <thead>
                        <tr class="info">
                            <th style="width: 60%;">
                                 時間
                            </th>
                            <th>
                                 類型
                            </th>
                            <th>
                                 點數
                            </th>
                            <th style="display:none;">
                                備註
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($free_list as $one): ?>
                        <tr class="odd gradeX">
                            <td>
                                <?php echo e($one['created_at']); ?>

                            </td>
                            <?php if($one['type'] == 'income'): ?>
                            <td>
                                <span class="label label-primary">收入</span>
                            </td>
                            <?php else: ?>
                            <td>
                                <span class="label label-info">支出</span>
                            </td>
                            <?php endif; ?>
                            <td>
                                <?php echo e($one['point']); ?>

                            </td>
                            <td style="display:none;">
                                <?php echo $one['memo']; ?>

                            </td>
                        </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
            <div id="menu2" class="tab-pane fade">
                <table id="point_buy" class="table table-striped table-bordered table-hover">
                    <thead>
                        <tr class="info">
                            <th id="th1">
                                時間
                            </th>
                            <th>
                                類型
                            </th>
                            <th>
                                點數
                            </th>
                            <th style="display:none;">
                                備註
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                    <?php foreach($buy_list as $one): ?>
                    <tr class="odd gradeX">
                        <td>
                            <?php echo e($one['created_at']); ?>

                        </td>
                        <?php if($one['type'] == 'income'): ?>
                        <td>
                            <span class="label label-primary">收入</span>
                        </td>
                        <?php else: ?>
                        <td>
                            <span class="label label-info">支出</span>
                        </td>
                        <?php endif; ?>
                        <td>
                            <?php echo e($one['point']); ?>

                        </td>
                        <td style="display:none;">
                            <?php echo $one['memo']; ?>

                        </td>
                    </tr>
                    <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="modal fade draggable-modal" id="modal_info" tabindex="-1" role="basic" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #4c87b9; ">
                    <h4 class="modal-title" style="color: white;">備註</h4>
                </div>
                <div class="modal-body">
                    <div class="form-body">
                        <div class="form-group">
                            <label id="text-info" style="word-break:break-all;"></label>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>

    <script type='text/javascript' src="<?php echo e(asset('front/js/jquery.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/media/js/jquery.dataTables.min.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.js')); ?>"></script>
    <script type="text/javascript" src="<?php echo e(asset('assets/global/plugins/bootstrap/js/bootstrap.min.js')); ?>"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            var table = $('#point_free');
            var oTable = table.dataTable({
                "language": {
                    "aria": {
                        "sortAscending": ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    },
                    "emptyTable": "尚無點數資料",
                    "info": "顯示第 _START_ 到第 _END_ 則 共有 _TOTAL_ 則",
                    "infoEmpty": "",
                    "lengthMenu": "顯示 _MENU_ 則",
                    "zeroRecords": "查無資料",
                },
                "aaSorting": [[0,'desc']],
                "pageLength": 10,
                "searching": false,
                "bPaginate": false,
                "info": false,
                "dom": "Bfrtip",
                "pagingType": "bootstrap_full_number",
            });

            $('#point_free tbody').on('click', 'tr', function(){
                var data = $('#point_free').DataTable().row( this ).data();
                $('#text-info').text(data[3]);
                $('#modal_info').modal('show');
            });

            $('#point_buy tbody').on('click', 'tr', function(){
                var data = $('#point_buy').DataTable().row( this ).data();
                $('#text-info').text(data[3]);
                $('#modal_info').modal('show');
            });
            
            $(document).on('click','.resize',function(){
                var table2 = $('#point_buy');
                var oTable2 = table2.dataTable({
                    "language": {
                        "aria": {
                            "sortAscending": ": activate to sort column ascending",
                            "sortDescending": ": activate to sort column descending"
                        },
                        "emptyTable": "尚無點數資料",
                        "info": "顯示第 _START_ 到第 _END_ 則 共有 _TOTAL_ 則",
                        "infoEmpty": "",
                        "lengthMenu": "顯示 _MENU_ 則",
                        "zeroRecords": "查無資料",
                    },
                    "aaSorting": [[0,'desc']],
                    "pageLength": 10,
                    "searching": false,
                    "bPaginate": false,
                    "info": false,
                    "retrieve": true,
                    "paging": false,
                    "dom": "Bfrtip",
                    "pagingType": "bootstrap_full_number",
                });
                $('#point_buy').css('width','98vw');
                $('#th1').css('width','60%');
            });
        });
    </script>
</body>

</html>
