

<!-- Main Content without Sidebar -->

<div class="main-content">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <!-- Socket.IO Client Library -->
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>

  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> <!-- Font Awesome -->








  <style>



#passcodeModal {
      display: none;
      position: fixed;
      z-index: 2;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.5);
    }

    #passcodeModal .modal-content {
      background-color: white;
      margin: 15% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 80%;
      max-width: 500px;
      border-radius: 8px;
    }

    #passcodeModal .close {
      color: #aaa;
      float: right;
      font-size: 28px;
      font-weight: bold;
      cursor: pointer;
    }

    #passcodeModal .close:hover {
      color: black;
    }

    #passcodeModal input[type="password"] {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      box-sizing: border-box;
    }

    #passcodeModal button {
      background-color: #007bff;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    #passcode-container {
      position: absolute;
      top: 60px;
      right: 20px;
      width: 200px;
      text-align: right;
    }

    #passCodeInput {
      width: 100%; /* Ensure input fills the container */
      padding: 8px;
      margin-top: 5px;
      box-sizing: border-box;
    }



  /* Default style: show only a small calendar icon */
.expDate {
  width: 24px; /* Adjust based on the size of your icon */
  padding: 0;
  background: url('calendar-icon.png') no-repeat center center; /* Add your calendar icon */
  background-size: 16px 16px; /* Adjust icon size */
  border: none;
  cursor: pointer;
}

/* Style when the input is focused or has a value */
.expDate:focus,
.expDate:not(:placeholder-shown) {
  width: 120px; /* Adjust to your preferred width */
  background: none; /* Remove the icon when expanded */
  padding: 5px; /* Add padding for better appearance */
  border: 1px solid #ccc; /* Add a border for better visibility */
}


    
    /* Container for search box and dropdown */
    .search-container {
      position: relative;
      width: 100%;
      max-width: 400px; /* Adjust width as needed */
     
      font-family: Arial, sans-serif;
    }
    
    
    
    /* Search box styling */
    .search-box {
      width: 100%;
      padding: 10px 12px;
      font-size: 14px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      outline: none;
      transition: border-color 0.3s ease;
    }
    
    .search-box:focus {
      border-color: #007bff;
    }
    
    /* Dropdown styling */
    .custom-dropdown {
      position: absolute;
      top: calc(100% - 10px); /* Slightly overlap the search box */
      left: 0;
      width: 100%;
      background: #fff;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
      max-height: 200px; /* Set a max height for overflow */
      overflow-y: auto;
      z-index: 1000;
      padding: 0; /* Remove padding for a clean list look */
      box-sizing: border-box;
    }
    
    /* Dropdown option styling */
    .custom-dropdown div {
      padding: 10px;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #f1f1f1;
      color: #333;
    }
    
    .custom-dropdown div:last-child {
      border-bottom: none; /* Remove border for the last item */
    }
    
    /* Hover effect for dropdown options */
    .custom-dropdown div:hover {
      background-color: #f1f1f1;
    }
    
    
    
    
    /* Optional: Style for empty dropdown */
    .custom-dropdown.empty {
      text-align: center;
      color: #999;
      padding: 10px;
    }
    
    
    
    /* Styling for each dropdown option */
    .dropdown-option {
      padding: 10px;
      font-size: 14px;
      cursor: pointer;
      border-bottom: 1px solid #f1f1f1;
      color: #333;
    }
    
    .dropdown-option:last-child {
      border-bottom: none; /* Remove border for the last item */
    }
    
    /* Hover effect */
    .dropdown-option:hover {
      background-color: #f1f1f1;
    }
    
    
    
    .modal-content1 {
     
      background-color: var(--modal-bg-color);
      margin: 7% auto;
      padding: 20px;
      
      border: 1px solid #37608b;
      width: 500px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add shadow effect */
      border-radius: 8px; /* Optional: Adds rounded corners for a polished look */
    }
    
    
    /* Form Styles */
    #editPaymentForm {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .form-group {
      padding: 0;
      margin: 0;
      display: flex;
      align-items: center;
    }
    
    .form-group label {
      flex: 1; /* Labels take up equal width */
      font-weight: bold;
      margin-right: 10px;
      text-align: left;
    }
    
    .form-group input,
    .form-group textarea {
      flex: 2; /* Inputs and textarea take up proportional width */
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
      width: 100%;
    }
    
    .form-group textarea {
      resize: vertical;
      min-height: 80px;
    }
    
    /* Button Styles */
    .modal-actions {
      display: flex;
      justify-content: center;
      margin-top: 15px;
    }
    
    .modal-actions button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 5px;
      font-size: 1rem;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    
    .modal-actions button:hover {
      background-color: #0056b3;
    }
    


    .camera-actions{display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 0px;}

 .camera-actions button{
margin: 0;
width: 200px;  
height: 40px;
padding: 10px 10px;
justify-content: center;
justify-items: center;
 }
 .camera-actions label{

width: 200px;  
height: 40px;
padding: 10px 10px;
justify-content: center;
justify-items: center;
margin: 0;
 }


/* Base styles */
.type-group {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 0px;
}


.type-group button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border: 0.5px solid #0078d4;
  border-radius: 50%;
  background-color: #ffffff;
  color: #0078d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.search-items input {

  width: 250px;
  padding:0px;
  margin:0px 0;
  height: 30px;
  box-sizing: border-box;
  border: 1px solid var(--input-border-color);
  border-radius: 4px;
  font-size: 12px;
  background-color: var(--input-bg-color);
}




/* Specific button styles with icons */
#store-btn::before {
  content: "\1F3EA"; /* Store icon (🏪) */
}

#shop-btn::before {
  content: "\1F6D2"; /* Shopping cart icon (🛒) */
}


.tab-switch {
  display: flex;
  gap: 15px;
  justify-content: center;
  margin-top: 0px;
}

.tab-switch2 {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 0px;
}

.tab-switch button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border: 0.5px solid #0078d4;
  border-radius: 50%;
  background-color: #ffffff;
  color: #0078d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}    

.tab-switch2 button {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 30px;
  height: 30px;
  border: 0.5px solid #0078d4;
  border-radius: 50%;
  background-color: #ffffff;
  color: #0078d4;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}   
.right-side { 
 width: 100%;
  display: flex;
  gap: 5px;
  justify-content: flex-end;
 
 
}


/* General button styles */
#list-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 30px;
  margin-right: 5px;
  border: none;
  border-radius:8%;
  background-color: #549af6;
  color: #ffffff;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}








#list-btn::before {
  content: "\f053"; /* Chevron Left icon (backward) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

#cart-btn2::before {
  content: "\f054"; /* Chevron Right icon (forward) */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}


#start-camera-btn {
  margin-top: 4px;
  height: 25px;
  width: 25px;
   
    font-size: 1.2em;
    background-color: #fd5029; /* Example blue background */
    color: white; /* White text */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex; /* Use flexbox for better alignment */
    align-items: center; /* Vertically center the icon and text */
    justify-items: center;
}

#start-camera-btn i {
  
    font-size: 0.8em; /* Make the icon the same size as the text */
}

#start-camera-btn:hover {
    background-color: #0056b3; /* Darker blue on hover */
}




#start-camera-btn2 {
  margin-top: 4px;
  height: 25px;
  width: 25px;
   
    font-size: 1.2em;
    background-color: #fd5029; /* Example blue background */
    color: white; /* White text */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex; /* Use flexbox for better alignment */
    align-items: center; /* Vertically center the icon and text */
    justify-items: center;
}





#start-camera-btn2 i {
  
    font-size: 0.8em; /* Make the icon the same size as the text */
}

#start-camera-btn2:hover {
    background-color: #0056b3; /* Darker blue on hover */
}





#type-btn {
  margin-top: 4px;
  height: 25px;
  width: 25px;
   
    font-size: 0.9em;
    background-color: #00c8ff; /* Example blue background */
    color: rgb(248, 248, 248); /* White text */
    border: none;
    border-radius: 3px;
    cursor: pointer;
    display: inline-flex; /* Use flexbox for better alignment */
    align-items: center; /* Vertically center the icon and text */
    justify-items: center;
}

#type-btn:hover {
    background-color: #40e01f; /* Slightly darker green on hover */
    border-color: #e03838; /* Slightly darker red on hover */
}

#type-btn:active {
    background-color: #39c71a; /* Even darker green on active */
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.1); /* Inset shadow on click */
}




.top-access {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding:0;
    background-color: #fff;
    border-bottom: 1px solid #eee;
  
    font-family: sans-serif;
    font-size: 13px;
}

.top-access > div {
    display: flex;
    align-items: center;
}





#showCustomer
{
    padding:4px;
    margin: 0;
    margin-left: 15px;
    margin-bottom: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #0c90fc;
    cursor: pointer;
    font-size: 1em;
    width: 25px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#showCustomer {
    margin-right: 5px;
    font-size: 1.2em; /* Adjust icon size as needed */
}






#showPaymentBtn {
    padding:4px;
    margin: 0;
    margin-bottom: 2px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #0c90fc;
    cursor: pointer;
    font-size: 1em;
    width: 25px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-items: center;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

#showPaymentBtn i {
    margin-right: 5px;
    font-size: 1.2em; /* Adjust icon size as needed */
}

#showPaymentBtn:hover {
    background-color: #f0f0f0;
    border-color: #bbb;
    color: #007bff;
}


.orderCheckbox {
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Vertically align checkbox and label */
    cursor: pointer; /* Make the whole area clickable */
    margin: 0; }

 .orderCheckbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  margin-left: 15px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0;
}


.orderCheckbox input[type="checkbox"]:checked {
    background-color: #007bff;
    border-color: #007bff;
}

.orderCheckbox input[type="checkbox"]:checked::before {
    content: '\2713'; /* Unicode checkmark */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    color: white;
}

/* Optional: Focus styles */
.orderCheckbox input[type="checkbox"]:focus {
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.3); /* Subtle blue focus ring */
    border-color:#007bff;
}

.orderCheckbox label {
    color: #333; /* Dark gray label text */
    font-size: 0.9em;
    user-select: none; /* Prevent text selection on click */
}


/* Hide the default file input */
#imageInput {
  display: none;
}

/* Style the custom file input button */
#imageInput + label {
  display: inline-block;
 
  background-color: #007bff;
  color: #fff;
  border-radius: 5px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s;
}

/* Hover effect */
#imageInput + label:hover {
  background-color: #0056b3;
}

/* Focus effect */
#imageInput + label:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}




#cart-btn {
  background-color: #2e8ff6;
  color: #ffffff;
  position: relative;
  padding-right: 3px; /* Add some padding to the right to accommodate the count */
}

#cart-count {
  position: absolute;
  top: 0;
  right: 0;
  padding: 2px 5px;
  background-color: red;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  transform: translate(50%, -50%);
}

.table-calendar {
      display: grid;
      grid-template-columns: repeat(6, 1fr); /* Adjust columns as needed */
      gap: 10px;
      padding: 20px;
    }
    .table-item {
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
      text-align: center;
      background-color: #f9f9f9;
    }
    .table-item button {
      margin-top: 10px;
      padding: 5px 10px;
      cursor: pointer;
    }
    .table-modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    .table-modal-content {
  background: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 800px;
  width: 90%;
  max-height: 400px; /* Adjust to suit your design */
  overflow-y: auto; /* Enables scrolling for overflowing content */
}

    .table-close {
      float: right;
      font-size: 20px;
      font-weight: bold;
      cursor: pointer;
    }
    .table-close:hover {
      color: red;
    }


    #openTableModal {
      font-size: 20px;
      padding: 10px;
      border: none;
      background: none;
      cursor: pointer;
    }
    #openTableModal i {
      color: #555;
    }
    #openTableModal:hover i {
      color: #007BFF; /* Change color on hover */
    }

    /* Toast Notification Styles */
    .toast-container {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 10000;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .toast {
      background-color: #28a745;
      color: white;
      padding: 16px 24px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      min-width: 300px;
      max-width: 400px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      animation: slideInRight 0.3s ease-out;
      font-size: 14px;
    }

    .toast.error {
      background-color: #dc3545;
    }

    .toast.warning {
      background-color: #ffc107;
      color: #333;
    }

    .toast.info {
      background-color: #17a2b8;
    }

    .toast-close {
      background: none;
      border: none;
      color: white;
      font-size: 20px;
      cursor: pointer;
      padding: 0;
      margin-left: 15px;
      opacity: 0.8;
      line-height: 1;
    }

    .toast-close:hover {
      opacity: 1;
    }

    .toast.warning .toast-close {
      color: #333;
    }

    @keyframes slideInRight {
      from {
        transform: translateX(100%);
        opacity: 0;
      }
      to {
        transform: translateX(0);
        opacity: 1;
      }
    }

    @keyframes slideOutRight {
      from {
        transform: translateX(0);
        opacity: 1;
      }
      to {
        transform: translateX(100%);
        opacity: 0;
      }
    }

    .toast.hiding {
      animation: slideOutRight 0.3s ease-out forwards;
    }
        </style>
        
       


        <!-- Toast Container -->
        <div id="toastContainer" class="toast-container"></div>

        <canvas id="canvas" style="display: none;"></canvas>
     
        <canvas id="canvasHidden" style="display: none;"></canvas>
     
       <div class="camera-actions">




        <input type="file" id="imageInput"  accept="image/*" />
        <label for="imageInput" id="chooseImageLabel" style="display: none;">Choose Image</label>
      

        <button id="capture-btn">Take Photo</button> 
<button id="zoomIn"style="display: none;">+</button>
<button id="zoomOut"style="display: none;">-</button>
      </div>

        <button id="processImage"  style="display: none;">Save</button>


        <button id="reshoot-btn" style="display: none;">Re Shoot</button> 
        <button id="confirm-btn" style="display: none;">Confirm</button> 





        <div id="extracted-text"></div>



        <div id="passcodeModal" class="modal">
          <div class="modal-content">
            <span class="close" onclick="closePasscodeModal()">&times;</span>
            <h2>Enter Passcode</h2>
            <input type="password" id="passcodeInputModal" placeholder="Passcode">
            <div id="passcodeError" style="color: red; display: none;"></div>
          </div>
        </div>




  <div class="tr-tabs">

    <div class="type-group" style="display: none;">  
     <button id="store-btn"> </button>
     <button id="shop-btn"> </button>
       


    </div>







<div class="type-group" style="display: none;">  
    <button id="lowStock-btn" style="font-size: 9px;"> Low </button> </div>

    <div class="search-items">

      <input type="text" id="search-input"   placeholder="">

    </div>
    
    <div class="right-side" >
    <div class="tab-switch" >

     


      <button id="start-camera-btn" style="display: none;"> <i class="fas fa-camera"></i> </button>


        <div>
        <button  id="cart-btn" onclick="openTab(event, 'right-column','cart-btn')">Cart <span id="cart-count" >0</span></button>  
         </div>
        
      



    </div> 

    </div>

   

  </div>


  <div class="top-access" style="display: none;"> 

    <div style="display:none">
      <button id="showPaymentBtn"><i class="fas fa-credit-card"></i> </button>

      <button id="showCustomer"><i class="fas fa-user"></i></button>

      <div class="orderCheckbox">
      <input type="checkbox"  id="addOrder" />
      <label for="addOrder">Add Order</label>
       </div>
      
    </div>
   
    
    <div class="tab-switch2" >

    <button id="start-camera-btn2" style="display: none;"><i class="fas fa-camera"></i> </button>

     <button id="type-btn" ></button>
  
     <button id="list-btn"  style="display: none;"  onclick="openTab(event, 'left-column','list-btn')"></button>
 
  
  </div>
  
</div>


  <!-- Centered Container for Columns -->
  <div class="tr-container">



<style>






  /* Item card container */
#item-list {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 20px;
}

/* Individual card styling */
.item-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 200px;
  padding: 15px;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease-in-out;
  background-color: #f9f9f9;
}

/* Image styling */
.card-image img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 10px;
}

/* Text styling */
.item-name {
  font-weight: bold;
  margin: 10px 0;
}

.item-code,
.item-price,
.item-quantity,
.item-expiry {
  font-size: 14px;
  color: #555;
  margin: 5px 0;
}

/* Button styling */
.add-item-btn {
  padding: 8px 12px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.add-item-btn:hover {
  background-color: #0056b3;
}

/* Card hover effect */
.item-card:hover {
  transform: scale(1.05);
}


.category-row {
  display: flex;
  gap: 1.5rem; /* Space between items */
  padding: 1.5rem;
  overflow-x: scroll; /* Prevent visible scroll bar */
 
  position: relative; /* For pseudo-elements or controls, if needed */
  
}

.category-item {
  padding: 0.75rem 1.5rem; /* Balanced padding */
  background: linear-gradient(135deg, #1e90ff, #0073e6); /* Professional blue gradient */
  border-radius: 8px; /* Rounded corners */
  text-align: center;
  font-family: 'Arial', sans-serif; /* Modern font */
  font-size: 1rem;
  font-weight: bold;
  color: #fff; /* White text for contrast */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06); /* Softer shadows */
  flex-shrink: 0; /* Ensure items don't shrink */
  width: 150px; /* Fixed width for uniformity */
  transition: transform 0.2s, box-shadow 0.2s; /* Hover effects */
}

.category-item  button{
  background-color: transparent;
  text-align: center;
  align-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
}

.category-item:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1); /* Enhanced shadow */
}

.category-item:active {
  transform: scale(0.98); /* Click feedback */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle depth adjustment */
}







</style>

    
    <!-- Left Column (Item Search and Selection) -->
    <div id="left-column" class="tab-content active"  >
      <!-- Floating Cart Button -->
      <div id="cart-floating-btn"  onclick="openTab(event, 'right-column')">
       
      </div>

      <div id="categoryContainer" class="category-row"></div>



      <script >

// const categoryRow = document.querySelector('.category-row');

// let startX = 0;
// let scrollLeft = 0;

// categoryRow.addEventListener('touchstart', (e) => {
//   startX = e.touches[0].pageX; // Record starting point
//   scrollLeft = categoryRow.scrollLeft; // Store current scroll position
// });

// categoryRow.addEventListener('touchmove', (e) => {
//   const x = e.touches[0].pageX;
//   const walk = startX - x; // Calculate swipe distance
//   categoryRow.scrollLeft = scrollLeft + walk; // Adjust scroll position
// });


        </script>

      <div id="item-list" class="item-list-container">
        <!-- Cards will be dynamically added here -->
      </div>
      




      <button id="export-btn"  style="display: none;">Export</button>

    </div>

    <!-- Right Column (Cart and Transaction Details) -->
    <div id="right-column" class="tab-content ">
     <!-- Cart Items Displayed in a Table -->

     <!-- Button to open modal -->
  <button id="openTableModal">
    <i class="fas fa-table"></i>
  </button>

  <span id="selectedTable"> </span>


  <!-- Modal -->
  <div class="table-modal" id="tableModal">
    <div class="table-modal-content">
      <span class="table-close" id="closeTableModal">&times;</span>
      <div class="table-calendar" id="calendar"></div>
    </div>
  </div>
    
    <div class="row" style="display: none;">

    <div class="search-container" id="searchContainer" style="display: none;">

    
      <input
       type="text"
       id="searchBox"
       class="search-box"
       placeholder="Type to search..."
     />
     <div id="dropdownList" class="custom-dropdown" style="display: none;">
       <!-- Options will be dynamically populated -->
     </div>
   </div>



   <div class="search-container" id="searchContainer2" style="display: none;">

    
    <input
     type="text"
     id="searchBox2"
     class="search-box"
     placeholder="Type to search..."
   />
   <div id="dropdownList2" class="custom-dropdown" style="display: none;">
     <!-- Options will be dynamically populated -->
   </div>
 </div>
</div>

  <div id="cart-container"> 

   
    

    <table id="cart-table">

          <thead>
            <tr>
              <th>Item Name</th>
              <th>Quantity</th>
              <th>Price</th>
              <th style="display:none">Total</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody id="cart-items">
            <!-- Cart items will be dynamically added here -->
          </tbody>
        </table>
      </div>
 
  
      

      <div id="editPaymentModal" class="modal">
        <div class="modal-content1">
          <h3>Edit Payment Details</h3>
          <form id="editPaymentForm">
            <div class="form-group">
              <label for="editCash">Cash Payment:</label>
              <input type="number" id="editCash" name="cash" disabled />
            </div>
      
            <div class="form-group">
              <label for="editBank">Bank Payment:</label>
              <input type="number" id="editBank" name="bank" />
            </div>
      
            <div class="form-group">
              <label for="editCredit">Credit Payment:</label>
              <input type="number" id="editCredit" name="credit" />
            </div>
      
            <div class="form-group">
              <label for="editOther">Other Payment:</label>
              <input type="number" id="editOther" name="other" />
            </div>
      
            <div class="form-group">
              <label for="editDescription">Description:</label>
              <textarea id="editDescription" name="description" placeholder="Enter details or remarks..."></textarea>
            </div>
      
            <div class="modal-actions">
              <button type="button" id="closeEditModal">Save</button>
            </div>
          </form>
        </div>
      </div>
      


      <div id="cart-summary" style="display:none" >
        <h4>Cart Summary</h4>
        <span id="cart-total-items">Total Items: 0</span>
        <span id="cart-subtotal">Subtotal: $0.00</span>
      </div>


      
    <div>
      <!-- Submit Transaction Button -->
      <button id="submit-transaction">Submit</button>

    </div>

    <div style="display:none">
      <!-- Toggle Button for Showing and Hiding Fields -->
      <button id="toggle-fields-btn1">More Options</button>
    </div>
     


      <div class="form-group" id="customer-field">
        <label for="customer-select">Select customer</label>
        <select id="customerList">
        
        </select>
      </div>

       <!-- Transaction Date Field -->
       <div class="form-group" id="date-field">
        <label for="transaction-date">Select Date</label>
        <input type="date" id="transaction-date" name="transaction-date">
      </div>
    
      <div class="form-group" id="transaction-type-field">
      <label for="transaction-type">Transaction Type</label>
      <select id="transaction-type">
       
      </select>

    </div>


<!-- To Branch Dropdown -->
<div class="form-group" id="to-branch-select-field">
<label for="to-branch-select">To Branch</label>
<select id="to-branch-select" required>
<option value="">-- Select Destination Branch --</option>
<!-- Branch options will be dynamically inserted here -->
</select>
</div>


    </div>



  </div>
</div>


<!-- Kitchen Printer Class -->
<script>
  class KitchenPrinter {
    constructor() {
      // Get printer IP from localStorage, default to 192.168.20.100
      this.printerIP = localStorage.getItem('kitchenPrinterIP') || '192.168.20.100';
    }

    async printOrder(orderData) {
      try {
        const escposData = this.generateESC_POS(orderData);

        // Get printer bridge protocol, IP and port from localStorage and construct full URL
        const bridgeProtocol = localStorage.getItem('kitchenPrinterBridgeProtocol') || (window.location.protocol === 'https:' ? 'https' : 'http');
        const bridgeIP = localStorage.getItem('kitchenPrinterBridgeIP') || 'localhost';
        const bridgePort = localStorage.getItem('kitchenPrinterBridgePort') || '3000';
        const bridgeUrl = `${bridgeProtocol}://${bridgeIP}:${bridgePort}/print`;

        const response = await fetch(bridgeUrl, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            printerIP: this.printerIP,
            port: 9100,
            data: Array.from(escposData) // Convert to array for JSON
          })
        });

        const result = await response.json();

        if (result.success) {
          console.log('✓ Print job sent successfully!');
        } else {
          throw new Error(result.error);
        }

      } catch (error) {
        console.error('Print failed:', error);
        // Silent failure - don't interrupt user experience
      }
    }

    async savePrintDataToDatabase(orderData) {
      try {
        const response = await fetch('/api/printed-data/save-print-data', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            orderId: orderData.orderId,
            orderNo: orderData.id || orderData.orderNo,
            tableNo: orderData.table || null,
            waiterName: orderData.waiter || 'N/A',
            items: orderData.items || [],
            printType: 'new_order'
          })
        });

        const result = await response.json();
        
        if (result.success) {
          console.log('✓ Print data saved to database');
          // Note: Socket broadcast is now handled by the server after successful save
        } else {
          console.warn('Failed to save print data:', result.message);
        }
      } catch (error) {
        console.error('Error saving print data to database:', error);
        // Silent failure - don't interrupt user experience
      }
    }

    generateESC_POS(order) {
      const encoder = new TextEncoder();
      const commands = [
        '\x1B\x40',           // Initialize printer
        '\x1B\x61\x01',       // Center align
        '\x1B\x21\x10',       // Double height
        'KITCHEN ORDER\n',    // No space before this
        '\x1B\x21\x00',       // Normal text
        '\x1B\x61\x00',       // Left align
        `${'='.repeat(32)}\n`,
      ];

      // Helper function to create two-column layout
      const twoColumn = (left, right, maxWidth = 32) => {
        const leftText = left || '';
        const rightText = right || '';
        const padding = maxWidth - leftText.length - rightText.length;
        return padding > 0 
          ? leftText + ' '.repeat(padding) + rightText + '\n'
          : leftText + ' ' + rightText + '\n';
      };

      // Order Number (left) and Table (right)
      const orderText = `Order: #${order.id || order.orderNo || 'N/A'}`;
      const tableText = order.table ? `Table: ${order.table}` : '';
      commands.push(twoColumn(orderText, tableText));

      // Waiter Name (left) and Time (right)
      const waiterText = order.waiter ? `Waiter: ${order.waiter}` : '';
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const timeText = `Time: ${hours}:${minutes}`;
      commands.push(twoColumn(waiterText, timeText));

      commands.push(`${'='.repeat(32)}\n\n`);

      // Add items
      if (order.items && order.items.length > 0) {
        order.items.forEach(item => {
          commands.push(`${item.quantity}x ${item.name}\n`);
          if (item.notes && item.notes.length > 0) {
            commands.push(`  - ${item.notes}\n`);
          }
          if (item.specialNeeds && item.specialNeeds.length > 0) {
            commands.push(`  Special: ${item.specialNeeds.join(', ')}\n`);
          }
          commands.push('\n');
        });
      }

      commands.push(
        `${'='.repeat(32)}\n\n\n\n`,
        '\x1B\x69' // Partial cut
      );

      return encoder.encode(commands.join(''));
    }
  }

  // Create global printer instance
  window.kitchenPrinter = new KitchenPrinter();

  // Toast Notification Function
  function showToast(message, type = 'success', duration = 3000) {
    const toastContainer = document.getElementById('toastContainer');
    if (!toastContainer) {
      // Create container if it doesn't exist
      const container = document.createElement('div');
      container.id = 'toastContainer';
      container.className = 'toast-container';
      document.body.appendChild(container);
    }

    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    
    const messageSpan = document.createElement('span');
    messageSpan.textContent = message;
    
    const closeButton = document.createElement('button');
    closeButton.className = 'toast-close';
    closeButton.innerHTML = '&times;';
    closeButton.onclick = () => removeToast(toast);
    
    toast.appendChild(messageSpan);
    toast.appendChild(closeButton);
    
    toastContainer.appendChild(toast);
    
    // Auto remove after duration
    if (duration > 0) {
      setTimeout(() => {
        removeToast(toast);
      }, duration);
    }
    
    return toast;
  }

  function removeToast(toast) {
    toast.classList.add('hiding');
    setTimeout(() => {
      if (toast.parentNode) {
        toast.parentNode.removeChild(toast);
      }
    }, 300); // Match animation duration
  }

  // Make toast function globally available
  window.showToast = showToast;

  // Initialize Socket.IO connection (uses same origin as current page)
  window.socket = io({
    transports: ['websocket', 'polling']
  });

  window.socket.on('connect', () => {
    console.log('✓ Socket.IO connected');
  });

  window.socket.on('disconnect', () => {
    console.log('Socket.IO disconnected');
  });

  // Listen for print data broadcasts from other clients
  // window.socket.on('new-print-data', (printData) => {
  //   console.log('📢 New print data received from another client:', printData);
  //   // You can add a notification or UI update here
  //   // For example: show a toast notification, update a list, etc.
  //   if (printData.printType === 'order_update') {
  //     console.log(`Order #${printData.orderNo} updated by ${printData.waiterName}`);
  //   } else if (printData.printType === 'new_order') {
  //     console.log(`New order #${printData.orderNo} created by ${printData.waiterName}`);
  //   }
  // });

  window.socket.on('connect_error', (error) => {
    console.warn('Socket.IO connection error:', error);
  });
</script>

<script type="module" src="./js/new-transaction.js"></script>      


    <style>
     
        /* Modal Styling */
        .special-modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            overflow: auto;
        }

        .special-modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 2rem;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            max-width: 800px;
            width: 90%;
            position: relative;
        }

        .special-close {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            font-size: 1.5rem;
            color: #888;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .special-close:hover {
            color: #333;
        }

        h2 {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 1.5rem;
        }

        /* Category Buttons */
        .special-category-container {
            display: flex;

            flex-wrap: wrap;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
        }

        .special-category-button {
            padding: 0.8rem 1.2rem;
            width: 120px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
        }

        .special-category-button:hover {
            background-color: #0056b3;
        }

        /* Selected Special Needs */
        #selected-specialNeeds {
            font-size: 1rem;
            color: #555;
            margin-bottom: 1.5rem;
            font-weight: 500;
        }

        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 0.8rem;
            margin-bottom: 1.5rem;
        }

        .action-buttons button {
            padding: 0.8rem 1.2rem;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
        }

        #remove-all-btn {
          width: 80px;
            background-color: #dc3545;
            color: #fff;
        }

        #remove-all-btn:hover {
            background-color: #a71d2a;
        }

        #save-btn {
          width: 80px;
            background-color: #28a745;
            color: #fff;
        }

        #save-btn:hover {
            background-color: #1e7e34;
        }

        /* Special Needs Cards */
        .special-specialNeeds-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 1rem;
        }

        .special-card {
            background-color: #f8f9fa;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 1rem;
            text-align: center;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .special-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .special-card button {
            padding: 0.5rem 1rem;
            background-color: #28a745;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            transition: background-color 0.3s ease;
        }

        .special-card button:hover {
            background-color: #1e7e34;
        }

        /* Trigger Button */
        #special-openModal {
            padding: 1rem 2rem;
            background-color: #007BFF;
            color: #fff;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 1rem;
            transition: background-color 0.3s ease;
        }

        #special-openModal:hover {
            background-color: #0056b3;
        }
    </style>


<!-- Modal -->
<div id="special-specialNeedsModal" class="special-modal">
    <div class="special-modal-content">
        <span class="special-close">&times;</span>
        <h2>Special Needs</h2>
        <div id="special-categories" class="special-category-container">
            <!-- Category buttons will be added here -->
        </div>

        <div class="row">
          <div id="selected-specialNeeds">
            Selected Special Needs: None
        </div>
        <div class="action-buttons">
          <button id="remove-all-btn">Remove</button>
          <button id="save-btn">Save</button>
      </div>
        </div>
      

     

        <div id="special-specialNeeds" class="special-specialNeeds-container">
            <!-- Special needs list will be displayed here -->
        </div>
    </div>
</div>



