@php
        $checkPage = "";
        if(isset($so_page)){
            $checkPage = "shop-page";
        }
@endphp

<aside class="ticker {{$checkPage}}">
    <div class="ticker-button">
        <i class="bx bx-money"></i>
    </div>
    <div class="ticker-items">
        <div class="item item-cash d-flex align-items-center">
            <div class="cash">
                <h4 class="mb-0" id="user-balance">--</h4> <!-- User balance -->
                <p class="mb-0">Total Cash</p>
            </div>
        </div>

        <!-- Loader element -->
        <div id="loader" style="display: none ;font-size: 16px;
    color: #007bff;; text-align: center;">
            <p>Loading...</p>
        </div>

        <!-- Wallet items will be dynamically injected here via AJAX -->
        <div id="wallet-items"></div>
    </div>
</aside>





<script>
    $(document).ready(function() {
        $('.ticker-button').on('click', function() {
            $('#user-balance').text('--'); // Reset balance display
            let walletItemsContainer = $('#wallet-items');
            walletItemsContainer.empty(); // Clear previous wallet data

            // Show the loader
            $('#loader').show();

            // Start the AJAX request
            $.ajax({
                url: "{{ route('user.wallets') }}",
                method: 'GET',
                success: function(response) {
                    // Hide the loader once data is loaded
                    $('#loader').hide();

                    // Update balance
                    $('#user-balance').text(response.balance);

                    // Populate wallet items
                    if (response.wallets.length > 0) {
                        $.each(response.wallets, function(index, wallet) {
                            let imageUrl = wallet.digital_asset.image ? `{{ asset('') }}` + wallet.digital_asset.image : `{{ asset('path/to/default/image.jpg') }}`;
                            walletItemsContainer.append(`
                            <div class="item d-flex align-items-center">
                                <div class="left">
                                    <img src="${imageUrl}" class="img-fluid">
                                </div>
                                <div class="right">
                                    <h4 class="mb-0">${wallet.quantity}</h4>
                                    <p class="text-muted mb-0">${wallet.digital_asset.name ? wallet.digital_asset.name : 'Unknown Asset'}</p>
                                </div>
                            </div>
                        `);
                        });
                    } else {
                        walletItemsContainer.append(`<p>No wallet data available.</p>`);
                    }
                },
                error: function(xhr) {
                    // Hide the loader even if there is an error
                    $('#loader').hide();
                    console.error(xhr.responseText);
                }
            });
        });
    });
</script>