{% extends 'adminBase.html.twig' %}
{% form_theme form _self %}

{% block title %}Création d'un modèle{% endblock %}

    {% block stylesheets %}
    {% endblock %}

{% block content %}
    <div class="container">
        <h1>Créer un modèle</h1>
        {{ form_start(form) }}
        {{ form_row(form.name) }}
        {{ form_row(form.description) }}
        {{ form_row(form.status) }}
        {{ form_row(form.reverLink) }}
        {{ form_row(form.imageFile, {
            attr: {
                'placeholder': 'Selectionnez une image'
            }
        }) }}
        {{ form_row(form.price) }}
        {{ form_row(form.place) }}
        {{ form_row(form.images) }}
        <div>
            <button type="submit" class="btn btn-success">Enregistrer</button>
        </div>
        {{ form_end(form) }}
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
        // $('.custom-file-input').on('change', function(event) {
        //     var inputFile = event.currentTarget;
        //     $(inputFile).parent()
        //         .find('.custom-file-label')
        //         .html(inputFile.files[0].name);
        // });


        document.querySelectorAll('button[data-action="delete"]').forEach(function (button) {
            button.addEventListener('click', function () {
                this.parentNode.remove();
            })
        })


        document.querySelector('#add-image').addEventListener('click', function () {
            const prototype = document.querySelector('#model_images').getAttribute("data-prototype");
            const index = document.querySelectorAll('button[data-action="delete"]').length;
            const html = prototype.replace(/__name__/g, index);
            console.log(html);
            document.querySelector('#model_images').insertAdjacentHTML('beforeend', html);

            const buttons = document.querySelectorAll('button[data-action="delete"]');
            const button = buttons[buttons.length - 1];
            //autre manière de l'écrire :
            const button2 = document.querySelector("#model_images > div:last-child button");

            button.addEventListener("click", function () {
                this.parentNode.remove();
            })
        })
    </script>

{% endblock %}

{% block _model_images_row %}
    <strong>Modifier la galerie</strong>
    {{ form_widget(form) }}
    <button type="button" class="btn btn-primary" id="add-image">Ajouter une image</button>
{% endblock %}

{% block _model_images_entry_row %}
    <div>
        {{ form_widget(form) }}
        <button type="button" class="btn btn-danger" data-action="delete">Supprimer</button>
        <hr>
    </div>
{% endblock %}