<%= stylesheet_link_tag    'order_reservation', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'order_reservation', 'data-turbolinks-track': 'reload' %> 
<div class="container-fluid">
  <!-- start count function -->
  <% 
    pending_count = 0
    accepted_count = 0
    delivered_count = 0
    completed_count = 0
    processed_count = 0
  %>
  <% if !@count_on_order.nil? 
    @count_on_order.each do |count_order| 
        if count_order.status == "new" 
          pending_count = count_order.count
        elsif count_order.status == "accepted"
          accepted_count = count_order.count
        elsif count_order.status == "send_to_kitchen"
          delivered_count = count_order.count
        elsif count_order.status == "ready_to_delivery"
          completed_count = count_order.count
        end 
    end 
  end 

  if !@count_on_completed.nil?
    processed_count = @count_on_completed.count
  end
  %>
  <!-- end count function -->
  <div class="row m-t--10">
    <div class="col-lg-5 col-md-5 col-sm-5 div_order_margin">
      <ul class="nav nav-tabs tab-col-teal <%= @shop.shop_code ? @shop.shop_code : '' %>" role="tablist">
        <li class="nav-item red m-b-5" data-color="#F44336" data-type="pending">
          <a class="nav-link" data-toggle="tab" href="#pending" role="tab">
            <p class="num p-t-5">
              <%= pending_count %>
            </p> <%= t :pending %></a>
        </li>
        <li class="nav-item purple m-b-5" data-color="#673AB7" data-type="processing">
          <a class="nav-link" data-toggle="tab" href="#processing" role="tab">
            <p class="num p-t-5">
              <%= accepted_count %>
            </p> <%= t :processing %></a>
        </li>
        <li class="nav-item m-b-5" data-color="#009688" data-type="delivery" style="background-color: #009688;">
          <a class="nav-link" data-toggle="tab" href="#delivery" role="tab">
            <p class="num p-t-5">
              <%= delivered_count %>
            </p> <%= t :delivering %></a>
        </li>
        <li class="nav-item m-b-5" data-color="#03A9F4" data-type="completed" style="background-color: #03A9F4;">
          <a class="nav-link" data-toggle="tab" href="#completed" role="tab">
            <p class="num p-t-5">
              <%= completed_count %>
            </p> <%= t :completed %></a>
        </li>
        <li class="nav-item m-b-5" data-color="#5bc0de" data-type="processed" style="background-color: #5bc0de;">
          <a class="nav-link" data-toggle="tab" href="#processed" role="tab">
            <p class="num p-t-5">
              <%= processed_count %>
            </p> <%= t :processed %></a>
        </li>
      </ul>

      <div class="tab-content m-t--10">
        <div class="tab-pane active" id="pending" role="tabpanel">
          <div class="card-block font-13">
            <div id="menu-slimscroll" data-height="50">
              <table class="table table-stripe custom-table <%= @shop.shop_code ? @shop.shop_code : '' %>_order_reserve_cable">
                <tbody>
                  <% i=1
                   @order.each do |order| %>
                    <% if order.status == 'new' %>
                      <tr class="custom-tr first-<%=i%>" style="" data-id="<%=order.order_reservation_id%>" data-sr-no="<%= i %>">
                        <td width ="5%" class="align-left">
                          <%=i%>
                        </td>
                        <td width ="20%" class="align-center">
                          <%= order.created_at.utc.getlocal.strftime("%Y-%m-%d") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%= order.created_at.utc.getlocal.strftime("%I:%M %p") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%=order.grand_total%>
                        </td>
                        <td width ="30%" class="align-center">
                          <span class="font-10 col-blue">
                            <% if order.delivery.delivery_type == 'service' %>
                              DELIVERY
                            <% elsif order.delivery.delivery_type == 'pick_up' %>
                              PICK-UP
                            <% else %>
                              DIRECT DELIVERY
                            <% end %>
                          </span>
                        </td>
                      </tr>
                      <%i+=1%>
                    <%end%>
                  <%end%>
                </tbody>
              </table>
            </div>
          </div>        
        </div>

        <!--- Panel 3 - Orders -->
        <div class="tab-pane dining" id="processing" role="tabpanel">
          <div class="card-block font-13">
            <div id="menu-slimscroll" data-height="50">
              <table class="table table-stripe custom-table">
                <tbody>
                  <% i=1
                   @order.each do |order| %>
                    <% if order.status == 'accepted' %>
                      <tr class="custom-tr second-<%=i%>" style="" data-id="<%=order.order_reservation_id%>" data-sr-no="<%= i %>">
                        <td width ="5%" class="align-left">
                          <%=i%>
                        </td>
                        <td width ="20%" class="align-center">
                          <%= order.created_at.utc.getlocal.strftime("%Y-%m-%d") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%= order.created_at.utc.getlocal.strftime("%I:%M %p") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%=order.grand_total%>
                        </td>
                        <td width ="30%" class="align-center">
                          <span class="font-10 col-blue">
                            <% if order.delivery.delivery_type == 'service' %>
                              DELIVERY
                            <% elsif order.delivery.delivery_type == 'pick_up' %>
                              PICK-UP
                            <% else %>
                              DIRECT DELIVERY
                            <% end %>
                          </span>
                        </td>
                      </tr>
                      <%i+=1%>
                    <%end%>
                  <%end%>
                </tbody>
              </table>
            </div>
          </div>   
        </div>
        <!--- Panel 3 - Orders -->
        <div class="tab-pane dining" id="delivery" role="tabpanel">
          <div class="card-block font-13">
            <div id="menu-slimscroll" data-height="50">
              <table class="table table-stripe custom-table">
                <tbody>
                  <% i=1
                   @order.each do |order| %>
                    <% if order.status == 'send_to_kitchen' %>
                      <tr class="custom-tr third-<%=i%>" style="" data-id="<%=order.order_reservation_id%>" data-sr-no="<%= i %>">
                        <td width ="5%" class="align-left">
                           <%=i%>
                        </td>
                        <td width ="20%" class="align-center">
                          <%= order.created_at.utc.getlocal.strftime("%Y-%m-%d") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%= order.created_at.utc.getlocal.strftime("%I:%M %p") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%=order.grand_total%>
                        </td>
                        <td width ="30%" class="align-center">
                          <span class="font-10 col-blue">
                            <% if order.delivery.delivery_type == 'service' %>
                              DELIVERY
                            <% elsif order.delivery.delivery_type == 'pick_up' %>
                              PICK-UP
                            <% else %>
                              DIRECT DELIVERY
                            <% end %>
                          </span>
                        </td>
                      </tr>
                      <%i+=1%>
                    <%end%>
                  <%end%>
                </tbody>
              </table>
            </div>
          </div>      
        </div>
        <!--- Panel 3 - Orders -->
        <div class="tab-pane dining" id="completed" role="tabpanel">
          <div class="card-block font-13">
            <div id="menu-slimscroll" data-height="50">
              <table class="table table-stripe custom-table">
                <tbody>
                  <% i=1
                   @order.each do |order| %>
                    <% if order.status == 'ready_to_delivery' %>
                      <tr class="custom-tr fourth-<%=i%>" style="" data-id="<%=order.order_reservation_id%>" data-sr-no="<%= i %>">
                        <td width ="5%" class="align-left">
                           <%=i%>
                        </td>
                        <td width ="20%" class="align-center">
                          <%= order.created_at.utc.getlocal.strftime("%Y-%m-%d") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%= order.created_at.utc.getlocal.strftime("%I:%M %p") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%=order.grand_total%>
                        </td>
                        <td width ="30%" class="align-center">
                          <span class="font-10 col-blue">
                            <% if order.delivery.delivery_type == 'service' %>
                              DELIVERY
                            <% elsif order.delivery.delivery_type == 'pick_up' %>
                              PICK-UP
                            <% else %>
                              DIRECT DELIVERY
                            <% end %>
                          </span>
                        </td>
                      </tr>
                      <%i+=1%>
                    <%end%>
                  <%end%>
                </tbody>
              </table>
            </div>
          </div>      
        </div>
        <!--- Panel 5 - processed -->
        <div class="tab-pane dining" id="processed" role="tabpanel">
          <div class="card-block font-13">
            <div id="menu-slimscroll" data-height="50">
              <table class="table table-stripe custom-table">
                <tbody>
                  <% i=1
                   @order.each do |order| %>
                    <% if order.status == 'delivered' && (order.created_at.utc.getlocal.strftime("%Y-%m-%d") == DateTime.now.strftime("%Y-%m-%d")) %>
                      <tr class="custom-tr fifth-<%=i%>" style="" data-id="<%=order.order_reservation_id%>" data-sr-no="<%= i %>">
                        <td width ="5%" class="align-left">
                           <%=i%>
                        </td>
                        <td width ="20%" class="align-center">
                          <%= order.created_at.utc.getlocal.strftime("%Y-%m-%d") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%= order.created_at.utc.getlocal.strftime("%I:%M %p") %>
                        </td>
                        <td width ="20%" class="align-center">
                           <%=order.grand_total%>
                        </td>
                        <td width ="30%" class="align-center">
                          <span class="font-10 col-blue">
                            <% if order.delivery.delivery_type == 'service' %>
                              DELIVERY
                            <% elsif order.delivery.delivery_type == 'pick_up' %>
                              PICK-UP
                            <% else %>
                              DIRECT DELIVERY
                            <% end %>
                          </span>
                        </td>
                      </tr>
                      <%i+=1%>
                    <%end%>
                  <%end%>
                </tbody>
              </table>
            </div>
          </div>      
        </div>
      </div>

    </div>

    <div class="col-lg-4 col-md-4 col-sm-4 div_card_order">
      <div class="card m-b-5 p-t-5">
          <div class="card-header custom-card-header" style="color:">
            <table class="table">
              <tr>
                <td width ="10%" class="header-td align-left">
                  <b class="col-pink font-16"><span id="sr_number"></span></b> 
                </td>
                <td width="40%" class="header-td align-left">
                  <b><span class="font-15" id="requested_date_time"></span></b>
                </td>
                <td width ="50%" class="header-td align-right">
                  <b><span id="invoice_no"></span></b>
                  <span id="order_status" class="hidden"></span>
                  <span id="approved_code" class="hidden"></span>
                </td>
              </tr>
            </table>
          </div>
        <div class="card-block custom-card-block">
          <div id="order-detail-slimscroll" data-height="220">
            <table class="table  summary-items">
              <tbody>
                <!-- <tr>
                   <td width ="70%" class="body-td align-left">
                     MENU ITEM 01
                     <br><span class="font-13">2 <span class="col-blue">X700</span></span>
                  </td>
                  <td width ="30%" class="body-td align-right">1400.00</td>
                </tr>   -->              
              </tbody>
            </table>
          </div>
        </div>
        <div class="card-footer custom-card-footer">
          <table class="table">
            <tbody>
              <tr>
                <td width ="70%" class="footer-td align-left" >
                   SUB TOTAL 
                </td>
                <td width ="30%" class="footer-td align-right" id="sub_total">0.00</td>
              </tr>
              <tr>
                <td width ="70%" class="footer-td align-left">
                   DELIVERY FEES <span id="delivery_info"></span>
                </td>
                <td width ="30%" class="footer-td align-right" id="delivery_fee">0.00</td>
              </tr>
              <tr>
                <td width ="70%" class="footer-td align-left">
                   CONVENIENCE CHARGES
                </td>
                <td width ="30%" class="footer-td align-right" id="total_charges">0.00</td>
              </tr>
              <tr id="discount">
                <td width ="70%" class="footer-td align-left">
                   DISCOUNT
                </td>
                <td width ="30%" class="footer-td align-right">(<span id="discount_amount">0.00</span>)</td>
              </tr>
              <tr>
               <td width ="70%" class="footer-td align-left">
                   GOVERNMENT TAX
                </td>
                <td width ="30%" class="footer-td align-right" id="total_tax">0.00</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="card-footer grand-card-footer">
          <table class="table">
            <tbody>
              <tr>
                <td width ="70%" class="footer-td align-left col-blue">
                   GRAND TOTAL 
                </td>
                <td width ="30%" class="footer-td align-right col-blue" id="grand_total">0.00</td>
              </tr>
              <tr>
                <td width ="50%" class="footer-td align-left col-blue">
                  <button type="button" class="btn btn-lg bg-red waves-effect" id="cancel" data-value="rejected">
                      <strong>REJECT</strong>
                  </button>
                </td>
                <td width ="50%" class="footer-td align-right col-blue">
                <button type="button" class="btn btn-lg bg-blue waves-effect " id="accepted" data-value="accepted">
                   ACCEPT
                </button>
                <!-- <button type="button" class="btn btn-lg bg-blue waves-effect hidden" id="accepted" data-value="delivery">
                   <strong>SEND TO KITCHEN</strong>
                </button>
                <button type="button" class="btn btn-lg bg-blue waves-effect hidden" id="accepted" data-value="completed">
                   <strong>READY TO DELIVERY</strong>
                </button>
                <button type="button" class="btn btn-lg bg-blue waves-effect hidden" id="accepted" data-value="pick-up">
                   <strong>PICK UP</strong>
                </button> -->
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>  
    </div>
    
    <div class="col-lg-3 col-md-3 col-sm-3">
      <div class="card m-b-5 p-t-5" style="background-color: #E8EAF6">
        <div class="card-header custom-card-header" style="background-color: #E8EAF6">
          <table class="table">
            <tr>
              <td class="header-td align-left col-blue">CUSTOMER & DELIVERY INFORMATION 
              </td>
            </tr>
          </table>
        </div>
        <div class="card-block" id="customer-info-slimscroll" data-height="95">
          <table class="table tbl_customer">
              <tbody>
                <tr>
                  <td colspan="2" class="body-td align-left">
                    <span class="font-13">REF.</span><br>
                    <b id="trans_ref"></b>
                  </td>
                </tr>
                <tr>
                  <td class="body-td align-left">
                    <span class="font-13">REQUESTED TIME</span><br>
                    <b id="requested_time"></b>
                  </td>
                  <td class="body-td align-right expected_time">
                    <span class="font-13">COOKING TIME</span><br>
                    <b><span id="expected_time"></span> MINS</b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="body-td align-left">
                     <span class="font-13">NAME</span><br>
                     <b id="customer_name"></b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="body-td align-left">
                     <span class="font-13">PHONE</span><br>
                     <b id="phone"></b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="body-td align-left">
                     <span class="font-13">ADDRESS</span><br>
                     <b id="address"></b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="body-td align-left">
                     <span class="font-13">DELEVERY</span><br>
                     <b id="delivery_to"></b>
                  </td>
                </tr>
                <tr>
                  <td class="body-td align-left">
                     <span class="font-13">REMARK</span><br>
                     <b id="order_remark"></b>
                  </td>
                </tr>
                <tr>
                  <td colspan="2" class="body-td align-left">
                    <b><i><span id="remark"></span></i></b>
                  </td>
                </tr>
              </tbody>
          </table>
        </div>
        <div class="card-footer order_close_cashier">
          <% if current_user.role != "waiter" %>
            <div class="row">
              <div class="col-sm-7 col-xs-7 col-md-7 col-lg-7"></div>
              <div class="col-sm-4 col-xs-4 col-md-4 col-lg-4">
                <button id="order_close_cashier" class="align-right text-center btn btn-md btn-link btn-primary waves-effect"><%= t("views.btn.close_cashier") %></button>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    </div>
    <div id="<%= @shop.shop_code ? @shop.shop_code : '' %>_doemal_new_order"></div>
    <div id="<%= @shop.shop_code ? @shop.shop_code : '' %>_notify_new_order"></div>
    <div id="<%= @shop.shop_code ? @shop.shop_code : '' %>_notify_order_send_to_kitchen"></div>
    <div id="<%= @shop.shop_code ? @shop.shop_code : '' %>_notify_order_ready_to_delivery"></div>
  </div>
  
<p id="ref_no" class="hidden"></p>
<p id="callback_url" class="hidden"></p>
<p id="order_id" class="hidden"></p>
<p id="status" class="hidden"></p>

<div class="modal fade" id="waiting_timeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" id="waiting_timeModalLabel">Expected Waiting Time for <span id="requested_order_time"></span></h4>
      </div>
      <div class="modal-body">
        <div class="row text-center m-t-20">
          <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info timer_type" data-value="after">After</button>
          </div>
        </div>

        <div class="row text-center m-t-20">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="15">15 Mins.</button>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="30">30 Mins.</button>
          </div>
        </div>
        <div class="row text-center m-t-20">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="45">45 Mins.</button>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="60">60 Mins.</button>
          </div>
        </div>
        <div class="row text-center m-t-20">
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="75">75 Mins.</button>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <button type="button" class="btn btn-lg btn-link bg-info time_interval" data-value="90">90 Mins.</button>
          </div>
        </div>
      </div>
      <div class="modal-footer ">
        <div class="row p-r-20">
          <div class="col-md-5">
            <button type="button" class="btn btn-link p-t-5 p-b-5 bg-red waves-effect" data-dismiss="modal">CLOSE</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="rejected_reasonModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-md" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="rejected_reasonLabel">Reason</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <textarea id="reject_reason" name="reject_reason" class="form-control" rows="3" cols="30"></textarea>
          <span id="reject_reasonErr" style="color:red"></span>
        </div>
      </div>
      <div class="modal-footer ">
        <div class="row p-r-20">
          <div class="col-md-5">
            <button type="button" class="btn btn-link p-t-5 p-b-5 bg-blue waves-effect send_status">SEND</button>
          </div>
          <div class="col-md-5">
            <button type="button" class="btn btn-link p-t-5 p-b-5 bg-red waves-effect" data-dismiss="modal">CLOSE</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="AccessCodeModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
      <h4 class="modal-title" id="AccessCodeModalLabel">Enter Access Code</h4>
      <button type="button" class="close" id="close" data-dismiss="modal" aria-hidden="true" style="font-size: 20px;color:#111;">&times;</button>
      </div>
      <div class="modal-body" style="padding: 0px 25px 15px 25px !important"> 
         <input type="text" id="access_code" class="access_code form-control col-md-12 ">
        <div class="row bottom p-l-15 p-r-15 m-t-10">
             <div class="col-md-3 access_number border-top border-left" data-value="1" data-type="num">1</div>
             <div class="col-md-3 access_number border-top border-left" data-value="2" data-type="num">2</div>
             <div class="col-md-3 access_number border-top border-left" data-value="3" data-type="num">3</div>
             <div class="col-md-3 access_number border-top border-left" data-value="4" data-type="num">4</div>
           </div>
           <div class="row bottom p-l-15 p-r-15">
             <div class="col-md-3 access_number border-top border-left" data-value="5" data-type="num">5</div>
             <div class="col-md-3 access_number border-top border-left" data-value="6" data-type="num">6</div>
             <div class="col-md-3 access_number border-top border-left" data-value="7" data-type="num">7</div>
             <div class="col-md-3 access_number border-top border-left" data-value="8" data-type="num">8</div>
           </div>
           <div class="row bottom p-l-15 p-r-15">
             <div class="col-md-3 access_number border-top border-left" data-value="9" data-type="num">9</div>
             <div class="col-md-3 access_number border-top border-left" data-value="0" data-type="num">0</div>
             <div class="col-md-3 access_number border-top border-left orange" data-type="clr">Clr</div>
             <div class="col-md-3 access_number ok border-top border-left blue" data-type="ok" data-action="void">OK</div>
              
           </div>
      </div>
    </div>
  </div>
</div> 
