{% extends 'base.html.twig' %}

{% block stylesheets %}
	{{parent() }}
{% endblock %}


{% block body %}
    <div id="menu-principal">
        <div style="text-align: justify;">
            <a class="change-page" type="button" href="{{ path('recup_liste_visites', {'token': token, 'userId': user_id }) }}"><<< Retour à la liste des visites</a>
        </div>
        <div>
            <a class="next-rapport" type="button" href="{{path('details_visite', {'planif': planif, 'numDevis' : num_devis, 'date' : date}) }}">Revenir au Devis</a>
        </div>
    </div>
    <div id="choix-camion">
        <a class="change-page" href="{{ path('form_camion', {'planif': planif, 'numDevis' : num_devis, 'date': date}) }}">Choisir les camions</a>
    </div>
    <div id="div-visites">
        Commentaire {{ position }} / {{ nombre_com_existants }}
    </div>

    <div id="div-btn-prev-next">
        <div>
            {% if(position > 1) %}
                <a class="change-page" href="{{ path('photo_commentaire', {'planif': planif, 'numDevis' : num_devis, 'position': position - 1, 'url_details':url_details, 'date' : date }) }}"><<< Commentaire précédent</a>
            {% endif %}
        </div>
        <div>
            {% if(position < nombre_com_existants or com_existant) %}
                <a class="next-rapport change-page" href="{{ path('photo_commentaire', {'planif': planif, 'numDevis' : num_devis, 'position': position + 1, 'url_details':url_details, 'date' : date}) }}">Commentaire suivant >>></a>
            {% endif %}
        </div>
    </div>
    
    <p dropzone-preview id="preview"> </p>

    {% if(com_existant) %}
        <br>
        {# <h2 id='name-photo' >{{ com_existant.nomPhoto }}</h2> #}
        {% if(com_existant.nomPhoto) != "" %}
            <center>
                <img id="photo-existante" src="../uploadedFiles/planif{{planif}}/{{ com_existant.nomPhoto }}">
            </center>
        {% endif %}
        {{ form_start(form, {'attr': {'id': 'myDropzone', 'class': 'police-taille-tel dropzone' }}) }}
            {{ form_row(form.description, {
                'value' : com_existant.commentaire,
            }) }}

            <input type="hidden" name="numDevis" value="{{ num_devis }}">
            <div id="div-btn-valider">
                <button type="submit" id="btn-valider">Valider</button>
            </div>
        {{ form_end(form) }}
    {% else %}
        {{ form_start(form, {'attr': {'id': 'myDropzone', 'class': 'police-taille-tel dropzone' }}) }}
            {{ form_row(form.description) }}

            <input type="hidden" name="numDevis" value="{{ num_devis }}">
            <div id="div-btn-valider">
                <button type="submit" id="btn-valider">Valider</button>
            </div>
        {{ form_end(form) }}
    {% endif %}
    
{% endblock %}

{% block javascripts %}
{{ parent() }}
    <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
    <script>
    Dropzone.options.myDropzone = {
        url: "{{ path('traitement_data', {'planif' : planif }) }}",
        dictDefaultMessage: "Sélectionner une photo",
        acceptedFiles: "image/*",
        maxFilesize: 102400,
        maxFiles: 1,
        thumbnailWidth: 500,
        addRemoveLinks: true,
        previewsContainer: '#preview',
        previewTemplate: `
            <div class="dz-preview dz-file-preview">
                <div class="dz-details">
                    <img data-dz-thumbnail/>
                </div>
                <div class="dz-error-message"><span data-dz-errormessage></span></div>
            </div>`,
        init: function(){ 
            this.on("addedfile", file =>{
                if(document.getElementById("photo-existante")){
                    document.getElementById("photo-existante").remove();
                }
            });
            
            this.on("maxfilesexceeded", file=>{
                this.removeAllFiles();
                this.addFile(file);
            });

            var leBouton = document.querySelector(".dz-button");
            if(leBouton){
                leBouton.classList.add("select-image");
            }

            
        },

        success: function(file) {
            console.log(file)
        }
    };
    </script>



{% endblock %}