
<!-- Main Content without Sidebar -->
<div class="main-content">



<div id="stock-details-modal" >
 
  <div class="common-modal-content">
    <span class="close-btn">&times;</span>
  <!-- Summary Section -->
  <div class="details-summary">
    <!-- Total Sales -->
    <div class="summary-box" id="total-sales-box">
      <h2>Total Sales</h2>
      <p id="total-sales">$0.00</p>
    </div>
    
    <!-- Total Quantity -->
    <div class="summary-box" id="total-quantity-box">
      <h2>Total Quantity</h2>
      <p id="total-quantity">0</p>
    </div>
    
    <!-- Total Profit -->
    <div class="summary-box" id="total-profit-box">
      <h2>Total Profit</h2>
      <p id="total-profit">$0.00</p>
    </div>
  </div>


   <!-- Filters Section -->
   <div class="transactions-filter">
            <label for="item-name-filter">Item Name:</label>
      <input type="text" id="item-name-filter" placeholder="Search by item name">
      
      <label for="date-range">Date Range:</label>
      <input type="date" id="start-date">
      <span>to</span>
      <input type="date" id="end-date">

      <select id="transaction-type-filter">
        <option value="selling">Selling</option>
        <option value="purchasing">Purchasing</option>
      </select>
     
    </div>

   </div>
</div>
  

<button id="show-modal"> show</button>
    <!-- Transaction Details Table -->
    <div class="transaction-table-container">
      <table id="transactions-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Item Name</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Total</th>
            <th>Profit</th>
            <th>Actions</th>
          </tr>
        </thead>
        <tbody>
          <!-- Transaction details will be dynamically added here -->
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="pagination">
      <button id="prev-page">Previous</button>
      <span id="page-number">1</span>
      <button id="next-page">Next</button>
    </div>

    <!-- Export Options -->
    <div class="export-section">
      <button id="export-csv">Export to CSV</button>
      <button id="export-excel">Export to Excel</button>
    </div>

    <!-- Transaction Details Modal (for Editing) -->
    <div id="transaction-detail-modal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h2>Transaction Details</h2>
        <table id="transaction-detail-list">
          <thead>
            <tr>
              <th>Item Name</th>
              <th>Quantity</th>
              <th>Price</th>
              <th>Total</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            <!-- Details will be dynamically populated here -->
          </tbody>
        </table>
      </div>
    </div>
  </div>



<!-- Edit Modal -->
<div id="edit-modal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeEditModal()">&times;</span>
      <h3>Edit Transaction Detail</h3>
      <input type="hidden" id="edit-detail-id" />
      <label for="edit-item-name">Item Name</label>
      <input type="text" id="edit-item-name" readonly />
  
      <label for="edit-quantity">Quantity</label>
      <input type="number" id="edit-quantity" min="1" />
  
      <label for="edit-price">Price</label>
      <input type="number" id="edit-price" min="0" step="0.01" />
  
      <label for="edit-total">Total</label>
      <input type="number" id="edit-total" min="0" step="0.01" readonly />
  
      <button id="update-detail-btn">Update</button>

    </div>
  </div>
  

  <script src="./js/profit.js"></script> <!-- JavaScript to handle filtering, pagination, etc. -->
</body>
</html>
