

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

 
<style>

.paymentButton {
  position: relative; /* Ensure relative positioning */
}

.paymentDetailButton {
  position: absolute;
  width: 20px;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  padding: 2px 2px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.paymentDetailButton:hover {
  background-color: #0056b3;
}


/* Responsive Filter Container */
@media (max-width: 768px) {
  
    .paymentDetailButton {
  position: relative;
  width: 20px;

}

}





</style>




    <div class="summary-container">
        <h4>Today's Total Summary</h4>
        <div id="summary" class="daily-summary">
            <!-- The summary will be dynamically loaded here -->
        </div>
        <div id="loading" class="loading">
            Loading data...
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const companyId = sessionStorage.getItem('companyId');  // Assuming you are using sessionStorage to store companyId
            const branchId = sessionStorage.getItem('branchId'); 
            const summaryDiv = document.getElementById('summary');
            const loadingDiv = document.getElementById('loading');
          

            // Function to fetch the total summary
            function fetchTotalSummary() {
                fetch(`/api/all-total-summary?companyId=${companyId}&branchId=${branchId}`)
                    .then(response => response.json())
                    .then(data => {
                        loadingDiv.style.display = 'none';  // Hide loading

                        // Destructure totals from response data
                        const { totalSales, totalPurchases, totalExpense, bankDeposit, bankWithdraw,cash,bank,credit,other ,  dailyNetProfitUsingSystem,
                            dailyNetProfitUsingCashier,} = data;
console.log("data is",data);
                        // Display the totals
                        summaryDiv.innerHTML = `
  <div class="summary-item">
    <span>Total Sales -S:</span> <b>$${totalSales.toFixed(2)}</b>
    <div class="paymentButton">
      <button id="paymentBtn" class="paymentDetailButton"> v </button>
    </div>
  </div>
  <div id="paymentDetail" style="display: none;">
    <div class="summary-item">
      <span>Cash:</span> <b>$${cash.toFixed(2)}</b>
    </div>
    <div class="summary-item">
      <span>Bank:</span> <b>$${bank.toFixed(2)}</b>
    </div>
    <div class="summary-item">
      <span>Credit:</span> <b>$${credit.toFixed(2)}</b>
    </div>
    <div class="summary-item">
      <span>Other:</span> <b>$${other.toFixed(2)}</b>
    </div>
  </div>
  <div class="summary-item">
    <span style="color:green;">Profit-S</span> <span style="color:green;"><b>$${dailyNetProfitUsingSystem.toFixed(2)}</b></span>
  </div>
  <div class="summary-item">
    <span>Total Purchases:</span> <b>$${totalPurchases.toFixed(2)}</b>
  </div>
  <div class="summary-item">
    <span style="color:red;">Total Expenses:</span> <span style="color:red;"><b>$${totalExpense.toFixed(2)}</b></span>
  </div>
  <div class="summary-item">
    <span>Bank Deposit:</span> <b>$${bankDeposit.toFixed(2)}</b>
  </div>
  <div class="summary-item">
    <span>Bank Withdraw:</span> <b>$${bankWithdraw.toFixed(2)}</b>
  </div>
`;




                        const paymentDetail = document.getElementById('paymentDetail');
            const paymentBtn = document.getElementById('paymentBtn');


            paymentBtn.addEventListener("click", () => {
  if (paymentDetail.style.display === 'none') {
    paymentDetail.style.display = 'block';
  } else {
    paymentDetail.style.display = 'none';
  }
});



                    })

                    
                    .catch(error => {
                        loadingDiv.innerHTML = 'Error loading data.';
                        console.error('Error fetching total summary:', error);
                    });
            }

            // Call the function to load total summary when the page loads
            fetchTotalSummary();
       
        });
    </script>
</body>
</html>
