<style>
    .avatar-xs {
  height: 2rem;
  width: 2rem;
}

.avatar-sm {
  height: 3rem;
  width: 3rem;
}

.avatar-md {
  height: 4.5rem;
  width: 4.5rem;
}

.avatar-lg {
  height: 6rem;
  width: 6rem;
}

.avatar-xl {
  height: 7.5rem;
  width: 7.5rem;
}

.avatar-title {
  align-items: center;
  background-color: blue;
  color: white;
  display: flex;
  font-weight: 500;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.avatar-group {
  padding-left: 12px;
  display: flex;
  flex-wrap: wrap;
    .avatar-group-item {
    margin-left: -12px;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: all 0.2s;
    &:hover{
      position: relative;
      transform: translateY(-2px);
    }
  }
}
</style>

<div style="margin-top:50px">
    <div class="container-full" style="padding: 15px 15px 15px 15px;">
        <div class="row" >           
            <!--Categories-->
            <div class="col-md-2 col-lg-2 col-xl-2 col-sm-6 col-xs-6  categories">
                <div class="panel">
                    <button class="btn btn-sm btn-inverse col-md-12" style="margin-top: 5px !important">All</button>
                    <button class="btn btn-sm btn-inverse col-md-12" style="margin-top: 5px !important">Burgers</button>
                    <button class="btn btn-sm btn-inverse col-md-12" style="margin-top: 5px">Icecream</button>
                    <button class="btn btn-sm btn-inverse col-md-12" style="margin-top: 5px">Fries</button>
                    
                </div>
            </div>
            <!--Item Pictures-->
            <div class="col-md-4 col-lg-4 col-xl-4 col-sm-6 col-xs-6 " >
                    <div class="card-box" style="display:inline-block; padding: 5px 1px 5px 1px;">
                        <!--Search Item-->
                        <div class="row" style="margin-bottom: 0.5rem!important;">
                            <div class="col-sm-12">
                                <div class="search-box me-2 d-inline-block" style="margin-bottom: 0.5rem!important;">
                                    <div class="position-relative">
                                    <input type="text" class="form-control" id="searchItemList" placeholder="Search...">
                                    <i class="bx bx-search-alt search-icon"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- end col-->
                        </div>
                        <!--Search End-->
                        <div  class="items">
                            <div style="margin: 2px; padding:2px !important; display: inline-block; text-align: center;">
                                <a href="javascript: void(0);" class="text-dark">
                                    <div style="margin-bottom: 0.5rem!important;">
                                        <img class="avatar-lg" src="<?php echo base_url();?>assets/images/fooditems/b1.jpg" alt="">
                                    </div>
                                    <h5 class="font-size-12 mb-1" style="width: 7.5rem; height: 35px; overflow-y: hidden;">                                    
                                            Beef Burger With Cheese                                    
                                    </h5>
                                    <p class="text-muted" style="width: 7.5rem; ">$ 12.99</p>
                                </a>
                            </div>

                            <div style="margin: 2px; padding:2px !important; display: inline-block; text-align: center;">
                                <a href="javascript: void(0);" class="text-dark">
                                    <div style="margin-bottom: 0.5rem!important;">
                                        <img class="avatar-lg" src="<?php echo base_url();?>assets/images/fooditems/b3.png" alt="">
                                    </div>
                                    <h5 class="font-size-10 mb-1" style="font-size:14px; width: 7.5rem; height: 35px; overflow-y: hidden;">
                                    
                                            Zinger Burger
                                    
                                    </h5>
                                    <p class="text-muted" style="width: 7.5rem; ">$ 12.99</p>
                                </a>
                            </div>


                            <div style="margin: 2px; padding:2px !important; display: inline-block; text-align: center;">
                                <a href="javascript: void(0);" class="text-dark">
                                    <div style="margin-bottom: 0.5rem!important;">
                                        <img class="avatar-lg" src="<?php echo base_url();?>assets/images/fooditems/b2.png" alt="">
                                    </div>
                                    <h5 class="font-size-12 mb-1" style="width: 7.5rem; height: 35px; overflow-y: hidden;">
                                    
                                            Zinger Double Decker
                                    
                                    </h5>
                                    <p class="text-muted" style="width: 7.5rem;">$ 12.99</p>
                                </a>
                            </div>


                            <div style="margin: 2px; padding:2px !important; display: inline-block; text-align: center;">
                                <a href="javascript: void(0);" class="text-dark">
                                    <div style="margin-bottom: 0.5rem!important;">
                                        <img class="avatar-lg" src="<?php echo base_url();?>assets/images/fooditems/sundea1.jpg" alt="">
                                    </div>
                                    <h5 class="font-size-12 mb-1" style="width: 7.5rem; height: 35px; overflow-y: hidden;">
                                    
                                            Summer Delight Bannana ...
                                    
                                    </h5>
                                    <p class="text-muted" style="width: 7.5rem;">$ 12.99</p>
                                </a>
                            </div>

                            <div style="margin: 5px; padding:5px !important; display: inline-block; text-align: center;">
                                <a href="javascript: void(0);" class="text-dark">
                                    <div style="margin-bottom: 0.5rem!important;">
                                        <img class="avatar-lg" src="<?php echo base_url();?>assets/images/fooditems/combo1.JPG" alt="">
                                    </div>
                                    <h5 class="font-size-12 mb-1" style="width: 7.5rem; height: 35px; overflow-y: hidden;">
                                    
                                            Zinger Combo 1
                                    
                                    </h5>
                                    <p class="text-muted" style="width: 7.5rem;">$ 12.99</p>
                                </a>
                            </div>

                        </div>
                    </div>                
            </div>
            <!--Current Order-->
            <div class="col-md-4 col-lg-4 col-xl-4 col-sm-6 col-xs-6">                
                <div class="card-box" style="padding: 5px 1px 2px 1px; margin-bottom: 0px;">
                    <!--Server/Customer Select-->
                    <div class="row" style="margin-bottom: 0.1rem!important;">
                        <div class="col-sm-4">
                            <select class="form-control" >
                                <option>Select Server</option>
                                <option>Tom</option>
                                <option>Dick</option>
                                <option>Harry</option>
                            </select>
                        
                        </div>
                        <!--Select Customer-->
                        <div class="col-sm-6">
                            <div class="search-box me-2 d-inline-block" style="margin-bottom: 0.5rem!important;">
                                <div class="position-relative">
                                <input type="text" class="form-control" id="searchItemList" placeholder="Customer..." value="walk-in">
                                <i class="bx bx-search-alt search-icon"></i>
                                </div>
                            </div>  
                        </div><!-- end col-->
                        <!--Add Customer-->
                        <div class="col-sm-2">
                            <div class="text-sm-end">
                            <button type="button" data-bs-toggle="modal" data-bs-target="#newCustomerModal" class="btn btn-sm btn-success btn-rounded waves-effect waves-light mb-2 me-2 addCustomers-modal"><i class="fa fa-plus"></i></button>
                            </div>
                        </div><!-- end col-->
                    </div>
                    <!--Server/Customer End-->

                    <!--Order Type Select-->
                    <div class="row" style="margin-bottom: 0.5rem!important; ">
                        <div class="col-sm-10">
                            <div >                             
                                <div class="btn-group" style="margin: 2px !important; text-align: center !important;">
                                    <button type="button" class="btn btn-sm btn-primary  waves-effect waves-light "><i class="fa-solid fa-bowl-rice"></i> Dine-In</button>
                                    <button type="button"   class="btn btn-sm btn-info  waves-effect waves-light "><i class="mdi mdi-car"></i> Take-Away</button>
                                    <button type="button" class="btn btn-sm btn-warning  waves-effect waves-light "><i class="mdi mdi-moped"></i> Delivery</button>
                                </div>                              
                            </div>
                        </div>
                    </div>

                    <!--New Order Panel-->
                    <div class="row  current-order" >
                        <div class="col-md-12">
                        <div class="table-responsive">
                            <table id="table-new-order" class="table table-dark " style="font-size:11px !important">
                                <thead>
                                    <tr>
                                        <th style="width: 50%;">ITEM</th>
                                        <th style="width: 5%; text-align: right;">QTY</th>
                                        <th style="width: 10%; text-align: right;">PRICE</th>                                
                                        <th style="width: 5%; text-align: right;">DISC.</th>
                                        <th style="width: 5%; text-align: right;">TAX</th>
                                        <th style="width: 20%; text-align: right;">TOTAL</th>
                                        <th style="width: 5%; text-align: right;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Summer Delight Bannana Split</td>
                                        <td style="text-align: right;">1</td>
                                        <td style="text-align: right;">12.99</td>
                                        <td style="text-align: right;">0.0</td>
                                        <td style="text-align: right;">0.0</td>
                                        <td style="text-align: right;">12.99</td>
                                        <td style="text-align: right;"><i style="font-size:14px;" class="mdi mdi-delete text-danger"></i></td>
                                    </tr>
                                    <tr>
                                        <td>Summer Delight Bannana Split With Special Topping</td>
                                        <td style="text-align: right;">1</td>
                                        <td style="text-align: right;">12.99</td>
                                        <td style="text-align: right;">0.0</td>
                                        <td style="text-align: right;">0.0</td>
                                        <td style="text-align: right;">12.99</td>
                                        <td style="text-align: right;"><i style="font-size:14px;" class="mdi mdi-delete text-danger"></i></td>
                                    </tr>
                                </tbody>
                                
                            </table>
                        </div>
                        </div>
                    </div>
                </div>
                <!--New Order Totals-->
                <div class="card-box bg-inverse" style="margin-top:2px;">
                   
                        <div class="row " style="padding: 5px 15px 0px 15px; margin-bottom: 0px;">
                            <div class="col-sm-4">
                                <button class="btn btn-sm btn-primary"><i class="mdi mdi-printer"></i> Fast Print</button>                            
                            </div>
                            <div class="col-sm-8" style="text-align: right;">
                                <p class="text-white" style="font-weight: 500;"><i class="mdi mdi-wallet-outline"></i> TIP: <input style="border:none; font-weight: 500; background: transparent; color:white; text-align:right; width: 30%" value="0.0"></p>
                                <p class="text-white" style="font-weight: 500;"><i class="mdi mdi-calculator"></i> Total: <input style="border:none; font-weight: 500; color:white; background: transparent; text-align:right;  width: 30%" value="0.0"></p>
                            </div>           
                        </div>  
                     
                    <div class="row" style="padding: 0px 15px 15px 15px; margin-top: 0px; ">
                        <div class="col-sm-12" >
                            <button class="btn btn-sm btn-danger"><i class="mdi mdi-delete"></i> Cancel</button>
                            <button class="btn btn-sm btn-warning"><i class="mdi mdi-pencil"></i> Draft</button>
                            <button class="btn btn-sm btn-success"><i class="mdi mdi-account-cash"></i> Quick Invoice</button>
                            <button class="btn btn-sm btn-info"><i class="mdi mdi-cash-register"></i> Place Order</button>
                        </div>

                    </div>      
                   
                </div>
            </div>

            <!--Running Orders-->
            <div class="col-md-2 col-lg-2 col-xl-3 col-sm-6 col-xs-6" >
                <div class="card-box" style="padding: 5px 1px 2px 1px; margin-bottom: 0px;">
                    
                    <!--Search Orders-->
                    <div class="row" style="margin-bottom: 0.5rem!important;">
                        
                        <div class="col-sm-12">
                            <h5 style="font-size:14px;">RUNNING ORDERS <i class="mdi mdi-refresh"></i></h5>
                            <div class="search-box d-inline-block" style="margin-bottom: 0.5rem!important;">
                                <div class="position-relative">
                                <input type="text" class="form-control" id="searchItemList" placeholder="Customer Name, Order No ...">
                                <i class="bx bx-search-alt search-icon"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--Search End-->
                    <!--Existing Orders Panel-->
                    <div class="row running-orders" >
                        <div class="col-md-12">
                        <div class="table-responsive">
                            <table id="table-existing-orders" class="table table-dark mb-0" style="font-size:11px !important">
                                <thead>
                                    <tr>
                                        <th></th>
                                        <th style="width: 20%;">Order No.</th>
                                        <th style="width: 50%; text-align: right;">Customer Name</th>
                                        <th style="width: 30%; text-align: right;">TOTAL</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td><input type="checkbox" class="checkbox"></td>
                                        <td>468</td>
                                        <td>Walk-in</td>
                                        <td style="text-align: right;">12.99</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        </div>
                    </div>
                </div>
                 <!--Running Order Actions-->
                 <div class="card-box bg-inverse">
                    
                    <div class="row" style="padding: 2px; margin-bottom: 0px;">
                        <div class="col-md-12" style="margin-bottom: 2px;" >
                            <button class="btn btn-sm btn-primary col-md-12"><i class="mdi mdi-delete"></i> Modify Order</button>                            
                        </div>
                        <div class="col-md-6" style="margin-bottom: 2px;">
                            <button class="btn btn-sm btn-success col-md-12"><i class="mdi mdi-account-cash"></i> Invoice</button>
                        </div>    
                        <div class="col-md-6" style="margin-bottom: 2px;">
                            <button class="btn btn-sm btn-info col-md-12"><i class="mdi mdi-cash-register"></i> Print Bill</button>
                        </div>
                        <div class="col-md-12" style="margin-bottom: 2px;">
                            <button class="btn btn-sm btn-danger col-md-12"><i class="mdi mdi-delete"></i> Cancel Order</button>
                        </div>
                    </div>
                </div>
            </div>            
        </div>
        
    </div>
</div>
<script src="/assets/libs/jquery-ui-dist/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js" integrity="sha512-zMfrMAZYAlNClPKjN+JMuslK/B6sPM09BGvrWlW+cymmPmsUT1xJF3P4kxI3lOh9zypakSgWaTpY6vDJY/3Dig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(document).ready(function () {  
        set_screen_height();
    });

    function set_screen_height(){ 
        var h = getViewPort();
            var height = h.height;
            var newheight = height-120;
            var orderheight = height-275;

            $(".full-container").css({'height': newheight});

            $(".categories").css({'height': newheight});
            $(".categories").css({'overflow-y': 'auto', 'overflow-x': 'hidden'});

           
            $(".items").css({'height': newheight});
            $(".items").css({'overflow-y': 'auto', 'overflow-x': 'hidden'});
            

            $(".current-order").css({'height': orderheight});
            $(".current-order").css({'overflow-y': 'auto', 'overflow-x': 'hidden'});

            $(".running-orders").css({'height': orderheight});
            $(".running-orders").css({'overflow-y': 'auto', 'overflow-x': 'hidden'});

            //console.log(newheight);
    }

     function getViewPort() {
          var e = window,
          a = 'inner';
          if (!('innerWidth' in window)) {
              a = 'client';
              e = document.documentElement || document.body;
          }

          return {
              height: e[a + 'Height']
          };
      }
</script>