<style>
    .fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background-color: #ebeff2;
        border: none;
    }
    .tab-content {
        border: none !important;
    }
    .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);
     }
    }
    }
    .card.card-box {
        padding: 3px !important;
        cursor: pointer !important;
    }
    .card-img-top{
        object-fit: cover !important;
        width: 100% !important;
        height: 150px !important;
        margin:0 !important;
    }
    #Add_customer{
        padding: 7px 12px !important;
    }
    .currect_order_card_one{
        position:relative;
        height:99.4% !important;
        height: 87vh
    }
    .currect_order_card_two{
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        margin:0 !important;
        border-radius:0px 0px 5px 5px;
    }
    .running_card_one{
        position:relative;
        height:99.4% !important;
        height: 82vh;
    }
    .running_card_two{
        position:absolute;
        bottom:0;
        right:0;
        left:0;
        margin:0 !important;
        border-radius:0px 0px 5px 5px;
    }
    .running_order_cards{
        height: 101px !important;
        padding: 4px 0px 0px 10px !important;
    }
    .card-box{
        padding:6px!important;
        margin-bottom:0px;
    }
    .productscardformargin{
        margin-bottom:25px!important;
    }
    input.product_discount {
        width: 80px;
        border: none;
        text-align: right;
    }
    input.product_qty {
        width: 80px;
        border: none;
        text-align: right;
    }
    /* Runing Order  */
    .card-content {
        display: none;
    }
    .card-content.active {
        display: block;
    }
    .toggle-arrow::after {
        content: '\25B6';
        float: right;
        font-size: 1.5rem;
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;
    }
    .toggle-arrow.active::after {
        transform: rotate(90deg);
        color: #8d998a;
    }
    .balance-order-toggle-arrow::after {
        content: '\25B6';
        float: right;
        font-size: 1.5rem;
        transform: rotate(0deg);
        transition: transform 0.3s ease-in-out;
    }
    .balance-order-toggle-arrow.active::after {
        transform: rotate(90deg);
        color: #8d998a;
    }
    .card.running_order_crads {
        cursor: pointer;
    }
    .card.balance_order_cards {
        cursor: pointer;
    }
    .card-text {
        color: #da786c !important;
    }
    .span_order_number{
        color: #da786c !important;
    }
    .btn-link {
        font-weight: 400;
        color: #5c6d55;
        border-radius: 0;
    }
    .btn-link:hover {
        font-weight: 400;
        color: #8d998a;
        border-radius: 0;
    }
    .running_order_crads{
        padding: 6px 12px 6px 12px;
        box-shadow: 1px 3px 6px 2px rgba(0, 0, 0, 0.1);
    }
    .balance_order_cards{
        padding: 6px 12px 6px 12px;
        box-shadow: 1px 3px 6px 2px rgba(0, 0, 0, 0.1);
    }
    select#for_appending_staffs {
        border-radius: 5px;
    }
    span.running_order_span {
        font-size: 12px;
        font-weight: bold;
    }
    span.span_order_number {
        font-size: 14px;
        font-weight: bold;
        color:red;
    }
    .get_category_name {
        transition: all 0.3s ease;}
    .zoomed {
        transform: scale(1.1);
        margin: 10px;
    }
    #runing_order_main_div{
        height: 55vh;
        overflow: hidden;
        overflow-y: auto;
    }
    #balance_order_main_div{
        height: 55vh;
        overflow: hidden;
        overflow-y: auto;
    }
    #drop_down_btn{
        display: none;
    }
    #main_category_div{
        display: block;
    }
    #main_category_div{
        height: 79.5vh;    overflow: hidden;overflow-y: auto;
    }
    .main_div_of_products_cards{
        height: 79.5vh;    overflow: hidden;overflow-y: auto;
    }
    .cart_table_view_height{
        height: 60vh;
    }
    .order_type_btn{
        transition: transform 0.3s ease;
    }
    .order_type_btn.active {
        background-color: #007bff;
        color: #fff;
        animation-name: pulse;
        animation-duration: 1.5s;
        animation-iteration-count: infinite;
        width:32%;
        margin-left:2px;
        margin-right:2px;
    }
    .main_div_of_products_cards_and_category{
        height: 89vh;
    }
    .running_order_main_div{
        height: 89vh; padding:0 !important
    }
    .loader {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        height: 100%;
        z-index: 9999;
        background: url('https://hmspk.com/assets/images/page-loader-1.gif') 50% 50% no-repeat ;
        display: none;
    }
    .nav-tabs a {
        color: #3a615d;
        font-size: 10px;
        font-weight: 600;
    }
    ::-webkit-scrollbar {
        width: 6px; /* width of the scrollbar */
    }
    ::-webkit-scrollbar-track {
        background: #f1f1f1; /* color of the track */
    }
    ::-webkit-scrollbar-thumb {
        background: #888; /* color of the thumb */
        border-radius: 6px; /* roundness of the thumb */
    }
    ::-webkit-scrollbar-thumb:hover {
        background: #555; /* color of the thumb on hover */
    }
    @keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.05);
        }
        100% {
            transform: scale(1);
        }
    }
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        #for_appending_all_products{
            margin-top: 10px;
        }
        #drop_down_btn{
            display: block;
        }
        #main_category_div{
            display: none;
        }
        #runing_order_main_div{
            height: 60vh !important;
            overflow: hidden;
            overflow-y: auto;
        }
        #balance_order_main_div{
            height: 60vh!important;
            overflow: hidden;
            overflow-y: auto;
        }
        /* #for_appending_staffs_div{
          width: 100%;
        }  */
        /* #for_appending_customers_div{
           width: 100%;
         }  */
    }
    body{
        padding-bottom: 0px !important;
    }
    .card-title{
        white-space: nowrap; /* Prevent the text from wrapping */
        overflow: hidden; /* Hide the overflow */
        text-overflow: ellipsis; /* Show ellipsis (...) when text overflows */
    }
</style>
<div style="margin-top:50px">
    <div class="container-full" style="padding: 15px 15px 0px 15px;">
        <div class="row" >
            <!-- loader start-->
            <div id="loader" class="loader"></div>
            <!-- loader End-->
            <!--Item Pictures-->
            <div class="col-md-6 col-lg-6 col-xl-6 col-sm-6 col-xs-6 main_div_of_products_cards_and_category ">
                <div class="row" style="height: 100%" >
                    <div class="card-box" style="display:inline-block; padding: 5px 1px 5px 1px; height: 99.4%; width:100%;" >
                        <!-- Search Start  -->
                        <div class="col-md-12 col-lg-12 col-xl-12 col-sm-12 col-xs-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..." autofocus>
                                    <i class="bx bx-search-alt search-icon"></i>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-md-6 col-lg-6 col-xl-6 col-sm-6 col-xs-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="searchItemListAddons" placeholder="Search Add ons..." autofocus>
                                    <i class="bx bx-search-alt search-icon"></i>
                                </div>
                            </div>
                        </div> -->
                        <!-- Search End  -->
                        <div class="dropdown col-md-12 col-lg-12 col-sm-12" id="drop_down_btn">
                            <button class="dropdown-toggle  btn btn-sm btn-inverse" type="button" id="menu1" data-toggle="dropdown" style="width: 100%;" >Categories
                                <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="menu1" id="cateogy_drop_down_btn">
                            </ul>
                        </div>
                        <div class="col-md-12 col-lg-3 col-xl-3 col-sm-12 col-xs-3  categories"  id="main_category_div">
                            <div class="panel" id="sub_category_div">
                            </div>
                        </div>
                        <div class="col-md-12 col-lg-9 col-xl-9 col-sm-12 col-xs-9 main_div_of_products_cards">
                            <div class="row" id="for_appending_all_products" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--Current Order-->
            <div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4" style="height: 89vh">
                <div class="card-box currect_order_card_one">
                    <div class="row" >
                        <div class="col-sm-12  col-md-3" id="for_appending_staffs_div">
                            <!--<div class="search-box me-2 d-inline-block" style="margin-bottom: 0.5rem!important;">-->
                            <div style="margin-bottom: 0.5rem!important;">
                                <select class="form-control" id="for_appending_staffs">
                                </select>
                                <!--<span class="input-group-btn">-->
                                <!--  <button class="btn btn-inverse" type="button " id="Add_staff_listing"><i class="fa fa-plus"></i></button>-->
                                <!--</span>-->
                            </div>
                        </div>
                        <div class="col-sm-12 col-md-9" id="for_appending_customers_div">
                            <!--<div class="search-box me-2 d-inline-block" style="margin-bottom: 0.5rem!important;">-->
                            <div class="input-group" style="margin-bottom: 0.5rem!important;">
                                <!-- <select class="form-control" id="for_appending_customers">
                                </select> -->
                                <input type="hidden" id="for_appending_customers" name="for_appending_customers">
                                <input type="hidden" style="border-radius: 5px;"  id="for_customer_search_customers" name="for_customer_search_customers"  class="form-control select2-offscreen" onchange="updating_hidding_customer_id()" oninput="getting_customers();">
                                <span class="input-group-btn">
                                            <button class="btn btn-inverse" type="button " id="Add_customer"><i class="fa fa-plus"></i></button>
                                </span>
                            </div>
                        </div>
                        <!--Add Customer-->
                        <!--<div class="col-sm-1">-->
                        <!--    <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-->
                    <button type="button" class="btn btn-sm btn-primary  waves-effect waves-light col-sm-3 col-md-4 col-lg-4 order_type_btn active" data-typeid="Dine-in" ><i class="fa fa-table" aria-hidden="true"></i> Dine-In</button>
                    <button type="button"   class="btn btn-sm btn-info  waves-effect waves-light col-sm-3 col-md-4 col-lg-4 order_type_btn"  data-typeid="Take away"><i class="mdi mdi-car"></i><i class="fa fa-shopping-bag" aria-hidden="true"></i> Take-Away</button>
                    <button type="button" class="btn btn-sm btn-warning  waves-effect waves-light col-sm-3 col-md-4 col-lg-4 order_type_btn" data-typeid="Delivery"><i class="fa fa-truck" aria-hidden="true"></i> Delivery</button>
                    <!--New Order Panel-->
                    <div class="col-md-12 col-sm-12 col-xl-12 col-lg-12">
                        <div class="row g-3">
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6 text-center bg-inverse  m-t-5 text-light " id="displaying_order_no_on_cart" style="display: none; text-align: left;"> </div>
                            <div class="col-md-6 col-sm-6 col-lg-6 col-xl-6 text-center bg-inverse  m-t-5 text-light" id="displaying_customer_name_no_on_cart" style="display: none; text-align: right;"> </div>
                        </div>
                    </div>
                    <div class="row  current-order" >
                        <div class="col-md-12 col-sm-12 col-lg-12 col-xl-12">
                            <div class="table-responsive cart_table_view_height">
                                <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: 10%; text-align: right;">PRICE</th>
                                        <th style="width: 5%; text-align: right;">QTY</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>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--New Order Totals-->
                    <div class="card-box bg-inverse currect_order_card_two" 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" style="display:none"><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; display:none"><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" id="tip_on_final_cart" onkeyup="adding_tip_on_cart()"></p>
                                <p class="text-white" style="font-weight: 500;"><i class="mdi mdi-calculator"></i> Total Qty: <input style="border:none; font-weight: 500; color:white; background: transparent; text-align:right;  width: 30%" id="final_cart_total_qty" value="0.0" readonly></p>
                                <p class="text-white" style="font-weight: 500;"><i class="mdi mdi-calculator"></i> Total Amount: <input style="border:none; font-weight: 500; color:white; background: transparent; text-align:right;  width: 30%" id="final_cart_total" value="0.0" readonly></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-primary col-sm-4" id="clear_cart_btn"><i class="fa fa-refresh" id="refresh_runing_orders" style="font-size:13px;cursor: pointer;"></i> Clear</button>
                            <button class="btn btn-sm btn-warning col-sm-4" style="display:none"><i class="mdi mdi-pencil"></i> Draft</button>
                            <button class="btn btn-sm btn-success col-sm-4" id="create_quick_invoice"><i class="fa fa-print" aria-hidden="true"></i> Invoice</button>
                            <button class="btn btn-sm btn-info col-sm-4" id="add_place_order"><i class="fa fa-cutlery" aria-hidden="true"></i> Place Order</button>
                            <!--</div>-->
                        </div>
                    </div>
                </div>
            </div>
            <!--Running Orders-->
            <div class="col-md-2 col-lg-2 col-xl-2 col-sm-2 col-xs-2  running_order_main_div" >
                <div class="card-box running_card_one">
                    <!--Search Orders-->
                    <div class="row" style="margin-bottom: 0.5rem!important;">
                        <div class="col-sm-12">
                            <h5 style="font-size:14px;font-weight: bold;" class="text-center"><i class="zmdi zmdi-fullscreen pull-left" style="font-size:22px;cursor: pointer;font-weight: bold;" onclick="toggleFullScreen()" ></i> ORDERS <i class="fa fa-refresh pull-right" id="refresh_runing_orders"  style="font-size:18px;cursor: pointer;"></i></h5>
                        </div>
                    </div>
                    <!--Search End-->
                    <!--Existing Orders Panel-->
                    <ul class="nav nav-tabs" role="tablist">
                        <li role="presentation" class="active"><a href="#running_orders_tab" aria-controls="running_orders_tab" role="tab" id="running_order_li_tab" data-toggle="tab" onclick="getting_runing_order()" >Running</a></li>
                        <li role="presentation"><a href="#balance_orders_tab" aria-controls="balance_orders_tab" role="tab" data-toggle="tab" id="balance_order_li_tab" onclick="getting_orders_with_balance()" >Balance</a></li>
                    </ul>
                    <div class="row running-orders" >
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="running_orders_tab">
                                <!-- serech Runing Orders start -->
                                <div class="search-box d-inline-block" style="margin-bottom: 0.5rem!important;">
                                    <div class="position-relative">
                                        <input type="text" class="form-control" id="search_runing_order_list" placeholder="Customer Name, Order No ...">
                                        <i class="bx bx-search-alt search-icon"></i>
                                    </div>
                                </div>
                                <!-- serech Runing Orders End -->
                                <div id="runing_order_main_div">
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="balance_orders_tab">
                                <!-- serech Runing Orders start -->
                                <div class="search-box d-inline-block" style="margin-bottom: 0.5rem!important;">
                                    <div class="position-relative">
                                        <input type="text" class="form-control" id="search_balance_order_list" placeholder="Customer Name, Order No ...">
                                        <i class="bx bx-search-alt search-icon"></i>
                                    </div>
                                </div>
                                <!-- serech Runing Orders End -->
                                <div id="balance_order_main_div">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-box bg-inverse running_card_two">
                        <div class="row" style="padding: 2px; margin-bottom: 0px;">
                            <div class="col-md-12 hidden" style="margin-bottom: 2px;" >
                                <button class="btn btn-sm btn-primary col-md-12 col-sm-12 "  id="modify_order_btn"><i class="fa fa-pencil" aria-hidden="true"></i> Modify Order</button>
                            </div>
                            <div class="col-md-12 hidden" style="margin-bottom: 2px;">
                                <button class="btn btn-sm btn-info  col-md-12 col-sm-12" id="show_order_detail"><i class="fa fa-info-circle" aria-hidden="true"></i> Order Detail</button>
                            </div>
                            <div class="col-md-12 hidden" style="margin-bottom: 2px;">
                                <button class="btn btn-sm btn-success col-md-12 col-sm-12" id="create_invoice_of_runing_order"><i class="fa fa-print" aria-hidden="true"></i> Invoice</button>
                            </div>
                            <div class="col-md-6" style="margin-bottom: 2px;">
                              <button id="btnCashRegister" class="btn btn-sm btn-warning waves-effect waves-light col-md-12 col-sm-12"><i class="fa fa-dollar"></i> Cash Register</button>
                            </div>   
                            <div class="col-md-6" style="margin-bottom: 2px;">
                            <button id="btnCashTill" class="btn btn-sm btn-info  waves-effect waves-light col-md-12 col-sm-12"><i class="fa fa-lock"></i> Close Till</button>
                            </div>
                            <div class="col-md-12" style="margin-bottom: 2px;">
                                <button class="btn btn-sm btn-success col-md-12 col-sm-12" id="recent_invoices" onclick="getting_recent_invoices()"><i class="fa fa-print" aria-hidden="true"></i> Recent Invoices</button>
                            </div>
                            <div class="col-md-12" style="margin-bottom: 2px;">
                                <button class="btn btn-sm btn-primary col-md-12 col-sm-12" id="print_bill"><i class="fa fa-print" aria-hidden="true"></i> Print Bill</button>
                            </div>
                            <div class="col-md-12" style="margin-bottom: 2px;">
                                <button class="btn btn-sm btn-danger col-md-12 col-sm-12" id="cancel_order_btn"><i class="fa fa-ban" aria-hidden="true" ></i> Cancel Order</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Running Order Actions-->
        <!--Add Brand Modal-->
        <div id="addbusinessbrand" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="addbusinessbrand" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:90%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Add a new Customer</h4>
                    </div>
                    <div class="modal-body">
                        <form role="form" id="customerform">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Reference #</label>
                                        <input readonly="readonly" type="text" id="txt-customer-id"  class="form-control" placeholder="Reference #">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Name <span class="customer-color"></span></label>
                                        <input  type="text" id="txt-customer-name" name="customer_name" onblur="$(this).val(ucwords($(this).val()));" class="form-control alpha" placeholder="Name" required>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Email</label>
                                        <input  type="email"  id="txt-customer-email" name="customer_email" class="form-control" parsley-type="email" parsley-trigger="change"  placeholder="Email">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Cell</label>
                                        <input  type="text" id="txt-customer-cell" name="customer_cell" class="form-control numeric" placeholder="Cell Phone" required>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Area</label>
                                        <select class="form-control" id="txt-customer-area"  name="customer_area">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Address</label>
                                        <input  type="text" id="txt-customer-address" name="customer_address"  class="form-control" placeholder="Address">
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="form-group ">
                                        <label class="control-label">Birthday</label>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <select  id="txt-customer-bday" name="customer_bday" class="form-control">
                                                    <option value=""></option>
                                                </select>
                                            </div>
                                            <div class="col-md-8">
                                                <select  id="txt-customer-bmonth" name="customer_bmonth" class="form-control">
                                                    <option value=""></option>
                                                    <option value="January">January</option>
                                                    <option value="February">February</option>
                                                    <option value="March">March</option>
                                                    <option value="April">April</option>
                                                    <option value="May">May</option>
                                                    <option value="June">June</option>
                                                    <option value="July">July</option>
                                                    <option value="August">August</option>
                                                    <option value="September">September</option>
                                                    <option value="October">October</option>
                                                    <option value="November">November</option>
                                                    <option value="December">December</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Profession</label>
                                        <input type="text" id="txt-customer-profession" name="customer_profession"  class="form-control" placeholder="Profession">
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group has-feedback">
                                        <label class="control-label">Referencing Staff</label>
                                        <select  type="text" id="txt-customer-refstaff" name="customer_refstaff"  class="form-control" placeholder="staff">
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4" id="div_careof" style="display:none">
                                    <div class="form-group">
                                        <label class="control-label">Care Of:</label>
                                        <input onchange="oncareofchange();"  type="hidden" id="txt-customer-co" name="customer_co"  class="form-control" >
                                    </div>
                                </div>
                                <div class="col-md-4" id="div_careof_display" style="display:block">
                                    <div class="form-group">
                                        <label class="control-label">Care Of:</label>
                                        <input  type="text" id="txt-customer-display" name="txt-customer-display"  class="form-control" >
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="txt-customer-gender" class="control-label">Gender</label>
                                        <select tabindex="2" type="text" class="form-control numeric" placeholder="Gender" id="txt-customer-gender" name="customer_gender">
                                            <option value="M">Male</option>
                                            <option value="F" selected="selected">Female</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <div class="form-group">
                                        <label for="txt-customer-loyalty" class="control-label">Loyalty Points</label>
                                        <input  type="text" id="txt-customer-loyalty"  class="form-control" placeholder="0">
                                    </div>
                                </div>
                            </div>
                            <input type="hidden" id="username" name="username" value="<?php echo $this->session->userdata('username') ?>">
                            <input type="hidden" id="businessid" name="businessid" value="<?php echo $this->session->userdata('businessid') ?>">
                            <div style="display:none" class="col-lg-4 hidden-md hidden-sm hidden-xs">
                                <div id = "imgdisplay" style="display:block; text-align: center;">
                                    <img src="<?php echo base_url(); ?>assets/images/users/avatar-1.jpg" id="img-customer" name="img-customer" alt="customer" style="width:100%"/>
                                    <input id="img-customer-file" type="hidden" value="avatar-1.jpg"/>
                                    <br/>
                                    <button onclick="changepic();"  type="button" class="btn btn-sm btn waves-effect w-md waves-success m-b-5">Change</button>
                                </div>
                                <div id = "imguploader" style="display:none;">
                                    <input id="img-uploader-customer" name="img-uploader-customer" data-height="300" type="file" class="dropify"  />
                                </div>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <button  type="submit" class="btn btn-custom waves-effect waves-light">Save</button>
                    </div>
                    </form>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Brand Modal-->
        <!-- Order Detail Modal-->
        <div id="order_detail_modal" class="modal fade in" tabindex="-1" data-toggle="modal"  role="dialog" aria-labelledby="order_detail_modal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:90%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel"></h4>
                    </div>
                    <div class="modal-body" id="mymodalforinvoice">
                        <div class="container-fluid" >
                            <div class="row">
                                <div class="col-md-4">
                                    <span class="running_order_span" > Order No :  </span><span id="order_number_for_modal" ></span>
                                    <input type="hidden" id="order_id_for_api" value="0">
                                </div>
                                <div class="col-md-4">
                                    <span class="running_order_span" > Customer Name : </span><span id="customer_name_for_modal"></span>
                                </div>
                                <div class="col-md-4">
                                    <span class="running_order_span" > Staff:  </span> <span id="staff_for_modal"></span>
                                </div>
                                <!-- Table Start -->
                                <div class="col-md-12" style="margin-top:20px">
                                    <div class="table-responsive" style="max-height: 211px;">
                                        <table id="runing_order_detail_table"  class="table table-dark " style="font-size:11px !important">
                                            <thead style="background: #eaeaea;">
                                            <tr>
                                                <th style="width: 40%;">ITEM</th>
                                                <th >PRICE</th>
                                                <th >QTY</th>
                                                <th >DISC.</th>
                                                <th >TAX PERC</th>
                                                <th >TAX Amount</th>
                                                <th >TOTAL</th>
                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                                <!-- Table End -->
                                <div class="col-md-3" style="margin-top:10px;">
                                    <span class="running_order_span" >Total Item :  </span><span id="total_item_for_modal" ></span>
                                </div>
                                <div class="col-md-3" style="margin-top:10px;">
                                    <span class="running_order_span" > Sub Total: </span><span id="subtoal_for_modal"></span>
                                </div>
                                <div class="col-md-3" style="margin-top:10px;">
                                    <span class="running_order_span" > Total Discount : </span> <span id="total_discount_for_modal"></span>
                                </div>
                                <!-- Appending gst  -->
                                <div id="gst_perc_and_amount">
                                </div>
                                <div class="col-md-3" style="margin-top:10px;">
                                    <span class="running_order_span" > Total Tax : </span> <span id="total_tax_for_modal"></span>
                                </div>
                                <div class="col-md-12 text-center" style="margin-top:10px; background: #eaeaea;">
                                    <h3 id="total_payaable"></h3>
                                    <input type="hidden" id="total_payable_hidden_feild" value="0">
                                </div>
                            </div>
                            <div class="col-md-12 text-center" style="margin-top:20px;" id="add_payment_title"> <h3>Add Payment </h3></div>
                            <div class="col-md-4" id="paymnet_mode_select_box">
                                <label class="form-label">Payment Mode</label>
                                <select class="form-control" id="select_payment" name="payment_mode" onchange="payment_method_calculating()">
                                    <option value="Cash"> Cash </option>
                                    <option value="Card"> Credit Card </option>
                                    <option value="Card"> Debit Card </option>
                                    <option value="Check"> Check </option>
                                    <option value="Online"> Online </option>
                                    <option value="Mixed"> Mixed </option>
                                </select>
                            </div>
                            <div id="payment_mode_feild">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <!-- <button  type="button" class="btn btn-custom waves-effect waves-light" id="create_invoice_modal_btn"  disabled>Create Invoice</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Order Detail Modal-->
        <!-- Order invoice  Modal-->
        <div id="order_print_invoice_modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="order_print_invoice_modal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:90%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body" id="order_print_invoice_modal_body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <!-- <button  type="button" class="btn btn-custom waves-effect waves-light" id="create_invoice_modal_btn"  disabled>Create Invoice</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Order invoice Modal-->
        <!-- Order balance invoice  Modal-->
        <div id="order_balance_invoice_modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="order_balance_invoice_modal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:90%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    </div>
                    <div class="modal-body" id="order_balance_invoice_modal_body">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <!-- <button  type="button" class="btn btn-custom waves-effect waves-light" id="create_invoice_modal_btn"  disabled>Create Invoice</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End Order Balance invoice Modal-->
        <!-- recent invoice  Modal-->
        <div id="recent_invoice_modal" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="order_balance_invoice_modal" aria-hidden="true" style="display: none;">
            <div class="modal-dialog modal-lg" style="width:90%">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="custom-width-modalLabel">Recent Invoices</h4>
                    </div>
                    <div class="modal-body" id="recent_invoice_modal_body">
                        <div class="container-fluid">
                            <div class="col-md-12 col-sm-12 col-lg-12 col-sm-12">
                                <table class="table" id="invoice-table">
                                    <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Invoice No</th>
                                        <th>Order No</th>
                                        <th>Customer Name</th>
                                        <th>Subtotal</th>
                                        <th>Discount</th>
                                        <th>Tax Amount</th>
                                        <th>Net Amount</th>
                                        <th>Paid</th>
                                        <th>Balance</th>
                                        <th>Date</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                        <!-- <button  type="button" class="btn btn-custom waves-effect waves-light" id="create_invoice_modal_btn"  disabled>Create Invoice</button> -->
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!--End recent invoice Modal-->
        <!--hidden form start-->
        <form id="hiddenFormforprintbill" action="<?php echo base_url('open_order_invoice_for_print_pos_bill/') ?>" method="post" target="_blank">
            <input type="hidden" name="order-id" id="order-id" value="">
        </form>
        <!--hidden form End -->
    </div>
</div>
<?php
$taxes_data=[];
if(isset($taxes)){
    $taxes_data = $taxes;
    foreach($taxes as $tax){
        $tax['tax_name'];
        $tax['tax_percentage'];
    }
}
?> 
<?php include __DIR__ .'/modals/cash_modal.php'; ?>  
 <?php include  __DIR__ .'/modals/cash_till_modal.php'; ?>  
<input type="hidden" id="session_user_mobile" value="<?php echo $this->session->userdata('user_mobile') ?>">
<!--<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>
<!-- JavaScript -->
<!--<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>-->
<!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>--> 
 <script src="<?php echo base_url();?>assets/js/bootstrap.min.js"></script>    
<script>
    var all_product_data_for_search  = [];
    var all_runing_order_data_for_search  = [];
    var all_balance_order_data_for_search  = [];
    $(document).ready(function () {
        var taxes_data = <?php echo json_encode($taxes_data); ?>;
        fillBday();
        // remove product from table
        $(document).on('click','.remove_product_from_table',function(){
            $(this).closest("tr").remove();
            final_calculation_for_total();
        });
        // select 2 
        //  $("#for_appending_customers").select2();
        $("#for_appending_staffs").select2('destroy');
        $("#for_appending_staffs").select2();
        // remove row from table and databse
        $(document).on("click",".remove_product_from_table_and_database",function(){
            var id_order_products = parseFloat($(this).closest("tr").find(".id_order_products").val());
            var order_id = $(".order_id_for_edit").val();
            var this_btn =   $(this);
            swal({
                title: "Are you sure?",
                text: "This action will remove all details of this product!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: 'btn-warning',
                confirmButtonText: "Yes, remove it!",
                closeOnConfirm: true
            }, function() {
                var delete_row = {
                    "url": "<?php echo base_url(); ?>restaurantapi/delete_order_row",
                    "method": "POST",
                    "timeout": 0,
                    "headers": {
                        "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                    },
                    "data":{
                        "order_id":order_id,
                        "id_order_products":id_order_products
                    },
                };
                $.ajax(delete_row).done(function (response) {
                    if(response >0){
                        this_btn.closest("tr").remove();
                        final_calculation_for_total();
                    }
                });
            });
        });
        // order type btn
        $(document).on('click','.order_type_btn',function() {
            $(".order_type_btn").removeClass("active");
            $(this).addClass("active");
        });
        $(document).on("click",".running_order_crads",function(event){
            event.stopPropagation();
            $("#table-new-order tbody").html('');
            $('.toggle-arrow').removeClass('active');
            $(this).find(".toggle-arrow").addClass('active');
            $('.card-content').removeClass('active');
            $(this).closest(".card").find(".card-content").toggleClass('active');
            var btn =  $(this);
            $(".running_order_crads").css("background-color", "");
            $('.toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var dataIdValue = $(this).data('id');
                    btn.closest(".card").css("background-color", "#ececec");
                    modify_order(dataIdValue);
                    return false;
                }else{
                    btn.closest(".card").css("background-color", "");
                }
            });
        });
        // balnce order cards 
        $(document).on("click",".balance_order_cards",function(event){
            event.stopPropagation();
            $("#table-new-order tbody").html('');
            $('.balance-order-toggle-arrow').removeClass('active');
            $(this).find(".balance-order-toggle-arrow").addClass('active');
            $('.card-content').removeClass('active');
            $(this).closest(".card").find(".card-content").toggleClass('active');
            var btn =  $(this);
            $(".balance_order_cards").css("background-color", "");
            $('.balance-order-toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var dataIdValue = $(this).data('id');
                    btn.closest(".card").css("background-color", "#ececec");
                    $("#table-new-order tbody").html('');
                    $("#displaying_order_no_on_cart").hide();
                    $("#displaying_order_no_on_cart").html('');
                    $("#displaying_customer_name_no_on_cart").html('');
                    $("#displaying_customer_name_no_on_cart").hide();
                    $("#for_appending_customers").val("");
                    return false;
                }else{
                    btn.closest(".card").css("background-color", "");
                }
            });
        });
        // for applying discount on product
        $(document).on('input','.product_discount , .product_qty',function(){
            var name = $(this).closest("tr").find('.product_name').val();
            var product_qty = parseFloat($(this).closest("tr").find('.product_qty').val());
            var product_price = parseFloat($(this).closest("tr").find('.product_price').val());
            var product_sale_tax = parseFloat($(this).closest("tr").find('.product_sale_tax').val());
            var product_sale_tax_amount = parseFloat($(this).closest("tr").find('.product_sale_tax_amount').text());
            var product_final_price = $(this).closest("tr").find('.product_final_price').text();
            var product_discount = parseFloat($(this).closest("tr").find('.product_discount').val());
            if(isNaN(product_discount)){
                product_discount=0;
                parseFloat($(this).closest("tr").find('.product_discount').val(product_discount));
            }
            if(isNaN(product_qty)){
                product_qty=1;
                parseFloat($(this).closest("tr").find('.product_qty').val(product_qty));
            }
            if(product_discount > (product_price*product_qty)){
                product_discount=(product_price*product_qty);
                parseFloat($(this).closest("tr").find('.product_discount').val((product_price*product_qty)));
            }
            product_price = ((product_price*product_qty)-product_discount);
            var t_price = product_price;
            var taxAmount = (t_price * parseFloat(product_sale_tax)) / 100;
            var totalPrice = t_price + taxAmount;
            parseFloat($(this).closest("tr").find('.product_qty').val(isNaN(product_qty)? 0 :product_qty));
            $(this).closest("tr").find('.product_final_price').text(parseFloat(isNaN(totalPrice)? 0 :totalPrice).toFixed(2));
            parseFloat($(this).closest("tr").find('.product_sale_tax_amount').text(parseFloat(isNaN(taxAmount)? 0 :taxAmount).toFixed(2)));
            final_calculation_for_total();
        });
        $(document).on('click', '.product_qty, .product_discount ,#tip_on_final_cart', function() {
            this.select();
        });
        // ==========> add place order <======================
        $(document).on('click','#add_place_order', function(){
            var currect_order_data=[];
            var products_data=[];
            var order_type= $(".order_type_btn.active").data("typeid");
            // console.log(order_type);
            if(order_type=="" || order_type==null){
                swal({
                    title: 'Please Select order type',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var customer_id = $("#for_appending_customers").val() || 0;
            if(customer_id ==0 || customer_id==""){
                swal({
                    title: 'Please Select Customer',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var businessid = $("#businessid").val();
            var username = $("#username").val();
            var final_cart_total = $("#final_cart_total").val();
            var final_cart_total_qty = $("#final_cart_total_qty").val();
           var staff_id = $("#for_appending_staffs").val();
            var staff_name = $("#for_appending_staffs option:selected").text();
            if (order_type !== 'Take away') {
                // For order types other than "Take away"
                if (staff_id == 0) {
                    swal({
                        title: 'Please Select Staff',
                        type: 'warning',
                        confirmButtonText: 'OK!'
                    });
                    return false; // Stop further execution
                }
            } else {
                // For "Take away" order type
                if (staff_id == 0 || staff_id === '' || staff_name === 'Select Staff') {
                    staff_name = ''; // Set staff_name to empty string
                    staff_id = 0; // Set staff_id to 0
                }
            }
            var cart_table_records =  $('#table-new-order tbody tr').length;
            if(cart_table_records < 1){
                swal({
                    title: 'Cart Is Empty',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var order_id_for_edit =  $(".order_id_for_edit").val() || 0;
            $('#table-new-order tbody tr').each(function() {
                var name = $(this).find('.product_name').val();
                var product_qty = parseFloat($(this).find('.product_qty').val());
                var product_price = parseFloat($(this).find('.product_price').val());
                var product_sale_tax = parseFloat($(this).find('.product_sale_tax').val());
                var product_sale_tax_amount = parseFloat($(this).find('.product_sale_tax_amount').text());
                var product_final_price = parseFloat($(this).find('.product_final_price').text());
                var product_discount = parseFloat($(this).find('.product_discount').val());
                var product_id = parseFloat($(this).find('.product_id').val());
                var category = $(this).find('.category_name').val();
                var brand_id = parseFloat($(this).find('.brand_id').val());
                var id_batch = $(this).find('.batch_id').val() || 0;
                var batch_number = $(this).find('.batch_number').val() || 0;
                var id_order_products = parseFloat($(this).find('.id_order_products').val()) || 0;
                products_data.push(
                    {"product_id" : product_id,
                        "product_name" : name,
                        "product_price" : product_price,
                        "product_qty" : product_qty,
                        "product_discount" : product_discount,
                        "product_sale_tax_perc" : product_sale_tax,
                        "product_sale_tax_amount" : product_sale_tax_amount,
                        "product_final_price" : product_final_price,
                        "category" : category,
                        "brand_id" : brand_id,
                        "id_batch" : id_batch,
                        "id_order_products" : id_order_products,
                        "batch_number" : batch_number
                    });
            });
            var data = currect_order_data;
            $(".loader").fadeIn("slow");
            var order_place = {
                "url": "<?php echo base_url(); ?>restaurantapi/place_order",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                },
                "data":{
                    "customer_id":customer_id,
                    "businessid":businessid,
                    "final_cart_total_qty":final_cart_total_qty,
                    "final_cart_total":final_cart_total,
                    "products":JSON.stringify(products_data),
                    "staff_name":staff_name,
                    "staff_id":staff_id,
                    "order_type":order_type,
                    "order_id_for_edit":order_id_for_edit,
                },
            };
            $.ajax(order_place).done(function (response) {
                $(".loader").fadeOut("slow");
                if(response.order_id > 0 ){
                    // $(".order_type_btn").removeClass("active");
                    if(response.flag == "Update"){
                        var warning_msg_of_inventory = "<ul class='left-align' style='text-align:left;'>";
                        $.each(response.inventry_warning_msg, function(index, msgs) {
                            warning_msg_of_inventory += "<li class='text-danger'>" + msgs + "</li>";
                        });
                        warning_msg_of_inventory += "</ul>";
                        swal({
                            title: 'Order Updated Successfully',
                            type: 'success',
                            text:warning_msg_of_inventory,
                            html: true,
                            confirmButtonText: 'OK!'
                        });
                        // $("#table-new-order tbody").html('');
                        // getting_runing_order(response.order_id);
                        getting_customers();
                        // getting_staff_list(staff_id);  
                        $('#for_appending_staffs').select2('destroy');
                        $('#for_appending_staffs').val(staff_id);
                        $('#for_appending_staffs').select2();
                        $("#for_appending_customers").val(customer_id);
                        $("#displaying_customer_name_no_on_cart").html('<h4 style="color:white;font-weight: bold">'+response.customer_name+' </h4>');
                        $("#displaying_customer_name_no_on_cart").show();  
                        $("#for_customer_search_customers").select2("data", { id: customer_id, customer_name: response.customer_name, customer_cell: ""});
                        if(response.running_order_data.length > 0){
                            $("#running_order_li_tab").text("Running ("+response.running_order_data.length +")");
                            all_runing_order_data_for_search=response;
                            var  html='';
                            $.each(response.running_order_data, function(index, order) {
                                var inputDate = order.order_date;
                                var dateObject = new Date(inputDate);
                                var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                                if(response.order_id == order.order_id){
                                    html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " style="background-color: rgb(236, 236, 236)" ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden active" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content active"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                }else{
                                    html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                }
                            });
                            $("#runing_order_main_div").html(html);
                         }
                    }else{
                        $("#table-new-order tbody").html('');
                        $("#for_appending_customers").val("");
                        $('#for_appending_staffs').select2('destroy');
                        $('#for_appending_staffs').val(0);
                        $('#for_appending_staffs').select2();
                        getting_customers();
                        fetchDefaultCustomer();
                        var inputDate = response.order_date;
                        var dateObject = new Date(inputDate);
                        var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                        var  cardhtml ='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number"> Order no: '+response.order_id+' </span> <br>  <span class="running_order_span"> Staff: '+response.staff+' </span>  </div><div class="col-md-2"> <button  class="btn btn-link toggle-arrow hidden" data-id="'+response.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span">Cust : '+response.customer_name+'</span><br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                        $("#runing_order_main_div").prepend(cardhtml);
                        var warning_msg_of_inventory = "<ul class='left-align' style='text-align:left;'>";
                        $.each(response.inventry_warning_msg, function(index, msgs) {
                            warning_msg_of_inventory += "<li class='text-danger'>" + msgs + "</li>";
                        });
                        warning_msg_of_inventory += "</ul>";
                        swal({
                            title: 'Order Placed Successfully',
                            text:warning_msg_of_inventory,
                            html: true,
                            type: 'success',
                            confirmButtonText: 'OK!'
                        });
                    }
                    final_calculation_for_total();
                }else{
                }
            });
        });
        // ==============> create Qucick Invoice start <=======================
        $(document).on('click','#create_quick_invoice', function(){
            var currect_order_data=[];
            var products_data=[];
            var order_type= $(".order_type_btn.active").data("typeid");
            if(order_type=="" || order_type==null){
                swal({
                    title: 'Please Select order type',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var customer_id = $("#for_appending_customers").val() || 0;
            if(customer_id ==0 || customer_id==""){
                swal({
                    title: 'Please Select Customer',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var businessid = $("#businessid").val();
            var username = $("#username").val();
            var final_cart_total = $("#final_cart_total").val();
            var final_cart_total_qty = $("#final_cart_total_qty").val();
            var staff_name = $("#for_appending_staffs option:selected").text();
            var staff_id = $("#for_appending_staffs").val();
            if (order_type !== 'Take away') {
                // For order types other than "Take away"
                if (staff_id == 0) {
                    swal({
                        title: 'Please Select Staff',
                        type: 'warning',
                        confirmButtonText: 'OK!'
                    });
                    return false; // Stop further execution
                }
            } else {
                // For "Take away" order type
                if (staff_id == 0 || staff_id === '' || staff_name === 'Select Staff') {
                    staff_name = ''; // Set staff_name to empty string
                    staff_id = 0; // Set staff_id to 0
                }
            }
            var cart_table_records =  $('#table-new-order tbody tr').length;
            if(cart_table_records < 1){
                swal({
                    title: 'Cart Is Empty',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
            var order_id_for_edit =  $(".order_id_for_edit").val() || 0;
            $('#table-new-order tbody tr').each(function() {
                var name = $(this).find('.product_name').val();
                var product_qty = parseFloat($(this).find('.product_qty').val());
                var product_price = parseFloat($(this).find('.product_price').val());
                var product_sale_tax = parseFloat($(this).find('.product_sale_tax').val());
                var product_sale_tax_amount = parseFloat($(this).find('.product_sale_tax_amount').text());
                var product_final_price = parseFloat($(this).find('.product_final_price').text());
                var product_discount = parseFloat($(this).find('.product_discount').val());
                var product_id = parseFloat($(this).find('.product_id').val());
                var category = $(this).find('.category_name').val();
                var brand_id = parseFloat($(this).find('.brand_id').val());
                var id_batch = $(this).find('.batch_id').val() || 0;
                var batch_number = $(this).find('.batch_number').val() || 0;
                var id_order_products = parseFloat($(this).find('.id_order_products').val()) || 0;
                products_data.push(
                    {"product_id" : product_id,
                        "product_name" : name,
                        "product_price" : product_price,
                        "product_qty" : product_qty,
                        "product_discount" : product_discount,
                        "product_sale_tax_perc" : product_sale_tax,
                        "product_sale_tax_amount" : product_sale_tax_amount,
                        "product_final_price" : product_final_price,
                        "category" : category,
                        "brand_id" : brand_id,
                        "id_batch" : id_batch,
                        "id_order_products" : id_order_products,
                        "batch_number" : batch_number
                    });
            });
            var data = currect_order_data;
            $(".loader").fadeIn("slow");
            var order_place = {
                "url": "<?php echo base_url(); ?>restaurantapi/place_order",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                },
                "data":{
                    "customer_id":customer_id,
                    "businessid":businessid,
                    "final_cart_total_qty":final_cart_total_qty,
                    "final_cart_total":final_cart_total,
                    "products":JSON.stringify(products_data),
                    "staff_name":staff_name,
                    "staff_id":staff_id,
                    "order_type":order_type,
                    "order_id_for_edit":order_id_for_edit,
                },
            };
            $.ajax(order_place).done(function (response) {
                $(".loader").fadeOut("slow");
                if(response.order_id > 0 ){
                    // $(".order_type_btn").removeClass("active");
                    if(response.flag == "Update"){
                        // $("#table-new-order tbody").html('');
                        // getting_runing_order(response.order_id);
                        $('#for_appending_staffs').select2('destroy');
                        $('#for_appending_staffs').val(staff_id);
                        $('#for_appending_staffs').select2();
                        $("#displaying_customer_name_no_on_cart").html('<h4 style="color:white;font-weight: bold">'+response.customer_name+' </h4>');
                        $("#displaying_customer_name_no_on_cart").show();
                        $("#for_appending_customers").val(customer_id); 
                        $("#for_customer_search_customers").select2("data", { id: customer_id, customer_name: response.customer_name, customer_cell: ""});
                        if(response.running_order_data.length > 0){
                            $("#running_order_li_tab").text("Running ("+response.running_order_data.length +")");
                            all_runing_order_data_for_search=response;
                            var  html='';
                            $.each(response.running_order_data, function(index, order) {
                                var inputDate = order.order_date;
                                var dateObject = new Date(inputDate);
                                var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                                if(response.order_id == order.order_id){
                                    html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " style="background-color: rgb(236, 236, 236)" ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden active" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content active"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                }else{
                                    html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                }
                            });
                            $("#runing_order_main_div").html(html);
                         } 
                    }else{
                        // getting_runing_order(response.order_id); 
                        $("#for_appending_customers").val(customer_id); 
                            if(response.running_order_data.length > 0){
                                $("#running_order_li_tab").text("Running ("+response.running_order_data.length +")");
                                all_runing_order_data_for_search=response;
                                var  html='';
                                $.each(response.running_order_data, function(index, order) {
                                    var inputDate = order.order_date;
                                    var dateObject = new Date(inputDate);
                                    var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                                    if(response.order_id == order.order_id){
                                        html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " style="background-color: rgb(236, 236, 236)" ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden active" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content active"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                    }else{
                                        html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                                    }
                                });
                                $("#runing_order_main_div").html(html);
                            } 
                    }
                    // get_runing_order_detail(response.order_id); 
                    getting_html_invoice_template(response.order_id);
                    if(response.inventry_warning_msg.length > 0){
                        var warning_msg_of_inventory = "<ul class='left-align' style='text-align:left;'>";
                        $.each(response.inventry_warning_msg, function(index, msgs) {
                            warning_msg_of_inventory += "<li class='text-danger'>" + msgs + "</li>";
                        });
                        warning_msg_of_inventory += "</ul>";
                        swal({
                            title: 'Stock Not Available',
                            type: 'warning',
                            text:warning_msg_of_inventory,
                            html: true,
                            confirmButtonText: 'OK!'
                        });
                    }
                }else{
                }
            });
        });
        // ==============> create Qucick Invoice end <=======================
        // Open add customer modal
        $(document).on('click','#Add_customer', function(){
            $("#addbusinessbrand").modal('show');
        });
        // Add Customer
        $("#customerform").submit(function(event){ 
            $(".loader").fadeIn("slow");
            event.preventDefault();
            var formData = $(this).serialize();
            var customer_name = $("#txt-customer-name").val();
            var add_customer = {
                "url": "<?php echo base_url(); ?>restaurantapi/add_customer",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                },
                "data": formData,
            };
            $.ajax(add_customer).done(function (response) {
                $(".loader").fadeOut("slow");
                if(response > 0 ){
                    var html='';
                    html+='<option value="'+response+'" selected>'+customer_name+'</option>'
                    $("#for_appending_customers").append(html);
                    // $("#for_appending_customers").select2();
                    swal({
                        title: 'Customer Added',
                        // text: 'The provided voucher number is not found or expired.',
                        type: 'success',
                        confirmButtonText: 'OK!'
                    });
                    $("#addbusinessbrand").modal('hide');
                }else{
                    // alert("Something Went Wrong");
                }
            });
        });
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/categories?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            if(response.length > 0){
                var html='';
                var flag =0;
                var li_html='';
                var sum_of_all_products=0;
                var flag_c=0;
                $.each(response, function(index, cat) {
                    if(flag_c > 0){
                        sum_of_all_products+= parseFloat(cat.product_count);
                    }
                    flag_c++;
                });
                $.each(response, function(index, categories) {
                    if (categories.category !== null && categories.category !== '') {
                        li_html += '<li role="presentation"><a role="menuitem" href="javascript:void(0)" data-id="' + categories.category + '" onclick="getting_products_by_cat(\'' + categories.category + '\')">' + categories.category + '</a></li>';
                        if(flag==0){
                            html+='<button class="btn btn-sm btn-inverse col-md-2 col-lg-11 col-xl-11 col-sm-2 col-xs-11 get_category_name zoomed " style="margin: 2px !important" data-id="'+categories.category+'" onclick="getting_products_by_cat(\''+categories.category+'\')">'+categories.category+' ('+sum_of_all_products+')</button>';
                            html+='<button class="btn btn-sm btn-inverse col-md-2 col-lg-11 col-xl-11 col-sm-2 col-xs-11 get_category_name  " style="margin: 2px !important" data-id="track_inventory_no" onclick="getting_products_by_cat(\'track_inventory_no\')">Add ons</button>';
                        }else{
                            html+='<button class="btn btn-sm btn-inverse col-md-2 col-lg-11 col-xl-11 col-sm-2 col-xs-11 get_category_name " style="margin: 2px !important" data-id="'+categories.category+'" onclick="getting_products_by_cat(\''+categories.category+'\')">'+categories.category+' ('+categories.product_count+')</button>';
                        }
                        ++flag;
                    }
                });
                $("#main_category_div #sub_category_div").html(html);
                $("#cateogy_drop_down_btn").html(li_html);
                var categoryname = $(".get_category_name").eq(0).data('id');
                getting_products('All');
            }else{
                alert('Categories Not Available');
            }
        });
        // Search Product Using Input feild Start 
        var timeoutID;
        $(document).on("input","#searchItemList" , function (){
            var search_feild = $(this).val().toLowerCase();
            // $(".loader").fadeIn("slow");            
            $("#pagination-controls").remove();
            clearTimeout(timeoutID);
            timeoutID= setTimeout(function() {
                $("#for_appending_all_products").empty();
                var q_product ="";
                var q_sku ="";
                var q_price ="";
                var q_product_slaes_tax="";
                var q_id_business_products= "";
                var q_category="";
                var q_brand_id ="";
                var q_id_batch="";
                var q_batch_number="";
                var q_r_count =0;
                $.each(all_product_data_for_search, function(index, products){
                    var value =  products.product;
                    var category =  products.category;
                    if(category == null){
                        category ="";
                    }
                    var sku =  products.sku;
                    if(sku==null){
                        sku="";
                    }
                    var business_brand_name =  products.business_brand_name;
                    if(business_brand_name==null){
                        business_brand_name="";
                    }
                    var barcode_products =  products.barcode_products;
                    if(barcode_products==null){
                        barcode_products="";
                    }
                    var id_business_products =  products.id_business_products;
                    if(id_business_products==null){
                        id_business_products==0;
                    }
                    if(products.image =="" || products.image == null){
                        var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/no-Image-.png';
                    }else{
                        var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/' + products.image;
                    }
                    if(search_feild == "" || search_feild.length < 1 ){
                        // html ='<div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4 "><div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);" style="padding: 3px; cursor:pointer;"  onclick="add_product_to_cart_table(\'' + products.product + '\', \'' + products.sku + '\', ' + products.price + ', ' + products.product_sales_tax + ', ' + products.id_business_products + ',\'' + products.category + '\',' + products.brand_id + ' ,'+products.id_batch+',\'' +products.batch_number+ '\')"><div style="max-width: 100%; max-height: 100%;"><img class="card-img-top" src="'+imageUrl+'" alt="Card image cap" ></div><div class="card-body"><h6 class="card-title text-center text-success " style="font-weight: bold;letter-spacing: 1px;" >'+products.product+'</h6><p class="card-text text-center text-danger" style="font-weight: bold;"> <?php echo CURRENCY_CODE;?> '+products.price+'</p></div></div></div>';
                        // $("#for_appending_all_products").append(html);
                        // $(".loader").fadeOut("slow"); 
                        getting_products_by_cat('All')
                    }else{
                        if(value.toLowerCase().includes(search_feild) ||  category.toLowerCase().includes(search_feild) ||  sku.toLowerCase().includes(search_feild) || business_brand_name.toLowerCase().includes(search_feild) || barcode_products.toLowerCase().includes(search_feild) || id_business_products.toLowerCase().includes(search_feild) ) {
                            html ='<div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4 "><div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);" style="padding: 3px;cursor:pointer;"  onclick="add_product_to_cart_table(\'' + products.product + '\', \'' + products.sku + '\', ' + products.price + ', ' + products.product_sales_tax + ', ' + products.id_business_products + ',\'' + products.category + '\',' + products.brand_id + ' ,'+products.id_batch+',\'' +products.batch_number+ '\')"><div style="max-width: 100%; max-height: 100%;"><img class="card-img-top" src="'+imageUrl+'" alt="Card image cap" ></div><div class="card-body"><h6 class="card-title text-center text-success" style="font-weight: bold;letter-spacing: 1px;" >'+products.product+'</h6><p class="card-text text-center text-danger" style="color:red;font-weight: bold;"> <?php echo CURRENCY_CODE;?> '+products.price+'</p></div></div></div>';
                            $("#for_appending_all_products").append(html);
                            // $(".loader").fadeOut("slow"); 
                            if ($.isNumeric(search_feild)) {
                                q_r_count++;
                                q_product = products.product;
                                q_sku =products.sku;
                                q_price =products.price;
                                q_product_slaes_tax=products.product_sales_tax;
                                q_id_business_products= products.id_business_products;
                                q_category=products.category;
                                q_brand_id =products.brand_id;
                                q_id_batch=products.id_batch;
                                q_batch_number=products.batch_number;
                            }
                        }
                    }
                });
                // var card_count=0;
                // $('.productscardformargin').each(function(){
                //     card_count++;
                // }); 
                if(q_r_count == 1){
                    add_product_to_cart_table(
                        q_product,
                        q_sku,
                        q_price,
                        q_product_slaes_tax,
                        q_id_business_products,
                        q_category,
                        q_brand_id,
                        q_id_batch,
                        q_batch_number
                    );
                    $("#searchItemList").val('');
                    // card_count=10; 
                    q_r_count=10;
                    $("#searchItemList").trigger("input");
                }
            }, 1000)
        });
        // Search Product Using Input feild End
        // Search runing order  Using Input feild
        $(document).on("input","#search_runing_order_list" , function (){
            all_balance_order_data_for_search=[];
            var search_feild = $(this).val().toLowerCase();
            $("#runing_order_main_div").empty();
            var html='';
            $.each(all_runing_order_data_for_search, function(index, order){
                var order_id =  order.order_id;
                var customer_name =  order.customer_name;
                if(search_feild == "" || search_feild.length < 1 ){
                    var inputDate = order.order_date;
                    var dateObject = new Date(inputDate);
                    var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                    html ='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8">  <span class="span_order_number"> Order no: '+order.order_id+' </span> <br> <span class="running_order_span"> Staff: '+(order.staff_fullname || '')+' </span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span">Cust : '+order.customer_name+'</span><br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                    $("#runing_order_main_div").append(html);
                }else{
                    if(order_id.toLowerCase().includes(search_feild) || customer_name.toLowerCase().includes(search_feild)) {
                        var inputDate = order.order_date;
                        var dateObject = new Date(inputDate);
                        var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                        html ='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number"> Order no: '+order.order_id+' </span> <br>  <span class="running_order_span"> Staff: '+(order.staff_fullname || '')+' </span>  </div><div class="col-md-2"> <button  class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span">Cust : '+order.customer_name+'</span><br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                        $("#runing_order_main_div").append(html);
                    }
                }
            });
        });
        // Search balance  order  Using Input feild
        $(document).on("input","#search_balance_order_list" , function (){
            all_runing_order_data_for_search=[];
            var search_feild = $(this).val().toLowerCase();
            $("#balance_order_main_div").empty();
            var html='';
            $.each(all_balance_order_data_for_search, function(index, order){
                var order_id =  order.order_id;
                var customer_name =  order.customer_name;
                if(search_feild == "" || search_feild.length < 1 ){
                    var inputDate = order.order_date;
                    var dateObject = new Date(inputDate);
                    var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                    html ='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card balance_order_cards "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link balance-order-toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br> <span class="running_order_span"> Balance: '+order.balance+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                    $("#balance_order_main_div").append(html);
                }else{
                    if(order_id.toLowerCase().includes(search_feild) || customer_name.toLowerCase().includes(search_feild)) {
                        var inputDate = order.order_date;
                        var dateObject = new Date(inputDate);
                        var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                        html ='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card balance_order_cards "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link balance-order-toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br> <span class="running_order_span"> Balance: '+order.balance+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                        $("#balance_order_main_div").append(html);
                    }
                }
            });
        });
        // Runing Order Controlling toggle
        $(document).on("click",'.toggle-arrow' ,function() {
            $("#table-new-order tbody").html('');
            $('.toggle-arrow').removeClass('active');
            $(this).addClass('active');
            $('.card-content').removeClass('active');
            $(this).closest(".card").find(".card-content").toggleClass('active');
            var btn =  $(this);
            $(".running_order_crads").css("background-color", "");
            $('.toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var dataIdValue = $(this).data('id');
                    btn.closest(".card").css("background-color", "#ececec");
                    modify_order(dataIdValue);
                    return false;
                }else{
                    btn.closest(".card").css("background-color", "");
                }
            });
        });
        // Balance Order  Order Controlling toggle
        $(document).on("click",'.balance-order-toggle-arrow' ,function() {
            $("#table-new-order tbody").html('');
            $('.toggle-arrow').removeClass('active');
            $(this).addClass('active');
            $('.card-content').removeClass('active');
            $(this).closest(".card").find(".card-content").toggleClass('active');
            var btn =  $(this);
            $(".running_order_crads").css("background-color", "");
            $('.toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var dataIdValue = $(this).data('id');
                    btn.closest(".card").css("background-color", "#ececec");
                    return false;
                }else{
                    btn.closest(".card").css("background-color", "");
                }
            });
        });
    });
    var flag_for_seach_handling_purpose = 1;
    function getting_products(cat_name){
        $(".loader").fadeIn("slow");
        var products = {
            "url": "<?php echo base_url(); ?>restaurantapi/category_product?businessid=<?php echo $this->session->userdata('businessid') ?>&category="+cat_name,
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(products).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                if(flag_for_seach_handling_purpose == 1){
                    all_product_data_for_search=response;
                    ++flag_for_seach_handling_purpose;
                } 
                var html='';
                $.each(response, function(index, products) {   
                    if(index ==9){ 
                        return false;
                    } 
                    if(products.image =="" || products.image == null){
                        var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/no-Image-.png';
                    }else{
                        var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/' + products.image;
                    }
                    html+='<div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4 "><div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);" style="padding: 3px cursor:pointer;"  onclick="add_product_to_cart_table(\'' + products.product + '\', \'' + products.sku + '\', ' + products.price + ', ' + products.product_sales_tax + ', ' + products.id_business_products + ',\'' + products.category + '\',' + products.brand_id + ','+products.id_batch+',\'' +products.batch_number+ '\')"><div style="max-width: 100%; max-height: 100%;"><img class="card-img-top" src="'+imageUrl+'" alt="Card image cap" ></div><div class="card-body"><h6 class="card-title text-center text-success" style="font-weight: bold;letter-spacing: 1px;" >'+products.product+'</h6><p class="card-text text-center text-danger" style="font-weight: bold;"><?php echo CURRENCY_CODE;?>  '+products.price+'</p></div></div></div>';
                }); 
                getting_products_by_cat('All');
                return false;
                $("#for_appending_all_products").html(html); 
            }else{
                swal({
                    title: 'Products Not Available',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
            }
        });
    }
        //  category btn Active Animation
        $(document).on('click','.get_category_name', function() {
            $('.get_category_name').removeClass('zoomed');
            $(this).addClass('zoomed');
        });
        // refresh_runing_orders
        var rotated = false;
        $(document).on('click' ,'#refresh_runing_orders',function(){
            if (!rotated) {
                $(this).css({
                    "transition": "transform 1s",
                    "transform": "rotate(360deg)"
                });
                rotated = true;
            } else {
                $(this).css({
                    "transition": "transform 1s",
                    "transform": "rotate(0deg)"
                });
                rotated = false;
            }
            getting_runing_order();
            getting_orders_with_balance();
        });
        //  get_order_detail
        $(document).on("input",'#payment_amount ,#payment_cash_amount , #payment_card_amount',function(){
            var  payment_amount =  parseFloat($("#payment_amount").val()).toFixed(2);
            var  payment_cash_amount =  parseFloat($("#payment_cash_amount").val());
            var  payment_card_amount =  parseFloat($("#payment_card_amount").val());
            if(isNaN(payment_cash_amount)){
                payment_cash_amount=0;
            }
            if(isNaN(payment_card_amount)){
                payment_card_amount=0;
            }
            if(isNaN(payment_amount)){
                payment_amount=0;
            }
            if( payment_card_amount > 0 ||  payment_cash_amount > 0 ){
                parseFloat($("#payment_amount").val(0)).toFixed(2);
            }
            if(payment_amount > 0){
                payment_cash_amount =  parseFloat($("#payment_cash_amount").val(0));
                payment_card_amount =  parseFloat($("#payment_card_amount").val(0));
            }
            var  return_amount =  parseFloat($("#return_amount").val()).toFixed(2);
            var  total_payaable =  parseFloat($("#total_payable_hidden_feild").val());
            parseFloat($("#return_amount").val(0)).toFixed(2);
            if(payment_amount > 0){
                if(payment_amount > total_payaable){
                    var ramount =  payment_amount - total_payaable;
                    parseFloat($("#return_amount").val(parseFloat(ramount).toFixed(2)));
                }
            }else if(payment_cash_amount > 0 || payment_card_amount > 0 ){
                var combine_ammount  = parseFloat(payment_cash_amount+payment_card_amount).toFixed(2);
                if(combine_ammount > total_payaable ){
                    var ramount =  combine_ammount - total_payaable;
                    parseFloat($("#return_amount").val(parseFloat(ramount).toFixed(2)));
                }
            }
            if( payment_card_amount > 0 ||  payment_cash_amount > 0 ){
                var combine_ammount  = parseFloat(payment_cash_amount+payment_card_amount).toFixed(2);
                if(combine_ammount >= total_payaable){
                    $("#create_invoice_modal_btn").prop('disabled', false);
                }else{
                    $("#create_invoice_modal_btn").prop('disabled', true);
                }
            }else{
                if(payment_amount >=  total_payaable){
                    $("#create_invoice_modal_btn").prop('disabled', false);
                }else{
                    $("#create_invoice_modal_btn").prop('disabled', true);
                }
            }
        });
        // create invoice
        $(document).on("click",'#create_invoice_modal_btn',function (){
            var order_id =  $("#order_id_for_api").val();
            var  payment_mode =  $("#select_payment").val();
            var  payment_amount =  $("#payment_amount").val() || 0;
            var  return_amount =  $("#return_amount").val() || 0;
            var  payment_cash_amount =  $("#payment_cash_amount").val() || 0;
            var  payment_card_amount =  $("#payment_card_amount").val() || 0;
            var  subtoal_for_modal =  $("#subtoal_for_modal").text();
            var  total_discount_for_modal =  parseFloat($("#total_discount_for_modal").text()).toFixed(2) || 0;
            var  total_tax_for_modal =  parseFloat($("#total_tax_for_modal").text()).toFixed(2);
            var  total_payable_hidden_feild =  parseFloat($("#total_payable_hidden_feild").val()).toFixed(2);
            var  instrument_number =  $("#instrument_number").val() || '';
            var  card_number = $("#card_number").val() || '';
            var balance=0;
            var  businessid =  $("#businessid").val();
            var  username =  $("#username").val();
            if(payment_mode == "Cash"){
            }else if( payment_mode == "Card"){
                if(card_number ==""){
                    swal({
                        title: 'Please Add Card No.',
                        type: 'error',
                        confirmButtonText: 'OK!'
                    });
                    return false;
                }
            }else if( payment_mode == "Check"){
                if(instrument_number ==""){
                    swal({
                        title: 'Please Add Instrument  No.',
                        type: 'error',
                        confirmButtonText: 'OK!'
                    });
                    return false;
                }
            }else if(payment_mode == "Online"){
                if(instrument_number ==""){
                    swal({
                        title: 'Please Add Instrument  No.',
                        type: 'error',
                        confirmButtonText: 'OK!'
                    });
                    return false;
                }
            }else if(payment_mode == "Mixed"){
                if(card_number ==""){
                    swal({
                        title: 'Please Add Card No.',
                        type: 'error',
                        confirmButtonText: 'OK!'
                    });
                    return false;
                }
            }
            var instrument_no=0;
            if(instrument_number ==""){
                instrument_no=card_number;
            }else{
                instrument_no=instrument_number;
            }
            $(".loader").fadeIn("slow");
            var order_place = {
                "url": "<?php echo base_url(); ?>restaurantapi/create_invoice",
                "method": "POST",
                "timeout": 0,
                "headers": {
                    "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                },
                "data":{
                    "businessid":businessid,
                    "order_id":order_id,
                    "payment_mode":payment_mode,
                    "paid":payment_amount,
                    "cash_paid":payment_cash_amount,
                    "card_paid":payment_card_amount,
                    "sub_total":subtoal_for_modal,
                    "total_discount_amount":total_discount_for_modal,
                    "total_tax_amount":total_tax_for_modal,
                    "net_amount":total_payable_hidden_feild,
                    "balance":balance,
                    "returnamount":return_amount,
                    "totalpayable":total_payable_hidden_feild,
                    "instrument_no":instrument_no,
                },
            };
            $.ajax(order_place).done(function (response) {
                $(".loader").fadeOut("slow");
                if( response.warning_msg !=0 ) {
                    swal({
                        title: '"'+response.warning_msg+'"',
                        type: 'warning',
                        confirmButtonText: 'OK!'
                    });
                    return false;
                }
                if(response.visit_id > 0){
                    var invoice_id = response.id_invoice;
                    window.open("<?php echo base_url('existingorderinvoice/'); ?>" + invoice_id, "_blank");
                    window.location.reload();
                    $("#order_detail_modal").modal('hide');
                    getting_runing_order();
                    getting_customers();
                    getting_staff_list();
                    fetchDefaultCustomer();
                    return false;
                    var width = 700;
                    var height = 700;
                    var leftPosition = (window.screen.width - width) / 2;
                    var topPosition = (window.screen.height - height) / 2;
                    var thePopup = window.open('', 'Customer Listing', 'menubar=0,location=0,height=' + height + ',width=' + width + ',top=' + topPosition + ',left=' + leftPosition);
                    // var thePopup = window.open('', 'Customer Listing', 'menubar=0,location=0,height=700,width=700');
                    if (thePopup) {
                        var html = '';
                        var staff_name_for_print = response.products[0].staff_name;
                        var imageUrl = '<?php echo base_url(); ?>assets/images/business/' + response.business_logo;
                        html += '<html><head><meta charset="utf-8"><title>Order No : 005</title><style>body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:black;background-color:#fff;}#wrapper{max-width:480px;margin:0 auto;}.text-right{width:50%!important;text-align:right!important;}@media print{#wrapper{max-width:480px;margin:0 auto;}.text-right{width:50%!important;text-align:right!important;}.arabic_text_left_is{unicode-bidi:isolate-override!important;}}.arabic_text_left_is{unicode-bidi:isolate-override!important;}#barcode_invoice canvas{width:25%!important;}.ir_txt_center{text-align:center!important;}.ir_wid_70{width:70%!important;}.ir_wid_90{width:90%!important;}@media print{.no-print{display:none;}#wrapper{margin:0 auto;}.no-border{border:none!important;}.border-bottom{border-bottom:1px solid #ddd!important;}table tfoot{display:table-row-group;}.ir_txt_center{text-align:center!important;}.ir_txt_right{text-align:right!important;}.ir_wid_70{width:70%!important;}.ir_wid_90{width:90%!important;}.arabic_text_left_is{unicode-bidi:isolate-override!important;}}.arabic_text_left_is{unicode-bidi:isolate-override!important;}#barcode_invoice canvas{width:25%!important;}.text-center{text-align:center;}h3{font-size:25px;padding:0;margin:0;}h4{margin-top:0;font-size:20px;}.p_txt{margin-top:0;margin-bottom:0;}.text_left{text-align:left!important;}.table{width:100%;max-width:100%;margin-bottom:5px;background-color:transparent;border-spacing:0;border-collapse:collapse;}.table>tbody>tr>td,.table>tbody>tr>th,.table>tfoot>tr>td,.table>tfoot>tr>th,.table>thead>tr>td,.table>thead>tr>th{padding:5px;line-height:1.42857143;vertical-align:top;border-top:1px solid #ddd;}.table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9;}.btn{border-radius:0;margin-bottom:5px;text-decoration:none;display:inline-block;padding:6px 12px;margin-bottom:0;font-size:14px;font-weight:400;line-height:1.42857143;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;background-image:none;border:1px solid transparent;border-radius:4px;}.btn-block{display:block;width:100%;}.btn-primary{color:#fff;background-color:#3c8dbc;border-color:#2e6da4;}</style></head>';
                        html += '<body style=""><div id="wrapper"><div id="receiptData"><div id="receipt-data"><div class="text-center"><img style="width:25%" alt="logo" src="'+imageUrl+'"><b><p class="p_txt">Address:'+response.business_address+'</p> <p class="p_txt">Phone no:'+response.business_phone1+'</p><h3> <p class="p_txt">Date:'+response.invoice_date+'</p><h3> Order Number:'+response.visit_id+' </h3><p></p></b></div><p>Customer: <b>'+response.customer_name+'</b><br> Staff: '+staff_name_for_print+'<br></p><div class="ir_clear"></div>';
                        html+='<table class="table table-condensed"><tbody>';
                        var qty =0;
                        $.each(response.products, function(index, products) {
                            qty+= parseFloat(products.invoice_qty);
                            html+='<tr>';
                            html+='<td class="no-border border-bottom ir_wid_90"># 1: '+products.product_name+'<small></small> &nbsp;&nbsp;'+products.invoice_qty+' &nbsp;X&nbsp;'+products.price+'</td>';
                            html+='<td class="no-border border-bottom text-right">'+ parseFloat(products.invoice_qty)* parseFloat(products.price) +'</td>';
                            html+='</tr>';
                        });
                        html+'</tbody><tfoot>';
                        html+='<tr><th class="text_left">Total Item(s): '+qty+'</th><th class="text-right"></th></tr><tr><th class="text_left">Sub Total</th><th class="text-right">'+response.sub_total+'</th></tr>';
                        if(parseFloat(response.discount)>0){
                            html+='<tr><th class="text_left">Discount&nbsp;</th><th class="text-right">'+parseFloat(response.discount)+'</th></tr><tr>';
                        }
                        if(parseFloat(response.tax_total)>0){
                            html+='<tr><th class="text_left">TAX&nbsp;</th><th class="text-right">'+response.tax_total+'</th></tr><tr>';
                        }
                        var grand_total =  ((parseFloat(response.sub_total)- parseFloat(response.discount)) + parseFloat(response.tax_total));
                        var given_amount = parseFloat(grand_total) + parseFloat(response.returnamount);
                        html+='<th class="text_left">Grand Total</th><th class="text-right">'+ parseFloat(grand_total).toFixed(2)+'</th></tr><tr><th class="text_left">Given Amount</th><th class="text-right">'+ parseFloat(given_amount).toFixed(2)+'</th></tr></tfoot></table>';
                        if(parseFloat(response.returnamount)>0){
                            html+='<table class="table table-striped table-condensed"><tbody><tr><th class="text_left">Return Amount</th><th class="text-right">'+ parseFloat(response.returnamount).toFixed(2) +'</th></tr></tbody></table>';
                        }
                        html+='<p class="text-center"> Thank you for visiting us!</p></div><div class="ir_clear"></div></div><div id="buttons" class="no-print ir_pt_tr"><hr><span class="col-xs-12"><a class="btn btn-block btn-primary" href="javascript:eval(\'window.print()\')">Print</a> </span><div class="ir_clear"></div><div class="col-xs-12 ir_bg_p_c_red"><p class="ir_font_txt_transform_none">Please follow these steps before you print for first time:</p><p class="ir_font_capitalize">1. Disable Header and Footer in browser\'s print setting<br>For Firefox: File &gt; Page Setup &gt; Margins &amp; Header/Footer &gt; Headers &amp; Footers &gt; Make all --blank--<br>For Chrome..: Menu &gt; Print &gt; Uncheck Header/Footer in More Options</p></div><div class="ir_clear"></div></div></div></body></html>';
                        // $(thePopup.document.body).html(html);
                        // thePopup.print();
                    } else {
                        alert("Pop-up window was blocked or not allowed by the browser.");
                    }
                }else{
                    swal({
                        title: 'Something Went Wrong',
                        type: 'error',
                        confirmButtonText: 'OK!'
                    });
                }
            });
        });
        // clear cart table
        $(document).on("click" ,"#clear_cart_btn",function (){
            $("#table-new-order tbody").html('');
            $("#displaying_order_no_on_cart").hide();
            $("#displaying_customer_name_no_on_cart").html('');
            $("#displaying_customer_name_no_on_cart").hide();
            $("#for_appending_customers").val("");
            $('#final_cart_total_qty').val(0);
            $('#final_cart_total').val(0); 
            $('#for_appending_staffs').select2('destroy');
            $('#for_appending_staffs').val(0);
            $('#for_appending_staffs').select2(); 
            getting_customers(); 
            getting_runing_order();
            fetchDefaultCustomer();
        });
        //  Cancel Order btn
        $(document).on('click','#cancel_order_btn', function() {
            var i=0;
            var  businessid =  $("#businessid").val();
            $('.toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var order_id = $(this).data('id');
                    swal({
                        title: "Are you sure?",
                        text: "This action will remove all details of this product!",
                        type: "warning",
                        showCancelButton: true,
                        confirmButtonClass: 'btn-warning',
                        confirmButtonText: "Yes, remove it!",
                        closeOnConfirm: true
                    }, function() {
                        $(".loader").fadeIn("slow");
                        var cancel_order = {
                            "url": "<?php echo base_url(); ?>restaurantapi/cancel_order",
                            "method": "POST",
                            "timeout": 0,
                            "headers": {
                                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
                            },
                            "data":{
                                "order_id":order_id,
                                "businessid":businessid
                            },
                        };
                        $.ajax(cancel_order).done(function (response) {
                            $(".loader").fadeOut("slow");
                            if(response >0){
                                getting_runing_order();
                                // getting_staff_list(); 
                                $('#for_appending_staffs').select2('destroy');
                                $('#for_appending_staffs').val(0);
                                $('#for_appending_staffs').select2();
                                getting_customers();
                                $("#displaying_order_no_on_cart").html('');
                                $("#displaying_order_no_on_cart").hide();
                                $("#table-new-order tbody").html('');
                                $("#displaying_customer_name_no_on_cart").html('');
                                $("#displaying_customer_name_no_on_cart").hide();
                                $("#for_appending_customers").val("");
                                $('#final_cart_total_qty').val(0);
                                $('#final_cart_total').val(0);
                                swal({
                                    title: 'Order Cancelled Successfully.',
                                    type: 'success',
                                    confirmButtonText: 'OK!'
                                });
                                 fetchDefaultCustomer();
                            }
                        });
                    });
                    ++i;
                    return false;
                }
            });
            if(i==0){
                swal({
                    title: 'Please Select at least one Order ',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
        });
        //  show create invoice modal
        $(document).on('click','#create_invoice_of_runing_order', function() {
            $("#payment_amount").val('');
            $("#return_amount").val('');
            $("#card_number").val('');
            $("#instrument_number").val('');
            $("#payment_cash_amount").val('');
            $("#payment_card_amount").val('');
            var payment_method_option = '<option value="Cash"> Cash </option><option value="Card"> Credit Card </option><option value="Card"> Debit Card </option><option value="Check"> Check </option><option value="Online"> Online </option><option value="Mixed"> Mixed</option>';
            $("#select_payment").html(payment_method_option);
            var html='';
            html+='<div class="col-md-2"  id="payment_amount_div">';
            html+='<label class="form-label"> Amount</label>';
            html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
            var i=0;
            $('.toggle-arrow').each(function() {
                if ($(this).hasClass('active')) {
                    var dataIdValue = $(this).data('id');
                    // get_runing_order_detail(dataIdValue);  
                    getting_html_invoice_template(dataIdValue);
                    // $("#order-id").val(dataIdValue);
                    // $("#hiddenFormforprintbill").submit();
                    // creating Session    
                    var invoice_flag ="invoice-pending";
                    localStorage.setItem('myData', invoice_flag);
                    ++i;
                    return false;
                }
            });
            if(i==0){
                swal({
                    title: 'Please Select at least one Order ',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
                return false;
            }
        });
    //  Show Order Detail
    $(document).on('click','#show_order_detail', function() {
        var i=0;
        $('.toggle-arrow').each(function() {
            if ($(this).hasClass('active')) {
                var dataIdValue = $(this).data('id');
                get_runing_order_detail(dataIdValue,"Hide_payment_option");
                ++i;
                return false;
            }
        });
        if(i==0){
            swal({
                title: 'Please Select at least one Order ',
                type: 'warning',
                confirmButtonText: 'OK!'
            });
            return false;
        }
    });
    // print_bill
    $(document).on('click','#print_bill', function() {
        var i=0;
        $('.toggle-arrow').each(function() {
            if ($(this).hasClass('active')) {
                var order_id = $(this).data('id');
                $("#order-id").val(order_id);
                $("#hiddenFormforprintbill").submit();
                ++i;
                return false;
            }
        });
        if(i==0){
            swal({
                title: 'Please Select at least one Order ',
                type: 'warning',
                confirmButtonText: 'OK!'
            });
            return false;
        }
    });
    // modify  order
    $(document).on('click','#modify_order_btn', function() {
        var i=0;
        $('.toggle-arrow').each(function() {
            if ($(this).hasClass('active')) {
                var order_id = $(this).data('id');
                modify_order(order_id)
                ++i;
                return false;
            }
        });
        if(i==0){
            swal({
                title: 'Please Select at least one Order ',
                type: 'warning',
                confirmButtonText: 'OK!'
            });
            return false;
        }
    });
    function getting_products_by_category(catgeory_name){
        getting_products(catgeory_name);
    }
    function getting_customers(modify_order_cutomer=""){
        $("#for_customer_search_customers").select2({
            placeholder: "Select Customer",
            containerCssClass : "alphanumeric",
            initSelection: function(element, callback) {},
            ajax: {
                url: '<?php echo base_url(); ?>customer_controller/search',
                dataType: 'json',
                delay: 450,
                data: function (term, page) {
                    return {
                        customername: term, // search term
                        page_limit: 30, // page size
                        page: page // page number
                    };
                },
                results: function (data, page) {
                    var more = (page * 30) < data.length;
                    return {results: data, more: more};
                }
            },
            escapeMarkup: function (m) {
                return m;
            }, // let our custom formatter work
            minimumInputLength: 3,
            formatResult: function (option) {
                return option.customer_name + "  " + option.customer_cell ;
            },
            formatSelection: function (option) {
                return option.customer_name + "  " + option.customer_cell;
            }
        });
    }
    getting_customers();
    function updating_hidding_customer_id(){
        var customer_data = $("#for_customer_search_customers").select2('data');
        if (customer_data) {
            var customer_name = customer_data.customer_name;
            var customer_id = customer_data.id;
            $("#for_appending_customers").val(customer_id);
            $("#displaying_customer_name_no_on_cart").html('<h4 style="color:white;font-weight: bold">'+customer_name+' </h4>');
        } else { 
        }
    }
    function fetchDefaultCustomer(){
          getting_customers("Walk In");
        $.ajax({
            url: '<?php echo base_url(); ?>customer_controller/search',
            dataType: 'json',
            method: 'GET', 
            data: { customername: 'Walk In' },
            success: function (data) {
                // console.log(data);
            if (Array.isArray(data) && data.length > 0) {
                    var customer_id = data[0].id_customers; 
                    var customer_name = data[0].customer_name;
                  $("#for_appending_customers").val(customer_id);
                  $("#displaying_customer_name_no_on_cart").html('<h4 style="color:white;font-weight: bold">'+customer_name+' </h4>');
                $("#for_customer_search_customers").select2("data", { id: customer_id, customer_name: "Walk-In", customer_cell: "" });
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                console.error("Error fetching Walk-In customer data:", textStatus, errorThrown);
            }
        });
    }
    $(document).ready(function () {
        fetchDefaultCustomer();
    });
    function getting_staff_list(selected_modify_order_staff_id=''){
        if(selected_modify_order_staff_id==""){
            selected_modify_order_staff_id=0;
        }
        var  session_user_mobile =  $("#session_user_mobile").val() || 999999999999999999;
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/staff?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                var flag =true;
                var html='';
                $.each(response, function(index, staff) {
                    if(session_user_mobile == staff.staff_cell && selected_modify_order_staff_id == 0){
                        html+='<option value="'+staff.id_staff+'" selected >'+staff.staff_fullname+'</option>';
                        flag=false
                    }else{
                        html+='<option value="'+staff.id_staff+'" ' + (selected_modify_order_staff_id == staff.id_staff ? 'selected' : '') + '>'+staff.staff_fullname+'</option>';
                    }
                });
                if(flag==true && selected_modify_order_staff_id == 0){
                    html+='<option value="0" selected>Select Staff</option>';
                }
                $("#txt-customer-refstaff").html(html);
                $("#for_appending_staffs").html(html);
                $("#for_appending_staffs").select2();
            }else{
                // alert('Staff  Not Available'); 
                swal({
                    title: 'Staff  Not Available',
                    type: 'warning',
                    confirmButtonText: 'OK!'
                });
            }
        });
    }
    getting_staff_list();
    function getting_areas_list(){
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/cities?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                var html='<option value="0" >Select Area</option>';
                $.each(response, function(index, city) {
                    html+='<option value="'+city.city_area+'">'+city.city_area+'</option>'
                });
                $("#txt-customer-area").html(html);
            }else{
                // swal({
                //     title: 'Area  Not Available',
                //     type: 'warning',
                //     confirmButtonText: 'OK!'
                // });
            }
        });
    }
    getting_areas_list();
    function add_product_to_cart_table(product_name, sku, price,product_sales_tax,product_id,category,brand_id ,batch_id ,batch_number) {
        if(isNaN(product_sales_tax)) {
            product_sales_tax = 0;
        }
        var order_id_for_edit = $(".order_id_for_edit").val();
        if(isNaN(order_id_for_edit)) {
            order_id_for_edit = 0;
        }
        if(batch_id =="" ||  batch_id ==null ){
            batch_id= 0;
        }
        if(batch_number =="" ||  batch_number == null){
            batch_number=0;
        }
        var qty = 1;
        var exists = false;
        $('#table-new-order tbody tr').each(function() {
            var name = $(this).find('.product_name').val();
            var product_qty = parseFloat($(this).find('.product_qty').val());
            var product_price = parseFloat($(this).find('.product_price').val());
            var product_sale_tax = parseFloat($(this).find('.product_sale_tax').val());
            var product_sale_tax_amount = parseFloat($(this).find('.product_sale_tax_amount').text());
            var product_final_price = $(this).find('.product_final_price').text();
            var product_discount = parseFloat($(this).find('.product_discount').val());
            if (name === product_name) {
                product_qty=product_qty+1;
                product_price = ((product_price*product_qty)-product_discount);
                var t_price = product_price;
                var taxAmount = (t_price * parseFloat(product_sale_tax)) / 100;
                var totalPrice = t_price + taxAmount;
                parseFloat($(this).find('.product_qty').val(product_qty));
                $(this).find('.product_final_price').text(parseFloat(totalPrice).toFixed(2));
                // $(this).find('.product_price_for_display').text(parseFloat(t_price).toFixed(2));
                parseFloat($(this).find('.product_sale_tax_amount').text(parseFloat(taxAmount).toFixed(2)));
                exists = true;
                return false;
            }
        });
        if (exists) {
            // alert('Product already exists in the table.');
            final_calculation_for_total();
            return;
        }
        var total_price = parseFloat(price) * qty;
        var taxAmount = (price * parseFloat(product_sales_tax)) / 100;
        var totalPrice = price + taxAmount;
        var html = '<tr>';
        html += '<td><input type="text" class="form-control product_name" value="' + product_name + '" style="display:none">'+product_name+'</td>';
        html += '<td style="text-align: right;" class="product_price_for_display"> '+price+'</td>';
        html += '<td style="text-align: right;"><input type="number" class=" product_qty" value="1" min="1" ></td>';
        html += '<td style="text-align: right;"><input type="number" class=" product_discount" value="0" min="0" ></td>';
        html += '<td style="text-align: right;" class="product_sale_tax_amount"> '+parseFloat(taxAmount).toFixed(2)+'</td>';
        html += '<td style="text-align: right;" class="product_final_price">'+parseFloat(totalPrice).toFixed(2)+'</td>';
        html += '<td style="text-align: right; display:none" ><input type="number" class="form-control product_sale_tax" value="'+product_sales_tax+'" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control product_price" value="' + price + '" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control product_id" value="' + product_id + '" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control category_name" value="' + category + '" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control brand_id" value="' + brand_id + '" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control batch_id" value="' + batch_id + '" style="display:none"></td>';
        html += '<td style="text-align: right; display:none" ><input type="text" class="form-control batch_number" value="' + batch_number + '" style="display:none"></td>';
        if(order_id_for_edit > 0){
            html += '<td style="text-align: right; display:none" ><input type="text" class="form-control id_order_products" value="0" style="display:none"></td>';
        }
        html += '<td><i class="fa fa-close remove_product_from_table" style="font-size:15px;color:red;cursor: pointer;"></i></td>';
        // html += '<td style="text-align: right;"></td>';
        html += '</tr>';
        $("#table-new-order tbody").append(html);
        final_calculation_for_total()
    }
    function final_calculation_for_total(){
        var final_total_of_project=0;
        var product_total_qty=0;
        $('#table-new-order tbody tr').each(function() {
            var product_final_price =parseFloat( $(this).find('.product_final_price').text());
            var product_qty =parseFloat( $(this).find('.product_qty').val());
            final_total_of_project+=product_final_price;
            product_total_qty+=product_qty;
        });
        var tip_on_final_cart =  parseFloat($("#tip_on_final_cart").val());
        if(isNaN(tip_on_final_cart)){
            parseFloat($("#tip_on_final_cart").val(0));
            tip_on_final_cart=0;
        }
        var final_total_of_project  = final_total_of_project+tip_on_final_cart;
        $("#final_cart_total").val(parseFloat(isNaN(final_total_of_project)? 0:final_total_of_project).toFixed(2))
        $("#final_cart_total_qty").val(parseFloat(isNaN(product_total_qty)? 0:product_total_qty).toFixed(2))
    }
    function adding_tip_on_cart(){
        final_calculation_for_total();
    }
    var flag_for_runing_order_search =1;
    function getting_runing_order(order_id=''){
        if(order_id =="" || order_id ==null ){
            order_id =0;
        }
        all_runing_order_data_for_search=[];
        $("#runing_order_main_div").empty();
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/running_orders?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                $("#running_order_li_tab").text("Running ("+response.length +")");
                all_runing_order_data_for_search=response;
                var  html='';
                $.each(response, function(index, order) {
                    var inputDate = order.order_date;
                    var dateObject = new Date(inputDate);
                    var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                    if(order_id == order.order_id){
                        html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads " style="background-color: rgb(236, 236, 236)" ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden active" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content active"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                    }else{
                        html +='<div class=" col-md-12 clossest-card-div d-inline-block"  style="margin-top: 9px;"><div class="card running_order_crads "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span> <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                    }
                });
                $("#runing_order_main_div").html(html);
            }else{
                // alert('Runing Order Not Available  Not Available');
            }
        });
    }
    getting_runing_order();
    function getting_orders_with_balance(){
        all_balance_order_data_for_search=[];
        $("#balance_order_main_div").empty();
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/getting_orders_with_balance?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                $("#balance_order_li_tab").text("Balance ("+response.length +")");
                all_balance_order_data_for_search=response;
                var  html='';
                $.each(response, function(index, order) {
                    var balance = order.balance;
                    var inputDate = order.order_date;
                    var dateObject = new Date(inputDate);
                    var formattedDate = $.datepicker.formatDate("MM-dd-yy", dateObject);
                    html +='<div class=" col-md-12 clossest-card-div d-inline-block" onclick="getting_recovery_invoice_view('+order.order_id+' , '+order.invoice_id+')"  style="margin-top: 9px;"><div class="card balance_order_cards "  ><div class="card-header d-flex justify-content-between align-items-center" class="headingOne"> <div class="row"><div class="col-md-8"> <span class="span_order_number text-danger"> Order no: '+order.order_id+' </span>   <br>   <span class="running_order_span">Staff : '+(order.staff_fullname || '')+'</span> </div><div class="col-md-2"> <button class="btn btn-link balance-order-toggle-arrow hidden" data-id="'+order.order_id+'" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"></button></div> </div>   </div><div class="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordion"><div class="card-body"><div class="card-content"><div class="row"><div class="col-md-8"> <span class="running_order_span"> Cust: '+order.customer_name+' </span><br><span class="running_order_span"> Balance: '+order.balance+' </span>   <br><span class="running_order_span">Date : '+formattedDate+' </span></div>      </div></div></div></div></div></div>';
                });
                $("#balance_order_main_div").html(html);
            }
               fetchDefaultCustomer();
        });
    }
    function get_runing_order_detail(order_id,defult_paramter_for_detail=''){
        $("#payment_amount").val('');
        $("#return_amount").val('');
        $("#card_number").val('');
        $("#instrument_number").val('');
        $("#payment_cash_amount").val('');
        $("#payment_card_amount").val('');
        var payment_method_option = '<option value="Cash"> Cash </option><option value="Card"> Credit Card </option><option value="Card"> Debit Card </option><option value="Check"> Check </option><option value="Online"> Online </option><option value="Mixed"> Mixed</option>';
        $("#select_payment").html(payment_method_option);
        var html='';
        html+='<div class="col-md-2"  id="payment_amount_div">';
        html+='<label class="form-label"> Amount</label>';
        html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
        html+='</div>';
        html+='<div class="col-md-3"   id="return_amount_div">';
        html+=' <label class="form-label"> Return Amount</label>';
        html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
        html+='</div>';
        $('#payment_mode_feild').html(html);
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/order_details?businessid=<?php echo $this->session->userdata('businessid') ?>&order_id="+order_id,
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.order_id > 0){
                var html='';
                $.each(response.products, function(index, product) {
                    html +='<tr>';
                    html +='<td>'+product.product_name+'</td>';
                    html +='<td >'+ parseFloat(product.product_unit_price).toFixed(2)+'</td>';
                    html +='<td >'+product.qty+'</td>';
                    html +='<td >'+ parseFloat(product.product_discount_amount ).toFixed(2)+'</td>';
                    html +='<td >'+ parseFloat(product.product_sale_tax_percentage ).toFixed(2)+'</td>';
                    html +='<td >'+ parseFloat(product.product_sale_tax_amount ).toFixed(2)+'</td>';
                    html +='<td >'+ parseFloat(product.product_final_price ).toFixed(2)+'</td>';
                    html +='</tr>';
                });
                $("#runing_order_detail_table  tbody").html(html);
                $("#customer_name_for_modal").text(response.customer_name);
                $("#order_number_for_modal").text(response.order_id);
                $("#order_id_for_api").val(response.order_id);
                $("#staff_for_modal").text(response.staff_fullname);
                $("#subtoal_for_modal").text( parseFloat(response.sub_total_amount).toFixed(2));
                $("#total_discount_for_modal").text( parseFloat(response.total_discount_amount).toFixed(2));
                $("#total_item_for_modal").text(response.total_qty);
                var total_price_before_tax =  (parseFloat(response.total) - parseFloat(response.total_tax_amount));
                var totalprice = parseFloat(response.total);
                var taxes_data = <?php echo json_encode($taxes_data); ?>;
                if(taxes_data.length > 0){
                    var totalPrice_with_gst =0;
                    var gst_total_amount  = 0;
                    var gst_html = '';
                    $.each(taxes_data, function(index, taxes) {
                        if(taxes.tax_active =="Y"){
                            var tax_perc =  parseFloat(taxes.tax_percentage);
                            var gst_amount  = (total_price_before_tax * parseFloat(tax_perc)) / 100;
                            gst_total_amount += gst_amount;
                            totalPrice_with_gst = parseFloat(totalprice) + parseFloat(gst_amount);
                            gst_html+='<div class="col-md-3 each_gst_and_amount" style="margin-top:10px;"> <input type="hidden" class="gst-tax-name" value="'+taxes.tax_name+'"> <input type="hidden" class="gst-tax-perc" value="'+tax_perc+'"> <input type="hidden" class="gst-tax-amount" value="'+parseFloat(gst_amount).toFixed(2)+'"> <span class="running_order_span gst-perc"  >'+taxes.tax_name+' '+tax_perc+'%  :  </span> <span id="gst_amount">'+ parseFloat(gst_amount).toFixed(2)+'</span></div>';
                        }
                    });
                    $("#gst_perc_and_amount").html(gst_html);
                    var total_tax_amount = parseFloat(gst_total_amount) + parseFloat(response.total_tax_amount);
                    $("#total_tax_for_modal").text(  parseFloat(total_tax_amount).toFixed(2));
                    $("#total_payaable").text("Total Payable :"+ parseFloat(gst_total_amount + totalprice).toFixed(2));
                    $("#total_payable_hidden_feild").val(parseFloat(gst_total_amount + totalprice).toFixed(2));
                }else{
                    $("#total_payaable").text("Total Payable :"+ parseFloat(response.total).toFixed(2));
                    $("#total_payable_hidden_feild").val(parseFloat(response.total).toFixed(2));
                    $("#total_tax_for_modal").text(  parseFloat(response.total_tax_amount).toFixed(2));
                }
                $("#order_detail_modal").modal('show');
                if(defult_paramter_for_detail =="Hide_payment_option"){
                    $("#add_payment_title").hide();
                    $("#paymnet_mode_select_box").hide();
                    $("#payment_mode_feild").hide();
                    $("#create_invoice_modal_btn").hide();
                }else{
                    $("#add_payment_title").show();
                    $("#paymnet_mode_select_box").show();
                    $("#payment_mode_feild").show();
                    $("#create_invoice_modal_btn").show();
                }
            }else{
                // alert('Runing Order Not Available  Not Available');
            }
        });
    }
    function modify_order(order_id){
        $(".loader").fadeIn("slow");
        var order_data = {
            "url": "<?php echo base_url(); ?>restaurantapi/order_details?businessid=<?php echo $this->session->userdata('businessid') ?>&order_id="+order_id,
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(order_data).done(function (response) {
            $(".loader").fadeOut("slow");
            var order_id = response.order_id;
            var id_customers = response.id_customers;
            var id_staff = response.id_staff;
            var order_type = response.order_type;
            // Displaying order number  on cart
            $("#displaying_order_no_on_cart").html('<h4 style="color:white;font-weight: bold"> Order No : '+response.order_id+' </h4>');
            $("#displaying_order_no_on_cart").show();
            $("#displaying_customer_name_no_on_cart").html('<h4 style="color:white;font-weight: bold">'+response.customer_name+' </h4>');
            $("#displaying_customer_name_no_on_cart").show();
            $("#for_appending_customers").val(id_customers);
            $("#for_appending_customers").val(id_customers);
            $("#for_customer_search_customers").select2("data", { id: id_customers, customer_name: response.customer_name, customer_cell: ""});
            // $("#for_customer_search_customers").trigger('change');
            $('.order_type_btn').each(function() {
                var type =    $(this).data("typeid");
                if (type == order_type) {
                    $(this).addClass("active");
                }else{
                    $(this).removeClass("active");
                }
            });
            // getting_staff_list(id_staff); 
            $('#for_appending_staffs').select2('destroy');
            $('#for_appending_staffs').val(id_staff);
            $('#for_appending_staffs').select2();
            var  html='<input type="hidden" class="form-control order_id_for_edit" value="' + order_id + '" style="display:none">';
            $.each(response.products, function(index, product) {
                var product_name = product.product_name;
                var qty = parseFloat(product.qty);
                var price = parseFloat(product.product_unit_price);
                var product_sales_tax = parseFloat(product.product_sale_tax_percentage);
                var product_id = parseFloat(product.product_id);
                var category = product.category;
                var brand_id = parseFloat(product.business_brand_id);
                var id_order_products = parseFloat(product.id_order_products);
                var sku = '';
                var total_price = parseFloat(price) * qty;
                var total_discount_amount  =  product.product_discount_amount
                var taxAmount = ((total_price-total_discount_amount) * parseFloat(product_sales_tax)) / 100;
                var totalPrice = (total_price-total_discount_amount) + taxAmount;
                html += '<tr>';
                html += '<td><input type="text" class="form-control product_name" value="' + product_name + '" style="display:none">'+product_name+'</td>';
                html += '<td style="text-align: right;" class="product_price_for_display"> '+price+'</td>';
                html += '<td style="text-align: right;"><input type="number" class=" product_qty" value="'+qty+'" min="1" ></td>';
                html += '<td style="text-align: right;"><input type="number" class=" product_discount" value="'+total_discount_amount+'" min="0" ></td>';
                html += '<td style="text-align: right;" class="product_sale_tax_amount"> '+parseFloat(taxAmount).toFixed(2)+'</td>';
                html += '<td style="text-align: right;" class="product_final_price">'+parseFloat(totalPrice).toFixed(2)+'</td>';
                html += '<td style="text-align: right; display:none" ><input type="number" class="form-control product_sale_tax" value="'+product_sales_tax+'" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control product_price" value="' + price + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control product_id" value="' + product_id + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control category_name" value="' + category + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control brand_id" value="' + brand_id + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control id_order_products" value="' + id_order_products + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control batch_id" value="' + product.batch_id + '" style="display:none"></td>';
                html += '<td style="text-align: right; display:none" ><input type="text" class="form-control batch_number" value="' + product.batch + '" style="display:none"></td>';
                html += '<td><i class="fa fa-close remove_product_from_table_and_database" style="font-size:15px;color:red;cursor: pointer;"></i></td>';
                // html += '<td style="text-align: right;"></td>';
                html += '</tr>';
            });
            $("#table-new-order tbody").html(html);
            final_calculation_for_total();
        });
    }
    function payment_method_calculating(){
        var select_payment = $("#select_payment").val();
        var html='';
        if(select_payment == "Cash"){
            // $("#card_number_div").hide();
            // $("#instrument_number_div").hide();
            // $("#payment_amount_div").show();
            // $("#payment_cash_amount_div").hide();
            // $("#payment_card_amount_div").hide();
            // $("#return_amount_div").show();
            html+='<div class="col-md-2"  id="payment_amount_div">';
            html+='<label class="form-label"> Amount</label>';
            html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
        }else if( select_payment == "Card"){
            // $("#card_number_div").show();
            // $("#instrument_number_div").hide();
            // $("#payment_amount_div").show();
            // $("#payment_cash_amount_div").hide();
            // $("#payment_card_amount_div").hide();
            // $("#return_amount_div").show();
            html+='<div class="col-md-4"  id="card_number_div">';
            html+='<label class="form-label">Card Number</label>';
            html+='<input type="text" value="" placeholder="Card No" name="card_number" class="form-control" id="card_number" class="card_number">';
            html+='</div>';
            html+='<div class="col-md-2"  id="payment_amount_div">';
            html+='<label class="form-label"> Amount</label>';
            html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
        }else if( select_payment == "Check"){
            // $("#card_number_div").hide();
            // $("#instrument_number_div").show();
            // $("#payment_amount_div").show();
            // $("#payment_cash_amount_div").hide();
            // $("#payment_card_amount_div").hide();
            // $("#return_amount_div").show();
            html+='<div class="col-md-3"  id="instrument_number_div">';
            html+='<label class="form-label">Instrument Number</label>';
            html+='<input type="text" value="" placeholder="Instrument number " name="instrument_number " class="form-control" id="instrument_number">';
            html+='</div>';
            html+='<div class="col-md-2"  id="payment_amount_div">';
            html+='<label class="form-label"> Amount</label>';
            html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
        }else if(select_payment == "Online"){
            // $("#card_number_div").hide();
            // $("#instrument_number_div").show();
            // $("#payment_amount_div").show();
            // $("#payment_cash_amount_div").hide();
            // $("#payment_card_amount_div").hide();
            // $("#return_amount_div").show();
            html+='<div class="col-md-3"  id="instrument_number_div">';
            html+='<label class="form-label">Instrument Number</label>';
            html+='<input type="text" value="" placeholder="Instrument number " name="instrument_number " class="form-control" id="instrument_number">';
            html+='</div>';
            html+='<div class="col-md-2"  id="payment_amount_div">';
            html+='<label class="form-label"> Amount</label>';
            html+='<input type="number" value="" placeholder="Amount" name="paid" class="form-control" id="payment_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
        }else if(select_payment == "Mixed"){
            // $("#card_number_div").show();
            // $("#instrument_number_div").hide();
            // $("#payment_amount_div").hide();
            // $("#payment_cash_amount_div").show();
            // $("#payment_card_amount_div").show();
            // $("#return_amount_div").show();
            html+='<div class="col-md-4"  id="card_number_div">';
            html+='<label class="form-label">Card Number</label>';
            html+='<input type="text" value="" placeholder="Card No" name="card_number" class="form-control" id="card_number" class="card_number">';
            html+='</div>';
            html+='<div class="col-md-2"  id="payment_cash_amount_div">';
            html+='<label class="form-label"> Cash Amount</label>';
            html+='<input type="number" value="" placeholder="Cash Amount" name="payment_cash_amount" class="form-control" id="payment_cash_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-2"  id="payment_card_amount_div">';
            html+='<label class="form-label"> Card Amount</label>';
            html+='<input type="number" value="" placeholder="Card Amount" name="payment_card_amount" class="form-control" id="payment_card_amount" step="any">';
            html+='</div>';
            html+='<div class="col-md-3"   id="return_amount_div">';
            html+=' <label class="form-label"> Return Amount</label>';
            html+='<input type="text" value="0" readonly placeholder="" name="return_amount" class="form-control" id="return_amount">';
            html+='</div>';
            $('#payment_mode_feild').html(html);
        }
    }
    function getting_html_invoice_template(order_id){
        $(".loader").fadeIn("slow");
        $.ajax({
            url: '<?php echo base_url().'open_order_invoice_for_pos'; ?>',
            type: 'POST',
            dataType: 'html', // Yeh server se aane wali response ka data type batata hai
            data: { "order-id" : order_id},
            success: function(result){
                $(".loader").fadeOut("slow");
                $("#mymodalforinvoice").html(result);
                $("#order_detail_modal").modal('show');
                recalculate_all();
                updatetotal();
            }
        });
    }
    function  getting_recovery_invoice_view(order_id , invoice_id){
        $.ajax({
            "url": "<?php echo base_url(); ?>open_recovery_order_invoice_for_pos/"+invoice_id+"/"+order_id,
            type: 'GET',
            dataType: 'html', // Yeh server se aane wali response ka data type batata hai
            success: function(result){
                $("#order_balance_invoice_modal_body").html(result);
                $("#order_balance_invoice_modal").modal('show');
            }
        });
    }
    payment_method_calculating();
    function fillBday() {
        for (x = 1; x <= 31; x++) {
            $("#txt-customer-bday").append('<option value=' + x + '>' + x + '</option>');
            $("#detail-customer-bday").append('<option value=' + x + '>' + x + '</option>');
        }
    }
    function ucwords(str) {
        return str.replace(/(?:^|\s)\w/g, function(match) {
            return match.toUpperCase();
        });
    }
    function  unsetting_session_after_invoice_creation(){
        // var session_flag = 0
        var data = localStorage.getItem('myData');
        if(data == "invoice-pending"){
            setTimeout(unsetting_session_after_invoice_creation, 2000);
        }else{
            getting_runing_order();
            return false;
        }
    }
    function getting_recent_invoices(){
        if ($.fn.dataTable.isDataTable('#invoice-table')) {
            // Destroy the DataTable
            $('#invoice-table').DataTable().destroy();
        }
        $("#recent_invoice_modal #invoice-table tbody").html('');
        $(".loader").fadeIn("slow");
        var settings = {
            "url": "<?php echo base_url(); ?>restaurantapi/getting_recent_invoices?businessid=<?php echo $this->session->userdata('businessid') ?>",
            "method": "GET",
            "timeout": 0,
            "headers": {
                "SKED-API-KEY": "$ked_re$t-8547-65265-7444-12"
            },
        };
        $.ajax(settings).done(function (response) {
            $(".loader").fadeOut("slow");
            if(response.length > 0){
                var  html='';
                $.each(response, function(index, invoice) {
                    // var formattedDate = $.datepicker.formatDate("MM-dd-yy", invoice.invoice_date); 
                    html+="<tr>"
                    html+="<td>"+invoice.invoice_id+"</td>";
                    html+="<td>"+invoice.invoice_number+"</td>";
                    html+="<td>"+invoice.order_id+"</td>";
                    html+="<td>"+invoice.customer_name+"</td>";
                    html+="<td>"+invoice.sub_total+"</td>";
                    html+="<td>"+invoice.discount+"</td>";
                    html+="<td>"+invoice.tax_total+"</td>";
                    html+="<td>"+invoice.net_amount+"</td>";
                    html+="<td>"+invoice.paid_amount+"</td>";
                    html+="<td>"+invoice.balance+"</td>";
                    html+="<td>"+invoice.invoice_date+"</td>";
                    html += '<td>' +
                         '<button class="btn btn-sm btn-success " onclick="printinvoice(\'' + invoice.invoice_id + '\')">' +
                        '<i class="fa fa-print" aria-hidden="true"></i> Print</button> ' +
                        '<button class="btn btn-sm btn-danger" onclick="cancelinvoice(\'' + invoice.invoice_id + '\',\'' + invoice.order_id + '\', \'retail\')">' +
                        '<i class="fa fa-remove"></i></button>' +
                        '</td>';
                    html+="</tr>"
                });
                $("#recent_invoice_modal #invoice-table tbody").html(html);
                $("#recent_invoice_modal").modal('show'); 
                $(function() {
                    $('#invoice-table').DataTable({
                        lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        stateSave: true,
                        dom: "Bfrtlip",
                        buttons: [
                            { extend: "copy", className: "btn-sm btn-custom btn-trans" },
                            { extend: "csv", className: "btn-sm btn-pink btn-trans" },
                            { extend: "excel", className: "btn-sm btn-warning btn-trans" },
                            { extend: "pdf", className: "btn-sm btn-purple btn-trans" }
                        ],
                        ordering: false,
                        responsive: true,
                        pageLength: -1
                    });
                });
            }else{
                  swal("Currently Invoices Are Not Available ");
            }
        });
    }
    function cancelinvoice(invoiceid, visit_order_id, flag){
        $("#recent_invoice_modal").modal('hide');
        $('.modal-backdrop').hide();
        swal({
            title: "Are you sure?",
            text: "Give Reason For Cancelling This Invoice:",
            type: "input",
            showCancelButton: true,
            closeOnConfirm: false,
            inputPlaceholder: "reason for cancelling"
        }, function (inputValue) {
            if (inputValue === false) {
                getting_recent_invoices();
                return false;
            }
            if (inputValue === "") {
                swal.showInputError("You need to write something!");
                return false
            }
            sked_invoice_cancel(invoiceid, visit_order_id, flag, inputValue);
        });
    }
    function sked_invoice_cancel(invoiceid, visit_order_id, flag, inputValue){
        $.ajax({
            type: 'POST',
            url: '<?php echo base_url();?>invoice_controller/cancelinvoice',
            data: {
                invoiceid : invoiceid,
                visit_order_id : visit_order_id,
                flag : flag,
                reason : inputValue
            },
            success: function(data) {
                var result = data.split("|");
                if (result[0] === "success") {
                    swal("Deleted!", "Your invoice has been removed.", "success");
                    // location.reload(); 
                    getting_runing_order();
                } else {
                    swal("Info!", "Invoice was not removed!. "+result[1] , "error");
                }
            }
        });
    }
    function printinvoice(invoice_id){
        $(".loader").fadeIn("slow");
        $.ajax({
            "url": "<?php echo base_url(); ?>existingorderinvoice_for_pos/"+invoice_id,
            type: 'GET',
            dataType: 'html', // Yeh server se aane wali response ka data type batata hai
            success: function(result){
                $(".loader").fadeOut("slow");
                $("#recent_invoice_modal").modal('hide');
                $("#order_print_invoice_modal_body").html(result);
                $('#recent_invoice_modal').on('hidden.bs.modal', function () {
                $('#order_print_invoice_modal').modal('show');
                    $(this).off('hidden.bs.modal'); 
                });
                fetchDefaultCustomer();
            }
        });
    }
    function hide_modal_before_print(divName){ 
        fetchDefaultCustomer();
        $('#order_print_invoice_modal').modal('hide');
        $('#order_detail_modal').modal('hide');
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove(); 
        setTimeout(function () {
            printDiv(divName)
        }, 500); // Delay to allow the first modal to hide completely
    }
    function printDiv(divName) {
        var printContents = document.getElementById(divName).innerHTML;
        var styles = Array.from(document.querySelectorAll('style, link[rel="stylesheet"]'))
            .map(style => style.outerHTML)
            .join('\n');
        var printWindow = window.open('', '_blank');
        printWindow.document.open();
        printWindow.document.write(`
            <html>
            <head>
                <title>Print</title>
                ${styles} 
            </head>
            <body>
                ${printContents}
            </body>
            </html>
        `);
        printWindow.document.close();
        printWindow.onload = function () {
            printWindow.focus();
            printWindow.print();
            printWindow.close(); 
        };
    }  
    // function getting_products_by_cat(category_name){
    //     $("#for_appending_all_products").html('')
    //     var search_field = category_name.toLowerCase();
    //     $.each(all_product_data_for_search, function(index, products){
    //         var value =  products.product;
    //         var category =  products.category;
    //         if(category == null || category ==""){
    //             category ="";
    //         }
    //         var sku =  products.sku;
    //         if(sku==null){
    //             sku="";
    //         }
    //         var business_brand_name =  products.business_brand_name;
    //         if(business_brand_name==null){
    //             business_brand_name="";
    //         }
    //         var barcode_products =  products.barcode_products;
    //         if(barcode_products==null){
    //             barcode_products="";
    //         }
    //         var id_business_products =  products.id_business_products;
    //         if(id_business_products==null){
    //             id_business_products==0;
    //         }
    //         if(products.image =="" || products.image == null){
    //             var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/no-Image-.png';
    //         }else{
    //             var imageUrl = '<?php echo base_url(); ?>assets/images/productImages/' + products.image;
    //         }
    //         if(search_field == 'all'){
    //             html ='<div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4 "><div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);" style="padding: 3px;cursor:pointer;"  onclick="add_product_to_cart_table(\'' + products.product + '\', \'' + products.sku + '\', ' + products.price + ', ' + products.product_sales_tax + ', ' + products.id_business_products + ',\'' + products.category + '\',' + products.brand_id + ' ,'+products.id_batch+',\'' +products.batch_number+ '\')"><div style="max-width: 100%; max-height: 100%;"><img class="card-img-top" src="'+imageUrl+'" alt="Card image cap" ></div><div class="card-body"><h6 class="card-title text-center text-success" style="font-weight: bold;letter-spacing: 1px;" >'+products.product+'</h6><p class="card-text text-center text-danger" style="color:red;font-weight: bold;"> <?php echo CURRENCY_CODE;?> '+products.price+'</p></div></div></div>';
    //             $("#for_appending_all_products").append(html);
    //         }else{
    //             if(category != null || category !=""){
    //                 if(category.toLowerCase().includes(search_field)) {
    //                     html ='<div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4 "><div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);" style="padding: 3px;cursor:pointer;"  onclick="add_product_to_cart_table(\'' + products.product + '\', \'' + products.sku + '\', ' + products.price + ', ' + products.product_sales_tax + ', ' + products.id_business_products + ',\'' + products.category + '\',' + products.brand_id + ' ,'+products.id_batch+',\'' +products.batch_number+ '\')"><div style="max-width: 100%; max-height: 100%;"><img class="card-img-top" src="'+imageUrl+'" alt="Card image cap" ></div><div class="card-body"><h6 class="card-title text-center text-success" style="font-weight: bold;letter-spacing: 1px;" >'+products.product+'</h6><p class="card-text text-center text-danger" style="color:red;font-weight: bold;"> <?php echo CURRENCY_CODE;?> '+products.price+'</p></div></div></div>';
    //                     $("#for_appending_all_products").append(html);
    //                     // $(".loader").fadeOut("slow"); 
    //                 }
    //             }
    //         }
    //     });
    // } 
    function getting_products_by_cat(category_name) {
    const itemsPerPage = 9; 
    let currentPage = 1; 
    const filteredProducts = [];
    function filterProducts() {
        const search_field = category_name.toLowerCase();
        filteredProducts.length = 0;  
        console.log(all_product_data_for_search,"all_product_data_for_search");
        $.each(all_product_data_for_search, function (index, products) {
            let category = products.category ? products.category.toLowerCase() : ""; 
            if(search_field =='track_inventory_no') {  
                console.log('true'); 
                if(products.track_inventory == 'No'){
                    filteredProducts.push(products); 
                    console.log('track inventory no Products');
                }
            }else{ 
                if (search_field === 'all' || category.includes(search_field)) {
                  filteredProducts.push(products);
                }
            } 
        });
    } 
    function renderProducts() {
        const startIndex = (currentPage - 1) * itemsPerPage;
        const endIndex = startIndex + itemsPerPage;
        const productsToRender = filteredProducts.slice(startIndex, endIndex);
        $("#for_appending_all_products").html("");
        $.each(productsToRender, function (index, products) {
            const imageUrl = products.image
                ? '<?php echo base_url(); ?>assets/images/productImages/' + products.image
                : '<?php echo base_url(); ?>assets/images/productImages/no-Image-.png';
            const html = `
                <div class="col-md-4 col-lg-4 col-xl-4 col-sm-4 col-xs-4">
                    <div class="card card-box productscardformargin" style="box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); cursor: pointer;" 
                         onclick="add_product_to_cart_table('${products.product}', '${products.sku}', ${products.price}, ${products.product_sales_tax}, ${products.id_business_products}, '${products.category}', ${products.brand_id}, ${products.id_batch}, '${products.batch_number}')">
                        <div style="max-width: 100%; max-height: 100%;">
                            <img class="card-img-top" src="${imageUrl}" alt="Card image cap">
                        </div>
                        <div class="card-body">
                            <h6 class="card-title text-center text-success" style="font-weight: bold; letter-spacing: 1px;">
                                ${products.product}
                            </h6>
                            <p class="card-text text-center text-danger" style="font-weight: bold;">
                                <?php echo CURRENCY_CODE; ?> ${products.price}
                            </p>
                        </div>
                    </div>
                </div>`;
            $("#for_appending_all_products").append(html);
        });
        $("#prev-btn").prop("disabled", currentPage === 1);
        $("#next-btn").prop("disabled", currentPage >= Math.ceil(filteredProducts.length / itemsPerPage));
    } 
    function setupPagination() {
        $("#pagination-controls").remove();  
        // var total_cards_in_div = $("#for_appending_all_products .col-md-4, .col-lg-4, .col-xl-4, .col-sm-4, .col-xs-4").length;
        if(filteredProducts.length>9){  
            const paginationHtml = `
                <div id="pagination-controls" class="mt-3 text-right">
                    <button id="prev-btn" class="btn btn-secondary btn-sm" disabled><i class="fa fa-arrow-left" aria-hidden="true"></i></button>
                    <button id="next-btn" class="btn btn-primary btn-sm"><i class="fa fa-arrow-right" aria-hidden="true"></i></button>
                </div>`;
            $("#for_appending_all_products").after(paginationHtml);
        }
        // Attach event handlers
            $("#prev-btn").click(function () {
                if (currentPage > 1) {
                    currentPage--;
                    renderProducts(); 
                    $(".main_div_of_products_cards").animate({ scrollTop: 0 }, "slow");
                }
            });
            $("#next-btn").click(function () {
                if (currentPage < Math.ceil(filteredProducts.length / itemsPerPage)) {
                    currentPage++;
                    renderProducts(); 
                    $(".main_div_of_products_cards").animate({ scrollTop: 0 }, "slow");
                }
            }); 
    }
    filterProducts();
    setupPagination();
    renderProducts();
}
    // ===========>  Full Screeen Jquery Start   <=============== 
    function toggleFullScreen() {
        const sections = document.getElementsByClassName('container-full');
        if (!document.fullscreenElement) {
            Array.from(sections).forEach(section => section.classList.add('fullscreen'));
            setImportantHeight(".main_div_of_products_cards_and_category", "97vh");
            setImportantHeight(".currect_order_card_one", "96.5vh");
            setImportantHeight(".cart_table_view_height", "73vh");
            setImportantHeight("#main_category_div", "90vh");
            setImportantHeight(".main_div_of_products_cards", "90vh");
            setImportantHeight(".running_order_main_div", "97vh");
            setImportantHeight(".running_card_one", "96.5vh");
            setImportantHeight("#balance_order_main_div", "67vh");
            setImportantHeight("#runing_order_main_div", "67vh");
            document.documentElement.requestFullscreen().catch(err => {
                console.error(err);
            });
        } else {
            document.exitFullscreen();
            Array.from(sections).forEach(section => section.classList.remove('fullscreen'));
            setImportantHeight(".main_div_of_products_cards_and_category", "89vh");
            setImportantHeight(".currect_order_card_one", "88.5vh");
            setImportantHeight(".cart_table_view_height", "58vh");
            setImportantHeight("#main_category_div", "79.5vh");
            setImportantHeight(".main_div_of_products_cards", "79.5vh");
            setImportantHeight(".running_order_main_div", "89vh");
            setImportantHeight(".running_card_one", "88.5vh");
            setImportantHeight("#balance_order_main_div", "55vh");
            setImportantHeight("#runing_order_main_div", "55vh");
        }
    }
    function setImportantHeight(selector, height) {
        const elements = document.querySelectorAll(selector);
        elements.forEach(element => {
            element.style.setProperty("height", height, "important");
        });
    }
    // Add an event listener for the ESC key
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            const sections = document.getElementsByClassName('container-full');
            if (!document.fullscreenElement) {
                Array.from(sections).forEach(section => section.classList.add('fullscreen'));
                document.documentElement.requestFullscreen().catch(err => {
                });
            } else {
                document.exitFullscreen();
                Array.from(sections).forEach(section => section.classList.remove('fullscreen'));
            }
        }
    });
    document.addEventListener("fullscreenchange", function() {
        if (!document.fullscreenElement) {
            const sections = document.getElementsByClassName('container-full');
            // document.exitFullscreen();
            Array.from(sections).forEach(section => section.classList.remove('fullscreen'));
            setImportantHeight(".main_div_of_products_cards_and_category", "89vh");
            setImportantHeight(".currect_order_card_one", "88.5vh");
            setImportantHeight(".cart_table_view_height", "58vh");
            setImportantHeight("#main_category_div", "79.5vh");
            setImportantHeight(".main_div_of_products_cards", "79.5vh");
            setImportantHeight(".running_order_main_div", "89vh");
            setImportantHeight(".running_card_one", "88.5vh");
            setImportantHeight("#balance_order_main_div", "55vh");
            setImportantHeight("#runing_order_main_div", "55vh");
            // You can trigger any additional functionality here if needed
        }
    });
    $(document).on('keydown', function(event) {
        if (event.key === "F11") {
            event.preventDefault();  // Prevent the default F11 behavior
            toggleFullScreen();
        }
    });  



    // ===========>  Full Screeen Jquery End    <===============       
</script>   
 <?php include __DIR__ .'/general_js.php'; ?> 