<?php
include($_SERVER['DOCUMENT_ROOT'] . "/Authorization/script/php/permission/check_right.php");
?>
<!doctype html>
<html class="fixed sidebar-left-collapsed">

<head>
    <!-- Basic -->
    <meta charset="UTF-8">
    <title>帳號權限管理系統</title>
    <meta name="keywords" content="HTML5 Admin Template" />
    <meta name="description" content="JSOFT Admin - Responsive HTML5 Template">
    <meta name="author" content="JSOFT.net">
    <!-- Mobile Metas -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <!-- Web Fonts  -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">

    <!-- Vendor CSS -->
    <link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
    <link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />

    <!-- Specific Page Vendor CSS -->
    <link rel="stylesheet" href="assets/vendor/select2/select2.css" />
    <link rel="stylesheet" href="assets/vendor/jquery-datatables-bs3/assets/css/datatables.css" />

    <!-- Theme CSS -->
    <link rel="stylesheet" href="assets/stylesheets/theme.css" />

    <!-- Skin CSS -->
    <link rel="stylesheet" href="assets/stylesheets/skins/default.css" />

    <!-- Theme Custom CSS -->
    <link rel="stylesheet" href="assets/stylesheets/theme-custom.css">

    <!-- Role Custom CSS -->
    <link rel="stylesheet" href="assets/stylesheets/role.css" />

    <!-- Head Libs -->
    <script src="assets/vendor/modernizr/modernizr.js"></script>
    <script src="assets/vendor/jquery/jquery.js"></script>


    <!-- Icon -->
    <link rel="shortcut icon" href="assets/images/favicon.ico" />

    <!-- vue3 -->
    <script src="https://unpkg.com/vue@next"></script>
    <script src="./script/js/global.js"></script>
    <script src="/Common/script/js/user-image.js"></script>
    <style>
        td {
            font-size: 20px;
            color: black;
        }

        select {
            font-size: 12px;
            color: black;
        }

        .right {
            position: absolute;
            right: 8px;
        }
    </style>

    <script type="application/javascript">
        var userName = '<?php echo $_SESSION['name']; ?>';
        var pageHeader = 'LOG日誌';
        var role = '<?php echo ($groupName); ?>';
        var right = <?php echo ($right); ?>;
    </script>
</head>

<body>
    <section class="body">
        <!-- start: header -->
        <header-menu></header-menu>
        <!-- end: header -->
        <div class="inner-wrapper">
            <!-- start: sidebar -->
            <side-bar></side-bar>
            <!-- end: sidebar -->
            <section role="main" class="content-body" id="contentBody">
                <header class="page-header">
                    <h2>{{pageHeader}}</h2>
                </header>
                <!-- <role-block v-for="item in roles" v-bind:tbodyId='item.id' v-bind:title='item.title' v-bind:tableId='item.idd'></role-block> -->

                <section class="panel">
                    <header class="panel-heading">
                        <div class="panel-actions">
                            <a href="#" class="fa fa-caret-down"></a>
                            <a href="#" class="fa fa-times"></a>
                        </div>
                        <h2 id="testID" class="panel-title">設計資料庫匯入日誌</h2>
                    </header>
                    <div class="panel-body">
                        <table class="table table-bordered table-striped mb-none" id="datatable">
                            <thead>
                                <tr>
                                    <th>員工編號</th>
                                    <th>上傳人員</th>
                                    <th>所屬部門</th>
                                    <th>計畫編號</th>
                                    <th>計畫名稱</th>
                                    <th>上傳時間</th>
                                </tr>
                            </thead>
                            <tbody id="table-data">

                            </tbody>
                        </table>
                    </div>
                </section>



        </div>
    </section>

    <script>
        vm.mount('.body');
        getLog();

        function getLog() {
            $.ajax({
                url: "./script/php/API/get_log.php",
                type: "POST",
                dataType: "json"
            }).done(function(result) {

                result.forEach(function(data) {
                    $('#table-data').append(`<tr>
						<td>${data.UserID}</td>
                        <td>${data.UserName}</td>
						<td>${data.DepartmentName}</td>
						<td>${data.project_id}</td>
						<td>${data.project_name}</td>
						<td>${data.upload_time}</td>
					</tr>`);

                });

            }).error(function(error) {
                console.log(error);
            }).complete(function(e) {
                $('#datatable').DataTable({
                    bProcessing: true,
                    responsive: true,
                    "searching": true,
                    "pageLength": 10,
                    "language": {
                        "processing": "處理中...",
                        "loadingRecords": "載入中...",
                        "lengthMenu": "顯示 _MENU_ 項結果",
                        "zeroRecords": "沒有符合的結果或是沒有資料",
                        "info": "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
                        "infoEmpty": "顯示第 0 至 0 項結果，共 0 項",
                        "infoFiltered": "(從 _MAX_ 項結果中過濾)",
                        "infoPostFix": "",
                        "search": "",
                        "paginate": {
                            "first": '<i class="fa fa-step-backward"></i>',
                            "previous": '<i class="fa fa-backward"></i>',
                            "next": '<i class="fa fa-forward"></i>',
                            "last": '<i class="fa fa-step-forward"></i>'
                        },
                        "aria": {
                            "sortAscending": ": 升冪排列",
                            "sortDescending": ": 降冪排列"
                        }
                    },
                });
                $('body .dropdown-toggle').dropdown();
                $("body").on('click', '.groupDropdown', function(e) {
                    let groupName = $(this).text();
                    let groupID = $(this).attr('groupID');
                    let userAccount = $(this).closest("td").attr('id');
                    $(this).closest("td").append(addPermission(groupID, groupName, userAccount));
                })
            });
        }
        $(function() {
            addUserImage(userName.charAt(0), role);

        });
    </script>



    <!-- Vendor -->
    <script src="assets/vendor/jquery-browser-mobile/jquery.browser.mobile.js"></script>
    <script src="assets/vendor/bootstrap/js/bootstrap.js"></script>
    <script src="assets/vendor/nanoscroller/nanoscroller.js"></script>
    <script src="assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
    <script src="assets/vendor/magnific-popup/magnific-popup.js"></script>
    <script src="assets/vendor/jquery-placeholder/jquery.placeholder.js"></script>

    <!-- Specific Page Vendor -->
    <script src="assets/vendor/select2/select2.js"></script>
    <script src="assets/vendor/jquery-datatables/media/js/jquery.dataTables.js"></script>
    <script src="assets/vendor/jquery-datatables/extras/TableTools/js/dataTables.tableTools.min.js"></script>
    <script src="assets/vendor/jquery-datatables-bs3/assets/js/datatables.js"></script>

    <!-- Theme Base, Components and Settings -->
    <script src="assets/javascripts/theme.js"></script>

    <!-- Theme Custom -->
    <script src="assets/javascripts/theme.custom.js"></script>

    <!-- Theme Initialization Files -->
    <script src="assets/javascripts/theme.init.js"></script>


    <!-- Examples -->
    <script src="assets/javascripts/tables/examples.datatables.default.js"></script>
    <script src="assets/javascripts/tables/examples.datatables.row.with.details.js"></script>
    <script src="assets/javascripts/tables/examples.datatables.tabletools.js"></script>

    </section>
</body>

</html>