@if( $agent->isMobile() )
    <script>
        $('.owl-carousel').owlCarousel({
            loop: false,
            nav: true,
            dots: false,
            rtl: true,
            margin: 15,
            onInitialized: function () {
                showHideLeftRightArrowElement();
            },
            onChanged: function () {
                showHideLeftRightArrowElement();
            },
            responsive: {
                0: {
                    items: 4
                },
                600: {
                    items: 5
                },
                1000: {
                    items: 7
                }
            }

        });

        function showHideLeftRightArrowElement() {
            let leftArrowElement = $('.owl-nav button:first-child');
            let rightArrowElement = $('.owl-nav button:last-child');

            if (rightArrowElement.hasClass('disabled')) {
                rightArrowElement.addClass('d-none');
            } else {
                rightArrowElement.removeClass('d-none');
            }

            if (leftArrowElement.hasClass('disabled')) {
                leftArrowElement.addClass('d-none');
            } else {
                leftArrowElement.removeClass('d-none');
            }
        }
    </script>

@else
    <script>
        $('.owl-carousel').owlCarousel({
            autoWidth: true,
            margin: 11, // Space between items
            nav: true,
            loop: false,
            dots: false,
            rtl: true,
            // margin: 1,

            onInitialized: function () {
                showHideLeftRightArrowElement();
            },
            onChanged: function () {
                showHideLeftRightArrowElement();
            },
            responsive: {
                0: {
                    items: 4
                },
                600: {
                    items: 5
                },
                1000: {
                    items: 8
                }
            }
        });

        function showHideLeftRightArrowElement() {
            let leftArrowElement = $('.owl-nav button:first-child');
            let rightArrowElement = $('.owl-nav button:last-child');

            if (rightArrowElement.hasClass('disabled')) {
                rightArrowElement.addClass('d-none');
            } else {
                rightArrowElement.removeClass('d-none');
            }

            if (leftArrowElement.hasClass('disabled')) {
                leftArrowElement.addClass('d-none');
            } else {
                leftArrowElement.removeClass('d-none');
            }
        }
    </script>

@endif