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

{% block title %}Modifier une échéance{% endblock %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col-md-10"><h1>Modifier l'échéance</h1></div>
        <div class="col-md-2">
            <br />
            <p class="text-center"><a href="{{ path('recurring_transaction_index') }}" class="btn btn-outline-secondary">Retour</a></p>
        </div>
    </div>
    
    {{ include('recurring_transaction/_form.html.twig', {'button_label': 'Update'}) }}
</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
        //sauf dans le cas d'une modification
        var parentId = {{ recurring_transaction.category.parent.id }}
        $('#recurring_transaction_parent option[value="'+parentId+'"]').prop('selected', true);

        $('#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 %}