

<div class="main-content">
       <div class="stock-wrapper">

      <!-- Search Bar to Search for Items by Code -->
      <div class="row-group" >
        <input type="text" id="search-input" placeholder="Enter item name or code">  <label  id="stock-value-label"> Stock value for current Branch is : </label>
      </div>

      <!-- Item List Table (Scrollable) with Quantity -->

      <div class="item-list-container">
        <table id="item-list">
          <thead>
            <tr>
              <th>Item Name</th>
              <th>Item Code</th>
              <th>Price</th>
              <th>Quantity</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            <!-- Items will be dynamically added here -->
          </tbody>
        </table>
      </div> 
      </div>

    <!-- Stock Modal for Item Details -->
    <div id="stock-details-modal" >
      
    <div class="stock-modal-content">
    <span class="close" onclick="closeItemDetailsModal()">&times;</span>

            <!-- Filter Section -->
            
            <div id="filter-section1">
                <label for="transaction-type-filter">Transaction Type:</label>
                <select id="transaction-type-filter">
                  <option value="All">All</option>
                  <option value="selling">Selling</option>
                  <option value="purchasing">Purchasing</option>
                  <option value="ordering">Ordering</option>
                  <option value="producing">Producing</option>
                  <option value="selling">Selling</option>
                  <option value="transfering">Transfering</option>
                  <option value="using">Using</option>
                
                </select>
              
                <label for="start-date-filter">Start Date:</label>
                <input type="date" id="start-date-filter">
              
                <label for="end-date-filter">End Date:</label>
                <input type="date" id="end-date-filter">
              </div>

              <!-- Labels for Item Name and Available Quantity -->
              <div class="stock-group-container">
                <div class="label-container" >
                  <label id="item-name-label" >Name:</label>
                  <label id="available-qty-label">Quantity:</label>
                  <label id="type-label" >Transaction Type:</label>
                </div>
              </div>

              <!-- Table Container in Stock Modal -->
              <div id="item-table-container" class="table-container">
                <table>
                  <thead>
                    <tr>
                      <th>Date</th>
                      <th>Quantity</th>
                      <th>Price</th>
                      <th>Type</th>
                      <th>Balance</th>
                      <th>Branch</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Table rows here -->
                  </tbody>
                </table>
              </div>
        </div>
    </div>
</div>
    <script src="./js/stock.js"></script>

