<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    div.scrollmenu {
        width: 98vw;
    }
    .title-label{
        font-size: 20px;
        width: 27vw;
        position:absolute;
        left: 50%;
        margin-left: -13.5vw;
        text-align: center;
    }
    div.dataTables_paginate {
        float: right;
        margin-right: 2vw;
    }
    div.dataTables_info {
        float: left;
        margin-left: 5vw;
    }

    #gotop {
        position: fixed;
        border-radius: 50px;
        right: 20px;
        bottom: 30px;
        padding: 10px 16px;
        font-size: 25px;
        background: rgba(228, 211, 211, 0.36);
        color: #FAFCFD;
        cursor: pointer;
        z-index: 1000;
    }
</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')); ?>">
    <script type='text/javascript' src="<?php echo e(asset('front/js/jquery.js')); ?>"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
</head>
<body>
    <div style="width: 100vw;">
        <form action="<?php echo e($url); ?>" method="post">
            <div style="padding-top: 1vh;">
                <button type="submit" class="btn btn-info pull-left" style="margin-bottom: 3vh;margin-left: 1vw;">返回總覽</button>
                <label class="title-label" style="">未讀公告</label>
            </div>
        </form>
    </div>
    <div class="row scrollmenu" style="margin-top: 5px;">
        <div id="gotop"><i class="fa fa-arrow-up"></i></div>
        <table class="table table-striped table-bordered table-hover" id="table_news" style="margin-left: 20px;">
            <thead>
                <tr>
                    <th style="width: 68%;">
                        標題
                    </th>
                    <th>
                        發布時間
                    </th>
                </tr>
            </thead>
            <tbody>
                <?php foreach($news as $one): ?>
                <tr>
                    <td>
                        <a style="font-size: 6vw;" href="<?php echo e($data_url . '&newsid=' . $one->id . '&userid=' . $user_id); ?>"><?php echo e($one->title); ?></a>
                    </td>
                    <td>
                        <?php echo e($one->created_at); ?>

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

    <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">
        $(document).ready(function(){
            var table = $('#table_news');
            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": [[1,'desc']],
                "pageLength": 10,
                "searching": false,
                "dom": "Bfrtip",
                "bPaginate": false,
                "info": false,
                "pagingType": "bootstrap_full_number",
            });
        });
        $("#gotop").click(function(){
            jQuery("html,body").animate({
                scrollTop:0
            },1000);
        });
        $(window).scroll(function() {
            if ( $(this).scrollTop() > 300){
                $('#gotop').fadeIn("fast");
            } else {
                $('#gotop').stop().fadeOut("fast");
            }
        });
    </script>
</body>
</html>