<x-filament-panels::page>
    {{-- <button
        type="button"
        class="filament-button filament-button-primary"
        onclick="registerPush()"
    >
        Enable Push Notifications
    </button> --}}

    <div class="max-w-md mx-auto">
        <x-filament::card>
            <div class="text-center space-y-4">
                <h2 class="text-xl font-semibold">
                    🔔 Stay Updated
                </h2>

                <p class="text-sm text-gray-500">
                    Enable push notifications to receive real-time alerts and updates.
                </p>

                <button
    type="button"
    onclick="registerPush()"
    class="
        filament-button
        filament-button-primary
        w-full
        flex items-center justify-center gap-2
        py-3
        rounded-lg
        shadow-sm
        hover:shadow-md
        transition
    "
>
    <x-heroicon-o-bell class="w-5 h-5"/>
    <span class="font-medium">Enable Push Notifications</span>
</button>
            </div>
        </x-filament::card>
    </div>

    <script>
        const vapidKey = "{{ config('webpush.vapid.public_key') }}";
        const csrfToken = "{{ csrf_token() }}";

        async function registerPush() {
            if (!('serviceWorker' in navigator)) return;

            const permission = await Notification.requestPermission();
            if (permission != 'granted') return;

            const registration = await navigator.serviceWorker.register('/service-worker.js');

            const subscription = await registration.pushManager.subscribe({
                userVisibleOnly: true,
                applicationServerKey: vapidKey
            });

            await fetch('/push/subscribe', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken
                },
                body: JSON.stringify(subscription)
            });
            alert("Push notifications enabled ✅");
        }
    </script>
</x-filament-panels::page>
