fetch('/api/bookings').then(res => res.json()).then(data => {

    const list = document.getElementById('list');

    list.innerHTML = data.length ? '' : 'No bookings found.';

    data.forEach(b => {

        list.innerHTML += `

            <div class="item" id="row-${b.id}">

                <span><b>${b.name}</b> - ${b.date}</span>

                <button class="del-btn" onclick="deleteBooking('${b.id}')">Delete</button>

            </div>`;

    });

});

async function deleteBooking(id) {

    if (!confirm("Delete this?")) return;

    const res = await fetch(`/api/bookings?id=${id}`, { method: 'DELETE' });

    if (res.ok) document.getElementById(`row-${id}`).remove();

}

async function changePassword() {

    const currentPassword = document.getElementById('old-p').value;

    const newPassword = document.getElementById('new-p').value;

    const msg = document.getElementById('msg');

    const res = await fetch('/api/password', {

        method: 'POST',

        headers: { 'Content-Type': 'application/json' },

        body: JSON.stringify({ currentPassword, newPassword })

    });

    const data = await res.json();

    msg.innerText = data.message || data.error;

    msg.style.color = res.ok ? 'green' : 'red';

}