<style>
    .fot_icon2{
        width: 50px;
        height: 50px;
        font-size: 20px;
        border-radius: 50%;
        background-color: #00ff0d;
        color: var(--second--color);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fot_icon2:hover{
        background-color: var(--third--color);
        color: var(--second--color);
    }
    .icon-shopping-cart,.fa-arrow-circle-up{
        color:#fff;
    }

    .fot_icon3{
        width: 50px;
        height: 50px;
        font-size: 20px;
        border-radius: 50%;
        background-color: var(--main--color);
        color: black;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .fot_icon3:hover{
        background-color: var(--third--color);
        color: var(--second--color);
    }

</style>

<a id="whatsappbutton" target="_blank" href="https://wa.me/{{ Setting('whatsapp') }}" style="position: fixed; bottom: 80px; right: 30px;z-index: 99;" class="text-decoration-none point fot_icon2 transition_me">
    <span class="fa-brands fa-whatsapp h3 mb-0"></span>
</a>

<button id="cartbutton" target="_blank"
        style="position: fixed; bottom: 20px; right: 30px; z-index: 99;"
        wire:ignore.self
        class="text-decoration-none point fot_icon3 transition_me"
        onclick="window.location.href='/shoping-cart'">

    <span class="fa-solid fa-cart-shopping text-white"></span>
    <span class="position-absolute translate-middle badge border border-light tiny_font rounded-circle bg-danger second_color text-white" style="top: 0px; left: 0px;" id="CartCount">
        <div class="cart-quantity-number">
            {{ cart_count() }}
        </div>
    </span>
</button>

    
<button style="display:none; position: fixed; bottom: 20px; right: 30px;z-index: 99; border: none; font-size: 35px; padding-right: 15px; padding-left: 15px; font-wight: bold;" class=" point fot_icon3 transition_me" id="scrollTopButton" onclick="scrollToTop()" title="Go to top">
    <span class="fas fa-arrow-circle-up" style="position: absolute;right: 7px;bottom: 7px;"></span>
</button>


<script>
    mybutton = document.getElementById("scrollTopButton");
    whatsapp = document.getElementById("whatsappbutton");

    function scrollToTop(){
        document.body.scrollTop = 0; // For Safari
        document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
    }
    function scrollFunction() {

         if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
            mybutton.style.display = "block";
            whatsapp.style.bottom = '140px';
            cartbutton.style.bottom = '80px';

        } else {
            mybutton.style.display = "none";
            whatsapp.style.bottom = '80px';
            cartbutton.style.bottom = '20px';
        }
    }


    $(document).ready(function () {
        window.onscroll = function() {scrollFunction()};
    });

</script>
<!--BACK TO TOP BUTTON-->