function showLoader() {
    $('body').append('<div class="loading-cart"><div class="lds-ripple"><div></div><div></div></div></div>');
}

function hideLoader() {
    $('.loading-cart').remove();
}

$(document).ready(function () {
    $('select[name="cat1"], select[name="cat2"], select[name="cat3"], select[name="cat4"], select[name="cat5"], ' +
        'select[name="cat6"], select[name="cat7"], select[name="cat8"], select[name="cat9"], select[name="cat10"]')
        .on('change', function () {
        var all = $(this).val();
        $(this).val(all[all.length-1])
    });

    var filter = {};
    filter.getCats = (catId, divId) => {
        $.ajax({
            type: 'get',
            url: '/class/getcats/'+ divId,
            success: function (response) {
                hideLoader();
                if(response['title'] != undefined){
                    var btn = '<button type="submit" class="btn-1">'+response['continueBtn']+'</button>';
                    $('.cat-item-3 .next-content').html(
                        '<p class="mb-3 mt-2">'+response['title']+'</p>' +
                        '<div class="btn-section btn-next">' + btn + '</div>'
                    );
                    $('.cat-item-3').parent().css('display', 'flex');
                    stop();
                } else {
                    response.forEach(function(options){
                        $(catId).append("<option class='text-truncate pl-1 my-1' value="+options.id+">"+options.name+"</option>");
                    });
                    $('.focus-select').removeClass('focus-select');
                    $(catId).animate({height: '14rem'}, 200);
                    $(catId).closest('.cat-item-2').show().addClass('focus-select')
                }
                // Auto scroll right
                let categoryTab = $('.category-tab');
                let pos = categoryTab.scrollLeft() + categoryTab.width();
                categoryTab.animate( {scrollLeft: pos}, 1000);
            },
            beforeSend: function () {
                showLoader()
            }
        })
    };

    filter.hideCats = (num) => {
        var startNo = num;
        var endNo = 9;

        while (startNo <= endNo) {
            $('#cat'+ startNo).animate({height: 0}, 200, 'linear', function () {
                $(this).html("").closest('.cat-item-2').hide();
            });
            $('.cat-item-3').parent().hide();
            startNo++;
        }
    };

    for (var i = 1; i <= 10; i++) {
        (function(){
            var ii = i;
            $('#cat' + i).on('change', function (i, e) {
                $(this).find('option.selected').removeClass('selected');
                let selectedOption = $(this).find('option:selected');
                selectedOption.addClass('selected');
                let divId = selectedOption.val();
                if (divId == 0) {
                    filter.hideCats(ii + 1);
                }
                filter.hideCats(ii + 1);
                filter.getCats("#cat" + (ii + 1), divId);
            });
        })();
    }
});