jQuery(document).ready(function($) {
    const filterCard = $('#filterCard');
    const inputBgMenu = $('input[name="zoddak-bg-color-search-menu"]');
    const btnColorInput = $('input[name="zoddak-btn-color-search-menu"]');
    const resetInput = $('input[name="zoddak-reset-btn-color"]'); 
    const resetBtn = $('#resetBtn');
    const findBtn =  $('#findBtn');
    inputBgMenu.wpColorPicker({
        change: function(event, ui) {
            const color = ui.color.toString();
            filterCard.css('background-color', color);
        },
        clear: function() {
            filterCard.css('background-color', '');
        }
    });

    resetInput.wpColorPicker({
        change: function(event, ui) {
            const color = ui.color.toString();
            resetBtn.css('background-color', color);
        },
        clear: function() {
            resetBtn.css('background-color', '');
        }
    });

    btnColorInput.wpColorPicker({
        change: function(event, ui) {
            const color = ui.color.toString();
            findBtn.css('background-color', color);
        },
        clear: function() {
            findBtn.css('background-color', '');
        }
    });
})