$('#add-skill').click(function () {
    var skill_name = $("#skill_name").val();
    var year_experience = $("#year_experience").val();
    var skill_level = $("#skill_level").val();
    if($("#skill_name").valid() && $("#year_experience").valid()) {
        $('.add-skill-modal').modal('hide');


        var element = `<div class="col-12 col-lg-4">
                                <div class="skill-element card">
                                    <div class="card-body">
                                        <input type="hidden" name="list_skill_name[]" value="${skill_name}">
                                        <input type="hidden" name="list_year_experience[]" value="${year_experience}">
                                        <input type="hidden" name="list_skill_level[]" value="${skill_level}">
                                        <div class="card-title">
                                            <div>スキル：</div>
                                            <div id="remove" class="remove-skill-button">
                                                <img src="../images/page/register/creator/icon_delete.png" alt="">
                                            </div>
                                        </div>
                                        <div class="skill-name">${skill_name}</div>
                                        <div class="year-experience">経験年数：${year_experience} 年</div>
                                        <div class="progress skill-level-progress">
                                            <div class="progress-bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:${skill_level/5*100}%">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>`;

        $('.skill-element-container').append(element);

        $("#skill_name").val(null);
        $("#year_experience").val(null);
        $("#skill_level").val('1');

        document.querySelectorAll(".__range-step").forEach(function (ctrl) {
            var el = ctrl.querySelector('input');
            var output = ctrl.querySelector('output');
            var newPoint, newPlace, offset;
            el.oninput = function () {
                // colorize step options
                ctrl.querySelectorAll("option").forEach(function (opt) {
                    opt.classList.remove('active');
                    if (opt.value <= el.valueAsNumber)
                        opt.style.backgroundColor = '#45D5A3';
                    else
                        opt.style.backgroundColor = '#A5A5A5';
                });
                // colorize before and after
                var valPercent = (el.valueAsNumber - parseInt(el.min)) / (parseInt(el.max) - parseInt(el.min));
                var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(' +
                    valPercent + ', #45D5A3), color-stop(' +
                    valPercent + ', #A5A5A5));';
                el.style = style;

                ctrl.querySelector('option[value="' + el.value + '"]').classList.add('active');
            };
            el.oninput();
        });

    }

})

$('.skill-element-container').on('click', '#remove', function () {
    $(this).closest('.skill-element').remove();
})