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

{% block title pageTitle %}

{% block content %}
<div class="panel panel-primary">
    <div class="panel-heading">
        <div class="col-md-6 center center-text">
            <span class="label">{{ pageTitle }}</span>
        </div>
    </div>
    <div class="panel-body">
        {{ form_start(form) }}
        {{ form_row(form.project) }}
        {{ form_row(form.donor) }}
        {{ form_row(form.amount) }}
        {{ form_row(form.receivedOn) }}
        {{ form_row(form.accountsClass) }}
        {{ form_row(form.accountsSubClass) }}
        {{ form_rest(form) }}
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $(document).ready(function() {
        $(".cls_selector").change(function(){
            var data = {
                class: $(this).val()
            };

            $.ajax({
                type: 'post',
                url: '{{ path("fetch_subclasses") }}',
                data: data,
                success: function(data) {
                    var subclass_selector = document.getElementById('projectcontributor_accountsSubClass');

                    for(var x = subclass_selector.options.length - 1; x >= 1; x--)
                    {
                        subclass_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;
                        subclass_selector.add(option);
                    }
                }
            });
        });
    });
</script>
{{ form_javascript(form) }}
{% endblock %}