

<!-- 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>











  <style>




  /* 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%);
}




        </style>
        
       


        <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 class="tr-tabs">

    <div class="type-group">
     <button id="store-btn"> </button>
     <button id="shop-btn"> </button>
   

    </div>

<div class="type-group">    <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"><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>
      <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"><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">








    
    <!-- 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>

   

      <!-- Item List Table (Scrollable) with Quantity -->
      <div class="item-list-container" >
        <table id="item-list" class="item-list" >
                    <thead>
            <tr>
              <th style="text-align: center;">Image </th>
              <th>Name </th>
              <th>  Code</th>
              <th>Price</th>
              <th>Quantity</th>
              
              <th >Exp</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <!-- Items will be dynamically added here -->
          </tbody>
        </table>
      </div>
      <button id="export-btn">Export</button>

    </div>

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





    
    <div class="row">

    <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>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" >
        <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 Transaction</button>

    </div>

    <div>
      <!-- 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>


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

