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

{% block title %}Liste des Transactions Filtrées{% endblock %}

{% block body %}
<div class="container-fluid">
    <div class="transaction">
        <div class="row">
            <div class="col-md-8"><h1>Liste des Transactions Filtrées</h1></div>
            <div class="col-md-4 d-flex align-items-center justify-content-end">
                <a href="{{ path('account_index') }}" class="btn btn-outline-secondary">Retour</a>
            </div>
        </div>
        {{ form_start(filterForm) }}
        {{ form_row(filterForm._token) }}
            <div class="row">
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.fromDate, {'attr':{'class':'form-control js-datepicker'}}) }}
                </div>
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.toDate, {'attr':{'class':'form-control js-datepicker'}}) }}
                </div>
                <div class="mb-01 col-md-3">
                    {{ form_row(filterForm.compteEmetteur, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.compteRecepteur, {'attr':{'class':'form-control'}}) }}
                </div>
            </div>
            <div class="row">
                <div class="mb-0 col-md-4">
                    {{ form_row(filterForm.outsider, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-4">
                    {{ form_row(filterForm.parent, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-4">
                    {{ form_row(filterForm.category, {'attr':{'class':'form-control'}}) }}
                </div>
            </div>
            <div class="row">
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.minDebAmount, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.maxDebAmount, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.minCredAmount, {'attr':{'class':'form-control'}}) }}
                </div>
                <div class="mb-0 col-md-3">
                    {{ form_row(filterForm.maxCredAmount, {'attr':{'class':'form-control'}}) }}
                </div>
            </div>
            <div class="row">
                <div class="mb-0 col-md-12" align="center">
                    <button type="submit" class="btn btn-primary btn-block">Filtrer</button>
                </div>
            </div>
        {{ form_end(filterForm, {'render_rest': false}) }}

        <table class="table">
            <thead>
                <tr>
                    <th scope="col">CreationDate</th>
                    <th scope="col">Emetteur</th>
                    <th scope="col">Tiers / Receveur</th>
                    <th scope="col">Catégorie</th>
                    <th scope="col">Debit</th>
                    <th scope="col">Credit</th>
                    <th scope="col">Comment.</th>
                </tr>
            </thead>
            <tbody>
            {% for transaction in transactions %}
                {% if transaction.reconsile == 'Yes' %}
                    <tr class="table-secondary">
                {% elseif date(transaction.creationDate|date('ymd')) > date("now"|date('ymd')) %}
                    <tr class="table-warning">
                {% else %}
                    <tr>
                {% endif %}
                    <td>{{ transaction.creationDate ? transaction.creationDate|date('d/m/Y') : '' }}</td>
                    {% if transaction.issuerAccount %}
                        <td>{{ transaction.issuerAccount.bank }} / {{ transaction.issuerAccount.name }}</td>
                    {% else %}
                        <td>{{ transaction.issuerAccount.bank }} / {{ transaction.issuerAccount.name }}</td>
                    {% endif %}
                    {% if transaction.receiverAccount %}
                        <td>{{ transaction.receiverAccount.bank }} / {{ transaction.receiverAccount.name }}</td>
                    {% else %}
                        <td>{{ transaction.outsider.name ?? 'Anonyme' }}</td>
                    {% endif %}
                    <td>{{ transaction.category ? transaction.category.name }}</td>
                    <td align="right">
                        {% if transaction.debit %}
                            {% if transaction.receiverAccount %}
                                {% if transaction.receiverAccount.id != account_id %}
                                    <span class="text-danger">{{ transaction.debit|number_format(2, '.', ' ') }} €</span>
                                {% endif %}
                            {% else %}
                                <span class="text-danger">{{ transaction.debit|number_format(2, '.', ' ') }} €</span>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td align="right">
                        {% if transaction.credit %}
                            <span class="text-success">{{ transaction.credit ? transaction.credit|number_format(2, '.', ' ') }} €</span>
                        {% elseif transaction.receiverAccount %}
                            {% if transaction.receiverAccount.id == account_id %}
                                <span class="text-success">{{ transaction.debit|number_format(2, '.', ' ') }} €</span>
                            {% endif %}
                        {% endif %}
                    </td>
                    <td>
                        {% if transaction.comment %}
                            <a href="#" class="btn btn-sm btn-info" title="{{ transaction.comment }}"><span class="fa fa-info"></span></a>
                        {% endif %}
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="10">Aucune transaction trouvée</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        {# display navigation #}
        <div class="navigation">
            {{ knp_pagination_render(transactions) }}
        </div>
    </div>
</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>');
            })
        });
    });

</script>
{% endblock %}