{{-- PWA SCRIPT --}}
<script type="module">
    // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-app.js";
    import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-analytics.js";
    import {
        getMessaging,
        getToken,
        onMessage,
    } from "https://www.gstatic.com/firebasejs/9.18.0/firebase-messaging.js";

    // Service Worker Register
    if ("serviceWorker" in navigator) {
        const VAPID_KEY =
            "BFDf7ba8p46AxOdm6m5qhughMPohtg8FwEbFtKsdzWY1vatU_H2BIf3pAYVONvn3vc0mwxPLT9abjNqGP8WyX0c";

        // Your web app's Firebase configuration
        // For Firebase JS SDK v7.20.0 and later, measurementId is optional
        const firebaseConfig = {
            apiKey: "AIzaSyC1vqVGs8vm3L3c1nKeDOrCCNexZ8aZLxg",
            authDomain: "belajar-cde52.firebaseapp.com",
            projectId: "belajar-cde52",
            storageBucket: "belajar-cde52.appspot.com",
            messagingSenderId: "1072051207154",
            appId: "1:1072051207154:web:3f954b2797eee79bf5896b",
            measurementId: "G-40JZ2H3QLT",
        };

        // Initialize Firebase
        const app = initializeApp(firebaseConfig);
        const analytics = getAnalytics(app);
        // Initialize Firebase Cloud Messaging and get a reference to the service
        const messaging = getMessaging(app);

        navigator.serviceWorker
            .register("{{asset('service-worker.js')}}")
            .then((registration) => {
                console.log("Service Worker is registered", registration);

                // Get registration token. Initially this makes a network call, once retrieved
                // subsequent calls to getToken will return from cache.
                getToken(messaging, {
                    vapidKey: VAPID_KEY,
                    serviceWorkerRegistration: registration,
                }).then((currentToken) => {
                    if (currentToken) {
                        console.log(currentToken);
                        saveToDB(currentToken, {!! Auth::user()->no_ktp !!});
                    } else {
                        // Show permission request UI
                        console.log(
                            "No registration token available. Request permission to generate one."
                        );
                        requestPermission();
                    }
                });
            })
            .catch((err) => {
                console.log("Registration failed:", err);
                alert(err);
            });

        onMessage(messaging, (payload) => {
            console.log("Message received. ", payload);
            console.log("ada notif nih");
            new Notification(payload.notification.title, {
                body: payload.notification.body,
            });
        });
    }

    // ============
    // UTIL FUNCTION
    function requestPermission() {
        Notification.requestPermission().then((permission) => {
            if (permission === "granted") {
                console.log("Notification permission granted.");
            } else {
                console.log(permission);
            }
        });
    }
    function saveToDB(currentToken, user_no_ktp) {
        // save token to the database
        fetch("{{url('/api/save-device-token')}}", {
            headers: {
                "Content-Type": "application/json",
            },
            method: "POST",
            body: JSON.stringify({
                device_token: currentToken,
                no_ktp: user_no_ktp,
            }),
        })
            .then((response) => response.json())
            .then((data) => console.log(data));
    }

</script>
<script src="{{ asset('pwa/js/custom-pwa-install.js') }}"></script>
{{-- <script type="module" src="{{ asset('pwa/js/pwa.mjs') }}"></script> --}}