// Allows dynamic updates when styling the horoscope game

jQuery(document).ready(function ($) {
    $('.color-field').wpColorPicker({
        change: function (event, ui) {
            updatePreview();
        }
    });
    $('#selected_game').on('change', function () {
        $(this).closest('form').submit();
    });

    function updatePreview() {
        var fontFamily = $('#font_family').val();
        var fontSize = $('#font_size').val();
        var textColor = $('#text_color').val();
        var imageShown = $('#image_shown').is(':checked');
        var imagePosition = $('#image_position').val();
        var showDate = $('#show_date').is(':checked');
        var borderEnabled = $('#border_enabled').is(':checked');
        var borderColor = $('#border_color').val();
        var borderWidth = $('#border_width').val() + 'px';
        var borderRadius = $('#border_radius').val() + 'px';
        var width = $('#width').val() + 'px';

        var $preview = $('#horoscope-preview');
        $preview.css({
            'font-family': fontFamily,
            'font-size': fontSize,
            'color': textColor,
            'width': width,
            'border': borderEnabled ? `${borderWidth} solid ${borderColor}` : 'none',
            'border-radius': borderEnabled ? borderRadius : '0',
            'padding': '10px',
            'overflow': 'hidden',
            'background-color': '#f5f5f5',
            'margin': '0 auto'
        });

        var imageMaxWidth = Math.min(200, parseInt(width) - 20);
        var content = '';
        if (imageShown && imagePosition === 'top') {
            content += `<img src="${horoscopeAdminData.imageUrl}" style="display: block; margin: 0 auto 10px; max-width: ${imageMaxWidth}px; max-height: 200px; width: auto;" alt="Horoscope Image">`;
        }

        content += `<div style="${imageShown && imagePosition !== 'top' ? 'display: flex; flex-wrap: nowrap; align-items: center;' : 'text-align: center;'}">`;
        if (imageShown && imagePosition === 'left') {
            content += `<img src="${horoscopeAdminData.imageUrl}" style="margin-right: 10px; max-width: ${imageMaxWidth}px; max-height: 200px; width: auto;" alt="Horoscope Image">`;
        }
        content += `<div style="flex: 1; ${imageShown && imagePosition === 'top' ? 'text-align: center;' : '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>`;
        }

        content += `<div><b>Love and Relationships:</b> March 2025 ignites passionate connections for Aries as Venus dances through your sector of intimacy. Early-month tensions dissolve post-Equinox, fostering vulnerability and trust. Committed partnerships benefit from shared adventures, while singles may attract magnetic souls during the Full Moon in Libra. Balance independence with compromise to harmonize bonds.<br><br><b>Career and Finances:</b> Mars in Gemini turbocharges your communication skills, making negotiations or presentations shine. A New Moon mid-month sparks lucrative opportunities, but avoid hasty commitments. Financial tides shift favorably after the 20th—revisit budgets and delegate tasks strategically. Unexpected expenses demand cautious spending; prioritize needs over wants.<br><br><b>Health and Wellness:</b> Your ruling planet Mars fuels physical stamina, but erratic Uranus warns against overexertion. Prioritize rest between active pursuits, and integrate strength training to avoid muscle strain. Digestive sensitivity peaks around the 18th—opt for lighter meals and herbal teas to maintain equilibrium.<br><br><b>Personal Development and Spirituality:</b> Jupiter’s clash with Pluto urges Aries to confront ingrained fears, unlocking transformative growth. Meditative practices or journaling after the 12th reveal subconscious patterns. Channel fiery energy into creative outlets or mentorship roles, aligning actions with a renewed sense of purpose.</div>`;
        content += `</div>`;
        if (imageShown && imagePosition === 'right') {
            content += `<img src="${horoscopeAdminData.imageUrl}" style="margin-left: 10px; max-width: ${imageMaxWidth}px; max-height: 200px; width: auto;" alt="Horoscope Image">`;
        }
        content += `</div>`;

        $preview.html(content);
    }

    $('#font_family, #font_size, #image_shown, #image_position, #show_date, #border_enabled, #border_color, #border_width, #border_radius, #width').on('change input', updatePreview);
    updatePreview();
});

