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

{% block body %}
    {% form_theme form 'bootstrap_3_horizontal_layout.html.twig' %}  
    <h1>PlanificacionSeccion creation</h1>
     
    {{ form_start(form) }}
    {{ form_row(form.seccion) }}
    {{ form_row(form.idtemaUc) }}
    
        <ul class="contenido" data-prototype="{{ form_widget(form.contenido.vars.prototype)|e('html_attr') }}">

        </ul>

        <ul class="objetivoEspecifico" data-prototype="{{ form_widget(form.objetivoEspecifico.vars.prototype)|e('html_attr') }}">

        </ul>

        <ul class="estrategia" data-prototype="{{ form_widget(form.estrategia.vars.prototype)|e('html_attr') }}">

        </ul>

        <ul class="evaluacion" data-prototype="{{ form_widget(form.evaluacion.vars.prototype)|e('html_attr') }}">

        </ul>
        
        <input type="submit" value="Create" />
    {{ form_end(form) }}

    <ul>
        <li>
            <a href="{{ path('ceapp_docente_planificacion_index') }}">Back to the list</a>
        </li>
    </ul>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script type="text/javascript">
        
        var $collectionHolder;

        // setup an "add a tag" link
        var $addEspecificoLink = $('<a href="#" class="add_especifico_link">Añadir Objetivos Especificos</a>');
        var $addContenidoLink = $('<a href="#" class="add_contenido_link">Añadir conceptos</a>');
        var $addEstrategiaLink = $('<a href="#" class="add_estrategia_link">Añadir estrategias</a>');
        var $addEvaluacionLink = $('<a href="#" class="add_evaluacion_link">Añadir Evaluaciones</a>');
        var $RemoveContenidoLink = $('<a href="#" class="remove_contenido_link">Quitar Conceptos</a>');

        var $newLinkLiContenido = $('<li></li>').append($addContenidoLink);
        var $newLinkLiEspecifico = $('<li></li>').append($addEspecificoLink);
        var $newLinkLiEstrategia = $('<li></li>').append($addEstrategiaLink);        
        var $newLinkLiEvaluacion = $('<li></li>').append($addEvaluacionLink);
        
        
        jQuery(document).ready(function() {
            // Get the ul that holds the collection of tags
            $contenidoHolder = $('ul.contenido');
            $especificoHolder = $('ul.objetivoEspecifico');
            $estrategiaHolder = $('ul.estrategia');
            $evaluacionHolder = $('ul.evaluacion');
            // add the "add a tag" anchor and li to the tags ul
            $contenidoHolder.append($newLinkLiContenido);
            $especificoHolder.append($newLinkLiEspecifico);
            $estrategiaHolder.append($newLinkLiEstrategia);
            $evaluacionHolder.append($newLinkLiEvaluacion);

            // count the current form inputs we have (e.g. 2), use that as the new
            // index when inserting a new item (e.g. 2)
            $contenidoHolder.data('index', $contenidoHolder.find(':input').length);
            $especificoHolder.data('index', $especificoHolder.find(':input').length);
            $estrategiaHolder.data('index', $estrategiaHolder.find(':input').length);
            $evaluacionHolder.data('index', $evaluacionHolder.find(':input').length);

            $addContenidoLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addContenidoForm($contenidoHolder, $newLinkLiContenido);
            });
            
            $addEspecificoLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addEspecificoForm($especificoHolder, $newLinkLiEspecifico);
            });
            
            
            $addEstrategiaLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addEstrategiaForm($estrategiaHolder, $newLinkLiEstrategia);
            });
            
            $addEvaluacionLink.on('click', function(e) {
                // prevent the link from creating a "#" on the URL
                e.preventDefault();

                // add a new tag form (see next code block)
                addEvaluacionForm($evaluacionHolder, $newLinkLiEvaluacion);
            });
            
                       
            
            function addContenidoForm($contenidoHolder, $newLinkLiContenido) {
                 // Get the data-prototype explained earlier
                    var prototype = $contenidoHolder.data('prototype');

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

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

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

                    // Display the form in the page in an li, before the "Add a tag" link li
                    var $newFormLiContenido = $('<li></li>').append(newFormContenido);

                    // also add a remove button, just for this example
                    $newFormLiContenido.append('<a href="#" class="remove-tag">x</a>');

                    $newLinkLiContenido.before($newFormLiContenido);

                    // handle the removal, just for this example
                    $('.remove-tag').click(function(e) {
                        e.preventDefault();

                        $(this).parent().remove();

                        return false;
                    });
               
                
            }
            
            
            
            function addEspecificoForm($especificoHolder, $newLinkLiEspecifico) {
                 // Get the data-prototype explained earlier
                    var prototype = $especificoHolder.data('prototype');

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

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

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

                    // Display the form in the page in an li, before the "Add a tag" link li
                    var $newFormLiEspecifico = $('<li></li>').append(newFormEspecifico);

                    // also add a remove button, just for this example
                    $newFormLiEspecifico.append('<a href="#" class="remove-tag">x</a>');

                    $newLinkLiEspecifico.before($newFormLiEspecifico);

                    // handle the removal, just for this example
                    $('.remove-tag').click(function(e) {
                        e.preventDefault();

                        $(this).parent().remove();

                        return false;
                    });
               
                
            }
            
            function addEstrategiaForm($estrategiaHolder, $newLinkLiEstrategia) {
                 // Get the data-prototype explained earlier
                    var prototype = $estrategiaHolder.data('prototype');

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

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

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

                    // Display the form in the page in an li, before the "Add a tag" link li
                    var $newFormLiEstrategia = $('<li></li>').append(newFormEstrategia);

                    // also add a remove button, just for this example
                    $newFormLiEstrategia.append('<a href="#" class="remove-tag">x</a>');

                    $newLinkLiEstrategia.before($newFormLiEstrategia);

                    // handle the removal, just for this example
                    $('.remove-tag').click(function(e) {
                        e.preventDefault();

                        $(this).parent().remove();

                        return false;
                    });
               
                
            }
            
            
            
            function addEvaluacionForm($evaluacionHolder, $newLinkLiEvaluacion) {
                 // Get the data-prototype explained earlier
                    var prototype = $evaluacionHolder.data('prototype');

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

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

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

                    // Display the form in the page in an li, before the "Add a tag" link li
                    var $newFormLiEvaluacion = $('<li></li>').append(newFormEvaluacion);

                    // also add a remove button, just for this example
                    $newFormLiEvaluacion.append('<a href="#" class="remove-tag">x</a>');

                    $newLinkLiEvaluacion.before($newFormLiEvaluacion);

                    // handle the removal, just for this example
                    $('.remove-tag').click(function(e) {
                        e.preventDefault();

                        $(this).parent().remove();

                        return false;
                    });
               
                
            }
            
            
            
        });
        
        
        
        
        
        


        
    </script>
{% endblock %}