<div class="container-fluid">
  <div class="row">
   <!-- Column One -->
   <div class="col-lg-6 col-md-6 col-sm-6">

     <!-- Nav tabs -->
     <ul class="nav nav-tabs tab-col-teal" role="tablist" id="mytab">

       <li class="nav-item">
         <a class="nav-link " data-toggle="tab" href="#tables" role="tab">Tables</a>
       </li>
       <li class="nav-item">
         <a class="nav-link active" data-toggle="tab" href="#rooms" role="tab">Rooms</a>
       </li>

     </ul>
     <!-- Nav tabs - End -->
     <div id="custom-slimscroll">
       <div class="tab-content" style="">
         <!--- Panel 0 - Completed Orders -->
         <!--- Panel 1 - Table Orders -->
         <div class="tab-pane" 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? %>
                <% if table.get_checkout_booking.nil? %>
                 <div class="card tables red text-white" data-id="<%= table.id %>" data-name="<%= table.name %>">
                <% else %>
                  <div class="card tables orange text-white" data-id="<%= table.id %>">
                <% end %>
                    <div class="card-block">
                      <%= table.name %>
                    </div>
                  </div>
                <% else %>
                  <% if table.get_checkout_booking.nil? %> 
                    <div class="card tables blue text-white" data-id="<%= table.id %>">
                  <% else %>
                    <div class="card tables orange text-white" data-id="<%= table.id %>">
                  <% end %>
                    <div class="card-block">
                      <%= table.name %>
                    </div>
                  </div>
                <% end %>
              <% else %>
                <div class="card tables green text-white" data-id="<%= table.id %>" data-name="<%= table.name %>">
                <div class="card-block">
                  <%= table.name %>
                </div>
              </div>
              <% end %>
            <% end %>
        </div>
      </div>

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

<!-- Column Two -->
<div class="col-lg-5 col-md-5 col-sm-5">
 <div class="card"  >
  <div class="card-header">
    <div><strong id="order-title"> MOVE  --> <span style='color:red'> ' <%= @dining.name %> ' </span> to <span style='color:blue' id="moved"> </span></strong></div>
    <input type='hidden' id="change_table_value" value="" />
    <% if @status_order == 'order' && @status_sale != 'sale' %>
    <% if !@obj_order.nil? %>
    <div id="save_order_id" data-order="<%= @obj_order.order_id %>">
      <% else %>
      <div id="save_order_id" data-order="">
        <% end %>
        <% if !@booking.nil? %>
        <strong id="order-title">ORDER DETAILS </strong> | Table <%= @dining.name rescue "" %>
        <% if @booking.checkout_by.nil? && !@booking.reserved_by.nil? %>
        <span class="float-right"><%= @booking.checkin_at.utc.getlocal.strftime("%I:%M %p") %> - <%= @booking.checkout_at.utc.getlocal.strftime("%I:%M %p") %></span>
        <% else %>
        <span class="float-right">Checkin Time : <%= @booking.checkin_at.utc.getlocal.strftime("%I:%M %p") %></span>
        <% end %>
        <% end %>
      </div>
      <% elsif @status_sale == 'sale' %>
      <div><strong id="order-title">INVOICE DETAILS </strong> | Table <%= @dining.name rescue "" %>
       <% if !@booking.reserved_by.nil? && %>
       <span class="float-right"><%= @booking.checkin_at.utc.getlocal.strftime("%I:%M %p") %> - <%= @booking.checkout_at.utc.getlocal.strftime("%I:%M %p") %></span>
       <% else %>
       <span class="float-right">Checkin Time : <%= @booking.checkin_at.utc.getlocal.strftime("%I:%M %p") %></span>
       <% end %>
     </div>
     <% else %>
     <strong id="order-title">ORDER DETAILS </strong> | Table <%= @dining.name rescue "" %>
     <% end %>
   </div> 
   <div class="card-block">
     <div class="card-title">
       <div class="row p-l-5 p-r-5">
        <% if (!@sale_array.empty?) && (!@date.nil?) %>
        <div class="col-lg-6 col-md-6 col-sm-6">
          &nbsp; Receipt No: <span id="receipt_no">
          <% if @status_sale == 'sale' %>
          <%= @sale_array[0].receipt_no rescue '' %>
          <% end %>
        </span>
        <br>
      </div>
      <div class="col-lg-6 col-md-6 col-sm-6 text-right">
        Date: <span id="receipt_date"><%= @date.utc.getlocal.strftime("%d/%m/%Y-%I:%M %p") rescue '-' %></span>
        <br>
      </div>
      <% elsif !@date.nil? %>
      <div class="col-lg-7 col-md-7 col-sm-7">
        &nbsp; Order No: <span id="order_no">
        <% if @status_order == 'order' %>
        <%= @obj_order.order_id rescue '' %>

        <% end %>
      </span>
      <br>
    </div>
    <div class="col-lg-5 col-md-5 col-sm-5 text-right">
      Date: <span id="receipt_date"><%= @date.utc.getlocal.strftime("%d/%m/%Y") rescue '-' %></span>
      <br>
    </div>
    <% end %>
  </div>
</div>
<div class="row p-l-5 p-r-5">
  <div class="col-lg-6 col-md-6 col-sm-6">

    <% if @status_sale == 'sale' && !@sale_array.empty? %>
    <p class="hidden customer-id"><%= @sale_array[0].customer_id rescue '' %></p>
    &nbsp; Customer : <%= @sale_array[0].customer.name rescue '' %>
    <% elsif @status_order == 'order' && !@customer.nil?
    %>
    <p class="hidden customer-id"><%= @customer.customer_id rescue "" %></p>
    &nbsp; Customer : <%= @customer.name rescue "" %>
    <% end %>

  </div>
</div>
<div id="order-detail-slimscroll" data-height="130">
 <div class="card-text" style="" >
   <table class="table table-striped" id="order-items-table">
     <thead>
       <tr>
         <th>#</th>
         <th class="item-name">Items</th>
         <th class="item-attr">QTY</th>
         <th class="item-attr">Price</th>
       </tr>
     </thead>
     <tbody>
       <%
       count = 0
       sub_total = 0
       if @status_sale == "sale"
         @sale_array[0].sale_items.each do |sale_item|
          count += 1
          sub_total = sub_total + sale_item.price
          %>
          <input type="hidden" id="sale_id" value="<%= @sale_array[0].sale_id %>">
          <% unless sale_item.price <= 0 %>
          <tr>
           <td><%= count %></td>
           <td class='item-name'><%= sale_item.product_name %></td>
           <td class='item-attr'><%= sale_item.qty %></td>
           <td class='item-attr'><%= sale_item.price %></td>
         </tr>
         <%
       end
     end
   end

   if @status_order == 'order' && @status_sale != 'sale'
    unless @order_items.nil? || @order_items.empty?
     count = 0
     @order_items.each do |order_item |
      count += 1
      sub_total = sub_total + (order_item.price * order_item.qty)

      #unless order_item.price <= 0 %>
      <tr>
       <td><%= count %></td>
       <td class='item-name'><%= order_item.item_name %></td>
       <td class='item-attr'><%= order_item.qty %></td>
       <td class='item-attr'><%= order_item.qty*order_item.price %></td>
     </tr>
     <%
         #end
       end
     end
   end
   %>
 </tbody>
</table>
</div>
</div>
<%
if @status_sale == 'sale'
 unless @order_items.nil?
   %>
   Pending New Order
   <table class="table table-striped">
     <%
     @order_items.each do |order_item |
       %>

       <tr>
         <td class='item-name'><%= order_item.item_name %></td>
         <td class='item-attr'><%= order_item.qty %></td>
         <td class='item-attr'><%= order_item.qty*order_item.price %></td>
       </tr>

       <%
     end
     %>
   </table>
   <button class='btn btn-primary btn-block waves-effect' id='add_invoice'> Add to existing invoice </button>
   <%
 else
   @sale_array.each do |sale|
     if @sale_array.size > 1
       unless sale.receipt_no == @sale_array[0].receipt_no
         %>
         Pending Payment
         <table class="table table-striped">
           <tr>
             <td>Receipt No - <%= sale.receipt_no %></td>
             <td><button class='btn btn-lg btn-blue '>Show Detail </button></td>
           </tr>
         </table>
         <%
       end
     end
   end
 end
end
%>
<div class="row">
 <div class="col-md-12">
   <div class="move_table purple" id="move_table">MOVE ROOM</div>
 </div>
</div>
</div>
</div>
</div>

<!-- Column Three -->
<div class="col-lg-1 col-md-1 col-sm-1">
 <!-- Waiter Buttons -->
 <button type="button" class="btn bg-default btn-block" id='back'> <i class="material-icons">reply</i>Back</button>


</div>
</div>
</div>
<script>
  $(document).ready(function(){
    /* check webview loaded*/
    var webview = <%= @webview %>;
    showHideNavbar(webview);

    $(".tables").on('click', function(){
      $('.tables').removeClass('selected-item');
        $(this).addClass('selected-item');
        var dining_name = $(this).attr("data-name");
        var dining_id = $(this).attr("data-id");
        var change_from = "<%= @dining.id %>";
        if ((dining_id == change_from) || (dining_name==undefined)) {
          swal({
           title: "Alert!!",
           text: 'Please select another table !',
           type: 'warning',
         });
        }else{
          $('#moved').text(" ' " + dining_name + " ' ")
          $('#change_table_value').val(dining_id);
        }
    })

    $(".rooms").on('click', function(){
      $(this).addClass('selected-item');
      var dining_name = $(this).attr("data-name");
      var dining_id = $(this).attr("data-id");
      var change_from = "<%= @dining.id %>";
      if (dining_id == change_from) {
        swal({
         title: "Alert!!",
         text: 'Please select another room !',
         type: 'warning',
       });
      }else{
        $('#moved').text(dining_name)
        $('#change_table_value').val(dining_id);
      }
    })

    $('#move_table').on('click',function(){
      change_to = $('#change_table_value').val();
      change_from = "<%= @dining.id %>";
      if (change_to == ""){
        alert("Please Select Room")
      }else{
        $.ajax({type: "POST",
          url: "<%= origami_moving_path %>",
          data: "change_from="+ change_from + "&change_to=" + change_to,
          success:function(result){
            alert("Moving Success")
            if (result.get_type == 'Table'){
              window.location.href = '/origami/table/' + change_to;
            }else{
              window.location.href = '/origami/room/' + change_to;
            }
          }
        });
      }
    });

    
    $('#add_invoice').on('click', function () {
        var dining_id = "<%= @dining.id %>";
        var sale_id = $("#sale_id").val();
        var ajax_url = "/origami/sale/append_order";
        $.ajax({
            type: "POST",
            url: ajax_url,
            data: 'dining_id=' + dining_id + "&sale_id=" + sale_id,
            success: function (result) {
              swal({
                title: "Information!",
                text: "Invoice updated",
                html: true,
                closeOnConfirm: false,
                closeOnCancel: false,
                allowOutsideClick: false
              }, function () {
                $("#first_bill").removeAttr('disabled');
                $("#pay").removeAttr('disabled');
                window.location.reload();
              });
            }
        });
    });
  });
  $('#back').on('click',function(){
    window.location.href = '/origami/room/'+ "<%= @dining.id %>";
  })
</script>
