var tab = document.querySelectorAll('.step_content');
var nav = document.querySelectorAll('.step');


if (history.pushState) {
    hashchanged();
}
$(window).bind("hashchange", function() {
    hashchanged();
});

function hashchanged() {
    oldHref = document.location.href;
    var location_list = oldHref.toString().split("#");
    if (location_list[1] == "cart") {
        resetpage();
        nav[0].classList.add('active');
        tab[0].classList.add('active');
    } else if (location_list[1] == "clothing_size") {
        resetpage();
        nav[1].classList.add('active');
        tab[1].classList.add('active');
    } else if (location_list[1] == "info") {
        resetpage();
        nav[2].classList.add('active');
        tab[2].classList.add('active');
    } else if (location_list[1] == "content_tab_4") {
        resetpage();
        nav[3].classList.add('active');
        tab[3].classList.add('active');
    } else {
        resetpage();
        nav[0].classList.add('active');
        tab[0].classList.add('active');
    }
}


function resetpage() {
    for (var i = 0; i < nav.length; i++) {

        try {
            nav[i].classList.remove('active');
            tab[i].classList.remove('active');
        } catch (error) {

        }
    }
}

var size_item = document.querySelectorAll('.sec_2 ul li');
for (var i = 0; i < size_item.length; i++) {
    size_item[i].setAttribute('onclick', 'active_preview(this,false)');
    size_item[i].querySelector('input').setAttribute('onfocus', 'active_preview(this.parentElement,false)');
}
var size_item_inputs = document.querySelectorAll('.sec_2 input');
for (var i = 0; i < size_item_inputs.length; i++) {
    size_item_inputs[i].setAttribute('onkeyup', 'active_preview(this,true)');
    //size_item[i].querySelector('input').addEventListener ("keyup", active_preview (size_item[i].querySelector('input'),true))
    //addEvent('keyup', size_item[i].querySelector('input'), active_preview);
}

// const size_item_input = document.querySelectorAll('.sec_2 ul li input');
// size_item_input.forEach(function (e) {
//     console.log(e);
// });

function active_preview(obj,activate=false) {
    if (activate) {
        document.querySelectorAll('[name='+obj.name+']')[0].value = obj.value;
        document.querySelectorAll('[name='+obj.name+']')[1].value = obj.value;
    } else {
        const reset_previews = document.querySelectorAll('.sec_2 .body_preview .active')
        const reset_list = document.querySelectorAll('.sec_2 ul li.is_active');
        for (var i = 0; i < reset_previews.length; i++) {
            reset_previews[i].classList.remove('active');
        }
        if (reset_list) {
            for (var i = 0; i < reset_list.length; i++) {
                reset_list[i].classList.remove('is_active');
            }
        }
        const target = document.querySelectorAll(obj.getAttribute('data-target'));
        const data_points = document.querySelector('.points_card .points');
        
        for (var i = 0; i < target.length; i++) {
            obj.classList.add('is_active');
            target[i].classList.add('active');
            target[i].parentElement.classList.add('active');
            document.getElementById(obj.getAttribute('data-href')).scrollIntoView({ behavior: 'smooth', block: 'center' });
        }

        data_points.querySelector('h6').innerHTML = obj.querySelector('label').innerHTML;
        if (obj.hasAttribute("data-points")) {
            data_points.querySelector('p').innerHTML = obj.getAttribute("data-points");
        } else {
            data_points.querySelector('p').innerHTML = '';
        }
    }
}


function go_previous_size() {
    const active_size = document.querySelector('.sec_2 ul li.is_active');
    if (active_size) {
        if (active_size.previousElementSibling) {
            active_preview(active_size.previousElementSibling,false)
            if (window.innerWidth > 769) {
            active_size.previousElementSibling.querySelector('input').focus()
            }
        }
    }
}

function go_next_size() {
    const active_size = document.querySelector('.sec_2 ul li.is_active');
    if (active_size) {
        if (active_size.nextElementSibling) {
            active_preview(active_size.nextElementSibling,false)
            if (window.innerWidth > 769) {
            active_size.nextElementSibling.querySelector('input').focus()
            }
        }
    }
}


$(document).ready(function () {
    $(window).scroll(function () {
        if (window.innerWidth < 769) {
            if ($(window).scrollTop() > 250) {
                $(".shopping-cart .sec_2 .body_preview .points_card").css({ opacity: "1", "pointer-events": "visible" });
              } else {
                $(".shopping-cart .sec_2 .body_preview .points_card").css({ opacity: "0", "pointer-events": "none" });
            }
        }
    });
  });