
  <div class="main-content">



<style> /* Toggle Switch Styling */

/* Styling for the slider switch */
.slider {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 25px;
  background-color: #ccc;
  border-radius: 25px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 21px;
  height: 21px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .slider {
  background-color: #187ef7;
}

input[type="checkbox"]:checked + .slider::before {
  transform: translateX(25px);
}



.status-checkbox {
  background-color: aquamarine;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #187ef7; /* Set the custom color for the checkbox */
  border-radius: 4px; /* Optional: add slight rounding for a modern look */
  outline: none;
  transition: transform 0.2s ease;
}

.status-checkbox:hover {
  transform: scale(1.1); /* Slight zoom effect on hover */
}

.status-checkbox:checked {
  box-shadow: 0 0 4px rgba(24, 126, 247, 0.8); /* Add a subtle glow when checked */
}


</style>

    <div class="small-container">

    
      
    <div class="tab-section">

       

        <button id="addOrderBtn">Add New Order</button>
        <button id="viewOrdersBtn">View Orders</button>
    </div>

    <section id="orderFormSection" >
     
      <form id="orderForm">
        <input type="hidden" id="orderId">
        <div class="row">
          <label for="itemName">Item Name</label>
          <input type="text" id="itemName" name="itemName" required>
        </div>
        <div class="row">
          <label for="customerName">Customer Name</label>
          <input type="text" id="customerName" name="customerName" required>
        </div>
        <div class="row">
          <label for="advancePayment">Advance Payment</label>
          <input type="number" id="advancePayment" name="advancePayment" required>
        </div>
        <div class="row">
          <label for="remainingPayment">Remaining Payment</label>
          <input type="number" id="remainingPayment" name="remainingPayment" required>
        </div>
     

        <div class="row" style="display: none;">
          <label for="paymentStatus">Payment Status</label>
         
            <label class="switch">
              <input type="checkbox" id="paymentStatus" name="paymentStatus">
              <span class="slider round"></span>
            </label>

       
                        
          </div>
   
       
        

        <button type="submit">Save Order</button>
    
    
      </form>
    </section>

    <section id="ordersSection" class="hidden">
      
      <div class="row-group">
        <div class="filter-group">
          <label for="startDate">Start Date:</label>
          <input type="date" id="startDate" name="startDate">
        </div>
      
        <div class="filter-group">
          <label for="endDate">End Date:</label>
          <input type="date" id="endDate" name="endDate">
        </div>
      
        <button id="filterButton" class="filter-button">Filter</button>
     
     
      </div>


      <table id="ordersTable">
        <thead>
          <tr>
            <th>Item Name</th>
            <th>Customer Name</th>
            <th>Advance Payment</th>
            <th>Remaining Payment</th>
            <th>Status</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </section>
    
  </div>
  </div>
  <script type="module" src="./js/order.js"></script>
