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


{% block title %}Créer une transaction{% endblock %}

{% block body %}
<div class="modal fade" id="generateModal" tabindex="-1" role="dialog" aria-labelledby="generateModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="generateModalLabel">Saisir le nom du nouveau Tiers</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" name="outsider" action="{{ path('new_outsider') }}">
            <div class="modal-body">
                <input type="text" name="new_outsider" id="new_outsider">
                <input type="hidden" name="account_id" value="{{ account_id }}" />
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button type="submit" class="btn btn-primary" id="add_outsider">Ajouter</button>
            </div>
            </form>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-5"><h1>Créer une transaction</h1></div>
        <div class="col-md-5 text-center align-middle">
            <br />
            <form method="post" name="current_transaction" action="{{ path('new_current_transaction') }}">
                <select name="current_transactions" id="current_transactions" onchange="this.form.submit()">
                    <option>Sélectionner une transaction courante</option>
                    {% for current_transaction in current_transactions %}
                        <option value="{{ current_transaction.id }}">{{ current_transaction.issuerAccount.bank ~ ' ' ~ current_transaction.outsider.name ~ ' ' ~ current_transaction.category.name}}</option>
                    {% endfor %}
                </select>
                <input type="hidden" name="account_id" value="{{ account_id }}" />
            </form>
        </div>
        <div class="col-md-2 text-right">
            <br />
            <a href="{{ path('transaction_index', {'account_id': account_id}) }}"  class="btn btn-outline-secondary">Retour</a>
        </div>
    </div>
    <br />

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

        // 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>');
            })
        });
    });


    {# $('#add_outsider').click(function() {
    ​
        //Envoi à l'API
        var data = {
            'outsider_name': $('#new_outsider')
        };

        var request = $.ajax({
            url: "{{ path('api_add_outsider') }}",
            type: "post",
            data: data
        });

        //Action quand la requête se termine correctement
        request.done(function (textStatus, jqXHR){
            alert('OK');
        });

        //Action quand la requête à une erreur
        request.fail(function (jqXHR, textStatus, errorThrown){
            alert('Erreur');
        });
    ​
    }); #}
</script>
{% endblock %}