<div class="row">
  <div class="col-lg-11 col-md-11 col-sm-11">
      <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#table" role="tab">Tables</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#room" role="tab">Rooms</a>
          </li>
      </ul>
      <div class="tab-content" style="max-height:650px; overflow:auto">

          <div class="tab-pane active"  id="table" role="tabpanel" style="max-height:; overflow:auto">
          <% @tables.each do |zone| %>
                <h3>Zone : <%=zone.zone.name%></h3>
              <div class="card-columns" style="padding-top:10px; column-gap: 2.2rem;">

                <% @all_table.each do |table| %>
                <% if zone.zone_id == table.zone_id %>
                <div class="card click_table <%= table.status=="available" ? "available" : "occupied"%>" data-id = "<%= table.id %>">
                  <div class="card-block">
                    <p class="hidden table-status"><%= table.status  %></p>
                    <p style="text-align: center"><%= table.name %></p>
                    <p style="text-align: center">Seat : <%= table.seater %></p>
                  </div>
                </div>
               <% end %> <% end %>
              </div>
              <% end %>
          </div>

          <div class="tab-pane"  id="room" role="tabpanel" style="max-height:; overflow:auto">
            <% @rooms.each do |zone| %>
                <h3>Zone : <%=zone.zone.name%></h3>
              <div class="card-columns" style="padding-top:10px; column-gap: 2.2rem;">

                <% @all_room.each do |room| %>
                <% if zone.zone_id == room.zone_id  %>
                <div class="card click_table <%= room.status=="available" ? "available" : "occupied"%>" data-id = "<%= room.id %>">
                  <div class="card-block">
                    <p class="hidden table-status"><%= room.status  %></p>
                    <p style="text-align: center"><%= room.name %></p>
                    <p style="text-align: center">Seat : <%= room.seater %></p>
                  </div>
                </div>
               <% end %> <% end %>
              </div>
              <% end %>
          </div>

      </div>
  </div>

  <div class="col-lg-1 col-md-1 col-sm-1">
    <button type="button" class="btn btn-block btn-default waves-effect" id='back'>
      <i class="material-icons">reply</i>
       Back
    </button>
  </div>
</div>
<script>
  $(document).on('click',".click_table",function(){

    var dining_id = $(this).attr('data-id');
    var status     = $(this).find(".table-status").text();

    if (status == "available") {
      $.confirm({
          title: 'Confirmation !',
          content: 'Are you sure to assign this table',
          buttons: {
            confirm: {
              text: 'Ok',
              btnClass: 'btn-green',
              action: function(){
                 window.location.href = '/origami/addorders/'+dining_id;
               }
            }  
          }
        });
    } else {
      $.confirm({
          title: 'Alert!',
          content: 'You cannot assign this table',
          buttons: {
            confirm: {
              text: 'Ok',
              btnClass: 'btn-red',   
            }  
          }
      });
    }         
  })
</script>
<style type="text/css">
  .card-columns {
  -webkit-column-count:5;
        -moz-column-count:5;
        column-count:5;
}

.occupied{
  color: #fff !important;
  background-color: red;
}
.available{
  color: #fff !important;
  background-color: #009900;
}

</style>
