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

{% block title 'Create A WorkPlan Target' %}

{% block content %}
{{ include(workplan_links, {'show_search': false}, with_context = false) }}

<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="col-lg-5 center center-text">
            <span class="label">Create A WorkPlan Target</span>
        </div>
    </div>
    <div class="panel-body">
        {{ form_start(form) }}
        {{ form_row(form.output) }}
        {{ form_row(form.detail) }}
        {{ form_row(form.budget) }}  
        {{ form_row(form.position) }}
        {{ form_row(form.selectedActivityBlocks) }}
        {{ form_end(form) }}
    </div>
</div>
{% endblock %}

{% block formjscripts %}
{{ parent() }}

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('change', "#target_output", function(e){
            var data = {
                output: $(this).val()
            };
            
            $.ajax({
                type: 'post',
                url: '{{ path("fetch_activity_blocks") }}',
                data: data,
                success: function(data) {
                    var block_selector = document.getElementById('target_selectedActivityBlocks');

                    for(var x = block_selector.options.length - 1; x >= 1; x--)
                    {
                        block_selector.remove(x);
                    }

                    for (var i = 0; i < data.length; i++) {
                        var option = document.createElement('option');
                        option.value = data[i].id;
                        option.text = data[i].name;
                        block_selector.add(option);
                    }
                }
            });
        });
    });
</script>
{{ form_javascript(form) }}
{% endblock %}