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


{% block title %}Créer une échéance{% endblock %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col-md-10"><h1>Créer une échéance</h1></div>
        <div class="col-md-2">
            <br />
            <p class="text-center"><a href="{{ path('recurring_transaction_index', {'account_id': account_id}) }}">Retour</a></p>
        </div>
    </div>

    {{ include('recurring_transaction/_form.html.twig', {'button_label': 'Create'}) }}
</div>
{% endblock %}

{% block javascripts %}
<script type="text/javascript">
    $( document ).ready(function() {
        //Supprime toutes les sous-catégories de la liste au chargement de la page
        $('#recurring_transaction_category').empty();

        $('#recurring_transaction_outsider').select2();
    });

    $('#recurring_transaction_parent').change(function() {

        //Récupère toutes les sous-catégories de la catégorie sélectionnée
        var request = $.ajax({
            url: "{{ path('api_subcategories') }}/"+$(this).val(),
            type: "get"
        });
        request.done(function(response) {
            //Vide la liste des sous-catégories à chaque sélection de catégorie
            $('#recurring_transaction_category').empty();

            //Ajoute les sous-catégories à la liste
            $.each(response, function(index,subcategory){
                $('#recurring_transaction_category').append('<option value="'+subcategory.id+'">'+subcategory.name+'</option>');
            })
        });
    });
</script>
{% endblock %}