{% extends 'base.html.twig' %}
{% block title %}User {{ user.email }}{% endblock %}
{% block body %}

    {{ include('users/_partials/nav.html.twig') }}

    <div class="d-flex flex-column flex-lg-row justify-content-between">

        <div class="col-12 col-lg-4 p-0">

            {% include 'users/_partials/details.html.twig' %}

        </div>

        <div class="col p-0 pl-md-5 mt-5 mt-md-0">
            <div class="card card-primary">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h2 class="m-0">Cards</h2>
                    <button class="btn btn-sm btn-success" data-toggle="modal" data-target="#card-modal">Create</button>
                </div>
                <div class="card-body p-5">
                    <div class="table-responsive">
                        <table class="table">
                            <thead>
                            <tr>
                                <th>Alias</th>
                                <th>PAN</th>
                                <th>Exp Month</th>
                                <th>Exp Year</th>
                                <th>Balance</th>
                                <th>Type</th>
                                <th class="text-center">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for wallet in wallets %}
                                {% for card in wallet.cards %}
                                    <tr>
                                        <td>{{ card.card_alias| default('No alias') }}</td>
                                        <td>{{ card.pan| default }}</td>
                                        <td>{{ card.exp_month| default }}</td>
                                        <td>{{ card.exp_year| default }}</td>
                                        <td>
                                            {% for balance in wallet.balances %}
                                                {{ balance.balance }} {{ balance.currency }}
                                            {% endfor %}
                                        </td>
                                        <td>{{ card.is_virtual ? 'Virtual' : 'Plastic' }}</td>
                                        <td class="text-center">
                                            {% if card.is_deactivated == true %}
                                                <a href="{{ path('cards_activate',{user:app.request.get('token'),wallet:wallet.token}) }}"
                                                        data-toggle="tooltip"
                                                        title="Activate"
                                                        class="btn btn-icon btn-light-success font-weight-bold">
                                                    <i class="fas fa-credit-card"></i>
                                                </a>
                                            {% endif %}

                                            {% if card.is_virtual == true %}
                                                <a href="{{ path('cards_to_plastic',{user:app.request.get('token'),wallet:wallet.token}) }}"
                                                   data-toggle="tooltip"
                                                   title="Convert to plastic"
                                                   class="btn btn-icon btn-light-primary font-weight-bold">
                                                    <i class="fas fa-exchange-alt"></i>
                                                </a>
                                            {% endif %}


                                            {% if card.is_deactivated == false %}
                                                <button data-toggle="modal"
                                                        data-card="{{ card.token }}"
                                                        data-target="#top-up-modal"
                                                        class="btn btn-icon btn-light-success font-weight-bold">
                                                    <i class="fas fa-hand-holding-usd"></i>
                                                </button>
                                                <button data-toggle="tooltip" title="Block"
                                                        class="btn btn-icon btn-light-danger font-weight-bold">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            {% else %}
                                                <button data-toggle="tooltip" title="Unblock" style="width: 40px;height: 40px"
                                                        class="btn btn-icon btn-sm btn-success">
                                                    <i class="fas fa-check"></i>
                                                </button>
                                            {% endif %}
                                        </td>
                                    </tr>
                                {% endfor %}
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <div class="modal" id="card-modal">
        <div class="modal-dialog  modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header">
                    Create wallet
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                {{ form_start(walletForm) }}
                <div class="modal-body">
                    {{ form_errors(walletForm) }}
                    {{ form_row(walletForm.wallet.program) }}
                    <hr>
                    <div class="row mb-0">
                        <div class="col-6">
                            {{ form_row(walletForm.wallet.isActive) }}
                        </div>
                        <div class="col-6">
                            {{ form_row(walletForm.linkToPrimary) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            {{ form_row(walletForm.card.type) }}
                            {{ form_row(walletForm.card.cardAlias) }}
                            {{ form_row(walletForm.card.cardDeliveryCountry) }}
                            {{ form_row(walletForm.card.cardDeliveryCity) }}
                        </div>
                        <div class="col-6">
                            {{ form_row(walletForm.card.cardDeliveryAddress1) }}
                            {{ form_row(walletForm.card.cardDeliveryAddress2) }}
                            {{ form_row(walletForm.card.cardDeliveryZip) }}
                            {{ form_row(walletForm.card.cardDeliveryMobilePhone) }}
                        </div>
                    </div>
                </div>
                <div class="card-footer text-center">
                    <button class="btn btn-success">Create</button>
                    <button class="btn btn-danger" type="button" data-dismiss="modal">Cancel</button>
                </div>
                {{ form_end(walletForm) }}
            </div>
        </div>
    </div>

    <div class="modal" id="top-up-modal">
        <div class="modal-dialog  modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body"></div>
            </div>
        </div>
    </div>

{% endblock %}

{% block js %}
    <script>
        if ('{{ walletForm.vars.errors | length }}' > 0) {
            $('#card-modal').modal('show');
        }

        $("[data-toggle='tooltip']").tooltip();
        $('.top-up-toggle').tooltip({
            title: 'Top up'
        })
    </script>
{% endblock %}