<div data-v-83fa5bf1="" role="tablist" class="van-tabbar van-tabbar--fixed van-hairline--top-bottom tabNavBar">
    <div onclick="window.location.href='<?php echo e(route('user.home')); ?>';" data-v-83fa5bf1="" role="tab" class="van-tabbar-item <?php echo e(Request::is('user/dashboard') == true ? 'van-tabbar-item--active':''); ?>" tabindex="0"
        aria-selected="true" style="color: var(--bw<?php echo e(Request::is('user/dashboard') == true ? '6':'3'); ?>);">
        <div class="van-badge__wrapper van-tabbar-item__icon">
            <div data-v-83fa5bf1="" class="icon display alignCenter justifyCenter"><i data-v-83fa5bf1=""
                    class="ri-home-smile-2-fill"></i></div><!---->
        </div>
        <div class="van-tabbar-item__text">
            <p data-v-83fa5bf1="">Home</p>
        </div>
    </div>
    <div onclick="window.location.href='<?php echo e(route('user.investment')); ?>';" data-v-83fa5bf1="" role="tab" class="van-tabbar-item <?php echo e(Request::is('user/investment') == true ? 'van-tabbar-item--active':''); ?>" tabindex="0" aria-selected="false"
        style="color: var(--bw<?php echo e(Request::is('user/investment') == true ? '6':'3'); ?>);">
        <div class="van-badge__wrapper van-tabbar-item__icon">
            <div data-v-83fa5bf1="" class="icon display alignCenter justifyCenter"><i data-v-83fa5bf1=""
                    class="ri-funds-line"></i></div><!---->
        </div>
        <div class="van-tabbar-item__text">
            <p data-v-83fa5bf1="">Invest</p>
        </div>
    </div>
    <div onclick="window.location.href='<?php echo e(route('user.referrals')); ?>';" data-v-83fa5bf1="" role="tab" class="van-tabbar-item <?php echo e(Request::is('user/referrals') == true ? 'van-tabbar-item--active':''); ?>" tabindex="0" aria-selected="false"
        style="color: var(--bw<?php echo e(Request::is('user/referrals') == true ? '6':'3'); ?>);">
        <div class="van-badge__wrapper van-tabbar-item__icon">
            <div data-v-83fa5bf1="" class="icon display alignCenter justifyCenter"><i data-v-83fa5bf1=""
                    class="ri-gift-2-line"></i></div><!---->
        </div>
        <div class="van-tabbar-item__text">
            <p data-v-83fa5bf1="">Team</p>
        </div>
    </div>
    <div onclick="window.location.href='<?php echo e(route('user.club')); ?>';" data-v-83fa5bf1="" role="tab" class="van-tabbar-item <?php echo e(Request::is('user/club') == true ? 'van-tabbar-item--active':''); ?>" tabindex="0" aria-selected="false"
        style="color: var(--bw<?php echo e(Request::is('user/club') == true ? '6':'3'); ?>);">
        <div class="van-badge__wrapper van-tabbar-item__icon">
            <div data-v-83fa5bf1="" class="icon display alignCenter justifyCenter"><i data-v-83fa5bf1=""
                    class="ri-gift-line"></i></div><!---->
        </div>
        <div class="van-tabbar-item__text">
            <p data-v-83fa5bf1="">Club</p>
        </div>
    </div>
    
    <div onclick="window.location.href='<?php echo e(route('user.profile.setting')); ?>';" data-v-83fa5bf1="" role="tab" class="van-tabbar-item <?php echo e(Request::is('user/profile-setting') == true ? 'van-tabbar-item--active':''); ?>" tabindex="0" aria-selected="false"
        style="color: var(--bw<?php echo e(Request::is('user/profile-setting') == true ? '6':'3'); ?>);">
        <div class="van-badge__wrapper van-tabbar-item__icon">
            <div data-v-83fa5bf1="" class="icon display alignCenter justifyCenter"><i data-v-83fa5bf1=""
                    class="ri-wallet-line"></i></div><!---->
        </div>
        <div class="van-tabbar-item__text">
            <p data-v-83fa5bf1="">Wallet</p>
        </div>
    </div>
</div>

<!--<div onclick="window.location.href='';" class="van-floating-bubble" style="transform: translate3d(1200px, 378px, 0px); overflow: initial;">-->
<!--    <div data-v-83fa5bf1="" class="floatButton_Service shadow radius50P p5"><img data-v-83fa5bf1=""-->
<!--            src="<?php echo e(asset('images/spin.png')); ?>" alt="Custom Bubble"></div>-->
<!--</div>-->

<style>
        

        .spin-wheel {
            position: fixed;
            z-index:9999;
            top: 250px;
            right:0;
            width: 60px; /* Adjust size as needed */
            height: 60px; /* Adjust size as needed */
            cursor: pointer;
            transition: transform 0.3s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            
            /* Make this relative for absolute positioning of the number */
        }

        .spin-wheel:hover {
            transform: scale(1.1);
        }

        @keyframes  spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .spinning {
            animation: spin 2s linear infinite;
        }

        .number {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px; /* Adjust size as needed */
            color: white; /* Change color as needed */
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Optional: add shadow for better visibility */
        }
</style>

<div onclick="window.location.href='<?php echo e(route('user.spin')); ?>';" class="spin-wheel" id="spinWheel">
    <img src="<?php echo e(asset('images/spin.png')); ?>" alt="Spin Wheel" style="width: 100%; height: 100%; border-radius: 50%;">
    <div class="number"><?php echo e(auth()->user()->spin); ?></div> <!-- Number on top of the spin wheel -->
</div>

<script>
    const spinWheel = document.getElementById('spinWheel');

    // Automatically start spinning when the page loads
    window.onload = function() {
        spinWheel.classList.add('spinning');
    };

    spinWheel.addEventListener('click', function() {
        // Toggle spinning class on click
        this.classList.toggle('spinning');

        // Optional: Stop spinning after a certain time
        setTimeout(() => {
            this.classList.remove('spinning');
        }, 5000); // Stops spinning after 5 seconds
    });

    // Make the spin wheel draggable
    let isDragging = false;
    let offsetX, offsetY;

    spinWheel.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - spinWheel.getBoundingClientRect().left;
        offsetY = e.clientY - spinWheel.getBoundingClientRect().top;
        spinWheel.classList.remove('spinning'); // Stop spinning while dragging
    });

    document.addEventListener('mousemove', function(e) {
        if (isDragging) {
            spinWheel.style.left = (e.clientX - offsetX) + 'px';
            spinWheel.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
    });

    // Touch events for mobile devices
    spinWheel.addEventListener('touchstart', function(e) {
        isDragging = true;
        const touch = e.touches[0];
        offsetX = touch.clientX - spinWheel.getBoundingClientRect().left;
        offsetY = touch.clientY - spinWheel.getBoundingClientRect().top;
        spinWheel.classList.remove('spinning'); // Stop spinning while dragging
    });

    document.addEventListener('touchmove', function(e) {
        if (isDragging) {
            const touch = e.touches[0];
            spinWheel.style.left = (touch.clientX - offsetX) + 'px';
            spinWheel.style.top = (touch.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('touchend', function() {
        isDragging = false;
    });
</script>


<?php /**PATH /home/chevbuzx/public_html/core/resources/views/templates/basic/partials/footer.blade.php ENDPATH**/ ?>