{% extends '@ajax-layout/layout.twig' %}

{% block body %}
    <div class="popupExport">
        {% set formName = 'cahier_inventaire_form' %}
        {% set path = path('Stock.CahierInventaire.importerForm', { noInv: noInv, action: action }) %}
        <form method="post" name="{{ formName }}" id="{{ formName }}" action="{{ path('Stock.CahierInventaire.importer', { noInv: noInv }) }}">
            <div class="row">
                <div id="genetableau">
                    <label style="position: relative;" for="SITE">{{ 'Site' | trad }}</label>
                    <table class="table" id="tableau">
                        <thead class="thead-dark">
                        <tr>
                            <th>{{ 'Choix' | trad }}</th>
                            <th>{{ triTable('SITE',  infoPagination.filter.tri_SITE, 'Code' | trad, 'genetableau', path, formName) }}</th>
                            <th>{{ triTable('DESIGN',  infoPagination.filter.tri_DESIGN, 'Libellé' | trad, 'genetableau', path, formName) }}</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th></th>
                            <th>{{ filterTable('SCI#point#SITE', infoPagination.filter['filter_SCI#point#SITE'], '', 'genetableau', path, formName) }}</th>
                            <th>{{ filterTable('STO#point#DESIGN', infoPagination.filter['filter_STO#point#DESIGN'], '', 'genetableau', path, formName) }}</th>
                        </tr>
                        {% for siteStock in sitesStock %}
                            <tr>
                                <td>
                                    <label>
                                        <input type="radio" name="SITE" value="{{ siteStock.SITE }}">
                                    </label>
                                </td>
                                <td>{{ siteStock.SITE }}</td>
                                <td>{{ siteStock.DESIGN }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <p id="error_text" class="error"></p>
                </div>
            </div>
            <div class="row">
                {{ inputAdvance('FILE', { 'titre': 'Fichier' | trad, 'name' : 'FILE', 'obligatoire': true }) }}
                <input type="hidden" name="confirm" value="0">
            </div>
        </form>
        {{ paginations(
            path,
            infoPagination.nombreDePage,
            infoPagination.page,
            infoPagination.post,
            'modal-body'
        ) }}
    </div>
    <div class="modal-footer">
        <button class="secondaire" onclick="desactivePopup();">{{'Annuler' | trad }}</button>
        <button class="principal button_right last mr-0" onclick="upload()">{{ 'Importer' | trad }}</button>
    </div>
    <script type="text/javascript" src="{{ baseUrl('js/Modules/Stock/uploadFile.js') }}"></script>
    <script>
        function upload () {
            const siteChoice = $('#{{ formName }}').find('input[name="SITE"]:checked').val();

            if (siteChoice === undefined) {
                $('#error_text').text('{{ 'Vous devez sélectionner un site' }}');

                return;
            }

            uploadFile($('#{{ formName }}'));
        }

        $('#importFILE').on('change', () => {
            $('#errors').text('');
            $('#file-wrapFILE').removeClass('error white-tooltip');
        });

        $('input[name="SITE"]').on('change', () => {
            $('#error_text').text('');
        })
    </script>
{% endblock %}