{% extends 'Common/baseAdminPannel.html.twig' %}

    {% block title %}
        {{ 'Movimientos del monedero'}}
    {% endblock %}

    {% block body %}

        {{ form_start(filterForm, {'attr':{'data-remote':'true', 'data-method':'GET', 'data-url':filterForm.vars.action, 'data-replacecontent':'true' }}) }}
        <div class="row">
            <div class="col-md-3">
                {{ form_row(filterForm.createdDate) }}
            </div>
            <div class="col-md-4">
                {{ form_row(filterForm.client) }}
            </div>
            <div class="col-md-5">
                {{ form_row(filterForm.type) }}
            </div>

        </div>

        <div class="row">
            <div class="col-md-3">
                {{ form_row(filterForm.validationDate) }}
            </div>
            <div class="col-md-3">
                {{ form_row(filterForm.direction) }}
            </div>
            <div class="col-md-2">
                {{ form_row(filterForm.validated) }}
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <button class="btn-success btn" type="submit">Filtrar</button> |
                <a class="loadinmodal" data-response-type="json"  data-method="GET" data-sendformdata="form[name='App_reservations_purse_movement_filter']" data-action="{{ path('purse_movement_movements_report') }}" title="Genera un reporte Excel con un resumen de depositos y egresos a la cuenta MONEDERO, por día. Se necesita de un intervalo de fecha de validación.">
                    <div class="btn btn-info">{{ 'Reporte de movimientos en cuenta' }}</div>
                </a>
            </div>
        </div>

        {{ form_end(filterForm) }}
        <br>
        <div class="row">
            <div class="col-md-12" id="purses-balance-info">
                {{ include('backend/reservations/purseMovement/pursesBalanceInfo.html.twig') }}
            </div>
            <div class="col-md-12" id="purse-movements-validation-info">
                {{ include('backend/reservations/purseMovement/validationInfo.html.twig') }}
            </div>
        </div>

        <div class="card-content table-responsive">
            <table
                    data-unique-id="id"
                    data-show-refresh="true"
                    class="table table-hover"
                    data-toggle="table"
                    data-search="true"
                    data-pagination="true"
                    data-height="550"
                    data-page-list="[5, 10, 20, 50, 100, 200]"
                    data-show-columns="true"
                    data-side-pagination="server"
                    data-url="{{ fetchRoute }}">
                <thead>
                <tr>
                    {% for field in fields %}
                        {% if field.name in hiddenFields %}
                            <th data-field="{{ field.name }}" data-visible="false" data-sortable="{{ field.type ?'true':'false'}}">{{ field.name|trans|capitalize }}</th>
                        {% else %}
                            <th data-field="{{ field.name }}" data-sortable="{{ field.type ?'true':'false'}}">{{ field.name|trans|capitalize }}</th>
                        {% endif %}
                    {% endfor %}
                    <th data-field="actions" data-sortable="false">{{ "actions"|trans|capitalize }}</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>

    {% endblock %}