<!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: 20vh;
    }
    .btn-width{
        width: 48vw;
    }
    .label-size-large{
        width: 50%;
        font-size:4vh;
        color: white;
    }
    .label-size-small{
        color: white;
        margin-top: -8px;
    }
    .btn-full-image{
        width: 50vw;
        height: 35vh;
        background-size: 100% 100%;
        margin-left: 1vw;
        background-repeat:no-repeat;
        border: 0px #AAA solid;
    }
    .text-info{
        font-size: 4rem;
    }
    .btn-primary{
        width: 48.5vw;
        height: 10vh;
    }
</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')); ?>"/>
    <link rel="stylesheet" href="<?php echo e(asset('assets/global/plugins/bootstrap/css/bootstrap.min.css')); ?>">
    
</head>
<body>
    <div class="scrollmenu" style="margin-top: 1vh;">
        <table style="width: 100vw;text-align: center;">
            <tr>
                <td>
                    <div class="text-info">情 境 控 制</div>
                </td>
            </tr>
            <tr>
                <a id="btn_back" class="btn btn-success">返回</a>
            </tr>
            <tr style="height: 5vh;"></tr>
            <tr>
                <td>
                    <div class="btn-group" data-toggle="buttons">
                        <label id="label_1" class="btn btn-primary" style="margin-bottom: 3vh;font-size: 2.5rem;">
                            返家模式<input type="radio" class="options" name="options" value="1"> 
                        </label>
                        <label id="label_2" class="btn btn-primary" style="margin-left: 1vw;margin-bottom: 3vh;font-size: 2.5rem;">
                            外出模式<input type="radio" class="options" name="options" value="2"> 
                        </label><br>
                        <label id="label_3" class="btn btn-primary" style="margin-bottom: 3vh;font-size: 2.5rem;">
                            睡眠模式<input type="radio" class="options" name="options" value="3"> 
                        </label>
                        <label id="label_4" class="btn btn-primary" style="margin-left: 1vw;margin-bottom: 3vh;font-size: 2.5rem;">
                            用餐模式<input type="radio" class="options" name="options" value="4"> 
                        </label><br>
                        <label id="label_5" class="btn btn-primary" style="margin-bottom: 3vh;font-size: 2.5rem;">
                            劇場模式<input type="radio" class="options" name="options" value="5"> 
                        </label><br>
                        <label id="label_6" class="btn btn-primary" style="margin-left: 1vw;margin-bottom: 3vh;font-size: 2.5rem;">
                            自訂模式<input type="radio" class="options" name="options" value="6"> 
                        </label>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <form id="form_back" action="<?php echo e($back_url); ?>" method="post"></form>

    <div class="modal" id="modal_popup" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-sm" style="margin-top: 35vh;">
            <div class="modal-content">
                <div class="modal-header" style="background-color: #44b6ae;border: 0px;">
                    <button type="button" data-dismiss="modal" style="float: right;background-repeat: no-repeat !important;    background: 0px 0px;color:white;border:0px;"><i class="fa fa-times fa-2x"></i></button>
                    <h4 class="modal-title" style="color:#fff;text-align: center;">情境設定成功</h4>
                </div> 
            </div>
        </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 src="<?php echo e(asset('assets/global/plugins/jquery.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/plugins/bootstrap/js/bootstrap.min.js')); ?>" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(document).on('change','.options',function(){
                $('.options').removeClass('active');
                $(this).addClass('active');
                $.ajax({
                    type : 'GET',
                    url  : "<?php echo e($url); ?>" + "setSituation&uid=" + "<?php echo e($user_id); ?>" + "&mode_value=" + $("input[name=options]:checked").val(),
                    success : function(sendback){
                        $('#modal_popup').modal('show');
                    }
                });
            });

            $(document).on('click','#btn_back',function(){
                var form = $('#form_back');
                form[0].submit();
            });
        });
    </script>
</body>

</html>