<div class="box-form clearfix">

    <h4>{{ 'Affecter par sous-famille' | trad }}</h4>

    <div class="colonne2" id="divSfam">
        <form method="post" name="form_ssfamille" id="form_ssfamille">	
            <table class="table table-hover" style="margin-bottom:0px;">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">
                            {{ sortTable({
                                key : 'SOUSFAMI',
                                value : post.tri_SOUSFAMI,
                                title : 'Code sous-famille' | trad,
                                div : 'divSfam',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}),
                                formName : 'form_ssfamille',

                            }) }}
                        </th>
                        <th scope="col">
                            {{ sortTable({
                                key : 'DESIGNAT',
                                value : post.tri_DESIGNAT,
                                title : 'Libellé' | trad,
                                div : 'divSfam',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}),
                                formName:  'form_ssfamille',

                            }) }}
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="recherche">
                        <td>
                            {{ filter('TABLE', {
                                key : 'SOUSFAMI',
                                value : post.filter_SOUSFAMI,
                                div : 'divSfam',
                                formName : 'form_ssfamille',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion})
                            }) }}
                        </td>
                        <td>
                            {{ filter('TABLE', {
                                key : 'DESIGNAT',
                                value : post.filter_DESIGNAT,
                                div : 'divSfam',
                                formName : 'form_ssfamille',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion})
                            }) }}
                        </td>
                    </tr>
                    {% for ssFamille in listeSsFamille %}
                        <tr onClick="refreshCaracSfam('{{ssFamille.SOUSFAMI}}');">
                            <td>{{ ssFamille.SOUSFAMI }}</td>
                            <td>{{ ssFamille.DESIGNAT }}</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>

            {{ paginations(path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}),infoPaginationSFA.nombreDePage, infoPaginationSFA.page, infoPaginationSFA.post, 'divSfam',0,0,'2') }}
        </form>
    </div>

    <div class="colonne2 last" id="divSfamCarac">
        <form method="post" name="form_carac_sfam" id="form_carac_sfam">	
            <span id="sfa_countSelected">
                {% for save in post.selected_carac_forSfam %}
                    <input type="hidden" id="sub_carac_forSfam{{save}}" name="selected_carac_forSfam[]" value="{{save}}"/>
                {% endfor %}
            </span>
            <table class="table table-hover" style="margin-bottom:0px;">
                <thead class="thead-dark">
                    <tr>
                        <th scope="col">
                            {{ sortTable({
                                key : 'CAR_ID',
                                value : post.tri_CAR_ID,
                                title : 'Code caractéristique' | trad,
                                div : 'divSfamCarac',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}),
                                formName : 'form_carac_sfam',

                            }) }}
                        </th>
                        <th scope="col">
                            {{ sortTable({
                                key : 'CAR_DES',
                                value : post.tri_CAR_DES,
                                title : 'Libellé caractéristique' | trad,
                                div : 'divSfamCarac',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}),
                                formName : 'form_carac_sfam',

                            }) }}
                        </th>

                        <th scope="col" width='55px'>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="recherche">
                        <td>
                            {{ filter('TABLE', {
                                key : 'CAR_ID',
                                value : post.filter_CAR_ID,
                                div : 'divSfamCarac',
                                formName : 'form_carac_sfam',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion})
                            }) }}
                        </td>
                        <td>
                            {{ filter('TABLE', {
                                key : 'CAR_DES',
                                value : post.filter_CAR_DES,
                                div : 'divSfamCarac',
                                formName : 'form_carac_sfam',
                                path : path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion})
                            }) }}
                        </td>
                        <td>
                            <input name="selectAll" type="checkbox"
                                data-checkall-input="tab-sfam" 
                                class="form-control checkbox"
                            >
                            <span class='infos_tooltip left'>{{ 'Tout sélectionner' | trad }}</span>
                        </td>
                    </tr>
                    {% for gamme in listeCaracSfam %}
                        <tr>
                            <td>{{ gamme.CAR_ID }}</td>
                            <td>{{ gamme.CAR_DES }}</td>
                            <td>
                                <input type="checkbox" 
                                    class="form-control checkbox" 
                                    data-change-carac-sfam="true"
                                    data-checkall="tab-sfam"
                                    id="input_carac_forSfam_{{ codeSfam }}{{ spliter() }}{{ gamme.CAR_ID }}" 
                                    name="carac_forSfam[]"
                                    value="{{codeSfam}}{{ spliter() }}{{ gamme.CAR_ID }}"
                                    {{ codeSfam~spliter()~gamme.CAR_ID in (post.selected_carac_forSfam ?? []) ? 'checked' }}
                                />
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </form>
    </div>
    
</div>

<script>
	document.addEventListener('click',(event) => {
		var target = event.target;
		if (!(target instanceof HTMLElement) ) {
			return;
		}

        if (target.hasAttribute('data-change-carac-sfam')){
            var value = $(target).val();
            if (target.checked) {
                $('#countSelected').append('<input type="hidden" id="carac_forSfam'+value+'" name="selected_carac_forSfam[]" value="'+value+'"/>');
                $('#sfa_countSelected').append('<input type="hidden" id="sub_carac_forSfam'+value+'" name="selected_carac_forSfam[]" value="'+value+'"/>');
            } else {
                $('#carac_forSfam'+value).remove();
                $('#sub_carac_forSfam'+value).remove();
            }
            return;
        }

    });

    function refreshCaracSfam(sfam)
    {
        $.ajax({
            url: '{{ path('Catalogue.AffectationTypeArticle.parSsfamilleGamme', {idVersion:idVersion}) }}',
            type: 'POST',
            dataType: 'html',
            data : $('#form_finalsubmit').serialize()+'&codeSfam='+sfam,
            success: function (htmlData) {
                refreshFonction('divSfamCarac', htmlData);
            }
        });	
    }
</script>