<?php $sentinel = app('Cartalyst\Sentinel\Native\Facades\Sentinel'); ?>
<!DOCTYPE html>
<html>

<head>
    <!-- Standard Meta -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

    <!-- Site Properities -->
    <?php /* <title><?php echo app('translator')->get('messages.pub_manage_sys'); ?> - <?php echo app('translator')->get('messages.faster_order'); ?></title> */ ?>

    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/meal/dist/semantic.css')); ?>">
    <script src="<?php echo e(asset('assets/meal/dist/jquery.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/meal/dist/semantic.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/meal/dist/jquery.print.js')); ?>"></script>
    <script src="<?php echo e(asset('assets/global/plugins/jquery-ui/jquery-ui.min.js')); ?>" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/datatables/plugins/bootstrap/dataTables.bootstrap.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-datepicker/css/bootstrap-datepicker3.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-fileinput/bootstrap-fileinput.css')); ?>" />
    <link rel="stylesheet" type="text/css" href="<?php echo e(asset('assets/global/plugins/select2/css/select2.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/select2/css/select2-bootstrap.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-select/1.12.2/bootstrap-select.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-select/bootstrap-select.min.css')); ?>" />
    <link rel="stylesheet" type="text/css"
        href="<?php echo e(asset('assets/global/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css')); ?>" />
    <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">
        body {
            font-size: 110% !important;
        }

        .table {
            border-collapse: collapse;
            width: 100%;
        }

        .table,
        .th,
        .td {
            border: 1px solid #e7ecf1;
            padding: 8px;
            text-align: center;
            line-height: 1.42857;
        }

        .flash-button {
            animation-duration: 0.5s;
            animation-name: blink;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
        }

        .label-info {
            background-color: #659be0;
        }

        .label-btn {
            text-transform: uppercase;
            padding: 2px 6px 4px 6px;
            margin-right: 3.5px;
            font-size: 16px;
            font-weight: 600;
            line-height: 1;
            white-space: nowrap;
            text-align: center;
            display: inline;
            border-radius: .25em;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.18);
            vertical-align: baseline;
            color: #fff;
            font-family: "Open Sans", sans-serif, Microsoft JhengHei;
            text-shadow: none !important;
        }

        @keyframes  blink {
            from {}

            to {
                background-color: red;
            }
        }

        .gradient1 {
            background: linear-gradient(to right, rgb(0, 99, 248), rgb(0, 217, 255));
            height: 200px;
        }

        .gradient2 {
            background: linear-gradient(to right, #2d4c79, rgba(147, 206, 255, 0.875));
            text-align: center;
        }

        thead {
            background: linear-gradient(to right, #ffc400, rgb(218, 200, 83));
            color: white;
        }

        .item>img {
            min-width: 100% !important;
        }
    </style>

</head>

<body>
    <div class="ui grid stackable padded">
        <div class="eleven wide column gradient1">
            <b style="font-size:47pt;color:white;">歡迎光臨</b>
            <br>
            <b id = "number" style="font-size:25pt;color:white;">【編碼】</b>
            <b id = "customer" style="font-size:25pt;color:white;">【顧客】</b>
            <b id = "buypoint" style="font-size:25pt;color:white;" value = "0">【購買點數】</b>
            <b id = "point" style="font-size:25pt;color:white;" value = "0">【贈送點數】</b>
            <b id = "store_value" style="font-size:25pt;color:white;" value = "0">【儲值】</b>
        </div>
        <div class="five wide column" style="background-color:#b4effc;height: 200px;">
            <div id = 'point_type' style="font-size:24pt;">扣點方式：</div>
            <div id = 'subtotal' style="font-size:24pt;">小計：0點</div>
            <div id = 'fee' style="font-size:24pt;">收您：0點</div>
            <div id = 'remain' style="font-size:24pt;">剩餘：0點</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-body">
            <div class="ui grid stackable padded">
                <div class="eleven wide column">
                    <!-- 輪播 -->
                    <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">
                        <!-- 轮播 ( carousel) 指标 -->
                        <ol class="carousel-indicators">
                            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                            <li data-target="#myCarousel" data-slide-to="1"></li>
                        </ol>   
                        <!-- 轮播 ( carousel ) 项目 -->
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner" role="listbox">
                            <div class="item active">
                                <img src = "<?php echo e($dataArray['img1']); ?>" style = "margin:auto;">
                            </div>
                            <div class="item">
                                <img src = "<?php echo e($dataArray['img2']); ?>" style = "margin:auto">
                            </div>
                        </div>
                    </div>
                    <!-- 輪播END -->
                </div>
                <div class="five wide column">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover" id="table_list">
                            <thead>
                                <tr>
                                    <th style="font-size:14pt;padding:0.4em">序</th>
                                    <th style="font-size:14pt;padding:0.4em">品名</th>
                                    <th style="font-size:14pt;padding:0.4em">數量</th>
                                    <th style="font-size:14pt;padding:0.4em">金額</th>
                                </tr>
                            </thead>
                            <tbody>                                
                            </tbody>
                            <tfoot>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <div class="row">
        <div class="column gradient2" style="position:fixed; bottom:0px; left:0px; width:100%; color:white">
            <b>COPYRIGHT 2013©ALL RIGHTS RESERVER DESIGN BY ZDN</b>
        </div>
    </div>
    <!-- 底部 -->

    </div>
    <script type="text/javascript">
        //============================================================+
        // jQuery onReady
        //============================================================+
        $(document).ready(function() {
            var name = '<?php echo e($sentinel::check()->id); ?>';
            console.log(name)
            connect()

            function connect() {
                ws = new WebSocket("ws://<?php echo e(env('WS_HOST','www.nsst.tw')); ?>:<?php echo e(env('WS_PORT','7272')); ?>");

                // 当socket连接打开时，输入用户名
                ws.onopen = onopen;
                // 当有消息时根据消息类型显示不同信息
                ws.onmessage = onmessage;
                ws.onclose = function() {
                    console.log("關閉連線，等待重新嘗試");
                    connect();
                };
                ws.onerror = function() {
                    console.log("出現錯誤");
                };
            }

            // Send Login Message on connected.
            function onopen() {
                // Login
                var login_data = '{"type":"login","client_uid":"' + name +
                '","com_id":"<?php echo e(env('DB_DATABASE')); ?>"}';
                // Edwina修改DEBUG用
                console.log("WebSocket shakehand success:" + login_data+"order_pos.blade的onopen()");
                ws.send(login_data);
            }
            var temp_point_type = '';
            // 服务端发来消息时
            function onmessage(e) {
                var data = eval("(" + e.data + ")");
                console.log(data['type']);
                switch (data['type']) {
                    // 服务端ping客户端
                    case 'ping':

                        ws.send('{"type":"pong"}');
                        console.log( 'ping'+ws.send('{"type":"pong"}'));

                        break;;
                    case 'system':
                        // toastr[data['level']](data['content']);
                        break;
                    case 'action':
                        break;
                    case 'order':
                        socketAction(data['action'], data['dp_id'], data['user_id'], data['sid']);
                        break;
                    case 'user':
                        var url = location.href;
                        if(url.indexOf('?')!=-1){
                            var id = url.split('?')[1].split('=')[1];
                        }                        
                        if(data['dp_id'] == id){
                            if(data['name'] != 0){
                                document.getElementById("number").innerHTML = "【編碼】"+data['user_id'];
                                document.getElementById("customer").innerHTML = "【顧客】"+data['name'];
                                document.getElementById("buypoint").innerHTML = "【購買點數】"+data['buypoint'];
                                document.getElementById("point").innerHTML = "【贈送點數】"+data['point'];
                                document.getElementById("point_type").innerHTML = "扣點方式：";
                                document.getElementById("fee").innerHTML = "收您：0點";
                                document.getElementById("remain").innerHTML = "剩餘：0點";
                                document.getElementById("subtotal").innerHTML = "小計：0點";
                                $("#table_list tbody").html('');
                                $("#buypoint").val(data['buypoint']);
                                $("#point").val(data['point']);
                            }else{
                                document.getElementById("number").innerHTML = "【編碼】";
                                document.getElementById("customer").innerHTML = "【顧客】";
                                document.getElementById("buypoint").innerHTML = "【購買點數】";
                                document.getElementById("point").innerHTML = "【贈送點數】";
                                document.getElementById("point_type").innerHTML = "扣點方式：";
                                document.getElementById("fee").innerHTML = "收您：0點";
                                document.getElementById("remain").innerHTML = "剩餘：0點";
                                document.getElementById("subtotal").innerHTML = "小計：0點";
                                $("#table_list tbody").html('');
                            }
                        }                        
                        break;
                    case 'checkpoint':
                        var url = location.href;
                        if(url.indexOf('?')!=-1){
                            var id = url.split('?')[1].split('=')[1];
                        }
                        if(data['dp_id'] == id){                            
                            if(data['point_type'] == 'point'){
                                temp_point_type = data['point_type']
                                document.getElementById("point_type").innerHTML = "扣點方式：贈送點數";
                                $("#point_type").val(data['point_type'])
                            }else if(data['point_type'] == 'buy_point'){
                                temp_point_type = data['point_type']
                                document.getElementById("point_type").innerHTML = "扣點方式：購買點數";
                                $("#point_type").val(data['point_type'])
                            }else if(data['point_type'] == 'all_point'){
                                temp_point_type = data['point_type']
                                // Bob的修改
                                document.getElementById("point_type").innerHTML = "扣點方式：不限制";
                                $("#point_type").val(data['point_type'])
                            }else{
                                document.getElementById("fee").innerHTML = "收您："+ $('#subtotal').val() +"點";
                                point_type = $("#point_type").val();                                
                                if(temp_point_type == 'all_point'){                                    
                                    remain = Number($('#point').val()) + Number($('#buypoint').val()) - Number($('#subtotal').val());                                    
                                    console.log('all_point'+remain);
                                }else{

                                    switch (point_type) {
                                        case "buy_point":
                                            point_type = 'buypoint';
                                            break;
                                        case "point":
                                            point_type = 'point';
                                            break;
                                        default:
                                            break;
                                    }
                                    console.log("point_type:" + point_type);
                                    console.log("point_type value:" + $('#'+ point_type).val());
                                    console.log("subtotal value:" + $('#subtotal').val());
                                    remain = Number($('#'+ point_type).val()) - Number($('#subtotal').val());
                                    console.log(remain);
                                }
                                
                                
                                document.getElementById("remain").innerHTML = "剩餘："+ remain +"點";
                            }                         
                        }
                        break;
                }
            }

            function socketAction(action, dp_id, user_id, sid) {
                var url = location.href;
                if(url.indexOf('?')!=-1){
                    var id = url.split('?')[1].split('=')[1];
                }
                if(dp_id == id){
                    $.ajax({
                        type: "POST",
                        url: "update_meal_pos",
                        dataType: "json",
                        data: {
                        'type': action,
                        'user_id': user_id,
                        'sid' : sid,
                        '_token' : '<?php echo e(csrf_token()); ?>'
                        },
                        success: function(sendback){
                            $("#table_list tbody").html('');
                            $("#table_list tbody").html(sendback.data.html);
                            document.getElementById("subtotal").innerHTML = "小計："+ sendback.data.point +"點";
                            $("#subtotal").val(sendback.data.point);
                        },
                        error :function(sendback){
                        }
                    });
                }
            }
        })
        var oTimerId;
        function Timeout(){
            clear_user();        
        }
        function ReCalculate(){
            clearTimeout(oTimerId);
            oTimerId = setTimeout('Timeout()', 1 * 60 * 1000);
        }
        ReCalculate()
        function clear_user(){
            document.getElementById("number").innerHTML = "【編碼】";
            document.getElementById("customer").innerHTML = "【顧客】";
            document.getElementById("buypoint").innerHTML = "【購買點數】";
            document.getElementById("point").innerHTML = "【贈送點數】";
            document.getElementById("point_type").innerHTML = "扣點方式：";
            document.getElementById("fee").innerHTML = "收您：0點";
            document.getElementById("remain").innerHTML = "剩餘：0點";
            document.getElementById("subtotal").innerHTML = "小計：0點";
            $("#table_list tbody").html('');
        }
    </script>

</body>
