


<div class="main-content">

 <style>




.tab-header {
  display: flex;
  background-color: #f1f1f1;
  padding: 10px;
}

.tab-link {
  background-color: #0785ec;
  border: none;
  padding: 10px 10px;
  margin-right: 5px;
  cursor: pointer;
  font-weight: bold;
  width: 170px;
}

.tab-link.active {
  background-color: #74c1fc;
  border-bottom: 2px solid #007bff;
}

.tab-content {
  display: none;
  padding: 15px;
  background: #fff;
}

.tab-content.active {
  display: block;
}

/* Modal Content */
.modal-content1, .modal-content2 {
  background-color: #fff;
  padding: 5px;
  margin: 0;
  width: 400px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.modal-actions {
  margin-top: 10px;
  text-align: center;
}

button {
  padding: 8px 12px;
  margin: 5px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

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




.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px; /* Adds spacing between rows */
}

.form-row label {
  flex: 0 0 150px; /* Consistent label width */
  font-weight: bold;
  margin-right: 10px;
}
.form-row input,
.form-row textarea {
  flex: 1; /* Input and textarea take up equal width */
  padding: 6px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  box-sizing: border-box; /* Includes padding and border in width */
}

.form-row textarea {
  resize: vertical; /* Allow vertical resizing for textarea */
  min-height: 80px;
}



 </style>



<div id="common-modal" >
 
  <div class="common-modal-content">

    <span id="close-btn" class="close-btn">&times;</span>
   <!-- Filters Section -->
   <div class="transactions-filter">
    <div class="filter-buttons">
      <!-- Filter Buttons -->
       
      <button id="today-btn">T</button>
      <button id="yesterday-btn">Y</button>
      <button id="week-btn">W</button>
     
     </div>
        <input type="text" id="item-name-filter" placeholder="Search by item name">
    
      <select id="transaction-type-filter">
        <option value="selling">Selling</option>
        <option value="purchasing">Purchasing</option>
        <option value="using">Using</option>
        <option value="producing">Producing</option>
        <option value="ordering">Ordering</option>
        <option value="transfering">Transfering</option>
              
      </select>

      <div  class="row">
        
      <label for="date-range">Date Range:</label>
      <input type="date" id="start-date">
      <span>to</span>
      <input type="date" id="end-date">

     
     </div>

    </div>









   </div>
</div>
  

<button id="show-modal" class="fas fa-calendar-alt"> </button>







  <!-- Summary Section -->
  <div class="details-summary">
    <!-- Total Sales -->
    <div class="summary-box" id="total-sales-box">
      <span class="total-sales">Total Sales</span>
      <p id="total-sales">$0.00</p>
    </div>
    
    <!-- Total purchases -->
    <div class="summary-box" id="total-purchases-box">
      <span class="total-purchases">Total Purchases</span>
      <p id="total-purchases">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>


    <!-- Transaction Details Table -->
    <div >
      <table id="transactions-table">
        <thead>
          <tr>
            <th>Date</th>
            <th>Item</th>
            <th>Qty</th>
            <th>Price</th>
            <th>Total</th>
            <th>Profit</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          <!-- Transaction details will be dynamically added here -->
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    <div class="pagination" style="display: none;">
      <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"style="display: none;">
      <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 with Tabs -->
<div id="edit-modal" class="modal">

  <div class="edit-modal-content">
    <span class="close" onclick="closeEditModal()">&times;</span>
    

  <!-- Tab Navigation -->
  <div class="tab-header">
    <button class="tab-link active" onclick="openTab(event, 'transactionTab')">Transaction Detail</button>
    <button class="tab-link" onclick="openTab(event, 'paymentTab')">Payment Details</button>
   
  </div>

  <!-- Tab Contents -->
  <div id="transactionTab" class="tab-content active">
    <div class="modal-content1">
    
   


      <input type="hidden" id="edit-detail-id" />
    
      <div class="form-row">
        <label for="edit-item-name">Item Name</label>
        <input type="text" id="edit-item-name" name="edit-item-name" readonly />
      </div>
      
      <div class="form-row">
        <label for="edit-quantity">Quantity</label>
        <input type="number" id="edit-quantity" name="edit-quantity" min="1" />
      </div>
      
      <div class="form-row">
        <label for="edit-price">Price</label>
        <input type="number" id="edit-price" name="edit-price" min="0" step="0.01" />
      </div>
      
      <div class="form-row">
        <label for="edit-total">Total</label>
        <input type="number" id="edit-total" name="edit-total" min="0" step="0.01" readonly />
      </div>
      


   
      <button id="update-detail-btn">Update</button>
    </div>
  </div>

  <div id="paymentTab" class="tab-content">
    <div class="modal-content2">
   
      <form id="editPaymentForm">

        <div class="form-row">
          <label for="editCash">Cash Payment:</label>
          <input type="number" id="editCash" name="cash" disabled />
        </div>
        
        <div class="form-row">
          <label for="editBank">Bank Payment:</label>
          <input type="number" id="editBank" name="bank" />
        </div>
        
        <div class="form-row">
          <label for="editCredit">Credit Payment:</label>
          <input type="number" id="editCredit" name="credit" />
        </div>
        
        <div class="form-row">
          <label for="editOther">Other Payment:</label>
          <input type="number" id="editOther" name="other" />
        </div>
        
        <div class="form-row">
          <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="closePaymentModal">Save</button>
        </div>
      </form>
    </div>
  </div>
</div>
</div>



  <!-- Define the user variable -->
  <script type="module" src="./js/transactionDetails.js"></script> <!-- JavaScript to handle filtering, pagination, etc. -->
</body>
</html>
