{% extends '@Payment/base.html.twig' %}

{% block title %}Form Forge Mapping Event{% endblock %}

{% block head %}
    {{ parent() }}
{% endblock %}

{% block dashbody %}
    <div class="container">
        <div class="row">
            <div class="col s12">
                <h5 class="center">{{ 'group.title.new_group'|trans }}</h5>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m6 offset-m3">
                <a href="{{ path('app_list_payments_modes') }}" class="waves-effect waves-light btn btn-background"><i class="material-icons left">chevron_left</i>{{ 'default.buttons.list_payment_mode'|trans }}</a>
                <a href="{{ path('app_edit_payment_mode', {'publicKey' : paymentMode.publicKey}) }}" class="waves-effect waves-light btn btn-background right">
                    <i class="material-icons left">keyboard_arrow_left</i>
                    {{ 'group.button.return_to_payment_mode'|trans }}
                </a>
            </div>
        </div>
        <div class="row">
            {#Message success#}
            {% for message in app.session.flashBag.get('success') %}
                <div class="card-panel teal lighten-5 flow-text col s12 m6 offset-m3 center-align message">
                    {{ message }}
                </div>
            {% endfor %}

            {#message errors#}
            {% for message in app.session.flashBag.get('errors') %}
                <div class="card-panel red lighten-2 flow-text col s12 m6 offset-m3 center-align message">
                    {{ message }}
                </div>
            {% endfor %}
        </div>

        <div class="row">
            <form id="new-payment-group" class="col s12" method="post" action="{{ path('app_new_payment_group', {'publicKey' : paymentMode.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('create_new_payment_group') }}">
                <div class="row">
                    <div class="input-field col s10 m6 offset-m3">
                        <input id="group-name" name ="group-name" type="text" required>
                        <label for="group-name">{{ 'group.label.new_payment_group'|trans }} <span class="req">*</span></label>
                    </div>

                    <div class="input-field col s2">
                        <a onclick="$('#new-payment-group').submit()" id="send-new-payment-group" class="waves-effect waves-ligh btn-flat disabled"><i class="material-icons left btn-background-text">send</i></a>
                    </div>
                </div>
            </form>
            <form id="choice-payment-group" class="col s12" method="post" action="{{ path('app_add_payment_to_group',{'publicKey' : paymentMode.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('add_payment_mode_to_group') }}">
                <div class="row">
                    <div class="col s12 m6 offset-m3">
                        <ul class="collapsible">
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">event</i>
                                    {{ 'group.collapsible.header'|trans }}
                                    <span class="badge">{{ groups | length }} {{ 'group.collapsible.badge'|trans }}</span>
                                </div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        {% for group in groups %}
                                            <div class="col s10">
                                                <label for="group-{{ group.id }}">
                                                    <input type="checkbox" id="group-{{ group.id }}" name="group-{{ group.id }}" class="filled-in green-check" value="{{ group.publicKey }}"{% if group in paymentMode.groups %} checked {% endif %}/>
                                                    <span>{{ group.groupName }}</span>
                                                </label>
                                            </div>
                                            <div class="col s2 center-align">
                                                <a href="javascript:update_payment_group('{{ group.publicKey }}', '{{ paymentMode.publicKey }}');"><i class="material-icons btn-background-text">edit</i></a>
                                                <a href="{{ path('app_remove_group',{'groupPK': group.publicKey, 'paymentModePK': paymentMode.publicKey}) }}"><i class="material-icons btn-background-text">delete_forever</i></a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="row">
                                    <div class="col s12">
                                        <div class="badge">
                                            <a onclick="$('#choice-payment-group').submit()" id="btn-choice-payment-group" class="waves-effect waves-ligh btn-flat right disabled">{{ 'default.send_form'|trans }}</a>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="update_payment_group" class="modal"></div>
{% endblock %}

{% block scripts %}
    {{ parent() }}

    <script>
        $(document).ready(function(){
            $('#update_payment_group').modal();
        });
        $('#group-name').on('keydown click change', function () {
            $('#group-namet').val() !== '' ? $('#send-new-payment-group').removeClass('disabled') : $('#send-new-payment-group').addClass('disabled');
        });

        // function confirmation() {
        $('input:checkbox').on('click change', function () {
            !$("input:checkbox").is(':checked') ? $('#btn-choice-payment-group').addClass('disabled') : $('#btn-choice-payment-group').removeClass('disabled');
        });

        function update_payment_group($group_PK, $payment_mode_pk){
{#            {{ path('app_update_payment_group',{'groupPK': group.publicKey, 'paymentModePK': paymentMode.publicKey}) }}#}
            let url ="{{ path('app_update_payment_group',{'groupPK': 'groupPK', 'paymentModePK': 'paymentMode'}) }}";
            url = url.replace('groupPK',$group_PK);
            url = url.replace('paymentMode',$payment_mode_pk);
            // console.log(url);

            $.ajax({
                url: url,
                type: 'GET',
                data: {},
                success: function(data){
                    let element = $('#update_payment_group');
                    element.html(data);
                    element.modal('open');
                    M.updateTextFields();
                }
            })
        }

        setTimeout(function (){
            $(".message").hide();
        }, 4000);

    </script>

{% endblock %}