@push('script')
    <script src="https://code.iconify.design/2/2.1.0/iconify.min.js"></script>
    <style>
        .iconify{font-size: 18px;margin-top:-7px;}
        .install-arrow-container {
            position: fixed; /* Fixed positioning for better control */
            z-index: 1060;
            display: none; /* Hidden by default, shown with toast */
        }
        .install-arrow {
            width: 150px; /* Large size for desktop */
            height: auto;
            transform: rotate(180deg); /* Rotate to point downward */
        }
        
        /* Responsive sizing for different devices */
        @media (max-width: 480px) {
            .install-arrow {
                width: 120px; /* Size for mobile phones */
            }
        }
    </style>
    <script>
        $(document).ready(function() {
            // Function to position the arrow relative to the toast
            function positionArrow() {
                var toast = $('#install-toast');
                var arrow = $('.install-arrow-container');
                
                if (toast.length && arrow.length) {
                    var toastRect = toast[0].getBoundingClientRect();
                    var windowWidth = window.innerWidth;
                    
                    // Calculate position based on screen size
                    var bottomOffset = window.innerHeight - toastRect.top + 0; // 0px above the toast
                    var rightOffset;
                    
                    // Adjust horizontal position based on screen width
                    if (windowWidth <= 480) {
                        // Mobile phones - position further left
                        rightOffset = (windowWidth - toastRect.right + 225);
                    } else {
                        // Desktops - position more centered
                        rightOffset = (windowWidth - toastRect.right + 50);
                    }
                    
                    // Position the arrow above the toast with responsive positioning
                    arrow.css({
                        'bottom': bottomOffset + 'px',
                        'right': rightOffset + 'px'
                    });
                }
            }
            
            // Show arrow when toast is shown
            $('#install-toast').on('shown.bs.toast', function () {
                $('.install-arrow-container').show();
                positionArrow(); // Position the arrow when toast is shown
            });
            
            // Hide arrow when toast is hidden
            $('#install-toast').on('hidden.bs.toast', function () {
                $('.install-arrow-container').hide();
            });
            
            // Handle close button click
            $('.install-toast .close').on('click', function() {
                $('.install-arrow-container').hide();
            });
            
            // Reposition arrow on window resize
            $(window).on('resize', function() {
                if ($('.install-arrow-container').is(':visible')) {
                    positionArrow();
                }
            });
            
            // Also reposition on orientation change for mobile devices
            $(window).on('orientationchange', function() {
                if ($('.install-arrow-container').is(':visible')) {
                    // Small delay to ensure the orientation change completes
                    setTimeout(positionArrow, 100);
                }
            });
        });
    </script>
@endpush

<!-- Arrow container positioned to point at the toast -->
<div class="install-arrow-container">
    <img src="/assets/images/whitearrow.webp" class="install-arrow" alt="Arrow pointing down">
</div>

<div id="install-toast" class="install-toast bg-toast overflow-hidden border-0 toast hide flex-row slide-up-fade-in ml-2"
     role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000" data-autohide="false">

    <div class="d-flex justify-content-between" style="background-color: rgba(12,12,12,0.75)">
        <div class="toast-header bg-transparent pr-1">
            <button type="button" class="m-0 mb-1 close text-white" aria-label="Close">
                <span aria-hidden="true" class="mb-1">&times;</span>
            </button>
        </div>
        <div class=" toast-body p-2 w-100 d-flex justify-content-between align-items-center">
            <div class="toast-text non-ios-only d-none">
                {{  __('label.add_home_screen_text') ?? "Add to home screen" }}
            </div>
            <div class="toast-text ios-only d-none">
                {!!
                    str_replace(
                        [':iconify'],
                        ['<span class="iconify-inline" data-icon="fluent:share-ios-48-filled"></span>'],
                        htmlentities(__('label.msg_add_page_to_home_screen'))
                    )
                !!}
                {{-- Tap the <span class="iconify-inline" data-icon="fluent:share-ios-48-filled"></span> icon below to add this page to your home screen! --}}
            </div>

            <div id="install-app" class="install-app py-2 px-3 mx-0 non-ios-only d-none btn btn-sm btn-primary">
                <i class="fas fa-plus mr-1"></i> {{ __('label.install') }}
            </div>
        </div>
    </div>
</div>