{% extends parent_template %}

{% block title %}{{ parent() }} {% block insidetitle %}Dashboard - Form Forge Mapping Event{% endblock %}{% endblock %}

{% block content__header %}
    <div class="content__header">
        <h1>{% block ptitle %}Liste des tickets{% endblock %}</h1>
        {#        <div class="small">{% block pdesc %} % endblock %}</div>#}
    </div>
{% endblock %}

{% block dashbody %}
    <div class="container">
        <div class="row">
            <div class="col s12">
                <h5 class="center">{{ 'form_forge.mapping_event.title.mapping_event_title'|trans }}</h5>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m6 offset-m3">
                <a href="{{ path('form_forge_update_reason', {'publicKey': reason.publicKey}) }}" class="waves-effect waves-light btn btn-background">
                    <i class="material-icons left">keyboard_arrow_left</i>
                    {{ 'form_forge.default.return'|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="add-new-event" class="col s12" method="post" action="{{ path('form_forge_new_mapping_event', {'publicKey': reason.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('form_forge_new_mapping_event') }}">
                <div class="row">
                    <div class="input-field col s10 m6 offset-m3">
                        <input id="mapping-event" name ="event-name" type="text" required>
                        <label for="mapping-event">{{ 'form_forge.mapping_event.title.mapping_event_title'|trans }} <span class="req">*</span></label>
                    </div>

                    <div class="input-field col s2">
                        <a onclick="$('#add-new-event').submit()" id="send-new-mapping-event" class="waves-effect waves-ligh btn-flat" disabled><i class="material-icons left btn-background-text">send</i></a>
                    </div>
                </div>
            </form>
            <form id="form-choice-event-name" class="col s12" method="post" action="{{ path('form_forge_choice_mapping_event',{'publicKey': reason.publicKey}) }}">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('form_forge_choice_mapping_event') }}">
                <div class="row">
                    <div class="col s12 m6 offset-m3">
                        <ul class="collapsible">
                            <li>
                                <div class="collapsible-header">
                                    <i class="material-icons">event</i>
                                    {{ 'form_forge.mapping_event.label.list_event'|trans }}
                                    <span class="badge">{{ events | length }} {{ 'form_forge.mapping_event.label.count_event'|trans }}</span>
                                </div>
                                <div class="collapsible-body">
                                    <div class="row">
                                        {% for event in events %}
                                            <div class="col s10">
                                                <label>
                                                    <input type="checkbox" name="event-{{ event.id }}" class="filled-in" value="{{ event.id }}" {% if event in reason.formForgeMappingEvents %} checked {% endif %}/>
                                                    <span>{{ event.name }}</span>
                                                </label>
                                            </div>
                                            <div class="col s2 center-align">
                                                <a href="{{ path('form_forge_remove_mapping_event',{'id': event.id, 'publicKey': reason.publicKey}) }}"><i class="material-icons btn-background-text">delete_forever</i></a>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </li>
                            <div class="row">
                                <div class="col s12">
                                    <div class="badge">
                                        <a onclick="$('#form-choice-event-name').submit()" id="btn-choice-event" class="waves-effect waves-ligh btn-flat right" disabled>{{ 'form_forge.default.send'|trans }}</a>
                                    </div>
                                </div>
                            </div>
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}

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

    <script>
        $('.collapsible').collapsible();
        $('#mapping-event').on('keydown mousedown mouseout click change', function () {
            $('#mapping-event').val()!=='' ? $('#send-new-mapping-event').attr('disabled', false ):$('#send-new-mapping-event').attr('disabled', true);
        });

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

        // function confirmation() {
        $('input:checkbox').on('click change', function () {
            !$("input:checkbox").is(':checked') ? $('#btn-choice-event').attr('disabled', true) : $('#btn-choice-event').attr('disabled', false);
        });

    </script>

{% endblock %}