<!DOCTYPE html>
<html lang="en">

<style>
.button:hover {
   opacity:0.5;
}
</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')); ?>">
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/bootstrap-toastr/toastr.min.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('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>
    <script src="<?php echo e(asset('assets/global/plugins/jquery.blockui.min.js')); ?>" type="text/javascript"></script>
    <script src="<?php echo e(asset('assets/global/scripts/app.js')); ?>" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />

    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2.css')); ?>"/>
<!-- END PAGE LEVEL PLUGIN STYLES -->
    <link href="<?php echo e(asset('assets/global/css/components-md.css')); ?>" id="style_components" rel="stylesheet" type="text/css"/>
    <!-- Custom styles for this template -->
    <link rel="stylesheet" href="<?php echo e(asset('front/css/typicons.css')); ?>" />
<!-- END THEME STYLES -->
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>"/>
</head>
<body>
<!-- CONTENT -->
    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div class="box-header">
                    <!-- tools box -->
                    <div class="pull-right box-tools">
                    </div>
                    <h3 class="box-title"><i class="fontello-th-large"></i>
                        <span><strong> 瓦斯開關頁面 </strong></span>
                    </h3>
                </div>
                <!-- /.box-header -->
                <div class="box-body">
                    <!-- /.box-body -->
                    <div class="row">
                        <div class="col-md-12">
                        <?php if($status == 0): ?>
                            <p class="text-center status" >狀態:開啟</p>
                        <?php elseif($status == 1): ?>
                            <p class="text-center status" >狀態:關閉</p>
                        <?php endif; ?>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" id="notice_content">
                        <?php if($status == 0): ?>
                            <input type="image" id="btn_img" class="button" style="max-width: 80%;max-height: 80%;outline:none;" src='<?php echo e(asset("assets/images/gas_on.png")); ?>' />
                        <?php elseif($status == 1): ?>
                            <input type="image" id="btn_img" class="button" style="max-width: 80%;max-height: 80%;outline:none;" src='<?php echo e(asset("assets/images/gas_off.png")); ?>' />
                        <?php endif; ?>
                        </div>
                    </div>

                </div>
                <!-- /.box-body -->
            </div>
            <!-- /.box -->
        </div>
    </div>
<!-- #/paper bg -->


    <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>
        var sw = ""+"<?php echo e($status); ?>";
        
        $(document).ready(function(){
            $('.status').css('color','#3ce04a');
            $('.status').css('font-size','16px');

            if(sw==1){
                $('#btn_img').attr('src','<?php echo e(asset("assets/images/gas_off.png")); ?>');
                $('.status').css('color','#b0c1bf');
                $('.status').text("狀態:關閉");
            }else{
                $('#btn_img').attr('src','<?php echo e(asset("assets/images/gas_on.png")); ?>');
                $('.status').css('color','#3ce04a');
                $('.status').text("狀態:開啟");
            }
        });


        $('#notice_content').click(function(){
            //只能關不能開
            if(sw==0){
                App.blockUI({
                    target: '#notice_content',
                    boxed: true,
                    overlayColor: 'none',
                    message: '設定資料',
                    textOnly: true
                });
                $.ajax({
                    type: 'GET',
                    url: '<?php echo e(action("MobileController@Intercom")); ?>',
                    data:{
                        func:"setGasSwitch",
                        user_id:"<?php echo e($user_id); ?>"
                    },
                    success: function(sendback){
                        App.unblockUI('#notice_content');
                        if(sendback.status==1){
                            $('#btn_img').attr('src','<?php echo e(asset("assets/images/gas_off.png")); ?>');
                            $('.status').css('color','#b0c1bf');
                            $('.status').text("狀態:關閉");
                            sw=1;
                        }
                    },
                    error: function(sendback){
                        App.unblockUI('#notice_content');
                    }
                });
            }
        });

</script>
</body>

</html>
