const vapidPublicKey = import.meta.env.VITE_VAPID_PUBLIC_KEY;

async function setupPushNotifications() {
    if (Notification.permission === 'granted') {
        try {
            // サービスワーカーを登録
            await navigator.serviceWorker.register('/assets/js/npush-service-worker.js').then(async(registration) => {
                if ('serviceWorker' in navigator && 'PushManager' in window) {
                    try {
                            const subscription = await registration.pushManager.subscribe({
                                userVisibleOnly: true,
                                applicationServerKey: urlBase64ToUint8Array(vapidPublicKey),
                            });
            
                            const response = await fetch('/save-subscription', {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json',
                                    'Content-Type': 'application/json',
                                    'X-CSRF-Token': document.querySelector('[name="csrf-token"]').content
                                },
                                body: JSON.stringify(subscription),
                            });
            
                            if (!response.ok) throw new Error('サブスクリプションの保存に失敗しました');
            
                            new Notification('ご登録', {
                                body: 'ご登録有難う御座います',
                            });
                        
                    } catch (error) {
                        console.error('Push subscription error:', error);
                    }
                } else if (result !== 'granted') {
                    console.log('通知の権限が拒否されました。');
                }       
            });
            console.log('サービスワーカーが正常に登録されました');
        } catch (error) {
            console.error('サービスワーカーの登録に失敗しました:', error);
        }
    }
}


function urlBase64ToUint8Array(base64String) {
    const padding = '='.repeat((4 - base64String.length % 4) % 4);
    const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
    const rawData = window.atob(base64);
    const outputArray = new Uint8Array(rawData.length);
    for (let i = 0; i < rawData.length; ++i) {
        outputArray[i] = rawData.charCodeAt(i);
    }
    return outputArray;
}

document.getElementById('enable-notifications').addEventListener('click', async () => {
    const permission = await Notification.requestPermission();
    if (permission === 'granted') {
        setupPushNotifications();
    } else {
        console.log('通知の権限が拒否されました。');
    }
});

        $endpoint = $request->endpoint;
        $token = $request->keys['auth'];
        $key = $request->keys['p256dh'];
        $user = $request->user();
        $user->updatePushSubscription($endpoint, $key, $token);

use App\Notifications\Reserved;
$user = User::find(1);
$user->notify(new Reserved($reservation));

          <div id='app' class="page">
            <?php if (have_posts()):?>
                <div v-for="post in posts" :key="post.id" class="blogpage">
                  <h3>{{ post.title.rendered }}</h3>
                  <p> {{ formattedDate(post.date) }}</p>
                  <p v-html="post.content.rendered"></p>
                </div>
            <?php endif; ?>                
          </div>    
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/moment@2.30.1/min/moment.min.js"></script>
<script src="<?= get_template_directory_uri() ?>/asset/Infinity.js?<?=time()?>" type="module" ></script>

import { ref, onMounted, onUnmounted, createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';

createApp({
    setup() {

        const posts = ref([]);
        const page = ref(1);
        const loading = ref(false);
        const hasMore = ref(true);

        onMounted(async () => {
            await fetchPosts();

            if (window.innerWidth < 600) {
                window.addEventListener('scroll', handleScroll);
            } else {
                document.querySelector('#app').addEventListener('scroll', handleScroll);
            }

        });

        onUnmounted(() => {
            if (window.innerWidth < 600) {
                document.documentElement.removeEventListener('scroll', handleScroll);
            } else {
                document.querySelector('#app').removeEventListener('scroll', handleScroll);
            }
        });
        const formattedDate = (dateString) => {
            return moment(dateString).format('YYYY年MM月DD日');
        };

        const fetchPosts = async () => {
            if (loading.value || !hasMore.value) return;

            loading.value = true;
            try {
                const response = await axios.get(`/wp-json/wp/v2/posts?page=${page.value}`);
                if (response?.data?.length) {
                    posts.value = [...posts.value, ...response.data];
                    page.value++;
                    hasMore.value = true;
                }else{
                    hasMore.value = false;
                }

            } catch (error) {
                //console.error(error);
            } finally {
                loading.value = false;
            }
        };

        const handleScroll = async () => {
            let scrollHeight = null;
            let clientHeight = null;
            let scrollTop = null;

            if (window.innerWidth < 600) {
                scrollHeight = document.documentElement.scrollHeight;
                clientHeight = document.documentElement.clientHeight;
                scrollTop = document.documentElement.scrollTop;

            } else {
                scrollHeight = document.querySelector('#app').scrollHeight;
                clientHeight = document.querySelector('#app').clientHeight;
                scrollTop = document.querySelector('#app').scrollTop;
            }

            if (scrollTop + clientHeight >= scrollHeight - 100 && hasMore.value) {
                await fetchPosts();
            }
        };
        return { posts, page, loading, hasMore, fetchPosts, handleScroll, formattedDate };
    }

}).mount('#app')

// 干支の計算方法は？
// 十二支は、西暦を１２で割り、同様に余りを求めます。 
let eto = ['申', '酉', '戌', '亥', '子', '丑', '寅', '卯', '辰', '巳', '午', '未'];
document.querySelector('.input').addEventListener('input', function () {
    let index = isNaN(Number(document.querySelector('.input').value)) ? -1 : (Number(document.querySelector('.input').value) % 12);
    document.querySelector('#res').innerText = index === -1 ? '' : eto[index];
});

<button id="likeBtn">👍</button>
<button id="dislikeBtn">👎</button>

<p><span id="likeCount">0</span></p>

// カウンターの初期値を設定
let likeCount = 0;
let dislikeCount = 0;

// 「いいね」ボタンのクリックイベントを追加
document.getElementById("likeBtn").addEventListener("click", function() {
  likeCount++;
  document.getElementById("likeCount").textContent = likeCount;
});

document.getElementById('btn').addEventListener('click', () => {
    const formData = new FormData();
    formData.append('id', document.getElementById('id_number').value);
    formData.append('_method','PUT');//DELETE・PATCH・PUT

    fetch('ajax-test', {
        method: 'POST',
        headers: {'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content}, // CSRFトークン対策
        body: formData
    })
        .then(response => response.json()) 
        .then(res => {
            console.log('res: '+res[0].id);
            document.getElementById("result").innerHTML = "ID番号" + res[0].id + "は「" + res[0].name + "」です。価格は「" + res[0].price+"円」です。";
        })
        .catch(error => {
            console.log(error); // エラー表示
        });
});

let funs = {
    init: { htmlcode: document.getElementById("vals").innerHTML },
    highlight: function (e) {
        document.getElementById("vals").innerHTML = funs.init.htmlcode;
        if (!String(this.value).match(/[a-zA-Z]/) && this.value) {
            document.getElementById("vals").innerHTML = String(funs.init.htmlcode).replace(new RegExp(this.value, 'g'), '<span style="color:red">' + this.value + '</span>');
        }
    },
    inputevent:function(){
        document.getElementById("txt").addEventListener("input", this.highlight);
    }
};
funs.inputevent();

let circle = document.getElementById("circle");
document.body.addEventListener("mousemove",function(e){
    let a = e.currentTarget.getBoundingClientRect();
    let x = e.clientX - a.left;
    let y = e.clientY - a.top; 
    circle.style.top = `${y}px`;
    circle.style.left = `${x}px`;
    circle.style.transform = `translate(50px,50px)`;
})

document.querySelector(".btn").addEventListener("click", () => {
    let p = [document.querySelector("[name='name']").value, document.querySelector("[name='text']").value];
    [...document.querySelectorAll(".put")].forEach((elm, index) => {
        elm.innerText = p[index];
    });
    document.querySelector("#box2").style.display = "none";
    document.querySelector("#data").insertAdjacentHTML("beforeend", `<button class="btn2" type="button">非同期送信</button>`);
    document.querySelector(".btn2").addEventListener("click", async () => {
        //submit code
        let url = "./submit.php";
        let data = (() => {
            return ([...document.querySelectorAll(".put")].map((elm, index) => {
                return "test" + index + "=" + elm.innerText;
            })).join("&");
        })();
        const options = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Content-Length": data.length,
                'Accept': 'application/json'
            },
            body: data //JSON.stringify(data)
        };
        await fetch(url, options).then(response =>
            response.json()
        ).then(resultdata => {
            document.getElementById("view").insertAdjacentHTML("beforeend", resultdata.test0 + "," + resultdata.test1);
        }).catch(error => {
            console.log(error);
        });
    });
});


function imgchg(imagename){
    document.body.setAttribute("style","background-image: url(./assets/images/" + imagename + ".jpg.webp");
}

document.getElementById("sh").addEventListener("input",(e)=>{
    $.ajax({
        type: "post",
        url: "example.com/sh.php",
        data: {text:this.value},
        dataType: "json",
        success: function (response) {
            
        }
    });
});

    <form id="frm" method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit1</button>
    </form>
    <form method="post" action="./example/">
        <input type="hidden" name="example" value="data">
        <button id="btn" type="submit" class="btn btn-primary">Submit2</button>
    </form>    
    <form method="post" action="./example/" onsubmit="return func1()" >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary">Submit3</button>
    </form>
    <form method="post" action="./example/"  >
        <input type="hidden" name="example" value="data">
        <button type="submit" class="btn btn-primary" onclick="return func2()" >Submit4</button>
    </form>

//例１
document.getElementById("frm").addEventListener("submit",function(event){
    event.preventDefault();
});
//例２
document.getElementById("btn").addEventListener("click",function(event){
    event.preventDefault();
    event.stopPropagation();//インターフェイスのメソッドで、キャプチャおよびバブリング段階において現在のイベントのさらなる伝播を阻止します。 
});
//例３
function func1(){
    return false;
}
//例４
function func2(){
    return false;
}

document.getElementById("example").addEventListener("input",function(){
    main()
})
document.getElementById("example").addEventListener("input",main);

function main(){
    if(this.value){
        console.log(this);
    }
}

"use strict";
document.querySelector("button").addEventListener("click",jsandcssreload);
function jsandcssreload(){
    let d = (new Date()).getTime();
    [...document.querySelectorAll("link")].forEach((elm)=>{
        elm.href = elm.href.replace(/(\.css)\??[0-9]{0,}$/,".css?" + d);
    });
    [...document.querySelectorAll("script")].forEach((elm)=>{
        elm.src = elm.src.replace(/(\.js)\??[0-9]{0,}$/,".js?" + d);
    });    
}

[...document.querySelectorAll('script')].forEach(elm => {
        let script = document.createElement('script');
        script.src = elm.src;
        document.body.appendChild(script);   
});

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

<script src="./assets/js/common.js"></script>

<script type="text/javascript" src="./assets/js/common.js"></script>

document.getElementById("btn").addEventListener("click", async (e) => {
	test1();
	test2();
	test3();
	await test1();
	await test2();
	await test3();
});

function test1() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 1");
			resolve('1');
		}, 3000);
	});
}
function test2() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 2");
			resolve('2');
		}, 2000);
	});
}
async function test3() {
	return new Promise(resolve => {
		setTimeout(() => {
			console.log("btn = 3");
			resolve('3');
		}, 100);
	});
}

	const test = (e)=>{
		var view = document.querySelector("#view1");
		view.innerHTML = e.target.value;
	};
	const input = document.querySelector("#t");
	input.addEventListener("input",test);