{% trans_default_domain 'configuratore' %}
{{ form_start(form) }}
<div class="tab-pane fade in active info-tab detail-body">                     
    <ul class="nav nav-tabs tabdrop">
        <li class="menu-info active" id="menu-info-tab">
            <a href="#info-tab" data-toggle="tab">{{ 'Information'|trans }}</a>
        </li>
        <li class="menu-info" id="menu-obj3D-tab">
            <a href="#obj3D-tab" data-toggle="tab">{{ '3D Object'|trans }}</a>
        </li>
    </ul>                    
    <div class="tile-body tab-content rounded-bottom-corners col-md-12">
        <div id="info-tab" class="tab-pane fade in active">                     
            <div class="form-detail-item">
                {{ include('detail_item/_form1.html.twig', {}) }}
            </div>                
        </div>
        <div id="obj3D-tab" class="tab-pane fade in">      
            {{ include('detail_item/_form2.html.twig', {}) }}
        </div>
    </div>
</div>
{{ form_row(form._token) }}
{{ form_end(form, {'render_rest': true}) }}    
<script>
    function changeValue(s) {
        
        var ck = $(s).is(':checked');
        var elemento = $(s).attr('id');
        $('.' + elemento + ' div.blocco-check .click-me').removeClass('on-' +  elemento);
        $('.' + elemento + ' div.blocco-check .click-me').removeClass('off-' +  elemento);
        $('.' + elemento + ' div.sub-items .sub-item.from-on, .' + elemento + ' div.blocco-check.sub-items .sub-item.from-off').hide();
        if (ck) {
            $('.' + elemento + ' div.sub-items .sub-item.from-on').show();
            $('.' + elemento + ' div.sub-items .sub-item.from-off').hide();
            $('.' + elemento + ' div.blocco-check .click-me').addClass('on-' +  elemento);
            $('#label_' + elemento).html($('#label_' + elemento).data('labelon'));
        }
        else {
            $('.' + elemento + ' div.sub-items .sub-item.from-on').hide();
            $('.' + elemento + ' div.sub-items .sub-item.from-off').show();
            $('.' + elemento + ' div.blocco-check .click-me').addClass('off-' +  elemento);
            $('#label_' + elemento).html($('#label_' + elemento).data('labeloff'));
        }
    }

    function onChangeValue(e) {
        changeValue(e.target);
    }

    $(function () {
        $('.change-value').on('change', onChangeValue);
        $('.change-value').each(function() { changeValue(this); });
        $('[data-dependent]').each(function () {
            var $ele = $(this);
            var dependsOn = $ele.data('dependent');
            $.each(dependsOn, function (target, value) {
                if ($(target).is(":checked") === value) {
                    $ele.show();
                }
                else {
                    $ele.hide();
                }
                $(target).on('change', function () {
                    if ($(this).is(":checked") === value) {
                        $ele.show();
                    }
                    else {
                        $ele.hide();
                    }
/*                    if($(this).val() === value) {
                        
                    }
                    else {
                        $ele.hide();
                    }*/
                });
            });
        });
    })




</script>