// Required js for admin pages
jQuery(document).ready(function ($) {
    // Hide or show cardMeaningPreview based on checkbox state
    if (!$('#enable_card_meaning').prop('checked')) {
        $('#cardMeaningPreview').css('display', 'none');
    } else {
        $('#cardMeaningPreview').css('display', 'block');
    }

    var selectedGameDropdown = document.getElementById('selected_game');
    if (selectedGameDropdown) {
        selectedGameDropdown.addEventListener('change', function () {
            var $form = $(selectedGameDropdown).closest('form');
            if ($form.length) {
                $form.trigger('submit');
            } else {
                console.warn('Form element not found for the selected game dropdown.');
            }
        });
    }

    $('#enable_card_meaning').on('change', function () {
        if ($(this).prop('checked')) {
            $('#cardMeaningPreview').css('display', 'block');
        } else {
            $('#cardMeaningPreview').css('display', 'none');
        }
    });

    // Update card back image preview when choosing an image
    $('#card_back_image_button').click(function () {
        var custom_uploader = wp.media({
            title: 'Select Card Back Image',
            button: {
                text: 'Use this image'
            },
            multiple: false
        })
            .on('select', function () {
                var attachment = custom_uploader.state().get('selection').first().toJSON();
                $('#card_back_image').val(attachment.url);
                $('#card_back_image_preview').attr('src', attachment.url);
                updatePreview();
            })
            .open();
    });

    // Update the live preview based on current settings
    function updatePreview() {
        // Draw Again Button
        var drawAgainButton = $('#drawAgainButtonPreview');
        drawAgainButton.css('background-color', $('#button_bg_color').val());
        drawAgainButton.css('color', $('#button_text_color').val());
        drawAgainButton.css('font-size', $('#button_font_size').val());
        drawAgainButton.css('border-radius', $('#round_edges').val() + 'px');
        drawAgainButton.css('padding', '10px 20px');

        // Card Name Preview
        $('#cardNamePreview').css('font-family', $('#card_name_font_family').val());
        $('#cardNamePreview').css('font-size', $('#card_name_font_size').val());
        $('#cardNamePreview').css('color', $('#card_name_text_color').val());

        // Card Meaning Preview
        $('#cardMeaningPreview').css('font-family', $('#card_meaning_font_family').val());
        $('#cardMeaningPreview').css('font-size', $('#card_meaning_font_size').val());
        $('#cardMeaningPreview').css('color', $('#card_meaning_text_color').val());

        // Card Back Image
        $('.card .front').attr('src', $('#card_back_image').val());
    }

    // Initial update of the preview
    updatePreview();

    // Event listeners for updating the preview when settings are changed
    $('#button_font_size, #round_edges').on('input', updatePreview);
    $('#card_name_font_family, #card_name_font_size').on('change', updatePreview);
    $('#card_meaning_font_family, #card_meaning_font_size').on('change', updatePreview);
    $('#card_name_text_color, #card_meaning_text_color, #button_bg_color, #button_text_color').wpColorPicker({
        change: function (event, ui) {
            updatePreview();
        }
    });
});