
  <div class="main-content">



<style>

/* Table general styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}

table th, table td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd; /* Light border */
  font-family: Arial, sans-serif;
}

table tr:nth-child(even) {
  background-color: #f9f9f9; /* Alternate row color */
}

/* Styling for the summary row */
tr.summary-row {
  background-color: #3498db; /* Blue background */
  color: rgb(51, 52, 53); /* White text for contrast */
  font-weight: bold;
  font-size: 1rem;
}

tr.summary-row td {
  border-top: 1px solid #2980b9; /* Bold top border */
  border-bottom: 1px solid #2980b9; /* Bold bottom border */
  padding: 12px; /* More padding for better spacing */
}

tr.summary-row td:first-child {
  text-align: left; /* Align "Total" label to the left */
}





</style>


    <div >
    

      <div id="common-modal" >
 
        <div class="common-modal-content">
      
          <span id="close-btn" class="close-btn">&times;</span>


      <!-- Filter Section -->
      <div class="transactions-filter">
   
        <div class="filter-group">
          <label for="branchGroup"> Group:</label>
          <select id="branchGroup">
             </select>
        </div>

        <!-- Quick Filter Buttons -->

        <div class="filter-buttons">
                            
          <button id="dailyButton">D</button>
          <button id="weeklyButton">W</button>
          <button id="monthlyButton">M</button>
        
        </div>


        <div class="view-mode">
          <label><input type="radio" name="viewMode" value="basic" checked> Basic</label>
          <label><input type="radio" name="viewMode" value="medium"> Medium</label>
          <label><input type="radio" name="viewMode" value="all"> All</label>
        </div>
        <div class="filter-group">
          <label for="startDate">Start</label>
          <input type="date" id="startDate">
        </div>
        <div class="filter-group">
          <label for="endDate">End </label>
          <input type="date" id="endDate">
        </div>
        <div class="filter-group">
        <button id="summaryButton">Run</button>

</div>
   
    </div><!-- end of filter section -->

    <div id="runSummaryModal" class="modal">
      <div class="modal-content">
        
        <div class="filter-group">
          <label for="startDate2">Start</label>
          <input type="date" id="startDate2">
        </div>
        <div class="filter-group">
          <label for="endDate2">End </label>
          <input type="date" id="endDate2">
        </div>
      
        <button id="processSummary"> process</button>
      
      </div>
      </div>


      </div>


      </div>

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

      <!-- Financial Summary Table -->
      <div id="table-wrapper">
         <table id="financialSummaryTable">
          <thead>
            <tr>
              <th class="column-date">Date</th>
            
              <th class="column-sale-s">Sale -S</th>
              <th class="column-sale-c">Sale -C</th>
             <th class="column-deducted-stock">Deducted Stock</th>
              <th class="column-total-expenses">Total Expenses</th>
               <th class="column-profit-s">Profit -S</th>
              <th class="column-profit-c">Profit -C</th>
              <th class="column-purchases">Purchases</th>
             
              <th class="column-bank-deposit">Bank Deposit</th>
              <th class="column-bank-withdraw">Bank Withdraw</th>
                          <th class="column-stock-value">Stock Value</th>
          
            </tr>
          </thead>
          <tbody>
            <!-- Rows of data go here -->
          </tbody>
        </table>
      </div>
      <div  id="loadingDiv" class="spinner-container" style="display: none;">
        <div class="spinner"></div> <p> Please Wait. This will Take few seconds</p>
      </div>
      
    </div>
  </div>


  <script src="./js/merged-data.js">  </script>
</body>
</html>
