<div class="row">
 <!-- Column One -->
 <div class="col-lg-10 col-md-10 col-sm-10">

   <!-- Nav tabs -->
   <ul class="nav nav-tabs" role="tablist">
   <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#Completed" role="tab">Completed</a>
     </li>
     <li class="nav-item">
       <a class="nav-link active" data-toggle="tab" href="#tables" role="tab">Tables</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#rooms" role="tab">Rooms</a>
     </li>
     <li class="nav-item">
       <a class="nav-link" data-toggle="tab" href="#orders" role="tab">Orders</a>
     </li>
   </ul>
   <!-- Nav tabs - End -->

   <div class="tab-content" style="max-height:670px; overflow:auto">
     <!--- Panel 0 - Completed Orders -->
     <div class="tab-pane" id="Completed" role="tabpanel">
       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
         <% @complete.each do |sale| %>
         <div class="card sales red text-white" data-id = "<%= sale.sale_id %>">
           <div class="card-block">
              <%= sale.receipt_no %>
             <span style="font-size:12px;float:right;line-height:inherit;"><%= sale.sale_status %></span>
           </div>
         </div>
         <% end %>
       </div>
     </div>

     <!--- Panel 1 - Table Orders -->
     <div class="tab-pane active" id="tables" role="tabpanel">
       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
         <% @tables.each do |table| %>
         <% if table.status == 'occupied' %>
             <% if table.get_booking.nil? %>
                 <div class="card tables red text-white" data-id="<%= table.id %>">
                   <div class="card-block">
                      Zone <%= table.zone_id %> <br>
                      Table <%= table.name %>  ( <%= table.seater %> Seat )
                   </div>
                 </div>
             <% else %>
                 <div class="card tables blue text-white" data-id="<%= table.id %>">
                   <div class="card-block">
                      Zone <%= table.zone_id %> <br>
                      Table <%= table.name %>  ( <%= table.seater %> Seat )
                   </div>
                 </div>
             <% end %>
         <% else %>
         <div class="card tables green text-white" data-id="<%= table.id %>">
           <div class="card-block">
             Zone <%= table.zone_id %> <br>
             Table <%= table.name %>  ( <%= table.seater %> Seat )
           </div>
         </div>
         <% end %>
         <% end %>
       </div>
     </div>

     <!--- Panel 2 - Room Orders -->
     <div class="tab-pane" id="rooms" role="tabpanel">
       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
         <% @rooms.each do |room| %>
         <% if room.status == 'occupied' %>
         <div class="card rooms red text-white" data-id="<%= room.id %>">
           <div class="card-block">
              <%= room.name %>
           </div>
         </div>
         <% else %>
         <div class="card rooms green text-white" data-id="<%= room.id %>">
           <div class="card-block">
              <%= room.name %>
           </div>
         </div>
         <% end %>
         <% end %>
       </div>
     </div>

     <!--- Panel 3 - Orders -->
     <div class="tab-pane" id="orders" role="tabpanel">
       <div class="card-columns" style="padding-top:10px; column-gap: 1.2rem;">
         <% @orders.each do |order| %>
         <div class="card orders red text-white" data-id = "<%= order.order_id %>">
           <div class="card-block">
              <%= order.order_id %>
           </div>
         </div>
         <% end %>
       </div>

     </div>
   </div>
   <!-- tabs - End -->
 </div>
 <div class="col-lg-2 col-md-2 col-sm-2">
   <button id="refreshbutton" type="button" class="btn btn-block" style="border-radius:5px;color:#fff;background-color:red;"> Refresh off </button>
   <button id="cash_in" type="button" class="btn btn-block btn-primary"  style="border-radius:5px;color:#fff;"> Cash In </button>
   <button id="cash_out" type="button" class="btn btn-block btn-primary"  style="border-radius:5px;color:#fff;"> Cash Out </button>
   <button id="close_cashier" type="button" class="btn btn-block btn-primary"  style="border-radius:5px;color:#fff;"> Close Cashier </button>
 </div>
 </div>
 <!-- Column One -->
<script>
$(document).ready(function(){
  $(".tables").on('click', function(){
      var dining_id = $(this).attr("data-id");
      window.location.href = '/origami/table/' + dining_id;
  })
  $(".sales").on('click',function(){
    var sale_id = $(this).attr("data-id");
    window.location.href = '/origami/sale/' + sale_id;
  })
  $(".rooms").on('click', function(){
      var dining_id = $(this).attr("data-id");
      window.location.href = '/origami/room/' + dining_id;
  })
  $(".orders").on('click',function(){
    var order_id = $(this).attr("data-id");
    window.location.href = '/origami/order/' + order_id;
  })
});
$(function() {
    var timer;

    function start() {
        timer = setTimeout(function() { console.log("refresh");window.location.reload()}, 10000); //10000
    };

    function stop() {
        clearTimeout(timer);
    };

	if(localStorage.getItem("refreshflag") != null){
		if (localStorage.getItem("refreshflag") == 0) {
			$('#refreshbutton').html("Refresh off");
			$('#refreshbutton').css("background-color","red");
            stop();
		}
		else{
			$('#refreshbutton').html("Refresh on");
      $('#refreshbutton').css("background-color","green");
			start();
		}
	}
	else{
		localStorage.setItem("refreshflag", 0);
	}
    var url = location.href;
    if (location.href.slice(-1) == "/"){
      url = url.substring(0, url.length - 1);
    }
    var arr = url.split("/");

    if(arr[arr.length-1] != "origami"){
        stop();
    }
    $('#refreshbutton').bind("click", function(){
    	if(localStorage.getItem("refreshflag") == "0"){
    		localStorage.setItem("refreshflag", 1);
    		$(this).html("Refresh on");
        $(this).css("background-color","green");
    		// $(this).html("Auto Refresh on<span class='glyphicon glyphicon-ok'></span>");
    		start();
    	}
    	else{
    		stop();
            localStorage.setItem("refreshflag", 0);
            $(this).html("Refresh off");
            $(this).css("background-color","red");
    	}
    });
    function refreshing(){
    	if(localStorage.getItem("refreshflag") == "0"){
    		localStorage.setItem("refreshflag", 1);
    		$(this).html("Refresh on");
        $(this).css("background-color","green");
    		// $(this).html("Auto Refresh on<span class='glyphicon glyphicon-ok'></span>");
    		start();
    	}
    	else{
    		stop();
            localStorage.setItem("refreshflag", 0);
            $(this).html("Refresh off");
            $(this).css("background-color","red");
    	}
    }
});

$('#cash_in').on('click',function(){
  window.location.href = '/origami/cash_ins/new';
})

$('#cash_out').on('click',function(){
  window.location.href  = '/origami/cash_outs/new';
})

$('#close_cashier').on('click',function(){
  window.location.href = '/origami/shift/close';
})
</script>
