{% for message in app.flashes('error-form-fec') %}
    <div class="alert alert-danger">
        <i class="icon fas fa-exclamation-triangle"></i> {{ message|raw }}
    </div>
{% endfor %}

<div class="card">
    <div class="card-header"><h3 class="card-title">Ajouter un FEC</h3></div>

    {% if client.getFecs|length > 0 %}
        <div class="alert alert-warning alert-sm ml-2 mr-2">
            <i class="icon fas fa-exclamation-triangle"></i><strong>Attention !</strong> <br>
            Si un FEC existe déjà avec cette date de clôture, il sera écrasé.
        </div>
    {% endif %}

    <div class="card-body">
        <div class="row">
            <div class="{% if api_ready %}col-md-6 pr-lg-5 {% else %} col-12{% endif %}">
                {{ form_start(form_fec, {
                    'attr': {
                        'id': 'form_fec_add',
                        'class': 'dropzone',
                        'novalidate': 'novalidate',
                        'enctype': 'multipart/form-data'
                    }
                }) }}

                {# Titre ou instructions #}
                <h6 class="d-flex align-items-center mb-3 text-dark">
                    <i class="fas fa-upload mr-2 text-primary"></i>
                    Glissez-déposez vos fichiers FEC ici :
                </h6>

                {# Conteneur pour afficher les aperçus Dropzone, placé ici avant le bouton submit #}
                <div class="dz-preview-container"></div>

                {# Zone Dropzone (message par défaut) #}
                <div class="dz-message">
                    Déposez vos fichiers ici ou cliquez pour sélectionner
                </div>

                {# Token CSRF et client #}
                <input type="hidden" name="client_fec[client]" value="{{ client.id }}">
                {{ form_row(form_fec._token) }}

                {# Bouton de soumission #}
                <a class="btn btn-primary mt-3" type="button" href="?tab=fec">
                    {{ button_label|default('Valider') }}
                </a>

                {{ form_end(form_fec, { render_rest: false }) }}
            </div>




            {% if api_ready %}
                <div class="col-md-6 pl-5 col-exercices-api border-left" data-client-id="{{ client.id }}">
                    <h6 class="d-flex align-items-center mb-3">
                        <i class="fas fa-link mr-2 text-primary"></i>
                        Importer le FEC depuis l'API :
                    </h6>

                    <div class="fec-api-wrapper" >
                        <div class="row ">
                            {% if connections is iterable and connections|length > 0 %}
                                <div id="accordion" class="w-100">
                                    {% for connection in connections %}
                                        <div class="card">
                                            <div class="card-header" id="heading{{ loop.index }}">
                                                <h5 class="mb-0">
                                                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapse{{ loop.index }}"
                                                            aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="collapse{{ loop.index }}">
                                                        <i class="fas fa-chevron-down mr-2 rotate"></i> {{ connection.integration }}
                                                    </button>
                                                </h5>
                                            </div>
                                            <div id="collapse{{ loop.index }}" class="collapse {{ loop.first ? 'show' : '' }}"
                                                 aria-labelledby="heading{{ loop.index }}" data-parent="#accordion">
                                                <div class="card-body">

                                                    {% if exercices[connection.connectionid] %}
                                                        {% if exercices[connection.connectionid].success is defined and not exercices[connection.connectionid].success %}
                                                            {{ exercices[connection.connectionid].message }}
                                                        {% else %}
                                                            <form id="exerciceForm" action="{{ path('app_client_import_exercice_api', {'id':client.id}) }}" method="post">
                                                                <div class="form-group">
                                                                    <label for="exercices">Sélectionner un ou plusieurs exercices :</label>
                                                                    <div id="exercices">
                                                                        {% for exercice in exercices[connection.connectionid] %}
                                                                            <div class="form-check">
                                                                                <input class="form-check-input" type="checkbox" name="exercices[]" value="{{ exercice.name }}" id="exercice_{{ exercice.name }}">
                                                                                <label class="form-check-label" for="exercice_{{ exercice.name }}">
                                                                                    Exercice {{ exercice.name }} : du {{ exercice.start|date('d/m/Y') }} au {{ exercice.end|date('d/m/Y') }}
                                                                                </label>
                                                                            </div>
                                                                        {% endfor %}
                                                                    </div>
                                                                </div>
                                                                <input type="hidden" name="folder_id" value="{{ (exercices[connection.connectionid]|first).folder_id }}">
                                                                <input type="hidden" name="connectionid" value="{{ connection.connectionid }}">
                                                                <button type="submit" class="btn btn-primary mt-3">
                                                                    <i class="fas fa-download mr-2"></i> Importer les exercices
                                                                </button>
                                                            </form>
                                                        {% endif %}
                                                    {% else %}
                                                        Aucun exercice trouvé.
                                                    {% endif %}

                                                </div>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            {% endif %}




                            {#{% if exercices is iterable and exercices|length > 0 %}
                                <form id="exerciceForm" action="{{ path('app_client_import_exercice_api', {'id':client.id}) }}" method="post">
                                    <div class="form-group">
                                        <label for="exercices">Sélectionner un ou plusieurs exercices :</label>
                                        <div id="exercices">
                                            {% for exercice in exercices %}
                                                <div class="form-check">
                                                    <input class="form-check-input" type="checkbox" name="exercices[]" value="{{ exercice.exercice_id }}" id="exercice_{{ exercice.exercice_id }}">
                                                    <label class="form-check-label" for="exercice_{{ exercice.exercice_id }}">
                                                        Exercice {{ exercice.name }} : du {{ exercice.period_start|date('d/m/Y') }} au {{ exercice.period_end|date('d/m/Y') }}
                                                    </label>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                    <input type="hidden" name="company_id" value="{{ exercices[0].company_id }}">
                                    <button type="submit" class="btn btn-primary mt-3">
                                        <i class="fas fa-download mr-2"></i> Importer les exercices
                                    </button>
                                </form>
                                <script>
                                    $(document).ready(function() {
                                        $('body').on('submit', '#exerciceForm', function(event) {
                                            // Vérifie si au moins une checkbox est cochée
                                            if ($('input[name="exercices[]"]:checked').length === 0) {
                                                alert('Veuillez sélectionner au moins un exercice.');
                                                event.preventDefault(); // Empêcher la soumission du formulaire
                                            } else {
                                                $('#exerciceForm button[type="submit"]').prop('disabled', true);
                                            }
                                        });
                                    });
                                </script>

                            {% elseif client.getApi().isAsync() %}
                                <div id="" class="text-center w-100 py-4">
                                    <i class="fas fa-spinner fa-spin fa-3x text-primary"></i>
                                    <p class="mt-2">Chargement en cours...</p>
                                </div>
                                <script>
                                    $(document).ready(function() {
                                        loadExercices({{ client.id }});
                                    });
                                </script>
                            {% else %}
                                <p class="text-danger">
                                    {{ exercices }}
                                </p>
                            {% endif %}#}
                        </div>

                    </div>

                </div>
            {% endif %}
        </div>
    </div>
</div>