{{-- Ajakan "Aktifkan notifikasi" (Web Push). Muncul hanya kalau browser mendukung, kunci VAPID sudah diisi,
     dan notifikasi belum aktif di perangkat ini. Pakai: @include('partials.enable-push', ['sub' => 'teks opsional']) --}}
@php $pushSub = $sub ?? 'Dapat kabar langsung saat admin membalas tiketmu'; @endphp
<style>
.pcta{display:none;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg,14px);padding:11px 12px;margin-bottom:12px}
.pcta-ico{width:36px;height:36px;border-radius:10px;background:var(--bg);color:var(--accent,#6366f1);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:15px}
.pcta-txt{flex:1;min-width:0;line-height:1.3}
.pcta-txt b{display:block;font-size:13px;color:var(--text)}
.pcta-txt span{display:block;font-size:11.5px;color:var(--muted);margin-top:1px}
.pcta-btn{flex-shrink:0;border:none;border-radius:999px;background:var(--accent,#6366f1);color:#fff;font-family:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pcta-btn:disabled{opacity:.6;cursor:default}
.pcta.ok .pcta-ico{color:#22c55e}
</style>
<div class="pcta" id="pushCta">
    <div class="pcta-ico"><i class="fas fa-bell" id="pushCtaIcon"></i></div>
    <div class="pcta-txt"><b id="pushCtaTitle">Aktifkan notifikasi</b><span id="pushCtaSub">{{ $pushSub }}</span></div>
    <button type="button" class="pcta-btn" id="pushCtaBtn">Aktifkan</button>
</div>
<script>
(function(){
    var KEY = @json(config('services.vapid.public_key'));
    var box = document.getElementById('pushCta');
    var btn = document.getElementById('pushCtaBtn');
    var title = document.getElementById('pushCtaTitle');
    var subEl = document.getElementById('pushCtaSub');
    if (!box || !KEY || !('serviceWorker' in navigator) || !('PushManager' in window) || !('Notification' in window)) return;

    var reg = null;

    function key64(s){
        var pad = '='.repeat((4 - s.length % 4) % 4);
        var raw = atob((s + pad).replace(/-/g, '+').replace(/_/g, '/'));
        var out = new Uint8Array(raw.length);
        for (var i = 0; i < raw.length; ++i) out[i] = raw.charCodeAt(i);
        return out;
    }
    function send(sub){
        var meta = document.querySelector('meta[name="csrf-token"]');
        return fetch(@json(route('push.subscribe')), {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'X-CSRF-TOKEN': (meta && meta.content) || @json(csrf_token()) },
            credentials: 'same-origin',
            body: JSON.stringify(sub)
        });
    }
    function show(){ box.style.display = 'flex'; }
    function blocked(){
        title.textContent = 'Notifikasi diblokir';
        subEl.textContent = 'Izinkan notifikasi lewat pengaturan situs di browser kamu.';
        btn.style.display = 'none';
        show();
    }

    async function init(){
        try {
            reg = (await navigator.serviceWorker.getRegistration()) || (await navigator.serviceWorker.register('/sw.js'));
            await navigator.serviceWorker.ready;

            if (Notification.permission === 'denied') { blocked(); return; }

            var existing = await reg.pushManager.getSubscription();
            if (existing && Notification.permission === 'granted') {
                send(existing).catch(function(){}); // pastikan langganan tercatat untuk akun yang sedang login
                return;                              // sudah aktif → tidak perlu ajakan
            }
            show();
        } catch (e) { /* tidak didukung / SW gagal → sembunyikan */ }
    }

    btn.addEventListener('click', async function(){
        if (!reg) return;
        btn.disabled = true;
        try {
            var perm = await Notification.requestPermission();
            if (perm === 'denied') { blocked(); return; }
            if (perm !== 'granted') { btn.disabled = false; return; }

            var sub = await reg.pushManager.getSubscription();
            if (!sub) {
                sub = await reg.pushManager.subscribe({ userVisibleOnly: true, applicationServerKey: key64(KEY) });
            }
            var res = await send(sub);
            if (!res.ok) throw new Error('simpan gagal');

            box.classList.add('ok');
            document.getElementById('pushCtaIcon').className = 'fas fa-circle-check';
            title.textContent = 'Notifikasi aktif';
            subEl.textContent = 'Kamu akan diberi tahu saat admin membalas.';
            btn.style.display = 'none';
            setTimeout(function(){ box.style.display = 'none'; }, 3000);
        } catch (e) {
            btn.disabled = false;
            subEl.textContent = 'Gagal mengaktifkan, coba lagi.';
        }
    });

    init();
})();
</script>