<div id="install-banner" class="position-fixed bottom-0 left-0 p-4" style="z-index: 9999; max-width: 400px" hidden>
    <div class="position-relative">
        <button id="install-banner-close-btn" class="bg-white rounded-pill border-0 px-2 position-absolute"
                style="right: -10px; top: -10px;">
            x
        </button>
        <div class="bg-primary text-white p-3 rounded-3 shadow d-flex align-items-center gap-4">
            <h5>Accédez rapidement au simulateur en l'installant sur votre appareil.</h5>
            <button class="btn btn-accent" id="install-banner-btn">Install</button>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        let installPrompt = null;
        const installBanner = document.querySelector("#install-banner");
        const installButton = document.querySelector("#install-banner-btn");
        const closeButton = document.querySelector("#install-banner-close-btn");

        window.addEventListener("beforeinstallprompt", (event) => {
            event.preventDefault();
            installPrompt = event;
            installBanner.removeAttribute("hidden");
        });

        // main.js

        installButton.addEventListener("click", async () => {
            if (!installPrompt) {
                return;
            }
            const result = await installPrompt.prompt();
            console.log(`Install prompt was: ${result.outcome}`);
            disableInAppInstallPrompt();
        });

        closeButton.addEventListener("click", () => {
            disableInAppInstallPrompt();
        });

        function disableInAppInstallPrompt() {
            installPrompt = null;
            installBanner.setAttribute("hidden", "");
        }

        window.addEventListener("appinstalled", () => {
            disableInAppInstallPrompt();
        });
    </script>
@endpush
