@php
    $buttonSize = setting('back_to_top_button_size', 40);
    $iconSize = round($buttonSize * 0.5);
    $opacity = setting('back_to_top_button_opacity', 100) / 100;
    $zIndex = setting('back_to_top_z_index', 10000);
    $borderRadius = setting('back_to_top_border_radius', 50);
@endphp
<style>
    #fob-back2top {
        position: fixed;
        bottom: 0;
        right: {{ setting('back_to_top_position_right', 40) }}px;
        width: {{ $buttonSize }}px;
        height: {{ $buttonSize }}px;
        z-index: {{ $zIndex }};
        background-color: transparent;
        -webkit-border-radius: {{ $borderRadius }}%;
        -moz-border-radius: {{ $borderRadius }}%;
        border-radius: {{ $borderRadius }}%;
        border: 2px solid var(--primary-color);
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        transition: all 0.5s ease;
        visibility: hidden;
        opacity: 0;
    }

    #fob-back2top:hover {
        cursor: pointer;
        background-color: var(--primary-color);
    }

    #fob-back2top:hover svg {
        color: #ffffff;
    }

    #fob-back2top.active {
        bottom: {{ setting('back_to_top_position_bottom', 90) }}px;
        visibility: visible;
        opacity: {{ $opacity }};
    }

    #fob-back2top svg {
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        color: var(--primary-color);
        z-index: {{ $zIndex + 1 }};
        font-size: {{ $iconSize }}px;
    }
</style>

<div id="fob-back2top">
    {!! BaseHelper::renderIcon('ti ti-arrow-narrow-up') !!}
</div>

<script>
    window.addEventListener('load', function() {
        var scrollTrigger = {{ setting('back_to_top_scroll_trigger', 200) }};
        var animationSpeed = {{ setting('back_to_top_animation_speed', 200) }};

        $(window).scroll(function() {
            if ($(this).scrollTop() > scrollTrigger) {
                $('#fob-back2top').addClass('active');
            } else {
                $('#fob-back2top').removeClass('active');
            }
        });

        $('#fob-back2top').click(function() {
            $('html, body').animate({
                scrollTop: 0
            }, animationSpeed);
            return false;
        });
    });
</script>