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

{% block body %}

    <div class="d-flex justify-content-end">
        <button class="btn btn-info" data-toggle="modal" data-target="#card-modal">Create</button>
    </div>

    <div class="table-responsive">
        <table class="table table-head-custom table-vertical-center">
            <thead>
                <tr>
                    <th>Email</th>
                    <th>Pan</th>
                    <th>Expiration</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Balance</th>
                    <th>Date created</th>
                    <th class="text-center">Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for card in cards %}
                    <tr>
                        <td>{{ card.email }}</td>
                        <td>{{ card.card_pan }}</td>
                        <td>{{ card.card_expire_month }}/{{ card.card_expire_year }}</td>
                        <td>{{ card.card_type }}</td>
                        <td>{{ card.status }}</td>
                        <td>{{ card.created_at | date('Y-m-d H:i') }}</td>
                        <td>{{ card.balance | number_format(2) }} {{ card.currency }}</td>
                        <td>
                            <div class="btn-group d-flex justify-content-center">

                                {% if card.status != 'VOID' or card.status == 'Deactivated' %}
                                    <button class="btn btn-primary"
                                            data-toggle="modal"
                                            data-balance="{{ card.balance_token }}"
                                            data-user="{{ card.user_token }}"
                                            data-target="#top-up-modal">
                                        <i class="fas fa-hand-holding-usd"></i>
                                    </button>
                                {% endif %}

                                {% if card.status == 'Activated' and (card.is_active == true or card.card_type == 'Virtual') %}
                                    <a class="btn btn-warning"
                                       href="{{ path('cards_activate',{user:card.user_token,wallet:card.wallet_token,status:'deactivate'}) }}"
                                       data-toggle="tooltip" title="Deactivate">
                                        <i class="fas fa-ban"></i>
                                    </a>
                                {% endif %}

                                {% if card.status == 'Deactivated' or  (card.is_active == false and card.card_type != 'Virtual') %}
                                    <a class="btn btn-primary"
                                       href="{{ path('cards_activate',{user:card.user_token,wallet:card.wallet_token,status:'activate'}) }}"
                                       data-toggle="tooltip" title="Activate">
                                        <i class="fas fa-check"></i>
                                    </a>
                                {% endif %}

                                {% if card.status != 'VOID' %}
                                    <a class="btn btn-danger"
                                       href="{{ path('cards_activate',{user:card.user_token,wallet:card.wallet_token,status:'void', balance: card.balance_token}) }}"
                                       data-toggle="tooltip" title="Void">
                                        <i class="fas fa-cut"></i>
                                    </a>
                                {% endif %}

                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    <div class="d-flex justify-content-center">
        {{ knp_pagination_render(cards) }}
    </div>

    <div class="modal" id="card-modal">
        <div class="modal-dialog  modal-dialog-centered ">
            <div class="modal-content">
                <div class="modal-header">
                    Create card
                    <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) }}
                    <div class="row mb-0">
                        <div class="col-12">
                            {{ form_row(walletForm.user.email) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6">{{ form_row(walletForm.user.firstName) }}</div>
                        <div class="col-6">{{ form_row(walletForm.user.lastName) }}</div>
                    </div>
                    <div class="row">
                        <div class="col-6">{{ form_row(walletForm.card.type) }}</div>
                        <div class="col-6">{{ form_row(walletForm.card.cardAlias,{label:'Reference'}) }}</div>
                    </div>
                    <div class="plastic {{ walletForm.card.vars.value.type != 2 ? 'd-none' : '' }}">
                        <p class="text-muted">Delivery details</p>
                        <hr>
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <div class="plastic {{ walletForm.card.vars.value.type != 2 ? 'd-none' : '' }}">
                                {{ form_row(walletForm.card.cardEmbossName, {label: 'Name on card'}) }}
                                {{ form_row(walletForm.card.cardDeliveryCountry, {label: 'Country'}) }}
                                {{ form_row(walletForm.card.cardDeliveryCity, {label: 'City'}) }}
                                {{ form_row(walletForm.card.cardDeliveryMobilePhone, {label: 'Mobile Phone'}) }}
                            </div>
                        </div>
                        <div class="col-6">
                            <div class="plastic {{ walletForm.card.vars.value.type != 2 ? 'd-none' : '' }}">
                                {{ form_row(walletForm.card.cardDeliveryAddress1, {label: 'Address 1'}) }}
                                {{ form_row(walletForm.card.cardDeliveryAddress2, {label: 'Address 2'}) }}
                                {{ form_row(walletForm.card.cardDeliveryZip, {label: 'Postal code'}) }}
                            </div>
                        </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-header">
                    Top-up
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <h4>Available balance: {{ mvc.balance }}{{ mvc.currency }}</h4>
                    <hr>
                    {{ form(topUpForm) }}
                </div>

            </div>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script>

        {% if walletForm.vars.valid == false %}
        $('#card-modal').modal('show')
        {% endif %}

        $('[data-target="#top-up-modal"]').on('click', function () {
            $('#top_up_user').val($(this).data('user'))
            $('#top_up_toBalance').val($(this).data('balance'))
        })

        $('[data-target="#top-up-modal"]').tooltip({title: 'Top-up'})

        $('#wallet_card_card_type').on('change', function (e) {

            if (parseInt($(this).val()) === 1) {
                $('.plastic').addClass('d-none')
            }

            if (parseInt($(this).val()) === 2) {
                $('.plastic').removeClass('d-none')
            }
        });

    </script>
{% endblock %}