{% extends 'base.html.twig' %}

{% block localstyle%}
<style>
    .card-body div {
        display:flex;
    }

    .card-body div label {
        width: 30%;
    }
</style>
{% endblock %}

{% block body %}


{{ form_start(form) }}
    {{ form_widget(form.submit) }}

    <div class="row">
        {% for section in dicos %}
            <div class="{{section.style}}">
                <div class="card mt-3 ">
                    <div class="card-header">
                        <h5>{{section.label}}</h5>
                    </div>
                    <div id="{{section.id}}" class="card-body">

                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{{ form_end(form) }}

{% endblock %}


{% block localscript %}
<script>
    function moveToSection() {
        $('[data-section]').each(function() {
            inputLabel = $(this).parent();
            section = $(this).data('section');
            inputLabel.appendTo('#'+section);
            console.log('Section trouvée:', section);
        });

        $('label.required').each(function () {
            // Évite de doubler les *
            if (!$(this).text().includes('*')) {
                $(this).append(' *');
            }
        });        
    }

    function cardHideShow() {
        $('.card-body').each(function () {
            const $cardBody = $(this);
            const $children = $cardBody.children();
            $cardBody.parent().parent().show();

            const allHidden = $children.length > 0 && $children.filter(':visible').length === 0;
            if (allHidden) {
                $cardBody.parent().parent().hide();
            }
        });            
    }

    function refreshHideShow() {
        $('.slave').each(function() {
            slave = $(this);
            slaveId = slave.attr('id');

            // Déterminer si le champs est required
            isrequired = $('label[for="' + slaveId + '"]').hasClass('required');
            console.log(slaveId);
            console.log(isrequired);

            // Rechercher son maitre
            masterArray = slave.data('slave').split("=");
            master = $('[data-master="'+masterArray[0]+'"]')

            // Déterminer si le slave doit etre afficher
            toshow=false;
            if(master.is(':visible')&&master.val()===masterArray[1]) {
                toshow=true;
            }

            if(toshow) {
                slave.parent().show();
            }
            else {
                slave.parent().hide();
            }

            cardHideShow();
        });



    }

    $(document).ready(function() {

        $('.master').on('change', function () {
            console.log($(this).val());
            refreshHideShow();
        });

        moveToSection();        
        refreshHideShow();
    });
</script>
{% endblock %}