<!DOCTYPE html>
<html lang="en">
<style type="text/css">
    div.scrollmenu {
        width: 100vw;
        /*position: fixed;*/
        /*overflow-y: scroll;*/
    }
    body{
        /*height: 100%;*/
    }
    .meteorological{
        width: 100vw;
        height: 10vh;
        background-color: #46BE8A;
        text-align: center;
        vertical-align: middle;
    }
    .meteorological-label{
        font-size: 5vh;
        color: white;
    }
    .btn-size{
        width: 48vw;
        height: 25vh;
    }
    .btn-width{
        width: 48vw;
    }
    .label-size-large{
        width: 50%;
        font-size:4vh;
        color: white;
    }
    .label-size-small{
        color: white;
        margin-top: -8px;
    }
</style>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="user-scalable=0; initial-scale=1.0; width=device-width; maximum-scale=1.0;">
    <!--   <meta content="IE=edge" http-equiv="X-UA-Compatible"> -->
    <link href="ico/favicon.ico" rel="shortcut icon">
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="<?php echo e(asset('front/css/bootstrap.css')); ?>">

    <!-- Custom styles for this template -->
    <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('assets/global/plugins/font-awesome/css/font-awesome.min.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>
    <!-- /.box-header -->
    <!-- <div class="box-body"> -->
        <!-- /.box-body -->
        <!-- <div class="row">
            <div class="col-md-12">
                <img src="https://i.imgur.com/hmkX7Ub.png">
            </div>
        </div>
    </div> -->
    <!-- /.box-body -->
    <div class="scrollmenu" style="margin-top: 1vh;">
        <table>
            <tr>
                <td colspan="2">
                    <!-- <div class="meteorological">
                        <label class="meteorological-label">氣象預留空間 UID=<?php echo e($user_id); ?></label>
                    </div> -->
                </td>
            </tr>
            <tr style="height: 10px;"></tr>
            <tr style="margin-bottom: 5px;">
                <td>
                    <button class="btn btn-size btn-news" type="button" style="background-color: #48B0F7;">
                        <label class="label-size-large"><?php echo e($new_count); ?></label>
                        <label class="label-size-large">未　讀</label>
                        <br>
                        <label class="label-size-large"><i class="fa fa-bullhorn fa-2x"></i></label>
                        <label class="label-size-large">公　告</label>
                    </button>
                    <div class="btn btn-width label-size-small btn-news" style="text-align: right;background-color: #419EDE;">
                        更多資訊<i class="fa fa-arrow-right"></i>
                    </div>
                </td>
                <td style="text-align: right;">
                    <button class="btn btn-size btn-mail" type="button" style="background-color: #46BE8A;">
                        <label class="label-size-large"><?php echo e($mail_count); ?></label>
                        <label class="label-size-large">未　取</label>
                        <br>
                        <label class="label-size-large"><i class="fa fa-envelope fa-2x"></i></label>
                        <label class="label-size-large">信　件</label>
                    </button>
                    <div class="btn btn-width label-size-small btn-mail" style="text-align: right;background-color: #3FAB7C;">
                        更多資訊<i class="fa fa-arrow-right"></i>
                    </div>
                </td>
            </tr>
            <tr style="height: 10px;"></tr>
            <tr>
                <td>
                    <button class="btn btn-size btn-guest" type="button" style="background-color: #926DDE;">
                        <label class="label-size-large"><?php echo e($guest_count); ?></label>
                        <label class="label-size-large">未　離</label>
                        <br>
                        <label class="label-size-large"><i class="fa fa-user fa-2x"></i></label>
                        <label class="label-size-large">訪　客</label>
                    </button>
                    <div class="btn btn-width label-size-small btn-guest" style="text-align: right;background-color: #8362C7;">
                        更多資訊<i class="fa fa-arrow-right"></i>
                    </div>
                </td>
                <td style="text-align: right;">
                    <button class="btn btn-size btn-keeper" type="button" style="background-color: #F96868;">
                        <label class="label-size-large"><?php echo e($keeper_count); ?></label>
                        <label class="label-size-large">未　取</label>
                        <br>
                        <label class="label-size-large"><i class="fa fa-inbox fa-2x"></i></label>
                        <label class="label-size-large">寄　物</label>
                    </button>
                    <div class="btn btn-width label-size-small btn-keeper" style="text-align: right;background-color: #E05D5D;">
                        更多資訊<i class="fa fa-arrow-right"></i>
                    </div>
                </td>
            </tr>
            <?php if(isset($temp->temperature) && $temp->temperature != ''): ?>
            <tr style="height: 10px;"></tr>
            <tr>
                <td colspan="2">
                    <span class="btn btn-size" style="background-color: #F4D03F;height: 25vh;width: 100vw;">
                        <table>
                            <tr>
                                <td style="width: 50vw;text-align: left;">
                                    <label style="font-size:4vh;color: white;">
                                        <i class="fa fa-thermometer-half fa-2x"></i>溫度 <?php echo e($temp->temperature); ?> ℃
                                    </label><br>
                                    <label style="font-size:4vh;color: white;">
                                        <i class="fa fa-tint fa-2x"></i>濕度 <?php echo e($temp->humidity); ?> ％
                                    </label>
                                </td>
                                <td style="width: 50vw;">
                                    <table style="width: 100%;">
                                        <tr>
                                            <td style="text-align: left;">
                                                <label style="font-size:3.5vh;color: white;margin-left: 2vw;">
                                                    PM2.5 
                                                </label>
                                            </td>
                                            <td style="text-align: right;">
                                                <label style="font-size:3.5vh;color: white;">
                                                    <?php echo e($temp->pm25); ?> µg/m³
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: left;">
                                                <label style="font-size:3.5vh;color: white;margin-left: 2vw;">
                                                    亮度值 
                                                </label>
                                            </td>
                                            <td style="text-align: right;">
                                                <label style="font-size:3.5vh;color: white;">
                                                    <?php echo e($temp->lightDimmingValue); ?> %
                                                </label>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="text-align: left;">
                                                <label style="font-size:4vh;color: white;margin-left: 2vw;">
                                                    雨量計 
                                                </label>
                                            </td>
                                            <td style="text-align: right;">
                                                <label style="font-size:3.5vh;color: white;">
                                                    <?php echo e($temp->rainfallMeter); ?> mm/h
                                                </label>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                    
                                </td>
                            </tr>
                        </table>
                    </span>
                </td>
            </tr>
            <?php endif; ?>
            <tr style="height: 10px;"></tr>
            <tr>
                <td colspan="2">
                    <!-- <button class="btn btn-warning" style="width: 100vw;" type="button" >緊急公告 預留空間</button> -->
                </td>
            </tr>
        </table>
        <div style="width: 100vw;text-align: center;">
            <!-- <label style="color: gray;height: 50vh;">家庭留言 預留</label> -->
        </div>
    </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(){
            $(document).on('click','.btn-news',function(){
                window.location.href = "<?php echo e($url); ?>" + "getNewsData&uid=" + "<?php echo e($user_id); ?>";
            });
            $(document).on('click','.btn-mail',function(){
                window.location.href = "<?php echo e($url); ?>" + "getMailData&uid=" + "<?php echo e($user_id); ?>";
            });
            $(document).on('click','.btn-guest',function(){
                window.location.href = "<?php echo e($url); ?>" + "getGuestData&uid=" + "<?php echo e($user_id); ?>";
            });
            $(document).on('click','.btn-keeper',function(){
                window.location.href = "<?php echo e($url); ?>" + "getKeeperData&uid=" + "<?php echo e($user_id); ?>";
            });
        });
    </script>
</body>

</html>
