                <!-- Content will be inserted here -->
            </main>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <!-- Custom Scripts -->
    <script>
        // Update pending payments count
        function updatePendingCount() {
            $.ajax({
                url: '<?php echo base_url("payment/pending_count"); ?>',
                type: 'GET',
                dataType: 'json',
                success: function(response) {
                    if (response.success) {
                        const badge = $('#pending-payments-badge');
                        if (response.count > 0) {
                            badge.text(response.count).show();
                        } else {
                            badge.hide();
                        }
                    }
                },
                error: function() {
                    console.log('Failed to update pending count');
                }
            });
        }

        // Auto update every 30 seconds
        setInterval(updatePendingCount, 30000);
        
        // Update on page load
        $(document).ready(function() {
            updatePendingCount();
            
            // Auto dismiss alerts after 5 seconds
            setTimeout(function() {
                $('.alert-dismissible').alert('close');
            }, 5000);
        });
        
        // Handle form submissions with loading state
        $('form').submit(function() {
            $(this).find('button[type="submit"]').prop('disabled', true).html(
                '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Processing...'
            );
        });
    </script>
    
    <?php if(isset($custom_scripts)): ?>
        <?php echo $custom_scripts; ?>
    <?php endif; ?>
</body>
</html>