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

{% block title %}Modifier une transaction{% endblock %}

{% block body %}
<div class="container">
    <div class="row">
        <div class="col-md-10"><h1>Modifier la transaction</h1></div>
        <div class="col-md-2">
            <br />
            <p class="text-center"><a href="{{ path('transaction_index', {'account_id': account_id}) }}" class="btn btn-outline-secondary">Retour</a></p>
        </div>
    </div>
    
    {{ include('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 = {{ transaction.category.parent.id }}
        $('#transaction_parent option[value="'+parentId+'"]').prop('selected', true);


        // you may need to change this code if you are not using Bootstrap Datepicker
        $('.js-datepicker').datepicker({
            format: 'dd/mm/yyyy',
            language: 'fr',
            startView: 'month',
            todayHighlight: true,
            weekStart: 1,
        });

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

    $('#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
            $('#transaction_category').empty();

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

</script>
{% endblock %}