<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    div.scrollmenu {
        width: 98vw;
    }
    .title-label{
        font-size: 20px;
        width: 25vw;
        position:absolute;
        left: 50%;
        margin-left: -12.5vw;
        text-align: center;
    }
    div.dataTables_paginate {
        float: right;
        margin-right: 2vw;
    }
    div.dataTables_info {
        float: left;
        margin-left: 5vw;
    }
    .modal-dialog {
        top: 15%;
    }
    td {
        font-size: 3vh;
    }
</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>
    <div class="row scrollmenu" style="margin-top: 5px;">
        <table class="table table-striped table-bordered table-hover" id="table_member" style="margin-left: 20px;">
            <thead>
                <tr class="info">
                    <th style="display: none;">
                        編號
                    </th>
                    <th>
                        代號
                    </th>
                    <th>
                        姓名
                    </th>
                    <th>
                        狀態
                    </th>
                    <!-- 隱藏 -->
                    <th style="display: none;">
                        姓名
                    </th>
                    <th style="display: none;">
                        帳號
                    </th>
                    <th style="display: none;">
                        生日
                    </th>
                    <th style="display: none;">
                        電話
                    </th>
                    <th style="display: none;">
                        手機
                    </th>
                    <th style="display: none;">
                        Email
                    </th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($user as $one): ?>
                <tr>
                    <td style="display: none;">
                        <?php echo e($one->id); ?>

                    </td>
                    <td>
                        <?php echo e($one->groupid); ?>

                    </td>
                    <td>
                        <?php echo e($one->name .'('.$one->username . ')'); ?>

                    </td>
                    <td>
                        <?php if($one->status == 0): ?>
                        <label class="label label-sm label-warning">未啟用</label>
                        <?php elseif($one->status == 1): ?>
                        <label class="label label-sm label-success">正常</label>
                        <?php endif; ?>
                    </td>
                    <!-- 隱藏資料 -->
                    <td style="display: none;">
                        <?php echo e($one->name); ?>

                    </td>
                    <td style="display: none;">
                        <?php echo e($one->username); ?>

                    </td>
                    <td style="display: none;">
                        <?php echo e($one->birthday); ?>

                    </td>
                    <td style="display: none;">
                        <?php echo e($one->tel); ?>

                    </td>
                    <td style="display: none;">
                        <?php echo e($one->mobile); ?>

                    </td>
                    <td style="display: none;">
                        <?php echo e($one->email); ?>

                    </td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    </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">
                            <table style="width: 100%;" border="1">
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>姓名</td>
                                    <td id="user_data1" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>帳號</td>
                                    <td id="user_data2" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>生日</td>
                                    <td id="user_data3" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>電話</td>
                                    <td id="user_data4" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>手機</td>
                                    <td id="user_data5" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                                <tr>
                                    <td style="background-color:#ACD6FF;width:25vw;" nowrap>Email</td>
                                    <td id="user_data6" style="background-color:#ECF5FF;width:75vw;"></td>
                                </tr>
                            </table>
                        </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 = $('#table_member');
            var oTable = table.dataTable({
                // Internationalisation. For more info refer to http://datatables.net/manual/i18n
                "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",
            });

            $('#table_member tbody').on('click', 'tr', function(){
                var data = $('#table_member').DataTable().row( this ).data();
                $('#user_data1').text(data[4]);
                $('#user_data2').text(data[5]);
                $('#user_data3').text(data[6]);
                $('#user_data4').text(data[7]);
                $('#user_data5').text(data[8]);
                $('#user_data6').text(data[9]);
                $('#modal_info').modal('show');
            });
        });
    </script>
</body>
</html>