{% extends "::baseEmpty.html.twig" %}

{% block title %}App:Map:edit{% endblock %}

{% block body %}
   <h3>Choix de l'action</h3>
    <div class="container">
        <a  href="{{ path('edit_map') }}"  type="button" class="btn btn-primary">Polygone</a>
        <a  href="" type="button" class="btn btn-secondary">Ligne</a>
    </div>

{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script>
    var $collectionHolder;
	var $collectionStandHolder
 // setup an "add a tag" link
 var $addTagButton = $('<button type="button" class="btn add_exposant_link" ><i class="	fa fa-plus"></i>&nbsp;Ajouter un exposant</button>');
 var $newLinkLi = $('<li  class="text-right" style= "list-style-type: none;""></li>').append($addTagButton);
 var $backToShow = $('.backToShow');
// $(document).ready(function() {
     // Get the ul that holds the collection of exhibitors
     $collectionHolder = $('ul.Exposants');


 	console.log($newLinkLi );
     
     //get the div that holds the collection of stands
  // add a delete link to all of the existing tag form li elements
     $collectionHolder.find('li').each(function() {
    	 addExhibitorFormDeleteLink($(this));
     });
     // add the "add a tag" anchor and li to the tags ul
     $collectionHolder.append($newLinkLi);
  
     // count the current form inputs we have (e.g. 2), use that as the new
     // index when inserting a new item (e.g. 2)
     $collectionHolder.data('index', $collectionHolder.find(':input').length);

     $addTagButton.on('click', function(e) {
         // add a new tag form (see next code block)
         addExposantForm($collectionHolder, $newLinkLi);
     });

     $backToShow.on('click', function(e) {
    	 window.location.replace("/map/show");
         
     });
 //});

 

	function addExposantForm($collectionHolder, $newLinkLi) {
	    // Get the data-prototype explained earlier
	    var prototype = $collectionHolder.data('prototype');

	    // get the new index
	    var index = $collectionHolder.data('index');

	    var newForm = prototype;
	    // You need this only if you didn't set 'label' => false in your tags field in TaskType
	    // Replace '__name__label__' in the prototype's HTML to
	    // instead be a number based on how many items we have
	    // newForm = newForm.replace(/__name__label__/g, index);

	    // Replace '__name__' in the prototype's HTML to
	    // instead be a number based on how many items we have
	    newForm = newForm.replace(/__name__/g, index);

	    // increase the index with one for the next item
	    $collectionHolder.data('index', index + 1);

	    // Display the form in the page in an li, before the "Add a tag" link li
	    var $newFormLi = $('<li  class="border border-primary p-3 mb-2 " style= "list-style-type: none;"></li>').append(newForm);
	    $newLinkLi.before($newFormLi);
	 // add a delete link to the new form
	    addExhibitorFormDeleteLink($newFormLi);
	}
	
	function addExhibitorFormDeleteLink($ExhibitorFormLi) {
	    var $removeFormButton = $('<div class="text-center"><button type="button" class="btn"><i class="fa fa-trash"></i></button></div>');
	    $ExhibitorFormLi.append($removeFormButton);

	    $removeFormButton.on('click', function(e) {
	        // remove the li for the tag form
	        $ExhibitorFormLi.remove();
	    });
	}
	
    </script>
{% endblock %}