// Monthly Horoscope Game JS
document.addEventListener('DOMContentLoaded', function () {
    // Find all horoscope containers
    document.querySelectorAll('.horoscope-container').forEach((container, index) => {
        setTimeout(() => {
            var sign = container.getAttribute('data-sign');
            var contentDiv = container.querySelector('.horoscope-content');
            var imageShown = !!parseInt(horoscopeData.image_shown, 10);
            var imagePosition = horoscopeData.image_position;
            var imageUrl = horoscopeData.image_url.replace(/\/[^/]+\.png$/, `/${sign}.png`); // Ensure correct sign image
            var showDate = horoscopeData.show_date === '1' || horoscopeData.show_date === 1;

            fetch(horoscopeData.ajax_url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: `action=tarotxhoroscope_horoscopemonthly_api_call&security=${horoscopeData.nonce}&starsign=${sign}`
            })
                .then(response => {
                 if (!response.ok) throw new Error('Network response was not ok');
                    return response.json();
                })
                .then(data => {
                    var content = '';

                    // Case 1: Image is shown and positioned at the top
                    if (imageShown && imagePosition === 'top') {
                        content += `<img src="${imageUrl}" style="display: block; margin: 0 auto 10px; max-width: 200px; max-height: 200px;" alt="${sign} horoscope">`;
                        if (showDate) {
                            content += `<div style="text-align: left; margin-bottom: 10px;"><b>Today's date:</b> ${new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</div>`;
                        }
                        if (data.success && data.data.monthly) {
                            var formattedMessage = data.data.monthly
                                .replace("Love and Relationships:", "<b>Love and Relationships:</b>")
                                .replace("Career and Finances:", "<b>Career and Finances:</b>")
                                .replace("Health and Wellness:", "<b>Health and Wellness:</b>")
                                .replace("Personal Development and Spirituality:", "<b>Personal Development and Spirituality:</b>");
                            content += `<div style="text-align: left;">${formattedMessage}</div>`;
                        } else {
                            content += '<div style="text-align: left;">No monthly message found for today.</div>';
                        }
                    }
                    // Case 2: Image is shown and positioned left or right
                    else if (imageShown) {
                        content += '<div style="display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;">';
                        if (imagePosition === 'left') {
                            content += `<div style="flex: 0 0 200px;"><img src="${imageUrl}" style="max-width: 200px; max-height: 200px;" alt="${sign} horoscope"></div>`;
                        }
                        content += '<div style="flex: 1; min-width: 200px; text-align: left;">';
                        if (showDate) {
                            content += `<div style="margin-bottom: 10px;"><b>Today's date:</b> ${new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</div>`;
                        }
                        if (data.success && data.data.monthly) {
                            var formattedMessage = data.data.monthly
                                .replace("Love and Relationships:", "<b>Love and Relationships:</b>")
                                .replace("Career and Finances:", "<b>Career and Finances:</b>")
                                .replace("Health and Wellness:", "<b>Health and Wellness:</b>")
                                .replace("Personal Development and Spirituality:", "<b>Personal Development and Spirituality:</b>");
                            content += formattedMessage;
                        } else {
                            content += 'No monthly message found for today.';
                        }
                        content += '</div>';
                        if (imagePosition === 'right') {
                            content += `<div style="flex: 0 0 200px;"><img src="${imageUrl}" style="max-width: 200px; max-height: 200px;" alt="${sign} horoscope"></div>`;
                        }
                        content += '</div>';
                    }
                    // Case 3: Image is not shown
                    else {
                        if (showDate) {
                            content += `<div style="text-align: left; margin-bottom: 10px;"><b>Today's date:</b> ${new Date().toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' })}</div>`;
                        }
                        if (data.success && data.data.monthly) {
                            var formattedMessage = data.data.monthly
                                .replace("Love and Relationships:", "<b>Love and Relationships:</b>")
                                .replace("Career and Finances:", "<b>Career and Finances:</b>")
                                .replace("Health and Wellness:", "<b>Health and Wellness:</b>")
                                .replace("Personal Development and Spirituality:", "<b>Personal Development and Spirituality:</b>");
                            content += `<div style="text-align: left;">${formattedMessage}</div>`;
                        } else {
                            content += '<div style="text-align: left;">No monthly message found for today.</div>';
                        }
                    }

                    contentDiv.innerHTML = content;
                })
                .catch(error => {
                    console.error(`Fetch error for ${sign}:`, error);
                    contentDiv.innerHTML = 'Error loading horoscope: ' + error.message;
                });
        }, index * 250); // Delay each call by 250ms
    });
});