

<!-- Main Content without Sidebar -->
<div class="small-container">


    <!-- Tabs for switching between "Sales Form" and "All Sales" -->
    <div class="tabs">
      <button class="tab-btn active" data-tab="sales-form-tab">Daily Sales Form</button>
      <button class="tab-btn" data-tab="all-sales-tab">All Sales</button>
    </div>

    <!-- Sales Form Container -->
    <div class="tab-content active" id="sales-form-tab">
      <div class="sales-form-container">
        <form id="sales-form">
          <!-- Branch Selection -->
          <div class="form-group">
            <label for="branch-select">Select Branch:</label>
            <select id="branch-select" required>
              <!-- Branches will be dynamically loaded based on companyId -->
            </select>
          </div>

          <!-- Sales Date -->
          <div class="form-group">
            <label for="sales-date">Sales Date:</label>
            <input type="date" id="sales-date" required>
          </div>

          <!-- Total Amount -->
          <div class="form-group">
            <label for="total-amount">Total Sales Amount:</label>
            <input type="number" id="total-amount" placeholder="Enter total sales" required>
          </div>

          <!-- Submit Button -->
          <button type="submit">Save Sales</button>
        </form>

        <!-- Message display -->
        <div id="message" style="display: none;"></div>

        <!-- Today's Sales Records -->
        <h2>Today's Sales</h2>
        <div id="today-sales-list">
          <table>
            <thead>
              <tr>
                <th>Branch</th>
                <th>Sales Date</th>
                <th>Total Sales</th>
              </tr>
            </thead>
            <tbody id="today-sales-tbody">
              <!-- Today's sales will be dynamically populated here -->
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- All Sales Container -->
    <div class="tab-content" id="all-sales-tab">
      <div class="sales-filter-container row">
     
        <!-- Date Range Filter -->
        <div class="form-group">
          <label for="start-date">Start Date:</label>
          <input type="date" id="start-date">
        </div>
        <div class="form-group">
          <label for="end-date">End Date:</label>
          <input type="date" id="end-date">
        </div>
        <button id="filter-sales-btn">Filter Sales</button>
      </div>

      <!-- All Sales Records -->
      <div id="all-sales-list">
        <table>
          <thead id="all-sales-header">
            <!-- Dynamic Branch Headers will be added here -->
          </thead>
          <tbody id="all-sales-tbody">
            <!-- All sales will be dynamically populated here -->
          </tbody>
        </table>
      </div>
    </div>

    <script src="./js/dailySale.js">
    </script>
  </div>
</body>
</html>
