jQuery.noConflict();

    (function( _js ) {
      _js(function() {


    var _doc = _js(document),
        _win = _js(window);

    /*----------------------------------------------------------------------*/

    _doc.on('click', '.kr-load-more', function(e){
        e.preventDefault();
        var $count = parseInt(_js('.kr-col-card:visible').length),
            $limit = parseInt(_js(this).attr('data-limit')),
            $next_count = _js('.kr-col-card.ready:not(:visible)').length;

        _js('.kr-col-card.ready').slice($count, $count + $limit).show();

        if( $next_count <= $limit ) {
            _js(this).hide();
        }
    });

    /*----------------------------------------------------------------------*/

    _doc.on('change', '.kr-form select', function(e){
        e.preventDefault();
        _js(this).closest('form').find('.kr-btn-search').trigger('click');
    });

    /*----------------------------------------------------------------------*/

    _doc.on('click', '.kr-btn-reset', function(e){
        e.preventDefault();
        _js(this).closest('form').trigger("reset");
        _js(this).closest('form').find('.kr-btn-search').trigger('click');
        _js(this).hide();
    });

    /*----------------------------------------------------------------------*/

    _doc.on('click', '.btn-toggle-filter', function(e){
        e.preventDefault();
        _js('.kr-form').slideToggle();
    });

    /*----------------------------------------------------------------------*/
   
    _doc.on('click', '.kr-btn-sort', function(e){
        e.preventDefault();
        var val = _js(this).attr('data-name');
        _js('[name="sort"]').val(val).trigger('change');
        _js('.kr-btn-sort').removeClass('actived');
        _js(this).addClass('actived');
    });

    /*----------------------------------------------------------------------*/
   
    _doc.on('click', '.kr-btn-search', function(e) {
        e.preventDefault();
        var $form      = _js(this).closest('form'),
            $more      = _js('.kr-load-more'),  
            $limit     = parseInt($more.attr('data-limit')),
            $breed     = $form.find('[name="breed"]').val(),
            $pattern   = $form.find('[name="pattern"]').val(),
            $sex       = $form.find('[name="sex"]').val(),
            $age       = $form.find('[name="age"]').val(),
            $name      = $form.find('[name="name"]').val(),
            $status    = $form.find('[name="status"]').val(),
            $attribute = $form.find('[name="attribute"]').val(),
            $sort      = $form.find('[name="sort"]').val();

        _js('.kr-col-card.ready').removeClass('ready');
        _js('.kr-col-card, .kr-message').hide();

        $filter = [$breed, $pattern, $sex, $age, $name, $status, $attribute]
            .filter(function(e){ return e === 0 || e });

        if( $sort ) {
            var cards = _js('.kr-col-card').get();
            $sort_key = $sort.split('-')[0];
            cards.sort(function(a, b) {
                var nameA = _js(a).data($sort_key);
                var nameB = _js(b).data($sort_key);
                if( _js.isNumeric(nameA) ) {
                    if ($sort == $sort_key+'-asc') {
                        return parseInt(nameA) - parseInt(nameB);
                    } else if ($sort == $sort_key+'-desc') {
                        return parseInt(nameB) - parseInt(nameA);
                    }
                } else {
                    if ($sort == $sort_key+'-asc') {
                        return nameA.localeCompare(nameB);
                    } else if ($sort == $sort_key+'-desc') {
                        return nameB.localeCompare(nameA);
                    }            
                }
            });
            _js.each(cards, function(index, card) {
                _js('.kr-cards').append(card);
            });
        }

        _js('.kr-col-card').each(function(){
            var $this = _js(this);

            $isReady = 0;

            if( $this.attr('data-breed').includes($breed) && $breed ) {
                $isReady += 1;
            }

            if( $attribute ) {
                if( $this.attr('data-attributes').includes($attribute) ) {
                    $isReady += 1;
                }                  
            }

            if( $pattern ) {
                $pat = $pattern?.split('-');
                if( $pat.length == 2 ) {
                    if( $this.attr('data-pattern').includes($pat[0]) && $this.attr('data-pattern').includes($pat[1]) ) {
                        $isReady += 1;
                    }
                } else {
                    if( $this.attr('data-pattern').includes($pat[0]) ) {
                        $isReady += 1;
                    }                
                }                
            }

            if( $this.attr('data-sex') == $sex && $sex ) {
                $isReady += 1;
            }

            if( $this.attr('data-status') == $status && $status ) {
                $isReady += 1;
            }

            if( $this.attr('data-age').includes($age) && $age ) {
                $isReady += 1;
            }

            if( $this.attr('data-name').toLowerCase().includes($name.toLowerCase()) && $name ) {
                $isReady += 1;
            }

            if( $isReady == $filter.length || $filter.length == 0 ) {
                $this.addClass('ready');
            }

        });

        $more.hide();
        if( _js('.kr-col-card.ready').length > $limit ) {
            $more.show();
        }
        
        var $total = _js('.kr-col-card.ready').length;

        if(  $total == 0 ) {
            _js('.kr-message').show();
        }

        _js('.kr-btn-reset').show();
        
        _js('.kr-total').html($total +' Animal' +($total > 1 ? 's' : ''));
            
        _js('.kr-col-card.ready').slice(0, 24).show();

    });

    /*----------------------------------------------------------------------*/

    function set_column() {
        var $screenSize = _js(document).width();
        var $screenSizes = {
            0: 1,
            600: 2,
            768: 3,
            992: 4,
            1200: 5,
            1360: 6
        }
        _js.each($screenSizes, function(k, v){
            if($screenSize >= parseInt(k)) {
                _js(":root").get(0).style.setProperty("--kr-col-card", v);  
            }
        }); 
    }

    /*----------------------------------------------------------------------*/

    _win.resize(function(){
        set_column();
    });

    /*----------------------------------------------------------------------*/

    _win.ready(function(){

        if( _js('.kr-loading:visible').length ) {
            _js('.kr-animals').hide();
            _js.ajax({
                url: '/wp-admin/admin-ajax.php', // The AJAX URL
                type: 'POST',
                data: {
                    action: 'kr_import', // The action parameter
                },
                success: function(response) {
                    // Handle the successful response
                    if(response.status == 'success') {
                        _js('.kr-loading').fadeOut();               
                        _js('.kr-animals').show();
                    }

                    console.log(response);
                },
                error: function(xhr, status, error) {
                    // Handle errors
                    console.log('Error: ' + error);
                    _js('.kr-loading').fadeOut();               
                    _js('.kr-animals').show();
                }
            });
        }

        _js("img.lazyload").lazyload();
        set_column();

        _js('[data-name="stay-asc"]').trigger('click');
    });

    /*----------------------------------------------------------------------*/

  });
})(jQuery);