const buttons = document.querySelectorAll('.favorite-rituals-booking-request-button');
const organisationId = "1";
buttons.forEach(button => {
button.addEventListener('click', function () {
const iframeContainer = document.createElement('div');


iframeContainer.style.position = 'fixed';
iframeContainer.style.top = '0';
iframeContainer.style.left = '0';
iframeContainer.style.width = '100%';
iframeContainer.style.height = '100%';
iframeContainer.style.zIndex = '999999';
iframeContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.5)';

const iframe = document.createElement('iframe');


iframe.src = `http://partners.localhost:8081/api/organisations/${organisationId}/web-page-booking-request`;
iframe.style.width = '500px';
iframe.style.height = '500px';
iframe.style.maxHeight = '80%';
iframe.style.border = 'none';
iframe.style.position = 'absolute';
iframe.style.display = 'grid';
iframe.style['border-radius'] = '8px';


iframe.style.top = '50%';
iframe.style.left = '50%';
iframe.style.transform = 'translate(-50%, -50%)';


iframeContainer.appendChild(iframe);


document.body.appendChild(iframeContainer);


iframeContainer.addEventListener('click', (event) => {

if (event.target !== iframe) {
iframeContainer.remove();
}
})

const app = document.getElementById('app');
console.log(app);
if (app) {
app.style.minHeight = '100vh';
}


const closeButton = document.createElement('button');
closeButton.innerText = 'Close';
closeButton.style.position = 'absolute';
closeButton.style.top = '20px';
closeButton.style.right = '20px';
closeButton.style.padding = '10px';
closeButton.style.fontSize = '16px';
closeButton.style.color = 'white';
closeButton.style.border = 'none';
closeButton.style.cursor = 'pointer';


closeButton.addEventListener('click', function () {
iframeContainer.remove();
});


iframeContainer.appendChild(closeButton);
});
})