<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>

<!-- Your other scripts -->
<script>
$(document).ready(function() {
    // Debugging - check if modal is working
    $('#myModal').on('show.bs.modal', function () {
        console.log('Modal is opening');
    });
});
</script><style>body {
    padding-bottom: 60px; /* Adjust the padding as necessary */
}
</style> <footer class="bg-white p-4 text-center shadow-md fixed bottom-0 w-full">
    <p class="text-gray-700 text-sm">&copy; 2025 Demo Technology All rights reserved.</p>
</footer>

    <script>
        // Sidebar toggle functionality
        const toggleButton = document.getElementById('toggleSidebar');
        const sidebar = document.getElementById('sidebar');

        toggleButton.addEventListener('click', () => {
            sidebar.classList.toggle('hidden');
        });
    </script>
<!-- management dashboard -->

    <script>
        // Function to switch between tabs
        function showTab(tabNumber) {
            document.getElementById('chart-1').classList.add('hidden');
            document.getElementById('chart-2').classList.add('hidden');

            document.getElementById('tab-1').classList.remove('text-orange-600', 'font-semibold');
            document.getElementById('tab-2').classList.remove('text-orange-600', 'font-semibold');

            if (tabNumber === 1) {
                document.getElementById('chart-1').classList.remove('hidden');
                document.getElementById('tab-1').classList.add('text-orange-600', 'font-semibold');
            } else if (tabNumber === 2) {
                document.getElementById('chart-2').classList.remove('hidden');
                document.getElementById('tab-2').classList.add('text-orange-600', 'font-semibold');
            }
        }

        // Data for Deposits, Withdrawals, and IB Withdrawals (stacked bar chart)
        var ctx1 = document.getElementById('depositWithdrawalChart').getContext('2d');
        var depositWithdrawalChart = new Chart(ctx1, {
            type: 'bar',
            data: {
                labels: ['Deposits', 'Withdrawals', 'IB Withdrawals'],
                datasets: [{
                    label: 'Deposits',
                    data: [6, 0, 0],
                    backgroundColor: 'rgba(0, 123, 255, 0.6)',
                    borderColor: 'rgba(0, 123, 255, 1)',
                    borderWidth: 1
                }, {
                    label: 'Withdrawals',
                    data: [0, 3, 0],
                    backgroundColor: 'rgba(255, 99, 132, 0.6)',
                    borderColor: 'rgba(255, 99, 132, 1)',
                    borderWidth: 1
                }, {
                    label: 'IB Withdrawals',
                    data: [0, 0, 2],
                    backgroundColor: 'rgba(255, 159, 64, 0.6)',
                    borderColor: 'rgba(255, 159, 64, 1)',
                    borderWidth: 1
                }]
            },
            options: {
                responsive: true,
                scales: {
                    x: { stacked: true },
                    y: { stacked: true, beginAtZero: true }
                }
            }
        });

        // Data for Client Registrations (Line chart)
        var ctx2 = document.getElementById('clientRegistrationChart').getContext('2d');
        var clientRegistrationChart = new Chart(ctx2, {
            type: 'line',
            data: {
                labels: ['January', 'February', 'March', 'April', 'May'], // Time periods
                datasets: [{
                    label: 'Clients Registered',
                    data: [5, 10, 8, 12, 15], // Registration numbers
                    borderColor: 'rgba(0, 123, 255, 1)',
                    backgroundColor: 'rgba(0, 123, 255, 0.2)',
                    fill: true,
                    tension: 0.4
                }]
            },
            options: {
                responsive: true,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: {
                        callbacks: {
                            label: function(tooltipItem) {
                                return tooltipItem.dataset.label + ': ' + tooltipItem.raw;
                            }
                        }
                    }
                }
            }
        });

        // Set the initial tab to show (Deposits & Withdrawals)
        showTab(1);
    </script>