{% extends 'base.html.twig' %}
{% import _self as formMacros %}

{% block title %}Ajouter un exercice{% endblock %}

{% block titre_page %}Ajouter un exercice{% endblock %}
{% block resume_page %}Cela permet de tracer les différentes interventions qui ont été faites dans la troupe{% endblock %}
{% block description_page %}Pour créer :
    <ul>
        <li>Choisir un nom, type et description de l'exercice</li>
        <li>Choisir le nombre de joueur, une durée moyenne et une photo représentative de l'exercice</li>
    </ul>
{% endblock %}

{% macro printItemRow(formItem) %}
    <div class="row mb-2">
        <div class="col-4">{{ form_widget(formItem.name) }}</div>
        <div class="col-7">{{ form_widget(formItem.description) }}</div>
        <div class="col-1">
            <a href="#" class="js-remove-item action-link">
                <i class="ti-trash"></i>
            </a>
        </div>
    </div>
{% endmacro %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('exercise_add'), 'attr': {'class': 'row g-3'}}) }}
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.name, 'Nom de l\'exercice', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.name, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.type, 'Type d\'exercice', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.type, {'attr': {'class': 'form-select'}}) }}
                        </div>
                        <div class="col-xs-12 mt-3">
                            {{ form_label(form.description, 'Description', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.description, {'attr': {'class': 'form-control'}}) }}
                        </div>
                        <div class="col-md-12 row">
                            <div class="col-md-4 mt-3">
                                {{ form_label(form.nbJoueursMin, 'Nbre de joueur min.', {'attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.nbJoueursMin, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-4 mt-3">
                                {{ form_label(form.nbJoueursMax, 'Nbre de joueur max.', {'attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.nbJoueursMax, {'attr': {'class': 'form-control'}}) }}
                            </div>
                            <div class="col-md-4 mt-3">
                                {{ form_label(form.duration, 'Temps (en minute)', {'attr': {'class': 'form-label'}}) }}
                                {{ form_widget(form.duration, {'attr': {'class': 'form-control'}}) }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="col-md-12">
                        {{ form_label(form.photo, 'Photo représentative', {'attr': {'class': 'form-label'}}) }}
                        {{ form_widget(form.photo, {'attr': {'class': 'form-control'}}) }}
                    </div>
                    <div class="col-md-12">
                        <div class="card-body row">

                            <h5 class="card-title">Variantes</h5>

                            <!-- Custom content -->
                            <div class="list-group row">
                                <div class="variants"
                                     data-index="{{ form.variants|length > 0 ?form.variants|last.vars.name + 1 : 0 }}"
                                     data-prototype="{{ formMacros.printItemRow(form.variants.vars.prototype)|e('html_attr') }}"
                                ></div>
                                <button type="button" class="add_variant btn btn-primary rounded-pill"
                                        data-collection-holder-class="variants"><i class="ti-plus"></i>Ajouter une
                                    variante
                                </button>
                            </div>
                            <!-- END : Custom content -->

                        </div>
                    </div>
                </div>

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

{% block javascripts %}
    <script type="text/javascript">
        window.addEventListener("DOMContentLoaded", async () => {
            const addFormToCollection = (e) => {
                const collectionHolder = document.querySelector('.' +
                    e.currentTarget.dataset.collectionHolderClass);
                const item = document.createElement('div');
                item.innerHTML = collectionHolder
                    .dataset
                    .prototype
                    .replace(
                        /__name__/g,
                        collectionHolder.dataset.index
                    );
                collectionHolder.appendChild(item);
                collectionHolder.dataset.index++;
            };

            document
                .querySelectorAll('.add_variant')
                .forEach(btn => {
                    btn.addEventListener("click", addFormToCollection)
                });

            $('.variants').on('click', '.js-remove-item ', function (e) {
                $(this).parent().parent().remove();
            });
        });
    </script>
{% endblock %}